20261008
This commit is contained in:
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<uititle title="支付"></uititle>
|
||||
</u-sticky>
|
||||
<view class="p-30">
|
||||
<view class="card">
|
||||
<view class="text-25 text-gray pb-20 border-bottom">订单号{{ info.orderNo }}</view>
|
||||
<template v-if="info.type === 0">
|
||||
<view class="p-20 rounded border m-30 pointer address" v-if="!address" @click="showAddress">
|
||||
点击选择地址
|
||||
</view>
|
||||
<view v-else
|
||||
class="py-20 flex justify-between items-center">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view class="flex justify-start items-center">
|
||||
<text class="font-bold">{{ address.name }}</text>
|
||||
</view>
|
||||
<text>{{ address.phone }}</text>
|
||||
<text>{{ address.addressRegion.province.name }}{{
|
||||
address.addressRegion.city.name
|
||||
}}{{ address.addressRegion.area.name }}{{ address.addressDetail }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex justify-center items-center">
|
||||
<u-button type="primary" @click="showAddress" size="mini">
|
||||
变更
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="py-20 font-bold">商品详情</view>
|
||||
<view class="flex justify-start items-start my-20 text-25" v-for="(item, index) in info.goods"
|
||||
:key="index">
|
||||
<text v-if="info.type === 0">
|
||||
<u-image :src="item.goodsCover" mode="aspectFit" width="150rpx" height="150rpx" radius="15"/>
|
||||
</text>
|
||||
<template v-if="info.type === 0">
|
||||
<view class="flex flex-col justify-start items-start ">
|
||||
<text class=" font-bold text-30">{{ item.goodsName }}</text>
|
||||
<text class="mt-15 text-gray">{{ item.sku.label }}</text>
|
||||
<text class="mt-15 text-main">￥{{ item.sku.values }}</text>
|
||||
</view>
|
||||
<text class="w-15p">x{{ item.num }}</text>
|
||||
<text class="w-15p font-bold">￥{{ item.sku.values * item.num }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="flex flex-col justify-start items-start ">
|
||||
<text class=" font-bold text-30">{{ item.goodsName }}</text>
|
||||
</view>
|
||||
<text class="w-15p">x{{ item.num }}</text>
|
||||
<text class="w-15p text-main">￥{{ item.goodsPrice }}</text>
|
||||
<text class="w-15p font-bold">￥{{ item.goodsPrice * item.num }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="mt-40 font-bold text-main">您的会员等级:
|
||||
{{ getUserLevelLabel(userInfo.userLevel) }}
|
||||
{{ info.offRate !== 100 ? `,享受${info.offRate / 10}折优惠,已为您优惠${info.saveAmount}元` : '' }}
|
||||
</view>
|
||||
<view class="mt-40 flex flex-col justify-center items-center m-a">
|
||||
<text class=" mb-20"
|
||||
:class="[info.amount !== info.offAmount ? 'text-line-through text-25' : 'text-main font-bold text-30']"
|
||||
v-if="info">
|
||||
订单金额:￥{{ info.amount }}
|
||||
</text>
|
||||
<text class="text-main font-bold text-40 mb-20" v-if="info && info.offAmount && info.amount !== info.offAmount">
|
||||
优惠后金额:￥{{ info.offAmount ? parseFloat(info.offAmount).toFixed(2) : '' }}
|
||||
</text>
|
||||
<view class="border rounded flex justify-start items-center p-10 w-100p "
|
||||
@click="payType = 'alipay'"
|
||||
:class="[payType === 'alipay' ? 'border-main bg-main-light text-main' : '']">
|
||||
<u-icon name="/static/img/alipay.png" size="40rpx"/>
|
||||
<text class="text-25 ml-25">支付宝</text>
|
||||
</view>
|
||||
<view class="border rounded flex justify-start items-center p-10 w-100p my-25"
|
||||
@click="payType = 'wechat'"
|
||||
:class="[payType === 'wechat' ? 'border-main bg-main-light text-main' : '']">
|
||||
<u-icon name="/static/img/wechat-pay.png" size="40rpx"/>
|
||||
<text class="text-25 ml-25">微信支付</text>
|
||||
</view>
|
||||
<u-button type="primary" shape="circle"
|
||||
:disabled="(info.type === 0 && !address)" @click="onPay">
|
||||
立即支付
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="95%" :close-on-click-modal="false"
|
||||
@close="dialogVisible = false">
|
||||
<template v-if="dialogVisible && dialogType === 'address-list'">
|
||||
<view v-for="(item, index) in addressList" :key="index"
|
||||
class="py-20 border-bottom flex justify-between items-center">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view class="flex justify-start items-center">
|
||||
<text v-if="item.isDefault" class="default-address">默</text>
|
||||
<text class="font-bold">{{ item.name }}</text>
|
||||
</view>
|
||||
<text>{{ item.phone }}</text>
|
||||
<text>{{ item.addressRegion.province.name }}{{
|
||||
item.addressRegion.city.name
|
||||
}}{{ item.addressRegion.area.name }}{{ item.addressDetail }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex justify-center items-center flex-col">
|
||||
<u-button type="primary" @click="address = item; dialogVisible = false" size="small">
|
||||
选择
|
||||
</u-button>
|
||||
<u-button type="warning" @click="addressEdit(item)" plain size="small" class="mt-20">
|
||||
编辑
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-center mt-50">
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" type="primary"
|
||||
@click="dialogType = 'address-action'; dialogTitle = '新增地址'">
|
||||
新增地址
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" plain @click="dialogVisible = false">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="flex flex-col justify-start" v-else-if="dialogVisible && dialogType === 'address-action'">
|
||||
<el-form ref="form" label-width="100px">
|
||||
<el-form-item label="收件人姓名">
|
||||
<el-input v-model="name" placeholder="请输入收件人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="收件人手机号">
|
||||
<el-input v-model="phone" placeholder="请输入收件人手机号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="收件人地址" @click.native="doShowAddress">
|
||||
<u-input v-model="addressRegionStr" disabled suffix-icon="arrow-right"
|
||||
style="pointer-events:none"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="addressDetail" placeholder="请输入详细地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="默认地址">
|
||||
<el-switch v-model="isDefault"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<view class="flex justify-center items-center">
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" type="primary" @click="onAddressAction">保存</u-button>
|
||||
</view>
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" @click="dialogTitle = '地址列表'; dialogType = 'address-list'">取消
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
|
||||
</el-dialog>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uititle from "@/components/common/title.vue";
|
||||
import {getUserLevelLabel} from "@/util";
|
||||
import AddressSelect from "@/components/AddressSelect.vue";
|
||||
import dayjs from 'dayjs'
|
||||
import {Loading} from "element-ui";
|
||||
|
||||
const OpenSdk = require('@/util/base').default;
|
||||
|
||||
const appId = '8a81c1db8fc5238d01910b9e312d0692'
|
||||
const appKey = 'a15ceac60f5b464eb758c4fe7800ee9f'
|
||||
const sdk = new OpenSdk({
|
||||
appId,
|
||||
appKey
|
||||
})
|
||||
|
||||
export default {
|
||||
name: "pay",
|
||||
components: {AddressSelect, uititle},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
type: null,
|
||||
offRate: 100
|
||||
},
|
||||
addressIndex: [null, null, null],
|
||||
addressDetail: '',
|
||||
addressRegion: null,
|
||||
addressRegionStr: null,
|
||||
name: '',
|
||||
phone: '',
|
||||
billQRCode: null,
|
||||
checkPayInterval: null,
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
dialogType: '',
|
||||
address: null,
|
||||
addressList: [],
|
||||
selectedAddressId: null,
|
||||
isDefault: false,
|
||||
userInfo: null,
|
||||
payType: 'alipay'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserLevelLabel,
|
||||
doShowAddress() {
|
||||
this.$refs.AddressSelect.open(this.addressRegion);
|
||||
},
|
||||
regionConfirm({province, city, area}) {
|
||||
this.addressRegion = {province, city, area}
|
||||
this.addressRegionStr = `${province.name}${city.name}${area.name}`
|
||||
},
|
||||
async getInfo(resetOrderNo = false) {
|
||||
this.info = await vk.callFunction({
|
||||
url: 'client/order/kh/getInfo',
|
||||
data: {
|
||||
id: this.id,
|
||||
resetOrderNo
|
||||
}
|
||||
})
|
||||
if (this.info.name) {
|
||||
this.address = {
|
||||
name: this.info.name,
|
||||
phone: this.info.phone,
|
||||
addressDetail: this.info.addressDetail,
|
||||
addressRegion: this.info.addressRegion,
|
||||
}
|
||||
}
|
||||
if (this.info.orderStatus === -1) {
|
||||
this.$message.error('订单已取消')
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
vk.redirectTo({
|
||||
url: '/pages/shop/order?menuIndex=1',
|
||||
})
|
||||
}
|
||||
|
||||
if ([1, 4].includes(this.info.orderStatus)) {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '订单已支付成功'
|
||||
})
|
||||
setTimeout(() => {
|
||||
if ([7, 11, 10].includes(this.info.type)) {
|
||||
vk.navigateBack()
|
||||
} else if (this.info.type === 13) {
|
||||
vk.redirectTo({
|
||||
url: '/pages/public/sign?tab=signBuyLog',
|
||||
})
|
||||
} else {
|
||||
vk.redirectTo({
|
||||
url: '/pages/shop/order?menuIndex=1',
|
||||
})
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
async onPay() {
|
||||
if (this.info.type === 0) {
|
||||
if (!this.address) return this.$message({type: 'error', message: '请选择地址'})
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/updateAddress',
|
||||
data: {
|
||||
id: this.id,
|
||||
address: {
|
||||
province: this.address.addressRegion.province,
|
||||
city: this.address.addressRegion.city,
|
||||
area: this.address.addressRegion.area,
|
||||
},
|
||||
addressDetail: this.address.addressDetail,
|
||||
phone: this.address.phone,
|
||||
name: this.address.name,
|
||||
}
|
||||
})
|
||||
}
|
||||
// await vk.callFunction({
|
||||
// url: 'client/user/pub/pay',
|
||||
// data: {
|
||||
// orderNo: this.info.orderNo,
|
||||
// billStatus: 'PAID',
|
||||
// billPayment: JSON.stringify({
|
||||
// payTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
// receiptAmount: this.info.amount * 100,
|
||||
// paySeqId: 'asdasd'
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// this.checkPayInterval = setInterval(() => {
|
||||
// this.getInfo()
|
||||
// }, 1000)
|
||||
// return
|
||||
|
||||
const requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
const timestamp = dayjs().format('YYYYMMDDHHmmss')
|
||||
// 平台分账金额
|
||||
let platformAmount = 0
|
||||
const goodsList = []
|
||||
// let goodsName = this.info.goods[0].goodsName
|
||||
// goods.push({goodsName})
|
||||
// if (this.info.goods.length > 1) goodsName += `等${this.info.goods.length - 1}件商品`
|
||||
let subOrderAmount = 0
|
||||
this.info.goods.forEach((goods, index) => {
|
||||
const goodsData = {
|
||||
goodsName: goods.goodsName
|
||||
}
|
||||
if (goods.company && goods.company.merchantCode && goods.company.settleRate) {
|
||||
// subOrderAmount += parseInt((goods.company.settleRate * goods.price).toString())
|
||||
// goodsData['subOrderAmount'] = parseInt((goods.company.settleRate * goods.price).toString())
|
||||
subOrderAmount += 9
|
||||
goodsData['subOrderAmount'] = 9
|
||||
goodsData['subMerchantId'] = goods.company.merchantCode
|
||||
goodsData['merOrderId'] = this.info.orderNo + index
|
||||
}
|
||||
goodsList.push(goodsData)
|
||||
})
|
||||
if (subOrderAmount > 0) platformAmount = this.info.amount * 100 - subOrderAmount
|
||||
const queryUrl = this.payType === 'alipay' ? 'https://api-mop.chinaums.com/v1/netpay/trade/h5-pay' : ' https://api-mop.chinaums.com/v1/netpay/wxpay/h5-to-minipay'
|
||||
let returnUrl = 'https://m.jinjiuxinzg.cn/pages/shop/order'
|
||||
if (this.info.type === 13) {
|
||||
returnUrl = 'https://m.jinjiuxinzg.cn/pages/public/sign'
|
||||
} else {
|
||||
returnUrl = 'https://m.jinjiuxinzg.cn/pages/shop/order?menuIndex=1'
|
||||
}
|
||||
let attachedData = this.info.goods[0].goodsName
|
||||
if (this.info.goods.length > 1) attachedData += `等${this.info.goods.length - 1}件商品`
|
||||
let data = {
|
||||
queryUrl,
|
||||
'timestamp': timestamp,
|
||||
'nonce': 'rp84ufhfn20yneo3tp',
|
||||
'content': {
|
||||
'merOrderId': this.info.orderNo,
|
||||
'requestTimestamp': requestTimestamp,
|
||||
'mid': '898450100001680',
|
||||
'tid': 'FS7JH7XH',
|
||||
'instMid': 'H5DEFAULT',
|
||||
'totalAmount': parseFloat(this.info.offAmount * 100).toFixed(0),
|
||||
// notifyUrl: 'https://fc-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/pay_notify',
|
||||
'notifyUrl': 'https://tcb-n44byxi8bmrfrki-d4bn1c4a206d.service.tcloudbase.com/pay_notify',
|
||||
returnUrl,
|
||||
'feeRatio': 'aaa',
|
||||
'goods': goodsList,
|
||||
'merAppId': 'wxebcff8cf982b9e65',
|
||||
attachedData,
|
||||
billDesc: attachedData,
|
||||
},
|
||||
'authorization': 0,
|
||||
}
|
||||
|
||||
|
||||
const content = JSON.stringify(data.content);
|
||||
const signature = sdk.generateSignature(data)
|
||||
const Url = `${data.queryUrl}?authorization=OPEN-FORM-PARAM&appId=${appId}×tamp=${data.timestamp}&nonce=${data.nonce}&content=${encodeURIComponent(content)}&signature=${signature}`
|
||||
window.location.href = Url
|
||||
/**
|
||||
* 调用函数
|
||||
*/
|
||||
// const loadingInstance = Loading.service({fullscreen: true, text: '请求中'});
|
||||
// uni.showLoading({title: '请求中'})
|
||||
// sdk.exec(data).then(res => {
|
||||
// // this.$nextTick(() => {
|
||||
// // loadingInstance.close();
|
||||
// // });
|
||||
// // const h = this.$createElement;
|
||||
// // const result = JSON.parse(res);
|
||||
// // if (result.errCode === 'SUCCESS') {
|
||||
// // this.showQrcode = true
|
||||
// // this.billQRCode = result.billQRCode
|
||||
// // setTimeout(() => {
|
||||
// // this.checkPayInterval = setInterval(() => {
|
||||
// // this.getInfo()
|
||||
// // }, 1000)
|
||||
// // }, 3000)
|
||||
// // }
|
||||
// console.log(res)
|
||||
// }).catch(err => {
|
||||
// this.$nextTick(() => {
|
||||
// // loadingInstance.close();
|
||||
// uni.hideLoading()
|
||||
// });
|
||||
// this.$message({
|
||||
// type: 'error',
|
||||
// message: '服务器繁忙，请稍后再试或联系平台客服'
|
||||
// })
|
||||
// setTimeout(() => {
|
||||
// vk.redirectTo({
|
||||
// url: '/pages/shop/order?activeName=0&menuIndex=1',
|
||||
// })
|
||||
// }, 1500)
|
||||
// })
|
||||
},
|
||||
async onAddressAction() {
|
||||
if (!this.name) return this.$message({type: 'error', message: '请填写收件人姓名'})
|
||||
if (!this.phone) return this.$message({type: 'error', message: '请填写收件人手机号'})
|
||||
if (!this.addressDetail || !this.addressRegion.province === null) return this.$message({
|
||||
type: 'error',
|
||||
message: '请填写地址'
|
||||
})
|
||||
await vk.callFunction({
|
||||
url: 'client/userAddress/kh/addUpdate',
|
||||
data: {
|
||||
id: this.selectedAddressId ?? null,
|
||||
name: this.name,
|
||||
phone: this.phone,
|
||||
addressDetail: this.addressDetail,
|
||||
addressRegion: this.addressRegion,
|
||||
isDefault: this.isDefault
|
||||
}
|
||||
})
|
||||
this.name = ''
|
||||
this.phone = ''
|
||||
this.addressDetail = ''
|
||||
this.addressRegion = null
|
||||
this.addressIndex = [null, null, null,]
|
||||
this.dialogType = 'address-list'
|
||||
this.dialogTitle = '地址列表'
|
||||
await this.getUserAddress()
|
||||
},
|
||||
async getUserAddress() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/userAddress/kh/getList'
|
||||
})
|
||||
this.addressList = rows
|
||||
},
|
||||
showAddress() {
|
||||
this.dialogType = 'address-list'
|
||||
this.dialogTitle = '选择地址'
|
||||
this.dialogVisible = true
|
||||
},
|
||||
addressEdit(item) {
|
||||
this.selectedAddressId = item._id
|
||||
this.name = item.name
|
||||
this.phone = item.phone
|
||||
this.addressDetail = item.addressDetail
|
||||
this.addressRegion = item.addressRegion
|
||||
this.addressRegionStr = `${item.addressRegion.province.name} ${item.addressRegion.city.name} ${item.addressRegion.area.name}`
|
||||
this.dialogType = 'address-action';
|
||||
this.dialogTitle = ' 编辑地址'
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
this.id = id
|
||||
},
|
||||
onShow() {
|
||||
this.getInfo(true)
|
||||
this.getUserAddress()
|
||||
this.userInfo = vk.getStorageSync('uni_id_user_info')
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
},
|
||||
onUnload() {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user