设置规则和上下线

components/tab-bar/delivery.vue

@@ -26,17 +26,17 @@
 				</view>
 			</view>
 		</view>
-		<view class="">
+		<view style="height: 25px;width: 95%;margin: -100px auto 0;display: flex;line-height: 25px;">
-			<view class="" @tap="openPopup()">
+			<view class="guize-box" @tap="openPopup()">
-				<uni-icons type="info"></uni-icons>
+				<uni-icons type="info" size="10"></uni-icons>
 				设置规则
 			</view>
-			<view class="" @tap="changeOnline(item.value)">
 			<view class="">
-					
+				<view @tap="changeOnline(0)" class="shangxia-btn shangxian-btn" v-if="isOnLine==1">
+					<text>已上线</text>
 				</view>
-				<view class="">
+				<view @tap="changeOnline(1)" class="shangxia-btn lixian-btn" v-else>
-					
+					<text>已离线</text>
 				</view>
 			</view>
 		</view>
@@ -263,6 +263,7 @@
 	export default {
 		data() {
 			return {
+				isOnLine:1,
 				bigImg:'',
 				zhipaiCheck: false,
 				tab1Checked: 'daiqu',
@@ -299,6 +300,8 @@
 			init() {
 				console.log("配送初始化")
 				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+				this.isOnLine = uni.getStorageSync('worker').isOnLine
+				this.$forceUpdate()
 			},
 			//查看大图
 			largeImg(img) {
@@ -456,6 +459,7 @@
 					if (res.code == 200) {
 						let worker = uni.getStorageSync('worker') || {}; // 避免取不到时出错
 						worker.isOnLine = value;
+						this.isOnLine = value
 						uni.setStorageSync('worker', worker);
 						this.tui.toast(res.message)
 					} else {
@@ -464,6 +468,7 @@
 
 				})
 				this.isArea = !this.isArea
+				this.$forceUpdate()
 			},
 			ceshi(e) {
 				console.log("11111111", e)
@@ -544,7 +549,7 @@
 		width: 95%;
 		overflow-y: auto;
 		-webkit-overflow-scrolling: touch;
-		margin: -90px auto 0;
+		margin: 10px auto 0;
 	}
 
 	.box1 {
@@ -699,4 +704,30 @@
 		color: #fff;
 		border-radius: 5px;
 	}
+	.shangxian-btn{
+		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/7620b3eed7b14bb69d3c456ed0be72b3.png') no-repeat;
+		padding-left: 8px;
+	}
+	.lixian-btn{
+		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/462cacb9682f4919a3e750700bbc5f3e.png') no-repeat;
+	    text-align: right;
+	    padding-right: 8px;	
+	}
+	.shangxia-btn{
+		width: 66px;
+		height: 25px;
+		background-size: 100%;
+		font-size: 10px;
+		font-weight: 700;
+	}
+	.guize-box{
+		font-size: 10px;
+		font-weight: 700;
+		background: rgba(166, 255, 234, 1);
+		width: 70px;
+		height: 25px;
+		border-radius: 25px;
+		margin-right: 10px;
+		padding-left: 5px;
+	}
 </style>