个人会员缴费支付

张猛
Showing 1 changed file with 109 additions and 108 deletions
personal/goPay_per.vue
--- a/personal/goPay_per.vue
View file @ef5fda7
+++ b/personal/goPay_per.vue
View file @ef5fda7
@@ -5,13 +5,15 @@
        <view class="yearRow">
          <view class="label">缴费年限</view>
          <view class="control">
-						<image class="icon" @click="minusYear" :src="config.baseUrl_api + '/fs/static/dd_02.png'" mode="widthFix"
+            <image v-if="form.payYear > 1" :src="config.baseUrl_api + '/fs/static/dd_02.png'" class="icon"
-							v-if="form.payYear > 1"></image>
+                   mode="widthFix"
-						<image class="icon" :src="config.baseUrl_api + '/fs/static/dd_02_g.png'" mode="widthFix" v-else></image>
+                   @click="minusYear"></image>
+            <image v-else :src="config.baseUrl_api + '/fs/static/dd_02_g.png'" class="icon" mode="widthFix"></image>
            <text class="num">{{ form.payYear }}年</text>
-						<image class="icon" :src="config.baseUrl_api + '/fs/static/btn_03.png'" mode="widthFix" @click="plusYear"
+            <image v-if="form.payYear < 5" :src="config.baseUrl_api + '/fs/static/btn_03.png'" class="icon"
-							v-if="form.payYear < 5"></image>
+                   mode="widthFix"
-						<image class="icon" :src="config.baseUrl_api + '/fs/static/btn_03_g.png'" mode="widthFix" v-else></image>
+                   @click="plusYear"></image>
+            <image v-else :src="config.baseUrl_api + '/fs/static/btn_03_g.png'" class="icon" mode="widthFix"></image>
          </view>
        </view>
      </view>
@@ -27,9 +29,9 @@
      <view class="payRow ">
        <radio-group @change="onPayTypeChange">
          <label class="radioItem">
-						<radio value="1" :checked="payType === '1'" class="custom-radio" />
+            <radio :checked="payType === '1'" class="custom-radio" value="1"/>
            <view class="payInfo">
-							<image class="icon" :src="config.baseUrl_api + '/fs/static/min.png'" mode="widthFix"></image>
+              <image :src="config.baseUrl_api + '/fs/static/min.png'" class="icon" mode="widthFix"></image>
              <text>民生付</text>
            </view>
          </label>
@@ -44,42 +46,43 @@
    </view>
    <view class="bottomBtn">
-			<button class="payBtn" @click="handelPay" :loading="isPaying">立即支付 ¥{{ memberTotalFee }}</button>
+      <button :loading="isPaying" class="payBtn" @click="handelPay">立即支付 ¥{{ memberTotalFee }}</button>
    </view>
  </view>
 </template>
 <script setup>
-	import {
+import {
  ref,
  computed,
  onMounted
-	} from 'vue'
+} from 'vue'
-	import {
+import {
  onLoad
-	} from '@dcloudio/uni-app';
+} from '@dcloudio/uni-app';
-	import to from 'await-to-js'
+import to from 'await-to-js'
-	import * as api from '@/common/api.js'
+import * as api from '@/common/api.js'
-	import {
+import {
  minShengPay
-	} from '@/common/pay.js'
+} from '@/common/pay.js'
 import config from '@/config.js'
-	const form = ref({
+const form = ref({
  payYear: 1
-	})
+})
-	// 支付方式
+// 支付方式
-	const payType = ref('1')
+const payType = ref('1')
-	const isPaying = ref(false)
+const isPaying = ref(false)
-	// 费用与优惠
+// 费用与优惠
-	const memberFee = ref(0)
+const memberFee = ref(0)
-	const memberTotalFee = computed(() => {
+const memberTotalFee = computed(() => {
  return memberFee.value * form.value.payYear
-	})
+})
-	onLoad((options) => {
+onLoad((options) => {
  if (options.baseFormData) {
    const data = JSON.parse(decodeURIComponent(options.baseFormData))
    form.value = {
@@ -89,30 +92,29 @@ import config from '@/config.js'
  }
  // 初始化接口
  getMyMemberCertUnitFeeApi()
-	})
+})
-	// 减年限
+// 减年限
-	const minusYear = () => {
+const minusYear = () => {
  if (form.value.payYear > 1) {
    form.value.payYear--
  }
-	}
+}
-	// 加年限（最大 5 年）
+// 加年限（最大 5 年）
-	const plusYear = () => {
+const plusYear = () => {
  if (form.value.payYear < 5) {
    form.value.payYear++
  }
-	}
+}
-	// 支付方式切换
+// 支付方式切换
-	const onPayTypeChange = (e) => {
+const onPayTypeChange = (e) => {
  payType.value = e.detail.value
-	}
+}
-	const handelPay = async () => {
+const handelPay = async () => {
  if (memberTotalFee.value <= 0) {
    uni.showToast({
      title: '支付金额异常',
@@ -127,13 +129,13 @@ import config from '@/config.js'
    mask: true
  })
  isPaying.value = true
+  form.value.validityDate = undefined
  // 拼接完整参数
  const postData = {
    ...form.value,
    payYear: form.value.payYear,
    payType: payType.value,
-			totalFee: memberTotalFee.value
+    totalFee: memberTotalFee.value,
  }
  // 创建订单
@@ -172,95 +174,94 @@ import config from '@/config.js'
  uni.redirectTo({
    url: `/personal/sucPay?orderId=${orderRes.data.orderId}`
  })
-	}
+}
-	// 获取会员费
+// 获取会员费
-	async function getMyMemberCertUnitFeeApi() {
+async function getMyMemberCertUnitFeeApi() {
  const res = await api.getZtxFeeConfig()
  memberFee.value = Number(res.data.personMemberFee || 1500)
-	}
+}
 </script>
 <style scoped>
-	.container {
+.container {
  min-height: 100vh;
  background-color: #f7f7f7;
-	}
+}
-	.content {
+.content {
  padding: 20rpx 20rpx 120rpx;
-	}
+}
-	.card {
+.card {
  background: #fff;
  border-radius: 8rpx;
  padding: 25rpx 20rpx;
  margin-bottom: 20rpx;
-	}
+}
-	.yearRow {
+.yearRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
-	}
+}
-	.yearRow .label {
+.yearRow .label {
  font-size: 28rpx;
  color: #333;
-	}
+}
-	.yearRow .control {
+.yearRow .control {
  display: flex;
  align-items: center;
-	}
+}
-	.control image {
+.control image {
  width: 50rpx;
  height: 50rpx;
-	}
+}
-	.yearRow .num {
+.yearRow .num {
  font-size: 28rpx;
  color: #333;
  min-width: 80rpx;
  text-align: center;
  margin: 0 10rpx;
-	}
+}
-	.row {
+.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
-	}
+}
-	.row .label {
+.row .label {
  font-size: 28rpx;
  color: #333;
-	}
+}
-	.row .value {
+.row .value {
  font-size: 30rpx;
  color: #C4121B;
  font-weight: 500;
-	}
+}
-	.hintRow {
+.hintRow {
  display: flex;
  align-items: flex-start;
  font-size: 24rpx;
  line-height: 1.4;
-	}
+}
-	.hintRow .hintText {
+.hintRow .hintText {
  color: #FF8124;
  flex: 1;
  margin-top: 10rpx;
-	}
+}
-	.deductRow {
+.deductRow {
  background: #fff;
  padding: 20rpx 20rpx;
  display: flex;
@@ -268,48 +269,48 @@ import config from '@/config.js'
  align-items: center;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
-	}
+}
-	.deductRow .label {
+.deductRow .label {
  font-size: 28rpx;
  color: #333;
-	}
+}
-	.deductRow .value {
+.deductRow .value {
  font-size: 30rpx;
  color: #C4121B;
-	}
+}
-	.payRow {
+.payRow {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx 20rpx;
  margin-bottom: 20rpx;
-	}
+}
-	.radioItem {
+.radioItem {
  display: flex;
  align-items: center;
-	}
+}
-	.payInfo {
+.payInfo {
  display: flex;
  align-items: center;
  margin-left: 15rpx;
-	}
+}
-	.payInfo .icon {
+.payInfo .icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
-	}
+}
-	.payInfo text {
+.payInfo text {
  font-size: 28rpx;
  color: #333;
-	}
+}
-	.totalRow {
+.totalRow {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx 20rpx;
@@ -317,20 +318,20 @@ import config from '@/config.js'
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
-	}
+}
-	.totalRow .label {
+.totalRow .label {
  font-size: 28rpx;
  color: #333;
-	}
+}
-	.redBig {
+.redBig {
  font-size: 32rpx;
  color: #C4121B;
  font-weight: bold;
-	}
+}
-	.bottomBtn {
+.bottomBtn {
  position: fixed;
  bottom: 0;
  left: 0;
@@ -338,9 +339,9 @@ import config from '@/config.js'
  padding: 20rpx 20rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
-	}
+}
-	.payBtn {
+.payBtn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
@@ -350,30 +351,30 @@ import config from '@/config.js'
  font-size: 32rpx;
  text-align: center;
  border: none;
-	}
+}
-	.payBtn[disabled] {
+.payBtn[disabled] {
  background-color: #ccc;
  color: #999;
-	}
+}
-	.red {
+.red {
  color: #C4121B;
-	}
+}
-	.icon {
+.icon {
  width: 30px;
-	}
+}
-	::v-deep .custom-radio .wx-radio-input {
+::v-deep .custom-radio .wx-radio-input {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
-	}
+}
-	::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked {
+::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked {
  border-color: #C4121B !important;
  background: #C4121B !important;
-	}
+}
 </style>