From 1c75580749035f86e301226cf2502508857d47a7 Mon Sep 17 00:00:00 2001 From: xiumubai <1547702880@qq.com> Date: Thu, 9 Feb 2023 10:38:47 +0800 Subject: [PATCH 01/17] =?UTF-8?q?style:=20=E9=A6=96=E9=A1=B5=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 4 +- app.wxss | 10 + components/goods-card/index.js | 23 +++ components/goods-card/index.json | 4 + components/goods-card/index.wxml | 19 ++ components/goods-card/index.wxss | 70 +++++++ modal/category.js | 189 +++++++++++++++++++ modal/swiper.js | 12 ++ pages/index/components/goods-list/index.js | 23 +++ pages/index/components/goods-list/index.json | 6 + pages/index/components/goods-list/index.wxml | 13 ++ pages/index/components/goods-list/index.wxss | 34 ++++ pages/index/components/procate/index.js | 22 +++ pages/index/components/procate/index.json | 4 + pages/index/components/procate/index.wxml | 13 ++ pages/index/components/procate/index.wxss | 46 +++++ pages/index/index.js | 7 + pages/index/index.json | 7 +- pages/index/index.wxml | 32 +++- pages/index/index.wxss | 7 + project.config.json | 2 +- 21 files changed, 537 insertions(+), 10 deletions(-) create mode 100644 components/goods-card/index.js create mode 100644 components/goods-card/index.json create mode 100644 components/goods-card/index.wxml create mode 100644 components/goods-card/index.wxss create mode 100644 modal/category.js create mode 100644 modal/swiper.js create mode 100644 pages/index/components/goods-list/index.js create mode 100644 pages/index/components/goods-list/index.json create mode 100644 pages/index/components/goods-list/index.wxml create mode 100644 pages/index/components/goods-list/index.wxss create mode 100644 pages/index/components/procate/index.js create mode 100644 pages/index/components/procate/index.json create mode 100644 pages/index/components/procate/index.wxml create mode 100644 pages/index/components/procate/index.wxss diff --git a/app.json b/app.json index b8a333d..089460b 100644 --- a/app.json +++ b/app.json @@ -7,9 +7,9 @@ ], "window": { "backgroundTextStyle": "light", - "navigationBarBackgroundColor": "#fff", + "navigationBarBackgroundColor": "#9C0211", "navigationBarTitleText": "Weixin", - "navigationBarTextStyle": "black" + "navigationBarTextStyle": "white" }, "tabBar": { "color": "#252933", diff --git a/app.wxss b/app.wxss index 777998b..4653885 100644 --- a/app.wxss +++ b/app.wxss @@ -4,4 +4,14 @@ display: flex; flex-direction: column; box-sizing: border-box; + background-color: #f3f5f7; + padding-bottom: 49px; +} + +.bg-white { + background-color: white; +} + +.img { + width: 100%; } diff --git a/components/goods-card/index.js b/components/goods-card/index.js new file mode 100644 index 0000000..42ca51a --- /dev/null +++ b/components/goods-card/index.js @@ -0,0 +1,23 @@ +// components/goods-card/index.js +Component({ + /** + * 组件的属性列表 + */ + properties: { + + }, + + /** + * 组件的初始数据 + */ + data: { + + }, + + /** + * 组件的方法列表 + */ + methods: { + + } +}) diff --git a/components/goods-card/index.json b/components/goods-card/index.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/components/goods-card/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/goods-card/index.wxml b/components/goods-card/index.wxml new file mode 100644 index 0000000..2f54b1a --- /dev/null +++ b/components/goods-card/index.wxml @@ -0,0 +1,19 @@ + + + + + + + + 亲爱的/情人节网红款/19枝 + 情人节新品 + + ¥399 + ¥499 + + + + + + + diff --git a/components/goods-card/index.wxss b/components/goods-card/index.wxss new file mode 100644 index 0000000..cbd4ff7 --- /dev/null +++ b/components/goods-card/index.wxss @@ -0,0 +1,70 @@ +/* components/goods-card/index.wxss */ +.product-item { + display: inline-block; + width: 46.96132597%; + margin: 0 1.51933702% 3.03867403%; + border-radius: 8px; + vertical-align: top; + overflow: hidden; + background-color: #fff; +} + +.navigation { + width: 100%; + height: 100%; + display: block; +} + +.product-item-info { + padding: 8px 10px; + display: flex; + flex-direction: column; +} + +.product-item-info-name { + font-weight: 600; + font-size: 15px; + line-height: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.product-item-info-promo { + padding-top: 4px; + padding-bottom: 3px; + font-size: 12px; + color: #71797f; +} + +.product-item-info-bottom { + margin-top: 8px; + display: flex; +} +.pre { + margin-right: 2px; +} + +.product-item-info-price { + font-size: 15px; + line-height: 24px; + font-weight: bold; +} + +.product-item-info-origin-price { + flex: 1; + font-size: 12px; + line-height: 26px; + color: #71797f; + text-decoration-line: line-through; + margin-left: 6%; +} + +.product-item-info-btn image { + width: 24px; + height: 24px; +} + +.img { + width: 100%; +} diff --git a/modal/category.js b/modal/category.js new file mode 100644 index 0000000..8cc1dbb --- /dev/null +++ b/modal/category.js @@ -0,0 +1,189 @@ +/** + * @description: 首页分类导航 + * @returns {*} + */ + +export const categorylist = [ + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/flowers1.png', + text: '韩式花束', + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/flowers1.png', + text: '韩式花束', + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/flowers1.png', + text: '韩式花束', + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/flowers1.png', + text: '韩式花束', + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/flowers1.png', + text: '韩式花束', + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/srzf2.png?v122', + text: '生日祝福', + small: true, + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/srzf2.png?v122', + text: '生日祝福', + small: true, + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/srzf2.png?v122', + text: '生日祝福', + small: true, + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/srzf2.png?v122', + text: '生日祝福', + small: true, + }, + { + url: 'https://img02.hua.com//chanpintupian/2022shouye/srzf2.png?v122', + text: '生日祝福', + small: true, + }, +]; + +export const catg = { + code: 200, + message: '成功', + data: [ + { + children: [ + { + name: '电子书刊', + id: 1, + }, + { + name: '音像', + id: 2, + }, + { + name: '英文原版', + id: 3, + }, + { + name: '文艺', + id: 4, + }, + { + name: '少儿', + id: 5, + }, + { + name: '人文社科', + id: 6, + }, + { + name: '经管励志', + id: 7, + }, + { + name: '生活', + id: 8, + }, + { + name: '科技', + id: 9, + }, + { + name: '教育', + id: 10, + }, + { + name: '港台图书', + id: 11, + }, + { + name: '其他', + id: 12, + }, + ], + name: '手机数码', + id: 1, + }, + { + children: [ + { + name: '手机通讯', + id: 13, + }, + { + name: '运营商', + id: 14, + }, + { + name: '手机配件', + id: 15, + }, + ], + name: '电脑、办公', + id: 2, + }, + { + children: [ + { + name: '大 家 电', + id: 16, + }, + { + name: '厨卫大电', + id: 17, + }, + { + name: '厨房小电', + id: 18, + }, + { + name: '生活电器', + id: 19, + }, + { + name: '个护健康', + id: 20, + }, + { + name: '五金家装', + id: 21, + }, + ], + name: '家用电器', + id: 3, + }, + { + children: [ + { + name: '摄影摄像', + id: 22, + }, + { + name: '数码配件', + id: 23, + }, + { + name: '智能设备', + id: 24, + }, + { + name: '影音娱乐', + id: 25, + }, + { + name: '电子教育', + id: 26, + }, + { + name: '虚拟商品', + id: 27, + }, + ], + }, + ], +}; diff --git a/modal/swiper.js b/modal/swiper.js new file mode 100644 index 0000000..5458756 --- /dev/null +++ b/modal/swiper.js @@ -0,0 +1,12 @@ +/** + * @description: 轮播数据 + * @returns {*} + */ +export const backgroundList = [ + 'https://img02.hua.com/zhuanti/valentine/2023/23_valentine_banner_m.jpg', + 'https://img02.hua.com/slider/22_nuandong_banner_m.jpg', + 'https://img02.hua.com/slider/22_birthday.jpg', +]; + +export const banner = + 'https://img02.hua.com/zhuanti/valentine/2023/23_valentine_mbanner_m.png?a1'; diff --git a/pages/index/components/goods-list/index.js b/pages/index/components/goods-list/index.js new file mode 100644 index 0000000..d94a26b --- /dev/null +++ b/pages/index/components/goods-list/index.js @@ -0,0 +1,23 @@ +// components/goods-list/index.js +Component({ + /** + * 组件的属性列表 + */ + properties: { + + }, + + /** + * 组件的初始数据 + */ + data: { + + }, + + /** + * 组件的方法列表 + */ + methods: { + + } +}) diff --git a/pages/index/components/goods-list/index.json b/pages/index/components/goods-list/index.json new file mode 100644 index 0000000..981de64 --- /dev/null +++ b/pages/index/components/goods-list/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "goods-card": "/components/goods-card/index" + } +} \ No newline at end of file diff --git a/pages/index/components/goods-list/index.wxml b/pages/index/components/goods-list/index.wxml new file mode 100644 index 0000000..563d7f6 --- /dev/null +++ b/pages/index/components/goods-list/index.wxml @@ -0,0 +1,13 @@ + + + + 送恋人/爱情鲜花 + + + + + + + 查看更多 + + \ No newline at end of file diff --git a/pages/index/components/goods-list/index.wxss b/pages/index/components/goods-list/index.wxss new file mode 100644 index 0000000..48375c7 --- /dev/null +++ b/pages/index/components/goods-list/index.wxss @@ -0,0 +1,34 @@ +/* components/goods-list/index.wxss */ +.product { + margin-top: 24px; + padding-bottom: 12px; +} + +.product-title { + font-size: 19px; + line-height: 26px; + text-align: center; + font-weight: bold; + padding: 0 12px; + color: #232628; +} + +.product-list { + padding: 7px; + margin-top: 12px; +} + +.product-more { + margin: 0 1.51933702%; +} +.product-more-btn { + display: block; + margin: 0 auto; + background: #ffffff; + border-radius: 20px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 14px; + color: rgba(35, 38, 40, 0.7); +} diff --git a/pages/index/components/procate/index.js b/pages/index/components/procate/index.js new file mode 100644 index 0000000..6edc8e9 --- /dev/null +++ b/pages/index/components/procate/index.js @@ -0,0 +1,22 @@ +// pages/index/components/procate/index.js +Component({ + /** + * 组件的属性列表 + */ + properties: { + category: { + type: Array, + value: [], + }, + }, + + /** + * 组件的初始数据 + */ + data: {}, + + /** + * 组件的方法列表 + */ + methods: {}, +}); diff --git a/pages/index/components/procate/index.json b/pages/index/components/procate/index.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/pages/index/components/procate/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/index/components/procate/index.wxml b/pages/index/components/procate/index.wxml new file mode 100644 index 0000000..7bee75d --- /dev/null +++ b/pages/index/components/procate/index.wxml @@ -0,0 +1,13 @@ + + + + + + {{item.text}} + + + \ No newline at end of file diff --git a/pages/index/components/procate/index.wxss b/pages/index/components/procate/index.wxss new file mode 100644 index 0000000..e3dfb0c --- /dev/null +++ b/pages/index/components/procate/index.wxss @@ -0,0 +1,46 @@ +/* pages/index/components/procate/index.wxss */ +.procate { + display: flex; + align-items: center; + flex-wrap: wrap; + margin: 0 14px; + padding: 10px 0; + border-radius: 8px; +} + +.procate-item { + flex: 1; + min-width: 20%; + max-width: 20%; +} + +.procate-nav { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} +.procate-img { + width: 44px; + height: 44px; +} + +.procate-nav text { + margin-top: 4px; + font-size: 12px; + font-weight: 600; +} + +.procate-item.small { + margin-top: 20px; +} +.procate-item.small .procate-img { + width: 19px; + height: 20px; +} + +.procate-item.small text { + font-weight: 400; +} diff --git a/pages/index/index.js b/pages/index/index.js index 99ab7af..8b877f2 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -1,3 +1,5 @@ +import { backgroundList, banner } from '../../modal/swiper'; +import { categorylist } from '../../modal/category'; Component({ pageLifetimes: { show() { @@ -8,4 +10,9 @@ Component({ } }, }, + data: { + background: backgroundList, + category: categorylist, + banner: banner, + }, }); diff --git a/pages/index/index.json b/pages/index/index.json index 8a09782..f2a4ee6 100644 --- a/pages/index/index.json +++ b/pages/index/index.json @@ -1,6 +1,9 @@ { "usingComponents": { "van-button": "@vant/weapp/button/index", - "van-icon": "@vant/weapp/icon/index" - } + "van-icon": "@vant/weapp/icon/index", + "goods-list": "./components/goods-list/index", + "procate": "./components/procate/index" + }, + "navigationBarTitleText": "慕尚花坊" } \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 0fdc399..f29af15 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,8 +1,30 @@ - 首页 - 按钮 - - - + + + + + + + + + + + + + + + + + + + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index e69de29..3f47565 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -0,0 +1,7 @@ +.festival-banner { + margin-top: 14px; +} + +.swiper-box { + margin-bottom: 12px; +} diff --git a/project.config.json b/project.config.json index 2a48e73..74ae95e 100644 --- a/project.config.json +++ b/project.config.json @@ -50,7 +50,7 @@ }, "compileType": "miniprogram", "libVersion": "2.19.4", - "appid": "wx1a1229a503f7e641", + "appid": "wx566be3b9e68287c9", "projectname": "miniprogram-92", "condition": {}, "editorSetting": { -- Gitee From 9164e9653e6f88c498c27ce815dd84096f0447a1 Mon Sep 17 00:00:00 2001 From: xiumubai <1547702880@qq.com> Date: Thu, 9 Feb 2023 15:15:12 +0800 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 3 +- app.wxss | 1 + components/filter-group/index.js | 34 ++++++ components/filter-group/index.json | 6 + components/filter-group/index.wxml | 20 +++ components/filter-group/index.wxss | 40 ++++++ components/filter/index.js | 82 +++++++++++++ components/filter/index.json | 6 + components/filter/index.wxml | 39 ++++++ components/filter/index.wxss | 51 ++++++++ modal/category.js | 188 ++++++++--------------------- pages/goods/list/index.js | 70 +++++++++++ pages/goods/list/index.json | 9 ++ pages/goods/list/index.wxml | 21 ++++ pages/goods/list/index.wxss | 1 + 15 files changed, 434 insertions(+), 137 deletions(-) create mode 100644 components/filter-group/index.js create mode 100644 components/filter-group/index.json create mode 100644 components/filter-group/index.wxml create mode 100644 components/filter-group/index.wxss create mode 100644 components/filter/index.js create mode 100644 components/filter/index.json create mode 100644 components/filter/index.wxml create mode 100644 components/filter/index.wxss create mode 100644 pages/goods/list/index.js create mode 100644 pages/goods/list/index.json create mode 100644 pages/goods/list/index.wxml create mode 100644 pages/goods/list/index.wxss diff --git a/app.json b/app.json index 089460b..9acd48a 100644 --- a/app.json +++ b/app.json @@ -3,7 +3,8 @@ "pages/index/index", "pages/category/category", "pages/cart/cart", - "pages/info/info" + "pages/info/info", + "pages/goods/list/index" ], "window": { "backgroundTextStyle": "light", diff --git a/app.wxss b/app.wxss index 4653885..cc93c7c 100644 --- a/app.wxss +++ b/app.wxss @@ -1,4 +1,5 @@ /**app.wxss**/ + .container { height: 100%; display: flex; diff --git a/components/filter-group/index.js b/components/filter-group/index.js new file mode 100644 index 0000000..0ab8c35 --- /dev/null +++ b/components/filter-group/index.js @@ -0,0 +1,34 @@ +// components/filter-group/index.js +Component({ + options: { + multipleSlots: true, + }, + properties: { + show: { + type: Boolean, + observer(newVal, oldVal) { + console.log('show', newVal, oldVal); + this.setData({ visible: newVal }); + }, + }, + closeBtn: { + type: Boolean, + value: false, + }, + }, + + data: { visible: false }, + + methods: { + reset() { + this.triggerEvent('reset'); + }, + confirm() { + this.triggerEvent('confirm'); + }, + close() { + this.triggerEvent('showFilterPopupClose'); + this.setData({ visible: false }); + }, + }, +}); diff --git a/components/filter-group/index.json b/components/filter-group/index.json new file mode 100644 index 0000000..b94c3e8 --- /dev/null +++ b/components/filter-group/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "van-popup": "@vant/weapp/popup/index" + } +} \ No newline at end of file diff --git a/components/filter-group/index.wxml b/components/filter-group/index.wxml new file mode 100644 index 0000000..8e3afef --- /dev/null +++ b/components/filter-group/index.wxml @@ -0,0 +1,20 @@ + + + + + + + 重置 + + 确定 + + + + diff --git a/components/filter-group/index.wxss b/components/filter-group/index.wxss new file mode 100644 index 0000000..8940b5e --- /dev/null +++ b/components/filter-group/index.wxss @@ -0,0 +1,40 @@ +/* components/filter-group/index.wxss */ +.content .filter-btns-wrap { + width: 100%; + position: absolute; + bottom: calc(20rpx + env(safe-area-inset-bottom)); + display: flex; + flex-direction: row; + border-radius: 10rpx 0 0 10rpx; + padding: 16rpx 32rpx; + border-top: 1rpx solid #e5e5e5; + box-sizing: border-box; +} + +.filter-btn { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + font-size: 28rpx; + font-weight: 500; + height: 80rpx; +} + +.btn-reset { + color: #fa4126; + background: rgba(255, 255, 255, 1); + position: relative; + border: 1rpx solid #fa4126; + border-radius: 84rpx 0 0 84rpx; +} + +.btn-confirm { + border-radius: 0 84rpx 84rpx 0; + border: 1rpx solid #fa4126; +} + +.btn-confirm { + color: #fff; + background: #fa4126; +} diff --git a/components/filter/index.js b/components/filter/index.js new file mode 100644 index 0000000..06bbac2 --- /dev/null +++ b/components/filter/index.js @@ -0,0 +1,82 @@ +Component({ + options: { + multipleSlots: true, + }, + + properties: { + overall: { + type: Number, + value: 1, + observer(overall) { + this.setData({ + overall, + }); + }, + }, + layout: { + type: Number, + value: 1, + observer(layout) { + this.setData({ + layout, + }); + }, + }, + sorts: { + type: String, + value: '', + observer(sorts) { + this.setData({ + sorts, + }); + }, + }, + color: { + type: String, + value: '#FA550F', + }, + }, + + data: { + layout: 1, + overall: 1, + sorts: '', + }, + + methods: { + onChangeShowAction() { + const { layout } = this.data; + const nextLayout = layout === 1 ? 0 : 1; + this.triggerEvent('change', { ...this.properties, layout: nextLayout }); + }, + + handlePriseSort() { + const { sorts } = this.data; + this.triggerEvent('change', { + ...this.properties, + overall: 0, + sorts: sorts === 'desc' ? 'asc' : 'desc', + }); + }, + + open() { + this.triggerEvent('showFilterPopup', { + show: true, + }); + }, + + onOverallAction() { + const { overall } = this.data; + const nextOverall = overall === 1 ? 0 : 1; + const nextData = { + sorts: '', + prices: [], + }; + this.triggerEvent('change', { + ...this.properties, + ...nextData, + overall: nextOverall, + }); + }, + }, +}); diff --git a/components/filter/index.json b/components/filter/index.json new file mode 100644 index 0000000..6f50345 --- /dev/null +++ b/components/filter/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "van-icon": "@vant/weapp/icon/index" + } +} \ No newline at end of file diff --git a/components/filter/index.wxml b/components/filter/index.wxml new file mode 100644 index 0000000..6cbae59 --- /dev/null +++ b/components/filter/index.wxml @@ -0,0 +1,39 @@ + + + + + + 综合 + + + 价格 + + + + + + + 筛选 + + + + + + + + diff --git a/components/filter/index.wxss b/components/filter/index.wxss new file mode 100644 index 0000000..e9bd6bd --- /dev/null +++ b/components/filter/index.wxss @@ -0,0 +1,51 @@ +/* components/filter/index.wxss */ +.filter-wrap { + width: 100%; + height: 88rpx; + display: flex; + justify-content: space-between; + position: relative; + background: #fff; +} + +.filter-right-content { + height: 100%; + flex-basis: 100rpx; + text-align: center; + line-height: 88rpx; +} + +.filter-left-content { + height: 100%; + display: flex; + flex-grow: 2; + flex-flow: row nowrap; + justify-content: space-between; +} + +.filter-left-content .filter-item { + flex: 1; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 26rpx; + line-height: 36rpx; + font-weight: 400; + color: rgba(51, 51, 51, 1); +} + +.filter-left-content .filter-item .filter-price { + display: flex; + flex-direction: column; + margin-left: 6rpx; + justify-content: space-between; +} + +.filter-left-content .filter-item .wr-filter { + margin-left: 8rpx; +} + +.filter-left-content .filter-active-item { + color: #fa550f; +} diff --git a/modal/category.js b/modal/category.js index 8cc1dbb..59c08dd 100644 --- a/modal/category.js +++ b/modal/category.js @@ -51,139 +51,55 @@ export const categorylist = [ }, ]; -export const catg = { - code: 200, - message: '成功', - data: [ - { - children: [ - { - name: '电子书刊', - id: 1, - }, - { - name: '音像', - id: 2, - }, - { - name: '英文原版', - id: 3, - }, - { - name: '文艺', - id: 4, - }, - { - name: '少儿', - id: 5, - }, - { - name: '人文社科', - id: 6, - }, - { - name: '经管励志', - id: 7, - }, - { - name: '生活', - id: 8, - }, - { - name: '科技', - id: 9, - }, - { - name: '教育', - id: 10, - }, - { - name: '港台图书', - id: 11, - }, - { - name: '其他', - id: 12, - }, - ], - name: '手机数码', - id: 1, - }, - { - children: [ - { - name: '手机通讯', - id: 13, - }, - { - name: '运营商', - id: 14, - }, - { - name: '手机配件', - id: 15, - }, - ], - name: '电脑、办公', - id: 2, - }, - { - children: [ - { - name: '大 家 电', - id: 16, - }, - { - name: '厨卫大电', - id: 17, - }, - { - name: '厨房小电', - id: 18, - }, - { - name: '生活电器', - id: 19, - }, - { - name: '个护健康', - id: 20, - }, - { - name: '五金家装', - id: 21, - }, - ], - name: '家用电器', - id: 3, - }, - { - children: [ - { - name: '摄影摄像', - id: 22, - }, - { - name: '数码配件', - id: 23, - }, - { - name: '智能设备', - id: 24, - }, - { - name: '影音娱乐', - id: 25, - }, - { - name: '电子教育', - id: 26, - }, - { - name: '虚拟商品', - id: 27, - }, - ], - }, - ], -}; +export const category = [ + { + name: '爱礼精选', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/flowers1.png', + id: 1, + }, + { + name: '鲜花玫瑰', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/forever1.png', + id: 2, + }, + { + name: '永生玫瑰', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/cake1.png', + id: 3, + }, + { + name: '玫瑰珠宝', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/gifts1.png', + id: 4, + }, + { + name: '香水体护', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/chocolate1.png', + id: 5, + }, + { + name: '玫瑰家居', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/srzf2.png?v122', + id: 6, + }, + { + name: '开业花礼', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/bbqh2.png?v122', + id: 7, + }, + { + name: '生日祝福', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/swky2.png?v132', + id: 8, + }, + { + name: '一周一花', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/znjn2.png?v122', + id: 9, + }, + { + name: '网红绿植', + imageUrl: 'https://img02.hua.com//chanpintupian/2022shouye/qytg2.png?v111', + id: 10, + }, +]; diff --git a/pages/goods/list/index.js b/pages/goods/list/index.js new file mode 100644 index 0000000..b3ed59b --- /dev/null +++ b/pages/goods/list/index.js @@ -0,0 +1,70 @@ +// pages/goods/list/index.js +const initFilters = { + overall: 1, + sorts: '', + layout: 0, +}; + +Page({ + /** + * 页面的初始数据 + */ + data: { + layout: 0, + sorts: '', + overall: 1, + show: false, + }, + + showFilterPopup() { + this.setData({ + show: true, + }); + }, + + showFilterPopupClose() { + this.setData({ + show: false, + }); + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) {}, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() {}, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() {}, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() {}, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() {}, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() {}, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() {}, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() {}, +}); diff --git a/pages/goods/list/index.json b/pages/goods/list/index.json new file mode 100644 index 0000000..a976bdd --- /dev/null +++ b/pages/goods/list/index.json @@ -0,0 +1,9 @@ +{ + "usingComponents": { + "filter": "/components/filter/index", + "filter-group": "/components/filter-group/index", + "goods-card": "/components/goods-card/index", + "van-popup": "@vant/weapp/popup/index" + }, + "navigationBarTitleText": "商品列表" +} \ No newline at end of file diff --git a/pages/goods/list/index.wxml b/pages/goods/list/index.wxml new file mode 100644 index 0000000..272b982 --- /dev/null +++ b/pages/goods/list/index.wxml @@ -0,0 +1,21 @@ + + + + + + 12313 + + + + + + + + + \ No newline at end of file diff --git a/pages/goods/list/index.wxss b/pages/goods/list/index.wxss new file mode 100644 index 0000000..e2a65a7 --- /dev/null +++ b/pages/goods/list/index.wxss @@ -0,0 +1 @@ +/* pages/goods/list/index.wxss */ \ No newline at end of file -- Gitee From 497e0ffd8b081ebd15985cceeaca0d8726a41812 Mon Sep 17 00:00:00 2001 From: xiumubai <1547702880@qq.com> Date: Thu, 9 Feb 2023 18:31:18 +0800 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=E5=88=86=E7=B1=BB=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modal/category.js | 214 ++++++++++++++++++ pages/category/category.js | 26 ++- pages/category/category.json | 5 +- pages/category/category.wxml | 7 +- pages/category/category.wxss | 9 + pages/category/components/c-sidebar/index.js | 20 ++ .../category/components/c-sidebar/index.json | 4 + .../category/components/c-sidebar/index.wxml | 13 ++ .../category/components/c-sidebar/index.wxss | 61 +++++ .../components/goods-category/index.js | 29 +++ .../components/goods-category/index.json | 6 + .../components/goods-category/index.wxml | 18 ++ .../components/goods-category/index.wxss | 55 +++++ 13 files changed, 455 insertions(+), 12 deletions(-) create mode 100644 pages/category/components/c-sidebar/index.js create mode 100644 pages/category/components/c-sidebar/index.json create mode 100644 pages/category/components/c-sidebar/index.wxml create mode 100644 pages/category/components/c-sidebar/index.wxss create mode 100644 pages/category/components/goods-category/index.js create mode 100644 pages/category/components/goods-category/index.json create mode 100644 pages/category/components/goods-category/index.wxml create mode 100644 pages/category/components/goods-category/index.wxss diff --git a/modal/category.js b/modal/category.js index 59c08dd..2f522d7 100644 --- a/modal/category.js +++ b/modal/category.js @@ -103,3 +103,217 @@ export const category = [ id: 10, }, ]; + +// export const categoryList = []; +export const getCategoryList = [ + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/cate-1.png', + name: '真情告白', + id: 1, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '浪漫求婚', + id: 2, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '珍贵纪念', + id: 3, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '爱意表达', + id: 4, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-1.png', + name: '爱礼精选', + id: 1, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '经典永续', + id: 5, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '玫瑰经典', + id: 6, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-2.png', + name: '鲜花玫瑰', + id: 2, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '玫瑰公仔', + id: 7, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '星座金典', + id: 8, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '玫瑰系列', + id: 9, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '音乐系列', + id: 10, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '经典永续', + id: 11, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-3.png', + name: '永生玫瑰', + id: 3, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '星座经典', + id: 12, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '爱锁系列', + id: 13, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '玫瑰公仔', + id: 14, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-4.png', + name: '玫瑰珠宝', + id: 4, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '香水', + id: 15, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '织恋', + id: 16, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '沉爱', + id: 17, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-5.png', + name: '香水体护', + id: 5, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '香氛蜡烛', + id: 18, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '香氛散香', + id: 19, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '玫瑰礼品', + id: 20, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '香氛挂件', + id: 21, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-6.png', + name: '玫瑰家居', + id: 6, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '开业花礼', + id: 22, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '会议用花', + id: 23, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-7.png', + name: '开业花礼', + id: 7, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '送恋人', + id: 24, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '送朋友', + id: 25, + }, + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '送长辈', + id: 26, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-8.png', + name: '生日祝福', + id: 8, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '一周一花', + id: 27, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-9.png', + name: '一周一花', + id: 9, + }, + { + children: [ + { + imageUrl: 'http://39.98.123.211:8300/images/null', + name: '网红绿植', + id: 28, + }, + ], + imageUrl: 'http://39.98.123.211:8300/images/cate-10.png', + name: '网红绿植', + id: 10, + }, +]; diff --git a/pages/category/category.js b/pages/category/category.js index f83348a..b44d505 100644 --- a/pages/category/category.js +++ b/pages/category/category.js @@ -1,11 +1,19 @@ -Component({ - pageLifetimes: { - show() { - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - this.getTabBar().setData({ - selected: 1, - }); - } - }, +import { getCategoryList } from '../..//modal/category'; +Page({ + data: { + list: getCategoryList, + }, + + onShow() { + if (typeof this.getTabBar === 'function' && this.getTabBar()) { + this.getTabBar().setData({ + selected: 1, + }); + } + }, + onChange() { + wx.navigateTo({ + url: '/pages/goods/list/index', + }); }, }); diff --git a/pages/category/category.json b/pages/category/category.json index 8835af0..9997119 100644 --- a/pages/category/category.json +++ b/pages/category/category.json @@ -1,3 +1,6 @@ { - "usingComponents": {} + "navigationBarTitleText": "分类", + "usingComponents": { + "goods-category": "./components/goods-category/index" + } } \ No newline at end of file diff --git a/pages/category/category.wxml b/pages/category/category.wxml index 2a4fdbb..5a7e02b 100644 --- a/pages/category/category.wxml +++ b/pages/category/category.wxml @@ -1,4 +1,7 @@ - - 分类 + + diff --git a/pages/category/category.wxss b/pages/category/category.wxss index e69de29..a78b7db 100644 --- a/pages/category/category.wxss +++ b/pages/category/category.wxss @@ -0,0 +1,9 @@ +.wrap { + height: 100vh; + overflow: hidden; +} + +.goods-category { + background-color: #f6f6f6 !important; + height: 100%; +} diff --git a/pages/category/components/c-sidebar/index.js b/pages/category/components/c-sidebar/index.js new file mode 100644 index 0000000..10aca0e --- /dev/null +++ b/pages/category/components/c-sidebar/index.js @@ -0,0 +1,20 @@ +// pages/category/components/c-siderbar/index.js +Component({ + properties: { + list: { + type: Array, + value: [], + }, + }, + data: { + activeKey: 0, + }, + methods: { + setActive(activeKey) { + return this.setData({ activeKey }); + }, + onClick(e) { + this.setActive(e.currentTarget.dataset.index); + }, + }, +}); diff --git a/pages/category/components/c-sidebar/index.json b/pages/category/components/c-sidebar/index.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/pages/category/components/c-sidebar/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/category/components/c-sidebar/index.wxml b/pages/category/components/c-sidebar/index.wxml new file mode 100644 index 0000000..52c68c4 --- /dev/null +++ b/pages/category/components/c-sidebar/index.wxml @@ -0,0 +1,13 @@ + + + + + {{ item.name }} + + + + \ No newline at end of file diff --git a/pages/category/components/c-sidebar/index.wxss b/pages/category/components/c-sidebar/index.wxss new file mode 100644 index 0000000..896f172 --- /dev/null +++ b/pages/category/components/c-sidebar/index.wxss @@ -0,0 +1,61 @@ +/* pages/category/components/c-siderbar/index.wxss */ + +.c-sidebar { + background-color: #f5f5f5; + width: 180rpx; + height: 100vh; +} + +.c-sidebar-item-container { + background-color: white; +} + +.c-sidebar-item { + background-color: white; +} +.c-sidebar-item { + display: flex; + justify-content: center; + text-align: center; + background-color: #f5f5f5; + color: #222427; + padding: 20rpx 0; + font-size: 26rpx; +} + +.c-sidebar-item.active { + position: relative; + background: white; +} + +.c-sidebar-item.active::before { + content: ''; + position: absolute; + width: 6rpx; + height: 48rpx; + background-color: #fa4126; + left: 0; + top: 50%; + transform: translate(0, -50%); + border-radius: 64rpx; + border-top-left-radius: 35px; + border-top-right-radius: 35px; + border-bottom-right-radius: 35px; + border-bottom-left-radius: 35px; +} + +.c-sidebar-item__text { + width: 136rpx; + height: 36rpx; + padding: 8rpx 0; + line-height: 36rpx; + text-align: center; + font-size: 28rpx; + color: #666666; +} + +.c-sidebar-item.active .c-sidebar-item__text { + background-color: white; + border-radius: 36rpx; + color: #fa4126; +} diff --git a/pages/category/components/goods-category/index.js b/pages/category/components/goods-category/index.js new file mode 100644 index 0000000..b665bcc --- /dev/null +++ b/pages/category/components/goods-category/index.js @@ -0,0 +1,29 @@ +Component({ + properties: { + category: { + type: Array, + value: [], + }, + initActive: { + type: Array, + value: [], + observer(newVal, oldVal) { + if (newVal[0] !== oldVal[0]) { + this.setActiveKey(newVal[0], 0); + } + }, + }, + }, + data: { + activeKey: 0, + defaultImg: + 'https://img02.hua.com/m/category/Classification/m_category_flowers_use_1-2Girlfriend.png', + }, + methods: { + onParentChange(event) { + this.setActiveKey(event.detail.index, 0).then(() => { + this.triggerEvent('change', [this.data.activeKey]); + }); + }, + }, +}); diff --git a/pages/category/components/goods-category/index.json b/pages/category/components/goods-category/index.json new file mode 100644 index 0000000..0db18a8 --- /dev/null +++ b/pages/category/components/goods-category/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "c-sidebar": "../c-sidebar/index" + } +} \ No newline at end of file diff --git a/pages/category/components/goods-category/index.wxml b/pages/category/components/goods-category/index.wxml new file mode 100644 index 0000000..181e15b --- /dev/null +++ b/pages/category/components/goods-category/index.wxml @@ -0,0 +1,18 @@ + + + + + + + 女装 + + + + + + + {{item.name}} + + + + diff --git a/pages/category/components/goods-category/index.wxss b/pages/category/components/goods-category/index.wxss new file mode 100644 index 0000000..8797517 --- /dev/null +++ b/pages/category/components/goods-category/index.wxss @@ -0,0 +1,55 @@ +.goods-category { + display: flex; +} + +.goods-category__right { + height: 100vh; + flex: auto; + position: relative; + overflow: scroll; + -webkit-overflow-scrolling: touch; + background-color: white; + padding: 28rpx 34rpx 0rpx 32rpx; +} + +.goods-category-normal-item-title { + font-size: 28rpx; + font-weight: 500; +} + +.goods-category-normal-item-container { + background-color: #fff; + border-radius: 8rpx; + padding-top: 28rpx; + margin-top: -24rpx; + margin-bottom: 30rpx; + display: flex; + flex-wrap: wrap; +} + +.category-card-item { + display: inline-block; + width: 33.33333333%; + padding: 0.57142857rem 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.category-card-item .img-bg { + width: 60px; + height: 60px; + background-color: aliceblue; + border-radius: 50%; +} +.img-bg image { + width: 100%; + height: 100%; +} + +.category-card-item .item-title { + font-size: 24rpx; + color: #666666; + margin-top: 20rpx; +} -- Gitee From d2a70e561ed7e0d0a241b6e152eb34d147a66d3d Mon Sep 17 00:00:00 2001 From: xiumubai <1547702880@qq.com> Date: Thu, 9 Feb 2023 20:16:11 +0800 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=E5=88=86=E7=B1=BB=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/category/components/c-sidebar/index.js | 20 ------ .../category/components/c-sidebar/index.json | 4 -- .../category/components/c-sidebar/index.wxml | 13 ---- .../category/components/c-sidebar/index.wxss | 61 ------------------- .../components/goods-category/index.js | 18 ++---- .../components/goods-category/index.wxml | 21 +++++-- .../components/goods-category/index.wxss | 60 ++++++++++++++++++ 7 files changed, 81 insertions(+), 116 deletions(-) delete mode 100644 pages/category/components/c-sidebar/index.js delete mode 100644 pages/category/components/c-sidebar/index.json delete mode 100644 pages/category/components/c-sidebar/index.wxml delete mode 100644 pages/category/components/c-sidebar/index.wxss diff --git a/pages/category/components/c-sidebar/index.js b/pages/category/components/c-sidebar/index.js deleted file mode 100644 index 10aca0e..0000000 --- a/pages/category/components/c-sidebar/index.js +++ /dev/null @@ -1,20 +0,0 @@ -// pages/category/components/c-siderbar/index.js -Component({ - properties: { - list: { - type: Array, - value: [], - }, - }, - data: { - activeKey: 0, - }, - methods: { - setActive(activeKey) { - return this.setData({ activeKey }); - }, - onClick(e) { - this.setActive(e.currentTarget.dataset.index); - }, - }, -}); diff --git a/pages/category/components/c-sidebar/index.json b/pages/category/components/c-sidebar/index.json deleted file mode 100644 index e8cfaaf..0000000 --- a/pages/category/components/c-sidebar/index.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "component": true, - "usingComponents": {} -} \ No newline at end of file diff --git a/pages/category/components/c-sidebar/index.wxml b/pages/category/components/c-sidebar/index.wxml deleted file mode 100644 index 52c68c4..0000000 --- a/pages/category/components/c-sidebar/index.wxml +++ /dev/null @@ -1,13 +0,0 @@ - - - - - {{ item.name }} - - - - \ No newline at end of file diff --git a/pages/category/components/c-sidebar/index.wxss b/pages/category/components/c-sidebar/index.wxss deleted file mode 100644 index 896f172..0000000 --- a/pages/category/components/c-sidebar/index.wxss +++ /dev/null @@ -1,61 +0,0 @@ -/* pages/category/components/c-siderbar/index.wxss */ - -.c-sidebar { - background-color: #f5f5f5; - width: 180rpx; - height: 100vh; -} - -.c-sidebar-item-container { - background-color: white; -} - -.c-sidebar-item { - background-color: white; -} -.c-sidebar-item { - display: flex; - justify-content: center; - text-align: center; - background-color: #f5f5f5; - color: #222427; - padding: 20rpx 0; - font-size: 26rpx; -} - -.c-sidebar-item.active { - position: relative; - background: white; -} - -.c-sidebar-item.active::before { - content: ''; - position: absolute; - width: 6rpx; - height: 48rpx; - background-color: #fa4126; - left: 0; - top: 50%; - transform: translate(0, -50%); - border-radius: 64rpx; - border-top-left-radius: 35px; - border-top-right-radius: 35px; - border-bottom-right-radius: 35px; - border-bottom-left-radius: 35px; -} - -.c-sidebar-item__text { - width: 136rpx; - height: 36rpx; - padding: 8rpx 0; - line-height: 36rpx; - text-align: center; - font-size: 28rpx; - color: #666666; -} - -.c-sidebar-item.active .c-sidebar-item__text { - background-color: white; - border-radius: 36rpx; - color: #fa4126; -} diff --git a/pages/category/components/goods-category/index.js b/pages/category/components/goods-category/index.js index b665bcc..0addcff 100644 --- a/pages/category/components/goods-category/index.js +++ b/pages/category/components/goods-category/index.js @@ -4,15 +4,6 @@ Component({ type: Array, value: [], }, - initActive: { - type: Array, - value: [], - observer(newVal, oldVal) { - if (newVal[0] !== oldVal[0]) { - this.setActiveKey(newVal[0], 0); - } - }, - }, }, data: { activeKey: 0, @@ -20,10 +11,11 @@ Component({ 'https://img02.hua.com/m/category/Classification/m_category_flowers_use_1-2Girlfriend.png', }, methods: { - onParentChange(event) { - this.setActiveKey(event.detail.index, 0).then(() => { - this.triggerEvent('change', [this.data.activeKey]); - }); + setActive(activeKey) { + this.setData({ activeKey }); + }, + onClick(e) { + this.setActive(e.currentTarget.dataset.index); }, }, }); diff --git a/pages/category/components/goods-category/index.wxml b/pages/category/components/goods-category/index.wxml index 181e15b..0622860 100644 --- a/pages/category/components/goods-category/index.wxml +++ b/pages/category/components/goods-category/index.wxml @@ -1,15 +1,26 @@ - - + + + + {{ item.name }} + + + + + - 女装 + {{category[activeKey].name}} - + - + {{item.name}} diff --git a/pages/category/components/goods-category/index.wxss b/pages/category/components/goods-category/index.wxss index 8797517..f81e5c9 100644 --- a/pages/category/components/goods-category/index.wxss +++ b/pages/category/components/goods-category/index.wxss @@ -2,6 +2,66 @@ display: flex; } +.c-sidebar { + background-color: #f5f5f5; + width: 180rpx; + height: 100vh; +} + +.c-sidebar-item-container { + background-color: white; +} + +.c-sidebar-item { + background-color: white; +} +.c-sidebar-item { + display: flex; + justify-content: center; + text-align: center; + background-color: #f5f5f5; + color: #222427; + padding: 20rpx 0; + font-size: 26rpx; +} + +.c-sidebar-item.active { + position: relative; + background: white; +} + +.c-sidebar-item.active::before { + content: ''; + position: absolute; + width: 6rpx; + height: 48rpx; + background-color: #fa4126; + left: 0; + top: 50%; + transform: translate(0, -50%); + border-radius: 64rpx; + border-top-left-radius: 35px; + border-top-right-radius: 35px; + border-bottom-right-radius: 35px; + border-bottom-left-radius: 35px; +} + +.c-sidebar-item__text { + width: 136rpx; + height: 36rpx; + padding: 8rpx 0; + line-height: 36rpx; + text-align: center; + font-size: 28rpx; + color: #666666; +} + +.c-sidebar-item.active .c-sidebar-item__text { + background-color: white; + border-radius: 36rpx; + color: #fa4126; +} + .goods-category__right { height: 100vh; flex: auto; -- Gitee From 534611d701c379243a8116d6ff22153c9fa1110a Mon Sep 17 00:00:00 2001 From: xiumubai <1547702880@qq.com> Date: Thu, 9 Feb 2023 22:00:07 +0800 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=E8=B4=AD=E7=89=A9=E8=BD=A6?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 3 +- pages/cart/cart.js | 30 +++++--- pages/cart/cart.json | 6 +- pages/cart/cart.wxml | 49 ++++++++++++- pages/cart/cart.wxss | 68 +++++++++++++++++++ .../components/goods-category/index.json | 4 +- pages/goods/detail/index.js | 66 ++++++++++++++++++ pages/goods/detail/index.json | 3 + pages/goods/detail/index.wxml | 2 + pages/goods/detail/index.wxss | 1 + 10 files changed, 216 insertions(+), 16 deletions(-) create mode 100644 pages/goods/detail/index.js create mode 100644 pages/goods/detail/index.json create mode 100644 pages/goods/detail/index.wxml create mode 100644 pages/goods/detail/index.wxss diff --git a/app.json b/app.json index 9acd48a..9735513 100644 --- a/app.json +++ b/app.json @@ -4,7 +4,8 @@ "pages/category/category", "pages/cart/cart", "pages/info/info", - "pages/goods/list/index" + "pages/goods/list/index", + "pages/goods/detail/index" ], "window": { "backgroundTextStyle": "light", diff --git a/pages/cart/cart.js b/pages/cart/cart.js index 1a45cef..922b06d 100644 --- a/pages/cart/cart.js +++ b/pages/cart/cart.js @@ -1,11 +1,23 @@ -Component({ - pageLifetimes: { - show() { - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - this.getTabBar().setData({ - selected: 2, - }); - } - }, +Page({ + onShow() { + if (typeof this.getTabBar === 'function' && this.getTabBar()) { + this.getTabBar().setData({ + selected: 2, + }); + } + }, + + data: { + checked: true, + price: 0, + }, + + onChange(event) { + this.setData({ + checked: event.detail, + }); + }, + onChangePrice(event) { + console.log(event.detail); }, }); diff --git a/pages/cart/cart.json b/pages/cart/cart.json index 8835af0..d4a0602 100644 --- a/pages/cart/cart.json +++ b/pages/cart/cart.json @@ -1,3 +1,7 @@ { - "usingComponents": {} + "usingComponents": { + "van-swipe-cell": "@vant/weapp/swipe-cell/index", + "van-checkbox": "@vant/weapp/checkbox/index", + "van-stepper": "@vant/weapp/stepper/index" + } } \ No newline at end of file diff --git a/pages/cart/cart.wxml b/pages/cart/cart.wxml index 932f9ee..d5ae1bf 100644 --- a/pages/cart/cart.wxml +++ b/pages/cart/cart.wxml @@ -1,5 +1,50 @@ - - 购物车 + + + + + + + + + + + + 腾讯极光盒子4智能网络电视机顶盒6K千兆网络机顶盒4K高分辨率 + + + + ¥ + 99.00 + + + + + + + + + + + + + + + + + 腾讯极光盒子4智能网络电视机顶盒6K千兆网络机顶盒4K高分辨率 + + + + ¥ + 99.00 + + + + + + + + diff --git a/pages/cart/cart.wxss b/pages/cart/cart.wxss index e69de29..7863168 100644 --- a/pages/cart/cart.wxss +++ b/pages/cart/cart.wxss @@ -0,0 +1,68 @@ +.goods-wrap { + height: 100vh; +} + +.cart-wrap { + padding-top: 20px; + background-color: white; +} +.goods-item { + display: flex; + align-items: center; + padding: 0 32rpx 40rpx 0; +} + +.goods-item .left { + width: 56px; + display: flex; + align-items: center; + justify-content: center; +} + +.goods-item .mid { + width: 114px; + height: 125px; +} + +.mid image { + height: 100%; +} + +.goods-item .right { + height: 125px; + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-left: 10px; +} + +.right .title { + flex: 1; + flex-shrink: 0; + font-size: 28rpx; + color: #333; + line-height: 40rpx; + font-weight: 400; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + word-break: break-word; +} +.buy { + display: flex; + justify-content: space-between; +} + +.price { + display: flex; + /* align-items: flex-end; */ + color: #fa4126; + font-size: 36rpx; +} + +.price .symbol { + font-size: 10px; + margin-right: 2px; + margin-top: 8px; +} diff --git a/pages/category/components/goods-category/index.json b/pages/category/components/goods-category/index.json index 0db18a8..e8cfaaf 100644 --- a/pages/category/components/goods-category/index.json +++ b/pages/category/components/goods-category/index.json @@ -1,6 +1,4 @@ { "component": true, - "usingComponents": { - "c-sidebar": "../c-sidebar/index" - } + "usingComponents": {} } \ No newline at end of file diff --git a/pages/goods/detail/index.js b/pages/goods/detail/index.js new file mode 100644 index 0000000..df24173 --- /dev/null +++ b/pages/goods/detail/index.js @@ -0,0 +1,66 @@ +// pages/goods/detail/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/goods/detail/index.json b/pages/goods/detail/index.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/goods/detail/index.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/goods/detail/index.wxml b/pages/goods/detail/index.wxml new file mode 100644 index 0000000..35ae7d3 --- /dev/null +++ b/pages/goods/detail/index.wxml @@ -0,0 +1,2 @@ + + diff --git a/pages/goods/detail/index.wxss b/pages/goods/detail/index.wxss new file mode 100644 index 0000000..ac87adb --- /dev/null +++ b/pages/goods/detail/index.wxss @@ -0,0 +1 @@ +/* pages/goods/detail/index.wxss */ -- Gitee From 3b623ddc800b2db0711ad1b4b0bcc667020df4c1 Mon Sep 17 00:00:00 2001 From: xiumubai <1547702880@qq.com> Date: Fri, 10 Feb 2023 11:12:02 +0800 Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=E8=AE=A2=E5=8D=95=E5=88=97?= =?UTF-8?q?=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 7 ++- pages/address/add/index.js | 66 ++++++++++++++++++++ pages/address/add/index.json | 3 + pages/address/add/index.wxml | 2 + pages/address/add/index.wxss | 1 + pages/address/list/index.js | 66 ++++++++++++++++++++ pages/address/list/index.json | 3 + pages/address/list/index.wxml | 2 + pages/address/list/index.wxss | 1 + pages/goods/detail/index.json | 4 +- pages/goods/detail/index.wxml | 38 +++++++++++- pages/goods/detail/index.wxss | 112 ++++++++++++++++++++++++++++++++++ pages/order/detail/index.js | 66 ++++++++++++++++++++ pages/order/detail/index.json | 5 ++ pages/order/detail/index.wxml | 30 +++++++++ pages/order/detail/index.wxss | 104 +++++++++++++++++++++++++++++++ pages/order/list/index.js | 66 ++++++++++++++++++++ pages/order/list/index.json | 3 + pages/order/list/index.wxml | 2 + pages/order/list/index.wxss | 1 + 20 files changed, 579 insertions(+), 3 deletions(-) create mode 100644 pages/address/add/index.js create mode 100644 pages/address/add/index.json create mode 100644 pages/address/add/index.wxml create mode 100644 pages/address/add/index.wxss create mode 100644 pages/address/list/index.js create mode 100644 pages/address/list/index.json create mode 100644 pages/address/list/index.wxml create mode 100644 pages/address/list/index.wxss create mode 100644 pages/order/detail/index.js create mode 100644 pages/order/detail/index.json create mode 100644 pages/order/detail/index.wxml create mode 100644 pages/order/detail/index.wxss create mode 100644 pages/order/list/index.js create mode 100644 pages/order/list/index.json create mode 100644 pages/order/list/index.wxml create mode 100644 pages/order/list/index.wxss diff --git a/app.json b/app.json index 9735513..e078d63 100644 --- a/app.json +++ b/app.json @@ -5,7 +5,12 @@ "pages/cart/cart", "pages/info/info", "pages/goods/list/index", - "pages/goods/detail/index" + "pages/goods/detail/index", + "pages/order/detail/index", + "pages/order/list/list", + "pages/order/list/index", + "pages/address/add/index", + "pages/address/list/index" ], "window": { "backgroundTextStyle": "light", diff --git a/pages/address/add/index.js b/pages/address/add/index.js new file mode 100644 index 0000000..47650dd --- /dev/null +++ b/pages/address/add/index.js @@ -0,0 +1,66 @@ +// pages/address/add/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/address/add/index.json b/pages/address/add/index.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/address/add/index.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/address/add/index.wxml b/pages/address/add/index.wxml new file mode 100644 index 0000000..875ec95 --- /dev/null +++ b/pages/address/add/index.wxml @@ -0,0 +1,2 @@ + +pages/address/add/index.wxml diff --git a/pages/address/add/index.wxss b/pages/address/add/index.wxss new file mode 100644 index 0000000..d176586 --- /dev/null +++ b/pages/address/add/index.wxss @@ -0,0 +1 @@ +/* pages/address/add/index.wxss */ \ No newline at end of file diff --git a/pages/address/list/index.js b/pages/address/list/index.js new file mode 100644 index 0000000..e472561 --- /dev/null +++ b/pages/address/list/index.js @@ -0,0 +1,66 @@ +// pages/address/list/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/address/list/index.json b/pages/address/list/index.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/address/list/index.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/address/list/index.wxml b/pages/address/list/index.wxml new file mode 100644 index 0000000..ffbe0e6 --- /dev/null +++ b/pages/address/list/index.wxml @@ -0,0 +1,2 @@ + +pages/address/list/index.wxml diff --git a/pages/address/list/index.wxss b/pages/address/list/index.wxss new file mode 100644 index 0000000..24cad04 --- /dev/null +++ b/pages/address/list/index.wxss @@ -0,0 +1 @@ +/* pages/address/list/index.wxss */ \ No newline at end of file diff --git a/pages/goods/detail/index.json b/pages/goods/detail/index.json index 8835af0..d9c985d 100644 --- a/pages/goods/detail/index.json +++ b/pages/goods/detail/index.json @@ -1,3 +1,5 @@ { - "usingComponents": {} + "usingComponents": { + "van-icon": "@vant/weapp/icon/index" + } } \ No newline at end of file diff --git a/pages/goods/detail/index.wxml b/pages/goods/detail/index.wxml index 35ae7d3..5da2f38 100644 --- a/pages/goods/detail/index.wxml +++ b/pages/goods/detail/index.wxml @@ -1,2 +1,38 @@ - + + + + + ¥299 + ¥399 + + + 亲爱的/情人节网红款/19枝亲爱的/情人节网红款/19枝亲爱的/情人节网红款/19枝 + 用最温暖的最有情的心意，用最温暖的最有情的心意，用最温暖的最有情的心意，用最温暖的最有情的心意，用最温暖的最有情的心意，用最温暖的最有情的心意， + + + + + + + + + + + + 首页 + + + + 购物车 + + + + 加入购物车 + 立即购买 + + + + diff --git a/pages/goods/detail/index.wxss b/pages/goods/detail/index.wxss index ac87adb..a9dafb5 100644 --- a/pages/goods/detail/index.wxss +++ b/pages/goods/detail/index.wxss @@ -1 +1,113 @@ /* pages/goods/detail/index.wxss */ +.goods-detail { + height: 100%; +} + +.banner-img { + width: 100%; + height: 245px; +} +.banner-img .img { + width: 100%; +} + +.content { + margin: 0 20px; + background: white; + padding: 20px; + position: relative; + border-radius: 20px; + top: -40px; +} + +.price { + display: flex; +} + +.price .price-num { + font-size: 18px; + color: #fa4126; + font-weight: bold; +} + +.price .price-origin-num { + font-size: 12px; + color: #b4babf; + margin-left: 4px; + text-decoration: line-through; + margin-top: 6px; +} + +.title { + font-size: 18px; + font-weight: bold; +} + +.desc { + font-size: 12px; + color: #999999; +} + +.detail { + margin: -20px 20px 20px 20px; + background: white; + padding: 20px; + border-radius: 20px; +} + +.footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: #fff; + padding-bottom: env(safe-area-inset-bottom); +} +.flex { + display: flex; +} + +.flex-between { + justify-content: space-between; +} + +.footer-cont { + background-color: #fff; + padding: 16rpx; +} + +.bottom-operate-left { + width: 100%; + justify-content: space-around; +} +.icon-wrap { + flex-direction: column; + align-items: center; + justify-content: center; +} + +.icon-wrap text { + font-size: 10px; + color: #666; +} + +.bar-separately, +.bar-buy { + width: 254rpx; + height: 80rpx; + color: #fff; + display: flex; + align-items: center; + justify-content: center; +} + +.bar-separately { + background: #ffece9; + color: #fa4126; + border-radius: 40rpx 0 0 40rpx; +} + +.bar-buy { + background-color: #fa4126; + border-radius: 0rpx 40rpx 40rpx 0rpx; +} diff --git a/pages/order/detail/index.js b/pages/order/detail/index.js new file mode 100644 index 0000000..a755d3c --- /dev/null +++ b/pages/order/detail/index.js @@ -0,0 +1,66 @@ +// pages/order/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/order/detail/index.json b/pages/order/detail/index.json new file mode 100644 index 0000000..d9c985d --- /dev/null +++ b/pages/order/detail/index.json @@ -0,0 +1,5 @@ +{ + "usingComponents": { + "van-icon": "@vant/weapp/icon/index" + } +} \ No newline at end of file diff --git a/pages/order/detail/index.wxml b/pages/order/detail/index.wxml new file mode 100644 index 0000000..e78e555 --- /dev/null +++ b/pages/order/detail/index.wxml @@ -0,0 +1,30 @@ + + + + + + 添加收货地址 + + + + 甘肃省 甘南藏族自治州 碌曲县 + 松日鼎盛大厦0层0号 + + 测试 + 130839991443 + + + + + + + + + + 配送时间 + 请选择配送时间 + + + + + diff --git a/pages/order/detail/index.wxss b/pages/order/detail/index.wxss new file mode 100644 index 0000000..9954f09 --- /dev/null +++ b/pages/order/detail/index.wxss @@ -0,0 +1,104 @@ +/* pages/order/index.wxss */ + +.flex { + display: flex; +} + +.order-address { + justify-content: space-between; + padding: 24rpx 32rpx; +} +.address-card .order-address .title { + display: flex; + align-items: center; + height: 40rpx; + font-size: 28rpx; + font-weight: normal; + color: #999999; + line-height: 40rpx; +} + +.address-card .order-address .detail { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 36rpx; + font-weight: bold; + color: #333333; + line-height: 48rpx; + margin: 8rpx 0; +} + +address-card .order-address .info { + height: 40rpx; + font-size: 28rpx; + font-weight: normal; + color: #333333; + line-height: 40rpx; +} + +.address-card { + margin: 24rpx 0; + background-color: #fff; +} + +.t-cell--middle { + align-items: center; +} + +.t-cell { + position: relative; + display: flex; + box-sizing: border-box; + width: 100%; + padding: 24rpx 32rpx; + font-size: 32rpx; + line-height: 48rpx; + color: rgba(0, 0, 0, 0.9); + background-color: #ffffff; +} + +.t-cell__left, +.t-cell__right { + display: flex; + align-items: center; + font-size: 48rpx; + line-height: 48rpx; +} + +.t-cell__title-text { + display: flex; +} + +.t-cell__title-text { + margin-left: 6px; +} +.address-card .top-line { + width: 100%; + height: 6rpx; + background-color: #fff; + background-image: url(https://cdn-we-retail.ym.tencent.com/miniapp/order/stripe.png); + background-repeat: repeat-x; + display: block; +} + +.goods-wraper { + background-color: white; + padding: 24rpx 32rpx; +} + +.time-wraper view { + justify-content: space-between; + font-size: 14px; + color: #333333; +} + +.title { + flex: 1; +} + +.time { + margin-right: 4px; +} diff --git a/pages/order/list/index.js b/pages/order/list/index.js new file mode 100644 index 0000000..1fac1dc --- /dev/null +++ b/pages/order/list/index.js @@ -0,0 +1,66 @@ +// pages/order/list/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/order/list/index.json b/pages/order/list/index.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/order/list/index.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/order/list/index.wxml b/pages/order/list/index.wxml new file mode 100644 index 0000000..0f0eb6f --- /dev/null +++ b/pages/order/list/index.wxml @@ -0,0 +1,2 @@ + +pages/order/list/index.wxml diff --git a/pages/order/list/index.wxss b/pages/order/list/index.wxss new file mode 100644 index 0000000..fb82b6e --- /dev/null +++ b/pages/order/list/index.wxss @@ -0,0 +1 @@ +/* pages/order/list/index.wxss */ \ No newline at end of file -- Gitee From c0b980536401acf1730e532b13130bc7e003ce25 Mon Sep 17 00:00:00 2001 From: xiumubai <1547702880@qq.com> Date: Fri, 10 Feb 2023 11:28:06 +0800 Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=E8=B7=AF=E7=94=B1=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 1 - pages/order/detail/index.wxml | 10 +++++++++- pages/order/detail/index.wxss | 10 ++++++++++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/app.json b/app.json index e078d63..8411622 100644 --- a/app.json +++ b/app.json @@ -7,7 +7,6 @@ "pages/goods/list/index", "pages/goods/detail/index", "pages/order/detail/index", - "pages/order/list/list", "pages/order/list/index", "pages/address/add/index", "pages/address/list/index" diff --git a/pages/order/detail/index.wxml b/pages/order/detail/index.wxml index e78e555..b218585 100644 --- a/pages/order/detail/index.wxml +++ b/pages/order/detail/index.wxml @@ -25,6 +25,14 @@ 请选择配送时间 - + + 贺卡备注 +