目录
一.购物车页面
1. 购物车页面设置
引入vant组件进行页面组件设置：介绍 - Vant Weapp (youzan.github.io)
找到提交订单栏并将其代码复制到购物车页面，并将组件引入app.json
1.1 完善页面基础样式
<view bindtap="onSwipeCellPage"> <!-- 购物车列表结构 --> <view wx:if="{{ token && cartList.length }}" class="container goods-wrap" bindtap="onSwipeCellPageTap" > <view class="goods-item" wx:for="{{ cartList }}" wx:key="goodsId"> <van-swipe-cell class="goods-swipe" right-width="{{ 65 }}" id="swipe-cell-{{ item.goodsId }}" bind:open="swipeCellOpen" bind:click="onSwipeCellClick" > <van-cell-group border="{{ false }}"> <view class="goods-info"> <view class="left"> <van-checkbox checked-color="#FA4126" value="{{ item.isChecked }}" bindchange="updateChecked" data-id="{{ item.goodsId }}" data-index="{{ index }}" ></van-checkbox> </view> <view class="mid"> <image class="img" src="{{ item.imageUrl }}" /> </view> <view class="right"> <view class="title"> {{ item.name }} </view> <view class="buy"> <view class="price"> <view class="symbol">¥</view> <view class="num">{{ item.price }}</view> </view> <view class="buy-btn"> <van-stepper min="1" max="200" integer value="{{ item.count }}" data-id="{{ item.goodsId }}" data-index="{{ index }}" data-oldbuynum="{{ item.count }}" bindchange="changeBuyNum" /> </view> </view> </view> </view> </van-cell-group> <view slot="right" class="van-swipe-cell__right" bindtap="delCartGoods" data-id="{{ item.goodsId }}" >删除</view > </van-swipe-cell> </view> </view> <!-- 购物车列表为空展示的结构 --> <van-empty wx:else description="{{ emptyDes }}"> <navigator url="/pages/index/index" open-type="switchTab" wx:if="{{ token && cartList.length === 0 }}" > <van-button round type="danger" class="bottom-button">去购物</van-button> </navigator> <navigator url="/pages/login/login" wx:else> <van-button round type="danger" class="bottom-button">去登录</van-button> </navigator> </van-empty> <!-- 底部工具栏 --> <!-- 底部工具栏组件展示价格，默认是以 分 的形式进行展示，如果需要以 元 的方式进行展示 --> <van-submit-bar wx:if="{{ cartList.length }}" price="{{ totalPrice * 100 }}" button-text="去结算" tip="{{ true }}" bind:submit="toOrder" > <van-checkbox value="{{ selectAllStatus }}" checked-color="#FA4126" bindchange="selectAllStatus" > 全选 </van-checkbox> </van-submit-bar> </view>
1.2 效果图
二. 用户页面
1.1 用户页面基础样式
<!--pages/info/info.wxml--> <view class="container"> <!-- 顶部展示图 --> <view class="top-show"> <image mode="widthFix" class="top-show-img" src="/assets/images/banner.jpg"></image> </view> <view class="bottom-show"> <!-- 未登录面板 --> <view wx:if="{{ !token }}" class="user-container section" bindtap="toLoginPage"> <view class="avatar-container"> <image src="/assets/images/avatar.png"></image> <view class="no-login"> <text class="ellipsis">未登录</text> <text>点击授权登录</text> </view> </view> </view> <!-- 登录以后得面板 --> <view wx:else class="user-container section"> <view class="avatar-container"> <image src="{{ userInfo.headimgurl }}"></image> <view class="no-login"> <text class="ellipsis">{{ userInfo.nickname }}</text> </view> </view> <view class="setting"> <navigator url="/modules/settingModule/pages/settings/settings"> 设置 </navigator> </view> </view> <!-- 订单面板 --> <view class="order section"> <view class="order-title-wrap"> <text class="title">我的订单</text> <text class="more">查看更多></text> </view> <view class="order-content-wrap"> <view class="order-content-item" wx:for="{{ initpanel }}" wx:key="index"> <navigator url="{{ token ? item.url : '/pages/login/login' }}"> <view class="iconfont {{ item.iconfont }}"></view> <text>{{ item.title }}</text> </navigator> </view> </view> </view> <!-- 关于售前售后服务面板 --> <view class="after-scale section"> <view class="order-title-wrap"> <text class="title">关于售前售后服务</text> </view> <view class="after-scale-item"> <view class="iconfont icon-kefufenxiermaikefu"></view> <text>可与小程序客服实时聊天或电话咨询</text> </view> <view class="after-scale-item"> <view class="iconfont icon-shijian"></view> <text>小程序客服工作时间为: 8:30 ~ 20:30</text> </view> <view class="after-scale-item"> <view class="iconfont icon-dizhiguanli"></view> <text>鲜花制作完毕情况下暂不支持退款</text> </view> <view class="after-scale-item"> <view class="iconfont icon-zhangben"></view> <text>鲜花可以提前7-15天预订重大节假日不支持定时配送</text> </view> </view> <!-- 底部面板 --> <view class="info-footer"> 尚硅谷技术支持 </view> </view> </view>
1.2 用户页面样式渲染
// 商品列表样式 .goods-wrap { padding: 16rpx 16rpx 100rpx 16rpx; .goods-item { .goods-swipe { width: 100%; .goods-info { display: flex; align-items: center; padding: 24rpx 16rpx; border-radius: 16rpx; margin-bottom: 16rpx; background-color: white; box-sizing: border-box; transition: transform 1s cubic-bezier(0.18, 0.89, 0.32, 1) !important; .left { /* width: 56px; */ display: flex; align-items: center; justify-content: center; } .mid { width: 114px; height: 125px; .img { height: 100%; } } .right { height: 125px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; .title { flex: 1; flex-shrink: 0; font-size: 26rpx; color: #333; line-height: 44rpx; font-weight: 400; overflow: hidden; word-break: break-word; } .buy { display: flex; justify-content: space-between; .price { display: flex; color: #fa4126; font-size: 36rpx; .symbol { font-size: 10px; margin-right: 2px; margin-top: 8px; } } } } } .van-swipe-cell__right { background-color: #fa4126; text-align: center; display: flex; align-items: center; justify-content: center; width: 130rpx; color: #fff; font-size: 24rpx; height: 100%; } } } } // 提交订单栏样式 .submit-footer { display: flex; position: fixed; left: 0; bottom: 0; width: 100%; background-color: white; padding: 12px 8px; align-items: center; justify-content: space-between; z-index: 10; .right { display: flex; margin-right: 16px; align-items: center; justify-content: center; } }
1.3 用户页面配置(my.js)
// pages/info/info.js import { ComponentWithStore } from 'mobx-miniprogram-bindings' import { userStore } from '@/stores/userstore' ComponentWithStore({ // 页面的初始数据 data: { // 初始化第二个面板数据 initpanel: [ { url: '/modules/orderPayModule/pages/order/list/list', title: '商品订单', iconfont: 'icon-dingdan' }, { url: '/modules/orderPayModule/pages/order/list/list', title: '礼品卡订单', iconfont: 'icon-lipinka' }, { url: '/modules/orderPayModule/pages/order/list/list', title: '退款/售后', iconfont: 'icon-tuikuan' } ] }, storeBindings: { store: userStore, fields: ['token', 'userInfo'] }, methods: { // 跳转到登录页面 toLoginPage() { wx.navigateTo({ url: '/pages/login/login' }) } } })
1.4 效果展示
三. 商品列表页面
创建商品列表页面
新建一个page用做商品列表页面
1.2 商品列表基本框架样式
框架页面(wxml)
<!-- 列表分类卡片 --> <view class="goods_cart_container"> <navigator class="navigator_nav" url="/modules/goodModule/pages/goods/detail/detail?goodsId={{goodItem.id}}" > <!-- 商品图片 --> <image class="good_img" src="{{goodItem.imageUrl}}" mode="widthFix" /> <!-- 商品详细信息 --> <view class="goods_item_info"> <!-- 商品名称 --> <text class="goods_item_info_name">{{goodItem.name}}</text> <!-- 商品描述 --> <text class="goods_item_info_promo">{{goodItem.floralLanguage}}</text> <!-- 商品价格 --> <view class="goods_item_info_bottom"> <view class="goods_item_info_price"> <text class="text">¥</text>{{goodItem.price}} </view> <view class="goods_item_info_origin_price"> <text class="text">¥</text> {{goodItem.marketPrice}} </view> <!-- 加入购物车图片 --> <view class="goods_item_info_btn"> <image class="goods_image" src="/assets/images/buybtn.png" mode="" /> </view> </view> </view> </navigator> </view>
页面渲染(scss)
/* components/goods-card/goods-card.wxss */ .goods_cart_container { width: 350rpx; margin-top: 18rpx; background: #fff; border-radius: 18rpx; } .good_img { width: 100%; max-height: 360rpx; border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; } .goods_item_info { display: flex; flex-direction: column; padding: 10rpx 20rpx; } .goods_item_info .goods_item_info_name { font-weight: 600; font-size: 30rpx; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goods_item_info .goods_item_info_promo { padding-top: 20rpx; padding-bottom: 3px; font-size: 12px; color: #71797f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goods_item_info_bottom { display: flex; line-height: 50rpx; margin-top: 20rpx; } .goods_item_info_bottom .goods_image { width: 48rpx; height: 48rpx; } .goods_item_info_price { font-size: 30rpx; font-weight: bold; color: #f3514f; } .goods_item_info_price .text { font-size: 24rpx; padding-right: 4rpx; font-weight: normal; } .goods_item_info_origin_price { flex: 1; font-size: 20rpx; color: #71797f; text-decoration-line: line-through; margin-left: 6%; margin-top: 4rpx; } .goods_item_info_origin_price .text { font-size: 20rpx; }
页面配置
js文件
// components/goods-list/index.js Component({ /** * 组件的属性列表 */ properties: { // 列表标题 title: { type: String, value: '' }, // 传递的列表数据 list: { type: Array, value: [] } }, /** * 组件的初始数据 */ data: {}, /** * 组件的方法列表 */ methods: {} })json文件
{ "component": true, "usingComponents": { "goods-card": "/components/goods-card/goods-card" } }
2. 商品列表细节设置
2.1 页面样式
<view class="container goods-detail"> <!-- 商品大图 --> <view class="banner-img"> <image class="img" src="/assets/images/floor-img.jpg" /> </view> <!-- 商品的基本信息 --> <view class="content"> <view class="price"> <view class="price-num">¥299</view> <view class="price-origin-num">¥399</view> </view> <view class="title">亲爱的/情人节网红款/19枝亲爱的/情人节网红款</view> <view class="desc">用最温暖的最有情的心意，用最温暖的最有情的心意</view> </view> <!-- 商品的详细信息 --> <view class="detail"> <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" /> <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" /> <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" /> </view> <!-- 商品的底部商品导航 --> <van-goods-action> <navigator url="/pages/index/index" open-type="switchTab"> <van-goods-action-icon icon="wap-home-o" text="首页" /> </navigator> <navigator url="/pages/cart/cart" open-type="switchTab"> <van-goods-action-icon icon="cart-o" text="购物车" info="{{ allCount }}" /> </navigator> <van-goods-action-icon open-type="contact" icon="chat-o" text="客服" bind:click="onClickIcon" /> <van-goods-action-button text="加入购物车" type="warning" bindtap="handleAddcart" /> <van-goods-action-button text="立即购买" bindtap="handeGotoBuy" /> </van-goods-action> <!-- 加入购物车、立即购买弹框 --> <!-- show 控制弹框的隐藏和展示 --> <!-- bind:close 点击关闭弹框时触发的回调 --> <van-action-sheet show="{{ show }}" sh> <view class="sheet-wrapper"> <view class="goods-item"> <!-- 需要购买的商品图片 --> <view class="mid"> <image class="img" src="/assets/images/floor-img.jpg" /> </view> <!-- 商品基本信息 --> <view class="right"> <!-- 商品名字 --> <view class="title"> 亲爱的/情人节网红款/19枝 </view> <!-- 商品价格 --> <view class="buy"> <view class="price"> <view class="symbol">¥</view> <view class="num">100</view> </view> <!-- 步进器组件控制购买数量 --> <view class="buy-btn"> <!-- Stepper 步进器，由增加按钮、减少按钮和输入框组成，控制购买数量 --> <van-stepper value="{{ count }}" bind:change="onChangeGoodsCount" /> </view> </view> </view> </view> <!-- 祝福语输入框 --> <view class="time-wraper"> <view class="title">祝福语</view> <textarea model:value="{{ blessing }}" bindinput="onTextAreaChange" class="form-textarea" placeholder="必填，写上您的祝福语，给心爱的他（她）送上你的祝福（请勿填写特殊符号或表情符号）" name="textarea" /> </view> <!-- 确定按钮 --> <view class="sheet-footer-btn"> <van-button block type="primary" round> 确定 </van-button> </view> </view> </van-action-sheet> </view>
2.2 页面样式渲染
/* pages/goods/detail/index.wxss */ .container { padding: 0rpx !important; } .goods-detail { margin-bottom: 100px; } // 商品大图 .banner-img { height: 800rpx; image { height: 100%; } } // 商品的基本信息 .content { margin: 0 16rpx; background: white; padding: 40rpx; position: relative; border-radius: 18rpx; top: -80px; height: 170rpx; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; .price { display: flex; .price-num { font-size: 18px; color: #fa4126; font-weight: bold; } .price-origin-num { font-size: 12px; color: #b4babf; margin-left: 4px; text-decoration: line-through; margin-top: 6px; } } .title { font-size: 16px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .desc { font-size: 12px; color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } // 详细图片 .detail { margin: -130rpx 16rpx 100rpx; background: white; padding: 20rpx 16rpx; border-radius: 16rpx; } // 加入购物车、立即购买弹框 .sheet-wrapper { padding: 16px; .sheet-footer-btn { padding: 16px; } } // 商品详情 .goods-item { display: flex; align-items: center; padding: 0 32rpx 40rpx 0; .left { width: 56px; display: flex; align-items: center; justify-content: center; } .mid { width: 114px; height: 125px; image { height: 100%; } } .right { height: 125px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; .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; .symbol { font-size: 10px; margin-right: 2px; margin-top: 8px; } } } } } // 祝福语 .time-wraper { margin-bottom: 12px; .title, .time { justify-content: space-between; font-size: 14px; color: #333333; } .form-textarea { border-radius: 12px; background-color: #f7f8fa; padding: 16px 12px; font-size: 13px; margin-top: 12px; width: 94%; height: 84px; } }
2.3 页面配置
js文件
// pages/goods/detail/index.js Page({ // 页面的初始数据 data: { goodsInfo: {}, // 商品详情 show: false, // 控制加入购物车和立即购买弹框的显示 count: 1, // 商品购买数量，默认是 1 blessing: '' // 祝福语 }, // 加入购物车 handleAddcart() { this.setData({ show: true }) }, // 立即购买 handeGotoBuy() { this.setData({ show: true }) }, // 点击关闭弹框时触发的回调 onClose() { this.setData({ show: false }) }, // 监听是否更改了购买数量 onChangeGoodsCount(event) { console.log(event.detail) } })
2.3 效果展示
四. 订单页面
1. 订单页面框架
<!--pages/tist/tist.wxml--> <view class="container" wx:if="{{ orderList.length }}"> <view class="order-list" wx:for="{{orderList}}" wx:key="index"> <view class="order-item"> <view class="top"> <view class="order-num">订单号<text class="num">679246470200</text></view> <view class="order-status">已支付</view> </view> <view class="middle"> <view class="img"> <image src="../../assets/images/floor-img.jpg" mode="widthFix" /> </view> <view class="text"> <view class="goods-name">不变的承诺</view> <view class="goods-blessing">不变的承诺</view> </view> <view class="number"> <view class="goods-price">¥100</view> <view class="goods-count">x 1</view> </view> <view class="bottom"> <view class="total-price"> <view class="text">实付</view> <view class="price"><text>¥</text>666</view> </view> </view> </view> </view> </view> </view> <!-- 购物车列表为空的情况 --> <van-empty description="还没有购买商品，快去购买吧~" wx:else> </van-empty>
2. 订单页面渲染
/* pages/tist/tist.wxss */ .container { background-color: whitesmoke; height: 100vh; .order-list { .order-item { width: 90%; height: 380rpx; margin: 20rpx auto; padding: 20rpx; border-radius: 20rpx; background-color: white; position: relative; .top { display: flex; justify-content: space-between; margin-bottom: 10rpx; font-size: 28rpx; font-weight: normal; color: #333333; } .middle { display: flex; .img { height: 200rpx; width: 250rpx; image { width: 100%; } } .text { margin: 0 220rpx 0 20rpx; .goods-name { font-size: 28rpx; color: #333; line-height: 40rpx; font-weight: 400; } .goods-blessing { font-size: 24rpx; height: 32rpx; line-height: 32rpx; color: #999999; margin: 8rpx 0; } } .number { .goods-price { white-space: nowrap; color: #fa4126; font-size: 24rpx; line-height: 48rpx; } .goods-count { white-space: nowrap; order: 4; text-align: right; font-size: 24rpx; color: #999; margin: 20rpx 0 0 auto; } } } .bottom { position: absolute; right: 50rpx; bottom: 50rpx; .total-price { display: flex; .text { font-size: 28rpx; color: #333333; margin-right: 10px; } .price { font-size: 32rpx; color: #fa4126; font-weight: bold; } } } } } }
3. 订单页面配置
// pages/tist/tist.js Page({ /** * 页面的初始数据 */ data: { orderList:[1,2,3] }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
4. 效果展示
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
