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

创建微服务：microservice-provider-shop-8003；小程序商品列表筛选、商品详情完成

Browse Source
This commit is contained in:
小墨
2023-03-18 23:00:58 +08:00
parent ee7e2e9acb
commit 7eab148104
41 changed files with 1161 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
weixin-miniprogram/pages/shop/components/good-list-card.js
View File

@@ -15,23 +15,29 @@ Component({
* 组件的初始数据
*/
data: {
displayGoodsInfo: "",
displayInfo: "",
// displayGoodsInfo: "",
},
observers: {
'goodinfo': function (goodinfo) {
console.log("observers -> goodinfo", goodinfo)
this.setData({
displayGoodsInfo: JSON.stringify(this.properties.goodinfo)
})
}
},
// observers: {
// 'goodinfo': function (goodinfo) {
// console.log("observers -> goodinfo", goodinfo)
// this.setData({
// displayGoodsInfo: JSON.stringify(this.properties.goodinfo)
// })
// }
// },
/**
* 组件的方法列表
*/
methods: {
cardOntap(event) {
let dataset = event.currentTarget.dataset
console.log("cardOntap dataset", dataset)
let goodInfo = dataset.goodinfo
wx.navigateTo({
url: '/pages/shop/goodDetail?id=' + goodInfo.id,
})
}
}
})

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

@@ -1,5 +1,5 @@
<!--pages/shop/components/good-list-card.wxml-->
<view class="good-card-container">
<view class="good-card-container" bindtap="cardOntap" data-goodinfo="{{goodinfo}}">
<!-- <view class="good-card-image" style="background-image: url('../../../image/home.jpg');">
</view> -->
<view class="good-card-image" style="background-image: {{ 'url(' + goodinfo.picUrl + ');'}};">

85
weixin-miniprogram/pages/shop/goodDetail.js Normal file
View File

@@ -0,0 +1,85 @@
// pages/shop/goodDetail.js
const goodService = require("../../services/good")
Page({
/**
* 页面的初始数据
*/
data: {
goodId: -1,
goodinfo: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("goodDetail ->options", options)
let goodId = options.id
this.setData({
goodId: goodId
})
this.loadPageData()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
loadPageData() {
(async () => {
let goodDetail = await goodService.getGoodDetail(this.data.goodId)
console.log("goodDetail", goodDetail)
this.setData({
goodinfo: goodDetail
})
})();
}
})

4
weixin-miniprogram/pages/shop/goodDetail.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "商品详情"
}

20
weixin-miniprogram/pages/shop/goodDetail.wxml Normal file
View File

@@ -0,0 +1,20 @@
<!--pages/shop/goodDetail.wxml-->
<view>
<image class="good-image" src="{{goodinfo.picUrl}}" />
<view class="good-detail">
<view class="good-price good-price-counter">
<!-- 原价 -->
<view class="good-price-symbol">¥</view>
<view class="good-price-number">{{ goodinfo.counterPrice }}</view>
</view>
<view class="good-price good-price-retail">
<!-- 售价 -->
<view style="height:0.12em;" class="good-price-line"></view>
<view class="good-price-symbol">¥</view>
<view class="good-price-number">{{ goodinfo.retailPrice }}</view>
</view>
<view>
<text class="good-title line-wrap">{{ goodinfo.goodsName }}</text>
</view>
</view>
</view>

68
weixin-miniprogram/pages/shop/goodDetail.wxss Normal file
View File

@@ -0,0 +1,68 @@
/* pages/shop/goodDetail.wxss */
.good-image {
width: 100%;
height: 100vw;
}
.good-detail {
padding: 5px 18px;
}
/* 商品价格 */
.good-price {
white-space: nowrap;
font-weight: 700;
margin: 0;
display: inline;
position: relative;
}
.good-price-counter {
color: #fa4126;
font-size: 72rpx;
}
.good-price-retail {
color: #bbbbbb;
font-size: 32rpx;
margin: 0 0 0 18rpx;
font-weight: 500;
}
.good-price-counter .good-price-symbol {
font-size: 36rpx;
display: inline;
margin-right: 6rpx;
}
.good-price-retail .good-price-symbol {
font-size: 24rpx;
display: inline;
}
.good-price .good-price-number {
display: inline;
}
.good-price .good-price-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: 0;
background-color: currentColor;
}
/* 商品标题 */
.good-title {
width: 600rpx;
font-weight: 500;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 32rpx;
word-break: break-all;
color: #333333;
}

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

@@ -1,4 +1,7 @@
// pages/shop/shop.js
const goodService = require("../../services/good")
Page({
/**
@@ -6,48 +9,49 @@ Page({
*/
data: {
sidebarActiveId: -1,
searchText: '',
sidebarList: [
{
id: -1,
title: "全部分类",
},
{
id: 1,
title: "1",
},
{
id: 2,
title: "防疫物资",
},
{
id: 3,
title: "111",
},
{
id: 4,
title: "111",
},
{
id: 5,
title: "111",
categoryName: "全部分类",
},
// {
// id: 1,
// title: "1",
// },
// {
// id: 2,
// title: "防疫物资",
// },
// {
// id: 3,
// title: "111",
// },
// {
// id: 4,
// title: "111",
// },
// {
// id: 5,
// title: "111",
// },
],
tabbarList: [
{
id: 1,
goodsName: "温度计",
counterPrice: "10.00",
retailPrice: "12.00",
picUrl: "https://cdn-we-retail.ym.tencent.com/tsr/goods/gh-2b.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp",
},
{
id: 2,
goodsName: "医用口罩",
counterPrice: "100.00",
retailPrice: "12.50",
picUrl: "https://cdn-we-retail.ym.tencent.com/tsr/goods/muy-3a.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp",
}
// {
// id: 1,
// goodsName: "温度计",
// counterPrice: "10.00",
// retailPrice: "12.00",
// picUrl: "https://cdn-we-retail.ym.tencent.com/tsr/goods/gh-2b.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp",
// },
// {
// id: 2,
// goodsName: "医用口罩",
// counterPrice: "100.00",
// retailPrice: "12.50",
// picUrl: "https://cdn-we-retail.ym.tencent.com/tsr/goods/muy-3a.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp",
// }
]
},
@@ -55,7 +59,7 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.loadPageData();
},
/**
@@ -90,7 +94,8 @@ Page({
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log('sidebarActiveId', this.data.sidebarActiveId)
this.updatePageData()
},
/**
@@ -108,6 +113,20 @@ Page({
},
bindSearchInput(e) {
this.setData({
searchText: e.detail.value,
})
this.updatePageData()
},
clearSearchInput() {
this.setData({
searchText: '',
sidebarActiveId: -1,
})
this.updatePageData()
},
sidebarItemTap(event) {
// 清除原来的选中项，并设置新的选中项
// console.log("event.target", event.target)
@@ -117,6 +136,51 @@ Page({
this.setData({
sidebarActiveId: dataset.item.id,
})
this.loadPageData()
return
},
loadPageData() {
(async () => {
let goodCategoryListPromise = goodService.getGoodCategoryList()
let goodListPromise = goodService.getGoodList(this.data.sidebarActiveId, this.data.searchText)
Promise.all([
goodCategoryListPromise,
goodListPromise,
]).then(data => {
let goodCategoryList = data[0]
let goodList = data[1]
console.log("goodCategoryList", goodCategoryList)
console.log("goodList", goodList)
goodCategoryList.unshift({
id: -1,
categoryName: "全部分类",
order: 0
})
console.log("goodCategoryList", goodCategoryList)
this.setData({
sidebarList: goodCategoryList,
tabbarList: goodList,
})
})
})();
},
updatePageData() {
(async () => {
this.setData({
tabbarList: [],
})
let goodListPromise = goodService.getGoodList(this.data.sidebarActiveId, this.data.searchText)
Promise.all([
goodListPromise,
]).then(data => {
let goodList = data[0]
console.log("goodList", goodList)
this.setData({
tabbarList: goodList,
})
})
})();
}
})

5
weixin-miniprogram/pages/shop/shop.json
View File

@@ -1,6 +1,7 @@
{
"usingComponents": {
"listcard":"./components/good-list-card"
"listcard": "./components/good-list-card"
},
"navigationBarTitleText": "生活物资"
"navigationBarTitleText": "生活物资",
"enablePullDownRefresh": true
}

10
weixin-miniprogram/pages/shop/shop.wxml
View File

@@ -1,14 +1,20 @@
<!--pages/shop/shop.wxml-->
<view class="search">
<input id="search-input" class="search-input" maxlength="15" confirm-type="搜索" placeholder="搜索商品" value="{{searchText}}" bindblur="bindSearchInput" bindconfirm="bindSearchInput" />
</view>
<view class="container">
<!-- sidebar -->
<view class="sidebar">
<view class="sidebar-item {{ cate.id == sidebarActiveId ? 'active' : 'deactive' }}" wx:for="{{sidebarList}}" wx:for-item="cate" wx:key="id" bindtap="sidebarItemTap" data-item="{{cate}}" data-item2="aaa">
<text class="sidebar-item-text">{{ cate.title }}</text>
<view class="sidebar-item {{ cate.id == sidebarActiveId ? 'active' : 'deactive' }}" wx:for="{{sidebarList}}" wx:for-item="cate" wx:key="id" bindtap="sidebarItemTap" data-item="{{cate}}">
<text class="sidebar-item-text">{{ cate.categoryName }}</text>
</view>
</view>
<!-- tabbar -->
<view class="tabbar">
<view wx:if="{{ searchText || sidebarActiveId > 0 }}" style="text-align: center;">
<button type="default" size="mini" bindtap="clearSearchInput">清空筛选条件</button>
</view>
<view class="tabbar-group">
<listcard class="tabbar-item" wx:for="{{tabbarList}}" wx:for-item="item" wx:key="id" goodinfo="{{item}}" />
</view>

18
weixin-miniprogram/pages/shop/shop.wxss
View File

@@ -1,7 +1,23 @@
/* pages/shop/shop.wxss */
.search {
height: 36px;
}
.search-input {
margin: 4px 10px;
padding: 2px 18px;
height: 32px;
line-height: 28px;
background-color: rgb(226, 226, 226);
border-radius: 50px;
box-sizing: border-box;
text-align: center;
}
.container {
/* background-color: aqua; */
height: 100vh;
height: calc(100vh - 50px);
margin: 0;
padding: 0;
@@ -66,6 +82,6 @@
.no-more {
text-align: center;
color:grey;
color: grey;
margin: 20px;
}