333 lines
12 KiB
Vue
333 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<loading-view v-if="isFirstLoading"></loading-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-bold">
|
||
<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 :adjust-position="false" v-model="remarks" class="min-h-130rpx w-full" placeholder-style="text-h999"
|
||
placeholder="订单备注：" maxlength="100" auto-height></textarea>
|
||
</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>
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let btnLoading = false;
|
||
import { sub } from '@/utils'
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: '',
|
||
couponId: '',
|
||
goodsList: [],
|
||
orderInfo: {},
|
||
remarks: '',
|
||
tempCouponId: '',
|
||
couponShow: false,
|
||
isFirstLoading: true,
|
||
cuId: null,
|
||
//--------------------------
|
||
// 积分抵扣
|
||
//--------------------------
|
||
pointDiscount: {
|
||
value: null,
|
||
points: 0,
|
||
amount: 0,
|
||
},
|
||
showPointDiscountDrawer: false,
|
||
pointDiscountSelectedOption: {
|
||
value: null,
|
||
points: 0,
|
||
amount: 0,
|
||
},
|
||
};
|
||
},
|
||
onLoad({ id }) {
|
||
this.cuId = id
|
||
},
|
||
|
||
computed: {
|
||
//优惠券列表
|
||
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;
|
||
},
|
||
// 是否有剩余积分
|
||
hasRemainingPoints() {
|
||
return this.orderInfo.remaining_points > 0
|
||
},
|
||
paymentAmount() {
|
||
return sub(this.orderInfo.total_amount ?? 0, this.pointDiscount.amount ?? 0)
|
||
},
|
||
},
|
||
onShow() {
|
||
setTimeout(() => {
|
||
this.getDetail();
|
||
}, 200)
|
||
},
|
||
methods: {
|
||
//创建订单
|
||
async createOrder() {
|
||
const params = {
|
||
coupon_id: this.couponId,
|
||
note: this.remarks,
|
||
order_pre: this.cuId,
|
||
points: this.pointDiscount.points,
|
||
};
|
||
if (btnLoading) return;
|
||
btnLoading = true;
|
||
|
||
try {
|
||
const 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
|
||
}
|
||
});
|
||
}
|
||
} 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
|
||
},
|
||
|
||
//确认订单详情
|
||
async getDetail() {
|
||
if (!this.isLogin) return uni.navigateTo({
|
||
url: '/pages/login/index'
|
||
});
|
||
const params = {
|
||
coupon_id: this.couponId,
|
||
order_pre: this.cuId,
|
||
ignore_shipping_fee: true,
|
||
};
|
||
try {
|
||
let orderInfo = await this.$api.post('/v1/order/verify-order', params);
|
||
this.goodsList = orderInfo.products;
|
||
this.orderInfo = orderInfo;
|
||
} catch (error) {
|
||
this.couponId = ''
|
||
console.log(error);
|
||
} finally {
|
||
this.isFirstLoading = false
|
||
}
|
||
},
|
||
},
|
||
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>
|