529 lines
14 KiB
Vue
529 lines
14 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
|
|
<swiper-item>
|
|
<image src="/static/images/banner_1.png" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<image src="/static/images/banner_2.png" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 充值金额输入 -->
|
|
<view class="card-box sum-input-box">
|
|
<view class="mt-20">充值金额</view>
|
|
<view class="sum-input mt-20">
|
|
<text style="font-size: 12px;margin-bottom: 6px;">¥</text>
|
|
<input class="input-money" type="digit" placeholder-style="font-size:23px;" placeholder="请输入金额"
|
|
@input="obMoney" :value="payMoney" />
|
|
</view>
|
|
<scroll-view scroll-x class="mt-20">
|
|
<view class="list-tabs">
|
|
<block v-for="(item,index) in paySumOptions" :key="index">
|
|
<view :class="currentTab==index? 'tab-select' :'tab-normal'" class="item-margin"
|
|
@click="doChangePayMoney" :data-value="item" :data-index="index">
|
|
<text>{{item}}</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 付款方式 -->
|
|
<view class="card-box">
|
|
<view>付款方式</view>
|
|
<radio-group class="form-radio_wrap">
|
|
<view class="pay-option-item mt-20" @click="doChangePayWay" data-value="1">
|
|
<view class="option-type">
|
|
<view class="icon icon-wechat"></view>
|
|
<view>微信支付</view>
|
|
</view>
|
|
<radio color="#FFA900" style="transform:scale(0.8)" :checked="payWay==1" value="1"></radio>
|
|
</view>
|
|
<view class="pay-option-item" @click="doChangePayWay" data-value="2">
|
|
<view class="option-type">
|
|
<view class="icon icon-card"></view>
|
|
<view>对公转账</view>
|
|
</view>
|
|
<radio color="#FFA900" style="transform:scale(0.8)" :checked="payWay==2" value="2"></radio>
|
|
</view>
|
|
</radio-group>
|
|
</view>
|
|
<!-- 套餐包 -->
|
|
<view class="card-box">
|
|
<view class="bag-box">
|
|
<view :class="currentBagTab=='MATERIAL'?'bag-select':'bag-normal'" class="border-left"
|
|
@click="doChangeBagTab" data-value="MATERIAL">写材料套餐包</view>
|
|
<view :class="currentBagTab=='ALL'?'bag-select':'bag-normal'" class="border-right"
|
|
@click="doChangeBagTab" data-value="ALL">全托管套餐包</view>
|
|
</view>
|
|
<ContainerLoading style="min-height: 40vh;" :loadingVisible="listLoading" @doRefresh="doRefreshList">
|
|
<view class="bag-list" style="min-height: 40vh;">
|
|
<!-- 列表 -->
|
|
<block v-for="(item,index) in bagList" :key="index">
|
|
<view class="bag-item">
|
|
<view class="bag-item-title-box">
|
|
<view class="p-title">{{item.packageName}}</view>
|
|
<view class="sum">{{item.packageMoney/100}}</view>
|
|
</view>
|
|
<view class="bag-item-desc-box">
|
|
<view class="desc">{{item.packageDescription}}</view>
|
|
<view class="btn" @click="chooseBag" :data-value="item">选购</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</ContainerLoading>
|
|
</view>
|
|
<view class="bottom-fixed-footer">
|
|
<view class="bottom-btn-green" @click="doPay">确认充值</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<uni-popup type="message" ref="msg">
|
|
<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ContainerLoading from '@/components/container-loading.vue';
|
|
import PayService from '@/common/js/net/payApi.js';
|
|
export default {
|
|
components: {
|
|
ContainerLoading
|
|
},
|
|
data() {
|
|
return {
|
|
paySumOptions: [100, 300, 500, 1000, 2000, 5000],
|
|
currentTab: 0, //充值金额选项
|
|
payMoney: 100, //支付金额
|
|
currentBagTab: 'MATERIAL', //当前套餐包tab
|
|
bagList: [], //套餐包列表
|
|
payWay: 1, //支付方式 1微信 2对公
|
|
showError: false,
|
|
errorHint: '',
|
|
showSuccess: false,
|
|
successHint: '',
|
|
listLoading: 'loading',
|
|
selectBag: {}, //选中的套餐包
|
|
msgType: 'info',
|
|
msgTxt: '',
|
|
}
|
|
},
|
|
onLoad() {
|
|
const _self = this
|
|
uni.setNavigationBarTitle({
|
|
title: 'AI喵著'
|
|
})
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
|
|
backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
|
|
animation: { // 可选项
|
|
duration: 500,
|
|
timingFunc: 'easeIn'
|
|
}
|
|
})
|
|
_self.doGetPackageList(_self.currentBagTab)
|
|
},
|
|
methods: {
|
|
doRefreshList() {
|
|
this.doGetPackageList(this.currentBagTab)
|
|
},
|
|
//获取可以购买的套餐包
|
|
doGetPackageList(path) {
|
|
const _self = this
|
|
_self.listLoading = 'loading'
|
|
const data = {
|
|
page: 1,
|
|
rows: 20
|
|
}
|
|
PayService.doGetBuyPackageList(path, data)
|
|
.then(res => {
|
|
console.log(res)
|
|
_self.listLoading = res.rows && res.rows.length > 0 ? 'success' : 'empty'
|
|
_self.bagList = res.rows
|
|
})
|
|
.catch(err => {
|
|
console.log(err)
|
|
_self.listLoading = 'error'
|
|
_self.msgType = 'error'
|
|
_self.msgTxt = '不好意思，没能获取到套餐数据。请您再试一次，相信马上就能看到啦。'
|
|
_self.$refs.msg.open()
|
|
})
|
|
},
|
|
//监听充值金额选项
|
|
doChangePayMoney(e) {
|
|
this.payMoney = e.currentTarget.dataset.value
|
|
this.selectBag = {}
|
|
this.currentTab = e.currentTarget.dataset.index
|
|
},
|
|
//监听充值金额变化
|
|
obMoney(e) {
|
|
var _self = this
|
|
const inputValue = e.detail.value
|
|
const regex = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
|
|
if (inputValue != '') {
|
|
if (regex.test(inputValue)) {
|
|
//数字
|
|
_self.payMoney = e.detail.value
|
|
_self.selectBag = {}
|
|
_self.currentTab = -1
|
|
} else {
|
|
_self.msgTxt = '请输入数字'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
setTimeout(() => {
|
|
_self.payMoney = 100
|
|
_self.selectBag = {}
|
|
}, 1000);
|
|
}
|
|
}
|
|
},
|
|
//切换套餐包
|
|
doChangeBagTab(e) {
|
|
this.currentBagTab = e.currentTarget.dataset.value
|
|
this.doGetPackageList(this.currentBagTab)
|
|
},
|
|
//切换支付方式
|
|
doChangePayWay(e) {
|
|
this.payWay = e.currentTarget.dataset.value
|
|
},
|
|
//选中套餐包
|
|
chooseBag(e) {
|
|
const _self = this
|
|
const selItem = e.currentTarget.dataset.value
|
|
_self.payMoney = selItem.packageMoney / 100
|
|
_self.currentTab = -1
|
|
_self.selectBag = selItem
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300
|
|
})
|
|
},
|
|
//调用微信支付
|
|
toWeChatPay() {
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '支付中...',
|
|
})
|
|
const data = {
|
|
rechargeMoney: _self.payMoney,
|
|
packageInfoId: _self.selectBag.packageInfoId ? _self.selectBag.packageInfoId : ''
|
|
}
|
|
PayService.doGetWxPayParams(data)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
if (res && res.paySign && res.paySign != '') {
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
nonceStr: res.nonceStr,
|
|
package: `prepay_id=${res.prepayId}`,
|
|
paySign: res.paySign,
|
|
timeStamp: res.timeStamp + '',
|
|
signType: 'RSA',
|
|
success: res => {
|
|
if (res.errMsg && res.errMsg == 'requestPayment:ok') {
|
|
_self.msgTxt = '恭喜，您的充值已成功到账！'
|
|
_self.msgType = 'success'
|
|
_self.$refs.msg.open()
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 2000);
|
|
} else {
|
|
_self.msgTxt = '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
}
|
|
},
|
|
fail: err => {
|
|
var hint = '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
|
|
if (err && err.errMsg && err.errMsg == 'requestPayment:fail cancel') {
|
|
//主动取消
|
|
hint = '本次支付已被您主动取消。若您改变主意，重新支付流程很便捷哦。'
|
|
}
|
|
_self.msgTxt = hint
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
}
|
|
})
|
|
} else {
|
|
_self.msgType = 'error'
|
|
_self.msgTxt = err.msg ? err.msg : '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
|
|
_self.$refs.msg.open()
|
|
}
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgType = 'error'
|
|
_self.msgTxt = err.msg ? err.msg : '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
|
|
_self.$refs.msg.open()
|
|
})
|
|
},
|
|
//去支付
|
|
doPay() {
|
|
const _self = this
|
|
//判断钱大于0
|
|
if (_self.payMoney > 0) {
|
|
if (_self.payWay == '1') {
|
|
//微信
|
|
_self.toWeChatPay()
|
|
} else {
|
|
//对公 需要传递参数 选中套餐 or 直接冲钱
|
|
const id = _self.selectBag.packageInfoId
|
|
const name = _self.selectBag.packageName
|
|
uni.redirectTo({
|
|
url: `/pages/pay/publicPay/publicPay?packageId=${id}&name=${name}&money=${_self.payMoney}`,
|
|
})
|
|
}
|
|
} else {
|
|
//显示输入金额提示
|
|
_self.msgTxt = '请输入要充值的金额'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.input-money {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
text-align: left;
|
|
}
|
|
|
|
.input-money-placeholder {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
text-align: left;
|
|
}
|
|
|
|
.card-box {
|
|
margin-top: 20rpx;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30rpx;
|
|
background-color: white;
|
|
border: 1rpx solid #F5F5F5;
|
|
}
|
|
|
|
.sum-input-box {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.sum-input-box .title {
|
|
font-size: 12px;
|
|
color: black;
|
|
}
|
|
|
|
.sum-input-box input {
|
|
font-size: 42rpx;
|
|
color: black;
|
|
padding: 20rpx 10rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.sum-input {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: baseline;
|
|
border-bottom: 1rpx solid #dbdada;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pay-option-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.pay-option-item .option-type {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex: 1;
|
|
margin: 20rpx 0rpx;
|
|
}
|
|
|
|
.option-type .icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.list-tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.bag-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.bag-select {
|
|
flex: 1;
|
|
text-align: center;
|
|
background-color: #FFA900;
|
|
color: white;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.bag-normal {
|
|
flex: 1;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
color: #FFA900;
|
|
border: 1rpx solid #FFA900;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.tab-select {
|
|
font-size: 20rpx;
|
|
color: black;
|
|
background-color: #FAE9D0;
|
|
text-align: center;
|
|
padding: 5rpx 30rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
.item-margin {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-margin:nth-of-type(n+2) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.tab-normal {
|
|
font-size: 20rpx;
|
|
color: #F4CC92;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #F4CC92;
|
|
text-align: center;
|
|
padding: 5rpx 30rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bottom-btn-box {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
width: 100vw;
|
|
line-height: 100rpx;
|
|
border-radius: 20rpx;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 80px;
|
|
}
|
|
|
|
.green-bottom-btn {
|
|
background-color: #37AD46;
|
|
color: white;
|
|
text-align: center;
|
|
height: 42px;
|
|
width: 90vw;
|
|
line-height: 42px;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
.green-bottom-btn:active {
|
|
background-color: #7ef58e;
|
|
color: white;
|
|
}
|
|
|
|
.bag-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 110rpx;
|
|
width: 86vw;
|
|
}
|
|
|
|
.bag-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1rpx solid rgba(239, 239, 239, 1);
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.bag-item:nth-of-type(n+2) {
|
|
border-top: none;
|
|
border-left: 1rpx solid rgba(239, 239, 239, 1);
|
|
border-right: 1rpx solid rgba(239, 239, 239, 1);
|
|
border-bottom: 1rpx solid rgba(239, 239, 239, 1);
|
|
}
|
|
|
|
.bag-item-title-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.p-title {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: black;
|
|
}
|
|
|
|
.bag-item-title-box .title {
|
|
font-size: 40rpx;
|
|
color: black;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bag-item-title-box .sum {
|
|
font-size: 14px;
|
|
color: black;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.bag-item-title-box .sum::before {
|
|
content: "¥";
|
|
font-size: 24rpx;
|
|
color: black;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.bag-item-desc-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.bag-item-desc-box .desc {
|
|
font-size: 28rpx;
|
|
color: #363636;
|
|
}
|
|
|
|
.bag-item-desc-box .btn {
|
|
padding: 1px 15px;
|
|
color: white;
|
|
border-radius: 47px;
|
|
background-color: rgba(255, 198, 125, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
font-family: PingFangSC-regular;
|
|
}
|
|
</style> |