四：详细信息页面：

1.左侧的导航栏和相应的提示窗口：

运用了Van3中的van-sidebar、van-dialog、van-switch、van-cell-group、van-field组件。然后将对应的数据修改到对应的数据库。其中使用的数据上传到对应的数据库进行修改，这里先依据每个数据的不同的_id，然后再相应的数据进行数据绑定动态呈现数据。

<van-sidebar active-key="{{ activeKey }}" bind:change="onPeople">
  <van-sidebar-item title="订单信息" />
  <van-sidebar-item title="修改你的信息" />
</van-sidebar>

//选择信息
  onPeople(e){
    // console.log(e.detail)
    if(e.detail==1){
      this.setData({show:true})
    }
  },

2.页面数据的渲染：

得到页面的id然后查找对应的数据库得到对应的数据，然后通过数据绑定到data中动态显示数据。

/**
   * 生命周期函数--监听页面加载
   */

  onLoad: function (options) {
    // console.log(options.id)

    let a=""
    id1=options.id
    let that = this;
    //得到openID
    wx.cloud.callFunction({
      name:'getopenid',
      success(res){
        that.setData({
          openid:res.result.openid
        })}
      })

    //得到id
    // 1. 获取数据库引用
    console.log(id1)
// 2. 构造查询语句
// collection 方法获取一个集合的引用
// where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件（比如大于、小于、in 等），具体见文档查看支持列表
// get 方法会触发网络请求，往数据库取数据
db.collection('userData').where({
  _id: id1
}).get({
  success: function(res) {
  // 输出 [{ "title": "The Catcher in the Rye", ... }]
  console.log(res)
  that.setData({
    list:res.data[0]
  })
 },fail:function(err){
  console.log("无法得到数据")
}
})
return id1
}

3.查看原图：

原图跳转到另外的页面中使用css页面渲染让图片较为合理的显示，依然时在跳转中传递参数id然后查找对应的数据库显示对应的图片的url。

//查看原图
yuantu(){
 var that =this

  wx.navigateTo({
    url: url+this.data.list.image_url,
  })

  /**
   * 页面的初始数据
   */
  data: {
    img_src:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
     // console.log(options.id)
     id1=options.id
    console.log(id1)
   that.setData({
     img_src:id1
   })
  },

<!--pages/yuantu/yuantu.wxml-->
<view class="out">
<view class="center">
<image src="{{img_src}}"mode="aspectFit"></image>
</view>
</view>

4. 文件下载：

文件下载运用了微信自带的接口wx.cloud.downloadFile、wx,openDocument然后由对应的_id得到对应文件的file地址下载对应文件并自动打开。

 onClick(e){
    wx.showLoading({
      title: '下载中',
    })
    let a = id1
    // console.log(a)
    let file_url=this.data.list.file_url;
    console.log(file_url)
    if(file_url==""){
      wx.showToast({
        title: '下载链接为空',
        icon:"none"
      })
    }else{
      wx.cloud.downloadFile({
        fileID:file_url
      }).then(res=>{
        console.log("下载成功",res)
        wx.hideLoading({})
        wx.openDocument({
          filePath: res.tempFilePath,
          fileType:"doc"
        })
      }).catch(err=>{
        console.log("下载失败",err)
      })
    }
  }

5. 状态分析栏：

运用了Van3的van-steps组件然后再每次有数据变动时，改变对应的active状态实现订单状态的更新

 steps: [
    {
      text: '步骤一',
      desc: '填写订单',
    },
    {
      text: '步骤二',
      desc: '未接单',
    },
    {
      text: '步骤三',
      desc: '已接单',
    },
    {
      text: '步骤四',
      desc: '左滑删除',
    },
  ],

<van-steps steps="{{ steps }}" active="{{ list.active }}"active-icon="success" active-color="#07c160"inactive-color="#969799"/>

标签：console,log,url,res,页面,详细信息,id,wx
来源： https://www.cnblogs.com/HJZ114152/p/16081242.html