开发指南

API 文档

步骤5:搭建店铺页面

最近更新时间:2022-03-31 16:19:49

本文主要围绕店铺页面进行讲解,更多代码细节可参见 店铺商家

操作步骤

步骤1:搭建店铺

  1. 进入 CMS 内容管理控制台,新建店铺内容模型,数据库名称设置为 dp
  2. 进入新建的店铺页面,如下设置内容集合:
    内容类型 展示名称 数据库字段名
    单行字符串 店铺名称 name
    单行字符串 店铺地点 dpdd
    日期与时间 时间 time
    布尔值 是否营业 sfyy
    图片 店铺照片 dpzp
    单行字符串 简介 jj
    说明

    更多 CMS 内容管理详细操作请参见 搭建轮播图

  3. 然后将它在小程序进行展示。
    <!--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:搭建商家页面

  1. 进入 CMS 内容管理控制台,新建商品内容模型,数据库名称设置为 sp
  2. 进入新建的商品页面,如下设置内容集合:
    内容类型 展示名称 数据库字段名
    单行字符串 名称 name
    数字 价格 jg
    数字 销量 xl
    单行字符串 配料 pl
    图片 照片 zp
    关联 商家 sj
    其中,商家关联内容选择店铺展示字段选择店铺名称
    说明

    更多 CMS 内容管理详细操作请参见 搭建轮播图

  3. 在用户点击商家跳转到商品页面,我们依然需要传递商家的 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>
目录