diff --git a/src/components/site/order_modal/order_modal.vue b/src/components/site/order_modal/order_modal.vue
new file mode 100644
index 0000000..cd085df
--- /dev/null
+++ b/src/components/site/order_modal/order_modal.vue
@@ -0,0 +1,412 @@
+<template>  
+	<view class="fixed-mask" @click="modalClose">
+		<view class="order-modal" @click.stop="_=>false">
+			<view class="om-title">{{ getTitle(queryInfo.venueInfo.type) }}</view>
+			<image class="om-close"  @click="modalClose" mode="aspectFit" src="/static/images/icon/x_close.png"></image>
+			<view class="om-name-line">
+				<view class="onl-view">{{ orderInfo.stadium_name || '-' }}</view>
+				<!-- 0、1、2、8 -->
+				<view class="onl-view" v-if="isShowStatus">{{ getStatusTxt(orderInfo.pay_status) }}</view>
+			</view>
+			<view class="om-info-line">
+				<view class="oil-view">订单编号：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.order_no || '' }}</view>
+				</view>
+			</view>
+			<view class="om-info-line" v-if="orderInfo.type != 'take_up_venue'">
+				<view class="oil-view">创建时间：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.created_at || ' ' }}</view>
+				</view>
+			</view>
+			<view class="om-info-line" v-if="orderInfo.type != 'take_up_venue'">
+				<view class="oil-view">验证码：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.verifyt_code || ' ' }}</view>
+				</view>
+			</view>
+			<view class="om-info-line" v-if="orderInfo.type == 'mini_program'">
+				<view class="oil-view">手机号码：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.mobile || ' ' }}</view>
+				</view>
+			</view>
+
+			<block v-if="orderInfo.type == 'take_up_venue'" >
+				<view class="om-info-line">
+					<view class="oil-view">是否联动开灯：</view>
+					<view class="oil-view">
+						<view class="ov-view">{{ orderInfo.light_up?'是':'否'}}</view>
+					</view>
+				</view>
+				<view class="om-info-line">
+					<view class="oil-view">收取金额：</view>
+					<view class="oil-view">
+						<view class="ov-view">{{ orderInfo.amount || '0' }}</view>
+					</view>
+				</view>
+				<view class="om-info-line">
+					<view class="oil-view">占用原因：</view>
+					<view class="oil-view">
+						<view class="ov-view">{{ orderInfo.reason || ' ' }}</view>
+					</view>
+				</view>
+				<view class="om-info-line">
+					<view class="oil-view">操作人：</view>
+					<view class="oil-view">
+						<view class="ov-view">{{ orderInfo.operator || ' ' }}</view>
+					</view>
+				</view>
+			</block>
+			
+
+			<view class="om-border"></view>
+
+			<view class="om-name-line">
+				<view class="onl-view">预订信息</view>
+			</view>
+			<view class="om-info-line">
+				<view class="oil-view">预订项目：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.stadium_name || ' ' }}</view>
+				</view>
+			</view>
+			<view class="om-info-line">
+				<view class="oil-view">预订日期：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.date || ' ' }}</view>
+				</view>
+			</view>
+			<view class="om-info-line">
+				<view class="oil-view">预订场次：</view>
+				<view class="oil-view">
+					<view class="ov-view" v-for="(e, i) in orderInfo.sessions" :key="i">
+						{{ e.venue_name || '' }}   {{ e.duration || '' }}   （￥{{ e.price || '' }} ）
+					</view>
+				</view>
+			</view>
+			<view class="om-total" v-if="isShowTotalAmoutn" >实付款 ￥{{ orderInfo.amount || '0' }}</view>
+			<!-- 管理员占用 -->
+			<view class="om-btns" v-if="orderInfo.type == 'take_up_venue'">
+				<view class="ob-view" @click="toShare">分享给朋友</view>
+				<view class="ob-view red" @click="cancelOccupy">取消占用</view>
+			</view>
+			<!-- 小程序预定 -->
+			<view class="om-btns" v-if="orderInfo.type == 'mini_program'">
+				<view class="ob-view" @click="toOrderInfo">订单详情</view>
+				<view class="ob-view red" @click="refundBtn">退款</view>
+			</view>
+			<!-- 课程预定 -->
+			<view class="om-btns" v-if="orderInfo.type == 'course_venue'">
+				<view class="ob-view" @click="toCouseInfo">约课详情</view>
+			</view>
+			<!-- 固定场 -->
+			<view class="om-btns" v-if="orderInfo.type == 'fixed_venue'">
+				<!-- 测试：固定场地没有详情 -->
+				<view class="ob-view" v-if="orderInfo.pay_status != 0" @click="toOrderInfo">订单详情</view>
+				<view class="ob-view red" @click="fixedCancelOccupy" v-if="orderInfo.pay_status!=2">取消订场</view>
+				<!-- <view class="ob-view red">退款</view> -->
+			</view>
+		</view>
+	</view>
+    
+</template>
+
+<script>
+import { API } from '../../../js/api'
+import { servers } from '../../../js/server'
+import util from '../../../utils/util'
+export default {
+	computed: {
+		// 是否显示使用状态
+		isShowStatus(){
+			let { orderInfo } = this;
+			// 测试： 固定场地没有状态
+			return orderInfo.type == 'mini_program' || orderInfo.type == 'fixed_venue'
+		},
+
+		isShowTotalAmoutn(){
+			let { orderInfo } = this;
+
+			return orderInfo.type == 'mini_program' || orderInfo.type == 'course_venue' || orderInfo.type == 'fixed_venue' 
+		}
+	},
+	props: {
+		queryInfo: {
+			type: Object,
+			default: {}
+		}
+	},
+	data(){
+		return {
+			orderInfo: {}
+		}
+	},
+    mounted(){
+		this.getOrderInfo();
+	},
+	methods: {
+		fixedCancelOccupy: util.debounce(function(){
+			let { orderInfo, queryInfo } = this;
+			util.showLoad();
+			servers.get({
+				url: API.venue.FixedOccupyCancel,
+				data: {
+					id: orderInfo.fix_venue_id,
+				},
+				isDefaultGet: false,
+			})
+			.then(res=>{
+				util.hideLoad();
+				if(res.data.code == 0){	
+					setTimeout(_=>this.$emit('refresh'), 1200);
+					util.showNone(res.data.message || '操作成功！');
+				}else{
+					util.showNone(res.data.message || '操作失败！');
+				}
+			})
+			.catch(util.hideLoad)
+		}, 300, true),
+		toCouseInfo(){
+			util.showNone('待开放')
+		},
+		refundBtn: util.debounce(function(){
+			let { orderInfo, queryInfo } = this;
+			servers.post({
+				url: API.venue.orderRefund,
+				data: {
+					brand_id: queryInfo.brand_id,
+					order_no: orderInfo.order_no,
+				},
+				isDefaultGet: false,
+			})
+			.then(res=>{
+				if(res.data.code == 0){
+					util.showNone(res.data.message || '操作成功！');
+					setTimeout(_=>this.$emit('refresh'), 1200);
+				}else{
+					util.showNone(res.data.message || '操作失败！');
+				}
+			})
+		}, 300, true),
+		toOrderInfo(){
+			let { orderInfo, queryInfo } = this;
+			let _query = {}
+			_query["stadium_id"] = queryInfo.stadium_id
+			_query["order_no"] = orderInfo.order_no
+			_query["order_type"] = 3
+			util.routeTo(`/subpackage/device/pages/order_details/order_details?query=${util.jsonStr(_query)}`,'nT');
+		},
+		toShare(){
+			let { orderInfo, queryInfo } = this;
+			let _qyStr = `?brand_id=${queryInfo.brand_id}&order_no=${orderInfo.order_no}`
+			util.routeTo(`/pages/site/occupy_share/occupy_share${_qyStr}`, 'nT');
+		},	
+
+		getStatusTxt(status){
+			switch(status){
+                case 0:
+                    return '待扣款'
+                case 1:
+                    return '待使用'
+                case 2:
+                    return '已使用'
+				case 3:
+                    return '已失效'
+                case 8:
+                    return '使用中'
+                default: return '-'
+            }
+		},
+		getTitle(type){
+            switch(type){
+                case 'no_price_venue':
+                    return '无法订场'
+                case 'empty_venue':
+                    return '-'
+                case 'mini_program':
+                    return '小程序订场'
+                case 'take_up_venue':
+                    return '管理员占用'
+                case 'course_venue':
+                    return '课程预定'
+                case 'play_venue':
+                    return '约玩占用'
+                case 'fixed_venue':
+                    return '固定场锁定'
+                default: return '-'
+            }
+        },
+		cancelOccupy: util.debounce(function(){
+			let { orderInfo, queryInfo } = this;
+			servers.get({
+				url: API.venue.takeUpCancel,
+				data: {
+					brand_id: queryInfo.brand_id,
+					order_no: orderInfo.order_no,
+				},
+				isDefaultGet: false,
+			})
+			.then(res=>{
+				if(res.data.code == 0){	
+					setTimeout(_=>this.$emit('refresh'), 1200);
+					util.showNone(res.data.message || '操作成功！');
+				}else{
+					util.showNone(res.data.message || '操作失败！');
+				}
+			})
+		}, 300, true),
+		modalClose(){
+			this.$emit('close');
+		},
+		getOrderInfo(){
+			util.showLoad();
+			let { queryInfo } = this;
+			servers.post({
+				url: API.venue.dashboardInfo,
+				data: {
+					brand_id: queryInfo.brand_id,
+					stadium_id: queryInfo.stadium_id,
+					venue_id: queryInfo.venue_id,
+					date: queryInfo.date,
+					duration: queryInfo.duration,
+				},
+				isDefaultGet: false,
+			})
+			.then(res=>{
+				util.hideLoad();
+				if(res.data.code == 0){
+					this.orderInfo = res.data.data || {}
+				}else{
+					// util.showNone(res.data.message || '加载失败！');
+					this.modalClose();
+					util.showModal({
+						title: '提示',
+						content: res.data.message || '加载失败！',
+						success: mRes=> {
+							
+						}
+					})
+				}
+			})
+			.catch(util.hideLoad)
+				
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	@import '~style/public.scss';
+	.fixed-mask{
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		z-index: 10;
+		width: 100%;
+		background-color: rgba($color: #000000, $alpha: .5);
+	}
+    .order-modal{
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		padding-left: 30upx;
+		padding-right: 30upx;
+		padding-top: 48upx;
+		padding-bottom: 0upx;
+		padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+		padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        background-color: #fff;
+		.om-close{
+			position: absolute;
+			right: 30upx;
+			top: 30upx;
+			width: 34upx;
+			height: 34upx;
+		}
+		.om-title{
+			margin-bottom: 34upx;
+			text-align: center;
+			font-size: 32upx;
+			line-height: 44upx;
+			color: #1a1a1a;
+			font-weight: 500;
+		}
+		.om-name-line{
+			margin-bottom: 12upx;
+			@include centerFlex(space-between);
+			.onl-view{
+				&:first-child{
+					line-height: 40upx;
+					font-size: 28upx;
+					color: #1a1a1a;
+				}
+				&+.onl-view{
+					line-height: 40upx;
+					font-size: 28upx;
+					color: $themeColor;	
+				}
+			}
+		}
+		.om-info-line{
+			display: flex;
+			align-items: baseline;
+			.oil-view{
+				font-size: 28upx;
+				line-height: 40upx;
+				color: #9C9C9F;
+				&:first-child{
+					flex-shrink: 0;
+				}
+				&+.oil-view{
+					flex-grow: 1;
+					.ov-view{
+						font-size: 28upx;
+						line-height: 40upx;
+						color: #1a1a1a;
+						@include textHide(1);
+					}
+				}
+			}
+		}
+		.om-border{
+			margin-top: 20upx;
+			margin-bottom: 18upx;
+			height: 2upx;
+			background-color: #D8D8D8;
+		}
+		.om-total{
+			margin-top: 20upx;
+			margin-bottom: 40upx;
+			text-align: right;
+			line-height: 40upx;
+			font-size: 28upx;
+			color: #1a1a1a;
+		}
+		.om-btns{
+			margin-top: 40upx;
+			margin-bottom: 10upx;
+			@include centerFlex(flex-end);
+			.ob-view{
+				margin-left: 20upx;
+				width: 210upx;
+				height: 80upx;
+				border: 2upx solid $themeColor;
+				text-align: center;
+				line-height: 76upx;
+				border-radius: 10upx;
+				font-size: 32upx;
+				font-weight: 500;
+				color: $themeColor;
+				&.red{
+					border-color: #EA5061;
+					color: #EA5061;
+				}
+			}
+		}
+    }
+</style>
\ No newline at end of file
diff --git a/src/js/api.js b/src/js/api.js
index 90f0a4b..89e10e2 100644
--- a/src/js/api.js
+++ b/src/js/api.js
@@ -60,10 +60,23 @@ API['employee'] = {
 
 API['venue'] = {
   venueTypes: `${ORIGIN}/stadium/venue/types`,  // 场馆类型
-  venueList: `${ORIGIN}/stadium/book/list`,  // 场地列表
-  venueTakeUp: `${ORIGIN}/admin/assistant/venue/takeUp`,  // 商家助手-占用场地提交
+  // venueList: `${ORIGIN}/stadium/book/list`,  // 场地列表
+
+  venueTakeUp: `${ORIGIN}/admin/stadium/venue/takeUp`,  // 商家助手-占用场地提交
   takeUpList: `${ORIGIN}/admin/timeSelect/list/4`,  // 商家助手-占用场地列表
   setStatus: `${ORIGIN}/admin/timeSelect/setStatus`,  // 商家助手-占用场地列表
+
+  // 20210726 新增
+  venueList: `${ORIGIN}/admin/stadium/venue/dashboard/list`,  // 场地列表 20210726 看板新增修改
+  dashboardInfo: `${ORIGIN}/admin/stadium/venue/dashboard/detail`,  // 看板详情
+  takeUpVerifyQr: `${ORIGIN}/admin/stadium/venue/takeUpVerifyQr`,  // 商家助手 - 占用核销码
+  takeUpShareQr: `${ORIGIN}/admin/stadium/venue/takeUpShareQr`,  // 商家助手 - 占用分享码
+  takeUpCancel: `${ORIGIN}/admin/stadium/venue/takeUpCancel`,  // 商家助手-取消占用场地
+  orderRefund: `${ORIGIN}/admin/stadium/order/cancel`,  // 商家助手 - 退款
+
+  // 20210806 
+  FixedOccupyCancel: `${ORIGIN}/admin/VenueNumberFixedOccupy/cancel`,  // 固定场取消订场
+
 }
 
 // 2.1 核销
diff --git a/src/pages.json b/src/pages.json
index 648f733..116db35 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,5 +1,6 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -11,6 +12,18 @@
 			}
 		},
 		{
+			"path": "pages/site/occupy_share/occupy_share",
+			"style": {
+				"navigationBarTitleText": "分享"
+			}
+		},
+		{
+			"path": "pages/site/occupy_success/occupy_success",
+			"style": {
+				"navigationBarTitleText": "占用场地"
+			}
+		},
+		{
 			"path": "pages/site/order_list/order_list",
 			"style": {
 				"navigationBarTitleText": "占用场地"
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index b71754f..5589bbf 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -109,8 +109,9 @@
 		},
 		{
 			id: 5,
-			name: '场地管理',
-			path: '/pages/site/order_list/order_list',
+			name: '场地看板',
+			// path: '/pages/site/order_list/order_list', // 20210804 不要占用列表
+			path: '/pages/site/manage/manage',
 			serverKey: 1009  // 后端对应权限编号
 		},
 		{
diff --git a/src/pages/site/confirm/confirm.vue b/src/pages/site/confirm/confirm.vue
index 4578539..b869412 100644
--- a/src/pages/site/confirm/confirm.vue
+++ b/src/pages/site/confirm/confirm.vue
@@ -24,10 +24,18 @@
                     <view>预定场次：</view>
                     <view>
                         <block v-for="(e, i) in occupyInfo.venueList" :key="i">
-                            <view>{{e.parentObj.name || '-'}} {{e.time || '-'}} (¥{{e.price || '-'}})</view>
+                            <view>{{e.parentObj.venue_name || '-'}} {{e.durations || '-'}} (¥{{e.price || '-'}})</view>
                         </block>
                     </view>
                 </view>
+                <view class="soi-total">
+                    <text>小计（共{{(occupyInfo.venueList&&occupyInfo.venueList.length) || 0}}场）</text>
+                    ¥{{ totalPrice || 0 }}
+                </view>
+            </view>
+            <view class="sc-switch">
+                <view><view><text>*</text>是否联动开灯</view><switch @change="switchChange" color="#009874"></switch></view>
+                <view>联动开灯开启后，会根据占用时间自动开灯</view>
             </view>
             <view class="sc-ipt">
                 <view class="si-price">
@@ -57,36 +65,50 @@ export default {
     data(){
         return {
             ocPrice: '',
-            ocReaon: ''
+            ocReaon: '',
+            light_up: false,
         }
     },
     computed: {
         ...mapState([ 'occupyInfo' ]),
+        totalPrice(){
+            let { occupyInfo } = this;
+            let _list = occupyInfo.venueList || [];
+            if(!_list.length)return 0;
+            let _price = 0;
+            _list.forEach(e=>_price += +e.price);
+            console.warn(_price)
+            return _price.toFixed(2);
+        }
     },
     onLoad(){
         console.log(this.occupyInfo)
     },
     methods: {
+        switchChange(e){
+            this.light_up = e.detail.value
+        },
         confirmOccupy: util.debounce(function(){
             let { storeInfo, dateInfo, venueList, typeInfo } = this.occupyInfo;
-            let { ocPrice, ocReaon } = this;
-            console.log(ocPrice, ocReaon);
+            let { ocPrice, ocReaon, light_up } = this;
             
             servers.post({
                 url: API.venue.venueTakeUp,
                 data: {
+                    brand_id: storeInfo.brand_id,
                     reason: ocReaon,
                     amount: +ocPrice,
                     group: storeInfo.id,
                     date: dateInfo.dateStr,
                     items: venueList.map(el=>{
                         return {
-                            venue_id: el.parentObj.id,
-                            venue_name: el.parentObj.name,
-                            duration: el.time,
+                            venue_id: el.parentObj.venue_id,
+                            venue_name: el.parentObj.venue_name,
+                            duration: el.durations,
                             price: el.price
                         }
-                    })
+                    }),
+                    light_up,
                 },
                 isDefaultGet: false
             })
@@ -94,19 +116,22 @@ export default {
                 if(res.data.code == 0){
                     
                     util.showNone(res.data.message || '操作成功！');
-                    setTimeout(_=>{
-                        util.routeTo();
-                        util.previousPageFunction({ // 刷新占用列表
-                            fnName: 'refreshList',
-                            query: null
-                        })
-                    }, 1200)
+                    let _res = res.data.data || {};
+                    let _qrStr = `?brand_id=${_res.brand_id}&order_no=${_res.order_no}`
+                    util.routeTo(`/pages/site/occupy_success/occupy_success${_qrStr}`, 'rT');
+                    // setTimeout(_=>{
+                    //     util.routeTo();
+                    //     util.previousPageFunction({ // 刷新占用列表
+                    //         fnName: 'refreshList',
+                    //         query: null
+                    //     })
+                    // }, 1200)
                 }else{
                     util.showNone(res.data.message || '操作失败！');
                 }
             })
 
-        }),
+        }, 300, true),
     },
 }
 </script>
@@ -135,7 +160,6 @@ export default {
                     vertical-align: middle;
                     width: 34upx;
                     height: 34upx;
-                    background-color: skyblue;
                 }
             }
             .sa-detail{
@@ -182,10 +206,45 @@ export default {
                     }
                 }
             }
+            .soi-total{
+                margin-top: 30upx;
+                text-align: right;
+                font-size: 28upx;
+                line-height: 52upx;
+                color: #333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                >text{
+                    color: #9a9a9d;
+                }
+            }
+        }
+        .sc-switch{
+            padding: 40upx 24upx 0;
+            >view{
+                &:first-child{  
+                    margin-bottom: 10upx;
+                    @include centerFlex(space-between);
+                    >view{
+                        font-size: 32upx;
+                        color: #333;
+                        >text{
+                            color: #EA5061;
+                        }
+                    }
+                }
+                &+view{
+                    padding: 0 24upx;
+                    font-size: 24upx;
+                    line-height: 34upx;
+                    color: #9A9A9D;
+                }
+            }
         }
         .sc-ipt{
             margin: 0 auto;
-            padding-top: 54upx;
+            padding-top: 40upx;
             padding-bottom: 62upx;
             width: 682upx;
             .si-price{
diff --git a/src/pages/site/manage/manage.vue b/src/pages/site/manage/manage.vue
index c973341..b063911 100644
--- a/src/pages/site/manage/manage.vue
+++ b/src/pages/site/manage/manage.vue
@@ -16,7 +16,30 @@
                 </picker>
                 <view class="st-tip">{{curTypeInfo.rule_text || '-'}}</view>
             </view>
-            <picker mode="date" @change="timeSlotChange">
+            <view class="sh-date" v-if="dateList.length">
+                <picker 
+                    mode="date" 
+                    :value="dateList[0].dateStr" 
+                    data-type='start' 
+                    @change="datePickerChange">
+                    <view class="sd-box">
+                        <text>{{ dateList[0].ZhDateStr || '-' }}</text>
+                        <view></view>
+                    </view>
+                </picker>
+                <text>至</text>
+                <picker 
+                    mode="date" 
+                    :value="dateList[dateList.length - 1].dateStr" 
+                    data-type="end"
+                    @change="datePickerChange">
+                    <view class="sd-box">
+                        <text>{{ dateList[dateList.length - 1].ZhDateStr || '-' }}</text>
+                        <view></view>
+                    </view>
+                </picker>
+            </view>
+            <picker mode="date" @change="timeSlotChange" v-if="false">
                 <view class="sh-time" v-if="dateList.length>1">
                     <text>{{dateList[0].ZhDateStr || '-'}} — {{dateList[dateList.length-1].ZhDateStr || '-'}}</text>
                     <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
@@ -38,24 +61,18 @@
         </scroll-view>
         <view class="sm-venue">
             <view class="sv-time-interval">
-                <view class="sti-item"></view>
-                <view class="sti-item" v-for="(e,i) in venueList[0].items" :key="i">{{e.duration || '-'}}</view>
+                <view class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
+                    <view>{{ e || '-' }}</view>
+                </view>
             </view>
             <scroll-view class="sti-venue-list" enable-flex scroll-x :style="venueAreaSize">
                 <view class="svl-list" v-for="(e, i) in venueList" :key="i">
-                    <view class="sl-item">{{e.name || '-'}}</view>
+                    <view class="sl-item">{{e.venue_name || '-'}}</view>
                     <view class="sl-item" v-for="(k,j) in e.items" :key="j" @click="venueSelect(i,j)">
                         <view
-                            :class="[
-                                k._isSelect?'green':
-                                k.is_take_up?'black':
-                                !k.is_valid?'grey':''
-                            ]"
+                            :class="[ k._isSelect? 'cyan' : '', getVenueStatusnInfo(k).className ]"
                         >
-                            {{
-                                k.is_take_up?'已占用':
-                                !k.is_valid?'已售':`¥${k.price || 0}`
-                            }}
+                            {{ getVenueStatusnInfo(k).zh_text || '-' }}
                         </view>
                     </view>
                 </view>
@@ -66,24 +83,28 @@
                 <!-- <view class="sfb-continuity-tip">9点至10点为连场预订,请谅解</view> -->
                 <view class="sfb-selected-section">
                     <view class="sss-bar">
-                        <view>已选择场次<text>4</text></view>
+                        <view>已选择场次<text>{{ selectedVenueList.length || 0 }}</text></view>
                         <view @click="clearSelectedList">清空</view>
                     </view>
                     <scroll-view class="sss-list" scroll-y>
                         <view class="sl-item" v-for="(e,i) in selectedVenueList" :key="i">
-                            <view class="si-time">{{e.time || '-'}}</view>
-                            <view class="si-name">{{e.parentObj.name || '-'}}</view>
+                            <view class="si-time">{{e.durations || '-'}}</view>
+                            <view class="si-name">{{e.parentObj.venue_name || '-'}}</view>
                         </view>
                     </scroll-view>
                 </view>
             </block>
             <view class="sfb-tip-list" v-else>
-                <view class="stl-item" v-for="(e,i) in ['可预订','已售完','已占用','已选择']" :key="i">
-                    <view></view>
-                    <view>{{e}}</view>
+                <view 
+                    class="stl-item" 
+                    v-for="(e,i) in tipArray" 
+                    :key="i"
+                >
+                    <view :class="[ e.c ]"></view>
+                    <view>{{ e.n || '-'}}</view>
                 </view>
             </view>
-            <view class="sfb-btn-bar">
+            <view class="sfb-btn-bar" v-if="selectedVenueList.length">
                 <view class="sbb-price"><text>¥</text>{{totalPrice || '0.00'}}</view>
                 <view class="sbb-btn" hover-class="hover-active" @click="toOrderConfirm">
                     {{selectedVenueList.length?'提交订单':'请选择场地'}}
@@ -93,15 +114,20 @@
         <view class="sm-fixed-tip" v-if="occupyTip!==''">
             <text>{{occupyTip || '-'}}</text>
         </view>
+        <order-modal @close="boardInfo=null" @refresh='refreshVenues'  v-if="boardInfo!=null" :query-info="boardInfo"></order-modal>
     </view>
 </template>
 
 <script>
 import { API } from '../../../js/api';
 import { servers } from '../../../js/server';
-import util from '../../../utils/util'
+import util from '../../../utils/util';
+import order_modal from '../../../components/site/order_modal/order_modal.vue';
 let tipTimer = null;
 export default {
+    components: {
+        'order-modal': order_modal
+    },
     data(){
         return {
             storeList: [],          // 店铺列表
@@ -115,10 +141,30 @@ export default {
             totalPrice: 0,
             occupyTip: '', // 占用提示
             venueAreaSize: '', // 场地滚动区域大小
+            tipArray: [
+                { n: '空场', c: '' },
+                { n: '小程序预定', c: 'green' },
+                { n: '课程预定', c: 'pistac' },
+                { n: '固定场锁定', c: 'blue' },
+                { n: '已占用', c: 'black' },
+            ],
+            // 订场看板信息
+            boardInfo: null, // { brand_id，stadium_id, venue_id, date, duration }
+
         }
     },
     computed: {
-        
+        // 场地时间间隔列表
+        venueTimeList(){
+            let { venueList } = this;
+            if(!venueList.length || !venueList[0] || !venueList[0].items || !venueList[0].items.length)return [];
+            let _obj = {};
+            return ([].concat(...venueList[0].items.map(e=>e.durations&&e.durations.split('-')))).filter(e=>{
+                let _bol = !!_obj[e];
+                !_bol?_obj[e] = true:'';
+                return !_bol;
+            })
+        }
     },
     onUnload(){
         this.occupyTip = '';
@@ -143,15 +189,10 @@ export default {
             let _dateArr = this.getDateList({}) || [];
             this.dateList = _dateArr;
             this.curDateInfo = _dateArr[0] || {};
+            console.warn(_dateArr,'_dateArr')
             util.hideLoad();
             return  this.$nextTick(_=>this.refreshVenues());
-            // let _venueList = await this.getVenueList({
-            //     type_key: _curType.key,
-            //     stadium_id: _curStore.id,
-            //     date: _dateArr[0].dateStr,
-            // })
-            // if(!_venueList.length)return util.showNone('没有场地信息！')
-            // this.venueList = _venueList || [];
+            
             
         }catch(err){
             util.hideLoad();
@@ -159,12 +200,59 @@ export default {
         }
     },
     methods: {
+        getVenueStatusnInfo(info){
+            // 超时未订
+            if(info.overdue&&info.type == 'empty_venue')return { zh_text: info.message || info.price, type: 'overdue', className: 'gray', }
+            switch(info.type){
+                case 'no_price_venue':
+                    return { zh_text: info.message || '无法订场', type: info.type, className: 'grey', }
+                case 'empty_venue':
+                    return { zh_text: info.message, type: info.type, className: '', }
+                case 'mini_program':
+                    return { zh_text: info.message || '小程序订场', type: info.type, className: 'green', }
+                case 'take_up_venue':
+                    return { zh_text: info.message || '管理员占用', type: info.type, className: 'black', }
+                case 'course_venue':
+                    return { zh_text: info.message || '课程预定', type: info.type, className: 'pistac', }
+                case 'play_venue':
+                    return { zh_text: info.message || '约玩占用', type: info.type, className: 'black', }
+                case 'fixed_venue':
+                    return { zh_text: info.message || '固定场锁定', type: info.type, className: 'blue', }
+                default: return {}
+                    
+                    
+            }
+        },
+        // 20210726 时间范围选择，兼容旧逻辑
+        datePickerChange(e){
+            let { dateList } = this;
+            let _type = e.currentTarget.dataset.type;
+            let _value = e.detail.value;
+            let _selectedDateTimestamp = new Date(_value.replace(/\-/g, '/')).getTime(); // 选择当天0点时间戳
+            let _todayTimestamp = new Date(new Date().toLocaleDateString().replace(/\-/g, '/')).getTime(); // 当天0点
+            let _oneDateTimestamp = 24*60*60*1000;
+            // if(_selectedDateTimestamp<_todayTimestamp)return util.showNone(`请选择${new Date().toLocaleDateString().replace(/\-/g, '/')}之后日期`); 
+            let _startTimestamp = _type == 'start' ? _selectedDateTimestamp : new Date(dateList[0].dateStr.replace(/\-/g, '/')).getTime();
+            let _endTimestamp =  _type == 'end' ? _selectedDateTimestamp: new Date(dateList[dateList.length-1].dateStr.replace(/\-/g, '/')).getTime();
+            if(_endTimestamp<_startTimestamp)return util.showNone('请选择正常范围！');
+            let _dateLength = +(((_endTimestamp - _startTimestamp) /_oneDateTimestamp + 1).toFixed());
+            if(_dateLength>7)return util.showNone('不能超过7天范围！');
+            let _dateArr = this.getDateList({
+                startTimestamp: _startTimestamp,
+                length: _dateLength
+            }) || [];
+            this.dateList = _dateArr;
+            this.curDateInfo = _dateArr[0] || {};
+            this.$nextTick(_=>this.refreshVenues());
+            // if(_type=='end'&&_selectedDateTimestamp-_todayTimestamp<_oneDateTimestamp)return util.showNone('时间段最小一天！'); 
+
+        },
         timeSlotChange(e){
             console.log(e);
             let _timestamp = new Date(e.detail.value.replace(/\-/g, '/')).getTime(); // 当天0点时间
             if(new Date().getTime() - _timestamp > 24*60*60*1000)return util.showNone('请选择正确时间！'); // 一天前
             let _dateArr = this.getDateList({
-                dateTimeStamp: _timestamp,
+                startTimestamp: _timestamp,
             }) || [];
             this.dateList = _dateArr;
             this.curDateInfo = _dateArr[0] || {};
@@ -177,13 +265,16 @@ export default {
             try{
                 util.showLoad();
                 this.venueList = [];
-                let _venueList = await this.getVenueList({
+                this.boardInfo = null;
+                let _res = await this.getVenueList({
                     type_key: curTypeInfo.key || '',
                     stadium_id: curStoreInfo.id || '',
                     date: curDateInfo.dateStr || '',
                 })
-                if(!_venueList.length)return util.showNone('没有场地信息！');
-                this.venueList = _venueList || [];
+                let _list = _res.dashboard || [];
+                if(!_list.length)return util.showNone('没有场地信息！');
+
+                this.venueList = _list || [];
                 this.$nextTick(_=>{
                     this.getSelectedVenues();
                     this.setVenueAreaSize();
@@ -212,19 +303,34 @@ export default {
             let { venueList } = this;
             let _venueList = venueList.slice();
             let _curTarget = { ..._venueList[i].items[j] };
-            if(_curTarget.is_take_up){
-                let _str = `操作人:${_curTarget.operator || '-'}\n收取金额: ${_curTarget.price || 0}\n原因: ${_curTarget.take_up_reason || '-'}`;
-                this.showOccupyTip(_str)
-                return
+            // if(_curTarget.is_take_up){
+            //     let _str = `操作人:${_curTarget.operator || '-'}\n收取金额: ${_curTarget.price || 0}\n原因: ${_curTarget.take_up_reason || '-'}`;
+            //     this.showOccupyTip(_str)
+            //     return
+            // }
+            if(_curTarget.overdue&&_curTarget.type == 'empty_venue')return // 超时未定
+            // 设置看板信息
+            if(_curTarget.type !== 'empty_venue'&& _curTarget.type !== 'no_price_venue'){
+                let { curStoreInfo } = this;
+                let _venueInfo = { ..._venueList[i] };
+                return this.boardInfo = {
+                    brand_id: curStoreInfo.brand_id,
+                    stadium_id: curStoreInfo.id,
+                    venue_id: _venueInfo.venue_id,
+                    date: _venueInfo.date,
+                    duration: _curTarget.duration,
+                    venueInfo: {...this.getVenueStatusnInfo(_curTarget)},
+                }
             }
-            if(!_curTarget.is_valid)return;
+            if(_curTarget.type !== 'empty_venue')return;
             _venueList[i].items[j]._isSelect = !_curTarget._isSelect;
             let _ctnList = []; // 提示用, 连场列表
+
             // 连场判断, 需要循环当前列表
             _venueList[i].items = _venueList[i].items.map(e=>{
 
                 let _flag = e.time_arrow_id&&   // 不连场为空
-                            e.is_valid&&        // 已售为false
+                            // e.is_valid&&        // 已售为false
                             e.time_arrow_id == _curTarget.time_arrow_id;
 
                 if(_flag)e._isSelect = !_curTarget._isSelect;
@@ -268,10 +374,10 @@ export default {
             this.$nextTick(_=>this.refreshVenues());
         },
         //  获取近7天列表
-        getDateList({ dateTimeStamp = new Date().getTime(), length = 8 }){
+        getDateList({ startTimestamp = new Date().getTime(), length = 8 }){
             let _dayTimeStamp = 24*60*60*1000;
             return new Array(length).fill(1).map((e,i)=>{
-                let _curStamp = dateTimeStamp + (i*_dayTimeStamp);
+                let _curStamp = startTimestamp + (i*_dayTimeStamp);
                 return {
                     showDateStr: util.formatDate({date: _curStamp, partition: 'zh'}).substr(5),
                     dateStr: util.formatDate({date: _curStamp}),
@@ -307,10 +413,10 @@ export default {
             util.routeTo(`/pages/site/confirm/confirm`, 'rT');
         },
         // 场馆列表
-        getVenueList({type_key,stadium_id,date}){
+        getVenueList({ type_key, stadium_id, date }){
             return servers.get({
                 url: API.venue.venueList,
-                data: {stadium_id,type_key,date},
+                data: { stadium_id, type_key, date },
                 failMsg: '加载分类失败！'
             })
         },
@@ -365,14 +471,20 @@ export default {
                     vertical-align: middle;
                     width: 24upx;
                     height: 24upx;
+                    transform: rotateZ(-90deg);
                 }
             }
             .sh-type{
                 padding: 20upx 0;
                 @include centerFlex(space-between);                
+                picker{
+                    flex-shrink: 0;
+                }
                 .st-type{
+                    
+                    margin-right: 20upx;
                     line-height: 50upx;
-                    font-size: 36upx;
+                    font-size: 32upx;
                     font-weight: 500;
                     color: #333;
                     >image{
@@ -383,8 +495,6 @@ export default {
                     }
                 }
                 .st-tip{
-                    flex-shrink: 0;
-                    max-width: 50%;
                     font-size: 24upx;
                     line-height: 34upx;
                     color: #9b9b9b;
@@ -396,6 +506,37 @@ export default {
             >picker{
                 width: 100%;
             }
+            .sh-date{
+                padding: 16upx 0;
+                border-top: 1px solid #D8D8D8;
+                border-bottom: 1px solid #D8D8D8;
+                @include centerFlex(center);                
+                >text{
+                    margin: 0 30upx;
+                    font-size: 28upx;
+                    color: #9A9A9D;
+                }
+                .sd-box{
+                    height: 44upx;
+                    width: 260upx;
+                    border-radius: 6upx;
+                    background-color: #F2F2F7;
+                    @include centerFlex(center);
+                    >text{
+                        font-size: 28upx;
+                        color: #333;
+                    }
+                    >view{
+                        flex-shrink: 0;
+                        margin-left: 6upx;
+                        width: 0;
+                        height: 0;
+                        border-top: 8upx solid #333;
+                        border-left: 8upx solid transparent;
+                        border-right: 8upx solid transparent;
+                    }
+                }
+            }
             .sh-time{
                 height: 86upx;
                 line-height: 82upx;
@@ -412,6 +553,7 @@ export default {
                     transform: rotateZ(90deg);
                 }
             }
+
         }
         .sm-times{
             height: 120upx;
@@ -466,12 +608,21 @@ export default {
                 .sti-item{
                     position: relative;
                     width: 112upx;
-                    height: 84upx;
-                    text-align: center;
-                    line-height: 84upx;
-                    font-size: 24upx;
-                    color: #333;
+                    height: 90upx;
                     border-right: 2upx solid #d8d8d8;
+                    >view{
+                        position: absolute;
+                        left: 0;
+                        top: 50%;
+                        padding: 0 10upx;
+                        height: 100%;
+                        width: 100%;
+                        text-align: center;
+                        line-height: 84upx;
+                        font-size: 24upx;
+                        color: #333;
+                        @include textHide(1);
+                    }
                     &::after{
                         content: '';
                         position: absolute;
@@ -489,7 +640,9 @@ export default {
                     }
                     &:first-child{
                         height: 72upx;
-                        border-right-color: transparent;
+                        >view{
+                            line-height: 72upx;
+                        }
                         
                     }
                 }
@@ -502,21 +655,22 @@ export default {
                 white-space: nowrap;
                 .svl-list{
                     display: inline-block;
-                    width: 136upx;
+                    width: 196upx;
                     .sl-item{
-                        height: 84upx;
+                        height: 90upx;
                         &:not(:first-child){
                             @include centerFlex(center);
                             >view{
                                 padding: 0 10upx;
-                                width: 116upx;
-                                height: 44upx;
-                                line-height: 40upx;
+                                width: 176upx;
+                                height: 72upx;
+                                line-height: 68upx;
                                 text-align: center;
                                 border: 2upx solid $themeColor;
-                                border-radius: 22upx;
+                                border-radius: 10upx;
                                 font-size: 28upx;
                                 color: $themeColor;
+                                background-color: #fff;
                                 @include textHide(1);
                                 &.grey{
                                     color: #9A9A9D;
@@ -528,21 +682,37 @@ export default {
                                     border-color: $themeColor;
                                     background-color: $themeColor;
                                 }
+                                &.cyan{
+                                    background-color: rgba($color: #33CCA9, $alpha: .18);
+                                }
                                 &.black{
                                     color: #FFF;
                                     border-color: #333333;
                                     background-color: #333333;
                                 }
+                                &.blue{
+                                    color: #fff;
+                                    border-color: #4F7CC7;
+                                    background-color: #4F7CC7;
+                                }
+                                &.pistac{
+                                    color: #fff;
+                                    background-color: #68C43B;
+                                    border-color: #68C43B;
+                                }
+                                &.gray{
+                                    border-color: #9A9A9D;
+                                    color: #9A9A9D;
+                                }
                             }
                         }
                         &:first-child{
                             height: 72upx;
-                            
                             line-height: 70upx;
                             text-align: center;
                             font-size: 24upx;
                             font-weight: 500;
-                            border-bottom: 2upx solid #F2F2F7;
+                            border-bottom: 2upx solid #D8D8D8;
                             background-color: #fff;
                             color: #333;
                             @include textHide(1);
@@ -626,33 +796,39 @@ export default {
                 height: 182upx;
                 @include centerFlex(center);
                 .stl-item{
-                    &:nth-child(2)>view:first-child{
-                        border-color: #D7D7DD;
-                        background-color: #D7D7DD;
-                    }
-                    &:nth-child(3)>view:first-child{
-                        border-color: #333333;
-                        background-color: #333333;
-                    }
-                    &:nth-child(4)>view:first-child{
-                        background-color: $themeColor;
-                    }
                     >view{
                         margin: 0 14upx;
                         &:first-child{
-                            width: 116upx;
-                            height: 44upx;
-                            border-radius: 22upx;
-                            border: 2upx solid $themeColor;
-                            margin-bottom: 14upx;
+                            margin: 0 auto;
+                            width: 40upx;
+                            height: 22upx;
+                            border-radius: 6upx;
+                            border: 1px solid $themeColor;
+                            margin-bottom: 8upx;
 
                         }
                         &:nth-child(2){
-                            line-height: 40upx;
+                            line-height: 34upx;
                             text-align: center;
                             font-size: 28upx;
                             color: #9a9a9d;
                         }
+                        &.green{
+                            background-color: $themeColor;
+                        }
+                        &.pistac{
+                            background-color: #68C43B;
+                            border-color: #68C43B;
+                        }
+                        &.blue{
+                            background-color: #4F7CC7;
+                            border-color: #4F7CC7;
+                        }
+                        &.black{
+                            background-color: #333333;
+                            border-color: #333333;
+                        }
+                        
                     }
                 }
             }
diff --git a/src/pages/site/occupy_share/occupy_share.vue b/src/pages/site/occupy_share/occupy_share.vue
new file mode 100644
index 0000000..81cfc36
--- /dev/null
+++ b/src/pages/site/occupy_share/occupy_share.vue
@@ -0,0 +1,134 @@
+<template>
+    <view class="occupy-share">
+        <view class="os-address">
+            <view class="oa-name"> 
+                <image mode="aspectFit" :src="shareInfo.stadium_logo"></image>
+                <view>{{ shareInfo.stadium_name || '-' }}</view>
+            </view>
+            <view class="oa-info">
+                <view>地址：</view>
+                <view>{{ shareInfo.stadium_address || '-' }}</view>
+            </view>
+        </view>
+        <view class="os-section">
+            <view class="os-des">
+                <view>①<text>截图</text>该页面后，发此图给朋友 </view>
+                <view>② 朋友<text>长按此图</text>识别下面的二维码<text>关注公众号</text> </view>
+                <view>③ 接收微信消息，<text>领取入场码</text></view>
+                <view>④ 领取成功后<text>仅限本人使用</text></view>
+            </view>
+            <image class="os-code-img" mode="aspectFit" :src="shareInfo.share_qrcode"></image>
+            <view class="os-tip">注：此码非入场码</view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { API } from '../../../js/api'
+import { servers } from '../../../js/server'
+export default {
+    data(){
+        return {
+            shareInfo: {},
+        }
+    },
+    onLoad(options){
+        this.getShareCode({
+            brand_id: options.brand_id,
+            order_no: options.order_no,
+        })
+    },
+    methods: {
+        getShareCode({ brand_id, order_no }){
+            servers.get({
+                url: API.venue.takeUpShareQr,
+                data: { brand_id, order_no, },
+                failMsg: '加载失败！'
+            })
+            .then(res=> {
+                console.warn('shareInfo', res)
+                this.shareInfo = res || {};
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    page{
+        background-color: $themeColor;
+    }
+    .occupy-share{
+        padding-top: 32upx;
+        padding-left: 24upx;
+        padding-right: 24upx;
+
+    }
+    .os-address{
+        margin-bottom: 36upx;
+        .oa-name{
+            margin-bottom: 20upx;
+            @include centerFlex(flex-start);
+            >image{
+                flex-shrink: 0;
+                margin-right: 10upx;
+                width: 34upx;
+                height: 34upx;
+            }
+            >view{
+                line-height: 40upx;
+                font-size: 28upx;
+                color: #fff;
+                @include textHide(1);
+            }
+        }
+        .oa-info{
+            display: flex;
+            align-items: baseline;
+            >view{
+                line-height: 40upx;
+                font-size: 28upx;
+                color: #fff;
+                &:first-child{
+                    flex-shrink: 0;
+                }
+                &+view{
+                    flex-grow: 1;
+                    word-break: break-all;
+                }
+            }
+        }
+    }
+    .os-section{
+        padding: 30upx 60upx 0;
+        height: 640upx;
+        overflow: hidden;
+        border-radius: 10upx;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: column;
+        .os-des{
+            margin-bottom: 16upx;
+            >view{
+                line-height: 52upx;
+                font-size: 28upx;
+                color: #333;
+                >text{
+                    color: $themeColor;
+                }
+            }
+        }
+        .os-code-img{
+            margin-bottom: 12upx;
+            width: 300upx;
+            height: 300upx;
+        }
+    }
+    .os-tip{
+        font-size: 24upx;
+        color: #9A9A9D;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/site/occupy_success/occupy_success.vue b/src/pages/site/occupy_success/occupy_success.vue
new file mode 100644
index 0000000..88a473c
--- /dev/null
+++ b/src/pages/site/occupy_success/occupy_success.vue
@@ -0,0 +1,118 @@
+<template>
+    <view class="occupy-success">
+        <view class="os-address">{{ qrInfo.stadium_name || '-' }}</view>
+        <image class="os-code" mode="aspectFit" :src="qrInfo.verify_qrcode"></image>
+        <view class="os-num">验证码：{{ qrInfo.verify_code || '-' }}</view>
+        <view class="os-btn" @click="toShare">
+            <view>分享给朋友</view>
+            <image mode="aspectFit" src="/static/images/icon/share_arrow_cff.png"></image>
+        </view>
+        <view class="os-black" @click="backBtn">返回</view>
+    </view>
+</template>
+
+<script>
+import { API } from '../../../js/api';
+import { servers } from '../../../js/server';
+import util from '../../../utils/util';
+export default {
+    data(){
+        return {
+            qrInfo: {},
+            optionsQuery: {},
+        }
+    },
+    onLoad(options){
+        this.optionsQuery = options || {};
+        this.getPageInfo({
+            brand_id: options.brand_id,
+            order_no: options.order_no,
+        })
+    },
+    methods: {
+        toShare(){
+            let { optionsQuery } = this;
+            let _qrStr = `?brand_id=${optionsQuery.brand_id}&order_no=${optionsQuery.order_no}`
+            util.routeTo(`/pages/site/occupy_share/occupy_share${_qrStr}`, 'nT')
+        },
+        backBtn(){
+            util.routeTo();
+            util.previousPageFunction({ // 刷新占用列表
+                fnName: 'refreshList',
+                query: null
+            })
+        },
+        getPageInfo({
+            brand_id,
+            order_no,
+        }){
+            servers.get({
+                url: API.venue.takeUpVerifyQr,
+                data: {
+                    brand_id,
+                    order_no,
+                },
+                failMsg: '加载失败！'
+            })
+            .then(res=>{
+                console.warn('res--->' , res);
+                this.qrInfo = res || {};
+            })
+        }
+    }
+    
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .occupy-success{
+        padding: 0 24upx;
+        .os-address{
+            margin-bottom: 80upx;
+            height: 92upx;
+            line-height: 90upx;
+            border-bottom: 2upx solid #D8D8D8;
+            font-size: 32upx;
+            color: #333;
+            @include textHide(1);
+        }
+        .os-code{
+            margin: 0 auto 40upx;
+            display: block;
+            width: 400upx;
+            height: 400upx;
+        }
+        .os-num{
+            margin-bottom: 128upx;
+            text-align: center;
+            font-size: 32upx;
+            color: #333;
+            @include textHide(1);
+        }
+        .os-btn{
+            margin: 0 auto 92upx;
+            width: 320upx;
+            height: 112upx;
+            background-color: $themeColor;
+            border-radius: 10upx;
+            @include centerFlex(center);
+            >view{
+                font-size: 32upx;
+                color: #fff;
+            }
+            >image{
+                margin-left: 20upx;
+                width: 34upx;
+                height: 36upx;
+            }
+        }
+        .os-black{
+            font-size: 32upx;
+            line-height: 44upx;
+            text-align: center;
+            color: $themeColor;
+            text-decoration: underline;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/static/images/icon/share_arrow_cff.png b/src/static/images/icon/share_arrow_cff.png
new file mode 100644
index 0000000..a2b50ae
Binary files /dev/null and b/src/static/images/icon/share_arrow_cff.png differ