有奖捉虫:云通信与企业服务文档专题,速来> HOT
本文主要围绕店铺页面进行讲解,更多代码细节可参见 店铺商家

操作步骤

步骤1:搭建店铺页面

1. 进入 CMS 内容管理控制台,新建店铺内容模型,数据库名称设置为 dp
2. 进入新建的店铺页面,如下设置内容集合:
内容类型
展示名称
数据库字段名
单行字符串
店铺名称
name
单行字符串
店铺地点
dpdd
日期与时间
时间
time
布尔值
是否营业
sfyy
图片
店铺照片
dpzp
单行字符串
简介
jj
说明:
更多 CMS 内容管理详细操作请参见 搭建轮播图
3. 然后将它在小程序进行展示。
dp.wxml
dp.js
<!--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(24, 122, 29);" wx:if="{{item.sfyy!=false}}">营业中</view>
<view class="rmbs-list-text-btn" style="background-color: rgb(26, 69, 134);" wx:else>休息中</view>
</view>
</view>
</view>
</view>

// pages/dp/dp.js
wx.cloud.init({
env: 'ccntst-8gsp6zkw250f8e38',
traceUser: true,
})
const db=wx.cloud.database()
Page({

/**
* 页面的初始数据
*/
data: {
rmbs:"",
list: [],
list_id:''
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindPickerChange1: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index1: e.detail.value
})
},
input(e) {
console.log(e)
this.search(e.detail.value)
},
//点击完成按钮时触发
confirm(e) {
this.search(e.detail.value)
},
search(key) {
var that = this;
//从本地缓存中异步获取指定 key 的内容
var list = wx.getStorage({
key: 'list',
//从Storage中取出存储的数据
success: function (res) {
// console.log(res)
if (key == '') { //用户没有输入时全部显示
that.setData({
list: res.data
})
return;
}
var arr = []; //临时数组,用于存放匹配到的数组
for (let i in res.data) {
res.data[i].show = false; //所有数据隐藏
if (res.data[i].name.indexOf(key) >= 0) {
res.data[i].show = true; //让匹配到的数据显示
arr.push(res.data[i])
}
}
if (arr.length == 0) {
that.setData({
list: [{
show: true,
name: '没有相关数据!'
}]
})
} else {
that.setData({
list: arr
})
}
},
})
},
bindPickerChange2: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index1: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
list_id:options.list_id
})
console.log( this.data.list_id),
db.collection("dp").get().then(res=>{
wx.setStorage({
key: 'list',
data: res.data
})
this.setData({
list: res.data,
})
})
},
showbs:function(e){
console.log(e.currentTarget.id)
wx.navigateTo({
url:'/pages/fbgl/fbgl?list_id='+e.currentTarget.id,
})
},
})

4. 效果如下:



步骤2:搭建商品页面

1. 进入 CMS 内容管理控制台,新建商品内容模型,数据库名称设置为 sp
2. 进入新建的商品页面,如下设置内容集合:
内容类型
展示名称
数据库字段名
单行字符串
名称
name
数字
价格
jg
数字
销量
xl
单行字符串
配料
pl
图片
照片
zp
关联
商家
sj
其中,商品关联内容选择店铺展示字段选择店铺名
说明:
更多 CMS 内容管理详细操作请参见 搭建轮播图
3. 在用户单击商家跳转到商品页面,我们依然需要传递商家的 ID。
fbgl.wxml
fbgl.js
<!--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>

// pages/fbgl/fbgl.js
wx.cloud.init({
env: 'ccntst-8gsp6zkw250f8e38',
traceUser: true,
})
const db=wx.cloud.database()
var myDate = new Date();
Page({

/**
* 页面的初始数据
*/
data: {
userid: '',
list_id:'',
rmb:''
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
list_id:options.list_id
})
console.log( this.data.list_id)
const app = getApp()
var userid = app.globalData.userid
this.setData({
userid: userid,
})
db.collection("sp").where({sj:this.data.list_id}).get().then(res=>{
console.log(res)
this.setData({
rmb:res.data
})
})
},
showsq: function () {
wx.switchTab({
url: '../my/my',
})
},

})

4. 效果如下:



步骤3:搭建下单功能

1. 进入 CMS 内容管理控制台,新建订单内容模型,数据库名称设置为 dd
2. 进入新建的订单页面,如下设置内容集合:
内容类型
展示名称
数据库字段名
单行字符串
userid
userid
关联
商品
sp
单行字符串
时间
time
布尔值
下单
xd
布尔值
是否取餐
qccg
单行字符串
取餐时间
qcsj
其中,商品关联内容选择店铺展示字段选择店铺名
说明:
更多 CMS 内容管理详细操作请参见 搭建轮播图
3. 接下来进入 fbgl.js 页面配置下单事件。
addCart(res) {
console.log(res)
const _=db.command
db.collection('sp').doc(res.currentTarget.id).update({
data:{
xl:_.inc(1)
}
})
db.collection("sp").get().then(res=>{
console.log(res)
this.setData({
rmb:res.data
})
})
db.collection("dd").add({
data: {
userid: this.data.userid,
sp: res.currentTarget.id,
_createTime: Date.parse(new Date()),
time: myDate.toLocaleString(),
xd:0,
qccg:0,
}
}).then(res => {
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 2000
})
})
},

说明:
我们思考可以知道,我们用户下单里面需要有用户 openid、商品、时间等信息。
我们使用插入数据方法将数据存入数据库,新增记录,如果传入的记录对象没有 _id 字段,则由后台自动生成 _id;若指定了 _id,则不能与已有记录冲突。