微信小程序 仿爱回收页面设计-首页设计
如果你想要在微信小程序中仿照爱回收的页面设计，以下是一些建议和指导：
1. 首页设计：
- 在首页上展示爱回收的品牌标识和主要信息，以吸引用户的注意。
- 提供一个搜索栏，让用户可以输入关键词搜索回收物品。
- 展示一些热门的回收物品或者特价商品，以吸引用户浏览和购买。
- 提供快捷入口或者分类导航，让用户可以根据自己的需求快速找到适合的回收物品。
2. 估价设计：
- 在购物车页面展示回收的商品分类，包括商品的品牌图片、名称等。
3. 用户个人中心设计：
- 提供用户个人中心，展示订单历史、积分记录的商品等信息。
- 允许用户修改个人资料、收货地址等信息。
- 提供客服联系方式，方便用户与客服进行沟通和反馈。
本设计使用Vant Weapp UI 组件库
1.首页homeIndex
文件 homeIndex.wxml
首页
估价
我的
搜索
{{list.good_title}}
门店
大王回收店
地址：云南省昆明市盘龙区
营业时间：8:00-2400
大王回收店
地址：云南省昆明市盘龙区
营业时间：8:00-24:00
文件 homeIndex.wxsswenj
Page {
background-color: #f7f7f7;
}
/* 顶部搜索框 */
.top {
background-color: white;
border-bottom-left-radius: 40px;
/* 左下角圆角 */
border-bottom-right-radius: 40px;
/* 右下角圆角 */
}
.item-type{
background-color: white;
padding: 0.5rem 0.5rem;
margin: 0.25rem;
border-radius: 10rpx;
height: 100%;
}
.item-type-image{
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.item-type-title{
margin-top: 0.25rem;
font-size: 0.85rem;
font-family: "仿宋";
font-weight: 900;
}
.nearby-stores{
background-color: white;
padding: 0.5rem 0.5rem;
margin: 0.25rem;
border-radius: 10rpx;
height: 100%;
}
.nearby-stores .title{
font-size: 0.95rem;
font-weight: 900;
font-family: "微软雅黑";
}
.nearby-stores .store{
padding: 0.5rem 0rem;
}
.store-image{
width: 100%;
height: 4rem;
border-radius: 20rpx;
}
.image-right{
margin-left: 0.75rem;
}
.store-title{
font-size: 0.85rem;
font-weight: 900;
font-family: "仿宋";
}
.store-address{
font-size: 0.75rem;
margin-top: 0.35rem;
}
.business-hours{
font-size: 0.75rem;
margin-top: 0.35rem;
}文件 homeIndex.js
// pages/home/homeIndex/homeIndex.js
Page({
/**
* 页面的初始数据
*/
data: {
active: 0,
goodsList:[
{
id:1,
good_title:"手机",
good_icon:"https://img2.baidu.com/it/u=2318594456,580534092&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
}, {
id:2,
good_title:"笔记本",
good_icon:"https://img1.baidu.com/it/u=3926980927,1678879058&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=518"
}, {
id:3,
good_title:"平板",
good_icon:"https://img.99ppt.com/pic/f09d7de1-1066-46d1-8de3-94168ad9ec49.jpg"
}, {
id:4,
good_title:"智能耳机",
good_icon:"https://img1.baidu.com/it/u=2316088800,3457899691&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
}, {
id:5,
good_title:"摄影摄像",
good_icon:"https://img2.baidu.com/it/u=1972770341,27037581&fm=253&fmt=auto&app=138&f=PNG?w=315&h=315"
}, {
id:6,
good_title:"智能手表",
good_icon:"https://img2.baidu.com/it/u=1910319285,1757449789&fm=253&fmt=auto&app=138&f=JPEG?w=330&h=500"
},
{
id:7,
good_title:"乐器",
good_icon:"https://img2.baidu.com/it/u=3468014538,2528336133&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=379"
}, {
id:8,
good_title:"腕表",
good_icon:"https://img1.baidu.com/it/u=1727431678,2367004461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=958"
}, {
id:9,
good_title:"包袋",
good_icon:"https://picnew13.photophoto.cn/20181228/fenhongseshoutibaochahua-31308116_1.jpg"
}, {
id:10,
good_title:"金银珠宝",
good_icon:"https://img2.baidu.com/it/u=2543510446,829878126&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"
}, {
id:11,
good_title:"香烟名酒",
good_icon:"https://img2.baidu.com/it/u=2822975092,1866783435&fm=253&fmt=auto&app=138&f=JPEG?w=538&h=500"
}, {
id:12,
good_title:"全部",
good_icon:"https://img0.baidu.com/it/u=212003088,440711283&fm=253&fmt=auto&app=138&f=JPEG?w=256&h=256"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
onChange(event) {
// event.detail 的值为当前选中项的索引
this.setData({
active: event.detail
});
if (event.detail == 0) {
// this.onCancelSearch()
}
if (event.detail == 1) {
let Mymessage = this.selectComponent('#valuationcenter'); // 页面获取自定义组件实例
Mymessage.getvaluationInfo();
}
if (event.detail == 2) {
let countDown = this.selectComponent('#usercenter'); // 页面获取自定义组件实例
countDown.getMyInfo(); // 通过实例调用组件事件
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})文件 homeIndex.json
{
"usingComponents": {
"user-center": "/pages/user/myself/userCenter/userCenter",
"valuation-center":"/pages/user/myself/valuationCenter/valuationCenter"
}
}2.个人中心 userCenter
文件 userCenter.wxml
{{userInfo.nickname?userInfo.nickname:'请进行登录'}}
.
{{userInfo.mobile?userInfo.mobile:'暂无电话'}}
回收钱包
￥
0.00
查看
订单中心
积分记录
领卷中心
文件 userCenter.wxss
{{userInfo.nickname?userInfo.nickname:'请进行登录'}}
.
{{userInfo.mobile?userInfo.mobile:'暂无电话'}}
回收钱包
￥
0.00
查看
订单中心
积分记录
领卷中心
文件 userCenter.js
// pages/user/myself/userCenter/userCenter.js
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {
avatar: " https://yiguyun.kaichuan668.com/uploadFolder/ed0677c5-749f-4697-82d9-c1bb9cfb370b.png",
nickname: "进空间看看"
},
loginAvatar: "https://yiguyun.kaichuan668.com/uploadFolder/ed0677c5-749f-4697-82d9-c1bb9cfb370b.png",
logoutAvatar: " https://yiguyun.kaichuan668.com/uploadFolder/51ab63be-3668-4b12-af92-54a162412a2d.png"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
getMyInfo() {
console.log("个人中心")
},
webViewAll(e) {
const value = e.currentTarget.id
return
switch (value) {
case "3": //加价卷兑换
wx.navigateTo({
url: '...'
})
break;
case "5": //投诉建议
wx.navigateTo({
url: '...'
})
break;
case "6": //帮助中心
wx.navigateTo({
url: '...'
})
break;
case "7": //帮助中心
wx.navigateTo({
url: '...'
})
break;
default:
wx.navigateTo({
url: '...',
})
break;
}
},
// 签到
onSignin() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})3.估价中心 valuationCenter
文件 valuationCenter.wxml
搜索
{{list.brandName}}
文件 valuationCenter.wxss
Page {
background-color: #f7f7f7;
}
/* 顶部搜索框 */
.top {
background-color: white;
border-bottom-left-radius: 40px;
/* 左下角圆角 */
border-bottom-right-radius: 40px;
/* 右下角圆角 */
}
.item-type{
background-color: white;
padding: 0.5rem 0.5rem;
margin: 0.25rem;
border-radius: 10rpx;
height: 100%;
}
.icon-image{
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.icon-title{
margin-top: 0.25rem;
font-size: 0.85rem;
font-family: "仿宋";
font-weight: 900;
}文件 valuationCenter.js
// pages/user/myself/valuationCenter/valuationCenter.js
Page({
/**
* 页面的初始数据
*/
data: {
activeKey:0,
recycleLaber:[
{
id:1,
goods:"手机",
},
{
id:2,
goods:"笔记本",
}, {
id:3,
goods:"平板",
}, {
id:3,
goods:"摄影摄像",
},
],
brandList:[
{
id:1,
brandName:"苹果",
brand_logo:"https://img1.baidu.com/it/u=3874859559,4027725428&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
}, {
id:2,
brandName:"华为",
brand_logo:"https://img1.baidu.com/it/u=3852675456,2656010470&fm=253&fmt=auto&app=120&f=GIF?w=550&h=400"
}, {
id:3,
brandName:"小米",
brand_logo:"https://img1.baidu.com/it/u=2101092847,1018411334&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=480"
}, {
id:4,
brandName:"荣耀",
brand_logo:"https://img.zcool.cn/community/01677161a42d6a11013f01cd8750a7.jpg@1280w_1l_2o_100sh.jpg"
}, {
id:5,
brandName:"oppo",
brand_logo:"https://img1.baidu.com/it/u=2367995204,2182420605&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
}, {
id:6,
brandName:"vivo",
brand_logo:"https://p8.itc.cn/q_70/images03/20210705/c918968a64364ac99fdda37d2a868b6b.jpeg"
},
{
id:7,
brandName:"三星",
brand_logo:"https://n.sinaimg.cn/sinakd20200524ac/160/w1920h1440/20200524/7645-itzixrs8451702.jpg"
}, {
id:8,
brandName:"iQoo",
brand_logo:"https://www.leixue.com/uploads/2019/02/iQOO.jpg%21760"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
onValuation(){
wx.navigateTo({
url: '/pages/user/goods/goodsValuation/goodsValuation',
})
},
getvaluationInfo(){
console.log("估价中心")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})首页页面效果
