yovinchen/xlcs
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

调整小程序

Browse Source
This commit is contained in:
yovinchen
2023-09-22 15:41:37 +08:00
parent b0ce6e2ad1
commit e06438f776
52 changed files with 4958 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
atguigu-tuan/pagesOrder/confirmOrder/confirmOrder.vue Normal file
View File

@@ -0,0 +1,345 @@
<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 {mapState, mapGetters, mapActions} 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>