298 lines
6.9 KiB
Vue
298 lines
6.9 KiB
Vue
<template>
|
||
<view class="mine-pay" v-if="isLoad">
|
||
<view
|
||
class="flex-center flex-column fill-base mt-md ml-md mr-md pd-lg f-paragraph c-title box-shadow radius-24">
|
||
<view class="flex-y-baseline f-sm-title">¥<view style="font-size: 60rpx;">{{orderInfo.pay_price}}</view>
|
||
</view>
|
||
<view>实付金额</view>
|
||
</view>
|
||
|
||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24"
|
||
v-if="orderInfo.page_type == 'breed'">
|
||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg">
|
||
<view class="item-text">订单备注</view>
|
||
<input v-model="text" type="text" class="flex-1 f-paragraph" maxlength="100"
|
||
placeholder-class="c-placeholder" placeholder="请输入订单备注" />
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="fill-base mt-md ml-md mr-md f-sm-title box-shadow radius-24">
|
||
<view @tap.stop="toChangeItem(index)" class="flex-between ml-md mr-md pl-sm pr-sm pt-lg pb-lg b-1px-b"
|
||
v-for="(item,index) in payList" :key="index">
|
||
<view class="pay-item flex-y-center"><i class="iconfont mr-md" :class="[item.icon]"
|
||
:style="{color:item.id==1?primaryColor:item.id==2?subColor:'#01AAF2'}"></i>
|
||
<view class="flex-y-baseline">{{item.title}}
|
||
<view class="f-paragraph c-caption ml-sm" v-if="item.id==2">余额{{userInfo.balance || 0}}元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<i class="pay-icon iconfont c-caption"
|
||
:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':item.is_disabled || payInd == index}]"
|
||
:style="{color:payInd==index?primaryColor:''}"></i>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="space-lg"></view>
|
||
|
||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toPay">
|
||
<view class="pay-btn flex-center f-title c-base radius" :style="{background:primaryColor}">立即支付</view>
|
||
</auth>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapActions,
|
||
mapMutations
|
||
} from "vuex"
|
||
import parser from "@/components/jyf-Parser/index"
|
||
export default {
|
||
components: {
|
||
parser
|
||
},
|
||
data() {
|
||
return {
|
||
isLoad: false,
|
||
options: {},
|
||
// 1微信支付；2余额支付；3支付宝支付
|
||
payList: [{
|
||
id: 1,
|
||
title: '微信支付',
|
||
icon: 'icon-wechat-pay',
|
||
is_disabled: false
|
||
}
|
||
// #ifdef APP-PLUS
|
||
, {
|
||
id: 3,
|
||
title: '支付宝支付',
|
||
icon: 'icon-alipay',
|
||
is_disabled: false
|
||
}
|
||
// #endif
|
||
, {
|
||
id: 2,
|
||
title: '余额支付',
|
||
icon: 'icon-qianbao',
|
||
is_disabled: false
|
||
}
|
||
],
|
||
payInd: 0,
|
||
// #ifdef APP-PLUS
|
||
balanceInd: 2,
|
||
// #endif
|
||
// #ifndef APP-PLUS
|
||
balanceInd: 1,
|
||
// #endif
|
||
text: '',
|
||
tmplIds: [],
|
||
lockTap: false,
|
||
}
|
||
},
|
||
computed: mapState({
|
||
primaryColor: state => state.config.configInfo.primaryColor,
|
||
subColor: state => state.config.configInfo.subColor,
|
||
configInfo: state => state.config.configInfo,
|
||
userInfo: state => state.user.userInfo,
|
||
orderInfo: state => state.order.orderInfo,
|
||
}),
|
||
async onLoad() {
|
||
this.$util.showLoading()
|
||
this.initIndex()
|
||
},
|
||
methods: {
|
||
...mapActions(['getUserInfo']),
|
||
...mapMutations(['updateOrderItem']),
|
||
async initIndex(flag = false) {
|
||
await this.getUserInfo()
|
||
let {
|
||
balance
|
||
} = this.userInfo
|
||
let {
|
||
pay_price,
|
||
page_type,
|
||
send_type = 0
|
||
} = this.orderInfo
|
||
|
||
let is_disabled = balance * 1 < pay_price * 1
|
||
let {
|
||
balanceInd
|
||
} = this
|
||
this.payList[balanceInd].is_disabled = is_disabled
|
||
if (pay_price * 1 == 0) {
|
||
this.payList[0].is_disabled = true
|
||
// #ifdef APP-PLUS
|
||
this.payList[1].is_disabled = true
|
||
// #endif
|
||
this.payInd = balanceInd
|
||
}
|
||
|
||
let tmplIds = []
|
||
this.tmplIds = tmplIds
|
||
this.isLoad = true
|
||
this.$util.hideAll()
|
||
},
|
||
initRefresh() {
|
||
this.initIndex(true)
|
||
},
|
||
toChangeItem(index) {
|
||
if (index === 2 && this.payList[index].is_disabled) return
|
||
this.payInd = index
|
||
},
|
||
async toPay() {
|
||
// #ifdef MP-WEIXIN
|
||
let that = this;
|
||
let {
|
||
tmplIds
|
||
} = that
|
||
if (tmplIds && tmplIds.length > 0) {
|
||
uni.requestSubscribeMessage({
|
||
tmplIds,
|
||
complete(res) {
|
||
that.toConfirmPay()
|
||
console.log(res, "complete requestSubscribeMessage");
|
||
}
|
||
})
|
||
} else {
|
||
that.toConfirmPay()
|
||
}
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
this.toConfirmPay()
|
||
// #endif
|
||
},
|
||
async toConfirmPay() {
|
||
let {
|
||
payList,
|
||
payInd,
|
||
text = ''
|
||
} = this
|
||
let orderInfo = this.$util.deepCopy(this.orderInfo)
|
||
let {
|
||
page_type,
|
||
} = orderInfo
|
||
let {
|
||
id: pay_model
|
||
} = payList[payInd]
|
||
let add_params = page_type == 'breed' ? {
|
||
pay_model,
|
||
text
|
||
} : {
|
||
pay_model
|
||
}
|
||
let param = Object.assign({}, orderInfo, add_params);
|
||
delete param.pay_price
|
||
delete param.page_type
|
||
if (this.lockTap) return
|
||
this.lockTap = true
|
||
this.$util.showLoading()
|
||
try {
|
||
let url = ['breed', 'claim_send', 'land_send'].includes(page_type) ? 1 : ''
|
||
let openType = ['breed', 'claim_send', 'land_send'].includes(page_type) ? 'navigateBack' : ''
|
||
let method_key = ['breed', 'claim_send'].includes(page_type) ? 'claim' : 'land'
|
||
let method = {
|
||
breed: 'breedOrder',
|
||
claim_send: 'sendOrderApply',
|
||
land_send: 'sendOrderApply',
|
||
}
|
||
let {
|
||
pay_list
|
||
} = await this.$api[method_key][method[page_type]](param)
|
||
this.$util.hideAll()
|
||
if (pay_list) {
|
||
try {
|
||
if (param.pay_model == 3) {
|
||
pay_list = {
|
||
orderInfo: pay_list,
|
||
provider: 'alipay'
|
||
}
|
||
}
|
||
await this.$util.pay(pay_list)
|
||
this.$util.showToast({
|
||
title: `支付成功`
|
||
})
|
||
if (page_type == 'breed') {
|
||
this.updateOrderItem({
|
||
key: 'haveOperItem',
|
||
val: true
|
||
})
|
||
}
|
||
setTimeout(() => {
|
||
this.$util.back()
|
||
console.log(url, openType, "===========")
|
||
this.$util.goUrl({
|
||
url,
|
||
openType
|
||
})
|
||
}, 1000)
|
||
this.lockTap = false
|
||
return
|
||
} catch (e) {
|
||
this.$util.showToast({
|
||
title: `支付失败`
|
||
})
|
||
setTimeout(() => {
|
||
this.$util.back()
|
||
this.$util.goUrl({
|
||
url,
|
||
openType
|
||
})
|
||
}, 1000)
|
||
this.lockTap = false
|
||
return
|
||
}
|
||
}
|
||
this.$util.showToast({
|
||
title: `支付成功`
|
||
})
|
||
if (page_type == 'breed') {
|
||
this.updateOrderItem({
|
||
key: 'haveOperItem',
|
||
val: true
|
||
})
|
||
}
|
||
setTimeout(() => {
|
||
console.log(url, openType, "=========333==")
|
||
this.$util.back()
|
||
this.$util.goUrl({
|
||
url,
|
||
openType
|
||
})
|
||
}, 1000)
|
||
} catch (e) {
|
||
setTimeout(() => {
|
||
this.lockTap = false
|
||
this.$util.hideAll()
|
||
}, 2000)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
.mine-pay {
|
||
.item-text {
|
||
width: 150rpx;
|
||
}
|
||
|
||
.pay-item {
|
||
.iconfont {
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
|
||
.pay-icon {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.pay-btn {
|
||
width: 622rpx;
|
||
height: 94rpx;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
</style>
|