447 lines
11 KiB
Vue
447 lines
11 KiB
Vue
<template>
|
||
<view class="shop-confirm-page">
|
||
<HeaderCom></HeaderCom>
|
||
<view class="main">
|
||
<view class="address">
|
||
<view class="detail" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
|
||
<view class="info">
|
||
<view class="name">新建收货地址，让快递到家~</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail" @click="selectAddress" v-else>
|
||
<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>
|
||
<image src="" mode="aspectFit" class="edit-icon"></image>
|
||
</view>
|
||
<view class="shop">
|
||
<view class="shop-main">
|
||
<view class="img">
|
||
<image :src="previewData.productCoverResource.url" class="shop-img" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="detail">
|
||
<view class="name">{{previewData.productName}}</view>
|
||
<view class="point">
|
||
<view class="point-num">{{previewData.price.sale}}</view>
|
||
<view class="num">X{{previewData.quantity}}</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"><text>{{previewData.points}} 积分</text><text style="margin-left: 10rpx;" v-if="previewData.deliveryFee > 0">{{previewData.deliveryFee}} 代币</text></view>
|
||
<view class="btn" @click="confirmPay">立即支付</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import { userAddress,userInfo } from '@/API/user.js'
|
||
import { orderPreview,channelGetApi,createShopOrder } from '@/API/order.js'
|
||
import { productDetail } from '@/API/shop.js'
|
||
import { orderPaidApi } from '@/API/index.js'
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
id:"",
|
||
payList:[
|
||
// {label:"繁豆支付",type:1,visible:true},
|
||
// {label:"现金支付",type:2,visible:false},
|
||
],//支付方式
|
||
quantity:0,
|
||
detailData:{},
|
||
totalPrice:0,//实付金额 需加上15的运费
|
||
address:{},//收货地址
|
||
payIndex:0,
|
||
previewData:{
|
||
price:{},
|
||
productCoverResource:{},
|
||
methods:[]
|
||
},//订单预览
|
||
no:"",
|
||
orderId:'',
|
||
paidWith:"",
|
||
payType:'',
|
||
infoDetail:{},
|
||
timer:null
|
||
}
|
||
},
|
||
components:{HeaderCom},
|
||
onShow() {
|
||
|
||
// if(!uni.getStorageSync('address')){
|
||
// this.getAddress()
|
||
// console.log("bb")
|
||
// }else{
|
||
// this.address = JSON.parse(uni.getStorageSync('address'))
|
||
// this.getDetail()
|
||
// this.getOrderPreview()
|
||
// this.getUserInfo()
|
||
// }
|
||
|
||
},
|
||
onLoad(opation) {
|
||
this.id = opation.id
|
||
this.quantity = opation.quantity
|
||
if(opation.no){
|
||
this.no = opation.no
|
||
this.orderId = opation.orderId
|
||
}
|
||
this.getAddress()
|
||
uni.$on('backAddressParams', params => {
|
||
if(params.id){
|
||
this.address = params
|
||
this.getOrderPreview()
|
||
}
|
||
});
|
||
// this.getDetail()
|
||
// this.getOrderPreview()
|
||
// this.getUserInfo()
|
||
// this.getAddress()
|
||
// this.getDetail()
|
||
// this.getOrderPreview()
|
||
// this.getUserInfo()
|
||
},
|
||
methods: {
|
||
goBack(){
|
||
uni.navigateBack()
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo(){
|
||
userInfo().then(res => {
|
||
if(res.code === 200){
|
||
this.infoDetail = res.data
|
||
|
||
}
|
||
})
|
||
},
|
||
// 订单预览
|
||
getOrderPreview(){
|
||
uni.showLoading()
|
||
orderPreview({productId:this.id,quantity:this.quantity,userAddressId:this.address.id ?this.address.id : ''}).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)
|
||
}
|
||
})
|
||
},
|
||
// 获取详情
|
||
getDetail(){
|
||
uni.showLoading()
|
||
productDetail(this.id).then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
this.detailData = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 选择地址
|
||
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.getDetail()
|
||
this.getOrderPreview()
|
||
this.getUserInfo()
|
||
}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 = {
|
||
productId: this.id,
|
||
userAddressId: this.address.id,
|
||
// method: this.payType,
|
||
method:'POINTS',
|
||
methodCarriage:'COIN',
|
||
quantity:this.quantity
|
||
}
|
||
uni.showLoading()
|
||
createShopOrder(data).then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
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}&price=${this.previewData.deliveryFee}&point=${this.previewData.points}&payType=${this.payType}&productName=${this.previewData.productName}&quantity=${this.previewData.quantity}`
|
||
})
|
||
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: 16rpx;
|
||
padding-right: 32rpx;
|
||
.shop-main{
|
||
display: flex;
|
||
align-items: center;
|
||
.img{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
background-image: url('@/static/new/box-shop.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
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> |