微信小程序仿爱回收页面设计-首页设计

Da白兔萘糖

于 2024-02-02 14:19:24 发布

阅读量588

点赞数 7

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/Lyq2017901206/article/details/135992559

版权

如果你想要在微信小程序中仿照爱回收的页面设计，以下是一些建议和指导：

1. 首页设计：
- 在首页上展示爱回收的品牌标识和主要信息，以吸引用户的注意。
- 提供一个搜索栏，让用户可以输入关键词搜索回收物品。
- 展示一些热门的回收物品或者特价商品，以吸引用户浏览和购买。
- 提供快捷入口或者分类导航，让用户可以根据自己的需求快速找到适合的回收物品。

2. 估价设计：
- 在购物车页面展示回收的商品分类，包括商品的品牌图片、名称等。

3. 用户个人中心设计：
- 提供用户个人中心，展示订单历史、积分记录的商品等信息。
- 允许用户修改个人资料、收货地址等信息。
- 提供客服联系方式，方便用户与客服进行沟通和反馈。

本设计使用Vant Weapp UI 组件库

1.首页homeIndex

文件 homeIndex.wxml

<!--pages/home/homeIndex/homeIndex.wxml-->
<van-tabbar active="{{ active }}" active-color="rgb(224, 88, 9)" bind:change="onChange">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="gold-coin-o">
        <view style="margin-bottom: 0.75rem;font-size: 0.95rem;font-weight: 600">
            估价
        </view>
    </van-tabbar-item>
    <van-tabbar-item icon="contact-o">我的</van-tabbar-item>
</van-tabbar>



<view wx:if="{{active==1}}">
    <valuation-center id="valuationcenter"></valuation-center>
</view>
<view wx:if="{{active==2}}">
    <user-center id="usercenter"></user-center>
</view>

<view wx:if="{{active==0}}">
    <view>
        <view class="top">
            <van-sticky>
                <van-row style="height: 2rem;margin-top: 1.5rem;background-color: white">
                    <!-- <van-col span="2">
                    <image style="height: 2rem;width: 2rem;margin-left: 0.5rem;background-color: #56c5a1" class="login-img" src="/pages/image/logo.png"></image>
                </van-col> -->
                    <van-col span="24">
                        <van-search style="height: 1.6rem;" shape="round" bind:clear="onCancelSearch" background="white" value="{{searchValue}}" placeholder="请输入搜索关键词" use-action-slot bind:change="onSearchChange" bind:search="onSearch">
                            <view style="color: black;padding-left: 5px;padding-right: 5px;" slot="action" bind:tap="onSearchClick">搜索</view>
                        </van-search>
                    </van-col>
                    <!-- <van-col span="2">span: 8</van-col> -->
                </van-row>
            </van-sticky>
        </view>

    </view>

    <view class="item-type">
        <van-grid column-num="4" border="{{ false }}">
            <van-grid-item use-slot wx:for="{{ goodsList}}" wx:for-item="list">
                <image class="item-type-image" src="{{list.good_icon}}" />
                <text class="item-type-title">{{list.good_title}}</text>
            </van-grid-item>
        </van-grid>
    </view>

    <view class="nearby-stores">
        <view class="title">门店</view>
        <view>
            <view class="store">
                <van-row>
                    <van-col span="6">
                        <image class="store-image" src="https://img0.baidu.com/it/u=2195324720,1171192494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" />
                    </van-col>
                    <van-col span="18">
                        <view class="image-right">
                            <view class="store-title">大王回收店</view>
                            <view class="store-address">地址：云南省昆明市盘龙区</view>
                            <view class="business-hours">营业时间：8:00-2400</view>


                        </view>
                    </van-col>
                </van-row>
            </view>

            <view class="store">
                <van-row>
                    <van-col span="6">
                        <image class="store-image" src="https://img0.baidu.com/it/u=2195324720,1171192494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" />
                    </van-col>
                    <van-col span="18">
                        <view class="image-right">
                            <view class="store-title">大王回收店</view>
                            <view class="store-address">地址：云南省昆明市盘龙区</view>
                            <view class="business-hours">营业时间：8:00-24:00</view>
                        </view>
                    </van-col>
                </van-row>
            </view>


        </view>
    </view>

</view>

文件 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

<view class="user-center">
    <view class="head-portrait ">
        <van-row>
            <van-col span="6">
                <image class="userinfo-avatar" src="{{logoutAvatar}}" mode="cover"></image>
            </van-col>
            <van-col span="16">
                <van-row>
                    <van-col>
                        <text class="userName">
                            {{userInfo.nickname?userInfo.nickname:'请进行登录'}}
                        </text>
                    </van-col>
                    <van-col>
                        <view class="Sign" bindtap="onSignin">
                            <van-icon color="black" name="points" />
                            签到
                        </view>
                    </van-col>
                </van-row>
            </van-col>
            <van-col span="2">
                <view class="Settings">
                    <van-icon size="40rpx" name="setting-o" color="white" />
                </view>
            </van-col>
            <view style="color: #37b38b;">.</view>
            <view class="userPhone">{{userInfo.mobile?userInfo.mobile:'暂无电话'}}</view>
        </van-row>

        <view class="wallet">
            <view class="notecase">
                <view style="margin-top: 0.55rem;">
                    <van-row>
                        <van-col>
                            <van-icon size="1.25rem" name="paid" />
                        </van-col>
                        <van-col> <text style="margin-left: 0.25rem;color: black;font-weight: 800;font-size: 0.90;">回收钱包</text>
                        </van-col>
                    </van-row>
                </view>
                <view style="margin-top: 1.25rem;">
                    <van-row>
                        <van-col span="16">
                            <text style="color: black;font-size: 0.85rem;font-weight: 700;">￥</text>
                            <text style="color: black;font-size: 1.85rem;font-weight: 700;">0.00</text>
                        </van-col>
                        <van-col span="8">
                            <view class="check">
                                查看
                            </view>

                        </van-col>
                    </van-row>
                </view>
            </view>
        </view>
    </view>


    <view class="navigationList">
        <view style="margin-top: 30rpx;">
            <view class='middle'>
                <view class="view_2">
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="1">
                        <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                        <text class="text_1">订单中心</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="2">
                        <image class="image_tupian" src="/pages/image/integral.png"></image>
                        <text class="text_1">积分记录</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="3">
                        <image class="image_tupian" src="/pages/image/volume.png"></image>
                        <text class="text_1">领卷中心</text>
                    </view>
                    <!-- <view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3">
                    <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                    <text class="text_1">全部订单</text>
                </view> -->
                </view>
            </view>
        </view>
    </view>

    <view>
        <!-- 最后一部分 -->
        <view class='container_4'>
            <van-cell title="个人资料" icon="contact" is-link id="4" bindtap="webViewAll" />
            <van-cell title="地址管理" icon="location" is-link id="7" bindtap="webViewAll" />
            <van-cell title="投诉建议" icon="records" is-link id="5" bindtap="webViewAll" />
            <van-cell title="帮助中心" icon="warning" is-link id="6" bindtap="webViewAll" />
        </view>
    </view>

</view>

文件 userCenter.wxss

<view class="user-center">
    <view class="head-portrait ">
        <van-row>
            <van-col span="6">
                <image class="userinfo-avatar" src="{{logoutAvatar}}" mode="cover"></image>
            </van-col>
            <van-col span="16">
                <van-row>
                    <van-col>
                        <text class="userName">
                            {{userInfo.nickname?userInfo.nickname:'请进行登录'}}
                        </text>
                    </van-col>
                    <van-col>
                        <view class="Sign" bindtap="onSignin">
                            <van-icon color="black" name="points" />
                            签到
                        </view>
                    </van-col>
                </van-row>
            </van-col>
            <van-col span="2">
                <view class="Settings">
                    <van-icon size="40rpx" name="setting-o" color="white" />
                </view>
            </van-col>
            <view style="color: #37b38b;">.</view>
            <view class="userPhone">{{userInfo.mobile?userInfo.mobile:'暂无电话'}}</view>
        </van-row>

        <view class="wallet">
            <view class="notecase">
                <view style="margin-top: 0.55rem;">
                    <van-row>
                        <van-col>
                            <van-icon size="1.25rem" name="paid" />
                        </van-col>
                        <van-col> <text style="margin-left: 0.25rem;color: black;font-weight: 800;font-size: 0.90;">回收钱包</text>
                        </van-col>
                    </van-row>
                </view>
                <view style="margin-top: 1.25rem;">
                    <van-row>
                        <van-col span="16">
                            <text style="color: black;font-size: 0.85rem;font-weight: 700;">￥</text>
                            <text style="color: black;font-size: 1.85rem;font-weight: 700;">0.00</text>
                        </van-col>
                        <van-col span="8">
                            <view class="check">
                                查看
                            </view>

                        </van-col>
                    </van-row>
                </view>
            </view>
        </view>
    </view>


    <view class="navigationList">
        <view style="margin-top: 30rpx;">
            <view class='middle'>
                <view class="view_2">
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="1">
                        <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                        <text class="text_1">订单中心</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="2">
                        <image class="image_tupian" src="/pages/image/integral.png"></image>
                        <text class="text_1">积分记录</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="3">
                        <image class="image_tupian" src="/pages/image/volume.png"></image>
                        <text class="text_1">领卷中心</text>
                    </view>
                    <!-- <view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3">
                    <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                    <text class="text_1">全部订单</text>
                </view> -->
                </view>
            </view>
        </view>
    </view>

    <view>
        <!-- 最后一部分 -->
        <view class='container_4'>
            <van-cell title="个人资料" icon="contact" is-link id="4" bindtap="webViewAll" />
            <van-cell title="地址管理" icon="location" is-link id="7" bindtap="webViewAll" />
            <van-cell title="投诉建议" icon="records" is-link id="5" bindtap="webViewAll" />
            <van-cell title="帮助中心" icon="warning" is-link id="6" bindtap="webViewAll" />
        </view>
    </view>

</view>

文件 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

<view class="valuation-center">
    <view class="top">
        <van-sticky>
            <van-row style="height: 2rem;margin-top: 1.5rem;background-color: white">
                <!-- <van-col span="2">
                    <image style="height: 2rem;width: 2rem;margin-left: 0.5rem;background-color: #56c5a1" class="login-img" src="/pages/image/logo.png"></image>
                </van-col> -->
                <van-col span="24">
                    <van-search style="height: 1.6rem;" shape="round" bind:clear="onCancelSearch" background="white" value="{{searchValue}}" placeholder="搜索品牌/型号" use-action-slot bind:change="onSearchChange" bind:search="onSearch">
                        <view style="color: black;padding-left: 5px;padding-right: 5px;" slot="action" bind:tap="onSearchClick">搜索</view>
                    </van-search>
                </van-col>
                <!-- <van-col span="2">span: 8</van-col> -->
            </van-row>
        </van-sticky>
    </view>
    <view style="display: flex;">
        <view>
            <van-sidebar active-key="{{ activeKey }}">
                <view wx:for="{{recycleLaber}}">
                    <van-sidebar-item title="{{item.goods}}" />
                </view>
            </van-sidebar>
        </view>

        <view class="item-type">
            <van-grid column-num="4" border="{{ false }}">
                <van-grid-item use-slot wx:for="{{ brandList}}" bindtap="onValuation" wx:for-item="list">
                    <image class="icon-image" src="{{list.brand_logo}}" />
                    <text class="icon-title">{{list.brandName}}</text>
                </van-grid-item>
            </van-grid>
        </view>

        <view >
        
        </view>
    </view>
</view>

文件 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() {

    }
})

首页页面效果