update @组合商品一键领取校验手输判断/授权逻辑

2024-09-05 10:03:20 +08:00 · 2024-09-05 10:03:20 +08:00 · 44518c4fea
parent 98f7f43cb0
commit 44518c4fea
5 changed files with 162 additions and 25 deletions
--- a/src/global.scss
+++ b/src/global.scss
@ -93,12 +93,13 @@ html {
  display: none;
 }

-/*页面加载*/
+// 营销 H5 全局样式
+// 页面加载
 .pageNoneLoading_Vant {
  margin-top: 200px;
 }

-/*点击遮罩loading*/
+// 点击遮罩loading
 .overlayLoadBody {
  background-color: rgba(0, 0, 0, 0) !important;
  display: flex;
@ -120,4 +121,18 @@ html {
  background: #e8eaec !important;
 }

+// 底部滑出输入框
+.inputPopup {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  .inputModalTitle {
+
+  }
+  .inputModalContent {
+    margin-bottom: 20px;
+  }
+}
+

--- a/src/views/pages/comProduct/index.vue
+++ b/src/views/pages/comProduct/index.vue
@ -64,14 +64,15 @@
      v-model:show="inputModalShow"
      closeable
      position="bottom"
-      :style="{ height: '30%' }"
-      class="inputModal"
+      :style="{ height: '40%' }"
+      class="inputPopup"
    >
-      <p class="inputModalTitle">标题</p>
+      <p class="inputModalTitle"> {{ getModalTitle }} </p>
      <van-cell-group class="inputModalContent" inset>
-        <van-field v-model="inputVal" label="账号" placeholder="请输入手机号或QQ号" />
+        <van-field v-model="inputVal" label="账号" placeholder="请输入手机号" />
        <van-field v-model="inputValAgain" label="再次输入" placeholder="请再次输入" />
      </van-cell-group>
+      <van-button @click="receiveAll('submit', selectedPro)" type="primary" block>块级元素</van-button>
    </van-popup>
  </div>
 </template>
@ -84,8 +85,18 @@ export default {
  props: {},
  data() {
    return {
-      loadingStatus: false,
+      loadingStatus: false, // 页面加载 loading
+      overlayLoad: false, // 点击 遮罩 loading
+
+      isWx: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1,
+      wxAuthUrl: 'https://openapi.1688sup.com/wechat/oauth',
+      zfbAuthUrl: 'https://openapi.1688sup.com/alipay/oauth',
+
      key: this.$route.query.key || localStorage.getItem("key"),
+      // token: this.$route.query.token || localStorage.getItem("key"),
+      openid: this.$route.query.openid || localStorage.getItem("openid"), // 微信授权id
+      alipayuserid: this.$route.query.alipayuserid || localStorage.getItem("alipayuserid"), // 支付宝授权id
+
      detailType: 0, // 路由 push 详情 type
      showData: ['31', '32', '33', '2', '1'] as Array<any>, // 区分 列表 和 详情
      pageData: new Map([['31', []], ['32', []], ['33', []], ['2', []], ['1', []]]),
@ -159,7 +170,7 @@ export default {
      inputModalShow: false,
      inputVal: '',
      inputValAgain: '',
-      overlayLoad: false,
+      selectedPro: [], // 单个商品 和 同一类型 + 一键领取
      orderData: [], // 订单轮询
    }
  },
@ -168,6 +179,25 @@ export default {
    this.checkRoute();
    await this.getData();
  },
+  computed: {
+    getModalTitle() {
+      const obj = this.selectedPro[0];
+      if (this.selectedPro.length === 1) {
+        return obj.goods.name;
+      } else {
+       switch (obj.goods.type) {
+         case 1:
+           return "红包";
+         case 2:
+           return "直充/卡密";
+         case 3:
+           return obj.info.channel === 1 ? "支付宝立减金" : obj.info.channel === 2 ? '微信立减金' : '云闪付立减金';
+         default:
+           return ''
+       }
+      }
+    }
+  },
  watch: {
    '$route': {
      handler: 'checkRoute',
@ -191,6 +221,8 @@ export default {
            list.push(item);
            this.pageData.set(index, list);
          })
+        } else {
+          showToast('商品数据为空');
        }
      }
      this.loadingStatus = false;
@ -217,26 +249,81 @@ export default {
    async receiveAll (type: string, list: any) {
      if (this.detailType && type === 'top') return;
      console.log(`---list-${type}---`, list);
-      if (type === 'one') {
+      // 领取提示判断
+      if (type === 'one') { // 单品 直接根据
        let obj = list[0];
-        if (obj.goods.err_code && obj.goods.reson) {
-          return showToast(obj.goods.reson);
+        if (obj.goods.err_code) {
+          return showToast(obj.goods.reson || '商品异常');
        }
      }
-      let ids: any = [];
+      let ids: any = [], modes: any = [];
      list.forEach((item: any) => {
+        if (item.goods.type === 1) { // 红包
+          const str = item.cash.channel === 3 ? `${item.cash.channel}` : `${item.cash.channel}${item.cash.receive_mode}`;
+          modes.push(str)
+        } else if (item.goods.type === 2) { // 直充
+          const str = item.degital.product_type === 1 ? `${item.degital.product_type}${item.degital.check_sms_code}` : `${item.degital.product_type}${item.degital.card_show}${item.degital.check_sms_code}`;
+          modes.push(str)
+        } else if (item.goods.type === 3) { // 立减金
+          const str = item.info.channel === 3 ? `${item.info.channel}` : `${item.info.channel}${item.info.receive_mode}`;
+          modes.push(str)
+        }
        if (!item.goods.err_code) {
          ids.push(item.goods.id)
        }
      })
+      if (new Set(modes).size !== 1) {
+        return showToast('不同类型或领取方式不支持一键领取');
+      }
      if (!ids.length) {
        return showToast('暂无可领取商品');
      }
+      // 直充（非平台） + 红包/立减金（支付-账号领取/云闪付） 输入判断
+      this.selectedPro = [ ...list ];
+      let obj = this.selectedPro[0], account = '默认';
+      const boolHB = obj.goods.type === 1 && (((obj.cash.channel === 1) && (obj.cash.receive_mode === 2)) || (obj.cash.channel === 3));
+      const boolZC = obj.goods.type === 2 && !((obj.degital.product_type === 2) && (obj.degital.card_show === 2));
+      const boolLJJ = obj.goods.type === 3 && ((obj.info.channel === 1) && (obj.info.receive_mode === 2) || (obj.info.channel === 3));
+      if (boolHB || boolZC || boolLJJ) {
+        if (type !== 'submit') {
+          return this.inputModalShow = true;
+        }
+        if (!this.inputVal) {
+          return showToast('请输入账号');
+        } else {
+          if (!this.inputValAgain) {
+            return showToast('请再次输入账号');
+          }
+          if (this.inputValAgain !== this.inputVal) {
+            return showToast('两次输入不一致');
+          }
+        }
+        account = this.inputVal;
+      }
+      // 红包/立减金（支付-官方领取/微信） 授权判断
+      if (obj.goods.type === 1) { // 红包
+        if (obj.cash.channel === 1 && obj.cash.receive_mode === 1) { // 支付宝-官方领取
+          account = this.alipayuserid;
+        }
+        if (this.info.channel === 2) { // 微信
+          account = this.openid;
+        }
+        if (!account) return this.channelJudge(obj.cash.channel, obj.cash.receive_mode);
+      } else if (obj.goods.type === 3) {
+        if (obj.info.channel === 1 && obj.info.receive_mode === 1) { // 支付宝-官方领取
+          account = this.alipayuserid;
+        }
+        if (obj.info.channel === 2) { // 微信
+          account = this.openid;
+        }
+        if (!account) return this.channelJudge(obj.info.channel, obj.info.receive_mode);
+      }
+      // 兑换-订单轮询
      this.overlayLoad = true;
      const res = await EXCHANGE({
        key: this.key,
        id: ids,
-        account: 'account',
+        account: account,
        name: 'name',
      });
      if (res && res.code === 200) {
@ -263,6 +350,48 @@ export default {
      }
      this.overlayLoad = false;
    },
+    // 支付宝-官方领取 + 微信
+    channelJudge (channel: number, mode: number) {
+      // channel 1 支付宝 2 微信 3 云闪付
+      // mode 支付宝：1 官方领取 2 账号领取；微信：1 小程序 2 公众号 3 通用领取
+      if (channel === 1 && mode === 1) { // 支付宝-官方领取
+        const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.$route.query.id}`);
+        const url = `${this.zfbAuthUrl}?jump=${backLink}`;
+        // 微信等环境不能直接打开支付宝
+        const ua = navigator.userAgent.toLowerCase();
+        if (this.isWx || ua.indexOf("baiduboxapp") > -1 || ua.indexOf("firefox") > -1) {
+          showConfirmDialog({
+            confirmButtonText: '复制',
+            message: '请点击[复制]按钮，复制链接到浏览器打开',
+          })
+          .then(() => {
+            this.copyFn(url);
+          })
+          .catch(() => {})
+        } else {
+          // 唤起支付宝
+          location.replace(url);
+        }
+      } else if (channel === 2) { // 微信
+        if (!this.isWx) { // 微信环境 默认静默授权
+          if (mode === 2) { // 公众号
+            const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.$route.query.id}`);
+            const url = `${this.wxAuthUrl}?jump=${backLink}`;
+            showConfirmDialog({
+              confirmButtonText: '复制',
+              message: '请点击[复制]按钮，复制链接到微信打开',
+            })
+            .then(() => {
+              this.copyFn(url);
+            })
+            .catch(() => {})
+          } else { // 小程序 + 通用领取
+            // 唤起小程序 todo
+            location.replace('https://www.baidu.com/')
+          }
+        }
+      }
+    },
    async orderPolling () {
      const that = this;
      const res = await ORDER_QUERY({
@ -540,13 +669,4 @@ export default {
    }
  }
 }
-.inputModal {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  .inputModalContent {
-    margin-bottom: 20px;
-  }
-}
 </style>
--- a/src/views/templates/cmsDetail/index.vue
+++ b/src/views/templates/cmsDetail/index.vue
@ -11,7 +11,7 @@
    </div>
    <p class="line"/>
    <img class="defaultInputImg" v-if="!pageData" :src="cssData.defaultInputImg" alt="">
-    <div v-if="!((pageData.degital.product_type === 2) && (pageData.degital.card_show === 2)) || (pageData.degital.check_sms_code === 1)" class="inputBox">
+    <div v-if="!((pageData.degital.product_type === 2) && (pageData.degital.card_show === 2))" class="inputBox">
      <van-cell-group inset>
        <van-field v-model="inputVal" label="账号" placeholder="请输入手机号" />
        <van-field
--- a/src/views/templates/cmsList/index.vue
+++ b/src/views/templates/cmsList/index.vue
@ -1,7 +1,7 @@
 <template>
  <van-loading class="pageNoneLoading_Vant" v-if="loadingStatus" size="24px" color="#0094ff" vertical>加载中...</van-loading>
  <div v-else class="cmsListWrapper">
-    <img @click="jumpBanner" class="bannerTop" :src="cssData.bannerTop[0].url" alt="">
+    <img @click="jumpBanner" class="bannerTop" :src="cssData.bannerTop.length ? cssData.bannerTop[0].url : 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/goodstop.png'" alt="">
    <div class="content">
      <div v-if="cssData.contentType === 1" class="carouselBox">
        <img v-if="!pageData" class="carouselImg" :src="cssData.carouselImg" alt="">
--- a/src/views/templates/cmsVoucher/index.vue
+++ b/src/views/templates/cmsVoucher/index.vue
@ -269,7 +269,7 @@ export default {
        account = this.openid;
      }
      // 针对 支付宝-官方领取/微信 需要授权场景 判断
-      if (!account ) return this.channelJudge();
+      if (!account) return this.channelJudge();
      this.overlayLoad = true;
      const res = await EXCHANGE({
        key: this.key,
@ -306,6 +306,7 @@ export default {
          .then(() => {
            this.copyFn(url);
          })
+          .catch(() => {})
        } else {
          // 唤起支付宝
          location.replace(url);
@ -322,6 +323,7 @@ export default {
            .then(() => {
              this.copyFn(url);
            })
+            .catch(() => {})
          } else { // 小程序 + 通用领取
            // 唤起小程序 todo
            location.replace('https://www.baidu.com/')