小程序商品列表页优化；添加我的订单页面
This commit is contained in:
parent
960280b11e
commit
c9f171e5d5
3
TODOs.md
3
TODOs.md
@ -34,10 +34,11 @@ https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProf
|
|||||||
|
|
||||||
|
|
||||||
优点：
|
优点：
|
||||||
订单id使用 雪花id（分布式）
|
订单id使用 雪花id（可以分布式部署）
|
||||||
|
|
||||||
遇到的问题：
|
遇到的问题：
|
||||||
nacos CPU占满问题，解决方案：提issue，多次测试，找到问题（HTTPDebug），问题解决
|
nacos CPU占满问题，解决方案：提issue，多次测试，找到问题（HTTPDebug），问题解决
|
||||||
|
iPhone部分版本不支持webp格式图片
|
||||||
|
|
||||||
-----
|
-----
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,8 @@
|
|||||||
"pages/residents/reportHistory",
|
"pages/residents/reportHistory",
|
||||||
"pages/shop/shop",
|
"pages/shop/shop",
|
||||||
"pages/shop/goodDetail",
|
"pages/shop/goodDetail",
|
||||||
"pages/shop/orderConfirm",
|
"pages/shop/orderDetail",
|
||||||
|
"pages/shop/myOrder",
|
||||||
"pages/scan/entrance",
|
"pages/scan/entrance",
|
||||||
"pages/person/person"
|
"pages/person/person"
|
||||||
],
|
],
|
||||||
|
|||||||
@ -170,8 +170,12 @@ Page({
|
|||||||
|
|
||||||
magicButton() {
|
magicButton() {
|
||||||
wx.navigateTo({
|
wx.navigateTo({
|
||||||
|
// 扫码进社区
|
||||||
// url: "/pages/scan/entrance?a=1"
|
// url: "/pages/scan/entrance?a=1"
|
||||||
url: "/pages/shop/orderConfirm?orderId=1748800678865801225"
|
// 订单确认页
|
||||||
|
// url: "/pages/shop/orderDetail?orderId=1748800678865801225"
|
||||||
|
// 我的订单
|
||||||
|
url: '/pages/shop/myOrder'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -14,7 +14,9 @@
|
|||||||
<view>{{ menuItem.title }}</view>
|
<view>{{ menuItem.title }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<button type="primary" size="mini" bindtap="toggleDot">切换小红点</button>
|
<view style="text-align: center;">
|
||||||
<button type="warn" size="mini" bindtap="magicButton">扫描门禁</button>
|
<button type="warn" bindtap="magicButton">上帝按钮</button>
|
||||||
<text>调试信息：{{ debugText }}</text>
|
<!-- <button type="primary" size="mini" bindtap="toggleDot">切换小红点</button> -->
|
||||||
|
<!-- <text>调试信息：{{ debugText }}</text> -->
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -16,11 +16,17 @@ Page({
|
|||||||
avatarUrl: defaultAvatarUrl,
|
avatarUrl: defaultAvatarUrl,
|
||||||
nickName: "请登录",
|
nickName: "请登录",
|
||||||
displayUserId: "",
|
displayUserId: "",
|
||||||
menuList: [{
|
menuList: [
|
||||||
id: "logout",
|
{
|
||||||
color: 'red',
|
id: "myOrder",
|
||||||
title: "退出登录",
|
title: "我的订单",
|
||||||
}]
|
},
|
||||||
|
{
|
||||||
|
id: "logout",
|
||||||
|
color: 'red',
|
||||||
|
title: "退出登录",
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -111,6 +117,14 @@ Page({
|
|||||||
console.log("event.target", event.target)
|
console.log("event.target", event.target)
|
||||||
let menuId = event.target.id
|
let menuId = event.target.id
|
||||||
switch (menuId) {
|
switch (menuId) {
|
||||||
|
// 我的订单
|
||||||
|
case "myOrder":
|
||||||
|
wx.navigateTo({
|
||||||
|
url: '/pages/shop/myOrder'
|
||||||
|
})
|
||||||
|
break
|
||||||
|
|
||||||
|
// 退出登录
|
||||||
case "logout":
|
case "logout":
|
||||||
wx.clearStorageSync()
|
wx.clearStorageSync()
|
||||||
app.globalData.userInfo = null
|
app.globalData.userInfo = null
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.good-card-image {
|
.good-card-image {
|
||||||
background-color: bisque;
|
/* background-color: bisque; */
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|||||||
@ -88,7 +88,7 @@ Page({
|
|||||||
// 跳转订单查看页面（携带订单号）
|
// 跳转订单查看页面（携带订单号）
|
||||||
wx.navigateTo({
|
wx.navigateTo({
|
||||||
// url: "/pages/scan/entrance?a=1"
|
// url: "/pages/scan/entrance?a=1"
|
||||||
url: "/pages/shop/orderConfirm?orderId=" + orderId
|
url: "/pages/shop/orderDetail?orderId=" + orderId
|
||||||
})
|
})
|
||||||
})();
|
})();
|
||||||
},
|
},
|
||||||
@ -102,4 +102,4 @@ Page({
|
|||||||
})
|
})
|
||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
83
weixin-miniprogram/pages/shop/myOrder.js
Normal file
83
weixin-miniprogram/pages/shop/myOrder.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
// pages/shop/myOrder.js
|
||||||
|
|
||||||
|
const goodService = require("../../services/good")
|
||||||
|
const orderService = require("../../services/order")
|
||||||
|
|
||||||
|
Page({
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面的初始数据
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
orderList: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面加载
|
||||||
|
*/
|
||||||
|
onLoad(options) {
|
||||||
|
this.loadPageData()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面初次渲染完成
|
||||||
|
*/
|
||||||
|
onReady() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面显示
|
||||||
|
*/
|
||||||
|
onShow() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面隐藏
|
||||||
|
*/
|
||||||
|
onHide() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面卸载
|
||||||
|
*/
|
||||||
|
onUnload() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面相关事件处理函数--监听用户下拉动作
|
||||||
|
*/
|
||||||
|
onPullDownRefresh() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户点击右上角分享
|
||||||
|
*/
|
||||||
|
onShareAppMessage() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
loadPageData() {
|
||||||
|
(async () => {
|
||||||
|
let orderList = await orderService.listUserOrder()
|
||||||
|
console.log("orderList", orderList)
|
||||||
|
this.setData({
|
||||||
|
orderList: orderList.map(order => {
|
||||||
|
order.displayDate = order.orderDate.replace("T", " ")
|
||||||
|
return order
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
})
|
||||||
4
weixin-miniprogram/pages/shop/myOrder.json
Normal file
4
weixin-miniprogram/pages/shop/myOrder.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {},
|
||||||
|
"navigationBarTitleText": "我的订单"
|
||||||
|
}
|
||||||
17
weixin-miniprogram/pages/shop/myOrder.wxml
Normal file
17
weixin-miniprogram/pages/shop/myOrder.wxml
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!--pages/shop/myOrder.wxml-->
|
||||||
|
<view class="container">
|
||||||
|
<view class="order-card" wx:for="{{orderList}}" wx:for-item="item" wx:key="id">
|
||||||
|
<view>
|
||||||
|
<text class="order-info-key">订单号：</text>
|
||||||
|
<text>{{ item.id }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text class="order-info-key">创建时间：</text>
|
||||||
|
<text>{{ item.displayDate }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text class="order-info-key">订单状态：</text>
|
||||||
|
<text>{{ item.orderStatus }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
16
weixin-miniprogram/pages/shop/myOrder.wxss
Normal file
16
weixin-miniprogram/pages/shop/myOrder.wxss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
/* pages/shop/myOrder.wxss */
|
||||||
|
.container {
|
||||||
|
padding: 20px 8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info-key {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 90px;
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
// pages/shop/orderConfirm.js
|
// pages/shop/orderDetail.js
|
||||||
|
|
||||||
const orderService = require("../../services/order")
|
const orderService = require("../../services/order")
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<!--pages/shop/orderConfirm.wxml-->
|
<!--pages/shop/orderDetail.wxml-->
|
||||||
<view class="page-title-container">
|
<view class="page-title-container">
|
||||||
<view class="page-title-emoji">🎉</view>
|
<view class="page-title-emoji">🎉</view>
|
||||||
<view class="page-title">
|
<view class="page-title">
|
||||||
@ -47,4 +47,4 @@
|
|||||||
<view class="bottom-buttons">
|
<view class="bottom-buttons">
|
||||||
<view class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
|
<view class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -1,144 +1,144 @@
|
|||||||
/* pages/shop/orderConfirm.wxss */
|
/* pages/shop/orderDetail.wxss */
|
||||||
.page-title-container {
|
.page-title-container {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title-emoji {
|
.page-title-emoji {
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
/* border: 2px dashed black; */
|
/* border: 2px dashed black; */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-info {
|
.order-info {
|
||||||
background-color: tomato;
|
background-color: tomato;
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: #fff3f1;
|
color: #fff3f1;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.8em;
|
line-height: 1.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.good-list-title {
|
.good-list-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品列表样式 */
|
/* 商品列表样式 */
|
||||||
.good-card-container {
|
.good-card-container {
|
||||||
/* border: 1px solid grey; */
|
/* border: 1px solid grey; */
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
|
||||||
margin: 0 14px;
|
margin: 0 14px;
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 120px 1fr 50px;
|
grid-template-columns: 120px 1fr 50px;
|
||||||
grid-template-rows: 4fr 3fr;
|
grid-template-rows: 4fr 3fr;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
gap: 0 8px;
|
gap: 0 8px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.good-card-image {
|
.good-card-image {
|
||||||
width: 88px;
|
width: 88px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
background-color: teal;
|
background-color: teal;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border: 1px solid grey;
|
border: 1px solid grey;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
grid-row-end: 3;
|
grid-row-end: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.good-card-info {
|
.good-card-info {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品标题 */
|
/* 商品标题 */
|
||||||
.good-title-container {
|
.good-title-container {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
grid-column-end: 4;
|
grid-column-end: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.good-title {
|
.good-title {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
height: 72rpx;
|
height: 72rpx;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
line-height: 36rpx;
|
line-height: 36rpx;
|
||||||
margin: 4rpx 0;
|
margin: 4rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品价格 */
|
/* 商品价格 */
|
||||||
.good-price {
|
.good-price {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: inline;
|
display: inline;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.good-price-counter {
|
.good-price-counter {
|
||||||
color: #fa4126;
|
color: #fa4126;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.good-price .good-price-symbol {
|
.good-price .good-price-symbol {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.good-price .good-price-number {
|
.good-price .good-price-number {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 屏幕底部 确认支付按钮 */
|
/* 屏幕底部 确认支付按钮 */
|
||||||
.bottom-controlbox {
|
.bottom-controlbox {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
border-top: 1px solid grey;
|
border-top: 1px solid grey;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-buttons {
|
.bottom-buttons {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 254rpx;
|
width: 254rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#btn-confirm-payment {
|
#btn-confirm-payment {
|
||||||
background-color: #fa4126;
|
background-color: #fa4126;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
}
|
}
|
||||||
@ -8,8 +8,11 @@ Page({
|
|||||||
* 页面的初始数据
|
* 页面的初始数据
|
||||||
*/
|
*/
|
||||||
data: {
|
data: {
|
||||||
|
// 筛选条件
|
||||||
sidebarActiveId: -1,
|
sidebarActiveId: -1,
|
||||||
searchText: '',
|
searchText: '',
|
||||||
|
|
||||||
|
// 数据
|
||||||
sidebarList: [
|
sidebarList: [
|
||||||
{
|
{
|
||||||
id: -1,
|
id: -1,
|
||||||
@ -128,15 +131,20 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
sidebarItemTap(event) {
|
sidebarItemTap(event) {
|
||||||
|
console.log("sidebarActiveId", this.data.sidebarActiveId)
|
||||||
// 清除原来的选中项，并设置新的选中项
|
// 清除原来的选中项，并设置新的选中项
|
||||||
// console.log("event.target", event.target)
|
// console.log("event.target", event.target)
|
||||||
// console.log("event.currentTarget", event.currentTarget)
|
// console.log("event.currentTarget", event.currentTarget)
|
||||||
let dataset = event.currentTarget.dataset
|
let dataset = event.currentTarget.dataset
|
||||||
console.log("dataset", dataset)
|
console.log("dataset", dataset)
|
||||||
|
if (this.data.sidebarActiveId === dataset.item.id) {
|
||||||
|
console.log("点的分类已选中，跳过")
|
||||||
|
return // 点的分类就是当前激活的分类，直接跳过
|
||||||
|
}
|
||||||
this.setData({
|
this.setData({
|
||||||
sidebarActiveId: dataset.item.id,
|
sidebarActiveId: dataset.item.id,
|
||||||
})
|
})
|
||||||
this.loadPageData()
|
this.updatePageData()
|
||||||
return
|
return
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -167,10 +175,10 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
updatePageData() {
|
updatePageData() {
|
||||||
|
this.setData({
|
||||||
|
tabbarList: [],
|
||||||
|
});
|
||||||
(async () => {
|
(async () => {
|
||||||
this.setData({
|
|
||||||
tabbarList: [],
|
|
||||||
})
|
|
||||||
let goodListPromise = goodService.getGoodList(this.data.sidebarActiveId, this.data.searchText)
|
let goodListPromise = goodService.getGoodList(this.data.sidebarActiveId, this.data.searchText)
|
||||||
Promise.all([
|
Promise.all([
|
||||||
goodListPromise,
|
goodListPromise,
|
||||||
@ -180,7 +188,9 @@ Page({
|
|||||||
this.setData({
|
this.setData({
|
||||||
tabbarList: goodList,
|
tabbarList: goodList,
|
||||||
})
|
})
|
||||||
|
// wx.nextTick(() => {
|
||||||
|
// })
|
||||||
})
|
})
|
||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -16,7 +16,7 @@ export function createOrder(orderList) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 商品下单 */
|
/** 获取订单详情 */
|
||||||
export function getOrderDetail(orderId) {
|
export function getOrderDetail(orderId) {
|
||||||
return send_request({
|
return send_request({
|
||||||
url: '/shop/order/miniprogram/orderDetail',
|
url: '/shop/order/miniprogram/orderDetail',
|
||||||
@ -26,3 +26,15 @@ export function getOrderDetail(orderId) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 我的订单 */
|
||||||
|
export function listUserOrder() {
|
||||||
|
let userInfo = wx.getStorageSync("userInfo")
|
||||||
|
return send_request({
|
||||||
|
url: '/shop/order/miniprogram/listUserOrder',
|
||||||
|
method: "GET",
|
||||||
|
data: {
|
||||||
|
"userId": userInfo.id,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user