feat: 处理支付结果页

src/api/groupBuy.js

@@ -52,5 +52,9 @@ export default {
     return http.get(`${talosHost}/api/kdsp/group-order/list`, {
       params
     });
+  },
+  // 获取小程序码
+  getQrcodeUrl(params) {
+    return http.get(`${talosHost}/api/kdsp/playBill/getMakePicData`, params);
   }
 };

src/api/pay.api.js

@@ -84,6 +84,11 @@ export default {
 const getCouponList = function(params) {
   return request.get(`${talosHost}/api/kdsp/appconfig/pay-succ-page/guide-stream`, { params });
 };
+
+const getOrderShareInfo = function(params) {
+  return request.get(`${talosHost}/api/kdsp/groupShareInfo`, { params });
+};
+
 export {
   pay,
   prepay,
@@ -97,5 +102,6 @@ export {
   kaGetNextUrl,
   getCouponList,
   queryPayStatus,
-  reissueContract
+  reissueContract,
+  getOrderShareInfo
 };

src/components/sharePic.vue

@@ -35,7 +35,7 @@
     </div>
     <div class="skuImg">
       <!-- 商品图 -->
-      <img src="https://img.lkbang.net/activity/share/default/skuImg.png" alt="" />
+      <img :src="sharePicData.skuImg" alt="" />
       <div class="skuInfo">
         <div class="skuPrice">
           <span class="groupPriceContainer">拼团价 ¥</span>
@@ -50,12 +50,12 @@
     </div>
     <div class="skuName">
       <!-- 商品名称 -->
-      SAINT LAURENT PARIS 圣罗兰 方管纯口红 3.8克 女神挚爱款 千颂伊同款
+      {{ sharePicData.skuName }}
     </div>
     <div class="shareInfo">
       <!-- 底部分享信息 -->
       <div class="qrcode">
-        <img src="https://img.lkbang.net/activity/share/default/qrcode.png" alt="" />
+        <img :src="qrcodeUrl" alt="" />
       </div>
       <div class="shareDesc">
         <p>分享自 <span>羊小咩小程序</span></p>
@@ -67,45 +67,55 @@
 <script>
 import html2canvas from 'html2canvas';
 import qiNiuApi from '@/api/qiniu.api';
+import { getQrcodeUrl } from '@/api/groupBuy';
 import { upload } from 'qiniu-js';
 import config from '@/config';
 export default {
-  mounted() {
-    // this.uploadPic();
+  props: {
+    sharePicData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      qrcodeUrl: ''
+    };
   },
   methods: {
     async uploadPic() {
+      const _this = this;
+      const [qrcodeUrl] = await getQrcodeUrl(this.sharePicData);
+      this.qrcodeUrl = qrcodeUrl;
       const [res] = await qiNiuApi.getQiniuToken();
       const token = res.token;
-      html2canvas(this.$refs.sharePic, {
-        width: 1080,
-        height: 1920,
-        useCORS: true,
-        scale: 1
-      }).then(function(canvas) {
-        canvas.toBlob(
-          blob => {
-            const observable = upload(blob, null, token);
-            const observer = {
-              error(err) {
-                console.log(err);
-              },
-              complete({ hash }) {
-                const fileLink = config.qiniuHost + hash;
-                console.log('fileLink', fileLink);
-              }
-            };
-            observable.subscribe(observer);
-            // newImg.onload = function() {
-            //   URL.revokeObjectURL(url);
-            // };
-
-            // newImg.src = url;
-            // document.body.appendChild(newImg);
-          },
-          'image/jpeg',
-          0.85
-        );
+      this.$nextTick(() => {
+        html2canvas(this.$refs.sharePic, {
+          width: 1080,
+          height: 1920,
+          useCORS: true,
+          scale: 1
+        }).then(function(canvas) {
+          canvas.toBlob(
+            blob => {
+              const observable = upload(blob, null, token);
+              const observer = {
+                error(err) {
+                  console.log(err);
+                },
+                complete({ hash }) {
+                  const fileLink = config.qiniuHost + hash;
+                  _this.$emit('outputPicUrl', fileLink);
+                }
+              };
+              observable.subscribe(observer);
+            },
+            'image/jpeg',
+            0.85
+          );
+        });
       });
     }
   }

src/views/goodsDetail/smallPic.vue

@@ -11,7 +11,11 @@
       </div>
       <div class="goods-product-info">
         <div class="goods-product-info-img">
-          <span class="goods-product-info-tag">3人团</span>
+          <span
+            v-if="detailInfo.groupBuyInfo && detailInfo.groupBuyInfo.groupBuyLimitUserCount"
+            class="goods-product-info-tag"
+            >{{ detailInfo.groupBuyInfo.groupBuyLimitUserCount }}人团</span
+          >
           <cr-image width="108px" :src="detailInfo.thumbImageUrl" />
         </div>
         <div class="goods-product-info-desc">
@@ -26,7 +30,7 @@
                 color="#EC1500"
                 track-color="#F7F8F9"
                 :show-pivot="false"
-                :percentage="50"
+                :percentage="stockPercentage"
               />
             </div>
             <div class="goods-product-info-desc-num">
@@ -116,6 +120,7 @@ export default {
       inProgress: false, // 活动是否已经开始
       countDownText: '',
       showShareButton: false, // 是否显示分享按钮
+      stockPercentage: 0,
       // 以下是原有的data
       detailParam: {
         skuNo: '',
@@ -174,6 +179,15 @@ export default {
         localStorage.set('groupBuyGroupId', res.groupBuyInfo.groupId || ''); // 设置groupBuyGroupId，用于下单
         this.groupId = +res.groupBuyInfo.groupId || '';
       }
+      if (res.saleCount && res.activitySkuTotalCount) {
+        const percentage = +res.saleCount / +res.activitySkuTotalCount;
+        if (isNaN(percentage)) {
+          this.stockPercentage = 0;
+        } else {
+          this.stockPercentage = Math.floor(percentage) >= 1 ? 100 : Math.floor(percentage * 100);
+        }
+        console.log(this.stockPercentage);
+      }
       this.showShareButton = res.groupBuyInfo.groupBuyStatus == 1 ? true : false;
       this.imgList = res.imageUrl || [];
       this.detailInfo = res;

src/views/order/createOrder.vue

@@ -207,9 +207,7 @@ export default {
             newUrl: `/pages/pay/index?orderNo=${data.orderNo}&from=groupbuy`
           });
         } else if (isApp) {
-          this.nativeBridge.openNewUrl({
-            newUrl: `/pay?orderNo=${data.orderNo}`
-          });
+          this.$router.push({ path: `/pay?orderNo=${data.orderNo}` });
         } else {
           return; // todo 处理纯h5情况
           // this.$dialog({

src/views/pay/payResult.vue

@@ -59,18 +59,22 @@
       </div>
     </div>
     <Goods />
+    <sharePic ref="sharePic" :share-pic-data="sharePicData" />
   </div>
 </template>
 <script>
 import { goUrlExtends } from './extends';
 import CouponCard from './components/CouponCard.vue';
-import { getCouponList } from '@/api/pay.api';
+import { getCouponList, getOrderShareInfo } from '@/api/pay.api';
 import Goods from '@/components/RecoGoods/RecoGoods.vue';
 import { isApp, isWxMp } from '@/service/validation.service';
+import { EventBus } from '@/service/utils.service';
+import sharePic from '@/components/sharePic';
 export default {
   components: {
     Goods,
-    CouponCard
+    CouponCard,
+    sharePic
   },
   extends: goUrlExtends,
   data() {
@@ -83,7 +87,8 @@ export default {
       couponList: [],
       payStatusName: '',
       payMethodName: '',
-      payType: ''
+      payType: '',
+      sharePicData: {}
     };
   },
   created() {
@@ -101,10 +106,32 @@ export default {
       pay_status: this.payStatus
     });
     this.getCouponList();
+    this.setShareData();
+  },
+  mounted() {
+    EventBus.$on('shareClickItem', ev => {
+      if (ev === 'pic') {
+        this.getOrderShareInfo();
+      }
+    });
+  },
+  beforeDestroy() {
+    EventBus.$off('shareClickItem');
   },
   methods: {
+    async setShareData() {
+      const [res] = await getOrderShareInfo({
+        orderNo: this.orderNo
+      });
+      this.sharePicData = res;
+    },
+    getOrderShareInfo() {
+      console.log(typeof this.$refs.sharePic.uploadPic);
+      this.$refs.sharePic.uploadPic();
+    },
     share() {
       // 分享
+      this.$store.dispatch('goods_share_open');
     },
     // goPay() {
     //   this.$track?.registeredEvents('h5_RechargeResultPageClick', {
@@ -125,9 +152,7 @@ export default {
             newUrl: `/pages/pay/index?orderNo=${this.orderNo}&from=groupbuy`
           });
         } else if (isApp) {
-          this.nativeBridge.openNewUrl({
-            newUrl: `/pay?orderNo=${this.orderNo}`
-          });
+          this.$router.push({ path: `/pay?orderNo=${this.orderNo}` });
         } else {
           return; // todo 处理纯h5情况
           // this.$dialog({