Bladeren bron

feat:首页增加选择城市弹窗与添加客服弹窗

qianxinyu 4 maanden geleden
bovenliggende
commit
7707ea0af2
3 gewijzigde bestanden met toevoegingen van 195 en 1 verwijderingen
  1. 147 0
      components/FollowPopup/FollowPopup.vue
  2. 47 0
      pages/index/index.vue
  3. 1 1
      pages/product/index.vue

+ 147 - 0
components/FollowPopup/FollowPopup.vue

@@ -0,0 +1,147 @@
+<template>
+  <view class="add_follow">
+    <view class="close_area"><button class="close_btn" @click="closePopup">关闭</button></view>
+    <view class="info_alter">
+      <text v-if="follow_linkurl">点击二维码添加客服</text>
+      <text v-if="!follow_linkurl">长按二维码添加客服</text>
+    </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="rule_info">
+      <view class="">报单规则:</view>
+      <view class="">1、预约报单需要添加客服人员</view>
+      <view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
+      <view class="">3、开始预约报单</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    //关闭弹窗
+    closePopup: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      follow_linkurl: this.$checkAccess.getFollowLinkUrl(),
+      followQrcode: this.$checkAccess.getFollowQrcode(),
+    };
+  },
+  methods: {
+    // 去往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" scoped>
+.add_follow {
+  display: block;
+  color: #ffffff;
+  width: 700rpx;
+  height: 800rpx;
+  margin: 0 auto;
+  font-size: 26rpx;
+  border-radius: 40rpx;
+  background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
+
+  .close_area {
+    height: 80rpx;
+    display: block;
+    line-height: 80rpx;
+
+    .close_btn {
+      color: #ffffff;
+      float: right;
+      width: 80rpx;
+      height: 80rpx;
+      font-size: 26rpx;
+      text-align: center;
+      line-height: 80rpx;
+      padding: 0rpx 0rpx;
+      border: 0rpx solid transparent;
+      background-color: transparent;
+    }
+
+    .close_btn::after {
+      border: 0rpx solid transparent;
+    }
+  }
+
+  .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: 30rpx 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: 40rpx;
+  }
+}
+</style>

+ 47 - 0
pages/index/index.vue

@@ -46,11 +46,16 @@
       </view>
     </view>
     <view class="to_bottom" v-if="isLast"> -----{{ !productList.length && toSelectedCity ? "请选择您的城市" : "到底啦" }}-----</view>
+    <uni-popup ref="addFollow" type="center" class="center_popup">
+      <FollowPopup :closePopup="closePopup" />
+    </uni-popup>
   </view>
 </template>
 
 <script>
+import FollowPopup from "@/components/FollowPopup/FollowPopup.vue";
 export default {
+  components: { FollowPopup },
   data() {
     return {
       // 轮播图
@@ -115,6 +120,40 @@ export default {
       // 登录并且未选择城市,才可以选择城市
       (this.toSelectedCity = !this.$checkAccess.getCity() ? true : false);
     // 数据
+
+    //未选城市先弹窗提醒选择城市
+    if (!this.$checkAccess.getCity()) {
+      uni.showModal({
+        title: "",
+        content: "请先选择城市",
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateTo({
+              url: "/pages/user/info",
+            });
+          }
+        },
+      });
+    }
+
+    //如果已选城市且没有添加客服每天弹窗一次
+    if (this.$checkAccess.getCity() && this.$checkAccess.getFollowQrcode()) {
+      uni.getStorage({
+        key: "followPopupTime",
+        success: (res) => {
+          if (!res.data || new Date().getTime() - res.data > 1000 * 60 * 60 * 24) {
+            uni.setStorage({
+              key: "followPopupTime",
+              data: new Date().getTime(),
+            });
+            this.$refs.addFollow.open("center");
+          }
+        },
+        fail: (err) => {
+          this.$refs.addFollow.open("center");
+        },
+      });
+    }
     this.isManager = this.$checkAccess.isManager();
     // 没有数据的话,或者请求中,不允许刷新
     if (this.isReqing) return;
@@ -238,6 +277,14 @@ export default {
         });
       }
     },
+    closePopup() {
+      this.$refs.addFollow.close();
+      //存key以及时间
+      uni.setStorage({
+        key: "followPopupTime",
+        data: new Date().getTime(),
+      });
+    },
   },
 };
 </script>

+ 1 - 1
pages/product/index.vue

@@ -499,7 +499,7 @@
 				// 登录提示
 				if (!this.$checkAccess.alterLogin()) return;
 				// 判断是否弹出
-				if (this.$checkAccess.getFollowQrcode()) return this.openAddFollow();
+				// if (this.$checkAccess.getFollowQrcode()) return this.openAddFollow();
 				if (regiment_id) {
 					this.regiment_id = regiment_id
 				}