352 lines
7.8 KiB
Vue
352 lines
7.8 KiB
Vue
<template>
|
||
<view v-if="loding">
|
||
<!-- 订单信息 -->
|
||
<view class="order-list" v-for="(mall, mallIndex) in detail" :key="mallIndex">
|
||
<view class="shop-name">
|
||
<image class="logo" :src="mall.shop.cover" mode="aspectFill"></image>
|
||
{{mall.shop.name || '-'}}
|
||
</view>
|
||
<view class="item" v-for="(item, itemsIndex) in mall.items" :key="itemsIndex">
|
||
<image class="cover" :src="item.cover" mode="aspectFill"></image>
|
||
<view class="title">{{item.title}}</view>
|
||
<view class="tool">
|
||
<view class="price"><text>￥</text>{{item.price}}</view>
|
||
<uni-number-box class="number" :min="item.number" :value="qty" @change="numberChange"></uni-number-box>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="amount">
|
||
<view class="item">
|
||
<label>订单金额</label>
|
||
<view class="price nowrap">{{amount}}</view>
|
||
</view>
|
||
<block v-if="coupons.length > 0">
|
||
<view class="item">
|
||
<label>使用优惠券</label>
|
||
<picker mode="selector" :range="coupons" range-key="title" :value="couponIndex" @change="couponsChange">
|
||
<view class="picker-text nowrap">
|
||
{{couponIndex == 0 ? '选择优惠券' : coupons[couponIndex].title}}
|
||
<uni-icons type="arrowright" color="#ddd"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="item">
|
||
<label>优惠金额</label>
|
||
<view class="price nowrap">-{{couponPrice}}</view>
|
||
</view>
|
||
</block>
|
||
<view class="item">
|
||
<label>实际支付金额</label>
|
||
<view class="price nowrap">{{total}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 支付方式 -->
|
||
<radio-group class="pay-group" @change="payType">
|
||
<view class="item">
|
||
<label>
|
||
<radio class="radio" value="eb" checked color="#c82626" />
|
||
<view class="title">易货额支付</view>
|
||
<view class="sub-title" v-if="payValue === 'eb'">可用：{{account.getEBBalance}} 冻结：{{account.getEBFrozen}}</view>
|
||
</label>
|
||
</view>
|
||
<view class="item">
|
||
<label>
|
||
<radio class="radio" value="wx" color="#c82626" />
|
||
<view class="title">微信支付</view>
|
||
</label>
|
||
</view>
|
||
</radio-group>
|
||
<!-- footer -->
|
||
<view class="footer">
|
||
<button size="default" @click="buyOrder">提交订单</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { buy, eb } from '@/apis/interfaces/order'
|
||
export default {
|
||
data() {
|
||
return {
|
||
loding : false,
|
||
detail : {},
|
||
qty : 1,
|
||
couponPrice : 0,
|
||
amount : 0,
|
||
total : 0,
|
||
coupons : [],
|
||
couponIndex : 0,
|
||
couponId : '',
|
||
account : {},
|
||
payValue : 'eb',
|
||
}
|
||
},
|
||
created(){
|
||
buy({
|
||
goods_sku_id: this.$Route.query.skuId,
|
||
qty : this.qty,
|
||
type : 1
|
||
}, 'GET').then(res=>{
|
||
this.loding = true
|
||
this.payValue = this.$Route.query.type === 1 ? 'wx' : 'eb'
|
||
this.detail = res.detail
|
||
this.couponPrice = res.coupon_price.toFixed(2)
|
||
this.amount = res.amount.toFixed(2)
|
||
this.total = res.total.toFixed(2)
|
||
this.coupons = res.coupons
|
||
this.account = res.account
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
// 获取可用优惠券
|
||
getCoupons(){
|
||
buy({
|
||
goods_sku_id : this.$Route.query.skuId,
|
||
qty : this.qty,
|
||
type : 1,
|
||
coupon_grant_id : this.couponId
|
||
}, 'GET').then(res=>{
|
||
this.couponPrice = res.coupon_price.toFixed(2)
|
||
this.amount = res.amount.toFixed(2)
|
||
this.total = res.total.toFixed(2)
|
||
this.coupons = [{
|
||
title : '不使用',
|
||
coupon_grant_id : ''
|
||
}, ...res.coupons]
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 选择优惠券
|
||
couponsChange(e){
|
||
this.couponIndex = e.detail.value
|
||
this.couponId = this.coupons[e.detail.value].coupon_grant_id
|
||
this.getCoupons()
|
||
},
|
||
// 选择支付类型
|
||
payType(e){
|
||
this.payValue = e.detail.value
|
||
},
|
||
|
||
//数量变化
|
||
numberChange(e){
|
||
this.qty = e
|
||
this.getCoupons()
|
||
},
|
||
|
||
// 提交订单
|
||
buyOrder(){
|
||
buy({
|
||
goods_sku_id : this.$Route.query.skuId,
|
||
qty : this.qty,
|
||
coupon_grant_id : this.couponId,
|
||
type : 1,
|
||
remark : 'app订单，易货产品',
|
||
channel : 'app'
|
||
}, 'POST').then(res=>{
|
||
console.log(res)
|
||
switch (this.payValue){
|
||
case 'eb':
|
||
this.ebPay(res.order_no)
|
||
break;
|
||
case 'wx':
|
||
this.wxPay(res.order_no)
|
||
break;
|
||
default:
|
||
uni.showToast({
|
||
title: '支付方式错误',
|
||
icon : 'none'
|
||
})
|
||
break;
|
||
}
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 微信pay
|
||
wxPay(orderNo){
|
||
uni.showToast({
|
||
title: '微信支付' + orderNo,
|
||
icon : 'none'
|
||
})
|
||
},
|
||
// 易币支付
|
||
ebPay(orderNo){
|
||
eb(orderNo).then(res => {
|
||
this.$Router.replace({
|
||
name : 'payResults',
|
||
params : {
|
||
index: 1,
|
||
price: this.total,
|
||
type : 'eb',
|
||
total: '可在我的资产下我的权证中查看购买的数字权证'
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showModal({
|
||
title : '支付提示',
|
||
content : err.message,
|
||
showCancel : false,
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 商品统计
|
||
.amount{
|
||
background: white;
|
||
margin: $margin;
|
||
border-radius: $radius/2;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
.item{
|
||
position: relative;
|
||
border-bottom: solid 1rpx $border-color;
|
||
padding-left: 160rpx;
|
||
line-height: 90rpx;
|
||
text-align: right;
|
||
&:last-child{
|
||
border-bottom: none;
|
||
}
|
||
label{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
font-size: $title-size-lg;
|
||
}
|
||
.number-box{
|
||
display: inline-block;
|
||
line-height: 90rpx;
|
||
}
|
||
.price{
|
||
color: $text-price;
|
||
}
|
||
.picker-text{
|
||
font-size: $title-size-lg;
|
||
color: $text-gray;
|
||
}
|
||
}
|
||
}
|
||
// 支付方式
|
||
.pay-group{
|
||
background: white;
|
||
margin: $margin;
|
||
border-radius: $radius/2;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
.item{
|
||
position: relative;
|
||
border-bottom: solid 1rpx $border-color;
|
||
padding: ($padding - 10) 70rpx ($padding - 10) 0;
|
||
&:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.radio{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
margin-top: -25rpx;
|
||
}
|
||
.sub-title{
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
line-height: 40rpx;
|
||
}
|
||
.title{
|
||
font-size: $title-size-lg;
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
// 支付按钮
|
||
.footer{
|
||
padding: 0 $padding $padding*2;
|
||
button{
|
||
background: $text-price;
|
||
font-size: $title-size;
|
||
color: white;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-weight: bold;
|
||
border-radius: $radius/2;
|
||
&::after{
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
// 订单商品列表
|
||
.order-list{
|
||
background: white;
|
||
margin: $margin;
|
||
border-radius: $radius/2;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
.shop-name{
|
||
position: relative;
|
||
padding-bottom: $padding;
|
||
font-size: $title-size-lg;
|
||
padding-left: 68rpx;
|
||
line-height: 48rpx;
|
||
min-height: 48rpx;
|
||
color: $text-color;
|
||
.logo{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
.item{
|
||
position: relative;
|
||
padding-left: 180rpx;
|
||
padding-bottom: $padding/2;
|
||
padding-top: $padding/2;
|
||
min-height: 160rpx;
|
||
.cover{
|
||
position: absolute;
|
||
left: 0;
|
||
top: $padding/2;
|
||
height: 160rpx;
|
||
width: 160rpx;
|
||
background: #2C405A;
|
||
}
|
||
.title{
|
||
height: 110rpx;
|
||
line-height: 40rpx;
|
||
font-size: $title-size-lg;
|
||
color: $text-color;
|
||
}
|
||
.tool{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.price{
|
||
font-weight: bold;
|
||
color: $text-price;
|
||
font-size: $title-size;
|
||
line-height: 40rpx;
|
||
height: 40rpx;
|
||
text{
|
||
font-size: 80%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|