AI绘画有奖征文大赛:火热进行中> 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,则不能与已有记录冲突。