550 lines
20 KiB
Vue
550 lines
20 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<!-- <common-header></common-header>-->
|
|
<!-- <category-bar></category-bar>-->
|
|
<view class="w-1200 m-a bg-white p-40 mt-20">
|
|
<template v-if="info">
|
|
<view class="pb-20 border-bottom flex justify-between items-center">
|
|
<text>订单号: {{ info.orderNo }}</text>
|
|
<text>下单时间: {{ info._add_time_str }}</text>
|
|
</view>
|
|
<view class="my-20">
|
|
<text class="font-bold text-35">商品详情</text>
|
|
<view class="flex justify-start items-start my-20">
|
|
<text class="w-15p" v-if="info.type === 0">封面</text>
|
|
<text class="w-40p">商品详情</text>
|
|
<text class="w-15p">数量</text>
|
|
<text class="w-15p">单价</text>
|
|
<text class="w-15p">小计</text>
|
|
</view>
|
|
<view class="flex justify-start items-start my-20" v-for="(item, index) in info.goods" :key="index">
|
|
<text class="w-15p" v-if="info.type === 0">
|
|
<image :src="item.goodsCover" mode="aspectFit" class="goods-cover"/>
|
|
</text>
|
|
<template v-if="info.type === 0">
|
|
<view class="flex flex-col justify-start items-start w-40p">
|
|
<text class=" font-bold text-35">{{ item.goodsName }}</text>
|
|
<text class="mt-15 text-gray">{{ item.sku.label }}</text>
|
|
</view>
|
|
<text class="w-15p">x{{ item.num }}</text>
|
|
<text class="w-15p text-main">￥{{ item.sku.values }}</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 w-40p">
|
|
<text class=" font-bold text-35">{{ 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>
|
|
</template>
|
|
<template v-if="info.type === 0">
|
|
<div class="p-20 rounded border m-30 pointer address" v-if="!address" @click="showAddress">
|
|
点击选择地址
|
|
</div>
|
|
<div v-else
|
|
class="py-20 flex justify-between items-center">
|
|
<div class="flex flex-col justify-start items-start">
|
|
<div class="flex justify-start items-center">
|
|
<text class="font-bold">{{ address.name }}</text>
|
|
</div>
|
|
<text>{{ address.phone }}</text>
|
|
<text v-if="address.addressRegion && address.addressRegion.province">{{
|
|
address.addressRegion.province.name
|
|
}}{{
|
|
address.addressRegion.city.name
|
|
}}{{ address.addressRegion.area.name }}{{ address.addressDetail }}
|
|
</text>
|
|
<text v-else-if="info.address.province">{{ info.address.province.name }}{{
|
|
info.address.city.name
|
|
}}{{ info.address.area.name }}{{ info.addressDetail }}
|
|
</text>
|
|
</div>
|
|
<div class="flex justify-center items-center">
|
|
<el-button type="primary" @click="showAddress">
|
|
变更
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- <view class="mt-40 font-bold text-main">您的会员等级:-->
|
|
<!-- {{ getUserLevelLabel(vk.getVuex('$user.userInfo.userLevel')) }}-->
|
|
<!-- {{ info.offRate !== 100 ? `,享受${info.offRate / 10}折优惠,已为您优惠${info.saveAmount}元` : '' }}-->
|
|
<!-- </view>-->
|
|
<div v-if="info.type === 0" class="my-20">
|
|
<p>备注和要求:</p>
|
|
<el-input v-model="remark" type="textarea"/>
|
|
</div>
|
|
<view class="mt-40 w-50p flex flex-col justify-center items-center m-a">
|
|
<text class=" mb-20"
|
|
:class="[info.amount !== info.offAmount ? 'text-line-through text-30' : 'text-main font-bold text-40']"
|
|
v-if="info">
|
|
订单金额:￥{{ info.amount }}
|
|
</text>
|
|
<text class="text-main font-bold text-40 mb-20" v-if="info && info.amount !== info.offAmount">
|
|
优惠后金额:￥{{ parseFloat(info.offAmount).toFixed(2) }}
|
|
</text>
|
|
<el-button type="primary" round
|
|
:disabled="(info.type === 0 && !address)" @click="onPay">
|
|
立即支付
|
|
</el-button>
|
|
</view>
|
|
<div class="pay-price" v-if="billQRCode">
|
|
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
|
<div class="pay-desc">微信、支付宝、云闪付扫码完成支付</div>
|
|
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
|
|
</div>
|
|
</view>
|
|
<gap height="50"/>
|
|
<common-footer></common-footer>
|
|
<right-bar></right-bar>
|
|
<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="50%" :close-on-click-modal="false"
|
|
@close="dialogVisible = false">
|
|
<template v-if="dialogVisible && dialogType === 'address-list'">
|
|
<div v-for="(item, index) in addressList" :key="index"
|
|
class="py-20 border-bottom flex justify-between items-center">
|
|
<div class="flex flex-col justify-start items-start">
|
|
<div class="flex justify-start items-center">
|
|
<text v-if="item.isDefault" class="default-address">默</text>
|
|
<text class="font-bold">{{ item.name }}</text>
|
|
</div>
|
|
<text>{{ item.phone }}</text>
|
|
<text>{{ item.addressRegion.province.name }}{{
|
|
item.addressRegion.city.name
|
|
}}{{ item.addressRegion.area.name }}{{ item.addressDetail }}
|
|
</text>
|
|
</div>
|
|
<div class="flex justify-center items-center">
|
|
<el-button type="primary" @click="address = item; dialogVisible = false" size="small">
|
|
选择
|
|
</el-button>
|
|
<el-button type="warning" @click="addressEdit(item)" plain size="small" class="mt-20">
|
|
编辑
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<el-button plain @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="dialogType = 'address-action'; dialogTitle = '新增地址'">
|
|
新增地址
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-col justify-start" v-else-if="dialogVisible && dialogType === 'address-action'">
|
|
<el-form ref="form" label-width="100px">
|
|
<el-row :gutter="10" class="mb-20">
|
|
<el-col :span="12">
|
|
<el-form-item label="收件人姓名">
|
|
<el-input v-model="name" placeholder="请输入收件人姓名"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="收件人手机号">
|
|
<el-input v-model="phone" placeholder="请输入收件人手机号"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="收件人地址">
|
|
<el-row :gutter="10">
|
|
<el-col :span="6">
|
|
<el-select v-model="addressIndex[0]" placeholder="请选择省" class="w-100p">
|
|
<el-option v-for="(item, index) in provinceData" :key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="addressIndex[1]" placeholder="请选择市" class="w-100p"
|
|
:disabled="addressIndex.length === 0">
|
|
<template v-if="addressIndex[0] !== null">
|
|
<el-option v-for="(item, index) in cityData[addressIndex[0]]" :key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="addressIndex[2]" placeholder="请选择区" class="w-100p"
|
|
:disabled="addressIndex.length === 1">
|
|
<template v-if="addressIndex[0] !== null && addressIndex[1] !== null">
|
|
<el-option v-for="(item, index) in areaData[addressIndex[0]][addressIndex[1]]"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</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>
|
|
<div class="flex justify-center items-center">
|
|
<el-button type="primary" @click="onAddressAction">保存</el-button>
|
|
<el-button @click="dialogTitle = '地址列表'; dialogType = 'address-list'">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
|
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
|
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
|
|
import dayjs from "dayjs";
|
|
import {Loading} from "element-ui";
|
|
import {getUserLevelLabel} from "../../../util";
|
|
|
|
const OpenSdk = require('../../user/lib/base').default;
|
|
|
|
const sdk = new OpenSdk({
|
|
// appId: '10037e6f6823b20801682b6a5e5a0006',
|
|
// appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
|
// 正式
|
|
appId: '8a81c1db8fc5238d01910b9e312d0692',
|
|
appKey: 'a15ceac60f5b464eb758c4fe7800ee9f'
|
|
// 测试分账
|
|
// appId: 'f0ec96ad2c3848b5b810e7aadf369e2f',
|
|
// appKey: '775481e2556e4564985f5439a5e6a277'
|
|
})
|
|
|
|
// const mid = '8984501521190CF'
|
|
// const tid = '20713432'
|
|
const mid = '898450100002303'
|
|
const tid = 'G5SBN2XJ'
|
|
// const mid = '898310060514001'
|
|
// const tid = '00000001'
|
|
|
|
export default {
|
|
name: "order",
|
|
data() {
|
|
return {
|
|
id: null,
|
|
info: {
|
|
type: null,
|
|
offRate: 100
|
|
},
|
|
provinceData: provinces,
|
|
cityData: citys,
|
|
areaData: areas,
|
|
addressIndex: [null, null, null],
|
|
addressDetail: '',
|
|
name: '',
|
|
phone: '',
|
|
billQRCode: null,
|
|
checkPayInterval: null,
|
|
dialogVisible: false,
|
|
dialogTitle: '',
|
|
dialogType: '',
|
|
address: null,
|
|
addressList: [],
|
|
selectedAddressId: null,
|
|
isDefault: false,
|
|
remark: ''
|
|
}
|
|
},
|
|
methods: {
|
|
getUserLevelLabel,
|
|
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: {
|
|
province: this.info.address.province,
|
|
city: this.info.address.city,
|
|
area: this.info.address.area,
|
|
},
|
|
}
|
|
}
|
|
if (this.info.orderStatus === -1) {
|
|
this.$message.error('订单已取消')
|
|
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
|
vk.redirectTo({
|
|
url: '/pages/order/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].includes(this.info.type)) {
|
|
vk.navigateBack()
|
|
} else if (this.info.type === 13) {
|
|
vk.redirectTo({
|
|
url: '/pages/contract/index?tab=sign',
|
|
})
|
|
} else if (this.info.type === 10) {
|
|
vk.redirectTo({
|
|
url: '/pages/index/old/release',
|
|
})
|
|
} else {
|
|
vk.redirectTo({
|
|
url: '/pages/order/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,
|
|
remark: this.remark,
|
|
}
|
|
})
|
|
}
|
|
// 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.offAmount * 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.offAmount * 100 - subOrderAmount
|
|
// let data = {
|
|
// queryUrl: 'https://test-api-open.chinaums.com/v1/inip/upsp/shop/csb/get-qrcode',
|
|
// sysSource: 'OPT',
|
|
// vaMchntNo: mid,
|
|
// vaTermNo: tid,
|
|
// timestamp,
|
|
// nonce: 'rp84ufhfn20yneo3tp',
|
|
// billNo: this.info.orderNo,
|
|
// totalAmount: 10,
|
|
// notifyUrl: 'https://www.jinjiuxinzg.cn/pay_notify',
|
|
// vaFld:
|
|
// }
|
|
let attachedData = this.info.goods[0].goodsName
|
|
if (this.info.goods.length > 1) attachedData += `等${this.info.goods.length - 1}件商品`
|
|
let data = {
|
|
queryUrl: 'https://api-mop.chinaums.com/v1/netpay/bills/get-qrcode',
|
|
timestamp,
|
|
nonce: 'rp84ufhfn20yneo3tp',
|
|
content: {
|
|
billNo: this.info.orderNo,
|
|
requestTimestamp,
|
|
mid,
|
|
tid,
|
|
instMid: 'QRPAYDEFAULT',
|
|
totalAmount: parseInt(this.info.offAmount * 100).toFixed(0),
|
|
notifyUrl: 'https://tcb-n44byxi8bmrfrki-d4bn1c4a206d.service.tcloudbase.com/pay_notify',
|
|
// notifyUrl: 'https://www.jinjiuxinzg.cn/pay_notify',
|
|
goods: goodsList,
|
|
attachedData,
|
|
billDesc: attachedData,
|
|
}
|
|
}
|
|
if (platformAmount > 0) {
|
|
data['divisionFlag'] = true
|
|
data['platformAmount'] = platformAmount
|
|
}
|
|
console.log(data)
|
|
/**
|
|
* 调用函数
|
|
*/
|
|
const loadingInstance = Loading.service({fullscreen: true, text: '请求中'});
|
|
|
|
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)
|
|
}
|
|
}).catch(err => {
|
|
this.$nextTick(() => {
|
|
loadingInstance.close();
|
|
});
|
|
this.$message({
|
|
type: 'error',
|
|
message: '服务器繁忙，请稍后再试或联系平台客服'
|
|
})
|
|
setTimeout(() => {
|
|
vk.redirectTo({
|
|
url: '/pages/order/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.addressIndex[2] === null) return this.$message({
|
|
type: 'error',
|
|
message: '请填写地址'
|
|
})
|
|
const province = this.provinceData[this.addressIndex[0]]
|
|
const city = this.cityData[this.addressIndex[0]][this.addressIndex[1]]
|
|
const area = this.areaData[this.addressIndex[0]][this.addressIndex[1]][this.addressIndex[2]]
|
|
this.addressRegion = {
|
|
province: {code: province.code, name: province.name},
|
|
city: {code: city.code, name: city.name},
|
|
area: {code: area.code, name: area.name},
|
|
}
|
|
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.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.addressIndex[0] = this.provinceData.findIndex(i => i.code === item.addressRegion.province.code)
|
|
this.addressIndex[1] = this.cityData[this.addressIndex[0]].findIndex(i => i.code === item.addressRegion.city.code)
|
|
this.addressIndex[2] = this.areaData[this.addressIndex[0]][this.addressIndex[1]].findIndex(i => i.code === item.addressRegion.area.code)
|
|
this.dialogType = 'address-action';
|
|
this.dialogTitle = ' 编辑地址'
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options && options.id) {
|
|
this.id = options.id
|
|
this.getInfo(true)
|
|
this.getUserAddress()
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
|
},
|
|
onUnload() {
|
|
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.goods-cover {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
|
|
.pay-price {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pay-desc {
|
|
font-size: 16px;
|
|
line-height: 2em;
|
|
}
|
|
|
|
.address:hover {
|
|
border: 1px solid #a92924;
|
|
background-color: #f1c7c7;
|
|
}
|
|
|
|
.default-address {
|
|
background-color: #a92924;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 5px;
|
|
padding: 2px;
|
|
}
|
|
</style> |