zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 🎨 优化订单备注在onShow时候丢失问题 以及 优化部分代码

master
Yer 2023-05-17 14:50:05 +08:00
parent d5ea5a4fa9
commit f31ff79a39
4 changed files with 259 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/m-buy/goods.vue
View File

@ -96,8 +96,7 @@
<!-- 数量 -->
<view class="goods-skus-number flex flex-a-c flex-j-sb">
<view class="view-class-title">数量</view>
<u-input class="view-class-input" input-align="right" v-model="num" type="number" @blur="numCheck()" />
<uni-number-box class="uNumber" :min="1" :max="999" v-model="num"></uni-number-box>
</view>
</scroll-view>
<!-- 按钮 -->
@ -112,8 +111,11 @@
<script>
import * as API_trade from '@/api/trade.js';
import setup from './popup';
import uniNumberBox from '@/components/uni-number-box'
export default {
components: {
uniNumberBox
},
data() {
return {
setup,

2
pages/mine/myCollect.vue
View File

@ -106,7 +106,7 @@
storeList: [], //店铺集合
};
},
onLoad() {
onShow() {
this.getGoodList();
this.getStoreList();
},

288
pages/order/fillorder.vue
View File

@ -1,7 +1,11 @@
<template>
<div class="wrapper">
<!-- 选择地址 -->
<div class="address-box" @click="clickToAddress()" v-if="shippingText == 'LOGISTICS'">
<div
class="address-box"
@click="clickToAddress()"
v-if="shippingText == 'LOGISTICS'"
>
<div class="user-box flex">
<div class="flex-8">
<div v-if="!address.id">请选择地址</div>
@ -10,8 +14,15 @@
<!-- 省市区 -->
<div class="flex flex-a-c">
<span class="default" v-if="address.isDefault">默认</span>
<div class="address-list" v-if="address.consigneeAddressPath.length != 0">
<span class="address-item" v-for="(item, index) in address.consigneeAddressPath" :key="index">
<div
class="address-list"
v-if="address.consigneeAddressPath.length != 0"
>
<span
class="address-item"
v-for="(item, index) in address.consigneeAddressPath"
:key="index"
>
{{ item }}
</span>
</div>
@ -45,13 +56,10 @@
{{ storeAddress.address }}
</div>
<!-- 联系手机号 -->
<div>
<div></div>
</div>
</div>
</div>
<div v-else>
请选择自提点
</div>
<div v-else>请选择自提点</div>
</div>
<u-icon name="arrow-right" style="color: #bababa"></u-icon>
</div>
@ -60,28 +68,50 @@
</div>
</div>
<!-- 开团信息 -->
<view class="group-box" v-if="isAssemble">
<view class="group-title">
<span v-if="pintuanFlage">你正在开团购买</span>
<span v-else>为你加入仅差<span>{{ routerVal.parentOrder.toBeGroupedNum }}</span>人的团购买</span>
<span v-else
>为你加入仅差<span>{{ routerVal.parentOrder.toBeGroupedNum }}</span
>人的团购买</span
>
</view>
<view class="group">
<view>
<u-image borderRadius="50%" shape="square" class="head-img" width="81rpx" height="81rpx"
:src="masterWay.face || userImage"></u-image>
<u-image
borderRadius="50%"
shape="square"
class="head-img"
width="81rpx"
height="81rpx"
:src="masterWay.face || userImage"
></u-image>
<view class="btn-one">团长</view>
</view>
<view class="line"> </view>
<view>
<!-- 如果有最后一名，显示最后一名，没有最后一名，显示等待参团 -->
<u-image class="head-img" v-if="endWay.face" :src="endWay.face" borderRadius="50%" shape="square"
width="81rpx" height="81rpx">
<u-image
class="head-img"
v-if="endWay.face"
:src="endWay.face"
borderRadius="50%"
shape="square"
width="81rpx"
height="81rpx"
>
<view slot="loading"></view>
</u-image>
<u-image class="head-img" borderRadius="50%" shape="square" v-else width="81rpx" height="81rpx"
:src="endWay.face || userImage"></u-image>
<u-image
class="head-img"
borderRadius="50%"
shape="square"
v-else
width="81rpx"
height="81rpx"
:src="endWay.face || userImage"
></u-image>
<view class="wait">{{ endWay.nickname || "等待参团" }}</view>
</view>
@ -89,7 +119,11 @@
</view>
<!-- 店铺商品信息 -->
<div class="box box2" v-for="(item, index) in orderMessage.cartList" :key="index">
<div
class="box box2"
v-for="(item, index) in orderMessage.cartList"
:key="index"
>
<div v-if="item.checked">
<div @click="navigateToStore(item)">
<div class="store-name">
@ -97,25 +131,42 @@
</div>
</div>
<div class="promotionNotice">{{ item.promotionNotice || "" }}</div>
<div class="flex goods-item" v-for="(val, i) in item.checkedSkuList" :key="i">
<div class="goods-image" @click="
<div
class="flex goods-item"
v-for="(val, i) in item.checkedSkuList"
:key="i"
>
<div
class="goods-image"
@click="
navigateTo(
'/pages/product/goods?id=' +
val.goodsSku.id +
'&goodsId=' +
val.goodsSku.goodsId
)
" :span="3">
<u-image borderRadius="10rpx" width="200rpx" height="200rpx" :src="val.goodsSku.thumbnail" alt />
"
:span="3"
>
<u-image
borderRadius="10rpx"
width="200rpx"
height="200rpx"
:src="val.goodsSku.thumbnail"
alt
/>
</div>
<div @click="
<div
@click="
navigateTo(
'/pages/product/goods?id=' +
val.goodsSku.id +
'&goodsId=' +
val.goodsSku.goodsId
)
" class="goods-detail">
"
class="goods-detail"
>
<div class="flex">
<p class="goods-name">{{ val.goodsSku.goodsName }}</p>
<span class="nums">x{{ val.num }}</span>
@ -125,22 +176,43 @@
<span class="goods-price">{{
$options.filters.goodsFormatPrice(val.purchasePrice)[0]
}}</span>
<span>.{{ $options.filters.goodsFormatPrice(val.purchasePrice)[1] }}</span>
<span
>.{{
$options.filters.goodsFormatPrice(val.purchasePrice)[1]
}}</span
>
</p>
</div>
</div>
<u-row>
<u-col :offset="0" :span="4">发票信息</u-col>
<u-col :span="8" class="tipsColor" textAlign="right" @click.native="invoice()">
<span v-if="receiptList">{{ receiptList.receiptTitle }} -
{{ receiptList.receiptContent }}</span>
<u-col
:span="8"
class="tipsColor"
textAlign="right"
@click.native="invoice()"
>
<span v-if="receiptList"
>{{ receiptList.receiptTitle }} -
{{ receiptList.receiptContent }}</span
>
<span v-else>不开发票</span>
</u-col>
</u-row>
<u-row>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :offset="0" :span="9" @click="shippingFlag = true">配送
<u-col
v-if="orderMessage.cartTypeEnum != 'VIRTUAL'"
:offset="0"
:span="9"
@click="shippingFlag = true"
>配送
</u-col>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="3" textAlign="right" @click="shippingFlag = true">
<u-col
v-if="orderMessage.cartTypeEnum != 'VIRTUAL'"
:span="3"
textAlign="right"
@click="shippingFlag = true"
>
{{
shippingMethod.find((e) => {
return e.value == shippingText;
@ -149,40 +221,72 @@
</u-col>
</u-row>
<u-row>
<u-col :offset="0" :span="4" class="tl" style="text-align: left">备注信息</u-col>
<u-col :offset="0" :span="4" class="tl" style="text-align: left"
>备注信息</u-col
>
<u-col :span="8" textAlign="right">
<u-input style="text-align: right" class="uinput" v-model="remarkVal[index].remark" />
<u-input
style="text-align: right"
class="uinput"
v-model="remarkVal[index].remark"
/>
</u-col>
</u-row>
</div>
</div>
<!-- 发票信息 -->
<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
<u-select @confirm="confirmDistribution" v-model="shippingFlag" v-if="shippingMethod.length != 0"
:list="shippingMethod"></u-select>
<invoices
:res="receiptList"
@callbackInvoice="callbackInvoice"
v-if="invoiceFlag"
/>
<u-select
@confirm="confirmDistribution"
v-model="shippingFlag"
v-if="shippingMethod.length != 0"
:list="shippingMethod"
></u-select>
<div class="box box5" v-if="orderMessage.priceDetailDTO">
<div>
<u-row>
<u-col :span="9">商品合计</u-col>
<u-col :span="3" textAlign="right">
<span>￥{{ orderMessage.priceDetailDTO.goodsPrice | unitPrice }}</span>
<span
>￥{{ orderMessage.priceDetailDTO.goodsPrice | unitPrice }}</span
>
</u-col>
</u-row>
</div>
<div>
<u-row v-if="shippingText == 'LOGISTICS'">
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="7">运费</u-col>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="5" class="tr tipsColor" textAlign="right">
<span v-if="orderMessage.priceDetailDTO.freightPrice == 0">包邮</span>
<span v-else>￥{{
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="7"
>运费</u-col
>
<u-col
v-if="orderMessage.cartTypeEnum != 'VIRTUAL'"
:span="5"
class="tr tipsColor"
textAlign="right"
>
<span v-if="orderMessage.priceDetailDTO.freightPrice == 0"
>包邮</span
>
<span v-else
>￥{{
orderMessage.priceDetailDTO.freightPrice | unitPrice
}}</span>
}}</span
>
</u-col>
</u-row>
</div>
<u-row v-if="orderMessage.priceDetailDTO.goodsPrice != 0 && orderMessage.priceDetailDTO.goodsPrice != null">
<u-row
v-if="
orderMessage.priceDetailDTO.goodsPrice != 0 &&
orderMessage.priceDetailDTO.goodsPrice != null
"
>
<u-col :offset="0" :span="9" @click="GET_Discount()">优惠券</u-col>
<u-col
:span="3"
@ -206,9 +310,14 @@
<div>
<u-row>
<u-col :span="9">优惠金额</u-col>
<u-col :span="3" textAlign="right" v-if="orderMessage.priceDetailDTO.couponPrice">
<u-col
:span="3"
textAlign="right"
v-if="orderMessage.priceDetailDTO.couponPrice"
>
<span class="main-color">
-￥{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</span>
-￥{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</span
>
</u-col>
<u-col :span="3" textAlign="right" v-else>0.00</u-col>
</u-row>
@ -217,9 +326,11 @@
<u-row>
<u-col :span="6">活动优惠</u-col>
<u-col :span="6" class="tr tipsColor" textAlign="right">
<span v-if="orderMessage.priceDetailDTO.discountPrice">-￥{{
<span v-if="orderMessage.priceDetailDTO.discountPrice"
>-￥{{
orderMessage.priceDetailDTO.discountPrice | unitPrice
}}</span>
}}</span
>
<span v-else>0.00</span>
</u-col>
</u-row>
@ -228,7 +339,12 @@
<!-- 配送地区没有提示 -->
<div class="notSupportFreight" v-if="notSupportFreight.length != 0">
<u-notice-bar style="width: 100%" :volume-icon="false" mode="horizontal" :list="notSupportFreightGoodsList">
<u-notice-bar
style="width: 100%"
:volume-icon="false"
mode="horizontal"
:list="notSupportFreightGoodsList"
>
</u-notice-bar>
</div>
@ -239,14 +355,24 @@
<div v-if="!orderMessage.priceDetailDTO.payPoint" class="number">
<span>¥</span>
<span class="price">{{
$options.filters.goodsFormatPrice(orderMessage.priceDetailDTO.flowPrice)[0]
$options.filters.goodsFormatPrice(
orderMessage.priceDetailDTO.flowPrice
)[0]
}}</span>
<span>.{{ $options.filters.goodsFormatPrice(orderMessage.priceDetailDTO.flowPrice)[1] }}
<span
>.{{
$options.filters.goodsFormatPrice(
orderMessage.priceDetailDTO.flowPrice
)[1]
}}
</span>
</div>
<span v-else class="number"><span style="margin-right: 10rpx">{{
<span v-else class="number"
><span style="margin-right: 10rpx">{{
orderMessage.priceDetailDTO.payPoint | unitPrice
}}</span>积分</span>
}}</span
>积分</span
>
</div>
<div class="navRiv" @click="createTradeFun()">
<!-- #ifndef MP-WEIXIN -->
@ -264,9 +390,9 @@ import * as API_Trade from "@/api/trade";
import * as API_Address from "@/api/address";
import * as API_Order from "@/api/order";
import invoices from "@/pages/order/invoice/setInvoice";
import { mapState } from "vuex";
import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
import configs from '@/config/config'
import configs from "@/config/config";
export default {
onLoad: function (val) {
this.routerVal = val;
@ -275,7 +401,6 @@ export default {
invoices,
},
watch: {},
data() {
return {
configs,
@ -295,7 +420,8 @@ export default {
},
],
isAssemble: false, //是否拼团
couponNums: "", //结算页面优惠券数量
// 判断是否填写过备注
remarkFlag: false,
selectAddressId: "",
routerVal: "",
params: {},
@ -311,6 +437,7 @@ export default {
data: "",
// 存储备注
remarkVal: [],
remarkVal1: "",
detail: "", //返回的所有数据
endWay: "", //最后一个参团人
masterWay: "", //团长信息
@ -320,6 +447,19 @@ export default {
storeAddress: "",
};
},
watch: {
// 监听备注 并在 vuex 中存储
remarkVal: {
handler(val) {
this.$store.commit("setRemark", val);
},
immediate: true,
deep: true,
},
},
computed: {
...mapState(["remark"]),
},
filters: {
/**
* 发票收据类型
@ -368,12 +508,18 @@ export default {
},
async onShow() {
// 判断是否存在写过备注信息的商品
if (this.remark && this.remark.length > 0) {
this.remarkFlag = true;
}
uni.showLoading({
mask: true,
});
await this.getOrderList();
await this.getDistribution();
if (this.$store.state.isShowToast){ uni.hideLoading() };
if (this.$store.state.isShowToast) {
uni.hideLoading();
}
if (this.routerVal.way == "PINTUAN") {
this.isAssemble = true;
this.routerVal.parentOrder = JSON.parse(
@ -411,7 +557,8 @@ export default {
// 点击跳转地址
clickToAddress() {
this.navigateTo(
`/pages/mine/address/address?from=cart&way=${this.routerVal.way
`/pages/mine/address/address?from=cart&way=${
this.routerVal.way
}&parentOrder=${encodeURIComponent(
JSON.stringify(this.routerVal.parentOrder)
)}`
@ -419,8 +566,7 @@ export default {
},
clickToStoreAddress() {
this.navigateTo(
`/pages/mine/address/storeAddress?from=cart&way=${this.routerVal.way
}&storeId=${this.remarkVal[0].storeId}`
`/pages/mine/address/storeAddress?from=cart&way=${this.routerVal.way}&storeId=${this.remarkVal[0].storeId}`
);
},
@ -496,7 +642,7 @@ export default {
createTradeFun() {
// 防抖
this.$u.throttle(() => {
if (this.shippingText === 'SELF_PICK_UP') {
if (this.shippingText === "SELF_PICK_UP") {
if (!this.storeAddress.id) {
uni.showToast({
title: "请选择提货点",
@ -505,7 +651,7 @@ export default {
});
return false;
}
} else if (this.shippingText === 'LOGISTICS') {
} else if (this.shippingText === "LOGISTICS") {
if (!this.address.id) {
uni.showToast({
title: "请选择地址",
@ -602,12 +748,14 @@ export default {
},
// 获取配送列表
async getDistribution() {
let shopRes = await API_Trade.shippingMethodList({ way: this.routerVal.way });
let shopRes = await API_Trade.shippingMethodList({
way: this.routerVal.way,
});
let shopList;
if (shopRes.data.success) {
shopList = shopRes.data.result;
let way = [];
console.log(shopList)
console.log(shopList);
this.shippingWay.forEach((item) => {
shopList.forEach((child) => {
if (item.value == child) {
@ -650,12 +798,22 @@ export default {
url: "/pages/order/myOrder?status=0",
});
}
let repeatData;
res.data.result.cartList.forEach((item, index) => {
this.remarkVal[index] = {
remark: item.remark,
// 如果已经写过备注信息的话赋值
repeatData = {
remark: this.remarkFlag
? this.remark[index].storeId == item.storeId
? this.remark[index].remark
: item.remark
: item.remark,
storeId: item.storeId,
};
this.$set(this.remarkVal, index, repeatData);
});
this.orderMessage = res.data.result;
/**
* 为了避免路径传值在h5中超出限制问题
@ -673,7 +831,7 @@ export default {
res.data.result.memberAddress.consigneeAddressPath.split(",");
}
if (res.data.result.storeAddress) {
this.storeAddress = res.data.result.storeAddress
this.storeAddress = res.data.result.storeAddress;
console.log("storeAddress", this.storeAddress);
}
if (

6
store/index.js
View File

@ -7,6 +7,7 @@ Vue.use(Vuex);
const store = new Vuex.Store({
state: {
isShowToast:false, // 是否在展示Toast中
remark:[], //填写订单备注
shareLink:"", //分享链接
verificationKey: "", //获取key表示验证通过
distributionId:"", //分销员Id 如果当前账户从未登录过时记录
@ -26,6 +27,11 @@ const store = new Vuex.Store({
state.userName = "";
state.hasLogin = false;
},
// 设置填写订单中备注
setRemark(state, remark) {
state.remark = remark;
}
},
actions: {},
});