四：详细信息页面：

2022-03-31 13:00:33 阅读：140 来源： 互联网

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>

文件下载：

文件下载运用了微信自带的接口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)
      })
    }
  }

状态分析栏：

运用了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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

四：详细信息页面：