|
|
@@ -1,219 +1,150 @@
|
|
|
<template>
|
|
|
- <view class="pl-30 pr-30">
|
|
|
- <view class="pay">
|
|
|
- <view class="title pt-30 pb-30">充值金额</view>
|
|
|
- <view class="flex-wrap">
|
|
|
- <view
|
|
|
- :class="[
|
|
|
- 'option',
|
|
|
- 'flex-center',
|
|
|
- `option-${index === payOption && !payValue ? 'active' : ''}`,
|
|
|
- ]"
|
|
|
- v-for="(item, index) in payOptions"
|
|
|
- :key="index"
|
|
|
- @click="changeOption(index)">
|
|
|
- <image
|
|
|
- v-if="payOptionsDiscount[index]"
|
|
|
- src="/static/images/coupon-center.png"
|
|
|
- mode="widthFix"
|
|
|
- class="tag fs-24 color-fff fw-500 width-40"
|
|
|
- />
|
|
|
- <!-- <view
|
|
|
- class="tag fs-24 color-fff fw-500"
|
|
|
- v-if="payOptionsDiscount[index]">{{ payOptionsDiscount[index] }}
|
|
|
- </view>-->
|
|
|
- {{ item }}
|
|
|
+ <view class="page">
|
|
|
+ <view class="recharge">
|
|
|
+ <view v-for="(recharge,idx) in state.configList" :key="idx"
|
|
|
+ @click="handleRechargeClick(recharge,idx)"
|
|
|
+ class="recharge-item" :class="idx===state.chosenIdx?'active':''">
|
|
|
+ <view class="recharge-item_amt">{{ recharge.rechargeAmount }}</view>
|
|
|
+ <view class="recharge-item_grant" v-if="recharge.grantsAmount>0">
|
|
|
+ <uv-icon name="gift" :color="idx===state.chosenIdx?'#19A497':'#2b2b2b'"></uv-icon>
|
|
|
+ {{ recharge.grantsAmount }}元
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if="payOptionsDiscountDay[payOption]" class="flex-align-center">
|
|
|
- <view class="fs-30 color-666">
|
|
|
- {{ (payOptionsDiscount[payOption] && payOptionsDiscount[payOption] > 0) ? `享服务费${payOptionsDiscount[payOption]}折，` : '' }}权益有效期{{
|
|
|
- payOptionsDiscountDay[payOption]
|
|
|
- }}天
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="ml-12 color-primary fs-30"
|
|
|
- @click="to(`/pages-common/activity/activity?id=${activityId}`)">
|
|
|
- <text>详细规则</text>
|
|
|
- <text class="fs-24 ml-6">>></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="title pt-60 pb-30">自定义金额</view>
|
|
|
- <style-input
|
|
|
- :value="payValue > 0 ? payValue : ''"
|
|
|
- title="金额"
|
|
|
- type="digit"
|
|
|
- @input="input"/>
|
|
|
+ </view>
|
|
|
+ <view class="recharge-pay">
|
|
|
+ <uv-button type="primary" iconColor="white" color="#19A497" text="充值" @click="debounceConfirm"></uv-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <style-bottom-view>
|
|
|
- <view class="pl-60 pr-60 pb-20">
|
|
|
- <style-button size="small" type="primary" @click="debounceConfirm">充值</style-button>
|
|
|
- </view>
|
|
|
- </style-bottom-view>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import {ref} from "vue";
|
|
|
-import {onLoad} from "@dcloudio/uni-app";
|
|
|
-import {back, to} from "@/utils/navigate";
|
|
|
+import {reactive, ref} from "vue";
|
|
|
+import {onHide, onLoad, onShow} from "@dcloudio/uni-app";
|
|
|
import {debounce} from "@/utils/common";
|
|
|
+import {get, post,body} from "@/utils/https";
|
|
|
|
|
|
-const balance = ref(0);
|
|
|
-const payOption = ref(3);
|
|
|
-const payOptions = ref([30, 50, 100, 200, 500, 1000]);
|
|
|
-const payOptionsDiscount = ref(["", "", "", "", "", ""]);
|
|
|
-const payOptionsDiscountDay = ref([0, 0, 0, 0, 0, 0]);
|
|
|
-const payValue = ref(0);
|
|
|
-const activityId = ref();
|
|
|
-const rechargeRightsId = ref();
|
|
|
-const rechargeRightsList = ref([]);
|
|
|
-const needBack = ref(false);
|
|
|
-const input = (e: any) => {
|
|
|
- payValue.value = e.value;
|
|
|
- rechargeRightsId.value = 0;
|
|
|
-};
|
|
|
-const changeOption = (index: number) => {
|
|
|
- payValue.value = 0;
|
|
|
- payOption.value = index;
|
|
|
- let find = rechargeRightsList.value.find((k:any) => (k.amountMin || 0) / 100 === payOptions.value[index]);
|
|
|
- if (find) {
|
|
|
- rechargeRightsId.value = find?.id;
|
|
|
- }
|
|
|
-};
|
|
|
+const initState = () => ({
|
|
|
+ configList: [],
|
|
|
+ chosenIdx: -1
|
|
|
+})
|
|
|
+
|
|
|
+const state = reactive(initState())
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ loadRechargeConfig();
|
|
|
+})
|
|
|
+
|
|
|
+onHide(() => {
|
|
|
+ Object.assign(state, initState());
|
|
|
+})
|
|
|
+
|
|
|
+const handleRechargeClick = (recharge: any, idx: number) => {
|
|
|
+ state.chosenIdx = idx;
|
|
|
+}
|
|
|
+
|
|
|
+const loadRechargeConfig = () => {
|
|
|
+ get(`/common/rechargeConfig`).then((res: any) => {
|
|
|
+ state.configList = res;
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
const debounceConfirm = debounce(() => {
|
|
|
confirm();
|
|
|
}, 500)
|
|
|
|
|
|
const confirm = () => {
|
|
|
- if (payValue.value && !/^[0-9]*(\.\d{1,2})?$/.test(`${payValue.value}`)) {
|
|
|
- uni.showModal({
|
|
|
- title: "温馨提示",
|
|
|
- content: "请输入正确的金额",
|
|
|
- showCancel: false,
|
|
|
- confirmColor: "#2d9e95",
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- const params = payValue.value
|
|
|
- ? Number(payValue.value)
|
|
|
- : payOptions.value[payOption.value];
|
|
|
- if (params > 10000 || params <= 0) {
|
|
|
- uni.showModal({
|
|
|
- title: "温馨提示",
|
|
|
- content: "每次最大充值金额10000，请修改金额",
|
|
|
- showCancel: false,
|
|
|
- confirmColor: "#2d9e95",
|
|
|
- });
|
|
|
+ if (state.chosenIdx < 0) {
|
|
|
return;
|
|
|
}
|
|
|
uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
+ title: "",
|
|
|
});
|
|
|
- insertMoney(params, rechargeRightsId.value)
|
|
|
- .then(() => {
|
|
|
- return fetchProfile();
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- payValue.value = 0;
|
|
|
- balance.value = res.balance;
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: "已支付",
|
|
|
- icon: "success",
|
|
|
- });
|
|
|
- setTimeout(() => {
|
|
|
- if (needBack.value) {
|
|
|
- back();
|
|
|
- } else {
|
|
|
- to("/pages-user/wallet/wallet");
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- if (/cancel/.test(err.errMsg)) {
|
|
|
- return;
|
|
|
- }
|
|
|
- uni.showModal({
|
|
|
- content: `${err.errMsg},请重试`,
|
|
|
- });
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-
|
|
|
-onLoad((options: any) => {
|
|
|
- console.log(options)
|
|
|
- if (options.value) {
|
|
|
- payOption.value = payOptions.value.findIndex(
|
|
|
- (item) => item === Number((Number(options.value) / 100).toFixed(2))
|
|
|
- );
|
|
|
- needBack.value = !!options.back;
|
|
|
- }
|
|
|
|
|
|
- if (options.discount) {
|
|
|
- payValue.value = Number((Number(options.discount) / 100).toFixed(2));
|
|
|
- }
|
|
|
- fetchProfile().then((res) => {
|
|
|
- // console.log(res);
|
|
|
- balance.value = res.balance;
|
|
|
- if (res && res.activityList && res.activityList.length) {
|
|
|
- res.activityList[0].rechargeRightsList.forEach((item: any) => {
|
|
|
- const val = Number((Number(item.amountMin) / 100).toFixed(2));
|
|
|
- const fi = payOptions.value.findIndex((o) => o === val);
|
|
|
- if (fi >= 0) {
|
|
|
- payOptionsDiscount.value[fi] = ((item.discount || 0) / 10).toFixed(1);
|
|
|
- payOptionsDiscountDay.value[fi] = item.validity > 0 ? item.validity : 1;
|
|
|
- }
|
|
|
- });
|
|
|
- if (res.activityList && res.activityList[0].rechargeRightsList && res.activityList[0].rechargeRightsList.length > 0) {
|
|
|
- rechargeRightsList.value = res?.activityList[0]?.rechargeRightsList
|
|
|
- }
|
|
|
- activityId.value = res.activityList[0].id;
|
|
|
- }
|
|
|
+ let recharge = state.configList[state.chosenIdx]
|
|
|
+ body("/payment/wxPay", {amount: parseInt(`${1 * 100}`)}).then((res: any) => {
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ wx.requestPayment({
|
|
|
+ timeStamp: `${res.timeStamp}`,
|
|
|
+ nonceStr: res.nonceStr,
|
|
|
+ package: res.packageVal,
|
|
|
+ signType: res.signType,
|
|
|
+ paySign: res.paySign,
|
|
|
+ success:function (res: any) {
|
|
|
+ console.log(res)
|
|
|
+ uni.redirectTo({
|
|
|
+ url:'/pages-user/wallet/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: function (e) {
|
|
|
+ console.error(e)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // #ifndef MP-WEIXIN
|
|
|
+ uni.showToast({title: '目前仅支持微信支付'})
|
|
|
+ // #endif
|
|
|
});
|
|
|
-});
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
-.pay {
|
|
|
- .title {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ min-height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.recharge {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: end;
|
|
|
+ align-items: start;
|
|
|
+ align-content: center;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #efefef;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ padding: 20rpx;
|
|
|
|
|
|
- .option {
|
|
|
- position: relative;
|
|
|
- width: 214rpx;
|
|
|
- height: 140rpx;
|
|
|
- background: var(--color-sec);
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #000;
|
|
|
- font-weight: 500;
|
|
|
- //overflow: hidden;
|
|
|
-
|
|
|
- &:nth-child(3n + 1) {
|
|
|
- margin-left: 0;
|
|
|
+ &_amt {
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
|
|
|
- .tag {
|
|
|
- position: absolute;
|
|
|
- top: -9px;
|
|
|
- right: -10px;
|
|
|
- padding: 2rpx 2rpx;
|
|
|
+ &_grant {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: inline-flex;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.active {
|
|
|
+ border-radius: 1px solid $uni-color-primary;
|
|
|
+
|
|
|
+ .recharge-item {
|
|
|
+ &_amt {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
|
|
|
- .option-active {
|
|
|
- color: var(--color-primary);
|
|
|
- //border-color: var(--color-primary);
|
|
|
- //color: #fff;
|
|
|
- font-weight: 700;
|
|
|
+ &_grant {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.recharge-pay {
|
|
|
+ width: calc(100vw - 40rpx);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10rpx;
|
|
|
+ left: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
zuypeng