256 lines
8.6 KiB
Vue
256 lines
8.6 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" v-if="orderInfo.total_points>0">
|
|
<view>抵扣积分</view>
|
|
<view>{{ orderInfo.total_points }}</view>
|
|
</view>
|
|
<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 class="text-md border-t border-txBorder flex items-center justify-end py-base">
|
|
<view class="text-txBase">实付金额：</view>
|
|
<view class="text-bgSubtitle">￥{{ orderInfo.total_amount }}</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>
|
|
|
|
<!-- -->
|
|
<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" v-if="orderInfo.total_points >0"> {{orderInfo.total_points}}积分+</text> <text
|
|
class="text-xl text-txSvip">￥{{ orderInfo.total_amount }}</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 {
|
|
add
|
|
} from '@/utils'
|
|
export default {
|
|
data() {
|
|
return {
|
|
couponId: '',
|
|
goodsList: [],
|
|
orderInfo: {},
|
|
remarks: '',
|
|
tempCouponId: '',
|
|
couponShow: false,
|
|
isFirstLoading: true,
|
|
cuId: null
|
|
};
|
|
},
|
|
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;
|
|
},
|
|
},
|
|
onShow() {
|
|
setTimeout(() => {
|
|
this.getDetail();
|
|
}, 200)
|
|
},
|
|
methods: {
|
|
//创建订单
|
|
async createOrder() {
|
|
const params = {
|
|
coupon_id: this.couponId,
|
|
note: this.remarks,
|
|
order_pre: this.cuId
|
|
};
|
|
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
|
|
},
|
|
|
|
//确认订单详情
|
|
async getDetail() {
|
|
if (!this.isLogin) return uni.navigateTo({
|
|
url: '/pages/login/index'
|
|
});
|
|
const params = {
|
|
coupon_id: this.couponId,
|
|
order_pre: this.cuId
|
|
};
|
|
try {
|
|
let orderInfo = await this.$api.post('/v1/order/verify-order', params);
|
|
this.goodsList = orderInfo.products;
|
|
this.orderInfo = orderInfo;
|
|
} catch (error) {
|
|
console.log(error, '32');
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
console.log(error);
|
|
} finally {
|
|
this.isFirstLoading = false
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
couponShow(e) {
|
|
if (e) this.tempCouponId = this.couponId;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.listChid:last-child {
|
|
border: 0;
|
|
}
|
|
</style>
|