feat: 小猪优选极速版提交

lin

2026-04-17 8eb6cb869fb69888abc8f99d3b1fad4fbddcdace

 pages/quanyi/index.vue

@@ -1,12 +1,17 @@
<script>
import textBox from "@/components/textBox/index.vue";


export default {
  components: {
    textBox
  },

  async  created() {

    const _this = this;
    await uni.request({
      url: _this.$webHost+'/api/v2/auth/ygxLogin?phone='+_this.$util.getUserInfo().phone,
      url: _this.$webHost+'/api/v2/auth/ygxLogin?phone='+_this.$util.getUserInfo().phone+'&appId='+'47be9559-6b1b-42dd-84ed-25d028065013',
      success: function (res) {
        _this.ygxLogin = res.data.data;
        uni.setStorageSync('ygxLogin',_this.ygxLogin)
@@ -30,7 +35,14 @@
          },
          success:function (info){
            _this.memberPeriodConfigInfo = info.data.data;
            if(_this.memberPeriodConfigInfo['totalBenefitsAmount']) {
              _this.memberPeriodConfigInfo['totalBenefitsAmount'] = _this.memberPeriodConfigInfo['totalBenefitsAmount'].toFixed(2);
            }
            uni.setStorageSync('memberPeriodConfigInfo',_this.memberPeriodConfigInfo)
            _this.showTextBox = true;
            _this.$nextTick(() => {
              _this.$refs.textBox && _this.$refs.textBox.open()
            })
          }
        })
      }
@@ -45,8 +57,7 @@
    this.time= setTimeout(()=>{
      this.protocolChecked =  [1];
      this.tm = true;
      this.isAgree = true;
    },10000)
    },3000)

  },

@@ -54,10 +65,11 @@
    return  {
      ygxLogin:{},
      protocolChecked: [0],
      showTextBox: false,
      isAgree: false,
      tm: null,
      time:null,
      text:10,
      text:3,
      memberPeriodConfigInfo: {
        totalBenefitsAmount: "",
        installmentPeriods: "",
@@ -66,7 +78,7 @@
  },
  methods: {
    goHome(){
      uni.switchTab({
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
@@ -117,93 +129,162 @@
</script>

<template>
  <view style="background-image: url('/static/imgs/QYBACKA.png');background-repeat: no-repeat;background-size: 100% 100%;background-color: #FFF4FA;">
  <view style="background: url('/static/img/qyBg.png') no-repeat top center; background-size: 100%;background-color: #210E0E;">

    <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 style="display: flex;justify-content: flex-start;position: absolute;left: 0;top: 15rpx;padding-left: 30rpx;z-index: 9;color: #FFFFFF;">
        <view  @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height:  '80rpx',lineHeight:  '80rpx'}" style="margin-top: 20rpx;">
         <uv-icon name="home" color="#ffffff" size="20"></uv-icon>
        </view>

      </view>
<!--      <view style="text-align: center;font-weight: bold;font-size: 36rpx;position: relative;">-->
<!--        <view class="mm" style="text-align: center">会员权益说明</view>-->
<!--      </view>-->
    </view>

      <view style="margin-left: 20rpx;display: flex;justify-content: space-between;">
    <view class="title">
      <view style="margin-top:320rpx;text-align: center;font-weight: bold;line-height:90rpx;font-size:70rpx;background: -webkit-linear-gradient(#ffffff, #F3855B);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
        <p>入会有惊喜</p>
        <p>尊享好福利</p>
      </view>
      <view style="font-size:32rpx;background: -webkit-linear-gradient(#ffffff, #F3855B);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-align: center;letter-spacing: 14rpx;margin-left: 16rpx;margin-top: 10rpx;">欢迎加入商城会员</view>
    </view>

        <view>
          <view style="margin-top: 60rpx;"><image src="/static/imgs/SMTTA.png" style="width: 378rpx;height: 88rpx;"></image></view>

          <view style="margin-top: 10rpx;">
            <image src="/static/imgs/QQXGLK.png" style="width: 178rpx;height: 54rpx;"></image>
    <view class="content" style="overflow-y: scroll;padding:  30rpx;background: #ffffff;border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;margin-top: 60rpx;padding-bottom: 140rpx;">
      <view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 40rpx;margin-bottom: 10rpx;">
        <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
        <view style="font-size: 36rpx;color: #370606;margin: 0 20rpx;">会员权益说明</view>
        <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
      </view>
      <view style="color: #370606;text-align: center;font-size: 24rpx;">MEMBERSHIP BENEFIS DESCRIPTON</view>
      <view class="tips" style="background-color: #FFEEE7;border-radius: 32rpx;margin-top: 20rpx;padding: 30rpx;color: #370606;font-size: 28rpx;">
        <view style="margin-bottom: 20rpx;display: flex;">
          <view style="width: 40rpx;height: 40rpx;background-color: #F4936F;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #370606;margin-right: 20rpx;">
            1.
          </view>
          <view>
            小猪优选极速版商城会员年卡是本商城为会员特别打造的专属服务。成为会员后，您可享受各类商品折扣、促销优惠、生活权益及专属特权，并根据会员等级获赠相应超值礼品，体验我们为您准备的尊享会员服务。
          </view>
        </view>
        <view>
          <image src="/static/imgs/VIPSOA.png" style="width: 272rpx;height: 272rpx;"></image>
        <view style="margin-bottom: 20rpx;display: flex;">
          <view style="width: 40rpx;height: 40rpx;background-color: #F4936F;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #370606;margin-right: 20rpx;">
            2.
          </view>
          <view>
            保险权益赠送：小猪优选极速版商城会员年卡用户有机会获赠涵盖重疾险、意外险、事故险等的综合保障服务。尚未享受持牌机构服务的会员，亦有机会获取此项权益，具体详情请查阅会员中心相关说明。
          </view>
        </view>
        <view style="margin-bottom: 20rpx;display: flex;">
          <view style="width: 40rpx;height: 40rpx;background-color: #F4936F;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #370606;margin-right: 20rpx;">
            3.
          </view>
          <view>
            会员服务一经开通即表示知晓并同意以上内容，自愿加入小猪优选极速版商城会员年卡会员，并同意平台及平台权益合作方在账单日收入会员费，可在个人中心查看订单详情。
          </view>
        </view>
        <view style="margin-bottom: 20rpx;display: flex;">
          <view style="width: 40rpx;height: 40rpx;background-color: #F4936F;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #370606;margin-right: 20rpx;">
            4.
          </view>
          <view>
            平台有权根据实际情况优化调整礼品内容和会员权益，最终解释权归小猪优选极速版商城所有。
          </view>
        </view>
      </view>
      <view style="background: url('/static/img/qyBg2.png') no-repeat top center; background-size: 100%;width: 100%;height: 290rpx;margin-top: 20rpx;padding: 40rpx;">
        <view style="margin-bottom:20rpx;font-size: 44rpx;font-weight: bold;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">尊享会员年卡</view>
        <view style="font-size: 28rpx;">
          <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">年卡金额：{{ memberPeriodConfigInfo.totalBenefitsAmount }}元</p>
          <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">扣款期数：{{ memberPeriodConfigInfo.installmentPeriods }}期(先享后付，免息)</p>
          <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">有效期：365天</p>
        </view>
      </view>

    </view>
    <view class="content" style="overflow-y: scroll;padding:  30rpx;padding-top: 0;margin-top: -30rpx;">
      <view class="tips" style="font-size: 28rpx;padding: 28rpx 32rpx;background-image: url('/static/imgs/TIPSBACK.png');background-repeat: no-repeat;background-size: 100% 100%;padding-bottom: 32rpx;">
        <view style="font-size: 28rpx;color: #333333">①　{{memberPeriodConfigInfo.showTitle}}商城会员年卡是本商城为会员特别打造的专属服务。成为会员后，您可享受各类商品折扣、促销优惠、生活权益及专属特权，并根据会员等级获赠相应超值礼品，体验我们为您准备的尊享会员服务。</view>
        <view style="font-size: 28rpx;color: #333333">②　保险权益赠送：{{memberPeriodConfigInfo.showTitle}}商城会员年卡用户有机会获赠涵盖重疾险、意外险、事故险等的综合保障服务。尚未享受持牌机构服务的会员，亦有机会获取此项权益，具体详情请查阅会员中心相关说明。</view>
        <view style="font-size: 28rpx;color: #333333">③　平台保留根据实际情况新增或优化会员权益内容的权利。</view>
<!--      <view style="margin-top: 30rpx;" class="back">-->
<!--        <view style="flex: 1">-->
<!--          <view class="tips" style="font-size: 36rpx;font-weight: bold;color: #794007;margin-bottom: 20rpx;">专享特权</view>-->
<!--          <view class="tips" style="font-size: 26rpx;color: #794007;margin-bottom: 20rpx;line-height: 44rpx;">小猪优选会员年卡会员  {{ memberPeriodConfigInfo.totalBenefitsAmount }}元/年</view>-->
<!--          <view class="tips" style="font-size: 26rpx;margin-bottom: 20rpx;color: #794007;line-height: 44rpx;">分期支付：先享后付（提供的实物商品为指定的价值888元的红酒一瓶），分{{ memberPeriodConfigInfo.installmentPeriods }}期支付包年会员服务、免息</view>-->
<!--          <view class="tips" style="font-size: 26rpx;margin-bottom: 3rpx;color: #794007;line-height: 44rpx;">购买成功后，可在个人中心查看分期订单详情</view>-->

<!--        </view>-->
<!--        <view style="display: flex;margin-top: 150rpx;">-->
<!--          <checkbox-group activeColor="#fff"   @change='isAgree=!isAgree'  style="height: 100px;">-->
<!--            <checkbox  :checked="isAgree ? true : false" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">-->
<!--            </checkbox>-->
<!--          </checkbox-group>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="tips" style="color: #666666;margin-top: 30rpx;font-size: 26rpx">点击按钮即表示知晓并同意以上内容，自愿加入本商城小猪优选会员年卡会员，并同意平台及平台权益合作方在账单日收入会员费</view>-->
      <view style="font-size: 24rpx;color: #666666;display: flex;align-items: center;margin: 40rpx 0;height: 50rpx;justify-content: center;">
        <checkbox-group activeColor="#fff"   @change='isAgree=!isAgree'  style="">
          <checkbox  :checked="isAgree ? true : false" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">
          </checkbox>
        </checkbox-group>
        <text style="color: #20110E;">我已阅读并同意</text>
        <!--        <text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link('/pages/protocol/protocol?code=shop_ai_service&title=会员服务协议-YXKJ')">《会员服务协议-YXKJ》</text>
                <text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link('/pages/protocol/protocol?code=shop_auto_service&title=委托扣款确认书-YXKJ')">《委托扣款确认书-YXKJ》</text>-->
        <text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">《会员权益服务协议-小猪优选极速版》</text>
      </view>


      <view  class="QXFJH"  style="background-image: url('/static/imgs/QXFJH.png');background-size: 100% 100%;text-align: center;background-repeat: no-repeat;padding: 28rpx 0;margin-top: 18rpx;margin-bottom: 16rpx;color: #333333;line-height: 48rpx;">
        <view style="font-weight: 600;">{{memberPeriodConfigInfo.showTitle}}商城会员专享特权</view>

        <view>年卡费用：{{memberPeriodConfigInfo.totalBenefitsAmount }}元/年</view>
        <view>支付期数：{{memberPeriodConfigInfo.installmentPeriods }}期</view>
        <!--        <view>支付期数：{{memberPeriodConfigInfo.installmentPeriods }}期（每期{{memberPeriodConfigInfo.totalBenefitsAmount / memberPeriodConfigInfo.installmentPeriods}}元）</view>-->


      </view>

      <view style="font-size: 22rpx;padding: 36rpx 32rpx 24rpx 32rpx;background-image: url('/static/imgs/CLOSAN.png');background-repeat: no-repeat;background-size: 100% 100%;margin-bottom: 32rpx;">
        <view style="font-size: 24rpx;margin-bottom: 30rpx;color: #333333">会员先享后付，包年会员服务、免息，购买成功后可在个人中心查看订单详情。会员服务开通成功不支持取消、退款。</view>
        <view style="font-size: 24rpx;color: #333333">点击按钮即表示知晓并同意以上内容，自愿加入本商城年卡会员，且同意平台及平台权益合作方在账单日收入会员费。</view>
      </view>




      <view style="display: flex;gap: 20rpx;">
<!--      <view  class="tips" style="color: #666666;margin-top: 24rpx;margin-bottom: 20rpx;font-size: 26rpx">*会员服务一经开通不支持取消、退款，会员服务到期前，用户可以选择续订或取消续费。</view>-->
      <view style="position: fixed;bottom: 40rpx;left: 30rpx;width: 690rpx;display: flex;gap: 20rpx;z-index: 2;">
        <button @click="goHome" style="width: 200rpx;height: 100rpx;padding: 10rpx 0;border-radius: 50rpx;font-size: 34rpx">暂不开通</button>
        <button
            style="height: 100rpx;color: #666666;border-radius: 24rpx;font-size: 34rpx;line-height: 100rpx;width: 170rpx;background-color: unset;"
            @click="goHome"
        >暂不开通</button>
        <button
            style="height: 100rpx;color: white;border-radius: 24rpx;font-size: 34rpx;line-height: 100rpx;flex: 1;"
            :disabled="!tm"
            style="height: 100rpx;padding: 10rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;flex: 1;"

            @click="submit"

            :class="tm &&protocolChecked.length?'activityBut':'disabledBut'"
        >同意并开通<text v-if="!tm">({{text}}秒)</text></button>
        >同意并开通<text v-if="!tm">（{{text}}秒）</text></button>
      </view>
      <view style="display: flex;margin-top: 20rpx;display: flex;font-weight: 600;">
        <uv-checkbox-group activeColor="#FF1472"   @change='isAgree=!isAgree'  >
          <uv-checkbox  :checked="isAgree ? true : false" activeColor="#FF1472" iconSize="14" size="16" :name="1" shape="circle">
          </uv-checkbox>
          <view style="font-size: 24rpx;color: #8B8D96">我已阅读并同意<text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">{{ memberPeriodConfigInfo.protocolName }}</text></view>
        </uv-checkbox-group>

      <!--   专享会员生活权益   -->
      <view>
        <view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
          <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
          <view style="font-size: 36rpx;color: #370606;margin: 0 20rpx;">专享会员生活权益</view>
          <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
        </view>
        <view class="life" style="background: url('/static/img/qsLife.png') no-repeat top center; background-size: 100%;width: 100%;height: 1506rpx;">

        </view>
        <view style="width: 690rpx;margin-top: 20rpx;text-align: center;">
<!--          <button @click="toHuiyuan" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">兑换生活权益</button>-->
          <view style="color: #333;font-size: 24rpx;padding-top: 0rpx;padding-bottom: 10rpx;">以上权益仅为预览展示，实际以兑换页面为准</view>
        </view>
        <view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
          <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
          <view style="font-size: 36rpx;margin: 0 20rpx;color: #370606;">专享会员实物权益</view>
          <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
        </view>
        <view class="physical" style="background: url('/static/img/qsPhysical.png') no-repeat top center; background-size: 100%;width: 100%;height: 1580rpx;">

        </view>
        <view style="width: 690rpx;margin-top: 20rpx;text-align: center;">
<!--          <button @click="getTips" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">查询实物权益</button>-->
          <view style="color: #333;font-size: 24rpx;padding-top: 0rpx;padding-bottom: 40rpx;">以上权益仅为预览展示，实际以商城发出为准</view>
        </view>
      </view>

      <!--      <view style="text-align: center;display: flex;flex-direction: row;justify-content: center"><text @click="submit(false)" style="color: #666666;margin-bottom: 20rpx;font-size: 28rpx">不同意</text></view>-->
    </view>
    <textBox v-if="showTextBox" ref="textBox" :code="memberPeriodConfigInfo.protocolCode" :title="memberPeriodConfigInfo.protocolName"></textBox>
  </view>
</template>

<style scoped lang="scss">
.activityBut{
  background: #FF1472;
  font-weight: 600;
  //background: #EE2626;
  background-image: linear-gradient(to right, #FFEAE2, #FF6F55);
  font-weight: 500;
}
.disabledBut{
  background: #666666;
  font-weight: 600;
}
.disabledBut{
  background: #999 !important;
  background: #dddddd;
}
.head{
  padding: 30rpx 10rpx 0 30rpx;
  padding: 30rpx 30rpx 0 30rpx;

  font-size: 32rpx;
  color: #252938;
@@ -234,59 +315,7 @@
  .mr{
    margin-right: 20rpx;
  }
  .tips{
    position: relative;
    &::after{
      content: '';
      display: block;
      position: absolute;
      bottom: -38rpx;
      right: 22rpx;
      width: 14rpx;
      height: 62rpx;
      background: #FFD3DD;
      border-radius: 78rpx 78rpx 78rpx 78rpx;
      z-index: 2;
    }
    &::before{
      content: '';
      display: block;
      position: absolute;
      bottom: -38rpx;
      width: 14rpx;
      height: 62rpx;
      background: #FFD3DD;
      border-radius: 78rpx 78rpx 78rpx 78rpx;
      z-index: 2;
    }
  }
}
.QXFJH{
  position: relative;
  &::after{
    content: '';
    display: block;
    position: absolute;
    bottom: -38rpx;
    right: 22rpx;
    width: 14rpx;
    height: 62rpx;
    background: #FFD3DD;
    border-radius: 78rpx 78rpx 78rpx 78rpx;
    z-index: 2;
  }
  &::before{
    content: '';
    display: block;
    position: absolute;
    bottom: -38rpx;
    width: 14rpx;
    height: 62rpx;
    left: 32rpx;
    background: #FFD3DD;
    border-radius: 78rpx 78rpx 78rpx 78rpx;
    z-index: 2;
  }

}
.back{