fix 任务工单

This commit is contained in:
sdaduanbilei 2025-12-09 16:19:58 +08:00
parent 9c199e7943
commit dcfdb4707d
25 changed files with 953 additions and 39 deletions

View File

@ -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",

View File

@ -198,6 +198,10 @@ page {
.font-black {
color: #000000E6 !important;
}
.font-sub {
color: #00000099 !important;
}
.font-12{
font-size: 12px;

View File

@ -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({

View File

@ -82,11 +82,11 @@
<view wx:if="{{info.careRecords.length > 0}}" class="full-width">
<view wx:for="{{info.careRecords}}" class="full-width">
<view class="flex full-width">
<view style="width: 10rpx;" class="flex flex-center flex-col ">
<view style="width: 50rpx; " class="flex flex-center flex-col ">
<view class="dot flex flex-center" style="background-color: {{item.color}}3c;">
<t-icon name="{{item.icon}}" style="color: {{item.color}};" size="20"></t-icon>
<t-icon name="{{item.icon}}" style="color: {{item.color}};" size="18"></t-icon>
</view>
<view style="width: 1px; background-color: #F6F6F6; height: 65%; margin-top: 10rpx;margin-bottom: 10rpx;"></view>
<view style="width: 1px; background-color: #F6F6F6; height: 45%; margin-top: 10rpx;margin-bottom: 10rpx;"></view>
</view>
<view class="ml-32 mt-16 full-width padding" style="background-color: #F9FAFB; border-radius: 16rpx;margin-left:50rpx;">
<view>
@ -103,14 +103,6 @@
</view>
</view>
</view>
<view class="row padding mt-32">
<view>植物知识卡</view>
</view>
<view class="row padding mt-32">
<view>成就徽章</view>
</view>
</view>
</view>
</view>

88
pages/knowlage/index.js Normal file
View File

@ -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() {
}
})

View File

@ -0,0 +1,8 @@
{
"navigationBarTitleText": "植物百科",
"usingComponents": {
"t-search": "tdesign-miniprogram/search/search",
"t-rate": "tdesign-miniprogram/rate/rate",
"t-sticky": "tdesign-miniprogram/sticky/sticky"
}
}

39
pages/knowlage/index.wxml Normal file
View File

@ -0,0 +1,39 @@
<!--pages/knowlage/index.wxml-->
<view>
<t-sticky>
<view class="white-bg padding">
<t-search placeholder="搜索植物" shape="round" />
<view class="flex flex-center flex-justify-start mt-32">
<view wx:for="{{tags}}" class="mr-16">
<t-tag shape="round">{{item}}</t-tag>
</view>
</view>
</view>
</t-sticky>
<view class="padding">
<view class="grid">
<view wx:for="{{list}}" bind:tap="goInfo" data-id="{{item.id}}">
<view class="white-bg" style="border-radius: 16rpx;">
<view style="position: relative;">
<image src="{{item.pic}}" style="width: 100%; border-top-left-radius: 16rpx; border-top-right-radius: 16rpx;" mode="aspectFill"></image>
<view style="position: absolute ; bottom: 0; right: 0;" class="{{index === 0 ? 'price-tag-badge':'price-tag-badge2'}}" >
<view wx:if="{{index === 0}}">已拥有</view>
<view wx:else >可兑换</view>
</view>
</view>
<view style="padding: 32rpx 10rpx ; ">
<view class="bold ">{{item.name}}</view>
<view>
<view class="font-12 mt-16 white font-sub flex flex-center flex-justify-start" style="background-color: #e6e6e6;width: auto; border-radius: 40rpx; padding: 8rpx 10rpx">
<view>难度:</view>
<t-rate size="small" value="{{3}}" count="{{3}}" />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>

57
pages/knowlage/index.wxss Normal file
View File

@ -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%);
}

83
pages/knowlage/info.js Normal file
View File

@ -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() {
}
})

4
pages/knowlage/info.json Normal file
View File

@ -0,0 +1,4 @@
{
"navigationStyle":"custom",
"usingComponents": {}
}

108
pages/knowlage/info.wxml Normal file
View File

@ -0,0 +1,108 @@
<!--pages/knowlage/info.wxml-->
<view>
<!-- top -->
<view class="top" style="position: relative; z-index: 2;">
<image src="{{info.pic}}" style="width: 100vw; height: 680rpx;" mode="aspectFill"></image>
</view>
<!-- back -->
<view style="z-index: 999;position: fixed; top: 110rpx; left: 32rpx; background-color: #34343482 ; width: 60rpx ; height: 60rpx; border-radius: 30rpx; " bind:tap="goBack">
<view class="flex flex-center" style="width: 100%;height: 100%;">
<t-icon name="chevron-left" size="48rpx" style="color: white;"></t-icon>
</view>
</view>
<!-- info -->
<view style="background-color:white;margin-top: -130rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
<view class="flex flex-center flex-justify-between" style="padding: 32rpx 32rpx 0rpx 32rpx">
<view class="flex flex-center flex-justify-start">
<view class="font-16 bold ">{{info.name}}</view>
<view class="font-12 grey ml-16">属于 {{info.genus}}</view>
</view>
</view>
<view class="padding font-14">常用名:{{info.aliases}}</view>
<view class="font-14" style="padding: 0rpx 32rpx 32rpx 32rpx">植物学名称:{{info.latinName}}</view>
<view style="padding: 0rpx 32rpx 32rpx 32rpx">
<view class="grid">
<view style="width: 100%;background-color: #4B84EE1C;border-radius: 8rpx;text-align: center;padding: 10rpx 0;">🌍 多年生</view>
<view style="width: 100%;background-color: #4B84EE1C;border-radius: 8rpx;text-align: center;padding: 10rpx 0;">🌞 中光照</view>
<view style="width: 100%;background-color: #4B84EE1C;border-radius: 8rpx;text-align: center;padding: 10rpx 0;">易养活</view>
</view>
</view>
</view>
<view style="margin-top: 310rpx;" class="padding">
<view class="white-bg row">
<view class="padding">
<view class="bold">光照</view>
<view class="flex flex-center flex-justify-start mt-32">
<view class="avatar flex flex-center white mr-32">
<t-icon name="fog" class="white" size="24"></t-icon>
</view>
<view>{{info.lightIntensity}}</view>
</view>
<view class="flex flex-center flex-justify-start mt-32">
<view class="avatar flex flex-center white mr-32" style="background-color: rgba(24, 24, 202, 0.2);">
<t-icon name="sunny" class="white" size="24"></t-icon>
</view>
<view>{{info.lightType}}</view>
</view>
</view>
</view>
<view class="white-bg row mt-32">
<view class="padding">
<view class="bold">特征</view>
<view class="mt-32">{{info.lifeCycle}}</view>
<view class="mt-16">
适宜温度范围: 15 - 25℃
</view>
<view class="mt-16 font-sub font-14">{{info.growthHabit}}</view>
<view class="mt-16 font-sub font-14">{{info.floweringPeriod}}</view>
</view>
</view>
<view class="white-bg row mt-32">
<view class="padding">
<view class="bold">花型</view>
<view class="flex flex-center flex-justify-start mt-32">
<view class="avatar flex flex-center white mr-32">
<t-icon name="chinese-cabbage" class="white" size="24"></t-icon>
</view>
<view>{{info.floweringColor}}</view>
</view>
<view class="flex flex-center flex-justify-start mt-32">
<view class="avatar flex flex-center white mr-32">
<t-icon name="chinese-cabbage" class="white" size="24"></t-icon>
</view>
<view>
<view class="bold">{{info.flowerDiameter}}mm</view>
<view class="font-sub font-12">花直径</view>
</view>
</view>
<view class="mt-32 font-14 font-sub">{{info.floweringPeriod}}</view>
</view>
</view>
<view class="white-bg row mt-32">
<view class="padding">
<view class="bold">叶</view>
<view class="flex flex-center flex-justify-start mt-32">
<view class="avatar flex flex-center white mr-32">
<t-icon name="chinese-cabbage" class="white" size="24"></t-icon>
</view>
<view>{{info.foliageType}}</view>
</view>
<view class="mt-32 font-14 font-sub">{{info.foliageColor}}</view>
<view class="mt-16 font-14 font-sub">{{info.foliageShape}}</view>
</view>
</view>
<view class="white-bg row mt-32">
<view class="padding">
<view class="bold">常见病虫害</view>
<view class="mt-32 font-14 font-sub">{{info.pestsDiseases}}</view>
</view>
</view>
</view>
</view>

14
pages/knowlage/info.wxss Normal file
View File

@ -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;
}

137
pages/order/index.js Normal file
View File

@ -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() {
}
})

3
pages/order/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

64
pages/order/index.wxml Normal file
View File

@ -0,0 +1,64 @@
<!--pages/order/index.wxml-->
<view class="padding">
<view class="row padding white-bg">
<view class="flex flex-center flex-justify-between" bind:tap="chooseAddr">
<view>收货地址</view>
<t-icon name="chevron-right"></t-icon>
</view>
<t-divider />
<view class="font-sub" wx:if="{{addr}}">
<view>
{{addr.detail}}
</view>
<view class="mt-16 font-14 ">
{{addr.name}} {{addr.phone}}
</view>
</view>
<view class="font-sub font-14" wx:else>
<view class="flex flex-center flex-col">
<view class="mb-16">
暂无收货地址
</view>
<t-button theme="primary" shape="round" style="width: 50vw;" class="mt-32 mb-32" bind:tap="chooseAddr">新增收获地址</t-button>
</view>
</view>
</view>
<view class="row padding white-bg mt-32">
<view>领养清单</view>
<t-divider />
<view class="flex flex-center flex-justify-start">
<view>
<image src="{{info.imgList[0].url}}" style="width: 120rpx;height: 120rpx; border-radius: 16rpx;" mode="aspectFill"></image>
</view>
<view class="ml-16">
<view class="font-16 bold">{{info.name}}</view>
<t-tag class="mt-16">{{info.tag}}</t-tag>
</view>
</view>
<t-divider />
<view class="flex flex-center flex-justify-between">
<view>快递运费:¥ 12.00</view>
<view class="bold mt-16">¥ 12.00</view>
</view>
</view>
<view class="row padding white-bg mt-32">
<view class="flex flex-center flex-justify-start " bind:tap="change">
<t-icon name="{{checked ? 'check-circle-filled':'check-circle'}}" class="{{checked ?'primary':'black' }}" size="18"></t-icon>
<view slot="label" class="font-14 w400 ml-5" >
我承诺会好好照顾它,不随意丢弃。
</view>
</view>
</view>
<view class="bottom white-bg">
<view class="flex flex-center flex-justify-between full-width">
<view>合计:¥ 12.00元</view>
<view style="width: 400rpx;">
<t-button theme="primary" shape="round" style="width: 100%;" bind:tap="pay">支付邮费,接它回家</t-button>
</view>
</view>
</view>
</view>

9
pages/order/index.wxss Normal file
View File

@ -0,0 +1,9 @@
/* pages/order/index.wxss */
.bottom {
position: fixed;
bottom:0;
left:0;
right: 0;
padding: 32rpx;
background-color: white;
}

View File

@ -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. 优先比较 status0 在前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})
}
})
}
})
},
/**

View File

@ -1,4 +1,6 @@
{
"navigationBarTitleText": "植物领养中心",
"usingComponents": {}
"usingComponents": {
"t-popup": "tdesign-miniprogram/popup/popup"
}
}

View File

@ -2,7 +2,7 @@
<view>
<view class="flex flex-center primary-bg padding">
<view class="white">
我的阳光值 {{points}}
我的阳光值 {{points}}
</view>
<view class="ml-16" style="color: orange;">
<button class="avatar-wrapper" open-type="share">邀请好友获取更多兑换币</button>
@ -23,10 +23,23 @@
</view>
<view class="flex flex-center mb-16 mt-16" style="padding-bottom: 32rpx;">
<t-button size="small" style="width: 90%;" shape="round" theme="primary" wx:if="{{item.status === 0}}">立即领养(付邮)</t-button>
<t-button size="small" style="width: 90%;" shape="round" theme="danger" wx:if="{{item.status === 1}}">获取资格</t-button>
<t-button size="small" style="width: 90%;" shape="round" theme="primary" wx:if="{{item.status === 0}}" bind:tap="goInfo" data-id="{{item.id}}">立即领养(付邮)</t-button>
<t-button size="small" style="width: 90%;" shape="round" theme="danger" wx:if="{{item.status === 1}}" bind:tap="goShare" data-item="{{item}}">获取资格</t-button>
</view>
</view>
</view>
</view>
<!-- share -->
<t-popup visible="{{visible}}" placement='bottom' bind:tap="goShare">
<view >
<view class="flex flex-center padding">仅差一步,带走 {{current.name}}</view>
<view>
<image src="https://res.catter.cn/pub/2025/12/08/20251208112039694.png" style="width: 100vw; height: 75vw;"></image>
</view>
<view class="flex flex-center flex-col mt-32 mb-32">
<t-button theme="primary" shape="round" style="width: 70%;" icon="logo-wechat-stroke" open-type="share" >转发给微信好友</t-button>
</view>
</view>
</t-popup>
</view>

111
pages/store/info.js Normal file
View File

@ -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() {
}
})

3
pages/store/info.json Normal file
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

68
pages/store/info.wxml Normal file
View File

@ -0,0 +1,68 @@
<!--pages/store/info.wxml-->
<view>
<view wx:if="{{info}}" style="padding-bottom: 200rpx;">
<image src="{{info.imgList[0].url}}" style="width: 100vw;" mode="widthFix" data-url="{{info.imgList[0].url}}" bind:tap="goPreview"></image>
<view class=" white-bg flex flex-center flex-justify-between">
<view class="padding">
<view class="font-16 bold">{{info.name}}</view>
<view class="mt-16">
<t-tag>{{info.tag}}</t-tag>
</view>
</view>
<view class="price-tag-badge">
需 {{info.points}} 阳光值
</view>
</view>
<view class=" padding white-bg mt-32" style="margin:32rpx; border-radius: 16rpx;">
<view>🌳 植物公民档案</view>
<view class="mt-16 content-text">{{info.content}}
</view>
</view>
<view class=" padding white-bg mt-32" style="margin:32rpx; border-radius: 16rpx;">
<view>🌳 植物百科</view>
<view class="mt-16 content-text">
<view class="grid">
<view style="width: 100%;background-color: #4B84EE1C;border-radius: 8rpx;text-align: center;padding: 10rpx 0;">🌍 多年生</view>
<view style="width: 100%;background-color: #4B84EE1C;border-radius: 8rpx;text-align: center;padding: 10rpx 0;">🌞 中光照</view>
<view style="width: 100%;background-color: #4B84EE1C;border-radius: 8rpx;text-align: center;padding: 10rpx 0;">易养活</view>
</view>
<view class="font-12 mt-16" style="color: #00000099;">
<view>自然花期4-6月人工栽培可全年开花盛花期12-3月</view>
<view class="mt-16">喜高温多湿半阴环境,不耐寒,怕干旱和强光,忌积水;附生于树干或岩石,根系暴露于空气中吸收水分</view>
</view>
</view>
</view>
<view class=" padding white-bg mt-32" style="margin:32rpx; border-radius: 16rpx;" bind:tap="openVideo">
<view> 🎬 新手种植教程</view>
<view>
<image src="https://res.catter.cn/pub/2025/12/09/20251209111759009.png" style="width: 85vw;" mode="widthFix"></image>
</view>
<view>一分钟教会您,给我一个家</view>
</view>
<!-- <view class=" padding white-bg mt-32" style="margin:32rpx; border-radius: 16rpx;">
<view>社区秀</view>
<view class="grid-3 mt-16">
<view wx:for="{{3}}">
<image style="width: 100%; border-radius: 16rpx;" mode="widthFix" src="https://res.catter.cn/pub/2025/12/09/20251209112042393.png" ></image>
</view>
</view>
</view> -->
</view>
<view class="bottom">
<view class="flex flex-center flex-justify-between" style="padding-bottom: 32rpx;">
<view>我的阳光值 {{points}} </view>
<view>
<t-button theme="primary" shape="round" bind:tap="goOrder">立即领养(付邮)</t-button>
</view>
</view>
</view>
</view>

77
pages/store/info.wxss Normal file
View File

@ -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;
}

View File

@ -85,7 +85,7 @@
<view style="padding: 0 32rpx">
<view class="row" style="padding-top: 8rpx; padding-bottom: 8rpx;margin-bottom: 32rpx;">
<t-cell title="植物百科" hover arrow />
<t-cell title="植物百科" hover arrow url="../knowlage/index"/>
<t-cell title="植物领养中心" hover arrow bind:tap="goStore" />
<t-cell title="提醒设置" hover arrow />
<t-cell title="加入微信群" hover arrow bind:tap="goAbout" />

View File

@ -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
}
]
}