diff --git a/app.json b/app.json index d245307..8b5c5c9 100644 --- a/app.json +++ b/app.json @@ -16,7 +16,11 @@ "pages/badge/index", "pages/user/about", "pages/community/info", - "pages/store/index" + "pages/store/index", + "pages/store/info", + "pages/order/index", + "pages/knowlage/index", + "pages/knowlage/info" ], "window": { "navigationBarTextStyle": "black", @@ -71,6 +75,7 @@ } }, "requiredPrivateInfos": [ + "chooseAddress", "getFuzzyLocation" ], "componentFramework": "glass-easel", diff --git a/app.wxss b/app.wxss index 4a6fd49..f3ae010 100644 --- a/app.wxss +++ b/app.wxss @@ -198,6 +198,10 @@ page { .font-black { color: #000000E6 !important; } + + .font-sub { + color: #00000099 !important; + } .font-12{ font-size: 12px; diff --git a/pages/community/info.js b/pages/community/info.js index c437b14..b9b8dbb 100644 --- a/pages/community/info.js +++ b/pages/community/info.js @@ -58,8 +58,6 @@ Page({ }, goPreview(e) { - - // 在上一页的 js 文件中 const currentUrl = e.currentTarget.dataset.url; // 获取当前点击的图片链接 const list = this.data.info.imgList.map(e => e.url) wx.previewImage({ diff --git a/pages/garden/info.wxml b/pages/garden/info.wxml index 9da8579..8b317a6 100644 --- a/pages/garden/info.wxml +++ b/pages/garden/info.wxml @@ -82,11 +82,11 @@ - + - + - + @@ -103,14 +103,6 @@ - - - 植物知识卡 - - - - 成就徽章 - diff --git a/pages/knowlage/index.js b/pages/knowlage/index.js new file mode 100644 index 0000000..51ef9a1 --- /dev/null +++ b/pages/knowlage/index.js @@ -0,0 +1,88 @@ +const { api } = require("../../utils/api") + +// pages/knowlage/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + tags:['懒人必养','吸甲醛','猫咪友好','阳台党','办公搭子'], + list:[] + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + this.fetchList() + }, + + fetchList(){ + api('/library/list','POST',{current:0,pageSize:10},'json').then(res => { + if (res.code === 200){ + const tmps = res.data.list.map(e => { + e.pic = e.imgList[0].url + return e + }) + this.setData({list:tmps}) + } + }) + }, + + goInfo(e){ + const id = e.currentTarget.dataset.id + wx.navigateTo({ + url: '../knowlage/info?id=' + id, + }) + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/knowlage/index.json b/pages/knowlage/index.json new file mode 100644 index 0000000..f3d8e04 --- /dev/null +++ b/pages/knowlage/index.json @@ -0,0 +1,8 @@ +{ + "navigationBarTitleText": "植物百科", + "usingComponents": { + "t-search": "tdesign-miniprogram/search/search", + "t-rate": "tdesign-miniprogram/rate/rate", + "t-sticky": "tdesign-miniprogram/sticky/sticky" + } +} \ No newline at end of file diff --git a/pages/knowlage/index.wxml b/pages/knowlage/index.wxml new file mode 100644 index 0000000..e1e1944 --- /dev/null +++ b/pages/knowlage/index.wxml @@ -0,0 +1,39 @@ + + + + + + + + {{item}} + + + + + + + + + + + + + + 已拥有 + 可兑换 + + + + {{item.name}} + + + 难度: + + + + + + + + + \ No newline at end of file diff --git a/pages/knowlage/index.wxss b/pages/knowlage/index.wxss new file mode 100644 index 0000000..1452372 --- /dev/null +++ b/pages/knowlage/index.wxss @@ -0,0 +1,57 @@ +/* pages/knowlage/index.wxss */ +.grid { + display: grid; + grid-template-columns: auto auto; + grid-row-gap: 8px; + grid-column-gap: 8px; +} + +.price-tag-badge { + /* 颜色与文本 */ + background-color: #C35D4B; /* 图片中的红色背景 */ + color: #FFFFFF; /* 图片中的白色文本 */ + font-size: 12px; /* 小字号 */ + font-weight: 500; + + /* 尺寸与间距 */ + /* 上右下左 padding。左侧给尖角留出更多空间视觉上更平衡 */ + padding: 4px 8px 4px 12px; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + + /* --- 核心形状实现 --- */ + /* 使用 polygon 函数绘制五边形形状 */ + /* 坐标点顺序:左上(内缩) -> 右上 -> 右下 -> 左下(内缩) -> 最左尖点(垂直居中) */ + /* 10px 控制尖角的深度,可以根据需要调整这个数值 */ + clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%); + + /* 兼容性写法 (可选,针对旧版浏览器) */ + -webkit-clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%); +} + +.price-tag-badge2 { + /* 颜色与文本 */ + background-color: orange; /* 图片中的红色背景 */ + color: #FFFFFF; /* 图片中的白色文本 */ + font-size: 12px; /* 小字号 */ + font-weight: 500; + + /* 尺寸与间距 */ + /* 上右下左 padding。左侧给尖角留出更多空间视觉上更平衡 */ + padding: 4px 8px 4px 12px; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + + /* --- 核心形状实现 --- */ + /* 使用 polygon 函数绘制五边形形状 */ + /* 坐标点顺序:左上(内缩) -> 右上 -> 右下 -> 左下(内缩) -> 最左尖点(垂直居中) */ + /* 10px 控制尖角的深度,可以根据需要调整这个数值 */ + clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%); + + /* 兼容性写法 (可选,针对旧版浏览器) */ + -webkit-clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%); +} \ No newline at end of file diff --git a/pages/knowlage/info.js b/pages/knowlage/info.js new file mode 100644 index 0000000..4eb47ae --- /dev/null +++ b/pages/knowlage/info.js @@ -0,0 +1,83 @@ +const { api } = require("../../utils/api") + +// pages/knowlage/info.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + id:'', + info:null + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.data.id = options.id + this.fetchInfo() + }, + + fetchInfo(){ + api('/library/detail','GET',{id:this.data.id}).then(res => { + if (res.code === 200){ + const data = res.data + data.pic = data.imgList[0].url + this.setData({info:data}) + } + }) + }, + + goBack(){ + wx.navigateBack() + }, + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/knowlage/info.json b/pages/knowlage/info.json new file mode 100644 index 0000000..f08cbea --- /dev/null +++ b/pages/knowlage/info.json @@ -0,0 +1,4 @@ +{ + "navigationStyle":"custom", + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/knowlage/info.wxml b/pages/knowlage/info.wxml new file mode 100644 index 0000000..32798ae --- /dev/null +++ b/pages/knowlage/info.wxml @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + {{info.name}} + 属于 {{info.genus}} + + + 常用名:{{info.aliases}} + 植物学名称:{{info.latinName}} + + + 🌍 多年生 + 🌞 中光照 + 易养活 + + + + + + + + 光照 + + + + + {{info.lightIntensity}} + + + + + + {{info.lightType}} + + + + + + + 特征 + {{info.lifeCycle}} + + 适宜温度范围: 15 - 25℃ + + {{info.growthHabit}} + {{info.floweringPeriod}} + + + + + + + 花型 + + + + + {{info.floweringColor}} + + + + + + + {{info.flowerDiameter}}mm + 花直径 + + + {{info.floweringPeriod}} + + + + + + + + + + + {{info.foliageType}} + + {{info.foliageColor}} + {{info.foliageShape}} + + + + + + 常见病虫害 + {{info.pestsDiseases}} + + + + \ No newline at end of file diff --git a/pages/knowlage/info.wxss b/pages/knowlage/info.wxss new file mode 100644 index 0000000..568432a --- /dev/null +++ b/pages/knowlage/info.wxss @@ -0,0 +1,14 @@ +/* pages/knowlage/info.wxss */ +.grid { + display: grid; + grid-template-columns: 47% 47%; + grid-row-gap: 16px; + grid-column-gap: 16px; +} + +.avatar { + width: 80rpx; + height: 80rpx; + border-radius: 80rpx; + background-color: wheat; +} \ No newline at end of file diff --git a/pages/order/index.js b/pages/order/index.js new file mode 100644 index 0000000..c6f94bc --- /dev/null +++ b/pages/order/index.js @@ -0,0 +1,137 @@ +// pages/order/index.js +const { + api +} = require("../../utils/api") +Page({ + + /** + * 页面的初始数据 + */ + data: { + id: '', + info: null, + addr: null, + checked:false + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + const id = options.id + this.data.id = id + + }, + + fetchAddr() { + api('/personal/address/list', 'GET').then(res => { + if (res.code === 200) { + const tmps = res.data + if(tmps.length > 0){ + this.setData({addr:tmps[0]}) + } + + } + }) + }, + + chooseAddr() { + const _this = this + wx.chooseAddress({ + success(res) { + const data = {isDefault:1,phone:res.telNumber, name :res.userName,detail: res.provinceName + res.cityName + res.countyName + res.detailInfo} + _this.saveAddr(data) + } + }) + }, + + saveAddr(data){ + api('/personal/address/add','POST',data,'json').then(res => { + if (res.code=== 200) { + this.fetchAddr() + } + }) + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + this.fetchInfo() + this.fetchAddr() + }, + + change(){ + const checked = !this.data.checked + this.setData({checked:checked}) + }, + + pay(){ + if (this.data.checked === false){ + wx.showModal({ + content: '请先勾选,我承诺会好好照顾它,不随意丢弃。', + complete: (res) => { + if (res.confirm) { + + } + } + }) + } + }, + + fetchInfo() { + api('/claim/detail', "GET", { + id: this.data.id + }).then(res => { + if (res.code === 200) { + const tmps = res.data + tmps.content = tmps.content.trim() + this.setData({ + info: tmps + }) + } + }) + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/order/index.json b/pages/order/index.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/order/index.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/order/index.wxml b/pages/order/index.wxml new file mode 100644 index 0000000..cfc9040 --- /dev/null +++ b/pages/order/index.wxml @@ -0,0 +1,64 @@ + + + + + 收货地址 + + + + + + {{addr.detail}} + + + {{addr.name}} {{addr.phone}} + + + + + + 暂无收货地址 + + 新增收获地址 + + + + + + 领养清单 + + + + + + + {{info.name}} + {{info.tag}} + + + + + 快递运费:¥ 12.00 + ¥ 12.00 + + + + + + + + 我承诺会好好照顾它,不随意丢弃。 + + + + + + + 合计:¥ 12.00元 + + 支付邮费,接它回家 + + + + + \ No newline at end of file diff --git a/pages/order/index.wxss b/pages/order/index.wxss new file mode 100644 index 0000000..48b2526 --- /dev/null +++ b/pages/order/index.wxss @@ -0,0 +1,9 @@ +/* pages/order/index.wxss */ +.bottom { + position: fixed; + bottom:0; + left:0; + right: 0; + padding: 32rpx; + background-color: white; +} \ No newline at end of file diff --git a/pages/store/index.js b/pages/store/index.js index 8bcca23..7ae3f01 100644 --- a/pages/store/index.js +++ b/pages/store/index.js @@ -1,4 +1,6 @@ -const { api } = require("../../utils/api") +const { + api +} = require("../../utils/api") // pages/store/index.js Page({ @@ -7,9 +9,11 @@ Page({ * 页面的初始数据 */ data: { - points:0, - list:[], - inviteCode:"" + points: 0, + list: [], + inviteCode: "", + visible: false, + current: null }, /** @@ -21,6 +25,21 @@ Page({ inviteCode: inviteCode }) }, + goInfo(e) { + const id = e.currentTarget.dataset.id + wx.navigateTo({ + url: '../store/info?id=' + id, + }) + }, + + goShare(e) { + const item = e.currentTarget.dataset.item + const show = !this.data.visible + this.setData({ + visible: show, + current: item + }) + }, /** * 生命周期函数--监听页面初次渲染完成 @@ -36,25 +55,40 @@ Page({ this.fetchList() }, - fetchList(){ + fetchList() { api('/personal/personal', 'GET').then(res => { if (res.code === 200) { const tmps = res.data this.setData({ points: tmps.pointsCount }) - api('/claim/list','POST',{current:0,pageSize:10,name:'',keyword:''},'json').then(res => { - if (res.code === 200){ + wx.setStorageSync('points', tmps.pointsCount) + api('/claim/list', 'POST', { + current: 0, + pageSize: 10, + name: '', + keyword: '' + }, 'json').then(res => { + if (res.code === 200) { const tmps = res.data.list.map(e => { - e.status = e.points < this.data.points ? 0:1 + e.status = e.points < this.data.points ? 0 : 1 return e + }).sort((a, b) => { + // 1. 优先比较 status,0 在前,1 在后 + if (a.status !== b.status) { + return a.status - b.status; + } + // 2. status 相同的情况下,比较 points,从小到大排序 + return a.points - b.points; + }) + this.setData({ + list: tmps }) - this.setData({list:tmps}) } }) } }) - + }, /** diff --git a/pages/store/index.json b/pages/store/index.json index 2df9158..e071d14 100644 --- a/pages/store/index.json +++ b/pages/store/index.json @@ -1,4 +1,6 @@ { "navigationBarTitleText": "植物领养中心", - "usingComponents": {} + "usingComponents": { + "t-popup": "tdesign-miniprogram/popup/popup" + } } \ No newline at end of file diff --git a/pages/store/index.wxml b/pages/store/index.wxml index f9c8491..5897ead 100644 --- a/pages/store/index.wxml +++ b/pages/store/index.wxml @@ -2,7 +2,7 @@ - 我的阳光值 {{points}} + 我的阳光值 {{points}} @@ -23,10 +23,23 @@ - 立即领养(付邮) - 获取资格 + 立即领养(付邮) + 获取资格 + + + + 仅差一步,带走 {{current.name}} + + + + + 转发给微信好友 + + + + \ No newline at end of file diff --git a/pages/store/info.js b/pages/store/info.js new file mode 100644 index 0000000..8bfb070 --- /dev/null +++ b/pages/store/info.js @@ -0,0 +1,111 @@ +const { api } = require("../../utils/api") + +// pages/store/info.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + id:'', + info:null, + points: 0 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + const id = options.id + this.data.id = id + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + this.fetchInfo() + }, + fetchInfo(){ + wx.showLoading({ + title: '请稍后', + }) + api('/claim/detail',"GET",{id:this.data.id}).then(res => { + if (res.code === 200){ + const tmps = res.data + tmps.content = tmps.content.trim() + this.setData({info:tmps}) + wx.hideLoading() + } + }) + + const points = wx.getStorageSync('points') + this.setData({points:points}) + }, + + goPreview(e){ + const currentUrl = e.currentTarget.dataset.url; // 获取当前点击的图片链接 + const list = this.data.info.imgList.map(e => e.url) + wx.previewImage({ + current: currentUrl, // 当前显示图片的http链接 + urls: list// 需要预览的图片http链接列表 + }) + }, + + openVideo(){ + console.log(this.data.info.videoUrl); + wx.openChannelsActivity({ + feedId: this.data.info.videoUrl, + finderUserName: 'sphdRsczmioSITu', + }) + }, + + goOrder(){ + const id = this.data.id + wx.navigateTo({ + url: '../order/index?id=' + id, + }) + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/store/info.json b/pages/store/info.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/store/info.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/store/info.wxml b/pages/store/info.wxml new file mode 100644 index 0000000..9c6740d --- /dev/null +++ b/pages/store/info.wxml @@ -0,0 +1,68 @@ + + + + + + + {{info.name}} + + {{info.tag}} + + + + + 需 {{info.points}} 阳光值 + + + + + + 🌳 植物公民档案 + {{info.content}} + + + + + 🌳 植物百科 + + + 🌍 多年生 + 🌞 中光照 + 易养活 + + + 自然花期4-6月,人工栽培可全年开花(盛花期12-3月) + 喜高温多湿半阴环境,不耐寒,怕干旱和强光,忌积水;附生于树干或岩石,根系暴露于空气中吸收水分 + + + + + + 🎬 新手种植教程 + + + + 一分钟教会您,给我一个家 + + + + + + + + + + 我的阳光值 {{points}} + + 立即领养(付邮) + + + + \ No newline at end of file diff --git a/pages/store/info.wxss b/pages/store/info.wxss new file mode 100644 index 0000000..6e70cbe --- /dev/null +++ b/pages/store/info.wxss @@ -0,0 +1,77 @@ +/* pages/store/info.wxss */ +/* ========================================= + 父容器基准 + ========================================= */ + .card-container { + position: relative; /* 关键:作为绝对定位子元素的基准点 */ + + /* 以下仅为演示容器样式,实际使用中请替换为您自己的容器样式 */ + width: 300px; + height: 150px; + background-color: #f5f5f5; + border-radius: 12px; + overflow: hidden; /* 确保角标不会溢出圆角容器 */ + margin: 20px; +} + +/* ========================================= + 红色角标样式核心代码 + ========================================= */ +.price-tag-badge { + + width: 160rpx; + /* 颜色与文本 */ + background-color: #C35D4B; /* 图片中的红色背景 */ + color: #FFFFFF; /* 图片中的白色文本 */ + font-size: 12px; /* 小字号 */ + font-weight: 500; + + /* 尺寸与间距 */ + /* 上右下左 padding。左侧给尖角留出更多空间视觉上更平衡 */ + padding: 4px 8px 4px 12px; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + + /* --- 核心形状实现 --- */ + /* 使用 polygon 函数绘制五边形形状 */ + /* 坐标点顺序:左上(内缩) -> 右上 -> 右下 -> 左下(内缩) -> 最左尖点(垂直居中) */ + /* 10px 控制尖角的深度,可以根据需要调整这个数值 */ + clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%); + + /* 兼容性写法 (可选,针对旧版浏览器) */ + -webkit-clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%); +} + +.content-text { + /* 关键属性:保留空白符和换行符,但是允许自动换行 */ + white-space: pre-wrap; + text-align: left; + + /* 可选:防止长单词(如长 URL)溢出容器 */ + word-break: break-all; +} + +.grid { + display: grid; + grid-template-columns: 47% 47%; + grid-row-gap: 16px; + grid-column-gap: 16px; +} + +.grid-3 { + display: grid; + grid-template-columns: 30% 30% 30%; + grid-row-gap: 16px; + grid-column-gap: 16px; +} + +.bottom { + position: fixed; + bottom:0; + left:0; + right: 0; + padding: 32rpx; + background-color: white; +} \ No newline at end of file diff --git a/pages/user/index.wxml b/pages/user/index.wxml index 879fcc6..91c2539 100644 --- a/pages/user/index.wxml +++ b/pages/user/index.wxml @@ -85,7 +85,7 @@ - + diff --git a/project.private.config.json b/project.private.config.json index 2f8334e..6bc8870 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -24,18 +24,11 @@ "miniprogram": { "list": [ { - "name": "pages/index/index", - "pathName": "pages/index/index", - "query": "inviteCode=7NQJHCKT", + "name": "pages/knowlage/info", + "pathName": "pages/knowlage/info", + "query": "id=8e3af6f8-ce61-11f0-bb28-bc2411e64a23", "scene": null, "launchMode": "default" - }, - { - "name": "pages/store/index", - "pathName": "pages/store/index", - "query": "", - "launchMode": "default", - "scene": null } ] }