688 lines
16 KiB
Vue
688 lines
16 KiB
Vue
<template>
|
||
<view class="ConfirmOrder">
|
||
<view class="goods-info1">
|
||
<view class="top">
|
||
<view class="company">
|
||
<image :src="shop.cover" mode="aspectFill" />
|
||
<view class="name">{{shop.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods-info">
|
||
<image class="goods-img" :src="info.cover" mode="aspectFill" />
|
||
<view class="goods">
|
||
<view class="name">
|
||
<view class="name1 ellipsis-2">{{info.title}}</view> <span>￥{{info.price}}</span>
|
||
</view>
|
||
<!-- <view class="sku">均码规格/件<span>x {{info.qty}}</span> </view> -->
|
||
<view class="sku">
|
||
<span>数量</span>
|
||
<span>
|
||
<u-number-box v-model="params.qty" :min='1' :max='1000' @change='numberBoxChange' />
|
||
</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="goods-type">支付方式<span>在线支付</span></view> -->
|
||
<view class="goods-type" @click="showCouponList = true">优惠券
|
||
<span>{{coupon_grant_id!==''?'已优惠 - ￥'+coupon_price:'选择优惠券'}}
|
||
<u-icon name="arrow-right" color="#666" size="24" />
|
||
</span>
|
||
</view>
|
||
<!-- <view class="goods-type" style="border-top: solid 20rpx #f7f7f7;">创建时间<span>2021-11-20 13:00:15</span></view> -->
|
||
<view class="goods-type">商品总价 <span>￥{{amount}}</span></view>
|
||
<view class="goods-type" v-if="coupon_price>0">优惠<span> - ￥{{coupon_price}}</span></view>
|
||
<!-- <view class="goods-type">运费 <span>免邮</span></view> -->
|
||
<view class="goods-type">
|
||
<u-input class="order-content" type="textarea" v-model="remark" :clearable='false' :border="true"
|
||
:auto-height="true" placeholder="请填写订单备注" />
|
||
</view>
|
||
<view class="pay-select">请选择支付方式</view>
|
||
<view class="pay-select-item" @click="selectPay('2')">
|
||
<view class="pay-left">
|
||
<u-icon class="pay-icon wx-icon" name="weixin-fill" color="#fff" size="40"></u-icon>
|
||
<view class="pay-wx-title">
|
||
微信支付
|
||
<span>推荐微信用户使用</span>
|
||
</view>
|
||
</view>
|
||
<u-icon v-if="selectTypeId!== '2'" name="checkmark-circle" color="#f7f7f7" size="50"></u-icon>
|
||
<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
|
||
</view>
|
||
<view class="pay-select-item" @click="selectPay('3')">
|
||
<view class="pay-left">
|
||
<u-icon class="pay-icon al-icon" name="zhifubao" color="#fff" size="40"></u-icon>
|
||
<view class="pay-wx-title">
|
||
支付宝支付
|
||
<span>推荐支付宝用户使用</span>
|
||
</view>
|
||
</view>
|
||
<u-icon v-if="selectTypeId!== '3'" name="checkmark-circle" color="#f7f7f7" size="50"></u-icon>
|
||
<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- 订单 -->
|
||
<view class="actions">
|
||
<view class="title">
|
||
实付金额：<span class="money">￥{{total}}</span>
|
||
</view>
|
||
<view @click="order" class="nowPay">提交订单</view>
|
||
</view>
|
||
|
||
<!-- 优惠券弹窗 -->
|
||
<u-popup v-model="showCouponList" mode="bottom" border-radius="14">
|
||
<scroll-view scroll-y="true" style="height: 1000rpx;" class="scrollView">
|
||
<view class="coupon-title">可用优惠券列表</view>
|
||
<view class="coupon-list-item" v-for="(item,index) in list" :key="index" v-if="list.length>0">
|
||
<u-icon v-if="coupon_grant_id!== item.coupon_grant_id" name="checkmark-circle" color="#cacaca"
|
||
size="50">
|
||
</u-icon>
|
||
<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
|
||
<couponTemplate style="flex: 1;" :item="{...item}" :showUse='false' />
|
||
<!-- 遮挡层用户控制点击事件 -->
|
||
<view class="coupon-list-item" @click="selectCoupon(item)"></view>
|
||
</view>
|
||
<!-- 没有优惠券列表 -->
|
||
<no-list v-if="list.length === 0" name='no-counpon' txt="没有任何可用券哦" />
|
||
</scroll-view>
|
||
</u-popup>
|
||
<!-- <u-toast ref="uToast" /> -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import couponTemplate from "@/components/coupon-template/coupon-template-2"
|
||
import {
|
||
mallBuyGoods
|
||
} from '@/apis/interfaces/goods'
|
||
import {
|
||
wxPay,
|
||
aliPay,
|
||
ebPay
|
||
} from '@/apis/interfaces/order'
|
||
export default {
|
||
name: 'OrderInfo',
|
||
components: {
|
||
couponTemplate
|
||
},
|
||
data() {
|
||
return {
|
||
// box: {
|
||
// min: 1,
|
||
// max: 100
|
||
// },
|
||
amount: 0,
|
||
account: {},
|
||
total: 0,
|
||
shop: {}, // 店铺信息
|
||
info: {}, // 商品详情
|
||
showCouponList: false, // 默认false不显示优惠券弹窗列表
|
||
coupon_grant_id: '', // 默认没有选择任何一个优惠券
|
||
list: [], // 优惠券列表
|
||
params: {}, // 上个页面携带过来的参数
|
||
remark: '', // 备注
|
||
order_no: '', // 下单成功的id
|
||
selectTypeId: '2', // 微信支付2 E币支付1
|
||
coupon_price: '' // 代驾券显示金额，提货券显示什么呢
|
||
};
|
||
},
|
||
|
||
onLoad(e) {
|
||
// 获取确认订单页面参数
|
||
this.params = e
|
||
this.params.qty = Number(e.qty)
|
||
this.mallBuyGoods(e, 'get') // 确认订单商品信息get
|
||
},
|
||
methods: {
|
||
// 确认商品详情页get，下单页面post
|
||
mallBuyGoods(params, method) {
|
||
params.coupon_grant_id = this.coupon_grant_id
|
||
mallBuyGoods(params, method).then(res => {
|
||
if (method === 'get') {
|
||
this.amount = res.amount
|
||
this.account = res.account
|
||
this.total = res.total
|
||
this.list = res.coupons
|
||
this.shop = res.detail[0].shop
|
||
this.info = res.detail[0].items[0]
|
||
this.coupon_price = res.coupon_price
|
||
} else {
|
||
this.order_no = res.order_no
|
||
this.nowPay()
|
||
}
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
// 提交订单
|
||
order() {
|
||
let params = this.params
|
||
params.coupon_grant_id = this.coupon_grant_id
|
||
params.remark = this.remark
|
||
params.channel = 'app'
|
||
this.mallBuyGoods(params, 'post')
|
||
},
|
||
// 触发支付
|
||
nowPay() {
|
||
this.canPay = false
|
||
let apiUrl = ''
|
||
let data = {}
|
||
if (this.selectTypeId === '2') {
|
||
apiUrl = wxPay
|
||
data = {
|
||
order_no: this.order_no,
|
||
type: 'app'
|
||
}
|
||
} else if (this.selectTypeId === '3') {
|
||
apiUrl = aliPay
|
||
data = {
|
||
order_no: this.order_no,
|
||
type: 'app'
|
||
}
|
||
} else {
|
||
apiUrl = ebPay
|
||
data = {
|
||
order_no: this.order_no
|
||
}
|
||
}
|
||
apiUrl(data).then(res => {
|
||
// 微信支付
|
||
if (this.selectTypeId === '2') {
|
||
if (typeof res === 'string') {
|
||
let payInfo = JSON.parse(res)
|
||
uni.requestPayment({
|
||
provider: "wxpay",
|
||
orderInfo: payInfo,
|
||
success: res => {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
duration: 10000,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/goods/payStatus?success=true'
|
||
})
|
||
this.canPay = true
|
||
}, 3000);
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
duration: 3000,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/payStatus?success=false'
|
||
})
|
||
this.canPay = true
|
||
}, 3000);
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '创建订单成功',
|
||
duration: 3000,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
this.canPay = true
|
||
uni.reLaunch({
|
||
url: '/pages/goods/payStatus?success=true'
|
||
})
|
||
}, 3000);
|
||
}
|
||
}
|
||
// 支付宝支付
|
||
else if (this.selectTypeId === '3') {
|
||
if (typeof res === 'string') {
|
||
uni.requestPayment({
|
||
provider: "alipay",
|
||
orderInfo: res,
|
||
success: res => {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
duration: 3000,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/goods/payStatus?success=true'
|
||
})
|
||
this.canPay = true
|
||
}, 3000);
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
title: '支付失败' + err,
|
||
duration: 3000,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/payStatus?success=false'
|
||
})
|
||
this.canPay = true
|
||
}, 3000);
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '创建订单成功',
|
||
duration: 3000,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
this.canPay = true
|
||
uni.navigateTo({
|
||
url: '/pages/goods/payStatus?success=true'
|
||
})
|
||
}, 3000);
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
duration: 3000,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(res => {
|
||
this.canPay = true
|
||
}, 2000)
|
||
})
|
||
},
|
||
|
||
// 选择可用优惠券
|
||
selectCoupon(item) {
|
||
if (this.coupon_grant_id === item.coupon_grant_id) {
|
||
this.coupon_grant_id = ''
|
||
// this.coupon_price = ''
|
||
} else {
|
||
this.coupon_grant_id = item.coupon_grant_id
|
||
// this.coupon_price = item.price
|
||
}
|
||
this.mallBuyGoods(this.params, 'get')
|
||
this.showCouponList = false
|
||
},
|
||
// 增加库存时候触发事件
|
||
numberBoxChange(e) {
|
||
this.params.qty = e.value
|
||
this.mallBuyGoods(this.params, 'get')
|
||
},
|
||
// 选择支付方式
|
||
selectPay(id) {
|
||
if (id === '1') {
|
||
if (this.info.is_change) {
|
||
this.selectTypeId = id
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
title: '当前商品不支持EB支付'
|
||
})
|
||
}
|
||
} else if (id === '2') {
|
||
this.selectTypeId = id
|
||
} else if (id === '3') {
|
||
this.selectTypeId = id
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.pay-select {
|
||
padding: 20rpx 30rpx;
|
||
border-top: 20rpx #f7f7f7 solid;
|
||
}
|
||
|
||
.pay-select-item {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
|
||
.pay-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
|
||
.pay-wx-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
box-sizing: border-box;
|
||
margin-left: 30rpx;
|
||
font-size: 28rpx;
|
||
|
||
span {
|
||
font-size: 24rpx;
|
||
color: #cacaca;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.pay-icon{
|
||
border-radius: 10rpx;
|
||
padding: 10rpx;
|
||
&.wx-icon {
|
||
background: #04BE02;
|
||
}
|
||
&.al-icon {
|
||
background: #1678ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ConfirmOrder {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background-color: #F7F7F7;
|
||
padding-bottom: 80rpx;
|
||
|
||
|
||
.acceptInfo {
|
||
margin: 0 30rpx;
|
||
// background-color: #fff;
|
||
box-shadow: 0 0 14rpx 4rpx rgba($color: $mian-color, $alpha: 0.2);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
position: relative;
|
||
top: -30rpx;
|
||
|
||
.name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
|
||
span {
|
||
padding-left: 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.address {
|
||
padding: 20rpx 40rpx;
|
||
font-size: 28rpx;
|
||
|
||
span {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-info1 {
|
||
background-color: #fff;
|
||
border-top: solid 20rpx #f7f7f7;
|
||
|
||
.goods-type {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 40rpx;
|
||
color: #666;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
.goods-type span {
|
||
color: #000;
|
||
}
|
||
|
||
.order-content {
|
||
width: 100%;
|
||
}
|
||
|
||
// 顶部信息
|
||
.top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 40rpx;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
|
||
.company {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 30rpx;
|
||
color: #484848;
|
||
}
|
||
|
||
.no {
|
||
margin-top: 20rpx;
|
||
font-size: $title-size*0.9;
|
||
color: #999;
|
||
}
|
||
|
||
.status {
|
||
color: #999;
|
||
font-size: $title-size;
|
||
}
|
||
}
|
||
|
||
// 商品信息
|
||
.goods-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20rpx;
|
||
padding: 30rpx 40rpx;
|
||
|
||
.goods-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.goods {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
|
||
.name {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
// font-weight: bold;
|
||
|
||
.name1 {
|
||
width: 340rpx;
|
||
}
|
||
|
||
span {
|
||
font-size: 34rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.sku {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 合计信息
|
||
.total {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
color: #353535;
|
||
flex: 1;
|
||
text-align: right;
|
||
margin-top: 20rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.total-btn {
|
||
// border: solid 1rpx #f7f7f7;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
// 操作信息
|
||
.actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
width: 100%;
|
||
background-color: #Fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding: 20rpx 0;
|
||
|
||
span {
|
||
color: $mian-color;
|
||
margin-right: 30rpx;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.nowPay {
|
||
padding: 20rpx 50rpx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
background-color: $mian-color;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
// 优惠券弹窗
|
||
.scrollView {
|
||
// padding: 40rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
// 标题
|
||
.coupon-title {
|
||
padding: 40rpx;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
// 优惠券样式
|
||
.coupon-list-item {
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: 100%;
|
||
|
||
.coupon-list-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba($color: #000, $alpha: 0);
|
||
z-index: 10001;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 选择收货地址
|
||
.add-addr {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-bottom: solid rgba($color: $mian-color, $alpha:0.2) 10rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 0 40rpx;
|
||
|
||
.selectNew {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.selectNew2 {
|
||
padding: 20rpx 0;
|
||
flex: 1;
|
||
font-size: 34rpx;
|
||
color: #353535;
|
||
|
||
span {
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.addrs {
|
||
font-size: 26rpx;
|
||
margin-top: 10rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|