xlcs/xlcs-user/pagesOrder/confirmOrder/confirmOrder.vue

345 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="gg">
<u-navbar :border-bottom="false" :is-back="true">
<view class="u-flex u-m-l-20 u-m-r-20">
<view class="u-font-xl u-m-r-20">生成订单</view>
<view class="u-font-xs u-light-color u-p-t-10">{{ getSelectedCount }}件商品</view>
</view>
</u-navbar>
<view class="gg-content">
<scroll-view v-if="getCartInfoList" class="gg-cart-sv-container" scroll-y="true">
<!-- 提货点 -->
<!-- <u-card :padding="10" :show-head="false">
<view slot="body" class="u-m-10">提货点:{{ getLeaderAddressVo.takeName }}</view>
</u-card> -->
<u-card :padding="10" :show-head="true">
<view slot="head" class="u-m-10">联系方式</view>
<view slot="body" class="u-m-10">
<u-input v-model="sumbitOrderForm.receiverName" class="u-p-b-20" placeholder="请输入姓名"/>
<u-input v-model="sumbitOrderForm.receiverPhone" placeholder="请输入电话" type="number"/>
</view>
</u-card>
<!-- 商品 -->
<view v-for="(cartInfoListItem, index) in getCartInfoList" :key="index">
<u-card :border="false" :padding="10" :show-head="showMultiCheckbox(index)">
<view slot="head" class="u-m-10">
<text>{{ cartInfoListItem.activityRule.ruleDesc }}</text>
</view>
<view slot="body">
<view v-for="(cartInfoItem, idx) in cartInfoListItem.cartInfoList" :key="idx">
<!-- 动态class绑定是为了确保最后一条底部线条不显示 -->
<view :class="{ 'u-border-bottom': idx !== cartInfoListItem.cartInfoList.length - 1 }"
class="u-body-item u-flex u-col-between u-p-10">
<ListImgItem :lazyLoad="false"
:showBottom="cartInfoItem.skuType === 0 && cartInfoItem.isNewPerson === 1"
:showLeft="cartInfoItem.skuType === 1" :showRight="false"
:src="cartInfoItem.imgUrl" height="200rpx" width="200rpx"></ListImgItem>
<view class="u-p-b-20 u-m-l-20" style="flex:1">
<view>{{ cartInfoItem.skuName }}</view>
<view>购买数量{{ cartInfoItem.skuNum }}</view>
<view class="u-flex u-row-between">
<view class="u-type-error">
<text></text>
<text class="u-font-xl">{{ cartInfoItem.cartPrice }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</u-card>
</view>
<!-- 优惠券 -->
<u-card v-if="getCartCouponInfoList.length > 0" :padding="10" :show-head="false">
<view slot="body">
<view class="coupon">
<view v-for="couponInfoItem in getCartCouponInfoList" :key="couponInfoItem.id"
:class="{ selected: couponInfoItem.selected }" class="content u-m-b-20"
@click="switchCouponInfoItem(couponInfoItem)">
<view class="left">
<view class="sum">
<text class="num">{{ couponInfoItem.amount }}</text>
</view>
<view class="type">
{{ couponInfoItem.couponType === 'FULL_REDUCTION' ? '满减券' : '现金券' }}
</view>
<view class="type">{{ getRangeType(couponInfoItem.rangeType) }}</view>
</view>
<view class="centre">
<view class="title">{{ couponInfoItem.couponName }}</view>
<view class="u-type-info">{{ couponInfoItem.rangeDesc }}</view>
<view class="valid-date">
过期时间:{{ dayjs(couponInfoItem.expireTime).format('YYYY-MM-DD') }}
</view>
</view>
<view class="right">
<block v-if="couponInfoItem.isSelect === 1">
<u-tag text="可以使用" type="error"/>
</block>
<block v-else>
<u-tag text="不能使用" type="info"/>
</block>
<block v-if="couponInfoItem.isOptimal === 1">
<u-tag text="最优推荐" type="error"/>
</block>
<block v-else>
<u-tag text="非优使用" type="info"/>
</block>
</view>
</view>
</view>
</view>
</u-card>
</scroll-view>
<view class="gg-navigation">
<view class="navigation">
<view class="left">
<view class="item u-p-l-20">
<view class="u-font-sm u-line-1">
<view class="u-type-error">现价:¥{{ getCartPriceInfo.totalAmount }}</view>
<view class="u-font-xs u-type-info">
优惠券优惠:¥{{ getCartPriceInfo.couponReduceAmount }}
<text class="u-font-xs u-m-l-20 u-type-info">原价:</text>
<text
class="u-font-xs u-type-info">¥{{ getCartPriceInfo.originalTotalAmount }}
</text>
</view>
</view>
</view>
</view>
<view class="right">
<view class="buy btn u-line-1" @click="createSubmitOrder">生成订单</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {mapActions, mapGetters, mapState} from 'vuex';
import dayjs from 'dayjs';
export default {
data() {
return {
couponId: 0,
sumbitOrderForm: {
couponId: 0,
leaderId: 0,
orderNo: '',
receiverName: '',
receiverPhone: ''
}
};
},
computed: {
...mapState('orderModule', ['order']),
...mapGetters('orderModule', ['getCartInfoList', 'getSelectedCount', 'getCartPriceInfo', 'getLeaderAddressVo',
'showMultiCheckbox', 'getCartCouponInfoList'
]),
getRangeType() {
return function (rangeType) {
switch (rangeType) {
case 'ALL':
return '全场通用';
case 'SKU':
return '指定商品';
case 'CATEGORY':
return '指定分类';
}
};
}
},
methods: {
dayjs,
...mapActions('orderModule', ['getConfirmOrderAction']),
switchCouponInfoItem(couponInfoItem) {
if (couponInfoItem.isSelect) {
this.getCartCouponInfoList.forEach(item => (item.selected = false));
couponInfoItem.selected = true;
const couponReduceAmount = couponInfoItem.amount; // 优惠价格
const totalAmount = this.getCartPriceInfo.originalTotalAmount - couponReduceAmount; // 总价
this.getCartPriceInfo.totalAmount = totalAmount;
this.getCartPriceInfo.couponReduceAmount = couponReduceAmount;
this.couponId = couponInfoItem.id;
} else {
uni.showToast({
title: '优惠券无法使用'
});
}
},
async createSubmitOrder() {
this.sumbitOrderForm.orderNo = this.order.orderNo;
this.sumbitOrderForm.couponId = this.couponId;
this.sumbitOrderForm.leaderId = this.getLeaderAddressVo.leaderId;
if (this.$u.test.isEmpty(this.sumbitOrderForm.receiverName)) {
uni.showToast({
title: '请输入提货者姓名',
icon: 'none'
});
this.sumbitOrderForm.receiverName = '';
return;
}
if (!this.$u.test.mobile(this.sumbitOrderForm.receiverPhone)) {
uni.showToast({
title: '请输入提货者手机号码',
icon: 'none'
});
this.sumbitOrderForm.receiverPhone = '';
return;
}
const result = await this.$u.api.postSubmitOrder(this.sumbitOrderForm);
this.$u.route(`/pagesOrder/getOrderInfo/getOrderInfo?orderId=${result}`);
}
},
mounted() {
this.getConfirmOrderAction();
this.getCartCouponInfoList.map(item => {
if (item.selected) {
this.couponId = item.id;
}
});
}
};
</script>
<style lang="scss">
.gg {
height: 100%;
background-color: $u-bg-color;
// scrollView的固定高度设置
// 底部导航与顶部自定义导航高度需要减去
&-cart-sv-container {
height: calc(100vh - 90rpx - 136rpx);
}
// 底部导航
&-navigation {
width: 100%;
height: 90rpx;
position: fixed;
bottom: 0;
.navigation {
height: 100%;
display: flex;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
padding: 12rpx 0;
.left {
display: flex;
flex: 1;
font-size: 20rpx;
.item {
margin: 0 10rpx;
&.car {
text-align: center;
position: relative;
}
}
}
.right {
display: flex;
font-size: 28rpx;
align-items: center;
.btn {
line-height: 66rpx;
padding: 0 30rpx;
border-radius: 36rpx;
color: #ffffff;
}
.buy {
background-color: #ff7900;
margin: 0 30rpx;
}
}
}
}
}
.coupon {
background-color: #ffffff;
width: 100%;
// border: 10rpx;
color: $u-type-warning;
font-size: 28rpx;
.content {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40rpx 20rpx;
border: 10rpx;
background-color: #fff5f4;
.left {
.sum {
font-size: 32rpx;
.num {
font-size: 60rpx;
font-weight: bold;
}
}
}
.centre {
margin-left: 40rpx;
.title {
font-size: 32rpx;
font-weight: bold;
color: $u-main-color;
}
}
.right {
margin-left: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
u-tag {
padding: 5rpx;
}
.immediate-use {
padding: 0 20rpx;
height: 50rpx;
border-radius: 25rpx;
line-height: 50rpx;
background-color: $u-type-warning !important;
color: #ffffff !important;
font-size: 24rpx;
border: none;
word-break: keep-all;
}
}
}
}
.selected {
background-color: $u-type-error !important;
}
</style>