From 18b45638fe3aac07e65aeb5b1da337d4e4bdc87c Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期日, 30 十一月 2025 18:24:36 +0800
Subject: [PATCH] fix(pay): 更新支付页面文案及逻辑
---
pages/pay/bindCard/bindCard.vue | 392 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 392 insertions(+), 0 deletions(-)
diff --git a/pages/pay/bindCard/bindCard.vue b/pages/pay/bindCard/bindCard.vue
new file mode 100644
index 0000000..5b2bdd6
--- /dev/null
+++ b/pages/pay/bindCard/bindCard.vue
@@ -0,0 +1,392 @@
+<template>
+ <view>
+ <view class="u-font-42 font-bold u-text-center u-m-t-30">娣诲姞閾惰鍗�</view>
+ <view class="u-font-28 u-text-center u-m-t-10 u-m-b-60">濉啓浠ヤ笅淇℃伅杩涜缁戝崱</view>
+ <u--form class="" labelWidth="80" :model="form" :rules="rules" ref="uForm">
+ <u-form-item class="form-item u-m-b-24" label="鎸佸崱浜�" prop="acctName">
+ <u--input v-model="form.acctName" inputAlign="right" border="none" :readonly="userInfo.tlAuthName" placeholder="璇疯緭鍏ユ寔鍗′汉濮撳悕"></u--input>
+ </u-form-item>
+ <u-form-item class="form-item u-m-b-24" label="韬唤璇佸彿" prop="idNo">
+ <u--input v-model="form.idNo" inputAlign="right" border="none" :readonly="userInfo.tlAuthIdentityNo" placeholder="璇疯緭鍏ユ寔鍗′汉韬唤璇佸彿"></u--input>
+ </u-form-item>
+ <u-form-item class="form-item u-m-b-24" label="鎵嬫満鍙�" prop="mobile">
+ <u--input v-model="form.mobile" inputAlign="right" border="none" placeholder="璇疯緭鍏ユ墜鏈哄彿"></u--input>
+ </u-form-item>
+
+ <view class="u-font-30 color-333 u-m-t-60 u-m-b-24">閾惰鍗＄被鍒�</view>
+ <view class="u-flex u-row-between u-m-b-24">
+ <view @click="chooseType('DC')" :class="['type-btn',{'type-act':cardType=='DC'}]">鍌ㄨ搫鍗�
+ </view>
+ <view @click="chooseType('CC')" :class="['type-btn',{'type-act':cardType=='CC'}]">淇＄敤鍗�
+ </view>
+ </view>
+ <u-form-item class="form-item u-m-b-24" label="鍗″彿" prop="cardNo">
+ <u--input v-model="form.cardNo" inputAlign="right" border="none" placeholder="璇疯緭鍏ユ寔鍗′汉鏈汉閾惰鍗″彿"></u--input>
+ </u-form-item>
+ <block v-if="cardType=='CC'">
+ <u-form-item class="form-item u-m-b-24" label="鏈夋晥鏈�" prop="validdate">
+ <u--input v-model="form.validdate" inputAlign="right" border="none" placeholder="璇疯緭鍏ヤ俊鐢ㄥ崱鏈夋晥鏈�">
+ </u--input>
+ </u-form-item>
+ <u-form-item class="form-item u-m-b-24" label="瀹夊叏鐮�" prop="cvv2">
+ <u--input v-model="form.cvv2" inputAlign="right" border="none" placeholder="璇疯緭鍏ヤ俊鐢ㄥ崱瀹夊叏鐮�"></u--input>
+ </u-form-item>
+ </block>
+ <view class="u-flex u-m-b-24">
+ <u-form-item class="form-item" label="楠岃瘉鐮�" prop="code">
+ <u--input v-model="form.code" maxlength="6" inputAlign="right" border="none" placeholder="璇疯緭鍏ラ獙璇佺爜">
+ </u--input>
+ </u-form-item>
+ <view @click="getCode" class="code-btn" :class="codeAct?'code-act':''">{{tips}}</view>
+ </view>
+ </u--form>
+ <label @click="checked=!checked" class="u-flex u-font-24 color-999 u-m-t-30">
+ <radio style="transform: scale(0.7);" color="#e93b3d" @change="radioChange" :checked="checked" />鎴戝凡闃呰骞跺悓鎰�
+ <view @click.stop="showAgreement=true" class="" style="color: #e93b3d;">銆婄敤鎴峰崗璁��</view>
+ </label>
+ <view class="u-m-b-60" style="opacity: 0;">
+ <button class="bind-btn">绔嬪嵆缁戝崱</button>
+ </view>
+ <view class="btn-box">
+ <button @click="doBind" :loading="loading" :disabled="loading" class="bind-btn">绔嬪嵆缁戝崱</button>
+ </view>
+ <!-- 鐢ㄦ埛鍗忚 -->
+ <u-popup @close="showAgreement=false" :show="showAgreement" mode="center" :round="30" closeable
+ :safeAreaInsetBottom="false">
+ <card-agreement @confirm="checked=true;showAgreement=false;doBind()"></card-agreement>
+ </u-popup>
+ <!-- 棣栫粦鏈夌ぜ娲诲姩 -->
+ <u-popup bgColor="transparent" @close="showAct=false" :show="showAct" mode="center" :round="30"
+ :safeAreaInsetBottom="false">
+ <bind-card-activity :couponList="couponList" @close="showAct = false"></bind-card-activity>
+ </u-popup>
+
+ <u-toast ref="uToast"></u-toast>
+ <u-code :seconds="seconds" @end="end" @start="start" ref="uCode" keepRunning changeText="宸插彂閫�(x)"
+ @change="codeChange"></u-code>
+ </view>
+</template>
+
+<script>
+ import {
+ isContain,
+ signUpToApply,
+ bindCard,
+ getMyCoupUseDetail,
+ getUserInfo
+ } from '@/common/api/index'
+ export default {
+ data() {
+ return {
+ showAct: false,
+ couponList: [],
+ bankName: '',
+ cardType: 'DC',
+ tips: '',
+ seconds: 60,
+ codeAct: true,
+ showAgreement: false,
+ checked: true,
+ loading: false,
+ userInfo: {
+ tlAuthIdentityNo: '',
+ tlAuthName: ''
+ },
+ form: {
+ acctName: '',
+ idNo: '',
+ cardNo: '',
+ validdate: '',
+ cvv2: '',
+ mobile: '',
+ code: ''
+ },
+ rules: {
+ acctName: [{
+ required: true,
+ message: '鎸佸崱浜哄鍚嶄笉鑳戒负绌�',
+ trigger: 'blur'
+ }, {
+ // 鑷畾涔夐獙璇佸嚱鏁帮紝瑙佷笂璇存槑
+ validator: (rule, value, callback) => {
+ // 涓婇潰鏈夎锛岃繑鍥瀟rue琛ㄧず鏍￠獙閫氳繃锛岃繑鍥瀎alse琛ㄧず涓嶉�氳繃
+ // uni.$u.test.mobile()灏辨槸杩斿洖true鎴栬�協alse鐨�
+ return uni.$u.test.rangeLength(value, [2, 6]) && uni.$u.test.chinese(value);
+ },
+ message: '鎸佸崱浜哄鍚嶄笉姝ｇ‘',
+ trigger: 'change'
+ }],
+ idNo: [{
+ required: true,
+ message: '韬唤璇佸彿涓嶈兘涓虹┖',
+ trigger: 'blur'
+ }, {
+ // 鑷畾涔夐獙璇佸嚱鏁帮紝瑙佷笂璇存槑
+ validator: (rule, value, callback) => {
+ // 涓婇潰鏈夎锛岃繑鍥瀟rue琛ㄧず鏍￠獙閫氳繃锛岃繑鍥瀎alse琛ㄧず涓嶉�氳繃
+ // uni.$u.test.mobile()灏辨槸杩斿洖true鎴栬�協alse鐨�
+ return uni.$u.test.idCard(value);
+ },
+ message: '韬唤璇佸彿涓嶆纭�',
+ trigger: 'blur'
+ }],
+ mobile: [{
+ required: true,
+ message: '鎵嬫満鍙蜂笉鑳戒负绌�',
+ trigger: 'blur'
+ }, {
+ // 鑷畾涔夐獙璇佸嚱鏁帮紝瑙佷笂璇存槑
+ validator: (rule, value, callback) => {
+ // 涓婇潰鏈夎锛岃繑鍥瀟rue琛ㄧず鏍￠獙閫氳繃锛岃繑鍥瀎alse琛ㄧず涓嶉�氳繃
+ // uni.$u.test.mobile()灏辨槸杩斿洖true鎴栬�協alse鐨�
+ return uni.$u.test.mobile(value);
+ },
+ message: '鎵嬫満鍙蜂笉姝ｇ‘',
+ trigger: 'blur'
+ }],
+ cardNo: [{
+ required: true,
+ message: '鍗″彿涓嶈兘涓虹┖',
+ trigger: 'blur'
+ }, {
+ // 鑷畾涔夐獙璇佸嚱鏁帮紝瑙佷笂璇存槑
+ validator: (rule, value, callback) => {
+ // 涓婇潰鏈夎锛岃繑鍥瀟rue琛ㄧず鏍￠獙閫氳繃锛岃繑鍥瀎alse琛ㄧず涓嶉�氳繃
+ // uni.$u.test.mobile()灏辨槸杩斿洖true鎴栬�協alse鐨�
+ return this.$utils.verifyBankCard(value);
+ },
+ message: '鍗″彿涓嶆纭�',
+ trigger: 'blur'
+ }, {
+ // 鑷畾涔夐獙璇佸嚱鏁帮紝瑙佷笂璇存槑
+ asyncValidator: (rule, value, callback) => {
+ isContain({
+ params: {
+ cardNum: value
+ }
+ }).then(res => {
+ if (res) {
+ callback();
+ } else {
+ callback(new Error('鍗″彿涓嶅湪鍗℃鍐�'));
+ }
+ }).catch(() => {
+ callback(new Error('鍗″彿涓嶅湪鍗℃鍐�'));
+ })
+ },
+ trigger: 'blur'
+ }],
+ validdate: [{
+ required: true,
+ message: '鏈夋晥鏈熶笉鑳戒负绌�',
+ trigger: 'blur'
+ }, {
+ len: 4,
+ message: '鏈夋晥鏈熶笉姝ｇ‘',
+ trigger: 'blur'
+ }],
+ cvv2: [{
+ required: true,
+ message: '瀹夊叏鐮佷笉鑳戒负绌�',
+ trigger: ['blur']
+ }, {
+ min: 3,
+ max: 4,
+ message: '瀹夊叏鐮侀暱搴︿负3-4',
+ trigger: 'blur'
+ }]
+ }
+ };
+ },
+ onLoad() {
+ const IS_NEW = uni.getStorageSync('IS_NEW')
+ if(!IS_NEW){
+ getUserInfo().then(res=>{
+ if(res){
+ this.userInfo = res
+ this.form.mobile = res.mobile
+ this.form.acctName = res.tlAuthName||res.memberName
+ this.form.idNo = res.tlAuthIdentityNo||res.idcard
+ }
+ })
+ }
+ },
+ onReady() {
+ //濡傛灉闇�瑕佸吋瀹瑰井淇″皬绋嬪簭锛屽苟涓旀牎楠岃鍒欎腑鍚湁鏂规硶绛夛紝鍙兘閫氳繃setRules鏂规硶璁剧疆瑙勫垯銆�
+ this.$refs.uForm.setRules(this.rules)
+ },
+ methods: {
+ codeChange(text) {
+ this.tips = text;
+ },
+ end() {
+ this.codeAct = true
+ },
+ start() {
+ this.codeAct = false
+ },
+ // 鍙戦�侀獙璇佺爜
+ getCode() {
+ if (this.$refs.uCode.canGetCode) {
+ delete this.rules.code
+ this.$refs.uForm.clearValidate();
+ this.$refs.uForm.setRules(this.rules);
+ this.$nextTick(() => {
+ this.$refs.uForm.validate().then(() => {
+ uni.showLoading({
+ title: '姝ｅ湪鑾峰彇楠岃瘉鐮�'
+ })
+ const params = uni.$u.deepClone(this.form);
+ delete params.thpinfo
+ delete params.code
+ signUpToApply(params).then(res => {
+ this.form.thpinfo = JSON.stringify(res.thpinfo)
+ uni.hideLoading();
+ uni.$u.toast('楠岃瘉鐮佸凡鍙戦��');
+ // 閫氱煡楠岃瘉鐮佺粍浠跺唴閮ㄥ紑濮嬪�掕鏃�
+ this.$refs.uCode.start();
+ }).catch(() => {
+ uni.hideLoading();
+ })
+ })
+ })
+ } else {
+ uni.$u.toast('鍊掕鏃剁粨鏉熷悗鍐嶅彂閫�');
+ }
+ },
+ //閫夋嫨閾惰鍗＄被鍨�
+ chooseType(type) {
+ this.cardType = type
+ },
+ //缁戝畾閾惰鍗�
+ doBind() {
+ if (!this.checked) {
+ this.showAgreement = true
+ return
+ }
+ this.rules.code = [{
+ required: true,
+ message: '楠岃瘉鐮佷笉鑳戒负绌�',
+ trigger: 'blur'
+ }, {
+ // 鑷畾涔夐獙璇佸嚱鏁帮紝瑙佷笂璇存槑
+ validator: (rule, value, callback) => {
+ // 涓婇潰鏈夎锛岃繑鍥瀟rue琛ㄧず鏍￠獙閫氳繃锛岃繑鍥瀎alse琛ㄧず涓嶉�氳繃
+ // uni.$u.test.mobile()灏辨槸杩斿洖true鎴栬�協alse鐨�
+ return uni.$u.test.code(value, 6);
+ },
+ message: '楠岃瘉鐮佹牸寮忎笉姝ｇ‘',
+ trigger: 'blur'
+ }]
+ this.$refs.uForm.setRules(this.rules)
+ this.$nextTick(() => {
+ this.$refs.uForm.validate().then(() => {
+ this.loading = true
+ const params = uni.$u.deepClone(this.form);
+ if (this.cardType == 'DC') {
+ delete params.validdate
+ delete params.cvv2
+ }
+ bindCard(params).then(res => {
+ getMyCoupUseDetail().then(res => {
+ this.loading = false
+ if (res && res.length > 0) {
+ this.showAct = true
+ this.couponList = res
+ } else {
+ uni.showToast({
+ icon: 'success',
+ title: '缁戝崱鎴愬姛',
+ mask: true
+ })
+ setTimeout(() => {
+ uni.navigateBack()
+ }, 1000)
+ }
+ }).catch(() => {
+ this.loading = false
+ })
+ }).catch(() => {
+ this.loading = false
+ })
+ }).catch(errors => {
+
+ })
+ })
+ }
+ },
+
+ }
+</script>
+<style>
+ page {
+ background-color: #fff;
+ padding: 32rpx;
+ color: #333;
+ }
+</style>
+<style lang="scss" scoped>
+ .form-item {
+ border: 1px solid #D9D9D9;
+ border-radius: 10rpx;
+ padding: 4rpx 32rpx;
+ }
+
+ ::v-deep .u-form-item__body__right__message {
+ text-align: right;
+ }
+
+ .btn-box {
+ width: 686rpx;
+ position: fixed;
+ bottom: 30rpx;
+ }
+
+ .bind-btn {
+ width: 686rpx;
+ height: 98rpx;
+ border-radius: 10rpx;
+ background: #d31f28;
+ color: #fff;
+ font-size: 34rpx;
+ }
+
+ .code-btn {
+ background-color: #F2F2F2;
+ border-radius: 10rpx;
+ color: #999;
+ width: 290rpx;
+ height: 88rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 20rpx;
+ }
+
+ .code-act {
+ background-color: #D31F28;
+ color: #fff;
+ }
+
+ .type-btn {
+ width: 333rpx;
+ height: 88rpx;
+ border-radius: 10rpx;
+ border: 1px solid #d9d9d9;
+ background-color: #ffffff;
+ font-size: 30rpx;
+ color: #333;
+ text-align: center;
+ line-height: 88rpx;
+ }
+
+ .type-act {
+ font-weight: bold;
+ border-color: #D31F28;
+ color: #D31F28;
+ background-image: url('~@/static/check-type.png');
+ background-position: right bottom;
+ background-repeat: no-repeat;
+ background-size: 42rpx 38rpx;
+ }
+</style>
--
Gitblit v1.9.1