电子卡券支付成功原生页

config/dev.env.js

@@ -18,6 +18,7 @@ module.exports = merge(prodEnv, {//zjgyl
   // BASE_URL:"'http://172.16.1.18:3000'",
   BASE_URL:"'https://test-m-shop.mayi888.cn'",
   ADMIN_URL:"'https://test-ant.mayi888.cn'",
+  GUIDE_URL:"'https://guide-m.mayi888.cn'",
   // BASE_URL:"'http://192.168.137.1:3004'",
 
   OLSHOP_URL:'"https://test-m-shop.mayi888.cn/innerApi/shopApiService"',

config/prod.env.js

@@ -3,6 +3,7 @@ module.exports = {
   SHOP_MIXID:"'ant'",
   NODE_ENV: '"production"',
   BASE_URL:"'https://shop.mayi888.com'",
+  GUIDE_URL:"'https://m-guide.mayi888.com'",
   ADMIN_URL:"'https://admin.mayi888.com'",
   
   OLSHOP_URL:'"https://shop.mayi888.com/innerApi/shopApiService"',

src/api/order.js

@@ -13,4 +13,8 @@ export default {
     orderDetail(data) {
       return requestPOST(`${process.env.OLSHOP_URL}/order/detail?orderSn=${data.orderSn}`)
     },
+    //获取电子卡券订单卡券
+    getElectronicCardRedeemCode(data){
+      return requestGET(`${process.env.OLSHOP_URL}/order/getElectronicCardRedeemCode?orderSn=${data}`)
+    }
  }

src/components/paySuccess/PayElectronCard.vue

+<template>
+  <!-- 购买电子卡券支付完成 -->
+  <div class="PayElectronCard">
+    <div class="top">
+      <div class="bgImg">
+        <image
+          src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/X87KGrY8GP.png"
+          alt=""
+        ></image>
+      </div>
+      <div class="info flex">
+        <div class="infoTop flex">
+          <van-icon name="checked" />
+          <p class="success">购买成功</p>
+        </div>
+        <p class="infoBottom">向商家出示</p>
+      </div>
+    </div>
+    <div class="goodsInfo" v-for="(item,index) in orderDetail.orderItems" :key="index">
+      <div class="shopName">{{item.terminalProductGoodsOrgName}}</div>
+      <div class="info flex">
+        <div class="goodsImg">
+          <image
+            :src="item.specificationPictureUrl"
+            alt=""
+          ></image>
+        </div>
+        <div class="right">
+          <p class="goodsName line-clamp2">{{item.productName}}</p>
+          <p class="goodsSpa">{{item.specifications | spaToStr}}</p>
+          <div class="bottom flex">
+            <p class="goodsPrice">￥ <span>{{item.dealPrice | keepTwoNum}}</span></p>
+            <p class="goodsNum">x <span>{{item.qty | keepIntNum}}</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="useCard">
+      <div class="useTop">
+        <p class="available">
+          可使用 (<span>{{ available }}</span
+          >张)
+        </p>
+        <p class="endTime">
+          有效期至<span>{{ firstCard.effectiveDateEndStr }}</span>
+        </p>
+      </div>
+      <div class="code">
+        <div class="topText">向商家出示二维码或券号即可消费</div>
+        <!-- <div class="PayElectronCardQrCode" id="PayElectronCardQrCode"></div> -->
+        <div class="qrCode flex">
+          <canvas
+            class="canvas-code"
+            canvas-id="PayElectronCardQrCode"
+            :style="{ background: '#fff', width: '308rpx', height: '308rpx' }"
+          />
+        </div>
+      </div>
+      <div class="cardInfo">
+        <div class="topText">券码信息</div>
+        <div class="borderLine"></div>
+        <div class="cardList">
+          <div class="cardItem flex" v-for="(item, index) in cardList" :key="index">
+            <div class="cardItemL flex">
+              <div class="dot"></div>
+              <div class="cardCode">{{item.redeemCodeCardNumber}}</div>
+            </div>
+            <p class="cardItemR">{{item.writeoffStatus | getWriteoffStatus}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="height: 40px"></div>
+    <div class="toDetail flex">
+      <div class="btn flex" @click="toDetail">查看详情</div>
+      <div class="btn flex" @click="toIndex">回首页</div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import order from "@/api/order"
+import QRCode from "@/utils/weapp-qrcode.js";
+export default {
+  name: "PayElectronCard",
+  props:{
+    orderDetail:{
+      type: Object,
+      default:{},
+    }
+  },
+  data() {
+    return {
+      cardList:[],
+      firstCard:{},
+      available:0,//可用
+      routeQuery: {},
+      qrCodeImg: "",
+    };
+  },
+  filters:{
+    // 过滤规格
+    spaToStr(val){
+      let newVal=JSON.parse(val);
+      if(Object.keys(newVal).length>0){
+        let val=[];
+        for(let i in newVal){
+          val.push(newVal[i]);
+        }
+        return val?val.join(","):"";
+      }
+      return ""
+    },
+    getWriteoffStatus(val){
+      let list=['未购买','未核销','已核销','退款中','已退款'];
+      return list[val];
+    }
+  },
+  components: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  onLoad(options){
+    console.log(options,'--PayElectronCard--onLoad')
+    this.routeQuery = options;
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getList();
+    },
+    getList(){
+      order.getElectronicCardRedeemCode(this.routeQuery.orderSn).then(res1 => {
+        let res = res1.data;
+        if(res.code==200 && res.data && res.data.length>0){
+          this.cardList=res.data;
+          this.cardList.forEach((item,index)=>{
+            item.effectiveDateEndStr=item.effectiveDateEnd.replace(/-/g,'/').split(" ")[0];
+            // 核销状态（0：未购买；1：未核销；2：已核销；3：退款中；4：已退款）
+            if(item.writeoffStatus==1){
+              this.available++;
+            }
+          })
+          this.firstCard=this.cardList[0];
+          this.qrcode();
+        }
+      })
+    },
+    toDetail(){
+      let url = `/pages/index/main?from=home&backpath=${encodeURIComponent(`/order/orderDetail?orderSn=${this.routeQuery.orderSn}&isReplace=true`)}}`
+      wx.redirectTo({
+        url,
+      });
+    },
+    toIndex(){
+      wx.reLaunch({
+        url: "/pages/home/main",
+      });
+    },
+    qrcode() {
+      let _this = this;
+      const systemInfo = wx.getSystemInfoSync();
+      const width = (154 * systemInfo.windowWidth) / 375;
+      const height = width;
+      new QRCode("PayElectronCardQrCode", {
+        width,
+        height,
+        text: `${process.env.GUIDE_URL}/login?codeNumber=${this.firstCard.redeemCodeCardNumber}&mixid=${this.$store.state.mixid}`, // 二维码地址
+        colorDark: "#000",
+        colorLight: "#fff",
+        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
+        callback: (res) => {
+          console.log(res.path, "---res.path");
+          _this.qrCodeImg = res.path;
+          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.block {
+  width: calc(100vw - 20px);
+  margin: 10px;
+  padding: 12px;
+  background: #fff;
+  border-radius: 6px;
+}
+.cardDot {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #f5f5f5;
+}
+.PayElectronCard {
+  width: 100vw;
+  height: calc(100vh - 49px);
+  overflow-y: auto;
+  background: #f3f3f3;
+  position: fixed;
+  top: 0;
+  .top {
+    position: relative;
+    height: 98px;
+    color: #fff;
+    padding-top: 40px;
+    overflow: hidden;
+    .bgImg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      image {
+        width: 100%;
+      }
+    }
+    .info {
+      position: relative;
+      z-index: 1;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      .infoTop {
+        align-items: center;
+        font-size: 16px;
+        .success {
+          font-weight: bold;
+          margin-left: 4px;
+        }
+      }
+      .infoBottom {
+        margin-top: 10px;
+      }
+    }
+  }
+  .goodsInfo {
+    box-sizing: border-box;
+    @extend .block;
+    .shopName {
+      font-size: 14px;
+      color: #333;
+      font-weight: bold;
+    }
+    .info {
+      margin-top: 10px;
+      .goodsImg {
+        width: 90px;
+        height: 90px;
+        background: #f5f5f5;
+        overflow: hidden;
+        border-radius: 4px;
+        flex-shrink: 0;
+        image {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .right {
+        flex: 1;
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .goodsName {
+          font-size: 14px;
+          color: #333;
+        }
+        .goodsSpa {
+          font-size: 12px;
+          color: #999;
+        }
+        .bottom {
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 4px;
+          .goodsPrice {
+            font-size: 14px;
+            color: var(--main-color);
+          }
+          .goodsNum {
+            font-size: 12px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+  .useCard {
+    @extend .block;
+    padding: 0;
+    .useTop {
+      padding: 12px;
+      background: #fafafa;
+      .available {
+        font-size: 14px;
+        color: #333;
+      }
+      .endTime {
+        font-size: 12px;
+        margin-top: 4px;
+        color: #999;
+      }
+    }
+    .code {
+      padding: 12px;
+      flex-direction: column;
+      align-items: center;
+      .topText {
+        text-align: center;
+        color: #999;
+      }
+      .qrCode{
+        margin: 28px auto 0;
+        width: 308rpx;
+        height: 308rpx;
+        border: 1px solid #F3F3F3;
+        padding: 16px;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+  .cardInfo {
+    position: relative;
+    &::before {
+      @extend .cardDot;
+      left: -7px;
+    }
+    &::after {
+      @extend .cardDot;
+      right: -7px;
+    }
+    padding: 12px;
+    .topText {
+      font-size: 14px;
+      color: #333;
+      padding-bottom: 6px;
+    }
+    .borderLine {
+      width: calc(100vw - 70px);
+      margin: 0 auto;
+      border-bottom: 1px dashed #979797;
+    }
+    .cardList {
+      .cardItem {
+        padding: 8px 0;
+        justify-content: space-between;
+        align-items: center;
+        .cardItemL {
+          align-items: center;
+          .dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #333;
+          }
+          .cardCode {
+            margin-left: 4px;
+            font-size: 12px;
+            color: #333;
+          }
+        }
+        .cardItemR {
+          font-size: 12px;
+          color: #333;
+        }
+      }
+    }
+  }
+  .toDetail {
+    position: fixed;
+    bottom: 0;
+    background: #f5f5f5;
+    width: 100%;
+    height: 50px;
+    justify-content: space-around;
+    align-items: center;
+    .btn {
+      width: 46%;
+      height: 36px;
+      border-radius: 36px;
+      background: var(--main-color);
+      color: #fff;
+      font-size: 14px;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>

src/pages/paySuccess/index.vue

 <template>
   <!-- 支付成功页 -->
-  <div class="paySuccess" v-show="showPage">
+  <div class="paySuccess" v-if="showPage" :style="{'--main-color':themeColor['--main-color'],'--minor-color':themeColor['--minor-color']}">
     <ThemeDataPlant :pageCode="11"></ThemeDataPlant>
+    <PayElectronCard v-if="orderDetail.orderType==15" :orderDetail="orderDetail"></PayElectronCard>
+    <div v-else>
       <div style="margin-top: 60px;"></div>
       <div v-for="(item, index) in pageData" :key="index">
         <!-- 其他组件 -->
@@ -45,6 +47,7 @@
           :totalMoney="totalMoney"
         />
       </div>
+    </div>
     <!-- 分销员弹框入口 -->
     <van-popup
       class="spokemanEntry"
@@ -76,9 +79,10 @@ import order from "@/api/order";
 import spokesman from "@/api/spokesman";
 import { getMiniProgram, query_isEntry } from "@/utils/mayi_fenxiao";
 import { serialize } from "@/utils/index";
-import { checkTabbarPage, checkShowConditionIds } from "@/utils/mayi";
+import { checkTabbarPage, checkShowConditionIds, themeColor } from "@/utils/mayi";
 import ThemeDataPlant from "../../components/ThemeDataPlant";
 import paySuccessInfo from "../../components/paySuccess/paySuccessInfo";
+import PayElectronCard from "../../components/paySuccess/PayElectronCard";
 import text from "@/components/content/text";
 import richText from "../../components/basicTool/rich-text";
 import interval from "@/components/basicTool/interval/index.vue";
@@ -112,6 +116,12 @@ export default {
       pageInfo: {},
       pageData: {},
       showPage: false,
+      systemInfo : {},
+      tabbarHeight : 0,
+      themeColor:{
+        '--main-color':"",
+        '--minor-color':"",
+      },
     };
   },
   components: {
@@ -121,6 +131,7 @@ export default {
     interval,
     partition,
     paySuccessInfo,
+    PayElectronCard
   },
   computed: {},
   onLoad(options) {
@@ -142,6 +153,19 @@ export default {
         that.init(params);
       };
     }
+    this.systemInfo = wx.getSystemInfoSync()
+    console.log(this.systemInfo,'-----------systemInfo')
+    let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
+    console.log(menuButtonInfo,'menuButtonInfo')
+    this.tabbarHeight = (menuButtonInfo.top - this.systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + this.systemInfo.statusBarHeight
+    console.log(this.tabbarHeight,'-----------tabbarHeight')
+    if(themeColor['--main-color']!='#ffffff'){
+      this.themeColor = themeColor
+    }else {
+      this.mpApp.themeColorCallBack=(res)=>{
+        this.themeColor = res
+      }
+    }
   },
   onShow() {
     console.log("--paySuccess-onShow");
@@ -161,6 +185,7 @@ export default {
             this.title = "拼团详情"
           }else {
             this.title = "支付成功"
+            this.showPage = true;
           }
           this.splitStatus=res.data.splitStatus;
           this.orderId = res.data.orderId;
@@ -169,7 +194,6 @@ export default {
             this.goodsId =
               res.data.noShipmentOrderItems[0].terminalProductGoodsId;
           }
-          this.showPage = true;
 
           //查询是否是分销员
           getMiniProgram().then(res1 => {
@@ -443,6 +467,25 @@ export default {
 
 <style lang="scss" scoped>
 .paySuccess {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  .tabbar{
+    position: sticky;
+    top: 0;
+    z-index: 9999;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding-left: 12px;
+    .tab-back{
+      /deep/.van-icon-arrow-left{
+        font-size: 22px;
+      }
+    }
+  }
 }
 .spokemanEntry {
   /deep/.van-popup{