1. 程式人生 > 其它 >二.個人訂單展示頁面:

二.個人訂單展示頁面:

1.彈出層的多選框:

運用了Vant3的元件和van-cell、van-popup、van-pick,對於顯示在頁面中選擇的資訊採用微信的資料繫結this.setData()動態的修改資料。

<van-cell title="你的大學:{{daxue}}" is-link bind:click="showPopup" />

<van-popup  show="{{ show }}"
  position="bottom"
  custom-style="height: 60%;"
  bind:close="onClose">

  <van-picker
  show-toolbar
  title="你的大學"

  columns="{{ columns }}"
  bind:cancel="onCancel"
  bind:confirm="onConfirm"
/>
  </van-popup>



 columns: ['山西農業大學''西安電子科技大學''杭州電子科技大學''北京電子科技大學''電子科技大學'],
  show: false,
  daxue:""
  },
  //選著地區
  onChange(event) {
    const { picker, value, index } = event.detail;
    Toast(`當前值:${value}, 當前索引:${index}`);
  },
  showPopup() {
    this
.setData({ show: true });
  },

  onClose() {
    this.setData({ show: false });
  },
  onConfirm(e){
    // console.log(e.detail.value)
    this.setData({
      daxue:e.detail.value
    })
    wx.showToast({
      title: '選擇成功',
      icon:"success"
    })},

2.下方的得到對應的使用者自己的訂單資訊:

複用了在主頁中查詢資訊的部分程式碼並且運用微信的雲函式的到每一個使用者特有的_openid然後來區分資訊,然後修改和新增原來主頁的程式碼。

雲函式的定義:

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}



//點選跳蚤集市
  jS_1(e ){
    var that = this;
    //呼叫雲資料庫
    //得到openID
    wx.cloud.callFunction({
      name:'getopenid',
      success(res){
        that.setData({
          openid:res.result.openid
        })
        console.log("獲取openid",res.result.openid)
      },fail(err){
        console.log("獲取失敗",err)
      }
    })
    const DB= wx.cloud.database()
    //查詢資料
    DB.collection("jishiData").where({
      _openid:that.data.openid
    }). get({
      success:res=>{
        // console.log(res.data)
        that.setData({
          css:"",
          ne:res.data,
          title:res.data[0].title,
          page:"show_2_2"
        })
      },fail:err=>{
        console.log("無法得到資料")
      }
    })
  }

3.滑動的刪除:

原來的接單按鈕變成了刪除,改變了相應的bintap事件增加了相應的刪除方法,然後區分型別用簡單的if()判斷型別來區分是刪除哪個資料庫。

<van-swipe-cell
  id="swipe-cell2"
  right-width="{{ 80}}"
  name="示例"
  bind:open="onOpen"
  wx:for="{{ne}}"
>
  <van-cell-group>
    <van-cell-group inset>
  <view class="goods">
    <van-card
  tag="{{item.zhuangtai}}接單"
  price="{{item.money}}"
  desc="{{item.beizhu}}"
  title="{{title}}"
  thumb="{{item.image_url}}"
  origin-price="5.00"


>
  <view slot="footer">
    <navigator url="/pages/{{page}}/{{page}}?id={{item._id}}">
    <van-button type="mini" round color="linear-gradient(to right, #4bb0ff, #2bae85)" bindtap="">檢視詳情</van-button>
  </navigator>
  </view>
  <view slot="bottom">
    <text>{{item.deadline}}</text>
  </view>
</van-card>
  </view>
</van-cell-group>
  </van-cell-group>
  <view slot="right" class="van-swipe-cell__right"><view class="font" bindtap="delete" data-id="{{item._id}}">刪除</view></view>
</van-swipe-cell>



 //刪除
  delete(e){
    const db = wx.cloud.database()
    let that = this
    wx.showModal({
      title: '提示',
      content: '確認刪除訂單'
      success: function (res) {
      if (res.confirm) {
      // console.log('使用者點選確定') 
    //找到id
        //刪除訂單
        let id1 = e.currentTarget.dataset.id
        console.log(id1)
        if(that.data.title=="快遞"){
          db.collection('userData').doc(id1).remove({
            success(res){
              console.log("刪除成功")
              wx.showToast({
                title: "刪除成功",
                icon:"success"
               })
            },fail(res){
              console.log("刪除失敗")
            }
          }) 
        }else if(that.data.title=="集市"){
          db.collection('jishiData').doc(id1).remove({
            success(res){
              console.log("刪除成功")
              wx.showToast({
                title: "刪除成功",
                icon:"success"
               })
            },fail(res){
              console.log("刪除失敗")
            }
          })
        }else{
          db.collection('worldData').doc(id1).remove({
            success(res){
              console.log("刪除成功")
              wx.showToast({
                title: "刪除成功",
                icon:"success"
               })
            },fail(res){
              console.log("刪除失敗")
            }
          })
        }
      }
      }
      })
    // console.log(e)
  },