<template> <view class="box"> <view class="box-phone"> <u--form :model="form" :rules="rules" ref="uForm" labelWidth="100" errorType="toast"> <u-form-item label="姓名" prop="userName"> <u--input v-model="form.userName" maxlength="11" placeholder="请输入您的姓名"></u--input> </u-form-item> <u-form-item label="手机号" prop="userPhone"> <u--input v-model="form.userPhone" maxlength="11" placeholder="请输入您的手机号"></u--input> </u-form-item> <u-form-item label="手机号" prop="confirmPhone"> <u--input v-model="form.confirmPhone" maxlength="11" placeholder="请再次确认您的手机号"></u--input> </u-form-item> </u--form> </view> <view class="box-member"> <view class="box-title"> <image src='../../static/images/memberTitle.png'></image> </view> <view class="member-list"> <view :class="[activeIndex.includes(index) && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']" v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)"> <view class="member-image"> <image v-show="!!!parseInt(item.isExist)" src='../../static/images/success.png'></image> <image v-show="!!parseInt(item.isExist)" src='../../static/images/disbled.png'></image> </view> <view class="member-text"> <view class="text-title"> <text>{{item.name.split('得')[0]}}得<text>{{item.name.split('得')[1]}}</text></text> <view></view> </view> <text class="text-content">{{item.gearRemarks}}</text> </view> </view> <!-- <view class="member-prompt"> * 办理三个项目即可升级会员2,会员2享XX权益。 </view> --> </view> </view> <view class="box-privilege"> <view class=""></view> <view class="box-title"> <image src='../../static/images/memberTitle.png'></image> </view> <view class="privilege-list"> <view class="privilege-left"> <image src='../../static/images/money_look.png'></image> <view class="privilege-text"> <text>查看充值注意事项!</text> <text>点击右侧按钮</text> </view> </view> <view class="privilege-right" @click="handleRule"> <text>查看</text> <view></view> </view> </view> </view> <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"> </paymentMember> <button class="box-submit" @click="goPay">立即充值</button> <u-navbar autoBack title="代他人充值"></u-navbar> </view> </template> <script> import { memberByHomeGradeInfo } from '@/api/member.js'; import paymentMember from '@/components/paymentMember'; import store from '@/store/index'; export default { name: "member_application", components: { paymentMember }, data() { return { memberData: [], payInfo: { userPhone: '', confirmPhone: '', orderInfos: [] }, payMode: [{ name: "微信支付", icon: "icon-weixinzhifu", value: 'WXPAY', title: '微信快捷支付' } // { // name: "支付宝", // icon: "icon-zhifubao", // value: 'ALIPAY', // title: '支付宝快捷支付' // } ], pay_close: false, activeIndex: [], form: { userPhone: '', confirmPhone: '' }, rules: { userName: [{ required: true, message: '姓名不能为空', // 触发器可以同时用blur和change trigger: ['blur'] }], userPhone: [{ required: true, message: '手机号不能为空', // 触发器可以同时用blur和change trigger: ['blur'] }, { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[1-25-9])\d{8}$/g, // 正则检验前先将值转为字符串 transform(value) { return String(value); }, message: '手机号不正确(190.193号段不可充值)', trigger: ['blur'] }, ], confirmPhone: [{ required: true, message: '手机号确认不能为空', // 触发器可以同时用blur和change trigger: ['blur'] }, { validator: (rule, value, callback) => { return this.form.userPhone == this.form.confirmPhone }, message: '手机号不一致', trigger: ['blur'], } ] } }; }, async onLoad() { uni.showLoading({ title: '加载中', mask: true }); try{ const res = await memberByHomeGradeInfo() this.memberData = res.data } finally{ uni.hideLoading(); } }, watch:{ 'form.userPhone' (val){ this.verify(val) }, 'form.confirmPhone' (val){ this.verify(val) } }, methods: { handleRule(){ uni.navigateTo({ url:'/pages/member_rule/index' }) }, async verify(phone){ if(this.form.userPhone == this.form.confirmPhone){ const res = await memberByHomeGradeInfo(phone) this.memberData = res.data } }, handleMember(value, index) { if (!!parseInt(value.isExist)) return if (this.activeIndex.includes(index)) { this.activeIndex = this.activeIndex.filter(item => item !== index) } else { this.activeIndex.push(index) } }, /** * 打开支付组件 * */ goPay() { this.$refs.uForm.validate().then(res => { if (this.activeIndex.length) { this.$set(this, 'pay_close', true); const orderInfos = this.activeIndex.map((item) => { return { ...this.memberData[item], gearId: this.memberData[item].id, } }) this.payInfo = { userName:this.form.userName, userPhone: this.form.userPhone, confirmPhone: this.form.confirmPhone, orderInfos } }else{ this.$util.Tips({ title: '请选择档次套餐' }) } }).catch(errors => { // uni.$u.toast('请检查手机号输入') }) }, /** * 事件回调 * */ onChangeFun: function(e) { let opt = e; let action = opt.action || null; let value = opt.value != undefined ? opt.value : null; (action && this[action]) && this[action](value); }, /** * 关闭支付组件 * */ payClose: function() { this.pay_close = false; }, /** * 支付成功回调 * */ pay_complete: function() { this.status = false; this.page = 1; this.$set(this, 'bargain', []); this.$set(this, 'pay_close', false); this.getBargainUserList(); }, /** * 支付失败回调 * */ pay_fail: function() { this.pay_close = false; }, onChangeFun: function(e) { let opt = e; let action = opt.action || null; let value = opt.value != undefined ? opt.value : null; (action && this[action]) && this[action](value); }, } }; </script> <style lang="scss" scoped> .box { margin-top: 10%; position: relative; padding: 4% 40rpx 10% 40rpx; min-height: 100vh; background: url(../../static/images/bg.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; .box-phone { .u-form-item { margin-bottom: 32rpx; } ::v-deep .u-form-item__body { height: 100rpx; border-radius: 20rpx; padding: 0 30rpx; background: #fff; } } ::v-deep .u-form-item__body__right__message{ margin-top: 10rpx; color: #fff; font-size: 26rpx; } .phone-money { width: 604rpx; height: 140rpx; position: absolute; top: 2%; left: 15%; } .box-member { margin-top: 10%; box-shadow: 0px 0px 15px -5px #000; width: 100%; border-radius: 20px; box-sizing: border-box; border: 1px solid transparent; background-image: linear-gradient(#FFD55D, #FD752F), linear-gradient(to bottom, #FFD55D, #FDCB3B); background-origin: border-box; background-clip: content-box, border-box; border-radius: 20px; position: relative; .box-title { position: absolute; top: -37rpx; left: -203rpx; margin-left: 50%; image { width: 406rpx; height: 88rpx; position: relative; display: flex; align-items: center; justify-content: center; &::before { content: '会员详情介绍'; position: absolute; font-size: 34rpx; font-family: Adobe Heiti Std; font-weight: normal; color: #FF4B47; text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78); } } } .member-list { margin: 53rpx 30rpx 20rpx 30rpx; position: relative; .member-item { padding: 30rpx 20rpx 27rpx 20rpx; display: flex; justify-content: space-between; background: #fff; margin-bottom: 20rpx; border-radius: 20rpx; .member-image { width: 100rpx; height: 100rpx; border-radius: 35rpx; background: linear-gradient(#FFEBB2, #FDCB3B); padding: 6rpx 13rpx; image { width: 100%; height: 100%; } } .member-text { display: flex; flex-direction: column; justify-content: space-between; flex: .9; .text-title { margin-top: -14rpx; font-size: 32rpx; font-weight: bolder; transform: skew(-6deg, 0); display: flex; justify-content: space-between; text { text { color: #C80D00; } } view { width: 18rpx; height: 6rpx; background: #FEAC49; border-radius: 3rpx; } } .text-content { font-size: 24rpx; color: #747474; } } } .member-active { transition: .3s; background: linear-gradient(#FF995F, #DA0E00); .member-image { background: linear-gradient(#FF995F, #DA0E00); } .member-text { .text-title { text { color: #fff; text { color: rgb(223, 208, 42); } } view { background: #fff; } } .text-content { color: #fff; } } } .member-disbled { transition: .3s; background: linear-gradient(#EFEFEF, #BCBCBC); .member-image { background: linear-gradient(#EFEFEF, #AAAAAA); } .member-text { .text-title { text { color: #868585; text { color: #868585; } } view { background: #fff; } } .text-content { color: #5C5C5C; } } } .member-prompt { display: flex; justify-content: center; font-size: 24rpx; color: #fff; } } } .box-privilege { box-shadow: 0px 0px 15px -5px #000; border-radius: 36rpx; width: 100%; margin-top: 9%; border-radius: 20px; box-sizing: border-box; border: 1px solid transparent; background-image: linear-gradient(#FFD55D, #FD752F), linear-gradient(to bottom, #FFEBB2, #FDCB3B); background-origin: border-box; background-clip: content-box, border-box; border-radius: 20px; display: flex; flex: 1; position: relative; .box-title { position: absolute; top: -37rpx; left: -203rpx; margin-left: 50%; image { width: 406rpx; height: 88rpx; position: relative; display: flex; align-items: center; justify-content: center; &::before { content: '注意事项'; position: absolute; font-size: 34rpx; font-family: Adobe Heiti Std; font-weight: normal; color: #FF4B47; text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78); } } } .privilege-list { width: 100%; margin: 54rpx 30rpx 20rpx 30rpx; min-height: 110rpx; background: #FFFFFF; border-radius: 20rpx; display: flex; align-items: center; justify-content: space-between; padding: 3% 20rpx 1% 20rpx; .privilege-left { display: flex; align-items: center; justify-content: space-between; border-radius: 20rpx; image { width: 68rpx; height: 64rpx; margin-right: 12rpx; } .privilege-text { display: flex; flex-direction: column; text:nth-child(1){ font-size: 30rpx; font-family: PingFang SC; font-weight: 400; color: #000000; } text:nth-child(2){ font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: #FB394B; } } } .privilege-right{ background-image: url("../../static/images/others-button.png"); background-size: 144rpx 64rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; color: #FFFFFF; width: 144rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; position: relative; view { position: absolute; right: 0; top: -24%; width: 18rpx; height: 6rpx; background: #FEAC49; border-radius: 3rpx; } } } } .box-submit { background: linear-gradient(#FFC82B, #FD7A32); margin-top: 4%; display: flex; justify-content: center; align-items: center; height: 87rpx; border-radius: 44rpx; color: #fff; font-size: 32rpx; } } </style>