团购组件增加筛选

quanwei

2026-01-17 e1e2fe5710a5b5cd9c19bd3aa99c998a1a613ca8

 mobile/pages/plus/vip/apply.vue

@@ -1,123 +1,251 @@
<template>
   <view class="apply-vip" v-if="!loading">
   <view class="apply-bonus" v-if="!loadding">
      <!-- #ifdef MP-WEIXIN || APP-PLUS -->
      <view class="ww100" :style="'height:'+topBarTop()+'px;'"></view>
      <view class="tc  head_top" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
         <view class="reg180" @click="goback"><text class="icon iconfont icon-jiantou"></text></view>
         <view class="fb">{{titel}}</view>
         <view class="fb">{{title}}</view>
      </view>
      <!-- #endif -->
      <view class="banner d-c-c d-c" v-if="top_background!=''">
         <image :src="top_background" mode="widthFix"></image>
      </view>
      <view class="banner-fill"></view>
      <!--申请成功-->
      <template v-if="apply_status == 'success'">
         <view class="form-wrap p30 f30 tc">
            <view class="pb30 d-c-c gray3 f40 fb">
               申请已提交
      <view class="apply-box">
         <!--申请成功-->
         <template v-if="!is_applying ">
            <view class="form-wrap p-30-0 f30">
               <view class="p30 d-c-c gray3 f30 fb border-b-d">
                  {{words.apply.words.title.value}}
               </view>
               <view class="section">
                  <view @click="selectItem(item)" class="item" :class="index==productList.length-1?'noborder':'border-b-e'" v-for="(item, index) in productList" :key="index">
                     <image :src="item.product_image" class="cover" mode="aspectFit"></image>
                     <view class="info">
                        <view class="title">{{ item.product_name }}</view>
                        <view class="describe">{{ item.product_sku.product_attr }}</view>
                        <view class="level-box count_choose">
                           <view class="price">
                              ¥
                              <text class="num">{{ item.product_sku.product_price }}</text>
                           </view>
                           <view class="num-wrap">
                              <view class="" @tap.stop="reduceFunc(item)" v-if="item.total_num > 1">
                                 <image class="reduce_icon" src="../../static/icon/reduce.png" mode=""></image>
                              </view>
                              <view class="text-wrap">{{item.total_num}}</view>
                              <view class="" @tap.stop="addFunc(item)" v-if="item.total_num < item.product_sku.stock_num ">
                                 <image class="add_icon" src="../../static/icon/add.png" mode=""></image>
                              </view>
                           </view>
                        </view>
                     </view>
                     <view class="icon-box pl20" :class="product_id==item.product_id?'active':''">
                        <text class="icon iconfont icon-xuanze f50"></text>
                     </view>
                  </view>
               </view>
               <view class="button-box p-30-0">
                  <view class="d-c-c f28">
                     <checkbox-group @change="changeFunc">
                        <checkbox value="checkbox" :checked="is_read" />
                     </checkbox-group>
                     <text>我已阅读并了解</text>
                     <text class="red" @click="isPopup=true">
                        【{{ words.apply.words.license.value }}】
                     </text>
                  </view>
                  <view class="d-c-c mt30">
                     <button class="btn-red" @click="Submit()">{{ words.apply.words.submit.value }}</button>
                  </view>
               </view>
            </view>
            <view class="pt20">
               您的申请已提交，请耐心等待审核
            <view class="bottom-banner d-c-c d-c" v-if="bottom_background!=''">
               <image :src="bottom_background" mode="widthFix"></image>
            </view>
            <view class="pt30">
               <button type="primary" class="btn-gcred" @click="gotoVip">返回VIP中心</button>
         </template>
         <!--分销商审核中-->
         <template v-if="is_applying">
            <view class="d-c-c pt30">
               <text style=" font-size: 100rpx;" class="icon iconfont icon-icon_xianshi-xian"></text>
            </view>
            <view class="p-30-0 d-c-c gray6 f30">
               {{ words.apply.words.wait_audit.value }}
            </view>
            <view class="p30 mt30 d-c-c">
               <button type="primary" class="btn-red" @click="gotoShop">{{ words.apply.words.goto_mall.value }}</button>
            </view>
         </template>
      </view>
      <!--协议-->
      <Popup :show="isPopup" msg="申请协议">
         <view class="agreement-content f28 lh150">
            {{agreement}}
         </view>
      </template>
		
      <!--申请表单-->
      <template v-else>
         <view class="form-wrap p30 f30">
            <form @submit="formSubmit">
               <view class="form-item border-b">
                  <view class="field-name">姓名</view>
                  <input name="real_name" class="flex-1 ml20" type="text" placeholder="请输入真实姓名" />
               </view>
               <view class="form-item border-b">
                  <view class="field-name">手机号</view>
                  <input name="mobile" class="flex-1 ml20" type="number" maxlength="11" placeholder="请输入手机号" />
               </view>
               <view class="form-item border-b">
                  <view class="field-name">推荐人</view>
                  <input name="referee_id" class="flex-1 ml20" type="number" placeholder="请输入推荐人ID（选填）" />
               </view>
					
               <view class="pt30">
                  <button class="btn-gcred" form-type="submit">提交申请</button>
               </view>
            </form>
         <view class="ww100 pt20 d-c-c">
            <button type="primary" class="btn-red" @click="isPopup=false">我已阅读</button>
         </view>
      </template>
      </Popup>
   </view>
</template>

<script>
   import Popup from '@/components/uni-popup.vue'
   export default {
      components: {
         Popup
      },
      data() {
         return {
            loading: true,
            titel: '',
            /*是否加载完成*/
            loadding: true,
            /*弹窗是否打开*/
            isPopup: false,
            /*是否阅读了规则*/
            is_read:false,
            agreement: '',
            is_applying: false,
                referee_name:'',
            words:{},
            is_bonus:'',
            /*顶部背景*/
            top_background: '',
            apply_status: 'form' // form-表单, success-申请成功
         };
            /*小程序订阅消息*/
            temlIds: [],
            productList: [],
            bottom_background: '',
            product_id: '',
            product_sku_id: '',
            title: ''
         }
      },
      onLoad() {
         this.getPageData();
      mounted() {
         /*数据*/
         this.getData();
      },
      methods: {
         // 获取页面数据
         getPageData() {
         /*获取数据*/
         getData() {
            let self = this;
            uni.showLoading({ title: '加载中' });
				
            self._get('plus.vip.apply/getAgreement', {}, function(res) {
               self.titel = '申请成为VIP';
               self.top_background = res.data.data.background?.cash_apply || '';
               self.loading = false;
            uni.showLoading({
               title: '加载中'
            })
            self._get('plus.vip.apply/apply', {
               platform: self.getPlatform(),
               referee_id: uni.getStorageSync('referee_id')
            }, function(res) {
               uni.hideLoading();
            });
         },
			
         // 表单提交
         formSubmit(e) {
            let self = this;
            let formData = e.detail.value;
				
            // 数据验证
            if (!formData.real_name) {
               uni.showToast({ title: '请输入姓名', icon: 'none' });
               return;
            }
				
            if (!/^1[3-9]\d{9}$/.test(formData.mobile)) {
               uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
               return;
            }
				
            if (formData.referee_id && !/^\d+$/.test(formData.referee_id)) {
               uni.showToast({ title: '推荐人ID格式不正确', icon: 'none' });
               return;
            }
				
            // 提交申请
            uni.showLoading({ title: '提交中' });
            self._post('plus.vip.apply/submit', formData, function(res) {
               uni.hideLoading();
               if (res.code === 1) {
                  uni.showToast({ title: '申请提交成功' });
                  self.apply_status = 'success';
               } else {
                  uni.showToast({ title: res.msg, icon: 'none' });
               self.top_background = res.data.background;
               self.is_applying = res.data.is_applying;
               self.referee_name = res.data.referee_name!=null?res.data.referee_name:'平台';
               self.is_bonus=res.data.is_bonus;
               self.words = res.data.words;
               self.temlIds = res.data.template_arr;
               self.agreement = res.data.license;
               self.productList = res.data.productList;
               self.bottom_background = res.data.bottom_background;
               /*默认选中商品*/
               self.product_id = self.productList[0].product_id;
               self.product_sku_id = self.productList[0].product_sku.product_sku_id;
               /*设置标题*/
               // uni.setNavigationBarTitle({
               //     title: self.words.apply.title.value
               // });
               self.title = self.words.apply.title.value;
               self.loadding = false;
               if(self.is_bonus){
                  uni.navigateBack({});
               }
            });
         },
         
         // 返回VIP中心
         gotoVip() {
            uni.redirectTo({
               url: '/pages/plus/vip/index'
            });
         /*购买商品*/
         Submit() {
            if(!this.is_read){
               uni.showToast({
                  title: '请同意协议！',
                  icon:'none'
               });
               return;
            }
            let product_id = this.product_id;
            let product_num = 1;
            let product_sku_id = this.product_sku_id;
            this.gotoPage('/pages/order/confirm-order?product_id=' + product_id + '&product_num=' + product_num +
                  '&product_sku_id=0&order_type=buy');
         },
			
         /*申请*/
         formSubmit: function(e) {
            let formdata = e.detail.value;
            formdata.referee_id=uni.getStorageSync('referee_id');
            let self = this;
				
            if(formdata.name==''){
               uni.showToast({
                  title: '请输入姓名！',
                  icon:'none'
               });
               return;
            }
            if(formdata.mobile.length==''){
               uni.showToast({
                  title: '请输入手机号！',
                  icon: 'none'
               });
               return;
            }
            if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.mobile)) {
               uni.showToast({
                  title: '手机有误,请重填！',
                  icon: 'none'
               });
               return;
            }
				
            if(!self.is_read){
               uni.showToast({
                  title: '请同意协议！',
                  icon:'none'
               });
               return;
            }
				
            let callback = function(){
               uni.showLoading({
                  title: '正在提交',
                  mask: true
               })
               self._post('plus.bonus.apply/submit', formdata, function(res) {
                  uni.hideLoading();
                  uni.showToast({
                     title: '申请成功'
                  });
                  self.getData();
               });
            };
            self.subMessage(self.temlIds, callback);
         },
			
         /*去商城看看*/
         gotoShop(){
            uni.switchTab({
               url:'/pages/index/index'
            })
         },
			
         /*同意协议*/
         changeFunc(e){
            if(e.target.value.length>0){
               this.is_read=true;
            }else{
               this.is_read=false;
            }
         },
			
         /*选择商品*/
         selectItem(e) {
            this.product_id = e.product_id;
            this.product_sku_id = e.product_sku.product_sku_id;
         },
         
         goback() {
@@ -127,21 +255,171 @@
   }
</script>

<style lang="scss">
   .apply-vip {
      min-height: 100vh;
      background: #fff;
<style>
.apply-bonus .banner {
   position: absolute;
   width: 100%;
   z-index: 0;
   min-height: 167rpx;
   /* padding-bottom: 60rpx; */
   background-repeat: no-repeat;
   background-size: 100%;
   top: 0;
}
.apply-bonus .banner image{ width: 100%;}

   .form-wrap {
      background: #FFFFFF;
      border-radius: 26rpx 26rpx 0 0;
      /* box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, .2); */
   }

   .form-item {
      padding: 20rpx 0;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 28rpx;
   }

   .form-item .field-name {
      width: 180rpx;
   }

   .form-item input {
      font-size: 28rpx;
   }

   .agreement-content {
      max-height: 60vh;
      overflow-y: auto;
   }
   .apply-bonus .btn-red{
      width: 600rpx;
   height: 88rpx;
   line-height: 88rpx;
   border-radius: 44rpx;
   box-shadow: 0 8rpx 16rpx 0 rgba(226,35,26,.6);}
	
   /* 商品列表样式 */
   .section .item {
      margin: 0 26rpx;
      display: flex;
      align-items: center;
      padding-bottom: 29rpx;
      padding-top: 29rpx;
   }
   
   .head_top {
      position: absolute;
   .section .cover {
      width: 150rpx;
      height: 150rpx;
      border-radius: 8px;
   }
	
   .section .info {
      flex: 1;
      padding-left: 30rpx;
      box-sizing: border-box;
      overflow: hidden;
   }
	
   .section .title {
      width: 100%;
      padding-top: var(--status-bar-height);
      height: 30px;
      line-height: 30px;
      color: #FFFFFF;
      font-size: 26rpx;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
   }
	
   .vender .list .describe {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
	
   .section .describe {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #999999;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
   }
	
   .section .price {
      color: #F6220C;
      font-size: 24rpx;
   }
	
   .section .price .num {
      padding: 0 4rpx;
      font-size: 32rpx;
      z-index: 2;
   }
	
   .section .level-box {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
	
   .section .level-box .key {
      font-size: 24rpx;
      color: #999999;
   }
	
   .section .level-box .num-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: center;
   }
	
   .section .level-box .icon-box {
      width: 33rpx;
      height: 33rpx;
      border: 1px solid #c5c5c5;
      background: #f2f2f2;
   }
	
   .section .level-box .icon-box .gray {
      color: #cccccc;
   }
	
   .section .level-box .icon-box .gray3 {
      color: #333333;
   }
	
   .section .level-box .text-wrap {
      margin: 0 20rpx;
      height: 33rpx;
      border: none;
      background: none;
   }
	
   .section .level-box .text-wrap input {
      padding: 0 4rpx;
      height: 33rpx;
      line-height: 1;
      width: 40rpx;
      font-size: 32rpx;
      text-align: center;
      display: flex;
      align-items: center;
      min-height: 33rpx;
   }
	
   .button-box {
      margin: 0 26rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
   }
	
   .icon-box.active text {
      color: #F6220C;
   }
   
   .reg180 {
@@ -153,40 +431,31 @@
   }
   
   .icon-jiantou {
	
      color: #FFFFFF;
      font-size: 30rpx;
   }
   
   .banner-fill {
      height: 200rpx;
   }
	
   .form-wrap {
      .form-item {
         display: flex;
         align-items: center;
         padding: 30rpx 0;
			
         .field-name {
            width: 150rpx;
            color: #333;
         }
			
         input {
            height: 50rpx;
            line-height: 50rpx;
         }
      }
   }
	
   .btn-gcred {
   .head_top {
      position: absolute;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 44rpx;
      background: #FF5649;
      border-color: #FF5649;
      color: #fff;
      height: 30px;
      line-height: 30px;
      color: #FFFFFF;
      font-size: 32rpx;
      z-index: 2;
   }
</style>
	
   .apply-box {
      padding-top: 260rpx;
      position: relative;
   }
	
   .bottom-banner {
      width: 100%;
   }
	
   .bottom-banner image {
      width: 100%;
   }
</style>