团购组件增加筛选

quanwei

2026-01-17 e1e2fe5710a5b5cd9c19bd3aa99c998a1a613ca8

 mobile/pages/branch/activity/detail/popup/reg.vue

@@ -9,22 +9,57 @@
         <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
            <view class="pb30">
               <!-- 如果不是连盟汇会员，需要填写个人信息，报名后会自动加入活动发起的分会 -->
               <view class="reg-section join-box p30 radius24 bg-white" v-if="!activityData.is_member">
                  <view class="tips f28 p20 radius12"><text class="iconfont icon-gantanhao mr10"></text> 您还不是{{activityData.store_name}}的会员，请完善以下信息，提交报名后即可成为会员。</view>
               <view class="reg-section join-box p30 radius24 bg-white">
                  <!-- <view class="tips f28 p20 radius12" v-if="!activityData.is_member && !is_friend"><text class="iconfont icon-gantanhao mr10"></text> 您还不是{{activityData.store_name}}的会员，请完善以下信息，提交报名后即可成为会员。</view>
                  <view class="tips f28 p20 radius12 friend" v-if="is_friend"><text class="iconfont icon-gantanhao mr10"></text>您正在帮朋友报名，以下信息请填写您朋友的信息</view> -->
                  <view class="common-form">报名信息</view>
                  <view class="item d-s-c">
                     <view class="item-name">活动编号</view>
                     <input type="text" maxlength="30" class="flex-1 f28" placeholder="请输入活动编号"
                        v-model="formData.activity_number" placeholder-class="placeholder" />
                  </view>
                  <view class="item d-s-c">
                     <view class="item-name">真实姓名</view>
                     <input type="text" maxlength="30" class="flex-1" placeholder="请输入真实姓名" v-model="formData.real_name" placeholder-class=
                     "placeholder" />
                     <input type="text" maxlength="30" class="flex-1 f28" placeholder="请输入真实姓名"
                        v-model="formData.real_name" placeholder-class="placeholder" />
                  </view>
                  <view class="item d-s-c">
                     <view class="item-name">手机号码</view>
                     <input type="text" maxlength="30" class="flex-1" placeholder="请输入常用的手机号码" v-model="formData.mobile" placeholder-class=
                     "placeholder" />
                     <input type="text" maxlength="30" class="flex-1 f28" placeholder="请输入常用的手机号码"
                        v-model="formData.mobile" placeholder-class="placeholder" />
                  </view>
                  <view class="item d-s-c">
                     <view class="item-name">单位/公司名称</view>
                     <input type="text" maxlength="30" class="flex-1" placeholder="请输入单位/公司名称" v-model="formData.company" placeholder-class=
                     "placeholder" />
                     <input type="text" maxlength="30" class="flex-1 f28" placeholder="请输入单位/公司名称"
                        v-model="formData.company" placeholder-class="placeholder" />
                  </view>
                  <view class="item d-b-c border-b-e">
                     <view class="item-name">所在城市</view>
                     <view class="d-s-c flex-1" @click="showMulLinkageThreePicker">
                        <input class="tr flex-1" type="text" placeholder="请选择所在城市" placeholder-class="gray9"
                           v-model="selectCity" disabled="true" />
                        <view class="icon iconfont icon-jiantou f24"></view>
                     </view>
                  </view>
                  <!-- 加入哪个分会 -->
                  <view class="item d-s-c">
                     <view class="item-name">所在分会</view>
                     <view class="flex-1 d-s-c f28" @click="openBranch">
                        <text class="flex-1" v-if="formData.branch_id">{{branch_name}}</text>
                        <text class="gray6 flex-1" v-else>去选择</text>
                        <text class='iconfont icon-jiantou'></text>
                     </view>
                  </view>
                  <view class="common-form">邀请人</view>
                  <view class="item d-s-c" style="padding-top: 0;">
                     <view class="item-name">邀请人姓名</view>
                     <input type="text" maxlength="30" class="flex-1 f28" placeholder="请输入邀请人姓名,如：张三"
                        v-model="formData.recommend_name" placeholder-class="placeholder" />
                  </view>
                  <view class="item d-s-c">
                     <view class="item-name">邀请人电话</view>
                     <input type="text" maxlength="30" class="flex-1 f28" placeholder="请输入邀请人电话,如：134XXXXXX21"
                        v-model="formData.recommend_mobile" placeholder-class="placeholder" />
                  </view>
               </view>
               <view class="reg-section pay-box p30 radius24 bg-white" v-if="activityData.fee > 0">
@@ -39,7 +74,8 @@
                           无可用
                        </text>
                        <text class="theme-price" v-else-if="formData.points_num > 0" @click="onPoints">
                           -<text class="f24">￥</text>{{formData.points_money}} <text class='iconfont icon-jiantou'></text>
                           -<text class="f24">￥</text>{{formData.points_money}} <text
                              class='iconfont icon-jiantou'></text>
                        </text>
                        <text class="gray6 f28" v-else @click="onPoints">
                           去选择 <text class='iconfont icon-jiantou'></text>
@@ -53,10 +89,12 @@
                           无可用
                        </text>
                        <view class="price" v-else>
                           <text class="f24 gray9" v-if="parseFloat(activityData.balance) < parseFloat(activityData.fee) && formData.is_combined_pay==1">需组合支付</text>
                           <switch style="transform: scale(0.7); margin-right: -20rpx;" :checked="is_checked_balance" @change="onUseBalance" />
                           <text class="f24 gray9"
                              v-if="parseFloat(activityData.balance) < parseFloat(activityData.fee) && formData.is_combined_pay==1">需组合支付</text>
                           <switch style="transform: scale(0.7); margin-right: -20rpx;"
                              :checked="is_checked_balance" @change="onUseBalance" />
                        </view>
								

                     </view>
                  </view>
               </view>
@@ -79,7 +117,8 @@
                        <i class="icon iconfont icon-xuanze"></i>
                     </view>
                  </view>
                  <view v-if="showAlipay" class="item d-b-c" :class="{'active':formData.pay_type == 30}" @click="payTypeFunc(30)">
                  <!-- <view v-if="showAlipay" class="item d-b-c" :class="{'active':formData.pay_type == 30}"
                     @click="payTypeFunc(30)">
                     <view class="d-s-c">
                        <view class="icon-left d-c-c mr10">
                           <i class="icon iconfont icon-zhifubao"></i>
@@ -92,7 +131,7 @@
                     <view class="icon-right">
                        <i class="icon iconfont icon-xuanze"></i>
                     </view>
                  </view>
                  </view> -->
               </view>
            </view>
         </scroll-view>
@@ -101,16 +140,28 @@
         </view>
      </view>
      <!-- 积分弹窗 -->
      <PointsForm :isOpenPoints="isOpenPoints" :activityData="activityData" :max_price="onlinePrice+formData.points_money" @close="closePointsFunc"></PointsForm>
      <PointsForm :isOpenPoints="isOpenPoints" :activityData="activityData"
         :max_price="onlinePrice+formData.points_money" @close="closePointsFunc"></PointsForm>
      <!-- 分会弹窗 -->
      <Branch :isOpenBranch="isOpenBranch" @close="closeBranchFunc"></Branch>
      <!-- 区域选择 -->
      <mpvue-city-picker v-if="is_loaded" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
         :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
   </view>
</template>

<script>
   import { pay } from '@/common/pay.js';
   import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
   import {
      pay
   } from '@/common/pay.js';
   import PointsForm from './points'; // 积分选择弹窗
   import Branch from './branch'; // 分会选择弹窗
   export default {
      components: {
         PointsForm
         mpvueCityPicker,
         PointsForm,
         Branch
      },
      data() {
         return {
@@ -126,6 +177,8 @@
               real_name: '',
               mobile: '',
               company: '',
               recommend_name: '',
               recommend_mobile: '',
               shop_supplier_id: 0,
               points_num: 0, // 抵扣的积分数量
               points_money: 0, // 积分抵扣的金额
@@ -133,10 +186,16 @@
               is_use_balance: 0, // 是否使用余额支付
               is_combined_pay: 0, // 是否需要组合支付
               pay_type: 20, // 支付方式，默认微信支付
               branch_id: '', // 所在分会
               province_id: 0,
               city_id: 0,
               region_id: 0,
               activity_number:''
            },
            /*尺寸比例*/
            ratio: 1,
            showAlipay: true, /*是否显示支付宝支付，只有在h5，非微信内打开才显示*/
            showAlipay: true,
            /*是否显示支付宝支付，只有在h5，非微信内打开才显示*/
            use_balance: 0, // 使用的余额
            is_checked_balance: false, // 是否
            activityData: {},
@@ -144,9 +203,17 @@
            validate: false,
            payData: [], // 半屏小程序相关
            isFirst: false,
            branch_name: '',
            isOpenBranch: false,
            is_loaded: false,
            province: [],
            city: [],
            area: [],
            cityPickerValueDefault: [0, 0, 0],
            selectCity: '选择省,市,区',
         };
      },
      props: ['isOpenReg', 'in_radius'],
      props: ['isOpenReg', 'in_radius', 'is_friend'],

      onLoad() {},
      onShow() {
@@ -192,8 +259,56 @@
                  self.phoneHeight = res.windowHeight;
                  self.ratio = res.windowWidth / 750;
                  self.getHeight();
                  self.getDataProvince();
               }
            });
         },
         getRegistrationInformation() {
            let self = this;
            self._get('branch.activity/getRegistrationInformation', {activity_id:self.activityData.activity_id}, function(res) {
               if (res.data.registrationInformation) {
                  let data=res.data.registrationInformation;
                  self.formData.province_id = data.province_id;
                  self.formData.city_id = data.city_id;
                  self.formData.region_id = data.region_id;
                  self.formData.recommend_name = data.recommend_name;
                  self.formData.recommend_mobile = data.recommend_mobile;
                  self.formData.real_name = data.real_name;
                  self.formData.mobile = data.mobile;
                  self.formData.branch_id = data.branch_id;
                  self.formData.company = data.company;
                  self.formData.activity_number = data.activity_number;
                  self.selectCity = res.data.registrationInformation.region;
                  if (res.data.registrationInformation.branch_name) {
                     self.branch_name = res.data.registrationInformation.branch_name;
                  }
               }
            });
         },
         // 获取省市区
         getDataProvince() {
            let self = this;
            self._get('settings/getRegion', {}, function(res) {
               self.province = res.data.regionData[0];
               self.city = res.data.regionData[1];
               self.area = res.data.regionData[2];
               self.is_loaded = true;
               self.getRegistrationInformation();
            });
         },

         /*三级联动选择*/
         showMulLinkageThreePicker() {
            console.log(this.$refs.mpvueCityPicker);
            this.$refs.mpvueCityPicker.show();
         },

         /*确定选择的省市区*/
         onConfirm(e) {
            this.selectCity = e.label;
            this.formData.province_id = e.cityCode[0];
            this.formData.city_id = e.cityCode[1];
            this.formData.region_id = e.cityCode[2];
         },

         /*获取高度*/
@@ -208,8 +323,9 @@
                  this.scrollviewHigh = 600 * this.ratio;
               }
            }
            this.getRegistrationInformation()
         },
			

         // 半屏小程序返回
         onPayResult(e) {
            console.log(e)
@@ -220,20 +336,20 @@
            if (e.pay_result == 'success') {
               self.paySuccess(self.payData);
            } else {
               if(self.order_id > 0){
               if (self.order_id > 0) {
                  //兼容重新付款
               }else{
               } else {
                  self.payError(self.payData);
               }	
               }
            }
         },
			

         paySuccess(result) {
            let self = this;
            self.showSuccess("支付成功", function() {
               self.$emit('close', 1);
            })
		

         },
         payError(result) {
            let self = this;
@@ -241,7 +357,7 @@
               self.$emit('close', 2);
            })
         },
			

         // 是否使用余额支付
         onUseBalance(e) {
            if (e.target.value == true) {
@@ -256,12 +372,12 @@
               this.formData.is_combined_pay = 0;
            }
         },
			

         /*选择支付方式*/
         payTypeFunc(e){
         payTypeFunc(e) {
            this.formData.pay_type = e;
         },
			

         /*提交报名*/
         onSubmit() {
            let self = this;
@@ -280,7 +396,8 @@
                        activity_id: self.activityData.activity_id,
                        is_member: self.activityData.is_member,
                        pay_source: self.getPlatform(),
                        in_radius: self.in_radius ? 1 : 0 // 如果为1，报名成功后直接签到
                        in_radius: self.in_radius ? 1 : 0, // 如果为1，报名成功后直接签到
                        is_friend: self.is_friend ? 1 : 0, // 是否是帮朋友报名
                     })
                  )
               }, function(res) {
@@ -295,16 +412,16 @@
                           path: res.data.payment.embed_path,
                           extraData: res.data.payment.extraData,
                           envVersion: 'release', // develop开发版 trial体验版 release正式版 
                           success:function() {
                           success: function() {
                              console.log('打开半屏小程序成功');
                           },
                           fail:function() {
                           fail: function() {
                              console.log('打开半屏小程序失败');
                           }
                        });
                        return;
                     }
                     pay(res, self, self.paySuccess, self.payError); 
                     pay(res, self, self.paySuccess, self.payError);
                  } else if (res.code != 1) {
                     reg_success = 2; // 失败
                  }
@@ -312,16 +429,16 @@
               });
            }
         },
			

         // 验证数据
         validateForm() {
            let self = this;
            if (!self.activityData.is_member) {
            if (!self.activityData.is_member || self.is_friend) {
               if (!self.formData.real_name) {
                  return self.showTips('请输入您的真实姓名');
                  return self.showTips('请输入真实姓名');
               }
               if (!self.formData.mobile) {
                  return self.showTips('请输入您的手机号码');
                  return self.showTips('请输入手机号码');
               }
               if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(self.formData.mobile)) {
                  return self.showTips('请输入正确的手机号码');
@@ -333,7 +450,7 @@
            self.validate = true;
            return true;
         },
			

         // 提示框
         showTips(title, duration = 1000, icon = 'none') {
            uni.showToast({
@@ -347,12 +464,12 @@
         closePopup(e) {
            this.$emit('close', e);
         },
			

         /*打开积分弹窗*/
         onPoints() {
            this.isOpenPoints = true;
         },
			

         /*关闭积分弹窗*/
         closePointsFunc(e) {
            if (e !== null) {
@@ -360,6 +477,19 @@
               this.formData.points_money = parseFloat((e * this.activityData.points_ratio).toFixed(2));
            }
            this.isOpenPoints = false;
         },

         openBranch() {
            this.isOpenBranch = true;
         },

         /*关闭分会弹窗*/
         closeBranchFunc(e) {
            if (e !== null) {
               this.formData.branch_id = e.branch_id;
               this.branch_name = e.name;
            }
            this.isOpenBranch = false;
         },
      }
   };
@@ -405,7 +535,7 @@
      color: #ffffff;
      border-radius: 88rpx;
   }
	

   .popup-title {
      .iconfont {
         position: absolute;
@@ -414,42 +544,56 @@
         color: #999999;
      }
   }
	

   .reg-section {
      + .reg-section {
      +.reg-section {
         margin-top: 30rpx;
      }
   }
	

   .join-box {
      .item {
         padding-top: 60rpx;

         .item-name {
            font-size: 28rpx;
            width: 200rpx;
         }
      }

      .tips {
         background-color: #f7f7f7;
         color: #333;

         &.friend {
            background-color: #FCF8ED;
            color: #CEAD60;

            .iconfont {
               color: #CEAD60;
            }
         }
      }
   }

   .pay-box {
      .pay-item {
         font-size: 30rpx;
         .title {
				
         }

         .title {}

         .theme-price {
            text {
               font-size: 24rpx;
            }
         }

         .icon-jiantou {
            font-size: 24rpx;
         }
      }
   }

   .pay-type {
      .item {
         .icon-left {
@@ -457,22 +601,27 @@
               font-size: 60rpx;
               color: #04BE01;
            }

            .icon-zhifubao {
               font-size: 50rpx;
               color: #1281ff;
            }
         }

         .key {
            font-size: 28rpx;
         }

         .icon-right {
            .iconfont {
               font-size: 48rpx;
            }
         }
         + .item {

         +.item {
            margin-top: 45rpx;
         }

         &.active {
            .icon-right {
               .iconfont {
@@ -482,4 +631,28 @@
         }
      }
   }
</style>

   .common-form {
      position: relative;
      height: 80rpx;
      padding-left: 40rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      font-weight: 700;
      margin-top: 24rpx;
   }

   .common-form:before {
      background: #3a8ee6;
   }

   .common-form:before {
      position: absolute;
      content: "";
      width: 4px;
      height: 14px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
   }
</style>