支付成功显示会员卡信息弹框

src/api/promote.js

@@ -23,4 +23,8 @@ export default {
   query_my_new_customer_gift(data) {
     return requestPOST(`${process.env.OLSHOP_URL}/promotion/query_my_new_customer_gift`, data)
   },
+  // 获取待领取会员卡商品
+  queryisReceiveGift(){
+    return requestPOST(`${process.env.OLSHOP_URL}/user/getPendingGiftCard?cardId=`, {})
+  }
 };
\ No newline at end of file

src/components/paySuccess/automatiCard.vue

+<template>
+  <van-popup class="domain" :show="showReceiveCard" >
+    <div class="content" id="jitter">
+      <div class="layer-first">
+        <image src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/aa660248-cb60-4a17-aaaa-3cb747830cab.png" alt=""></image>
+      </div>
+      <div class="layer-second">
+        <image src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/a3d40b0e-04f8-4e29-93eb-bd86a1f69222.png" alt=""></image>
+      </div>
+      <div class="cardContent">
+        <image v-if="cardInfo.backgroundType == 1" :src="cardInfo.backgroundPicUrl " alt=""></image>
+        <div v-else class="cardBg" :style="{backgroundColor: WX_DEFAULT_COLORS[cardInfo.color]}">
+           <div class="flex">
+              <p class="cardName line-clamp1">{{cardInfo.title}}</p>
+           </div>
+        </div>
+      </div>
+      <div class="layer-third">
+        <image src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/b2624937-28a2-4ab8-8f6c-a9d3d7f5b837.png" alt=""></image>
+      </div>
+      <div class="userInfo">
+        <div class="userImg">
+          <image v-if="shopUserInfo && shopUserInfo.headPortraitUrl" :src="shopUserInfo.headPortraitUrl" alt ></image>
+        </div>
+        <p v-if="shopUserInfo&&shopUserInfo.nickname" class="name">{{shopUserInfo.nickname}}</p>
+      </div>
+      <div class="name1">
+        <p class="congratulation">恭喜您！</p>
+        <p class="newBag line-clamp2">升级为{{cardInfo.title}}会员</p>
+      </div>
+      <div class="cardInfo">
+        <div class="inter flex">
+          <div class="item">
+            <i class="ant-huiyuan"></i>
+            <span>2大权益</span>
+          </div>
+          <div class="item">
+            <i class="ant-yijianmaiyang"></i>
+            <span>3大开卡礼</span>
+          </div>
+        </div>
+      </div>
+      <div class="btn">
+        <span  @click="viewRights">查看权益</span>
+      </div>
+      <div class="bg">
+        <image src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/b424dcae-56f1-4af6-8bdb-2bb4627b9948.png" alt ></image>
+      </div>
+      <div class="close">
+        <i class="iconfont icon-shanchu2" @click="closeHandle"></i>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import promote from "@/api/promote.js"
+export default {
+  name:"automati-Card",
+  props:{
+    showReceiveCard:Boolean,
+    cardInfo:{
+      type:Object,
+    }
+  },
+  data() {
+    return {
+      datas: [],
+      styleObject:{
+
+      },
+      WX_DEFAULT_COLORS: {
+        Color010: '#63b359',
+        Color020: '#2c9f67',
+        Color030: '#509fc9',
+        Color040: '#5885cf',
+        Color050: '#9062c0',
+        Color060: '#d09a45',
+        Color070: '#e4b138',
+        Color080: '#ee903c',
+        Color081: '#f08500',
+        Color082: '#a9d92d',
+        Color090: '#dd6549',
+        Color100: '#cc463d',
+        Color101: '#cf3e36',
+        Color102: '#5E6671'
+      }
+    };
+  },
+  computed: {
+    shopUserInfo() {
+      return this.$store.state.shopUserInfo;
+    }
+  },
+  onLoad(options) {
+    console.log(this.shopUserInfo,'-----userInfo')
+  },
+  methods: {
+    init(){
+      promote.queryDialogCoupons().then((response1)=>{
+        let response = response1.data;
+        if(response.code==200){
+          this.datas=response.data;
+          if(response.data.toString().length<=0){
+            this.show=false
+          }else{
+            this.show=true
+          }
+        }
+      })
+      // if(this.$store.state.showSendingCoupon){
+      //   this.$store.dispatch('showCouponPop',false)
+      // }
+    },
+    closeHandle() {
+      this.$emit('closeHandle');
+    },
+    viewRights(){
+      let url = `/pages/index/main?from=home&backpath=${encodeURIComponent(`/personalCenter/membershipCard?cardId=${this.cardInfo.id}&userTel=${this.shopUserInfo.mobilephone}`)}`
+      wx.redirectTo({
+        url,
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.domain {
+  /deep/.van-popup{
+    z-index: 999;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    // top: 0;
+    // left: 0;
+    background-color: rgba(#949494, 0.5);
+  }
+  .content {
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    margin: auto;
+    top: 15%;
+    .layer-first{
+      position: absolute;
+      width: 80%;
+      margin:0 auto;
+      bottom:0px;
+      left:50%;
+      transform: translateX(-50%);
+      // bottom:0px;
+      image{
+        width: 100%;
+        height: 30vh;
+      }
+    }
+    .layer-second{
+      position: absolute;
+      width: 75%;
+      margin:0 auto;
+      bottom:0px;
+      left:50%;
+      transform: translateX(-50%);
+      image{
+        width: 100%;
+        height: 50vh;
+      }
+    }
+    .layer-third{
+      position: absolute;
+      width: 80%;
+      margin:0 auto;
+      bottom:0px;
+      left:50%;
+      transform: translateX(-50%);
+      image{
+        width: 100%;
+        height: 22vh;
+      }
+    }
+    .userInfo{
+      width:96px;
+      height: 96px;
+      background: url('http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/df36153c-dfd9-46a9-8270-aab46aa4944d.png') no-repeat;
+      position: absolute;
+      left:50%;
+      top:-6%;
+      background-size: cover;
+      transform: translateX(-50%);
+      .name{
+        font-size: 13px;
+        font-weight: 400;
+        color: #999999;
+      }
+      .userImg{
+        width:60px;
+        height: 60px;
+        position: relative;
+        top:50%;
+        left:50%;
+        transform: translate(-50%,-50%);
+        image{
+          width:100%;
+          height: 100%;
+          border-radius: 50%;
+          text-align: center;
+        }
+      }
+    }
+    .name{
+      position: absolute;
+      width: 100%;
+      color: #FFFFFF;
+      text-align: center;
+      top: 100px;
+      font-size: 15px;
+    }
+    .name1{
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      top: 110px;
+      font-size: 22px;
+      font-weight: 500;
+      color: #A55223;
+      .congratulation{
+        font-size: 20px;
+      }
+      .newBag{
+        width:70%;
+        margin:0 auto;
+      }
+
+    }
+    .items {
+      position: absolute;
+      width: 100%;
+      height: 260px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      top: 100px;
+      padding-top: 10px;
+      padding-bottom:10px;
+      .item {
+        position: relative;
+        left: 30px;
+        height: 100px;
+        overflow: hidden;
+        .bg {
+          position: absolute;
+          width: 280px;
+          top: -30px;
+        }
+
+        .item-content {
+          position: absolute;
+          display: flex;
+          left: 26px;
+          height: 95px;
+          .left {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            width: 93px;
+            height: 100%;
+            color: #fff;
+            font-weight: bold;
+            text-align: center;
+            font-size: 15px;
+            .price{
+              font-size: 25px;
+            }
+          }
+          .right{
+            width: 40vw;
+            height: 95px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .info{
+              font-size: 16px;
+              color: #333;
+              font-weight:bold;
+            }
+            .time{
+              font-size:12px;
+              color: #A3A3A3;
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+    }
+    .cardContent{
+      position: absolute;
+      width: 65%;
+      text-align: center;
+      top: 180px;
+      left:47%;
+      transform: translateX(-50%);
+      .cardBg{
+        width: 100%;
+        height: 140px;
+        background: #67C23A;
+        border-radius: 6px;
+        padding: 12px;
+        .cardName{
+          font-size: 14px;
+          color:#fff;
+        }
+      }
+    }
+    i {
+      color: #ff7422;
+      font-size: 24px;
+    }
+    .bg {
+      width: 95%;
+      margin:0 auto;
+      position: relative;
+      left:-20px;
+      top:5px;
+      image{
+        width: 100%;
+        height: 54vh;
+      }
+    }
+    .cardInfo{
+      position: absolute;
+      width: 70%;
+      bottom: 80px;
+      margin: 0 auto;
+      left:50%;
+      transform: translateX(-50%);
+      .inter{
+        font-size: 14px;
+        font-weight: 400;
+        color: #F3DCC3;
+        flex-wrap: wrap;
+        padding:0 20px;
+        justify-content: center;
+        .item{
+          margin-right:11px;
+          i{
+            color: #F3DCC3;
+            vertical-align: middle;
+          }
+        }
+
+      }
+    }
+    .btn {
+      position: absolute;
+      width: 70%;
+      left: 60px;
+      bottom: 25px;
+      height: 40px;
+      z-index:9999;
+      span {
+        width:204px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 15px;
+        font-weight: 500;
+        color: #643A23;
+        position: absolute;
+        background: linear-gradient(135deg, #DBB292 0%, #F8DFC4 100%);
+        box-shadow: 0px 2px 15px 5px rgba(80,62,28,0.21), 0px 5px 15px 5px rgba(0,0,0,0.5);
+        left: 50%;
+        border-radius: 21px;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+    .close {
+      position: absolute;
+      bottom: -60px;
+      width: 100%;
+      i{
+        color:#fff;
+        font-size: 30px;
+      }
+    }
+  }
+}
+#jitter{
+  animation:mymove 1s ease forwards;
+}
+ @keyframes mymove
+  {
+    0%{
+    transform: scale(1);  /*开始为原始大小*/
+    }
+    25%{
+        transform: scale(1.1); /*放大1.1倍*/
+    }
+    100%{
+        transform: scale(1);
+    }
+
+  }
+</style>

src/main.js

@@ -205,6 +205,8 @@ wx.onAppRoute(res => {
       // 获取当前用户 id
       live.getUserInfo().then(res => {
         if (res.data.code == 200) {
+          console.log("-------------------208")
+          Store.commit("setShopUserInfo", res.data.data);
           wx.setStorageSync('loginUserInfo',res.data.data ? res.data.data : {})
           console.log(Store.state.loginUserInfo.mobilephone,'--------------mobilephone---1')
           userId = res.data.data ? res.data.data.userId : ''

src/pages/paySuccess/index.vue

@@ -48,6 +48,7 @@
         />
       </div>
     </div>
+    <automati-Card :showReceiveCard="showReceiveCard" @closeHandle="closeHandle" :cardInfo="cardInfo"></automati-Card>
     <!-- 分销员弹框入口 -->
     <van-popup
       class="spokemanEntry"
@@ -76,6 +77,7 @@
 <script type="text/ecmascript-6">
 import shop from "@/api/shop";
 import order from "@/api/order";
+import promote from "@/api/promote";
 import spokesman from "@/api/spokesman";
 import { getMiniProgram, query_isEntry } from "@/utils/mayi_fenxiao";
 import { serialize } from "@/utils/index";
@@ -83,6 +85,7 @@ 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 automatiCard from "../../components/paySuccess/automatiCard";
 import text from "@/components/content/text";
 import richText from "../../components/basicTool/rich-text";
 import interval from "@/components/basicTool/interval/index.vue";
@@ -131,7 +134,8 @@ export default {
     interval,
     partition,
     paySuccessInfo,
-    PayElectronCard
+    PayElectronCard,
+    automatiCard
   },
   computed: {},
   onLoad(options) {
@@ -140,6 +144,7 @@ export default {
     this.routeQuery = options;
     this.orderMsg();
     this.setGiftsKey(); //设置码表
+    this.getIsReceiveGift()
     // 获取页面数据
     if (this.mpApp.globalData.pageList) {
       console.log(
@@ -268,6 +273,32 @@ export default {
         url,
       });
     },
+    getIsReceiveGift(){
+      this.cardTime =  setInterval(() => {
+        if(this.cardnum >5){
+          clearInterval(this.cardTime);
+        }
+        promote.queryisReceiveGift().then(res1 =>{
+          let res = res1.data;
+          if(res.code == 200){
+            this.cardnum++;
+              console.log(res.data,'parmas=====')
+              if(res.data){
+                clearInterval(this.cardTime);
+                if(res.data.receiveStatus == 1 && res.data.cardGiftGoods && res.data.cardGiftGoods.length>0){
+                  this.showReceiveCard = true;
+                  this.cardInfo = res.data;
+                }
+              }
+          } else {
+            clearInterval(this.cardTime);
+          }
+        })
+      }, 2000);
+    },
+    closeHandle(){
+      this.showReceiveCard = false;
+    },
     async initWxShare() {
       return
       let this_ = this;

src/store/mutations.js

@@ -22,6 +22,10 @@ const mutations = {
     });
     state.isLogin = val;
   },
+  // 设置商城登录用户信息
+  setShopUserInfo(state, val) {
+    state.shopUserInfo = val;
+  },
   //设置用户信息
   setUserInfo(state,obj){
       wx.setStorage({

src/store/state.js

@@ -20,6 +20,7 @@ const state = {
   offlineShopCode:"",
   isLogin,
   userInfo,
+  shopUserInfo: {},
   spokemanInfo: {},
 
   mixid : '',