Explorar o código

【Add】增加客服悬浮窗

liuxiangxin hai 3 meses
pai
achega
ae04cec86f
Modificáronse 4 ficheiros con 103 adicións e 106 borrados
  1. 30 0
      pages/index/index.vue
  2. 5 4
      pages/orders/index.vue
  3. 68 102
      pages/user/follow.vue
  4. BIN=BIN
      static/icon/add_follow.png

+ 30 - 0
pages/index/index.vue

@@ -53,6 +53,12 @@
       </view>
     </view>
     <view class="to_bottom" v-if="isLast"> -----{{ !productList.length && toSelectedCity ? "请选择您的城市" : "到底啦" }}-----</view>
+	<view class="add_work_wechat">
+		<navigator url="/pages/user/follow">
+			<image class="wechat_icon" src="/static/icon/add_follow.png" ></image>
+			<view class="wechat_text">添加客服</view>
+		</navigator>
+	</view>
   </view>
 </template>
 
@@ -455,4 +461,28 @@ export default {
     }
   }
 }
+.add_work_wechat{
+	bottom: 30%;
+	right: 20rpx;
+	width: 140rpx;
+	height: 130rpx;
+	display: block;
+	position: fixed;
+	padding-top: 20rpx;
+	border-radius: 20rpx;
+	background-color: #1296DB;
+	.wechat_icon{
+		width: 60rpx;
+		height: 60rpx;
+		display: block;
+		margin: 0rpx auto;
+	}
+	.wechat_text{
+		color: #FFFFFF;
+		display: block;
+		font-size: 28rpx;
+		line-height: 60rpx;
+		text-align: center;
+	}
+}
 </style>

+ 5 - 4
pages/orders/index.vue

@@ -2,9 +2,10 @@
   <view>
     <view class="order_status_list">
       <view class="order_status_item" :class="requestParam.status == 0 ? 'active' : ''" @click="setStatus(0)"> 全部 </view>
-      <view class="order_status_item" :class="requestParam.status == 1 ? 'active' : ''" @click="setStatus(1)"> 待跟进 </view>
+      <view class="order_status_item" :class="requestParam.status == 1 ? 'active' : ''" @click="setStatus(1)"> 待支付 </view>
+	  <view class="order_status_item" :class="requestParam.status == 2 ? 'active' : ''" @click="setStatus(2)"> 已支付 </view>
       <view class="order_status_item" :class="requestParam.status == 4 ? 'active' : ''" @click="setStatus(4)"> 已取消 </view>
-      <view class="order_status_item" :class="requestParam.status == 8 ? 'active' : ''" @click="setStatus(8)"> 已完成 </view>
+	  <view class="order_status_item" :class="requestParam.status == 6 ? 'active' : ''" @click="setStatus(6)"> 已退款 </view>
     </view>
     <view class="to_bottom" v-if="!orderList.length"> -----还没有订单-----</view>
     <view class="order_list">
@@ -12,7 +13,7 @@
         <view @click.stop="goDetail(item.id)">
           <view class="order_title">
             <view class="business_name">{{ item.business_name }}</view>
-            <!-- <view class="order_status">{{ item.state }}</view> -->
+            <view class="order_status">{{ item.state }}</view>
           </view>
           <view class="product_list" :class="item.contents_class ? 'active' : ''">
             <view class="product_item" v-for="(product_info, k) in item.product_list" :key="k">
@@ -252,7 +253,7 @@ export default {
   .order_status_item {
     float: left;
     font-size: 28rpx;
-    padding: 0rpx 20rpx;
+    padding: 0rpx 10rpx;
   }
   .order_status_item.active {
     color: #000000;

+ 68 - 102
pages/user/follow.vue

@@ -1,25 +1,15 @@
 <template>
 	<view>
-		<uni-popup ref="addFollow" type="center" class="center_popup" :mask-click="false">
-			<view class="add_follow">
-				<view class="close_area">
-					
-				</view>
-				<view class="qr_code_area" @click="followLinkurl">
-					<image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress></image>
-				</view>
-				<view class="info_alter">
-					<text v-if="follow_linkurl">点击二维码添加客服</text>
-					<text v-if="!follow_linkurl">长按二维码添加客服</text>
-				</view>
-				<view class="rule_info">
-					<view class="">规则:</view>
-					<view class="">1、预约报单需要添加客服人员</view>
-					<view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
-					<view class="">3、开始预约报单</view>
-				</view>
+		<view class="add_follow" :style="safeAreaHeight">
+			<view class="close_area"></view>
+			<view class="info_alter">
+			  <text v-show="follow_linkurl">{{ clickTitle }}</text>
+			  <text v-show="!follow_linkurl">{{ longTapTitle }}</text>
 			</view>
-		</uni-popup>
+			<view v-if="followQrcode" class="qr_code_area" @click="followLinkurl">
+			  <image :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress> </image>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -27,10 +17,17 @@
 	export default {
 		data() {
 			return {
+				clickTitle:"点击二维码添加客服",
+				longTapTitle:"长按二维码添加客服",
 				followQrcode:"",
 				follow_linkurl:"",
+				safeAreaHeight:{}
 			}
 		},
+		onLoad() {
+			let safeArea 		= uni.getWindowInfo().safeArea;
+			this.safeAreaHeight	= {height: safeArea.height + 'px'};
+		},
 		onShow() {
 			// 登录提示
 			if( !this.$checkAccess.alterLogin() ) return ;
@@ -51,100 +48,69 @@
 				this.followQrcode 		= this.$checkAccess.getFollowQrcode();
 				// 返回结果
 				this.follow_linkurl 	= this.$checkAccess.getFollowLinkUrl();
-				// 有图才展示
-				if( this.followQrcode )	this.$refs.addFollow.open('center');
 			},
-			closeAddFollow(){
-				this.$refs.addFollow.close();
+			followLinkurl() {
+			  // 获取登录标识
+			  let userInfo = uni.getStorageSync("userInfo");
+			  // 如果不存在的话
+			  if (!userInfo) return "";
+			  // 未添加好友
+			  if (!userInfo.follow_linkurl) return "";
+			  // 获取Url
+			  let url = userInfo.follow_linkurl;
+			  // 没有路径,不跳转
+			  if (!url) return;
+			  // 判断是不是小程序链接
+			  if (url.includes("http")) {
+			    // 转码
+			    let link_url = encodeURIComponent(url);
+			    // 跳转到webview
+			    uni.redirectTo({
+			      url: `/pages/webview/index?link_url=${link_url}`,
+			    });
+			  } else {
+			    // 跳转到webview
+			    uni.navigateTo({
+			      url: url,
+			    });
+			  }
 			},
-			// 去往webview
-			followLinkurl(){
-				// 获取登录标识
-				let userInfo   					= uni.getStorageSync('userInfo');
-				// 如果不存在的话
-				if( !userInfo )					return '';
-				// 未添加好友
-				if( !userInfo.follow_linkurl )	return '';
-				// 获取Url
-				let  url			= userInfo.follow_linkurl;
-				// 没有路径,不跳转
-				if( !url )			return;
-				// 判断是不是小程序链接
-				if( url.includes('http') ){
-					// 转码
-					let link_url = encodeURIComponent(url);
-					// 跳转到webview
-					uni.redirectTo({
-						url:`/pages/webview/index?link_url=${link_url}`
-					})
-				}else{
-					// 跳转到webview
-					uni.navigateTo({url:url});
-				}
-			}
 		}
 	}
 </script>
 
 <style lang="less">
-	// 添加客服
-	.center_popup{
-		.add_follow{
+	.add_follow{
+		display: block;
+		color: #FFFFFF;
+		width: 750rpx;
+		height: 900rpx;
+		margin: 0rpx auto;
+		font-size: 26rpx;
+		background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
+		.close_area{
+			height: 80rpx;
 			display: block;
-			color: #FFFFFF;
-			width: 700rpx;
-			height: 900rpx;
-			margin: 0 auto;
-			font-size: 26rpx;
-			border-radius: 40rpx;
-			background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
-			.close_area{
-				height: 30rpx;
-				display: block;
-				line-height: 30rpx;
-			}
-			.info_alter{
-				display: block;
-				height: 100rpx;
-				font-size: 42rpx;
-				font-weight: bold;
-				text-align: center;
-				line-height: 100rpx;
-			}
-			.qr_code_area{
-				display: block;
+			line-height: 30rpx;
+		}
+		.info_alter{
+			display: block;
+			height: 100rpx;
+			font-size: 42rpx;
+			font-weight: bold;
+			text-align: center;
+			line-height: 100rpx;
+		}
+		.qr_code_area{
+			display: block;
+			width: 300rpx;
+			height: 300rpx;
+			margin: 120rpx auto;
+			.qr_code{
+				float: left;
 				width: 300rpx;
 				height: 300rpx;
-				margin: 60rpx auto;
-				.qr_code{
-					float: left;
-					width: 300rpx;
-					height: 300rpx;
-				}
-			}
-			.save_btn{
-				color: #333333;
-				display: block;
-				width: 260rpx;
-				height: 80rpx;
-				font-size: 26rpx;
-				text-align: center;
-				line-height: 80rpx;
-				padding: 0rpx 0rpx;
-				margin: 40rpx auto;
-				border-radius: 40rpx;
-				background-color: #FFFFFF;
-				border: 0rpx solid transparent;
-			}
-			.rule_info{
-				width: 600rpx;
-				display: block;
-				font-size: 26rpx;
-				margin: 20rpx auto;
-				overflow: hidden;
-				line-height: 60rpx;
 			}
 		}
 	}
-	
 </style>

BIN=BIN
static/icon/add_follow.png