基于云开辟创建（小步伐云商城,根本页面的创建及动态代码的编写） ...

CSDN话题挑衅赛第2期
参赛话题：万家争鸣的云计算修罗场
在这个专属于“云”的期间，各位云端弄潮儿们，请分享出你的云计算学习历程吧！
你可以从以下几个方面动手（不强制），大概根据本身对话题主题的理解创作，参考如下：
   起首我们要直到什么是微信小步伐的云开辟

  微信小步伐云开辟是2018年9月腾讯上线的集云函数、云数据库、云储存和云调用等功能于一身的开放服务。云开辟为开辟者提供了完备的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，适用平台提供的API进行核心业务开辟，即可实现快速上线的迭代，同时这一功能同开辟者利用云服务相互兼容，并不互斥！
  云调用

   作用：原生微信服务集成
  详情：基于云函数免鉴权利用小步伐开放接口的能力，包罗服务端调用、获取开放数据库能力
  云函数

   作用：无需搭建数据库
  详情：一个既可以在小步伐前端操作，也能在云函数中读写的json数据库
   云数据库

   作用：无需搭建数据库
  详情：一个既可以在小步伐前端操作，也能在云函数中读写的json数据库
  云储存

   作用：无需自建储存和CDN
  详情：在小步伐前端直接上传/下载云端文件，在云开辟控制台可视化管理
   总结：云开辟为微信小步伐开辟了一条新的道路，能让开辟者更方便的编写本身的代码，简化了后端步伐语言编写并部署在服务器上的后端功能函数中，可以通过JavaScript脚本语言与微信原生脚本语言完成编写！ 


好，我们开始创建一个根本云商城小步伐的必须页面及代码！！！

先展示一下效果：

 
留意：在写代码之前我们须要一个站址：Vant Weapp - 轻量、可靠的小步伐 UI 组件库

这是我从前学习微信小步伐的时候发现的宝藏网站！！！
 

 思路：

起首我们的思路是：用四个页面来作为小步伐的表现页面，分别为：首页、分类、购物车、我的页面。

1.首页：
搜索框一个（搜索框中我的们输入在数据库中的产品名字，点击某个产品时，通过wxml的<navigator/>标签跳转也可以，通过js中编写跳转命令也可以。实现搜索框可以参考上方的网址！）
轮播图一个（轮播图我们可以在js中写一个如下：）

1. <!-- 轮播图开始 -->
2. <view>
3.     <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
4.     <block wx:for="{{imgUrls}}" wx:key="index">
5.       <swiper-item class="LB_a">
6.         <image class="LB_b"  src="{{item}}" />
7.       </swiper-item>
8.     </block>
9.   </swiper>
10. </view>
11. <!-- 轮播图结束 -->

复制代码

 在page内里的data中：
下方的图片是已经上传到云储存中的图片！

1. imgUrls: [
2.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/7.jpg',
3.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/1.jpg',
4.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/5.jpg',
5.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/22.jpg'
6.           ],
7.           indicatorDots: true,  //是否显示面板指示点
8.           autoplay: true,      //是否自动切换
9.           interval: 2000,       //自动切换时间间隔
10.           duration: 300,       //滑动动画时长
11.           inputShowed: false,
12.           inputVal: "",

复制代码

分类区（如下：）

1. <view class="fenlei" >
2.     <view class="fenlei_1" wx:for="{{fenlei}}" wx:key="index">
3.     <navigator class="fenlei_1" url="../product_fenlei/product_fenlei?name={{item.name}}">
4.         <image  src="{{item.src}}" style="height: 90rpx;width: 90rpx;border-radius: 20rpx;"></image>
5.         <text style="font-size: 25rpx; color: #fff;">{{item.name}}</text>
6.     </navigator>
7.     </view>
8. </view>

复制代码

 
此中{{itme.name}}及{{itme.src}}等写法时动态从wx:for获取到的{{fenlei}}云数据库中的数据，假如wx:for获取指定的云数据库后，后面的动态加载可利用itme.***来实现！

1.         let that = this
2.         db.collection('fenlei').get({
3.             success:function(res){
4.                 console.log('分类获取成功',res)
5.                 that.setData({
6.                     fenlei:res.data
7.                 })
8.             },
9.             fail:function(res){
10.                 console.log('分类获取失败',res)
11.             }
12.         })

复制代码

留意：微信小步伐中要只管用ES6的语句！
产品展示区（如下）：

1. <view class="product">
2.     <navigator class="product_1" wx:for="{{product}}" wx:key="index"url="../product_datail/product_datail?id={{item._id}}">
3.         <image style="width: 200rpx;height: 200rpx;" src="{{item.src[0]}}" class="img"></image>
4.         <view class="product_2">
5.             <text>{{item.name}}</text>
6.             <text style="color: brown;font-size: 25rpx;">￥：{{item.price}}</text>
7.             <text style="font-size:25rpx;font-weight: 300;color: #6d6b6b;">热度：{{item.num}}</text>
8.         </view>
9.     </navigator>
10. </view>

复制代码

{{itme***}}运用的与上面的原理相同！

1.         db.collection('product').get({
2.             success:function(res){
3.                 console.log('商品获取成功',res)
4.                 that.setData({
5.                     product:res.data
6.                 })
7.             },
8.             fail:function(rex){
9.                 console.log('商品获取失败',res)
10.             }
11.         })

复制代码

通过db.collection('product').get来获取到云数据库product中的数据，从而表现在wxml页面上
2.分类（类似前端中的选显卡）：
须要创建一个传统的小步伐竖状分类样式
分类左右双方（左边是用来用户选择点击变乱，右侧则是根据用户的点击从而携带的某个页面的参数表现数据内容）
如下：

1. <!-- 左边 -->
2.     <scroll-view style="width:25%;height:100%;border-right: 2rpx solid #e9e9e9;font-size: 25rpx;" scroll-y="true">
3.         <block wx:for="{{fenlei}}" wx:key="index">
4.             <view class="lay_row_cen {{select_classify==item.name?'select_classify':'classify_def'}}" data-name="{{item.name}}"
5.             bindtap="select_classify">
6.                 <text>{{item.name}}</text>
7.             </view>
8.         </block>
9.     </scroll-view>

复制代码

1. <!-- 右边 -->
2.     <scroll-view style="width:75%;height:100%;" scroll-y="true">
3.         <block wx:for="{{goods}}" wx:key="index">
4.         <navigator class="lay_row_spa pad_20" url="../product_datail/product_datail?id={{item._id}}">
5.             <view class="lay_row_spa pad_20">
6.                 <image src="{{item.src[0]}}" class="goods_img"></image>
7.                 <view class="lay_col_spa" style="height:130rpx;width: 70%;">
8.                     <view class="lay_row_sta">
9.                         <text>{{item.name}}</text>
10.                     </view>
11.                     <view class="lay_row_spa">
12.                         <text style="font-size: 25rpx;color: #888888;">已售：{{item.num}}</text>
13.                         <text style="font-size: 30rpx;color: #ff0101;">￥：{{item.price}}</text>
14.                     </view>
15.                 </view>
16.             </view>
17.         </navigator>
18.             <van-divider style="width:100%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
19.         </block>
20.     </scroll-view>

复制代码

在编写右侧的同时我们也要添加每个分类中商品的跳转代码，用于用户点击分类中的商品时随时可跳转到商品详情界面。
3.购物车：
须要创建一个配景图及下面的动态合计金额数的js代码块地域
起首我们须要创建一个云数据库用来存放用户添加商品到购物车时的商品数据存放（如下：）

 

1. const db = cloud.database()
2. const _ = db.command
4. // 云函数入口函数
5. exports.main = async (event, context) => {
6.     const ap = cloud.getWXContext()
7.     try{
8.         return await db.collection('shopping_car').where({
9.             _openid:ap.OPENID,
10.             product_checked:"true"
11.         }).remove()
12.     }catch(e){
13.         console.error(e)
14.     }
16. }

复制代码

然后我们再通过云函数代码来实现 product云数据库的商品的_id与shopping_car中的product_id的相称的判定条件。

1. <block wx:for="{{product}}" wx:key="_id">

复制代码

最后从购物车.wxml用微信原生的wx:for来将product云数据库中的数据循环动态表现出来。
4.我的：
须要创建一个获取用户信息的地域来获取并表现我们获取到的用户信息。同时须要创建三个地域分别为：我的订单，我的地址，商户平台！
获取用户信息（可以利用微信原生代码实现，如下：）

1.                wx.getUserProfile({
2.                     desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
3.                     success: (userInfo) => {
4.                         console.log(userInfo)
5.                         wx.showLoading({
6.                           title: '注册中',
7.                         })
8.                         db.collection('user').add({
9.                             data:{
10.                                 userInfo:userInfo.userInfo
11.                             }
12.                         }).then(user=>{
13.                             wx.hideLoading()
14.                             wx.showToast({
15.                               title: '注册成功！',
16.                             })
17.                             that.login()
19.                         })
20.                      
21.                     }
22.                   })

复制代码

我的订单、我的地址、商户平台（可以分别编写三个隐藏页面当用户点击时跳转） 再根据用户所需来创建对应的云数据库用来完成用户一系列的个人操作！
5.隐藏页面：
（商品详情页面，通过点击商品列表大概在搜索框中点击某一个商品的地域跳转已往，并加以表现的页面）

完备代码实现：

首页.wxml

1. <!-- 跳转到真的搜索界面 --><navigator url="../sousuo/sousuo">    <van-search  value="{{ value }}"  shape="round"  background="#4fc08d"  placeholder="请输入搜索关键词"/></navigator><view style="height: 20rpx;"></view><!-- 轮播图开始 -->
2. <view>
3.     <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
4.     <block wx:for="{{imgUrls}}" wx:key="index">
5.       <swiper-item class="LB_a">
6.         <image class="LB_b"  src="{{item}}" />
7.       </swiper-item>
8.     </block>
9.   </swiper>
10. </view>
11. <!-- 轮播图结束 --><!-- 分类开始 --><view class="fenlei" >
12.     <view class="fenlei_1" wx:for="{{fenlei}}" wx:key="index">
13.     <navigator class="fenlei_1" url="../product_fenlei/product_fenlei?name={{item.name}}">
14.         <image  src="{{item.src}}" style="height: 90rpx;width: 90rpx;border-radius: 20rpx;"></image>
15.         <text style="font-size: 25rpx; color: #fff;">{{item.name}}</text>
16.     </navigator>
17.     </view>
18. </view><!-- 分类竣事 --><van-divider contentPosition="center"customStyle="color: white; border-color: #888888; font-size: 18rrpx;">产品展示</van-divider><!-- 产品列表开始 --><view class="product">
19.     <navigator class="product_1" wx:for="{{product}}" wx:key="index"url="../product_datail/product_datail?id={{item._id}}">
20.         <image style="width: 200rpx;height: 200rpx;" src="{{item.src[0]}}" class="img"></image>
21.         <view class="product_2">
22.             <text>{{item.name}}</text>
23.             <text style="color: brown;font-size: 25rpx;">￥：{{item.price}}</text>
24.             <text style="font-size:25rpx;font-weight: 300;color: #6d6b6b;">热度：{{item.num}}</text>
25.         </view>
26.     </navigator>
27. </view><!-- 产品列表竣事 -->

复制代码

首页.js

1. // pages/index/index.jsconst db = wx.cloud.database()Page({    /**     * 页面的初始数据     */    data: {        product:[],        fenlei:[],        // 轮播图开始        imgUrls: [
2.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/7.jpg',
3.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/1.jpg',
4.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/5.jpg',
5.             'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/22.jpg'
6.           ],
7.           indicatorDots: true,  //是否显示面板指示点
8.           autoplay: true,      //是否自动切换
9.           interval: 2000,       //自动切换时间间隔
10.           duration: 300,       //滑动动画时长
11.           inputShowed: false,
12.           inputVal: "",          // 轮播图竣事                  //商品列表开始        pro_list:[],        //商品列表竣事        search_list:[],        search_case:false,        num:20    },    search_case_close(){        this.setData({            search_case:false        })    },    //页面上拉触底变乱    onReachBottom:function(){        let that = this        wx.showLoading({          title: '革新中！',          duration:1000        })        let old_data = that.data.product        const db = wx.cloud.database()        db.collection('product').skip(that.data.num)        .get()        .then(res =>{            this.setData({                product:old_data.concat(res.data),                num:that.data.num+20            })            if(res,data==""){                wx.showToast({                  title: '加载完毕',                  icon:'none'                })            }        })        .catch(err =>{            console.error(err)        })        console.log('circle 下一页');    },    /**     * 生命周期函数--监听页面加载     */    onLoad:function() {        // 分类开始        let that = this
13.         db.collection('fenlei').get({
14.             success:function(res){
15.                 console.log('分类获取成功',res)
16.                 that.setData({
17.                     fenlei:res.data
18.                 })
19.             },
20.             fail:function(res){
21.                 console.log('分类获取失败',res)
22.             }
23.         })        // 分类竣事        // 产品展示开始        db.collection('product').get({
24.             success:function(res){
25.                 console.log('商品获取成功',res)
26.                 that.setData({
27.                     product:res.data
28.                 })
29.             },
30.             fail:function(rex){
31.                 console.log('商品获取失败',res)
32.             }
33.         })        // 产品展示竣事    },    /**     * 生命周期函数--监听页面初次渲染完成     */    onReady() {    },    /**     * 生命周期函数--监听页面表现     */    onShow() {    },    /**     * 生命周期函数--监听页面隐藏     */    onHide() {    },    /**     * 生命周期函数--监听页面卸载     */    onUnload() {    },    /**     * 页面相关变乱处置惩罚函数--监听用户下拉动作     */    onPullDownRefresh() {    },    /**     * 页面上拉触底变乱的处置惩罚函数     */    onReachBottom() {    },    /**     * 用户点击右上角分享     */    onShareAppMessage() {    }})

复制代码

分类.wxml

1. <view class="lay_row_cen" style="height:100vh"><!-- 左边 -->
2.     <scroll-view style="width:25%;height:100%;border-right: 2rpx solid #e9e9e9;font-size: 25rpx;" scroll-y="true">
3.         <block wx:for="{{fenlei}}" wx:key="index">
4.             <view class="lay_row_cen {{select_classify==item.name?'select_classify':'classify_def'}}" data-name="{{item.name}}"
5.             bindtap="select_classify">
6.                 <text>{{item.name}}</text>
7.             </view>
8.         </block>
9.     </scroll-view><!-- 右边 -->
10.     <scroll-view style="width:75%;height:100%;" scroll-y="true">
11.         <block wx:for="{{goods}}" wx:key="index">
12.         <navigator class="lay_row_spa pad_20" url="../product_datail/product_datail?id={{item._id}}">
13.             <view class="lay_row_spa pad_20">
14.                 <image src="{{item.src[0]}}" class="goods_img"></image>
15.                 <view class="lay_col_spa" style="height:130rpx;width: 70%;">
16.                     <view class="lay_row_sta">
17.                         <text>{{item.name}}</text>
18.                     </view>
19.                     <view class="lay_row_spa">
20.                         <text style="font-size: 25rpx;color: #888888;">已售：{{item.num}}</text>
21.                         <text style="font-size: 30rpx;color: #ff0101;">￥：{{item.price}}</text>
22.                     </view>
23.                 </view>
24.             </view>
25.         </navigator>
26.             <van-divider style="width:100%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
27.         </block>
28.     </scroll-view></view>

复制代码

分类.js

1. // pages/classify/classify.js
2. const db = wx.cloud.database()
3. Page({
5.     /**
6.      * 页面的初始数据
7.      */
8.     data: {
9.         select_classify:"全部",
10.         fenlei:[{name:"全部"}],
11.         goods:[]
12.     },
13.     // 获取商品
14.     get_goods(fenlei){
15.         let that = this
16.         if(fenlei == '全部'){
17.             db.collection('product').get().then(res=>{
18.                 console.log("获取商品",res.data)
19.                 that.setData({
20.                     goods:res.data
21.                 })
22.             })
23.         }else{
24.             db.collection('product').where({
25.                 select_classify:fenlei,
26.             })
27.             .get()
28.             .then(res=>{
29.                 console.log("获取商品",res.data)
30.                 that.setData({
31.                     goods:res.data
32.                 })
33.             })
34.         }
35.     },
36.     // 选择分类
37.     select_classify(e){
38.         let that = this
39.         let name = e.currentTarget.dataset.name
40.         that.setData({
41.             select_classify:name
42.         })
43.         that.get_goods(name)
44.     },
45.     // 获取分类
46.     get_classify(){
47.         let that = this
48.         let fenlei = that.data.fenlei
49.         console.log(fenlei)
50.         db.collection('fenlei').orderBy('num','asc').get().then(res=>{
51.             console.log("获取分类",res.data)
52.             that.setData({
53.                 fenlei:fenlei.concat(res.data),
54.             })
55.         })
56.     },
57.     /**
58.      * 生命周期函数--监听页面加载
59.      */
60.     onLoad:function(options) {
61.         let that = this
62.         that.get_classify()
63.         that.get_goods("全部")
65.     },
67.     /**
68.      * 生命周期函数--监听页面初次渲染完成
69.      */
70.     onReady() {
72.     },
74.     /**
75.      * 生命周期函数--监听页面显示
76.      */
77.     onShow() {
79.     },
81.     /**
82.      * 生命周期函数--监听页面隐藏
83.      */
84.     onHide() {
86.     },
88.     /**
89.      * 生命周期函数--监听页面卸载
90.      */
91.     onUnload() {
93.     },
95.     /**
96.      * 页面相关事件处理函数--监听用户下拉动作
97.      */
98.     onPullDownRefresh() {
100.     },
102.     /**
103.      * 页面上拉触底事件的处理函数
104.      */
105.     onReachBottom() {
107.     },
109.     /**
110.      * 用户点击右上角分享
111.      */
112.     onShareAppMessage() {
114.     }
115. })

复制代码

购物车.wxml

1.    <view style="margin-bottom: 200rpx;">    <block wx:for="{{product}}" wx:key="_id">    <!-- 商品信息模块 -->    <view class="product_list">        <view class="product_list_1">                <view class="product_list_11" bindlongpress="delete_product">                    <checkbox-group bindchange="xuanze" data-id="{{item._id}}">                    <checkbox value="{{item._id}}"checked="{{item.product_checked}}"></checkbox>                    </checkbox-group>                    <view class="product_list_3">                        <image src="{{item.product_src}}" style="width: 100rpx;height: 100rpx;"></image>                        <view class="product_list_2">                            <view style="font-size:20px">{{item.product_name}}</view>                            <view style="color: red;">￥：{{item.product_price}}</view>                        </view>                        <view class="jiajian">                            <van-icon name="plus" data-id="{{item._id}}" bindtap="product_jia" />                            <view >                                <view>{{item.product_num}}</view>                            </view>                            <van-icon name="minus"data-id="{{item._id}}" bindtap="product_jian" data-product_num="{{item.product_num}}" />                        </view>                                            </view>                </view>        </view>    </view>    </block>   </view>   <van-empty description="请添加商品" /><view class="bottom">    <van-submit-bar  price="{{money}}"  button-text="提交订单"  bind:submit="pay"  safe-area-inset-bottom=""  tip="{{ true }}"><van-tag type="primary"data-name="删除" bindtap="delete">删除</van-tag></van-submit-bar></view>

复制代码

购物车.js

1. // pages/shopping_car/shopping_car.js
2. const db = wx.cloud.database()
3. const _ = db.command
4. Page({
6.     /**
7.      * 页面的初始数据
8.      */
9.     data: {
10.         product:[],
11.         money:0,
12.         product_now:[],
13.         product_id:[],
14.         delet_id:[]
15.     },
16.     //支付事件
17.     pay:function(e){
18.         let that = this
19.         db.collection('shopping_car').where({
20.             product_checked:"true"
21.         }).get({
22.             success:function(res){
23.                 console.log('获取商品成功',res)
24.                 if(res.data.length == 0){
25.                     wx.showToast({
26.                       title: '您还未选择商品',
27.                       icon:"none"
28.                     })
29.                 }else{
30.                     wx.redirectTo({
31.                       url: '../tijiaodingdan/tijiaodingdan',
32.                     })
33.                 }
34.             },fail:function(res){
35.                 console.log('获取商品失败',res)
36.             }
37.         })
38.     },
39.     //计算金额
40.     get_money_sum(){
41.         let that = this
42.         let money_sum = 0
43.         for(var x = 0;x<that.data.product.length;x++){
44.             if(that.data.product[x].product_checked == "true"){
45.                 money_sum=money_sum+(that.data.product[x].product_num*that.data.product[x].product_price)
46.             }
47.         }
48.         that.setData({
49.             money:money_sum*100
50.         })
51.     },
52.     //选择事件
53.     xuanze:function(e){
54.         let that = this
55.         console.log(e)
56.         that.setData({
57.             delet_id:that.data.delet_id.concat(e.detail.value[0])
58.         })
59.         if(e.detail.value.length !== 0){
60.             db.collection('shopping_car').doc(e.target.dataset.id).update({
61.                 data:{
62.                     product_checked:"true"
63.                 },success:function(res){
64.                     db.collection('shopping_car').get({
65.                         success:function(res){
66.                             console.log('获取购物车商品成功',res)
67.                             that.setData({
68.                                 product:res.data,
69.                             })  
70.                             that.get_money_sum()
71.                         },fail:function(res){
72.                             console.log('获取购物车商品失败',res)
73.                         }
74.                     })
75.                 }
76.             })
77.         }else{
78.             db.collection('shopping_car').doc(e.target.dataset.id).update({
79.                 data:{
80.                     product_checked:""
81.                 },success:function(){
82.                     db.collection('shopping_car').get({
83.                         success:function(res){
84.                             console.log('获取购物车商品成功',res)
85.                             that.setData({
86.                                 product:res.data,
87.                             })
88.                             that.get_money_sum()
89.                         },fail:function(res){
90.                             console.log('获取购物车商品失败',res)
91.                         }
92.                     })
93.                 }
94.             })
95.         }
96.     },
97.     //商品删除
98.     delete:function(){
99.         let that = this
100.         wx.cloud.callFunction({
101.             name:"product_delet",
102.             success:function(res){
103.                 console.log('删除商品成功',res)
104.                 db.collection('shopping_car').get({
105.                     success:function(res){
106.                         console.log('获取购物车商品成功',res)
107.                         that.setData({
108.                             product:res.data,
109.                         })
110.                         that.get_money_sum()
111.                     },fail:function(res){
112.                         console.log('获取购物车商品失败',res)
113.                     }
114.                 })
115.             },fail:function(res){
116.                 console.log('删除商品失败',res)
117.             }
118.         })
119.     },
120.     //商品数量增加事件
121.     product_jia:function(e){
122.         let that = this
123.         console.log(e)
124.         db.collection('shopping_car').doc(e.target.dataset.id).update({
125.             data:{
126.                 product_num: _.inc(1)
127.             },success:function(res){
128.                 console.log('商品数量加一',res)
129.                 db.collection('shopping_car').get({
130.                     success:function(res){
131.                         console.log('获取购物车商品成功',res)
132.                         that.setData({
133.                             product:res.data
134.                         })
135.                         that.get_money_sum()
136.                     },fail:function(res){
137.                         console.log('获取购物车商品失败',res)
138.                     }
139.                 })
140.             },fail:function(res){
141.                 console.log('获取商品价格失败',res)
142.             }
143.         })
144.     },
145.     //商品数量减少事件
146.     product_jian:function(e){
147.         let that = this
148.         console.log(e)
149.         if(e.target.dataset.product_num<2){
150.             wx.showToast({
151.               title: '客观不能再少了',
152.               icon:"none"
153.             })
154.         }else{
155.             db.collection('shopping_car').doc(e.target.dataset.id).update({
156.                data:{
157.                    product_num: _.inc(-1)
158.                } ,success:function(res){
159.                    console.log('商品数量加一',res)
160.                    db.collection('shopping_car').get({
161.                        success:function(res){
162.                            console.log('获取购物车商品成功',res)
163.                            that.setData({
164.                                product:res.data
165.                            })
166.                            that.get_money_sum()
167.                        },fail:function(res){
168.                            console.log('获取购物车商品失败',res)
169.                        }
170.                    })
171.                },fail:function(res){
172.                    console.log('获取商品价格失败',res)
173.                }
174.             })
175.         }
176.     },
177.     /**
178.      * 生命周期函数--监听页面加载
179.      */
180.     onLoad:function(options) {
181.         let that = this
182.         db.collection('shopping_car').get({
183.             success:function(res){
184.                 console.log('获取购物车商品成功',res)
185.                 that.setData({
186.                     product:res.data
187.                 })
188.                 that.get_money_sum()
189.             },fail:function(res){
190.                 console.log('获取购物车商品失败',res)
191.             }
192.         })
193.     },
195.     /**
196.      * 生命周期函数--监听页面初次渲染完成
197.      */
198.     onReady() {
200.     },
202.     /**
203.      * 生命周期函数--监听页面显示
204.      */
205.     onShow() {
206.         let that = this
207.         db.collection('shopping_car').get({
208.             success:function(res){
209.                 console.log('获取购物车商品成功',res)
210.                 that.setData({
211.                     product:res.data
212.                 })
213.                 that.get_money_sum()
214.             },fail:function(res){
215.                 console.log('获取购物车商品失败',res)
216.             }
217.         })
219.     },
221.     /**
222.      * 生命周期函数--监听页面隐藏
223.      */
224.     onHide() {
226.     },
228.     /**
229.      * 生命周期函数--监听页面卸载
230.      */
231.     onUnload() {
233.     },
235.     /**
236.      * 页面相关事件处理函数--监听用户下拉动作
237.      */
238.     onPullDownRefresh() {
240.     },
242.     /**
243.      * 页面上拉触底事件的处理函数
244.      */
245.     onReachBottom() {
247.     },
249.     /**
250.      * 用户点击右上角分享
251.      */
252.     onShareAppMessage() {
254.     }
255. })

复制代码

我的.wxml

1. <!-- 个人信息开始 -->
2. <view class="lay_row_spa pad_20 user_msg lay_row_sta">
3.     <view class="lay_row_sta " style="width:60%;">
4.     <image class="avg" src="{{user.userInfo.avatarUrl}}" class="avg"></image>
5.     <text style="font-size: 30rpx;font-weight: bolder;color: #FFFF;">{{user.userInfo.nickName}}</text>
6.     </view>
7.     <!-- <text style="font-size: 25rpx;font-weight: bolder; color: #FFFF;">个人信息</text> -->
8. </view>
9. <!-- 个人信息结束 -->
11. <!-- 内容总模块开始 -->
12. <view >
13. <!-- 订单管理开始 -->
14.     <view class=" order_case" style="margin-top: 30rpx;height: 100rpx;">
15.         <navigator url="../DDguanli/DDguanli" class="WDDD">
16.             <image style="width: 80rpx;height: 80rpx;margin-left: 20rpx;margin-top: 10rpx;" src="cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/我的img/222.png"></image>
17.             <view class="WDDD1" style="margin-left: 50rpx;">
18.                 <text style="font-size: 40rpx;">我的订单</text>
19.             </view>
20.             <van-icon style="margin-left: 370rpx;" name="arrow" />
21.         </navigator>
23.     </view>
24.     <!-- 订单管理结束 -->
26.     <!-- 功能模块开始 -->
27.     <view class="lay_col_cen pad_20 fun_case">
28.     <!-- 第一行开始 -->
29.         <view class="lay_row_sta fun_row">
30.             <view class="lay_col_cen fun_item" bindtap="my_address">
31.                 <image src="cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/我的img/dizhi.png" class="fun_img"></image>
32.                 <text>我的地址</text>
33.             </view>
34.             <view class="lay_col_cen fun_item" bindtap="show_login_case">
35.                 <image src="cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/我的img/houtaiyunying.png" class="fun_img"></image>
36.                 <text>商户平台</text>
37.             </view>
38.         </view>
39.         <!-- 第一行结束 -->
43.             
45.         <!-- 第三行结束 -->
46.     </view>
47.     <!-- 功能模块结束 -->
49. </view>
50. <!-- 内容总模块结束 -->
53. <!-- 登录弹窗开始 -->
54. <van-popup show="{{ show_login }}" round position="bottom"custom-style="height: 60%" closeable bind:close="close_login_case">
55.     <view class="lay_col_sta pad_20">
56.         <view class="lay_row_cen"style="height:100rpx">
57.             <text>登录</text>
58.         </view>
59.         <view class="lay_row_sta" style="width:80%;margin-top: 80rpx;">
60.             <van-icon name="friends-o" />
61.             <input type="text" placeholder="账号" style="margin-left:20rpx" data-name="username" bindinput="input_msg"/>
62.         </view>
63.         <van-divider style="width:80%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
65.         <view class="lay_row_sta" style="width:80%;margin-top: 40rpx;">
66.             <van-icon name="goods-collect-o" />
67.             <input type="password" placeholder="密码" style="margin-left:20rpx" data-name="password" bindinput="input_msg"/>
68.         </view>
69.         <van-divider style="width:80%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
70.         <button style="background-color:#4fc08d;color:#FFFF;width:70%;margin-top:100rpx"disabled="{{is_login?'true':''}}" bindtap="login_admin">登录</button>
71.     </view>
72. </van-popup>
73. <!-- 登录弹窗结束 -->

复制代码

我的.js

1. // pages/wode/wode.jsconst db =  wx.cloud.database()const app = getApp()Page({    /**     * 页面的初始数据     */    data: {        user:{},        show_login:false,        username:"",        password:"",        is_login:false    },    login_admin(){        let that = this        wx.showLoading({          title: '登岸中',        })        if(that.data.username == '' || that.data.password == ''){            wx.showToast({              title: '请输入账号密码',              icon:"none"            })        }else{            that.setData({                is_login:true            })            db.collection('admin').where({                username:that.data.username,                password:that.data.password,            }).get().then(res=>{                console.log('登录',res)                that.setData({                          is_login:false                })                wx.hideLoading()                if(res.data.length == 0){                    wx.showToast({                      title: '账号或密码错误',                    })                }else{                    app.globalData.admin = res.data[0]                    wx.navigateTo({                      url: '../admin_index/admin_index',                    })                }            })        }    },    //输入信息开始    input_msg(e){        let that =this        let name = e.currentTarget.dataset.name        that.setData({            [name]:e.detail.value        })    },    // 输入信息竣事    // 背景运营关闭登录框开始    close_login_case(){        this.setData({            show_login:false        })       wx.showTabBar()    },    // 背景运营关闭登录框竣事    // 背景运营表现登录框开始    show_login_case(){        this.setData({            show_login:true        })                 wx.hideTabBar()    },    // 背景运营表现登录框竣事    //我的地址开始    my_address:function(e){        wx.getSetting({          success(res){              console.log(res)              if(res.authSetting['scope.address']){                  wx.authorize({                    scope: 'scope.address',                    success(){                        wx.chooseAddress({                          success(res){                            console.log(res)                          },                        })                    }                  })              }else{                  wx.openSetting({                    success(res){                        console.log(res.authSetting)                    }                  })              }          }        })    },    //我的地址竣事     // 用户注册开始    register(){        let that = this        wx.showModal({            title: '提示',            content: '您还未注册，是否注册',            success (res) {              if (res.confirm) {                console.log('用户点击确定')                wx.getUserProfile({
2.                     desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
3.                     success: (userInfo) => {
4.                         console.log(userInfo)
5.                         wx.showLoading({
6.                           title: '注册中',
7.                         })
8.                         db.collection('user').add({
9.                             data:{
10.                                 userInfo:userInfo.userInfo
11.                             }
12.                         }).then(user=>{
13.                             wx.hideLoading()
14.                             wx.showToast({
15.                               title: '注册成功！',
16.                             })
17.                             that.login()
19.                         })
20.                      
21.                     }
22.                   })              } else if (res.cancel) {                console.log('用户点击取消')              }            }          })           },    // 用户注册竣事    // 用户登录开始    login(){        let that = this        db.collection('user').get().then(res=>{            if(res.data.length > 0){                that.setData({                    user:res.data[0]                })            }else{                that.register()            }        })    },    // 用户登录竣事    /**     * 生命周期函数--监听页面加载     */    onLoad(options) {        let that = this        that.login()            },    /**     * 生命周期函数--监听页面初次渲染完成     */    onReady() {    },    /**     * 生命周期函数--监听页面表现     */    onShow() {    },    /**     * 生命周期函数--监听页面隐藏     */    onHide() {    },    /**     * 生命周期函数--监听页面卸载     */    onUnload() {    },    /**     * 页面相关变乱处置惩罚函数--监听用户下拉动作     */    onPullDownRefresh() {    },    /**     * 页面上拉触底变乱的处置惩罚函数     */    onReachBottom() {    },    /**     * 用户点击右上角分享     */    onShareAppMessage() {    }})

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告