南昌好店小程序

即时悦
559 阅读5分钟

这是一个网上购买优惠代金券的小程序，数据自己写的，比较粗糙，数据存放在云数据库，所以数据读写都是对数据库进行操作

一、首先让我们来看看主要界面

四个主界面，用的是微信小程序官方推荐的tabbar

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#13227a",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/homes.png",
        "iconPath": "images/home.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/searchs.png",
        "iconPath": "images/search.png",
        "pagePath": "pages/search/search",
        "text": "查找"
      },
      {
        "selectedIconPath": "images/members.png",
        "iconPath": "images/member.png",
        "pagePath": "pages/member/member",
        "text": "黑卡会员"
      },
      {
        "selectedIconPath": "images/indents.png",
        "iconPath": "images/indent.png",
        "pagePath": "pages/indent/indent",
        "text": "订单"
      }
    ]
  },

在显示商品、订单方面，运用了有赞的商品卡片组件，为了不那么显示地单一，我自己根据显示需求，也写了相应合适的组件去展示。

二、界面方面，相信大家都轻车熟路，我就给大家展示一下数据库的操作

首先是查询，将数据展示到界面，这是最基础的，也分普通查询和条件查询

(1)普通查询
获取数据库引用

const db = wx.cloud.database();

构造查询语句,查找后进行赋值

var thst = this;
db.collection('goods').get({
      success(res) {
        console.log('查寻成功', res.data);
        that.setData({
          goods: res.data
        })
      }
    })
(2)条件查询，这里我的数据有分类字段

var that = this;
      db.collection('goods').where({
        type: this.data.currentType,
        site: this.data.currentSite
      }).get({
        success(res) {
          console.log('查寻成功', res.data);
          that.setData({
            products: res.data
          })
        }
      })

三、功能实现

1.在搜索功能上，将取出的数据进行筛选,这里我用的是indexOf方法

<view class="bodyview">
<van-search
  value="{{ value }}"
  placeholder="请输入搜索关键词"
  use-action-slot
  bind:change="onChange"
  bind:search="onSearch"
>
<view slot="action" bind:tap="onClick">搜索</view>
</van-search>
  <view hidden="{{value!=''}}" class="desc2">
   <view class="text">热门搜索</view>
    <view class="content" >
      <block wx:for="{{search_thing}}">
        <view bindtap="search2" class="content_view" data-content="{{item.thing}}">{{item.thing}}</view>
      </block>
    </view>
 </view>
 <view class="desc_4"  >
  <block hidden="{{searchResult.length==0}}" wx:for="{{searchResult}}">
      <van-card
          data-image="{{item.basic_info.traffic_light_img_href}}"
          bindtap="show"
          tag="热卖"
          title="{{item.basic_info.food_name}}"
          price="{{item.basic_info.calories_value}}"
          thumb="{{item.basic_info.traffic_light_img_href}}"
          data-id="{{item._id}}"
      >
      </van-card>
  </block>
</view>
</view>

onClick() {
    this.setData({
      searchResult: []
    })
    let arr = [];
    for (let i = 0; i < this.data.data.length; i++) {
      let data = this.data.data[i];
      let a = '';
      a = data.type;
      let b = '';
      b = data.basic_info.food_name;
      if (a.indexOf(this.data.value)>-1 && this.data.value.length > 0) {
        arr.push(data)
      }
      if (b.indexOf(this.data.value) > -1 && this.data.value.length > 0) {
        arr.push(data)
      }
    }
    this.setData({
      searchResult: arr
    })
  }

2.然后是商品查看，购买

商品详情页面就是页面布局，数据展示，跳转购买确认订单页面、评论页面。 在确认订单页面,有着一个会员活动，进行会员价格及红包计算，购买商品之后，对数据库里一个新的表要进行数据插入,然后刷新我的订单页面

buysuc(){
    // console.log(this.data.buttonClicked)
    // console.log(cfclick)
    cfclick.ButtonClicked(this);
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth();
    let day = date.getDate();
    let hours = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();
    let today = year+"年"+month+"月"+day+"日 "+hours+"时"+minute+"分"+second+"秒";
    let pro = this.data.product[0];
      productsCollection.add({
        data:{
          productid:pro._id,
          productimg: pro.basic_info.traffic_light_img_href,
          productprice: pro.basic_info.calories_value,
          tags: pro.basic_info.food_name,
          num:this.data.num,
          membernum:this.data.membernum,
          rednum:this.data.rednum,
          pay:this.data.newmoney,
          isuse:'未使用',
          date: today
        }
      }).then(res => {
        console.log(res);
    })
    setTimeout(function() {
      wx.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 2000
      })
      wx.switchTab({
        url:'../indent/indent',
        success() {
          var page = getCurrentPages().pop();
          if (page == undefined || page == null) return;
          page.onLoad();
        }
      })
    }, 1000)
     
  },

3.这些商品都是代金券，所以订单页面模拟一下，使用代金券，显然，使用后，是要对数据库里的数据进行修改的，然后就用到了自己建的并上传部署的云函数 use,delete,上传部署之前安装一下依赖:

npm install --save wx-cloud-sdk@latest

use/index.js:

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: "chenfangwen-iigtn"
})
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
  try{
    return await db.collection('indent').doc(event.dataId).update({
      data:{
        isuse:'已使用'
      }
    })
  }catch(err){
    console.log(err)
  }
}

delete/index:

const cloud = require('wx-server-sdk')
cloud.init({
  env: "chenfangwen-iigtn"
})
const db = cloud.database();


// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('indent').doc(event.dataId).remove()
  } catch (err) {
    console.log(err)
  }
}

然后在要用到订单页面的js文件中引用，引用时传入订单id参数

use(e){
    let id = e.currentTarget.dataset.id;
    console.log(id)
    var that = this;
    
    wx.cloud.callFunction({
      name:'use',
      data:{
        dataId:id
      },
      success: function (res) {
        if (res.result.errMsg == 'document.remove:ok') {
          console.log('调用成功----')
        }
      },
      fail:console.error
    })
    // this.update;   更新过早
    setTimeout(that.update,500)
  }
  
  delete(){
    wx.cloud.callFunction({
      name: 'delete',
      data: {
        dataId: this.data.id
      },
      success: function (res) {
        if (res.result.errMsg == 'document.remove:ok') {
          console.log('调用成功----')
        }
      },
      fail: console.error
    })
    var that = this;
    setTimeout(that.switch, 500)
  },

四、然后再说说功能实现中遇到的几个问题，因为写的简单，所以问题感觉遇到的问题不多，希望对大家有用：

1.在搜索的时候，查询数据库获得商品数据后，再直接对商品的string类型字段检索，发现用不上indexOf方法然后用了以下操作后才通过,(声明一下，这里data.type本身就是string类型，然而data.type.indexOf会报错)
let data = this.data.data[i];
      let a = '';
      a = data.type;
      if (a.indexOf(this.data.value)>-1 && this.data.value.length > 0) {
        arr.push(data)
      }
2.然后一个问题就是,在确认订单并购买时，多次点击购买，会在数据库中进行多次插入操作，添加多条数据,这里我就设置里一个变量控制点击事件
<button class="butttom2" bindtap="{{!buttonClicked?'buysuc':''}}">立即支付</button>

这里我在外边添加了一个util文件

var ButtonClicked = function (self) {

  self.setData({
    buttonClicked: true
  })
}
module.exports = {
  ButtonClicked: ButtonClicked
}

在点击函数里，引入一下

const cfclick = require('../../utils/util');
buysuc(){
    cfclick.ButtonClicked(this);
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth();
    let day = date.getDate();
    let hours = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();
    let today = year+"年"+month+"月"+day+"日 "+hours+"时"+minute+"分"+second+"秒";
    let pro = this.data.product[0];
      productsCollection.add({
        data:{
          productid:pro._id,
          productimg: pro.basic_info.traffic_light_img_href,
          productprice: pro.basic_info.calories_value,
          tags: pro.basic_info.food_name,
          num:this.data.num,
          membernum:this.data.membernum,
          rednum:this.data.rednum,
          pay:this.data.newmoney,
          isuse:'未使用',
          date: today
        }
      }).then(res => {
        console.log(res);
    })
    setTimeout(function() {
      wx.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 2000
      })
      wx.switchTab({
        url:'../indent/indent',
        success() {
          var page = getCurrentPages().pop();
          if (page == undefined || page == null) return;
          page.onLoad();
        }
      })
    }, 1000)
     
  },

五、结语

因为数据在云数据库里，我感觉对数据的处理方面感觉速度比较慢，也可能是我太心急了，没有仔细去探索细节，但感觉还是学到了较多的知识，如果以上有错误的地方，还请朋友们指出。

avatar
文章
阅读
粉丝