Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

src/App.vue

@@ -53,12 +53,14 @@ export default {
         }
       }
     },
-    $route() {
+    $route(v) {
       this.$nextTick(() => {
         this.$refs.gdShare.shareCloseChange(); //切换页面隐藏分享弹窗
-        document
-          .querySelectorAll('.cr-overlay')
-          .forEach(e => !e.parentNode.className.includes('share') && e.parentNode.removeChild(e));
+        document.querySelectorAll('.cr-overlay').forEach(e => {
+          !e.parentNode.className.includes('share') &&
+            !v.name == 'payWaiting' &&
+            e.parentNode.removeChild(e);
+        });
         store.dispatch('change_show_mini_app_guide', {
           bool: !isApp && !isWxMp && !isWechat ? true : false,
           pointer: this

src/api/pay.api.js

@@ -84,7 +84,10 @@ export default {
 const getCouponList = function(params) {
   return request.get(`${talosHost}/api/kdsp/appconfig/pay-succ-page/guide-stream`, { params });
 };
-
+// 获取用户手机号
+const getPhoneNumber = function() {
+  return request.get(`${talosHost}/api/kdsp/user/phone`);
+};
 export {
   pay,
   prepay,
@@ -98,5 +101,6 @@ export {
   kaGetNextUrl,
   getCouponList,
   queryPayStatus,
-  reissueContract
+  reissueContract,
+  getPhoneNumber
 };

src/components/groupShare.vue

@@ -67,12 +67,14 @@ export default {
       }
       this.$store.dispatch('change_loading', true);
       this.type = type;
+
+      // 如果shareInfo为data数据则直接创建海报
       if (typeof shareInfo === 'object') {
         this.sharePicData = shareInfo;
         this.handleShareInfo(shareInfo);
         return;
       }
-      // 如果shareInfo为data数据则直接创建海报
+
       this.getGroupShareInfo(shareInfo);
     });
   },

src/components/sharePic.vue

@@ -11,13 +11,7 @@
             style="width: 94px;height: 94px;margin: 0 21px;"
             :class="{ leader: index == 0, normal: index != 0 }"
           >
-            <img
-              class="avator"
-              style="width: 94px;
-                      height: 94px;"
-              :src="item"
-              alt=""
-            />
+            <img class="avator" style="width: 94px; height: 94px;" :src="item" alt="" />
             <template v-if="index == 0">
               <div
                 class="leaderName"
@@ -92,11 +86,7 @@
         </div>
       </div>
     </div>
-    <div
-      class="skuImg"
-      style="width: 984px;
-            height: 984px;"
-    >
+    <div class="skuImg" style="width: 984px;height: 984px;">
       <!-- 商品图 -->
       <img :src="sharePicData.skuImg" alt="" />
       <div class="skuInfo" style="height: 134px;">
@@ -154,6 +144,7 @@ export default {
     };
   },
   methods: {
+    // 参团人数小于7时，头像全部显示；大于时展示6个头像...
     handleAvator(sharePicData) {
       const openGroupCnt = sharePicData.openGroupCnt || 7;
       let peoplePhotoList = sharePicData.peoplePhotoList || [];
@@ -176,29 +167,33 @@ export default {
       }
       return n;
     },
-    async createAndUploadPic(sharePicData) {
-      this.$store.dispatch('change_loading_pic', true);
-      this.sharePicData = sharePicData;
-      const endTimeYMD = sharePicData.endTime ? sharePicData.endTime.split(' ')[0] : '';
-      const endTimeHMS = sharePicData.endTime ? sharePicData.endTime.split(' ')[1] : '';
-      if (endTimeYMD) {
-        this.endTime = `${new Date(endTimeYMD).getMonth() + 1}月${new Date(
-          endTimeYMD
-        ).getDate()}日 ${endTimeHMS}`;
-      }
-      this.handleAvator(sharePicData);
-      const _this = this;
-      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(sharePicData);
-      this.qrcodeUrl = qrcodeUrl;
-      const [res] = await qiNiuApi.getQiniuToken();
-      const token = res.token;
-      let skuName = '';
+    async prepare(rawData) {
+      this.sharePicData = rawData;
+
+      this.handleAvator(rawData);
+
       // 将每个字符套入行内标签，用于解决canvas fillText的不换行问题
-      const originSkuName = sharePicData.skuName || '';
+      let skuName = '';
+      const originSkuName = rawData.skuName || '';
       for (let i = 0; i < originSkuName.length; i++) {
         skuName += `<span>${originSkuName[i]}</span>`;
       }
       this.skuName = skuName;
+
+      const [endTimeYMD, endTimeHMS = ''] = (rawData.endTime && rawData.endTime.split(' ')) || [];
+      if (endTimeYMD) {
+        const day = new Date(endTimeYMD);
+        this.endTime = `${day.getMonth() + 1}月${day.getDate()}日 ${endTimeHMS}`;
+      }
+
+      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(rawData);
+      this.qrcodeUrl = qrcodeUrl;
+    },
+    async createAndUploadPic(sharePicData) {
+      this.$store.dispatch('change_loading_pic', true);
+
+      await this.prepare(sharePicData);
+
       this.$nextTick(() => {
         html2canvas(this.$refs.sharePic, {
           width: 1080,
@@ -206,30 +201,36 @@ export default {
           useCORS: true,
           scale: 1,
           allowTaint: false
-        }).then(function(canvas) {
-          canvas.name = `${_this.randomString}`.jpeg;
-          canvas.toBlob(
-            blob => {
-              const observable = upload(blob, null, token);
-              const observer = {
-                error(err) {
-                  console.log(err);
-                  _this.$store.dispatch('change_loading_pic', false);
-                },
-                complete({ hash }) {
-                  const fileLink = config.qiniuHost + hash;
-                  console.log('pic create success', fileLink);
-                  _this.$emit('outputPicUrl', fileLink);
-                  _this.$store.dispatch('change_loading_pic', false);
-                }
-              };
-              observable.subscribe(observer);
-            },
-            'image/jpeg',
-            0.85
-          );
+        }).then(canvas => {
+          canvas.name = `${this.randomString()}.jpeg`;
+          canvas.toBlob(blob => this.uploadPic(blob), 'image/jpeg', 0.85);
         });
       });
+    },
+    // 上传海报到七牛，成功后触发outputPicUr事件，参数是七牛文件地址
+    async uploadPic(blob) {
+      console.log('海报生成成功');
+      const [res] = await qiNiuApi.getQiniuToken();
+      const token = (res && res.token) || '';
+      if (!token) {
+        this.uploadErrorHandler(new Error('七牛token无效'));
+        return;
+      }
+
+      upload(blob, null, token).subscribe({
+        complete: this.uploadSuccess,
+        error: this.uploadError
+      });
+    },
+    uploadSuccess({ hash }) {
+      const fileLink = config.qiniuHost + hash;
+      console.log('海报上传成功', fileLink);
+      this.$store.dispatch('change_loading_pic', false);
+      this.$emit('outputPicUrl', fileLink);
+    },
+    uploadError(err) {
+      console.error('海报上传失败', err);
+      this.$store.dispatch('change_loading_pic', false);
     }
   }
 };

src/service/httpDecorator.js

@@ -40,14 +40,13 @@ const http = new HttpRequest(
         }
         let error = new Error(msg);
         error.response = data;
-
         if (
           error?.response?.businessCode === '6049' ||
           error?.response?.businessCode === '401' ||
           error?.response?.businessCode === '0401'
         ) {
-          localStorage.removeItem('vccToken');
-          sessionStorage.removeItem('vccToken');
+          localStorage.remove('vccToken');
+          sessionStorage.remove('vccToken');
           if (isApp) {
             const nativeBridge = new Bridge();
             window.xyqbNativeEvent = function(res) {

src/service/init.service.js

@@ -13,9 +13,11 @@ export default {
   init: router => {
     router.beforeEach((to, from, next) => {
       Cookies.set('h', 0);
-      if (!to.query.vccToken) {
+      const query = JSON.parse(JSON.stringify(to.query));
+      if (Object.keys(query).indexOf('vccToken') == -1) {
         to.query.vccToken = sessionStorage.get('vccToken') || '';
       }
+      // console.log(to.query, 1);
       // 所有自定义路由字段在此处理
       const { meta } = to;
       isWechat && localStorage.set('vccChannel', '159913');

src/service/utils.service.js

@@ -369,14 +369,7 @@ export function setAppTitleColor(bgcolor = '#fff') {
 export function paramsParentheses(pointer) {
   let params = pointer.$route.query;
   const path = pointer.$route.path;
-  params.vccToken && delete params.vccToken;
+  Object.keys(params).indexOf('vccToken') > -1 && delete params.vccToken;
   const paramsString = qs.stringify(params);
-  // for (let key in params) {
-  //   let option = `${key}=${params[key]}`;
-  //   tempString += `$${option}`;
-  // }
-  // if (tempString.length) {
-  //   tempString = `${config.localHost}${path}!` + tempString.slice(1);
-  // }
   return `${config.localHost}${path}?` + paramsString;
 }

src/store/module.js

@@ -107,6 +107,12 @@ const mutations = {
         confirmButtonText: '打开微信小程序',
         onConfirm: () => {
           // todo 跳转到小程序
+          // console.log(JSON.stringify(pointer.$route.query), 2);
+          // console.log(
+          //   `url=${encodeURIComponent(
+          //     JSON.stringify(paramsParentheses(pointer) + '&vccToken={token}')
+          //   )}`
+          // );
           let getScheme = async function() {
             const [res] = await groupBuy.getScheme({
               miniUrl: 'pages/groupbuy/webview',

src/views/pay/components/SmsModal.vue

@@ -5,7 +5,7 @@
         <p class="sms-icon"><cr-icon type="cross" color="#999999" @click="closeModal" /></p>
         <p class="sms-title">请输入短信验证码</p>
         <p class="sms-des">为保证您账户安全，此笔交易需要短信验证</p>
-        <p class="phone">已发送至 {{ getPhone() }}</p>
+        <p class="phone">已发送至 {{ phoneNumber }}</p>
         <cr-authcode-field
           span-size="24px"
           type="number"
@@ -29,8 +29,7 @@
 </template>
 
 <script>
-import localStorage from '@/service/localStorage.service';
-import { sendSms as sendSmsApi } from '@/api/pay.api';
+import { sendSms as sendSmsApi, getPhoneNumber } from '@/api/pay.api';
 export default {
   props: {
     value: {
@@ -45,7 +44,8 @@ export default {
     return {
       send: false,
       time: 60,
-      timer: null
+      timer: null,
+      phoneNumber: ''
     };
   },
   computed: {},
@@ -57,9 +57,9 @@ export default {
     },
     errorInfo: function() {}
   },
-  onShow() {},
-  onLoad() {},
-  onReady() {},
+  created() {
+    this.getPhone();
+  },
   methods: {
     closeModal() {
       this.clearTimer();
@@ -82,10 +82,9 @@ export default {
         }, 1000);
       }
     },
-    getPhone() {
-      const phone = localStorage.get('phoneNo');
-      const phoneS = `${phone}`.replace(/(\d{3})\d*(\d{4})/, '+86 $1 **** $2');
-      return phoneS;
+    async getPhone() {
+      const [phoneNumber] = await getPhoneNumber();
+      this.phoneNumber = phoneNumber;
     },
     clearTimer() {
       clearInterval(this.timer);

src/views/pay/payWaiting.vue

@@ -28,7 +28,6 @@ import { queryPayStatus } from '@/api/pay.api';
 import cookies from '@/service/cookieStorage.service';
 import { goUrlExtends } from './extends';
 import { isApp } from '@/service/validation.service';
-import localStorage from '@/service/localStorage.service';
 export default {
   components: {},
   extends: goUrlExtends,
@@ -52,7 +51,6 @@ export default {
     }
   },
   mounted() {
-    this.getQuery();
     this.$dialog({
       message: '请确认订单已完成支付',
       confirmButtonText: '已完成支付',
@@ -74,12 +72,6 @@ export default {
     navigateBack() {
       this.$router.replace({ name: 'orderList', params: { status: 0 } });
     },
-    getQuery() {
-      this.returnUrl = cookies.get('returnUrl') || '';
-      if (localStorage.get('hideOrder')) {
-        this.isOrder = false;
-      }
-    },
     loop() {
       this.query();
       this.timer = setInterval(() => {