594 lines
15 KiB
Vue
594 lines
15 KiB
Vue
<!-- 确认订单 -->
|
||
<template>
|
||
<view class="confirm-order">
|
||
<view class="nav" :style="{'padding-top': statusBarHeight}">
|
||
<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
|
||
<view class="nav-title">提交订单</view>
|
||
<view class="nav-back"></view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="main">
|
||
<view class="address" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
|
||
<view class="address-detail">
|
||
<view class="address-header">
|
||
<view class="address-info">
|
||
<view class="user-info">新建收货地址，让快递到家~</view>
|
||
</view>
|
||
<view class="address-edit">
|
||
创建地址
|
||
<image src="@/static/index/go.png" mode="" class="edit-img"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="address" @click="selectAddress" v-if="JSON.stringify(address) !== '{}'">
|
||
<image src="@/static/index/ad.png" mode="" class="address-img"></image>
|
||
<view class="address-detail">
|
||
<view class="address-header">
|
||
<view class="address-info">
|
||
<view class="user-info">{{address.receiver}}</view>
|
||
<view class="info-phone">{{address.phone}}</view>
|
||
</view>
|
||
<view class="address-edit">
|
||
修改地址
|
||
<image src="@/static/index/go.png" mode="" class="edit-img"></image>
|
||
</view>
|
||
</view>
|
||
<view class="address-all">地址：{{address.province}} {{address.city}} {{address.area}} {{address.address}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="shop">
|
||
<view class="shop-detail">
|
||
<image class="shop-img" :src="previewData.productCoverResource.url" mode=""></image>
|
||
<view class="shop-info">
|
||
<view class="shop-name">{{previewData.productName}}</view>
|
||
<view class="shop-gk">
|
||
<view class="shop-price">
|
||
<view class="shop-symbol" style="display: inline-block;">¥</view>
|
||
{{previewData.price.sale}}
|
||
</view>
|
||
<view>x{{previewData.quantity}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- <view class="sundry">
|
||
<view class="sundry-item">
|
||
<view class="title">运费</view>
|
||
<view class="value">¥0</view>
|
||
</view>
|
||
<view class="sundry-item">
|
||
<view class="title">优惠券</view>
|
||
<view class="coupon">
|
||
<view class="coupon-price">- ¥8</view>
|
||
<view class="coupon-num">3张可用</view>
|
||
<image src="@/static/index/hb-g.png" mode="" class="coupon-arr"></image>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="pay">
|
||
<view class="pay-item" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
|
||
<view class="item-name">
|
||
<view style="width: 35rpx;display: flex;align-items: center;margin-right: 10rpx;">
|
||
<image :src="item.img" :style="{width:item.width,height:item.height}" class="pay-img" mode="" v-if="item.img"></image>
|
||
<view :style="{width:item.width,height:item.height}"v-else></view>
|
||
</view>
|
||
{{item.label}}
|
||
</view>
|
||
<image src="@/static/index/g.png" mode="" class="item-img" v-if="item.visible"></image>
|
||
<view class="item-img-view" v-else></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="money" v-if="payType != 'NONE'">
|
||
<view class="money-item" style="margin-bottom: 32rpx;">
|
||
<view class="money-item-title">
|
||
配送服务：
|
||
</view>
|
||
<view class="money-price">¥ {{previewData.deliveryFee}}</view>
|
||
</view>
|
||
<view class="money-item" v-if="payType === 'ALIPAY' || payType === 'WECHAT'">
|
||
<view class="money-item-title">
|
||
实付金额：
|
||
</view>
|
||
<view class="money-price">¥ {{previewData.totalAmount}}</view>
|
||
</view>
|
||
<view class="money-item" v-if="payType === 'POINTS'">
|
||
<view class="money-item-title">
|
||
实付积分：
|
||
</view>
|
||
<view class="money-clover">
|
||
<image src="@/static/mine/jf.png" mode="" class="clover-img"></image>
|
||
{{detailData.mallPoint}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="footer">
|
||
<view class="submit" :class="{'submit-forbid':(payType === 'POINTS' && detailData.mallPoint > infoDetail.points) || previewData.methods.length === 0}" @click="confirmPay">{{(payType === 'POINTS' && detailData.mallPoint > infoDetail.points) ? '繁豆不足' : '确认支付'}}</view>
|
||
</view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/order/confirm"></page-popup>
|
||
</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'
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
id:"",
|
||
statusBarHeight,
|
||
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
|
||
}
|
||
},
|
||
onShow() {
|
||
try{
|
||
this.address = JSON.parse(uni.getStorageSync('address'))
|
||
}catch(e){
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
onLoad(opation) {
|
||
this.id = opation.id
|
||
this.quantity = opation.quantity
|
||
if(opation.no){
|
||
this.no = opation.no
|
||
this.orderId = opation.orderId
|
||
}
|
||
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}).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
|
||
}
|
||
})
|
||
|
||
}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
|
||
}
|
||
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.totalAmount}&point=${this.detailData.mallPoint}&payType=${this.payType}`
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
.confirm-order{
|
||
.nav{
|
||
z-index: 100;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 23rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
.nav-back{
|
||
width: 19rpx;
|
||
height: 34rpx;
|
||
}
|
||
.nav-title{
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.main{
|
||
height: 100vh;
|
||
padding: 130rpx 22rpx 150rpx 22rpx;
|
||
padding-top: 130rpx;
|
||
padding-bottom: 150rpx;
|
||
box-sizing: border-box;
|
||
.address{
|
||
width: 706rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
// margin-left: 22rpx;
|
||
padding: 35rpx 31rpx 35rpx 31rpx;
|
||
display: flex;
|
||
.address-img{
|
||
width: 25rpx;
|
||
height: 30rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
.address-detail{
|
||
margin-left: 15rpx;
|
||
.address-header{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 600rpx;
|
||
.address-info{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
.user-info{}
|
||
.info-phone{
|
||
margin-left: 26rpx;
|
||
}
|
||
}
|
||
.address-edit{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
|
||
.edit-img{
|
||
margin-left: 9rpx;
|
||
width: 8rpx;
|
||
height: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
.address-all{
|
||
margin-top: 14rpx;
|
||
font-size: 20rpx;
|
||
color: #888888;
|
||
}
|
||
}
|
||
}
|
||
.shop{
|
||
margin-top: 18rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 19rpx 22rpx 24rpx 12rpx;
|
||
.shop-detail{
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 2rpx solid #ECECEC;
|
||
padding: 24rpx 24rpx 36rpx 20rpx;
|
||
.shop-img{
|
||
width: 146rpx;
|
||
height: 146rpx;
|
||
border-radius: 10rpx;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: 50%;
|
||
margin-right: 22rpx;
|
||
}
|
||
.shop-info{
|
||
.shop-name{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
width: 455rpx;
|
||
height: 78rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
.shop-gk{
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
.shop-price{
|
||
// display: flex;
|
||
// align-items: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #F04236;
|
||
.shop-symbol{
|
||
// font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.sundry{
|
||
border-bottom: 1px solid #EEEEEE;
|
||
padding-bottom: 26rpx;
|
||
.sundry-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
padding: 26rpx 11rpx 0 11rpx;
|
||
.title{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.value{
|
||
font-size: 28rpx;
|
||
color: #888888;
|
||
}
|
||
.coupon{
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.coupon-price{
|
||
font-size: 28rpx;
|
||
color: #EF4235;
|
||
}
|
||
.coupon-num{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
background: #F04437;
|
||
border-radius: 8rpx;
|
||
padding: 6rpx 12rpx;
|
||
}
|
||
|
||
.coupon-arr {
|
||
margin-left: 13rpx;
|
||
width: 12rpx;
|
||
height: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pay{
|
||
.pay-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 24rpx;
|
||
.item-name{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 15rpx;
|
||
.pay-img{
|
||
|
||
}
|
||
}
|
||
.item-img{
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
.item-img-view{
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #888888;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.money{
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
padding: 18rpx 24rpx;
|
||
margin-top: 20rpx;
|
||
.money-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.money-item-title{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.money-price{
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
text-align: right;
|
||
}
|
||
.money-clover{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
.clover-img{
|
||
width: 30rpx;
|
||
height: 31rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer{
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.submit{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 706rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.submit-forbid{
|
||
color: #FFFFFF;
|
||
// background-color: #BAF2F1;
|
||
}
|
||
}
|
||
}
|
||
</style>
|