554 lines
20 KiB
Vue
554 lines
20 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 导航栏 -->
|
||
<u-navbar back-icon-color="#000000" title-color="#000000" :border-bottom="false" title="确认订单">
|
||
<view slot="right" class="pr-base" @tap="$u.routeAuth('/pages/auxiliary_cart/index')">
|
||
<image class="w-48rpx h-48rpx" src="/static/images/cart/short-cart.png" mode="scaleToFill" />
|
||
</view>
|
||
</u-navbar>
|
||
|
||
<loading-view v-if="isFirstLoading"></loading-view>
|
||
|
||
<!-- <view v-if="orderInfo.shipping_address">
|
||
<view class="fixed top-0 left-0 w-full h-full flex items-center justify-center flex-1">
|
||
<view class="text-center">
|
||
<view>您还没有收货地址哟！</view>
|
||
<view
|
||
class="bg-white border border-solid border-hex-efefef h-60rpx px-40rpx mt-20rpx leading-60rpx rounded-30rpx text-24rpx text-center inline-block"
|
||
@tap="$u.routeAuth('/pageA/new_address/index', { type: 'select' })"
|
||
>
|
||
新建地址
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- -->
|
||
<view v-if="skuOne.require_shipping_address || type != 'points'" class="flex items-center justify-between px-40rpx bg-white pb-30rpx"
|
||
@tap="addressAry.length?$u.routeAuth('/pageA/address/index'):$u.routeAuth('/pageA/new_address/index?addressType=select')">
|
||
<view>
|
||
<template v-if="orderInfo.shipping_address">
|
||
<view class="flex items-center text-black">
|
||
<image v-if="address.is_default" class="w-59rpx" src="/static/images/order/defalut-icon.png"
|
||
mode="widthFix" />
|
||
<text>{{ address.zone }}</text>
|
||
</view>
|
||
<view class="text-xl text-black my-14rpx"> {{ address.address }} </view>
|
||
<view class="text-lg text-black"> {{ address.consignee }} {{ address.telephone }} </view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="flex items-center text-black">
|
||
<text>暂无默认地址</text>
|
||
</view>
|
||
<view class="text-xl text-black my-14rpx"> 请选择 </view>
|
||
</template>
|
||
</view>
|
||
<view>
|
||
<u-icon name="arrow-right" color="#808080" size="38"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white rounded-xs mt-24rpx py-base px-40rpx" v-if="goodsList.length">
|
||
<block v-for="(item, index) in goodsList" :key="index">
|
||
<view>
|
||
<view class="flex">
|
||
<u-image border-radius="10" width="190rpx" height="190rpx" :src="item.sku.cover" :lazy-load="true">
|
||
</u-image>
|
||
<view class="flex-1 ml-16rpx w-0 flex justify-between flex-col">
|
||
<view>
|
||
<view>
|
||
<view class="line-2">{{ item.sku.name }}</view>
|
||
</view>
|
||
<view class="mt-10rpx">
|
||
<u-tag v-for="spec in item.sku.specs" :key="spec" size="mini" :text="spec" class="mr-6rpx"
|
||
shape="square" color="#A6A6A6" bg-color="transparent" mode="dark" />
|
||
</view>
|
||
</view>
|
||
<view class="flex items-end">
|
||
<view class="flex-1">
|
||
<view class="">
|
||
<view class="flex-1">￥{{ item.sku.sell_price }}</view>
|
||
</view>
|
||
<view class="flex items-center" v-if="item.sku.vip_price>0">
|
||
<view class="">￥{{ item.sku.vip_price }}</view>
|
||
<image class="w-58rpx h-58rpx ml-10rpx" src="/static/svg/svip.svg" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="text-lg"> x{{ item.quantity }} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="my-20rpx" v-if="index != goodsList.length - 1">
|
||
<u-line color="#E5E5E5" />
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- -->
|
||
<view class="bg-white mt-base rounded-xs px-40rpx py-20rpx" v-if="type != 'bargains' && type != 'points'">
|
||
<view class="flex items-center justify-between">
|
||
<view class="text-md">选择优惠卷</view>
|
||
<view class="flex items-center" @tap="onOpenCoupon">
|
||
<view class="text-md text-txGray mr-10rpx">{{ couponShowText }}</view>
|
||
<u-icon name="arrow-right" color="#808080" size="30"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="text-gray-400 text-sm">因系统迁移优惠券问题请联系客服</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="bg-white mt-base rounded-xs pb-base px-40rpx pt-rowSm text-md">
|
||
<view class="flex items-center justify-between py-rowSm text-txBase">
|
||
<view>商品金额</view>
|
||
<view>￥{{ orderInfo.products_total_amount }}</view>
|
||
</view>
|
||
<view class="flex items-center justify-between py-rowSm text-txBase">
|
||
<view>运费</view>
|
||
<view>￥{{ orderInfo.shipping_fee }}</view>
|
||
</view>
|
||
<view class="flex items-center justify-between py-rowSm text-txBase" v-if="type != 'bargains' && type != 'points'">
|
||
<view>优惠卷</view>
|
||
<view class="text-bgSubtitle">-￥{{ orderInfo.coupon_discount_amount }}</view>
|
||
</view>
|
||
<view class="flex items-center justify-between py-rowSm text-txBase">
|
||
<view>会员优惠</view>
|
||
<view class="text-bgSubtitle">-￥{{ orderInfo.vip_discount_amount }}</view>
|
||
</view>
|
||
<view class="flex items-center justify-between py-rowSm text-txBase" v-if="type == 'bargains'">
|
||
<view>砍价优惠</view>
|
||
<view class="text-bgSubtitle">-￥{{ orderInfo.bargain_amount }}</view>
|
||
</view>
|
||
<view v-if="orderInfo.total_amount > 0" class="flex items-center justify-between py-base text-lg border-t border-txBorder font-medium">
|
||
<view>会员积分抵扣<block v-if="hasRemainingPoints">（共{{ orderInfo.remaining_points }}积分）</block></view>
|
||
<view v-if="hasRemainingPoints" class="flex items-center" @tap="openPointDiscountDrawer">
|
||
<view v-if="pointDiscount.amount > 0" class="text-bgSubtitle">-￥{{ pointDiscount.amount }}</view>
|
||
<view v-else>请选择</view>
|
||
<u-icon name="arrow-right" size="20" class="ml-10rpx text-gray-400"></u-icon>
|
||
</view>
|
||
<view v-else class="flex items-center text-gray-400">
|
||
<view>无可用</view>
|
||
<u-icon name="arrow-right" size="20" class="ml-10rpx text-gray-400"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="text-md border-t border-txBorder flex items-center justify-end py-base">
|
||
<view class="text-txBase">实付金额：</view>
|
||
<view class="text-bgSubtitle">￥{{ paymentAmount }}</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="border-t border-txBorder pt-base text-md">
|
||
<textarea
|
||
v-model="remarks"
|
||
:adjust-position="false"
|
||
class="min-h-130rpx w-full"
|
||
placeholder-style="text-h999"
|
||
placeholder="订单备注："
|
||
maxlength="100"
|
||
auto-height
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<cu-popup v-model="couponShow" mode="bottom" border-radius="20" closeable close-icon-size="24">
|
||
<view>
|
||
<view class="text-center py-30rpx text-lg">优惠券</view>
|
||
<scroll-view scroll-y="true" class="max-h-900rpx bg-hex-f6f6f6">
|
||
<coupon-list v-model="tempCouponId" :list="couponsList"></coupon-list>
|
||
</scroll-view>
|
||
<view class="p-base">
|
||
<view class="btn bg-hex-FB4A34 h-84rpx leading-84rpx text-white" @tap="onCounponChange">
|
||
<text>确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</cu-popup>
|
||
|
||
<cu-popup v-model="showPointDiscountDrawer" mode="bottom" border-radius="20" closeable close-icon-size="24">
|
||
<view>
|
||
<view class="flex p-50rpx text-x-lg items-end">积分<view class="text-md text-txBase">（剩余: {{ orderInfo.remaining_points }}）</view></view>
|
||
<scroll-view scroll-y="true" class="min-h-600rpx max-h-900rpx">
|
||
<view class="text-md flex justify-between px-50rpx py-base" @tap="selectPointDiscountOption(0)">
|
||
<view>暂不使用积分</view>
|
||
<u-icon name="checkmark-circle" :color="pointDiscountSelectedOption.value == 0 ? '#f43530' : '#808080'" size="40"></u-icon>
|
||
</view>
|
||
<view class="text-md flex justify-between px-50rpx py-base" @tap="selectPointDiscountOption(1)">
|
||
<view class="flex">
|
||
抵扣<view class="mx-8rpx text-bgSubtitle">￥{{ orderInfo.point_discount_amount }}</view>使用<view class="mx-8rpx">{{ orderInfo.available_points }}</view>积分
|
||
</view>
|
||
<u-icon name="checkmark-circle" :color="pointDiscountSelectedOption.value == 1 ? '#f43530' : '#808080'" size="40"></u-icon>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="p-base">
|
||
<view class="btn bg-hex-FB4A34 h-84rpx leading-84rpx text-white" @tap="submitPointDiscount">
|
||
<text>确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</cu-popup>
|
||
|
||
<!-- -->
|
||
<view class="h-130rpx"></view>
|
||
<!-- -->
|
||
<view class="flex items-center justify-end bg-white shadow-up fixed right-0 left-0 bottom-0 cu-bar tabbar">
|
||
<view class="text-md text-txBase">
|
||
合计: <text class="text-xl text-txSvip">￥{{ paymentAmount }}</text>
|
||
</view>
|
||
<view @tap="createOrder" class="w-180rpx h-66rpx leading-66rpx text-center text-lg ml-40rpx text-white bg-primary rounded-lg mr-base">提交订单</view>
|
||
<view v-if="is_company && type != 'desk'" @tap="createPreOrder" class="w-180rpx h-66rpx leading-66rpx text-center text-lg ml-20rpx text-white bg-hex-D43030 rounded-lg mr-base">生成订单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let btnLoading = false;
|
||
import { sub } from '@/utils'
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: '',
|
||
goods: [],
|
||
cards: [],
|
||
addressId: '',
|
||
couponId: '',
|
||
goodsList: [],
|
||
orderInfo: {
|
||
products_total_amount: '',
|
||
shipping_fee: '',
|
||
coupon_discount_amount: '',
|
||
vip_discount_amount: '',
|
||
total_amount: '',
|
||
},
|
||
addressList: [],
|
||
remarks: '',
|
||
tempCouponId: '',
|
||
couponShow: false,
|
||
isFirstLoading:true,
|
||
addressAry:[],
|
||
cuId:null,
|
||
|
||
// 桌号信息
|
||
desk: '',
|
||
// 门店id
|
||
mid: '',
|
||
|
||
//--------------------------
|
||
// 积分抵扣
|
||
//--------------------------
|
||
pointDiscount: {
|
||
value: null,
|
||
points: 0,
|
||
amount: 0,
|
||
},
|
||
showPointDiscountDrawer: false,
|
||
pointDiscountSelectedOption: {
|
||
value: null,
|
||
points: 0,
|
||
amount: 0,
|
||
},
|
||
};
|
||
},
|
||
async onLoad(options) {
|
||
let data = {}
|
||
if (options.data) {
|
||
data = JSON.parse(decodeURIComponent(options.data));
|
||
this.type = data.type;
|
||
this.goods = data?.goods ?? [];
|
||
this.cards = data?.cards ?? [];
|
||
this.cuId = data?.cuId
|
||
}
|
||
else if (options.store_cart) {
|
||
// 桌号 id
|
||
let desk = uni.getStorageSync('desk')
|
||
uni.showLoading()
|
||
let res = await this.$api.get(`/v1/store/desk/${desk}`)
|
||
this.desk = res
|
||
this.type = 'desk'
|
||
this.remarks = '桌号:' + this.desk.name
|
||
// 商户 id
|
||
this.mid = options.mid
|
||
// 购物车商品 id
|
||
let ids = options.store_cart.split(',').map(value => parseInt(value))
|
||
res = await this.$store.dispatch('storeCart/getCart')
|
||
const goods = res.filter(item => ids.indexOf(item.id) >= 0)
|
||
this.goods = goods.map(item => {
|
||
return {
|
||
sku_id: item.id,
|
||
num: item.number
|
||
}
|
||
})
|
||
this.getDetail()
|
||
uni.hideLoading()
|
||
} else {
|
||
this.type = data.type;
|
||
this.goods = data?.goods ?? [];
|
||
this.cards = data?.cards ?? [];
|
||
this.cuId = data?.cuId
|
||
}
|
||
uni.$on('address:select', this.addressUpdate);
|
||
},
|
||
|
||
computed: {
|
||
skuOne(){
|
||
return this.goodsList[0]?.sku ?? {}
|
||
},
|
||
//收货地址
|
||
address() {
|
||
return this.orderInfo.shipping_address;
|
||
},
|
||
//优惠券列表
|
||
couponsList() {
|
||
return this.orderInfo?.coupons ?? [];
|
||
},
|
||
//优惠券文本显示
|
||
couponShowText() {
|
||
if (!!this.couponId) return this.currentCoupon?.name ?? '已过期';
|
||
if (this.couponsList.length) return `${this.couponsList.length}张可用`;
|
||
else return '当前无可用';
|
||
},
|
||
//当前优惠券
|
||
currentCoupon() {
|
||
const coupon = this.couponsList.find((e) => e.id == this.couponId);
|
||
return coupon;
|
||
},
|
||
//配送支持
|
||
isDistribution() {
|
||
return this.orderInfo?.shipping_supported ?? false;
|
||
},
|
||
user() {
|
||
return this.$store.getters.user ?? {};
|
||
},
|
||
//是否为店员
|
||
is_company() {
|
||
return this.user?.is_company ?? false
|
||
},
|
||
// 是否有剩余积分
|
||
hasRemainingPoints() {
|
||
return this.orderInfo.remaining_points > 0
|
||
},
|
||
paymentAmount() {
|
||
return sub(this.orderInfo.total_amount ?? 0, this.pointDiscount.amount ?? 0)
|
||
},
|
||
},
|
||
onShow() {
|
||
if (this.goods.length > 0 || this.cards.length > 0) {
|
||
this.getDetail();
|
||
}
|
||
this.getAddress()
|
||
},
|
||
methods: {
|
||
//创建订单
|
||
async createOrder() {
|
||
const {
|
||
remarks,
|
||
addressId,
|
||
couponId,
|
||
isDistribution
|
||
} = this;
|
||
if((this.type != 'points' && this.type != 'desk') || this.skuOne?.require_shipping_address){
|
||
if (!addressId) return this.$u.toast('收货地址不能为空');
|
||
if (!isDistribution) return this.$u.toast('所在地区不支持配送');
|
||
}
|
||
|
||
const params = {
|
||
coupon_id: couponId,
|
||
shipping_address_id: addressId,
|
||
note: remarks,
|
||
points: this.pointDiscount.points,
|
||
};
|
||
|
||
if(this.type == 'points'){
|
||
const {num, sku_id } = this.goods[0];
|
||
params.sku_id = sku_id
|
||
params.quantity = num
|
||
}else if (this.type == 'bargains') {
|
||
params.cuId = this.cuId
|
||
} else if (this.type == 'cart') {
|
||
params.shopping_cart = this.cards;
|
||
} else if (this.type == 'desk') {
|
||
params.products = this.goods.map(item => {
|
||
return {
|
||
sku_id: item.sku_id,
|
||
quantity: item.num,
|
||
}
|
||
})
|
||
}
|
||
else {
|
||
const {num, sku_id } = this.goods[0];
|
||
params.product = { sku_id: sku_id, quantity: num }
|
||
}
|
||
|
||
if (btnLoading) return;
|
||
btnLoading = true;
|
||
|
||
try {
|
||
let order;
|
||
if(this.type == 'points'){
|
||
order = await this.$api.post(`/v1/points/orders`, params);
|
||
}else if(this.type == 'bargains'){
|
||
order = await this.$api.post(`/v1/bargains/create-mall-order/${this.cuId}`, params);
|
||
}
|
||
// 桌号
|
||
else if (this.type == 'desk') {
|
||
params.desk = this.desk.id
|
||
params.store_id = this.mid
|
||
order = await this.$api.post(`/v1/order/orders`, params)
|
||
// 清空桌号
|
||
uni.clearStorageSync('desk')
|
||
}
|
||
else {
|
||
order = await this.$api.post('/v1/order/orders', params);
|
||
}
|
||
if(order.status==1 || order.status==2){//支付成功
|
||
this.$u.routeAuth({
|
||
url: '/pages/payment_results/payment_results',
|
||
type: 'redirectTo',
|
||
params: {
|
||
id: order.id,
|
||
type: 'success',
|
||
},
|
||
});
|
||
}else if(order.status==0){ //待付款
|
||
this.$u.routeAuth({
|
||
url: '/pages/confirm_payment/confirm_payment',
|
||
type: 'redirectTo',
|
||
params: {
|
||
id: order.id
|
||
}
|
||
});
|
||
}
|
||
// this.$u.routeAuth({
|
||
// url: '/pages/confirm_payment/confirm_payment',
|
||
// type: 'redirectTo',
|
||
// params: {
|
||
// id: order.id
|
||
// }
|
||
// });
|
||
} catch (error) {
|
||
// console.log(error);
|
||
} finally {
|
||
btnLoading = false;
|
||
}
|
||
},
|
||
//优惠券改变
|
||
onCounponChange() {
|
||
this.couponId = this.tempCouponId;
|
||
this.getDetail();
|
||
this.couponShow = false;
|
||
},
|
||
onOpenCoupon(){
|
||
if(this.couponsList.length==0) return this.$u.toast('当前无可用优惠券')
|
||
this.couponShow = true
|
||
},
|
||
openPointDiscountDrawer() {
|
||
this.pointDiscountSelectedOption = this.pointDiscount
|
||
this.showPointDiscountDrawer = true
|
||
},
|
||
selectPointDiscountOption(value) {
|
||
switch (value) {
|
||
case 0:
|
||
this.pointDiscountSelectedOption = {
|
||
value: 0,
|
||
points: 0,
|
||
amount: 0,
|
||
}
|
||
break;
|
||
|
||
case 1:
|
||
this.pointDiscountSelectedOption = {
|
||
value: 1,
|
||
points: this.orderInfo.available_points,
|
||
amount: this.orderInfo.point_discount_amount,
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
submitPointDiscount() {
|
||
this.pointDiscount = this.pointDiscountSelectedOption
|
||
this.showPointDiscountDrawer = false
|
||
},
|
||
//地址更换
|
||
addressUpdate({id}) {
|
||
this.addressId = id;
|
||
},
|
||
//确认订单详情
|
||
async getDetail() {
|
||
const params = {
|
||
coupon_id: this.couponId,
|
||
shipping_address_id: this.addressId,
|
||
};
|
||
if(this.type == 'points'){
|
||
const { num, sku_id } = this.goods[0];
|
||
params.sku_id = sku_id
|
||
params.quantity= num
|
||
} else if(this.type == 'bargains'){
|
||
params.bargain_order_id = this.cuId
|
||
const { num, sku_id } = this.goods[0];
|
||
params.product = { sku_id: sku_id, quantity: num };
|
||
}else if (this.type == 'cart') {
|
||
params.shopping_cart = this.cards;
|
||
} else if (this.type == 'desk') {
|
||
params.store_id = this.mid
|
||
params.products = this.goods.map(item => {
|
||
return {
|
||
sku_id: item.sku_id,
|
||
quantity: item.num,
|
||
}
|
||
})
|
||
} else {
|
||
const { num, sku_id } = this.goods[0];
|
||
params.product = {sku_id: sku_id,quantity: num};
|
||
}
|
||
try {
|
||
let orderInfo
|
||
if(this.type == 'points'){
|
||
orderInfo = await this.$api.post('/v1/points/order-check', params);
|
||
}else{
|
||
orderInfo = await this.$api.post('/v1/order/verify-order', params);
|
||
}
|
||
orderInfo.shipping_address && (this.addressId = orderInfo.shipping_address.id);
|
||
this.goodsList = orderInfo.products;
|
||
this.orderInfo = orderInfo;
|
||
} catch (error) {
|
||
console.log(error);
|
||
}finally{
|
||
this.isFirstLoading = false
|
||
}
|
||
},
|
||
async getAddress(){
|
||
const resData = await this.$api.get('/v1/shipping-addresses')
|
||
this.addressAry = resData
|
||
},
|
||
createPreOrder() {
|
||
const params = {
|
||
products: this.goodsList.map(item => {
|
||
return {
|
||
sku_id: item.sku.id,
|
||
quantity: item.quantity,
|
||
send: item.quantity
|
||
}
|
||
}),
|
||
note: this.remarks
|
||
}
|
||
uni.showLoading()
|
||
this.$api.post(`/v1/order-pre`, params).then(res => {
|
||
uni.hideLoading()
|
||
this.$u.route('/pageB/code/index', { id: res.order_pre })
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
couponShow(e) {
|
||
if (e) this.tempCouponId = this.couponId;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.border-t {
|
||
border-top: 1rpx solid #E5E5E5;
|
||
}
|
||
.listChid:last-child {
|
||
border: 0;
|
||
}
|
||
</style>
|