feat:报单成功页面增加添加客服弹窗

pages/orders/completion.vue

@@ -1,177 +1,184 @@
 <template>
-	<view class="order_completion_box">
-		<view class="order_completion_title">
-			<view class="completion_icon">
-				<uni-icons class="icon" type="checkmarkempty" size="40" color="#eeeeee"></uni-icons>
-			</view>
-			<view class="product_title" v-for="(item,index) in productTitleInfo" :key="index">
-				 {{item.name}} {{item.spec}} 特惠价 ￥{{item.price}}
-			</view>
-		</view>
-		<view class="nav_button">
-			<view class="nav_order" @click="navOrder()">
-				<text>查看订单</text>
-			</view>
-			<view class="nav_home" @click="navHome()">
-				<text>返回首页</text>
-			</view>
-		</view>
-		<view class="lotteryinfo" v-if="this.islotteryinfo">
-			<view class="lottery_title">恭喜您预约成功，诚邀您参与以下活动</view>
-			<view class="banner_list">
-				<swiper class="banner_swiper" :autoplay="true" >
-					<swiper-item v-for="(item,index) in orderBannerList" :key="index">
-						<image class="image" :src="item.thumb" @click="navLottery(item.link_url)"></image>
-					</swiper-item>
-				</swiper>
-			</view>
-		</view>
-	</view>
+  <view class="order_completion_box">
+    <view class="order_completion_title">
+      <view class="completion_icon">
+        <uni-icons class="icon" type="checkmarkempty" size="40" color="#eeeeee"></uni-icons>
+      </view>
+      <view class="product_title" v-for="(item, index) in productTitleInfo" :key="index"> {{ item.name }} {{ item.spec }} 特惠价 ￥{{ item.price }} </view>
+    </view>
+    <view class="nav_button">
+      <view class="nav_order" @click="navOrder()">
+        <text>查看订单</text>
+      </view>
+      <view class="nav_home" @click="navHome()">
+        <text>返回首页</text>
+      </view>
+    </view>
+    <view class="lotteryinfo" v-if="this.islotteryinfo">
+      <view class="lottery_title">恭喜您预约成功，诚邀您参与以下活动</view>
+      <view class="banner_list">
+        <swiper class="banner_swiper" :autoplay="true">
+          <swiper-item v-for="(item, index) in orderBannerList" :key="index">
+            <image class="image" :src="item.thumb" @click="navLottery(item.link_url)"></image>
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+    <uni-popup ref="addFollow" type="center" class="center_popup">
+      <FollowPopup :closePopup="closePopup" />
+    </uni-popup>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				//轮播图
-				orderBannerList:[],
-				//是否展示抽奖区域
-				islotteryinfo:0,
-				//报单成功的商品信息
-				productTitleInfo:[]
-			}
-		},
-		onLoad(option) {
-			//接受参数
-			let productInfo =  option.params;
-			
-			if( productInfo ){
-				//解密参数
-				productInfo = decodeURIComponent(productInfo);
-				//转成js数组对象
-				productInfo	=  JSON.parse(productInfo);
-				this.productTitleInfo = productInfo;
-			}
-		},
-		onShow() {
-			this.$http.request("/api/orders_banner/get_list").then((re)=>{
-				if(re.code === "success"){
-					this.orderBannerList = re.data;
-					this.islotteryinfo =this.orderBannerList.length;
-				}
-			})
-		},
-		methods: {
-			navOrder(){
-				uni.redirectTo({
-					url:"/pages/orders/index"
-				})
-			},
-			navHome(){
-				uni.switchTab({
-					url:"/pages/index/index"
-				})
-			},
-			navLottery(url){
-				// 没有路径，不跳转
-				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
-					})
-				}
-			}
-		}
-	}
+import FollowPopup from "@/components/FollowPopup/FollowPopup.vue";
+export default {
+  components: { FollowPopup },
+  data() {
+    return {
+      //轮播图
+      orderBannerList: [],
+      //是否展示抽奖区域
+      islotteryinfo: 0,
+      //报单成功的商品信息
+      productTitleInfo: [],
+    };
+  },
+  onLoad(option) {
+    //接受参数
+    let productInfo = option.params;
+
+    if (productInfo) {
+      //解密参数
+      productInfo = decodeURIComponent(productInfo);
+      //转成js数组对象
+      productInfo = JSON.parse(productInfo);
+      this.productTitleInfo = productInfo;
+    }
+  },
+  onShow() {
+    this.$http.request("/api/orders_banner/get_list").then((re) => {
+      if (re.code === "success") {
+        this.orderBannerList = re.data;
+        this.islotteryinfo = this.orderBannerList.length;
+      }
+    });
+    //如果已选城市且没有添加客服每天弹窗一次
+    if (this.$checkAccess.getFollowQrcode()) {
+      this.$refs.addFollow.open("center");
+    }
+  },
+  methods: {
+    closePopup() {
+      this.$refs.addFollow.close();
+    },
+    navOrder() {
+      uni.redirectTo({
+        url: "/pages/orders/index",
+      });
+    },
+    navHome() {
+      uni.switchTab({
+        url: "/pages/index/index",
+      });
+    },
+    navLottery(url) {
+      // 没有路径，不跳转
+      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">
-	.order_completion_box{
-		display:block;
-		padding-bottom: 60rpx;
-		.order_completion_title{
-			display: block;
-			width: 630rpx;
-			margin: 20rpx auto;
-			line-height: 2.0;
-			.completion_icon{
-				width:150rpx;
-				height: 150rpx;
-				margin: 30rpx auto;
-				border-radius: 50%;
-				display: flex;
-				justify-content: center;
-				align-items: center; 
-				background-color: #e15c21;
-			}
-			.product_title{
-				text-align: center;
-				font-size: 24rpx;
-			}
-		}
-		.nav_button{
-			width: 630rpx;
-			display: block;
-			overflow: hidden;
-			margin: 20rpx auto;
-			line-height: 100rpx;
-			.nav_order{
-				text-align: center;
-				margin: 30rpx 0rpx;
-				border-radius: 60rpx;
-				background-color: #e15c21;
-				text{
-					color: #eeeeee;
-				}
-			}
-			.nav_home{
-				text-align: center;
-				border: 2rpx solid #6ca69e;
-				margin: 30rpx 0rpx;
-				border-radius: 60rpx;
-			}
-		}
-		.lotteryinfo{
-			width: 680rpx;
-			overflow: hidden;
-			margin: 50rpx auto;
-			.lottery_title{
-				display: block;
-				height: 60rpx;
-				font-size: 32rpx;
-				line-height: 60rpx;
-				text-align: center;
-			}
-			.banner_list{
-				display: block;
-				width: 680rpx;
-				height: 382rpx;
-				line-height: 382rpx;
-				text-align: center;
-				.banner_swiper{
-					display: block;
-					width: 680rpx;
-					height: 382rpx;
-					line-height: 382rpx;
-					text-align: center;
-					.image{
-						width: 680rpx;
-						height: 382rpx;
-					}
-				}
-			}
-		}
-		
-		
-		
-	}
+.order_completion_box {
+  display: block;
+  padding-bottom: 60rpx;
+  .order_completion_title {
+    display: block;
+    width: 630rpx;
+    margin: 20rpx auto;
+    line-height: 2;
+    .completion_icon {
+      width: 150rpx;
+      height: 150rpx;
+      margin: 30rpx auto;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #e15c21;
+    }
+    .product_title {
+      text-align: center;
+      font-size: 24rpx;
+    }
+  }
+  .nav_button {
+    width: 630rpx;
+    display: block;
+    overflow: hidden;
+    margin: 20rpx auto;
+    line-height: 100rpx;
+    .nav_order {
+      text-align: center;
+      margin: 30rpx 0rpx;
+      border-radius: 60rpx;
+      background-color: #e15c21;
+      text {
+        color: #eeeeee;
+      }
+    }
+    .nav_home {
+      text-align: center;
+      border: 2rpx solid #6ca69e;
+      margin: 30rpx 0rpx;
+      border-radius: 60rpx;
+    }
+  }
+  .lotteryinfo {
+    width: 680rpx;
+    overflow: hidden;
+    margin: 50rpx auto;
+    .lottery_title {
+      display: block;
+      height: 60rpx;
+      font-size: 32rpx;
+      line-height: 60rpx;
+      text-align: center;
+    }
+    .banner_list {
+      display: block;
+      width: 680rpx;
+      height: 382rpx;
+      line-height: 382rpx;
+      text-align: center;
+      .banner_swiper {
+        display: block;
+        width: 680rpx;
+        height: 382rpx;
+        line-height: 382rpx;
+        text-align: center;
+        .image {
+          width: 680rpx;
+          height: 382rpx;
+        }
+      }
+    }
+  }
+}
 </style>