481 lines
12 KiB
Vue
481 lines
12 KiB
Vue
<template>
|
||
<view class="shop-confirm-page">
|
||
<HeaderCom></HeaderCom>
|
||
<view class="main">
|
||
<view class="address" @click="goAddress">
|
||
<view class="detail" v-if="address.id">
|
||
<view class="info">
|
||
<view class="name">{{address.receiver}}</view>
|
||
<view class="phone">{{address.phone}}</view>
|
||
</view>
|
||
<view class="address-detail">{{address.province}} {{address.city}} {{address.area}} {{address.address}}</view>
|
||
</view>
|
||
<view class="detail" v-else>
|
||
<view class="info">
|
||
<view class="name">选择地址</view>
|
||
</view>
|
||
</view>
|
||
<image src="" mode="aspectFit" class="edit-icon"></image>
|
||
</view>
|
||
<view class="shop" v-for="(item,index) in previewData.products" :key="index">
|
||
<view class="shop-main">
|
||
<view class="img">
|
||
<image :src="item.coverResource.url" class="shop-img" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="detail">
|
||
<view class="name">{{item.name}}</view>
|
||
<view class="point">
|
||
<view class="point-num">{{item.price.sale}}</view>
|
||
<view class="num">X1</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="other">
|
||
<view class="item">
|
||
<view class="label">商品数量</view>
|
||
<view class="value">{{previewData.quantity}}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">邮费</view>
|
||
<view class="value">{{previewData.deliveryFee}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<!-- <view class="price">¥ {{previewData.totalAmount}}</view> -->
|
||
<view class="price">运费：{{previewData.totalAmount}}代币</view>
|
||
<view class="btn" @click="confirmPay">立即支付</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import { mathMul,mathAdd } from '@/utils/mathUtils.js'
|
||
import { userAddress,userInfo } from '@/API/user.js'
|
||
import { orderPreview,channelGetApi,createShopOrder } from '@/API/order.js'
|
||
import { productDetail } from '@/API/shop.js'
|
||
import { boxDeliveryPreviewApi,boxDeliveryApi,orderPaidApi,deliveryReviewBatchApi,deliveryBatchApi } from '@/API/index.js'
|
||
import NavCom from '@/pages/components/nav.vue'
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
id:"",
|
||
statusBarHeight,
|
||
payList:[
|
||
// {label:"繁豆支付",type:1,visible:true},
|
||
// {label:"现金支付",type:2,visible:false},
|
||
],//支付方式
|
||
quantity:0,
|
||
detailData:{},
|
||
address:{},//收货地址
|
||
payIndex:0,
|
||
previewData:{
|
||
productCoverResource:{},
|
||
price:{},
|
||
methods:[],
|
||
products:[]
|
||
},//订单预览
|
||
no:"",
|
||
orderId:'',
|
||
paidWith:"",
|
||
payType:'',
|
||
infoDetail:{},
|
||
timer:null,
|
||
deliverList:[],
|
||
productName:'',
|
||
addressList:[]
|
||
}
|
||
},
|
||
components:{NavCom,HeaderCom},
|
||
onShow() {
|
||
|
||
},
|
||
onLoad(opation) {
|
||
|
||
// this.getOrderPreview()
|
||
|
||
},
|
||
mounted() {
|
||
try{
|
||
this.getAddress()
|
||
uni.$on('backAddressParams', params => {
|
||
if(params.id){
|
||
this.address = params
|
||
}
|
||
});
|
||
this.deliverList = JSON.parse(uni.getStorageSync('deliverList'))
|
||
this.getDeliveryReviewBatch()
|
||
}catch(e){
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
methods: {
|
||
goAddress(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/address?type=select`
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo(){
|
||
userInfo().then(res => {
|
||
if(res.code === 200){
|
||
this.infoDetail = res.data
|
||
|
||
}
|
||
})
|
||
},
|
||
getDeliveryReviewBatch(){
|
||
uni.showLoading()
|
||
deliveryReviewBatchApi({boxRecordIds:this.deliverList,userAddressId:this.address.id ? this.address.id : ''}).then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
this.previewData = res.data
|
||
this.quantity = this.previewData.quantity
|
||
this.productName = ''
|
||
this.previewData.products.forEach(item => {
|
||
this.productName += `${item.name}、`
|
||
})
|
||
// if(this.previewData.methods){
|
||
// this.previewData.methods.forEach(item => {
|
||
// if(item === 'ALIPAY'){
|
||
// this.payList.push({label:"支付宝支付",type:'ALIPAY',visible:false,img:'../../static/index/zfb.png',width:'30rpx',height:'30rpx'})
|
||
// }else if(item === 'WECHAT'){
|
||
// this.payList.push({label:"微信支付",type:'WECHAT',visible:false,img:'../../static/index/wx.png',width:'34rpx',height:'29rpx'})
|
||
// }else if(item === 'POINTS'){
|
||
// this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/mine/jf.png',width:'30rpx',height:'31rpx'})
|
||
// }else if(item === 'NONE'){
|
||
// this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
|
||
// }
|
||
// })
|
||
// this.payList[0].visible = true
|
||
// this.payType = this.payList[0].type
|
||
// }
|
||
// this.channelGet()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 订单预览
|
||
getOrderPreview(){
|
||
uni.showLoading()
|
||
boxDeliveryPreviewApi({boxRecordId:this.id,quantity:this.quantity}).then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
this.previewData = res.data
|
||
if(this.previewData.methods){
|
||
this.previewData.methods.forEach(item => {
|
||
if(item === 'ALIPAY'){
|
||
this.payList.push({label:"支付宝支付",type:'ALIPAY',visible:false,img:'../../static/index/zfb.png',width:'30rpx',height:'30rpx'})
|
||
}else if(item === 'WECHAT'){
|
||
this.payList.push({label:"微信支付",type:'WECHAT',visible:false,img:'../../static/index/wx.png',width:'34rpx',height:'29rpx'})
|
||
}else if(item === 'POINTS'){
|
||
this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/mine/jf.png',width:'30rpx',height:'31rpx'})
|
||
}else if(item === 'NONE'){
|
||
this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
|
||
}
|
||
})
|
||
this.payList[0].visible = true
|
||
this.payType = this.payList[0].type
|
||
}
|
||
// this.channelGet()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 获取支付通道
|
||
channelGet(){
|
||
channelGetApi({method:'NONE'}).then(res => {
|
||
if(res.code === 200){
|
||
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 选择地址
|
||
selectAddress(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/address?type=select`
|
||
})
|
||
},
|
||
// 获取地址列表
|
||
getAddress(){
|
||
uni.showLoading()
|
||
userAddress({page: 1,size: 10}).then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
res.data.content.forEach(item => {
|
||
if(item.isDefault === 1){
|
||
this.address = item
|
||
}
|
||
})
|
||
this.addressList = res.data.content
|
||
this.deliverList = JSON.parse(uni.getStorageSync('deliverList'))
|
||
this.getDeliveryReviewBatch()
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 切换支付方式
|
||
payChange(index,item){
|
||
this.payList.forEach((v, i) => {
|
||
v.visible = false;
|
||
})
|
||
this.payIndex = index;
|
||
this.payType = item.type
|
||
this.payList[index].visible = !this.payList[index].visible
|
||
},
|
||
// 确认支付
|
||
confirmPay(){
|
||
// if(this.previewData.methods.length === 0){
|
||
// return
|
||
// }
|
||
if(JSON.stringify(this.address) === '{}'){
|
||
this.$api.msg('请选择地址')
|
||
return
|
||
}
|
||
// if(this.payType === 'POINTS' && this.detailData.mallPoint > this.infoDetail.points){
|
||
// return
|
||
// }
|
||
let data = {
|
||
userAddressId:this.address.id,
|
||
boxRecordIdList:this.deliverList,
|
||
method: 'COIN'
|
||
// quantity:this.quantity,
|
||
// boxRecordId: this.id,
|
||
// userAddressId: this.address.id,
|
||
// method: this.payType
|
||
}
|
||
uni.showLoading()
|
||
deliveryBatchApi(data).then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
// orderPaidApi
|
||
this.getOrderPaid(res.data.no)
|
||
this.timer = setInterval(() => {
|
||
this.getOrderPaid(res.data.no)
|
||
},3000);
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
// boxDeliveryApi(data).then(res => {
|
||
// uni.hideLoading()
|
||
// if(res.code === 200){
|
||
// // orderPaidApi
|
||
// this.getOrderPaid(res.data.no)
|
||
// this.timer = setInterval(() => {
|
||
// this.getOrderPaid(res.data.no)
|
||
// },3000);
|
||
// }else{
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// }).catch(err => {
|
||
// uni.hideLoading()
|
||
// })
|
||
|
||
},
|
||
getOrderPaid(no){
|
||
orderPaidApi({no}).then(payResult => {
|
||
if(payResult.data){
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
|
||
uni.redirectTo({
|
||
url:`/pages/shop/paySuccess?no=${no}&type=record&quantity=${this.quantity}&productName=${this.productName}`
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-color: #F5F5F5;
|
||
}
|
||
.shop-confirm-page{
|
||
padding-top: 112rpx;
|
||
.main{
|
||
padding: 0 32rpx 24rpx 32rpx;
|
||
.address{
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
padding: 24rpx 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.detail{
|
||
.info{
|
||
display: flex;
|
||
align-items: center;
|
||
.name{
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
max-width: 250rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.phone{
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
.address-detail{
|
||
width: 520rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
.edit-icon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.shop{
|
||
margin-top: 24rpx;
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
padding-right: 32rpx;
|
||
.shop-main{
|
||
display: flex;
|
||
align-items: center;
|
||
.img{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
background-image: url('@/static/new/box-shop.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
// background: linear-gradient( 180deg, rgba(98,126,153,0) 0%, #627E99 100%), #E6EBF0;
|
||
border-radius: 8rpx 0 0 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.shop-img{
|
||
width: 142rpx;
|
||
height: 132rpx;
|
||
}
|
||
}
|
||
.detail{
|
||
margin-left: 24rpx;
|
||
.name{
|
||
width: 470rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
.point{
|
||
margin-top: 32rpx;
|
||
width: 470rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.point-num{
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
.num{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.other{
|
||
margin-top: 24rpx;
|
||
height: 192rpx;
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
.item{
|
||
height: 96rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
.label{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
.value{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 144rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
.price{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
.btn{
|
||
width: 328rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 8rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
</style> |