coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

小程序商品列表页优化；添加我的订单页面

Browse Source
This commit is contained in:
程序员小墨 2023-03-20 23:34:59 +08:00
parent 960280b11e
commit c9f171e5d5
17 changed files with 331 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
TODOs.md
View File

@ -34,10 +34,11 @@ https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProf
优点：
订单id使用 雪花id（分布式）
订单id使用 雪花id（可以分布式部署）
遇到的问题：
nacos CPU占满问题，解决方案：提issue，多次测试，找到问题（HTTPDebug），问题解决
iPhone部分版本不支持webp格式图片
-----

3
weixin-miniprogram/app.json
View File

@ -7,7 +7,8 @@
"pages/residents/reportHistory",
"pages/shop/shop",
"pages/shop/goodDetail",
"pages/shop/orderConfirm",
"pages/shop/orderDetail",
"pages/shop/myOrder",
"pages/scan/entrance",
"pages/person/person"
],

6
weixin-miniprogram/pages/index/index.js
View File

@ -170,8 +170,12 @@ Page({
magicButton() {
wx.navigateTo({
// 扫码进社区
// url: "/pages/scan/entrance?a=1"
url: "/pages/shop/orderConfirm?orderId=1748800678865801225"
// 订单确认页
// url: "/pages/shop/orderDetail?orderId=1748800678865801225"
// 我的订单
url: '/pages/shop/myOrder'
})
}
})

8
weixin-miniprogram/pages/index/index.wxml
View File

@ -14,7 +14,9 @@
<view>{{ menuItem.title }}</view>
</view>
</view>
<button type="primary" size="mini" bindtap="toggleDot">切换小红点</button>
<button type="warn" size="mini" bindtap="magicButton">扫描门禁</button>
<text>调试信息：{{ debugText }}</text>
<view style="text-align: center;">
<button type="warn" bindtap="magicButton">上帝按钮</button>
<!-- <button type="primary" size="mini" bindtap="toggleDot">切换小红点</button> -->
<!-- <text>调试信息：{{ debugText }}</text> -->
</view>
</view>

24
weixin-miniprogram/pages/person/person.js
View File

@ -16,11 +16,17 @@ Page({
avatarUrl: defaultAvatarUrl,
nickName: "请登录",
displayUserId: "",
menuList: [{
id: "logout",
color: 'red',
title: "退出登录",
}]
menuList: [
{
id: "myOrder",
title: "我的订单",
},
{
id: "logout",
color: 'red',
title: "退出登录",
}
]
},
/**
@ -111,6 +117,14 @@ Page({
console.log("event.target", event.target)
let menuId = event.target.id
switch (menuId) {
// 我的订单
case "myOrder":
wx.navigateTo({
url: '/pages/shop/myOrder'
})
break
// 退出登录
case "logout":
wx.clearStorageSync()
app.globalData.userInfo = null

2
weixin-miniprogram/pages/shop/components/good-list-card.wxss
View File

@ -8,7 +8,7 @@
}
.good-card-image {
background-color: bisque;
/* background-color: bisque; */
background-position: center;
background-repeat: no-repeat;
background-size: cover;

4
weixin-miniprogram/pages/shop/goodDetail.js
View File

@ -88,7 +88,7 @@ Page({
// 跳转订单查看页面（携带订单号）
wx.navigateTo({
// 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
View 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
View File

@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "我的订单"
}

17
weixin-miniprogram/pages/shop/myOrder.wxml Normal file
View 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
View 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;
}

2
weixin-miniprogram/pages/shop/orderConfirm.js → weixin-miniprogram/pages/shop/orderDetail.js
View File

@ -1,4 +1,4 @@
// pages/shop/orderConfirm.js
// pages/shop/orderDetail.js
const orderService = require("../../services/order")

0
weixin-miniprogram/pages/shop/orderConfirm.json → weixin-miniprogram/pages/shop/orderDetail.json
View File

4
weixin-miniprogram/pages/shop/orderConfirm.wxml → weixin-miniprogram/pages/shop/orderDetail.wxml
View File

@ -1,4 +1,4 @@
<!--pages/shop/orderConfirm.wxml-->
<!--pages/shop/orderDetail.wxml-->
<view class="page-title-container">
<view class="page-title-emoji">🎉</view>
<view class="page-title">
@ -47,4 +47,4 @@
<view class="bottom-buttons">
<view class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
</view>
</view>
</view>

288
weixin-miniprogram/pages/shop/orderConfirm.wxss → weixin-miniprogram/pages/shop/orderDetail.wxss
View File

@ -1,144 +1,144 @@
/* pages/shop/orderConfirm.wxss */
.page-title-container {
margin-top: 16px;
text-align: center;
}
.page-title-emoji {
font-size: 72px;
}
.page-title {
/* border: 2px dashed black; */
display: inline-block;
padding: 15px 20px;
font-size: 20px;
}
.order-info {
background-color: tomato;
padding: 10px 18px;
margin: 10px;
border-radius: 10px;
color: #fff3f1;
font-weight: 500;
line-height: 1.8em;
}
.good-list-title {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
font-weight: 500;
font-size: 18px;
}
/* 商品列表样式 */
.good-card-container {
/* border: 1px solid grey; */
border-radius: 12px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
margin: 0 14px;
padding: 15px 20px;
display: grid;
grid-template-columns: 120px 1fr 50px;
grid-template-rows: 4fr 3fr;
place-items: center;
gap: 0 8px;
margin-bottom: 10px;
}
.good-card-image {
width: 88px;
height: 88px;
background-color: teal;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid grey;
border-radius: 5px;
grid-row-start: 1;
grid-row-end: 3;
}
.good-card-info {
width: 100%;
}
/* 商品标题 */
.good-title-container {
grid-column-start: 2;
grid-column-end: 4;
}
.good-title {
font-size: 30rpx;
color: #333;
font-weight: 400;
display: -webkit-box;
height: 72rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
line-height: 36rpx;
margin: 4rpx 0;
}
/* 商品价格 */
.good-price {
white-space: nowrap;
font-weight: 700;
margin: 0;
display: inline;
position: relative;
}
.good-price-counter {
color: #fa4126;
font-size: 36rpx;
}
.good-price .good-price-symbol {
font-size: 24rpx;
display: inline;
}
.good-price .good-price-number {
display: inline;
}
/* 屏幕底部 确认支付按钮 */
.bottom-controlbox {
background-color: white;
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
right: 0;
width: 100%;
padding-top: 6px;
padding-bottom: 12px;
border-top: 1px solid grey;
text-align: center;
}
.bottom-buttons {
height: 100%;
display: inline-block;
}
.btn {
width: 254rpx;
height: 80rpx;
display: inline-grid;
align-items: center;
justify-content: center;
color: white;
}
#btn-confirm-payment {
background-color: #fa4126;
color: #fff;
border-radius: 40rpx;
}
/* pages/shop/orderDetail.wxss */
.page-title-container {
margin-top: 16px;
text-align: center;
}
.page-title-emoji {
font-size: 72px;
}
.page-title {
/* border: 2px dashed black; */
display: inline-block;
padding: 15px 20px;
font-size: 20px;
}
.order-info {
background-color: tomato;
padding: 10px 18px;
margin: 10px;
border-radius: 10px;
color: #fff3f1;
font-weight: 500;
line-height: 1.8em;
}
.good-list-title {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
font-weight: 500;
font-size: 18px;
}
/* 商品列表样式 */
.good-card-container {
/* border: 1px solid grey; */
border-radius: 12px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
margin: 0 14px;
padding: 15px 20px;
display: grid;
grid-template-columns: 120px 1fr 50px;
grid-template-rows: 4fr 3fr;
place-items: center;
gap: 0 8px;
margin-bottom: 10px;
}
.good-card-image {
width: 88px;
height: 88px;
background-color: teal;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid grey;
border-radius: 5px;
grid-row-start: 1;
grid-row-end: 3;
}
.good-card-info {
width: 100%;
}
/* 商品标题 */
.good-title-container {
grid-column-start: 2;
grid-column-end: 4;
}
.good-title {
font-size: 30rpx;
color: #333;
font-weight: 400;
display: -webkit-box;
height: 72rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
line-height: 36rpx;
margin: 4rpx 0;
}
/* 商品价格 */
.good-price {
white-space: nowrap;
font-weight: 700;
margin: 0;
display: inline;
position: relative;
}
.good-price-counter {
color: #fa4126;
font-size: 36rpx;
}
.good-price .good-price-symbol {
font-size: 24rpx;
display: inline;
}
.good-price .good-price-number {
display: inline;
}
/* 屏幕底部 确认支付按钮 */
.bottom-controlbox {
background-color: white;
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
right: 0;
width: 100%;
padding-top: 6px;
padding-bottom: 12px;
border-top: 1px solid grey;
text-align: center;
}
.bottom-buttons {
height: 100%;
display: inline-block;
}
.btn {
width: 254rpx;
height: 80rpx;
display: inline-grid;
align-items: center;
justify-content: center;
color: white;
}
#btn-confirm-payment {
background-color: #fa4126;
color: #fff;
border-radius: 40rpx;
}

20
weixin-miniprogram/pages/shop/shop.js
View File

@ -8,8 +8,11 @@ Page({
* 页面的初始数据
*/
data: {
// 筛选条件
sidebarActiveId: -1,
searchText: '',
// 数据
sidebarList: [
{
id: -1,
@ -128,15 +131,20 @@ Page({
},
sidebarItemTap(event) {
console.log("sidebarActiveId", this.data.sidebarActiveId)
// 清除原来的选中项，并设置新的选中项
// console.log("event.target", event.target)
// console.log("event.currentTarget", event.currentTarget)
let dataset = event.currentTarget.dataset
console.log("dataset", dataset)
if (this.data.sidebarActiveId === dataset.item.id) {
console.log("点的分类已选中，跳过")
return // 点的分类就是当前激活的分类，直接跳过
}
this.setData({
sidebarActiveId: dataset.item.id,
})
this.loadPageData()
this.updatePageData()
return
},
@ -167,10 +175,10 @@ Page({
},
updatePageData() {
this.setData({
tabbarList: [],
});
(async () => {
this.setData({
tabbarList: [],
})
let goodListPromise = goodService.getGoodList(this.data.sidebarActiveId, this.data.searchText)
Promise.all([
goodListPromise,
@ -180,7 +188,9 @@ Page({
this.setData({
tabbarList: goodList,
})
// wx.nextTick(() => {
// })
})
})();
}
})
})

14
weixin-miniprogram/services/order.js
View File

@ -16,7 +16,7 @@ export function createOrder(orderList) {
})
}
/** 商品下单 */
/** 获取订单详情 */
export function getOrderDetail(orderId) {
return send_request({
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,
}
})
}