You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
831 lines
22 KiB
831 lines
22 KiB
<template>
|
|
<view v-if="personal.user_id" class="container" :style="appThemeStyle">
|
|
<view class="account-panel dis-flex flex-y-center">
|
|
<view class="panel-lable">
|
|
<text>账户余额</text>
|
|
</view>
|
|
<view class="panel-balance flex-box">
|
|
<text>￥{{ personal.balance }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="recharge-panel">
|
|
<view class="recharge-label">
|
|
<text>充值金额</text>
|
|
</view>
|
|
<view class="recharge-plan clearfix">
|
|
<block v-for="(item, index) in planList" :key="index">
|
|
<view class="recharge-plan_item" :class="{ active: selectedPlanId == item.plan_id }"
|
|
@click="onSelectPlan(item.plan_id)">
|
|
<view class="plan_money">
|
|
<text>{{ item.money }}</text>
|
|
</view>
|
|
<view class="plan_gift" v-if="item.gift_money > 0">
|
|
<text>送{{ item.gift_money }}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<!-- 手动充值输入框 -->
|
|
<view class="recharge-input" v-if="setting.is_custom == 1">
|
|
<input class="input" type="digit" placeholder="可输入自定义充值金额" v-model="inputValue" @input="onChangeMoney" />
|
|
</view>
|
|
|
|
<!-- 支付方式 -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="recharge-label m-top60">
|
|
<text>支付方式</text>
|
|
</view>
|
|
<view class="payment-method">
|
|
<view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between"
|
|
@click="handleSelectPayType(index)">
|
|
<view class="item-left dis-flex flex-y-center">
|
|
<view v-if="item.method!=='huifu'" class="item-left_icon" :class="[item.method]">
|
|
<text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text>
|
|
</view>
|
|
<view v-else class="huifu-box">
|
|
<image :src="`${$picUrl}/static/yinlian.png`" mode="heightFix" class="huifu"></image>
|
|
</view>
|
|
<view class="item-left_text">
|
|
<text>{{ PayMethodEnum[item.method].name }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-right col-m" v-if="curPaymentItem && curPaymentItem.method == item.method">
|
|
<text class="iconfont icon-check"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<view v-if="methods[0]" class="voucher">
|
|
<view class="recharge-label m-top60">
|
|
<text>选择付款码</text>
|
|
</view>
|
|
<view class="voucher-type">
|
|
<view
|
|
v-for="(item, index) in voucherType"
|
|
:key="index"
|
|
class="type"
|
|
:class="{'active': voucherForm.voucherType === item.key}"
|
|
@click="voucherForm.voucherType = item.key"
|
|
>{{ item.name }}</view>
|
|
</view>
|
|
<view v-if="voucherForm.voucherType" class="qrcode-box">
|
|
<image :src="voucherType.filter(item => item.key === voucherForm.voucherType)[0].qrCode" mode="aspectFill"></image>
|
|
</view>
|
|
<view v-if="voucherForm.voucherType" class="merchant-name">{{ voucherType.filter(item => item.key === voucherForm.voucherType)[0].merchantName }}</view>
|
|
<view v-if="voucherForm.voucherType" class="voucher-form">
|
|
<view class="form-item">
|
|
<view class="form-label">付款人姓名</view>
|
|
<view class="form-content">
|
|
<input type="text" placeholder="请输入付款人姓名" v-model="voucherForm.payerName"/>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">付款人电话</view>
|
|
<view class="form-content">
|
|
<input type="digit" placeholder="请输入付款人电话" v-model="voucherForm.payerPhone"/>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">上传支付凭证</view>
|
|
<view class="form-content">
|
|
<view class="upload-images">
|
|
<view v-for="(item, index) in voucherForm.imageList" :key="index" class="image-box">
|
|
<image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
|
|
<image src="/static/delete.png" mode="aspectFill" class="delete" @click.stop="deleteImage(index)"></image>
|
|
</view>
|
|
<view class="upload-btn" v-if="voucherForm.imageList.length < 5" @click="addImage">
|
|
<image src="/static/add.png" mode="aspectFill"></image>
|
|
<text class="tip">添加照片</text>
|
|
<text class="tip sub-tip">最多5张</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- 确认按钮 -->
|
|
<view class="recharge-submit btn-submit">
|
|
<form @submit="onSubmit">
|
|
<button class="button" formType="submit" :disabled="disabled">立即充值</button>
|
|
</form>
|
|
</view>
|
|
</view>
|
|
<!-- 充值描述 -->
|
|
<view class="describe-panel">
|
|
<view class="recharge-label">
|
|
<text>充值说明</text>
|
|
</view>
|
|
<view class="content">
|
|
<text space="ensp">{{ setting.describe }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付确认弹窗 -->
|
|
<!-- #ifdef H5 -->
|
|
<u-modal v-if="tempUnifyData" v-model="showConfirmModal" title="支付确认" show-cancel-button confirm-text="已完成支付"
|
|
:confirm-color="appTheme.mainBg" negative-top="100" :asyncClose="true"
|
|
@confirm="onTradeQuery(tempUnifyData.outTradeNo, tempUnifyData.method)">
|
|
<view class="modal-content">
|
|
<text>请在{{ PayMethodClientNameEnum[tempUnifyData.method] }}内完成支付，如果您已经支付成功，请点击“已完成支付”按钮</text>
|
|
</view>
|
|
</u-modal>
|
|
<!-- #endif -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as RechargeApi from '@/api/recharge'
|
|
import * as UploadApi from '@/api/upload'
|
|
import { PayMethodEnum } from '@/common/enum/payment'
|
|
import { inArray, urlEncode } from '@/utils/util'
|
|
import { Alipay, Wechat } from '@/core/payment'
|
|
|
|
// 支付方式对应的图标
|
|
const PayMethodIconEnum = {
|
|
[PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
|
|
[PayMethodEnum.ALIPAY.value]: 'icon-alipay',
|
|
}
|
|
|
|
// 支付方式的终端名称
|
|
const PayMethodClientNameEnum = {
|
|
[PayMethodEnum.WECHAT.value]: '微信',
|
|
[PayMethodEnum.ALIPAY.value]: '支付宝'
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 正在加载
|
|
isLoading: true,
|
|
// 按钮禁用
|
|
disabled: false,
|
|
// 枚举类
|
|
PayMethodEnum,
|
|
PayMethodIconEnum,
|
|
PayMethodClientNameEnum,
|
|
// 个人信息
|
|
personal: { balance: '0.00' },
|
|
// 充值设置
|
|
setting: {},
|
|
// 充值方案列表
|
|
planList: [],
|
|
// 当前客户端的支付方式列表（后端根据platform判断）
|
|
methods: [],
|
|
// 当前选中的套餐ID
|
|
selectedPlanId: 0,
|
|
// 自定义金额
|
|
inputValue: '',
|
|
// 当前选中的支付方式
|
|
curPaymentItem: null,
|
|
// 支付确认弹窗
|
|
showConfirmModal: false,
|
|
// #ifdef H5
|
|
// 当前微信支付信息 (临时数据, 仅用于H5端)
|
|
tempUnifyData: { outTradeNo: '', method: '' },
|
|
// #endif
|
|
voucherType: [],
|
|
voucherForm: {
|
|
voucherType: '',
|
|
payerName: '',
|
|
payerPhone: '',
|
|
imageList: [],
|
|
uploadImages: [],
|
|
},
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
// 获取页面数据
|
|
this.getPageData()
|
|
uni.$on('appShow', this.solveShowMsg);
|
|
},
|
|
onUnload() {
|
|
uni.$off('appShow', this.solveShowMsg);
|
|
},
|
|
|
|
methods: {
|
|
solveShowMsg(info) {
|
|
console.log(info);
|
|
if (this.miniPayRequest && Object.keys(this.miniPayRequest).length > 0 && info.appId === this.miniPayRequest.miniuser) {
|
|
this.onTradeQuery(this.miniPayRequest.out_trade_no, this.curPaymentItem.method);
|
|
}
|
|
},
|
|
// 选择充值套餐
|
|
onSelectPlan(planId) {
|
|
this.selectedPlanId = planId
|
|
this.inputValue = ''
|
|
if (this.curPaymentItem.method === 'huifu') {
|
|
this.createOrder();
|
|
}
|
|
},
|
|
|
|
// 金额输入框
|
|
onChangeMoney({ detail }) {
|
|
this.inputValue = detail.value
|
|
this.selectedPlanId = 0
|
|
},
|
|
|
|
// 选择支付方式
|
|
handleSelectPayType(index) {
|
|
this.curPaymentItem = this.methods[index]
|
|
if (this.curPaymentItem.method === 'huifu' && (this.selectedPlanId > 0 || this.inputValue)) {
|
|
this.createOrder();
|
|
}
|
|
},
|
|
|
|
// 获取页面数据
|
|
getPageData() {
|
|
const app = this
|
|
app.isLoading = true
|
|
return new Promise((resolve, reject) => {
|
|
RechargeApi.center({ client: app.platform })
|
|
.then(result => {
|
|
app.setting = result.data.setting
|
|
app.personal = result.data.personal
|
|
app.planList = result.data.planList
|
|
app.methods = result.data.paymentMethods
|
|
app.isLoading = false
|
|
// 默认选中的支付方式
|
|
app.handleSelectPayType(0)
|
|
// #ifdef H5
|
|
// 判断当前页面来源于浏览器返回
|
|
// this.performance()
|
|
console.log(result.data.paymentMethods[0]);
|
|
if (result.data.paymentMethods[0]) {
|
|
const data = result.data.paymentMethods[0].template.config.voucher;
|
|
console.log(data);
|
|
const arr = [];
|
|
if (data.wechatMerchantName && data.wechatQrCode) {
|
|
arr.push({ name: '微信支付', key: 'wechat', merchantName: data.wechatMerchantName, qrCode: data.wechatQrCode });
|
|
}
|
|
if (data.alipayMerchantName && data.alipayQrcode) {
|
|
arr.push({ name: '支付宝', key: 'alipay', merchantName: data.alipayMerchantName, qrCode: data.alipayQrcode });
|
|
}
|
|
if (data.quickpayMerchantName && data.quickpayQrCode) {
|
|
arr.push({ name: '快捷支付', key: 'quickpay', merchantName: data.quickpayMerchantName, qrCode: data.quickpayQrCode });
|
|
}
|
|
app.voucherType = arr;
|
|
app.voucherForm.voucherType = arr[0] ? arr[0].key : '';
|
|
}
|
|
// #endif
|
|
})
|
|
})
|
|
},
|
|
|
|
// 判断当前页面来源于浏览器返回
|
|
// #ifdef H5
|
|
performance() {
|
|
this.alipayPerformance()
|
|
this.wechatPerformance()
|
|
},
|
|
|
|
// H5端支付宝支付完成跳转回当前页面时触发
|
|
alipayPerformance() {
|
|
const app = this
|
|
app.tempUnifyData = Alipay.performance()
|
|
if (app.tempUnifyData) {
|
|
app.onTradeQuery(app.tempUnifyData.outTradeNo, app.tempUnifyData.method)
|
|
}
|
|
},
|
|
|
|
// H5端微信支付完成或返回时触发
|
|
wechatPerformance() {
|
|
const app = this
|
|
app.tempUnifyData = Wechat.performance('recharge')
|
|
console.log('wechatPerformance', app.tempUnifyData)
|
|
if (app.tempUnifyData) {
|
|
app.showConfirmModal = true
|
|
}
|
|
},
|
|
// #endif
|
|
|
|
// 立即充值
|
|
onSubmit(e) {
|
|
const app = this
|
|
// #ifdef MP-WEIXIN
|
|
// 判断是否选择了支付方式
|
|
if (!app.curPaymentItem) {
|
|
app.$toast('您还没有选择支付方式')
|
|
return
|
|
}
|
|
// #endif
|
|
// 按钮禁用
|
|
if (app.disabled) return
|
|
app.disabled = true
|
|
if (app.curPaymentItem.method === 'huifu') {
|
|
app.disabled = false
|
|
if (!this.selectedPlanId && !this.inputValue) {
|
|
app.$toast('请选择充值套餐或输入充值金额');
|
|
return;
|
|
}
|
|
if (!app.miniPayRequest || Object.keys(app.miniPayRequest).length === 0) {
|
|
app.$toast(`暂无${app.PayMethodEnum[app.curPaymentItem.method].name}支付信息`);
|
|
return
|
|
}
|
|
let appPayRequest = '';
|
|
appPayRequest = encodeURIComponent(JSON.stringify({
|
|
sign: app.miniPayRequest.sign,
|
|
prepayid: app.miniPayRequest.prepayid,
|
|
}));
|
|
uni.openEmbeddedMiniProgram({
|
|
appId: app.miniPayRequest.miniuser,
|
|
path: `${app.miniPayRequest.minipath}?appPayRequest=${appPayRequest}`
|
|
});
|
|
} else {
|
|
// 提交到后端API
|
|
this.createOrder();
|
|
}
|
|
},
|
|
createOrder() {
|
|
const app = this;
|
|
let params = {
|
|
planId: app.selectedPlanId,
|
|
customMoney: app.inputValue ? app.inputValue : '',
|
|
method: app.curPaymentItem.method,
|
|
client: app.platform,
|
|
extra: app.getExtraAsUnify(app.curPaymentItem.method)
|
|
};
|
|
// #ifndef MP-WEIXIN
|
|
app.disabled = false
|
|
if (!app.voucherForm.voucherType) {
|
|
app.$toast('请选择付款码');
|
|
return
|
|
}
|
|
if (!app.voucherForm.payerName) {
|
|
app.$toast('请输入付款人姓名');
|
|
return
|
|
}
|
|
if (!app.voucherForm.payerPhone) {
|
|
app.$toast('请输入付款人电话');
|
|
return
|
|
}
|
|
if (!app.validatePhoneNumber(app.voucherForm.payerPhone)) {
|
|
app.$toast('请输入正确的手机号');
|
|
return;
|
|
}
|
|
if (app.voucherForm.imageList.length === 0) {
|
|
app.$toast('请上传支付凭证');
|
|
return
|
|
}
|
|
params = { ...params, extra: {...app.voucherForm}};
|
|
console.log(params);
|
|
app.disabled = true
|
|
// #endif
|
|
RechargeApi.submit(params)
|
|
.then(result => {
|
|
if (app.curPaymentItem.method === 'huifu') {
|
|
const { miniPayRequest, out_trade_no } = result.data.payment;
|
|
app.miniPayRequest = miniPayRequest;
|
|
app.miniPayRequest.out_trade_no = out_trade_no;
|
|
} else {
|
|
// #ifdef H5
|
|
this.onShowSuccess(result)
|
|
// #endif
|
|
app.onSubmitCallback(result)
|
|
}
|
|
})
|
|
.finally(err => setTimeout(() => app.disabled = false, 10))
|
|
},
|
|
|
|
|
|
validatePhoneNumber(phone) {
|
|
// 定义手机号码的正则表达式
|
|
var regExp = /^1[3456789]\d{9}$/;
|
|
|
|
if (regExp.test(phone)) {
|
|
return true; // 符合手机号码格式要求
|
|
} else {
|
|
return false; // 不符合手机号码格式要求
|
|
}
|
|
},
|
|
|
|
// 获取第三方支付的扩展参数
|
|
getExtraAsUnify(method) {
|
|
if (method === PayMethodEnum.ALIPAY.value) {
|
|
return Alipay.extraAsUnify()
|
|
}
|
|
if (method === PayMethodEnum.WECHAT.value) {
|
|
return Wechat.extraAsUnify()
|
|
}
|
|
return {}
|
|
},
|
|
|
|
// 订单提交成功后回调
|
|
onSubmitCallback(result) {
|
|
const app = this
|
|
const method = app.curPaymentItem.method
|
|
const paymentData = result.data.payment
|
|
// 余额支付
|
|
if (method === PayMethodEnum.BALANCE.value) {
|
|
app.onShowSuccess(result)
|
|
}
|
|
// 发起支付宝支付
|
|
if (method === PayMethodEnum.ALIPAY.value) {
|
|
console.log('paymentData', paymentData)
|
|
Alipay.payment(paymentData)
|
|
.then(res => app.onPaySuccess(res))
|
|
.catch(err => app.onPayFail(err))
|
|
}
|
|
// 发起微信支付
|
|
if (method === PayMethodEnum.WECHAT.value) {
|
|
console.log('paymentData', paymentData)
|
|
Wechat.payment({ orderKey: 'recharge', ...paymentData })
|
|
.then(res => app.onPaySuccess(res))
|
|
.catch(err => app.onPayFail(err))
|
|
}
|
|
},
|
|
|
|
// 订单支付成功的回调方法
|
|
// 这里只是前端支付api返回结果success,实际订单是否支付成功 以后端的查单和异步通知为准
|
|
onPaySuccess({ res, option: { isRequireQuery, outTradeNo, method } }) {
|
|
const app = this
|
|
// 判断是否需要主动查单
|
|
// isRequireQuery为true代表需要主动查单
|
|
if (isRequireQuery) {
|
|
app.onTradeQuery(outTradeNo, method)
|
|
return true
|
|
}
|
|
this.onShowSuccess(res)
|
|
},
|
|
|
|
// 显示支付成功信息并页面跳转
|
|
onShowSuccess({ message }) {
|
|
this.$toast(message || '订单支付成功')
|
|
this.onSuccessNav()
|
|
},
|
|
|
|
// 订单支付失败
|
|
onPayFail(err) {
|
|
console.log('onPayFail', err)
|
|
const errMsg = err.message || '订单未支付'
|
|
this.$error(errMsg)
|
|
},
|
|
|
|
// 已完成支付按钮事件: 请求后端查单
|
|
onTradeQuery(outTradeNo, method) {
|
|
const app = this
|
|
// 交易查询
|
|
// 查询第三方支付订单是否付款成功
|
|
RechargeApi.tradeQuery({ outTradeNo, method, client: app.platform })
|
|
.then(result => result.data.isPay ? app.onShowSuccess(result) : app.onPayFail(result))
|
|
.finally(() => app.showConfirmModal = false)
|
|
},
|
|
|
|
// 支付成功后的跳转
|
|
onSuccessNav() {
|
|
const pages = getCurrentPages()
|
|
const lastPage = pages.length < 2 ? null : pages[pages.length - 2]
|
|
const backRoutes = ['pages/wallet/index']
|
|
if (lastPage && inArray(lastPage.route, backRoutes)) {
|
|
setTimeout(() => uni.navigateBack(), 1000)
|
|
} else {
|
|
setTimeout(() => {
|
|
this.$navTo('pages/wallet/index', {}, 'redirectTo')
|
|
}, 1200)
|
|
}
|
|
},
|
|
|
|
addImage() {
|
|
const that = this;
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|
success({
|
|
tempFiles
|
|
}) {
|
|
console.log(that.voucherForm.imageList, tempFiles);
|
|
that.voucherForm.imageList.push(tempFiles[0].path)
|
|
that.upload(tempFiles[0], 'image')
|
|
}
|
|
});
|
|
},
|
|
async upload(path, type) {
|
|
const that = this;
|
|
// 批量上传
|
|
return new Promise((resolve, reject) => {
|
|
if (path) {
|
|
UploadApi.image([path])
|
|
.then(fileIds => {
|
|
console.log(fileIds);
|
|
that.voucherForm.uploadImages.push(fileIds[0]);
|
|
resolve(fileIds)
|
|
})
|
|
.catch(reject)
|
|
} else {
|
|
resolve()
|
|
}
|
|
})
|
|
},
|
|
deleteImage(index) {
|
|
this.voucherForm.imageList.splice(index, 1);
|
|
this.voucherForm.uploadImages.splice(index, 1);
|
|
},
|
|
previewImage(item) {
|
|
uni.previewImage({
|
|
urls:this.voucherForm.imageList,
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page,
|
|
.container {
|
|
background: #fff;
|
|
}
|
|
|
|
.container {
|
|
padding-bottom: 70rpx;
|
|
}
|
|
|
|
.m-top60 {
|
|
margin-top: 60rpx;
|
|
}
|
|
|
|
// 账户面板
|
|
.account-panel {
|
|
width: 650rpx;
|
|
height: 180rpx;
|
|
margin: 50rpx auto;
|
|
padding: 0 60rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 12rpx;
|
|
color: #fff;
|
|
background: linear-gradient(-125deg, #a46bff, #786cff);
|
|
box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26);
|
|
}
|
|
|
|
.panel-lable {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.recharge-label {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 30rpx;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.panel-balance {
|
|
text-align: right;
|
|
font-size: 46rpx;
|
|
}
|
|
|
|
.recharge-panel {
|
|
margin-top: 60rpx;
|
|
padding: 0 60rpx;
|
|
}
|
|
|
|
// 充值套餐
|
|
.recharge-plan {
|
|
margin-bottom: -20rpx;
|
|
|
|
.recharge-plan_item {
|
|
width: 192rpx;
|
|
padding: 15rpx 0;
|
|
float: left;
|
|
text-align: center;
|
|
color: #888;
|
|
border: 1rpx solid rgb(228, 228, 228);
|
|
border-radius: 10rpx;
|
|
margin: 0 20rpx 20rpx 0;
|
|
|
|
&:nth-child(3n + 0) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.active {
|
|
color: #786cff;
|
|
border: 1rpx solid #786cff;
|
|
|
|
.plan_money {
|
|
color: #786cff;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.plan_money {
|
|
font-size: 32rpx;
|
|
color: rgb(82, 82, 82);
|
|
}
|
|
|
|
.plan_gift {
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.recharge-input {
|
|
margin-top: 40rpx;
|
|
|
|
.input {
|
|
display: block;
|
|
border: 1rpx solid rgb(228, 228, 228);
|
|
border-radius: 10rpx;
|
|
padding: 20rpx 26rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
// 立即充值
|
|
.recharge-submit {
|
|
margin-top: 70rpx;
|
|
}
|
|
|
|
.btn-submit {
|
|
.button {
|
|
font-size: 30rpx;
|
|
background: #786cff;
|
|
border: none;
|
|
color: white;
|
|
border-radius: 50rpx;
|
|
padding: 0 120rpx;
|
|
line-height: 3;
|
|
}
|
|
|
|
.button[disabled] {
|
|
background: #a098ff;
|
|
border-color: #a098ff;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
// 充值说明
|
|
.describe-panel {
|
|
margin-top: 50rpx;
|
|
padding: 0 60rpx;
|
|
|
|
.content {
|
|
font-size: 26rpx;
|
|
line-height: 1.6;
|
|
color: #888;
|
|
}
|
|
}
|
|
|
|
// 支付方式
|
|
.payment-method {
|
|
|
|
.pay-item {
|
|
padding: 14rpx 0;
|
|
font-size: 26rpx;
|
|
|
|
.item-left_icon {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
font-size: 60rpx;
|
|
|
|
&.wechat {
|
|
color: #00c800;
|
|
}
|
|
|
|
&.alipay {
|
|
color: #009fe8;
|
|
}
|
|
|
|
}
|
|
|
|
.huifu-box {
|
|
width: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
.huifu {
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.item-left_text {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.item-right {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.user-balance {
|
|
margin-left: 20rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.voucher {
|
|
.voucher-type {
|
|
background: #fff;
|
|
padding: 4rpx 6rpx;
|
|
display: flex;
|
|
.type {
|
|
flex: 1;
|
|
text-align: center;
|
|
border-top: 2rpx solid #ddd;
|
|
border-bottom: 2rpx solid #ddd;
|
|
border-right: 2rpx solid #ddd;
|
|
background: #fff;
|
|
line-height: 2;
|
|
&:first-child {
|
|
border-left: 2rpx solid #ddd;
|
|
}
|
|
&.active {
|
|
background: #786cff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.qrcode-box {
|
|
margin: 40rpx auto 20rpx;
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
>image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.merchant-name {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.voucher-form {
|
|
.form-item {
|
|
.form-label {
|
|
margin: 40rpx 0 20rpx;
|
|
}
|
|
.form-content {
|
|
input {
|
|
border: 1rpx solid rgb(228, 228, 228);
|
|
border-radius: 10rpx;
|
|
padding: 20rpx 26rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.upload-images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
>view {
|
|
margin: 0 12rpx 12rpx 0;
|
|
border-radius: 5rpx;
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.image-box {
|
|
position: relative;
|
|
image {
|
|
width: 206rpx;
|
|
height: 206rpx;
|
|
}
|
|
.delete {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
.upload-btn {
|
|
width: 206rpx;
|
|
height: 206rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #F8F8F8;
|
|
>image {
|
|
width: 46rpx;
|
|
height: 37rpx;
|
|
}
|
|
.tip {
|
|
margin: 19rpx 0 13rpx;
|
|
color: #333333;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
&.sub-tip {
|
|
color: #999999;
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 支付确认弹窗
|
|
.modal-content {
|
|
padding: 40rpx 48rpx;
|
|
font-size: 30rpx;
|
|
line-height: 50rpx;
|
|
text-align: left;
|
|
color: #606266;
|
|
// height: 620rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
|