UI: 齐享购新增跳转第三方链接banner图功能

lin

2026-05-06 1af4b2e328aaf4d92bbbbf5780f6e69a8062cec9

 pages/quanyi/index.vue

@@ -1,12 +1,24 @@
<script>


import textBox from "@/components/textBox/index.vue";
import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue";  //虚拟
import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue"; // 实物
export default {
  components: {
    textBox,
    tehuichongzhi,
    lanyaerji,
  },

  async  created() {
    const _this = this;

    await uni.request({
      url: _this.$webHost+'/api/v2/auth/qxgIosUnionLogin?phone='+_this.$util.getUserInfo().phone,
      data:{
        customerId: uni.getStorageSync('qxgLogin').customerId,
        appId: uni.getStorageSync('qxgLogin').appId
      },
      success: function (res) {
        _this.qxgLogin = res.data.data;
        uni.setStorageSync('qxgLogin',_this.qxgLogin)
@@ -31,10 +43,34 @@
          success:function (info){
            _this.memberPeriodConfigInfo = info.data.data;
            uni.setStorageSync('memberPeriodConfigInfo',_this.memberPeriodConfigInfo)
            _this.showTextBox = true;
            _this.$nextTick(() => {
              _this.$refs.textBox && _this.$refs.textBox.open()
            })
          }
        })
      }
    })
	
   // 获取VIP值
      uni.request({
        url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone,
        data:{
          customerId: uni.getStorageSync('qxgLogin').customerId,
          appId: uni.getStorageSync('qxgLogin').appId
        },
        success: function (res) {
          if(res.data.code==200){
            _this.lst = res.data.data;
            _this.lst.forEach(item=>{
              if(item && item.isBuy === 1 && [1,2,3].includes(item.period)) {_this.VIP = item.period;}
            })
          } else {
		
		
          }
        }
      })

    let mk =  setInterval(()=>{
      this.text -=1;
@@ -52,9 +88,12 @@

  data() {
    return  {
     active: 0,
      VIP: 1, // 1黄金 2铂金 3黑金
      qxgLogin:{},
      protocolChecked: [0],
      isAgree: false,
      showTextBox: false,
      tm: null,
      time:null,
      text:10,
@@ -64,6 +103,7 @@
      }
    }
  },

  methods: {
    goHome(){
      uni.switchTab({
@@ -117,12 +157,10 @@
</script>

<template>
  <view style="background-image: url('/static/imgs/QYBACKA.png');background-repeat: no-repeat;background-size: 100% 100%;background-color: #FFF4FA;">
  <view class="box" style="">

    <view class="head" style="position: relative">
      <view style="display: flex;justify-content: flex-start;z-index: 9">
        <view  @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height:  '20rpx',lineHeight:  '80rpx'}" ></view>
      </view>


      <view style="margin-left: 20rpx;display: flex;justify-content: space-between;">

@@ -186,11 +224,47 @@
        </uv-checkbox-group>

      </view>
     <view class="tab-wrap">
       <text @click="active=0" :class="active==0?'active':''">实物权益</text>
       <text @click="active=1" :class="active==1?'active':''">虚拟权益</text>
     </view>
     <view class="note" style="margin-bottom: 20rpx;text-align: center;color: #999;font-size: 24rpx;" v-if="active==0">页面展示为实物样例，实际以用户收到的商品为准</view>
     <view class="note" style="margin-bottom: 20rpx;text-align: center;color: #999;font-size: 24rpx;" v-if="active==1">页面为虚拟权益预览，实际用户以当日兑换内容为准</view>
     <lanyaerji v-if="active==0" style="margin:0 30rpx;"/>
     <tehuichongzhi v-else :VIP="VIP"  style="margin-top: 50rpx;" />
    </view>
    <textBox v-if="showTextBox" ref="textBox" :code="memberPeriodConfigInfo.protocolCode" :title="memberPeriodConfigInfo.protocolName"></textBox>
  </view>
</template>

<style scoped lang="scss">
/* tab */
.tab-wrap {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 50rpx;
  margin-top: 50rpx;
}
.tab-wrap text {
  font-weight: 600;
  font-size: 36rpx;
  color: #666;
}
.active {
  color: #333 !important;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 50rpx;
    height: 8rpx;
    background: linear-gradient( 91deg, #FDFAFF 0%, #F9C969 100%);
    border-radius: 32rpx;
    position: absolute;
    bottom: -20rpx;
    left: calc(50% - 25rpx);
  }
}
.activityBut{
  background: #FF1472;
  font-weight: 600;
@@ -203,7 +277,7 @@
  background: #999 !important;
}
.head{
  padding: 30rpx 10rpx 0 30rpx;
  padding: 0rpx 10rpx 0 30rpx;

  font-size: 32rpx;
  color: #252938;
@@ -297,5 +371,11 @@
  display: flex;
  flex-direction: row;
}

.box{
  background-image: url('/static/imgs/QYBACKA.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #FFF4FA;
  min-height: 100vh;
}
</style>