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
2024-01-07 01:10:08 +08:00
parent 2f29241806
commit b22014e976
943 changed files with 27699 additions and 28227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
xlcs-user/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>

187
xlcs-user/pagesOrder/getOrderInfo/getOrderInfo.vue Normal file
View File

@@ -0,0 +1,187 @@
<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>
</u-navbar>
<view class="gg-content">
<scroll-view class="gg-cart-sv-container" scroll-y="true">
<!-- 提货点 -->
<u-card :padding="10" :show-head="true">
<view slot="head" class="u-m-10">提货人联系方式</view>
<view slot="body" class="u-m-10">
<view class="u-p-20">收货人员：{{ order.receiverName }}</view>
<view class="u-p-20">联系方式：{{ order.receiverPhone }}</view>
<view class="u-p-20">提货地点：{{ order.receiverAddress }}</view>
</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">
<view v-for="(orderItem, index) in order.orderItemList" :key="orderItem.id">
<view class="u-body-item u-flex u-col-between u-p-10">
<u-image :height="200" :lazy-load="true" :src="orderItem.imgUrl" :width="200"></u-image>
<view class="orderItemPrices u-p-20">
<view class="u-font-xl">{{ orderItem.skuName }}</view>
<view>单价：￥{{ orderItem.skuPrice }}</view>
<view>数量：{{ orderItem.skuNum }}</view>
<view v-if="orderItem.splitActivityAmount > 0">活动金额:￥{{ orderItem.splitActivityAmount }}</view>
<view v-if="orderItem.splitCouponAmount > 0">优惠券额:￥{{ orderItem.splitCouponAmount }}</view>
<view>
小计：
<text class="u-type-error">￥{{ orderItem.splitTotalAmount }}</text>
</view>
</view>
</view>
</view>
<view>
<view class="u-flex u-row-between u-p-20">
<view>商品总额：</view>
<view>￥{{ order.originalTotalAmount }}</view>
</view>
<view class="u-flex u-row-between u-p-20">
<view>实际付款：</view>
<view>￥{{ order.totalAmount }}</view>
</view>
</view>
</view>
</u-card>
<u-card :padding="10" :show-head="false">
<view slot="body" class="u-m-10">
<view class="u-flex u-row-between u-p-20">
<view class="u-flex-1">订单编号：</view>
<view class="u-flex">
<view>{{ order.orderNo }}</view>
<view class="u-type-primary u-p-l-10" @click="copyOrderNo">复制</view>
</view>
</view>
<view class="u-flex u-row-between u-p-20">
<view class="u-flex-1">下单时间：</view>
<view>{{ order.createTime }}</view>
</view>
</view>
</u-card>
</scroll-view>
<view class="gg-navigation">
<view class="navigation">
<view class="buy btn u-line-1" @click="payOrder">支付订单</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timer: null,
resul: {},
orderId: 0,
order: {}
};
},
onLoad(options) {
this.orderId = +options.orderId;
},
methods: {
async getOrderInfoById(orderId) {
const result = await this.$u.api.getOrderInfo({orderId});
this.order = result;
},
copyOrderNo() {
uni.setClipboardData({
data: this.order.orderNo, //要被复制的内容
success: () => {
//复制成功的回调函数
uni.showToast({
title: '复制成功',
icon: 'none'
});
}
});
},
async payOrder() {
const result = await this.$u.api.getWxPayment({orderNo: this.order.orderNo});
wx.requestPayment({
timeStamp: result.timeStamp,
nonceStr: result.nonceStr,
package: result.package,
signType: 'MD5',
paySign: result.paySign,
success: res => {
this.$u.api.getOrderStatus({orderNo: this.order.orderNo});
uni.showToast({
title: '支付成功',
icon: 'none'
});
uni.switchTab({
url: '/pages/index/index'
});
},
fail: err => {
uni.showToast({
icon: 'none',
title: err
});
}
});
}
},
mounted() {
this.getOrderInfoById(this.orderId);
}
};
</script>
<style lang="scss">
.gg {
height: 100%;
background-color: $u-bg-color;
// scrollView的固定高度设置
// 底部导航与顶部自定义导航高度需要减去
&-cart-sv-container {
height: calc(100vh - 90rpx - 136rpx);
}
.orderItemPrices {
display: flex;
flex-direction: column;
}
// 底部导航
&-navigation {
width: 100%;
height: 90rpx;
position: fixed;
bottom: 0;
.navigation {
height: 100%;
display: flex;
justify-content: flex-end;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
padding: 12rpx 0;
.btn {
line-height: 66rpx;
padding: 0 30rpx;
border-radius: 36rpx;
color: #ffffff;
}
.buy {
background-color: #ff7900;
margin: 0 30rpx;
}
}
}
}
</style>

341
xlcs-user/pagesOrder/orderList/orderList.vue Normal file
View File

@@ -0,0 +1,341 @@
<template>
<view>
<view class="wrap">
<view class="u-tabs-box">
<u-tabs-swiper ref="tabs" :current="current" :is-scroll="false" :list="list" activeColor="#f29100"
swiperWidth="750" @change="change"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" class="swiper-box">
<swiper-item v-for="idx in 5" :key="idx" class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view v-for="(res, index) in orderList[idx]" :key="res.id" class="order">
<view class="top">
<view class="left">
[{{ index + 1 }}]
<u-icon :size="30" color="rgb(94,94,94)" name="clock"></u-icon>
<u-icon :size="26" color="rgb(203,203,203)" name="arrow-right"></u-icon>
<view class="store">{{ res.createTime }}</view>
</view>
<view class="right">{{ res.param.orderStatusName }}</view>
</view>
<view v-for="(item, index) in res.orderItemList" :key="index" class="item">
<view class="left">
<image :src="item.imgUrl" mode="aspectFill"></image>
</view>
<view class="content">
<view class="title u-line-2">{{ item.skuName }}</view>
<view class="type">活动金额：￥{{ item.splitActivityAmount }}</view>
<view class="type">优惠券金额：￥{{ item.splitCouponAmount }}</view>
</view>
<view class="right">
<view class="price">￥{{ item.skuPrice }}</view>
<view class="number">x{{ item.skuNum }}</view>
<view class="u-type-error">￥{{ item.splitTotalAmount }}</view>
</view>
</view>
<view class="total">
<text class="total-price">
<text class="decimal">现价：￥{{ res.totalAmount }} 原价：￥{{ res.originalTotalAmount }}</text>
</text>
</view>
<view class="bottom">
<view class="more">
<u-icon color="rgb(203,203,203)" name="more-dot-fill"></u-icon>
</view>
<view class="logistics btn">查看物流</view>
<view class="exchange btn">卖了换钱</view>
<view class="evaluate btn">评价</view>
</view>
</view>
<u-gap height="30"></u-gap>
<u-loadmore :status="loadStatus[idx]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 订单列表
orderList: [[], [], [], [], []],
// 订单类型、状态与数量
list: [
{
name: '待付款',
orderStatus: 'UNPAID',
count: 0
},
{
name: '待发货',
orderStatus: 'WAITING_DELEVER',
count: 0
},
{
name: '待收货',
orderStatus: 'WAITING_TAKE',
count: 0
},
{
name: '待评价',
orderStatus: 'WAITING_COMMON',
count: 0
},
{
name: '已完结',
orderStatus: 'FINISHED',
count: 0
}
],
// 当前选中的选项卡
current: 0,
// 当前的swiper
swiperCurrent: 0,
// 每个选项卡数据加载的状态
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
// 每个选项卡初始页面
page: [1, 1, 1, 1, 1],
// 每个选项卡总页数
pages: [0, 0, 0, 0, 0],
// 每次列表请求的记录条数
limit: 5
};
},
async onLoad(options) {
// 请求不同状态的初始列表数据
await this.getOrderList(0, 'UNPAID');
await this.getOrderList(1, 'WAITING_DELEVER');
await this.getOrderList(2, 'WAITING_TAKE');
await this.getOrderList(3, 'WAITING_COMMON');
await this.getOrderList(4, 'FINISHED');
let current = +options.current;
if (current !== -1) {
this.change(current);
}
},
methods: {
// 触底加载
reachBottom() {
const orderStatus = this.list[this.current].orderStatus;
if (this.loadStatus[this.current] !== 'nomore') this.getOrderList(this.current, orderStatus);
},
// 页面数据
// idx是数组下标，orderStatus是订单状态的常量值，请求接口的时候需要使用
async getOrderList(idx, orderStatus) {
const result = await this.$u.api.getFindUserOrder({
page: this.page[idx],
limit: this.limit,
orderStatus
});
// 给每个选项卡存储总页数以及总记录数
this.pages[idx] = result.pages; // 设置总页数
this.list[idx].count = result.total; // 总记录数
// 对于每个选项卡
// 其中每一个如果总页数为0，则没有记录，loadmore组件状态为nomore
// 并且不需要执行后续操作内容
if (this.pages[idx] === 0) {
this.loadStatus.splice(idx, 1, 'nomore');
return;
}
// 如果每个选项卡的当前页值小于总页数值，
// 那么需要将请求后的数据与之前数据进行数据合并，
// 并且确认loadmore组件的状态为loadmore可加载更多
// 还需要将页码数进行+1操作
if (this.page[idx] <= this.pages[idx]) {
this.orderList[idx] = [...this.orderList[idx], ...result.records];
this.loadStatus.splice(idx, 1, 'loadmore');
this.page[idx] = this.page[idx] + 1;
} else {
this.loadStatus.splice(idx, 1, 'nomore');
}
},
// tab栏切换
change(index) {
this.swiperCurrent = index;
this.current = index;
const orderStatus = this.list[index].orderStatus;
this.getOrderList(index, orderStatus);
}
}
};
</script>
<style>
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
.order {
width: 710rpx;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
.top {
display: flex;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.store {
margin: 0 10rpx;
font-size: 32rpx;
font-weight: bold;
}
}
.right {
color: $u-type-warning-dark;
}
}
.item {
display: flex;
margin: 20rpx 0 0;
.left {
margin-right: 20rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
}
.content {
flex: 1;
.title {
font-size: 28rpx;
line-height: 50rpx;
}
.type {
margin: 10rpx 0;
font-size: 24rpx;
color: $u-tips-color;
}
.delivery-time {
color: #e5d001;
font-size: 24rpx;
}
}
.right {
margin-left: 10rpx;
padding-top: 20rpx;
text-align: right;
.decimal {
font-size: 24rpx;
margin-top: 4rpx;
}
.number {
color: $u-tips-color;
font-size: 24rpx;
}
}
}
.total {
margin-top: 20rpx;
text-align: right;
font-size: 24rpx;
.total-price {
font-size: 32rpx;
}
}
.bottom {
display: flex;
margin-top: 40rpx;
padding: 0 10rpx;
justify-content: space-between;
align-items: center;
.btn {
line-height: 52rpx;
width: 160rpx;
border-radius: 26rpx;
border: 2rpx solid $u-border-color;
font-size: 26rpx;
text-align: center;
color: $u-type-info-dark;
}
.evaluate {
color: $u-type-warning-dark;
border-color: $u-type-warning-dark;
}
}
}
.centre {
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin-bottom: 20rpx;
}
.tips {
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.btn {
margin: 80rpx auto;
width: 200rpx;
border-radius: 32rpx;
line-height: 64rpx;
color: #ffffff;
font-size: 26rpx;
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
}
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
}
.swiper-box {
flex: 1;
}
.swiper-item {
height: 100%;
}
</style>