本文主要围绕店铺页面进行讲解,更多代码细节可参见 店铺 和 商家。
操作步骤
步骤1:搭建店铺
- 进入 CMS 内容管理控制台,新建店铺内容模型,数据库名称设置为 dp。
- 进入新建的店铺页面,如下设置内容集合:
内容类型 展示名称 数据库字段名 单行字符串 店铺名称 name 单行字符串 店铺地点 dpdd 日期与时间 时间 time 布尔值 是否营业 sfyy 图片 店铺照片 dpzp 单行字符串 简介 jj 说明更多 CMS 内容管理详细操作请参见 搭建轮播图。
- 然后将它在小程序进行展示。
<!--pages/dp/dp.wxml-->
<view class='search'>
<input type='text' placeholder='请输入您要搜索的内容' bindinput='input' bindconfirm='confirm' />
<icon type='search' class='icons'></icon>
</view>
<view class="rmbs">
<view class="rmbs-list" wx:for="{{list}}" wx:for-item="item" wx:key="_id" bindtap='showbs' id="{{item._id}}" wx:if="{{item.show}}">
<view class="rmbs-list-photo">
<image src="{{item.dpzp}}"></image>
</view>
<view class="rmbs-list-text">
<view class="rmbs-list-text-tit1">{{item.name}}</view>
<view class="rmbs-list-text-jj">{{item.jj}}</view>
<view class="rmbs-list-text-tit2">地址:{{item.dpdd}}</view>
<view class="rmbs-list-text-tit3">
<view class="rmbs-list-text-btn" style="background-color: rgb(26, 69, 134);" wx:if="{{item.btn1!=''}}">{{item.btn1}}</view>
<view class="rmbs-list-text-btn" style="background-color: rgb(24, 122, 29);" wx:if="{{item.btn2!=''}}">{{item.btn2}}</view>
<view class="rmbs-list-text-btn" style="background-color: coral;" wx:if="{{item.btn3!=''}}">{{item.btn3}}</view>
<view class="rmbs-list-text-btn" wx:if="{{item.btn4!=''}}">{{item.btn4}}</view>
</view>
</view>
</view>
</view>
步骤2:搭建商家页面
- 进入 CMS 内容管理控制台,新建商品内容模型,数据库名称设置为 sp。
- 进入新建的商品页面,如下设置内容集合:
内容类型 展示名称 数据库字段名 单行字符串 名称 name 数字 价格 jg 数字 销量 xl 单行字符串 配料 pl 图片 照片 zp 关联 商家 sj 说明更多 CMS 内容管理详细操作请参见 搭建轮播图。
- 在用户点击商家跳转到商品页面,我们依然需要传递商家的 ID。
<!--pages/fbgl/fbgl.wxml-->
<view class="wdl_ban" wx:if="{{userid==''}}">
<view class="wdl">
<image src="../../images/font-ui/wdl.png"></image>
</view>
<view class="text_main">您还未授权登录,请授权登录!</view>
<button size="mini" type="primary" bindtap='showsq' class="btn_sq">去授权</button>
</view>
<view class="contmian" wx:if="{{userid!=''}}">
<view class="mian_box" wx:for="{{rmb}}" wx:for-item="item" wx:key="_id" bindtap='showbs' >
<view class="main_box_left">
<image src="{{item.zp}}" class="zszp"></image>
</view>
<view class="main_box_right">
<view class="tit_zs">{{item.name}}</view>
<view class="pl">配料:{{item.pl}}</view>
<view class="pl">月售:{{item.xl}}</view>
<view class="jg">¥ {{item.jg}}</view>
<button size="mini" type="primary" bindtap="addCart" id="{{item._id}}" class="btn_9">购买</button>
</view>
</view>
</view>