微信小程序里面想要把history页面里面从后端数据库获取到的 fillin数组里面的id传到详情页面里面去

本文链接：https://blog.csdn.net/weixin_47128494/article/details/134727166

首先贴上这两个页面的相关代码：

history页面：

<!--pages/history/history.wxml-->
<!-- 后台数据库的姓名，性别，出生日期，填写时间，是否回应 -->
<view class="list">
  <view wx:for="{{fillin}}" wx:key="index" class="list-item">
    <view class="list-item-row">
      <text class="list-item-label">姓名：</text>
      <text class="list-item-value">{{item.name}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">性别：</text>
      <text class="list-item-value">{{item.sex}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">出生日期：</text>
      <text class="list-item-value">{{item.birthdate}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">填写时间：</text>
      <text class="list-item-value">{{item.creationTime}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">是否回应：</text>
      <text class="list-item-value">{{item.responseCount ? '是' : '否'}}</text>
    </view>
    <view>
      <navigator  bindtap="xiangqing" data-id="{{ item.id }}">
        <text style="color: blue; text-decoration: underline;">点击查看详情</text>
      </navigator>
    </view>
  </view>
</view>

Page({
  data: {   
    fillin:[],
    id:'10',
  },
  
  xiangqing: function(e) {
    const id = e.currentTarget.dataset.id;
    const item = e.currentTarget.dataset.item || {}; // 加入空值处理
  
    const name = item.name || '';
    const sex = item.sex || '';
    const birthdate = item.birthdate || '';
    const creationTime = item.creationTime || '';
  
    wx.navigateTo({
      url: '/pages/xiangqing/xiangqing?id=' + id + '&name=' + name + '&sex=' + sex + '&birthdate=' + birthdate + '&creationTime=' + creationTime,
    });
  },
  
  onLoad:function(options){
    const name = options.name || '';
    console.log(name);
    const sex = options.sex || '';
    const birthdate = options.birthdate || '';
    const creationTime = options.creationTime || '';
    this.setData({
      'fillin.name': name,
      'fillin.sex': sex,
      'fillin.birthdate': birthdate,
      'fillin.creationTime': creationTime,
    });
    
    wx.request({
      url: 'http://localhost:8000/mini/quest?radio='+1, 
      method:'GET',
      data: {
        size: 10,
        current: 1,
        name:"",
        radio:"1"
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        this.setData({
          fillin: res.data.data.content
        })
        console.log(this.data.fillin)
        console.log(res.data.data.content)
      }
    })
  }
})

然后是xiangqing页面：

<!--pages/xiangqing/xiangqing.wxml-->
<view class="page-high">
<view class="fanhui">
      <navigator url="/pages/history/history">
        <text style="color: blue; text-decoration: underline;">返回</text>
      </navigator>
</view>
<view  class="info"><text>基本信息</text></view>
   <view class="list-item-row">
      <text class="list-item-label">姓名：</text>
      <text class="list-item-value">{{fillin.name}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">性别：</text>
      <text class="list-item-value">{{fillin.sex}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">出生日期：</text>
      <text class="list-item-value">{{fillin.birthdate}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">填写时间：</text>
      <text class="list-item-value">{{fillin.creationTime}}</text>
    </view>
<view  class="info"><text>文件内容</text></view>

<!-- 渲染单选框，多选框，文本框 -->
<block wx:for="{{ fillin.replyList}}" wx:for-item="module" wx:for-index="moduleIndex">
  <view class="text">
   
    <block wx:if="{{module.whether == 0}}">
          {{moduleIndex + 1}}.
        </block>
        <block wx:else>
          {{moduleIndex + 1}}.
        </block>
    
    <text>{{module.key}}</text>
  </view>

  <block wx:if="{{module.type === 1}}">
    <!-- 渲染单选框 -->
    <van-radio-group bindchange="onRadioChange" data-problem="{{module.key}}"  disabled="{{true}}">
        <view class="radio">
          <van-radio name="{{ module.value }}">{{ module.value }}</van-radio>
        </view>

    </van-radio-group>
  </block>
  <block wx:elif="{{module.type === 2}}">

    <!-- 渲染多选框 -->
    <checkbox-group bind:change="onCheckboxChange" data-problem="{{module.key}}"  disabled="{{true}}">
      <block wx:for="{{ module.valueList }}" wx:for-item="value" wx:for-index="index" >
        <view class="radio">
          <checkbox value="{{value }}"  disabled="{{true}}">{{value }}</checkbox>
        </view>
      </block>
    </checkbox-group>
  </block>
  <block wx:else>
    <!-- 渲染文本输入框 -->
    <view class="radio">
      <input type="text" placeholder="{{module.value}}" bindinput="onTextInput"
       data-problem="{{module.key}}"  disabled="{{true}}" />
    </view>
  </block>
</block>
<!-- 上传图片 -->
<view  class="info"  wx:if="{{showImage}}"><text>上传图片</text></view>
<block  wx:if="{{showImage}}" wx:for="{{fillin.imgList}}" wx:for-item="img" wx:key="index">
  <van-image class="image-circle" bindtap="news" width="300" height="200" 
  src="http://192.169.3.124:9989/static/images/quest/{{img}}" /> 
</block>
<!-- 上传视频 -->
<view  class="info"  wx:if="{{showVideo}}"><text>上传视频</text></view>
<video id="myVideo"  wx:if="{{showVideo}}" src="http://192.169.3.124:9989/static/images/quest/{{fillin.video}}" ></video>
<input bindblur="bindInputBlur"/>
<!-- 回应记录 -->
<view  class="info"><text>回应记录</text></view>
<block wx:if="{{fillin.responseList.length === 0}}">
  <view class="list-item">
    <text class="list-item-value">暂时没有回应记录，请等待医生回复</text>
  </view>
</block>
<block wx:else>
<view wx:for="{{fillin.responseList}}" wx:key="index" class="list-item">
    <view class="list-item-row">
      <text class="list-item-label">回应时间：</text>
      <text class="list-item-value">{{item.time}}</text>
    </view>
    <view class="list-item-row">
      <text class="list-item-label">医生姓名：</text>
      <text class="list-item-value">{{item.username}}</text>
    </view>
    <view class="list-item-row">
    <txet class="list-item-label">回应的内容：</txet>
    <text class="list-item-value" >{{item.details}}</text>
    </view>
  </view>
</block>

<!-- 照片上传 -->
    <view class="form-item">
      <view class="label">添加图片</view>
      <button bindtap="choosePhoto" type="primary" class="label">添加照片</button>
      <view class="photo-container">
        <image wx:for="{{ photos }}" wx:key="{{ index }}" src="{{ item }}" mode="aspectFill">
       
        </image>
      </view>
    </view>
    <!-- 视频上传 -->
    <view class="form-item">
      <block wx:if="{{!showVideo}}">
      <view class="label">添加视频</view>
      <button bindtap="chooseVideo" type="primary" class="label" >添加视频</button>
      </block>
      <block wx:else>
      <view class="label">修改视频</view>
      <button bindtap="chooseVideo" type="primary" class="label" >修改视频</button>
      </block>
      <video wx:if="{{ videoSrc }}" src="{{ videoSrc }}" controls></video>
    </view>
    
<view class="hidden">1</view>
</view>

Page({
  data: {
    id:0,
    showImage: false,
    showVideo: false,
    fillin:{}
  },
  onLoad: function(options) {
    const { id, name, sex, birthdate, creationTime } = options; // 获取传递过来的id、姓名、性别、出生日期和填写时间
    this.setData({
      id: id,
    });
    wx.request({
      url: 'http://localhost:8000/mini/quest/findById', 
      method:'GET',
      data: {
        id:this.data.id
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        this.setData({
          fillin: res.data.data
        })
        console.log(res.data.data)
        // 判断是否获取到了图片和视频
        if (res.data.data.imgList.length > 0) {
          this.setData({
            showImage: true
          })
        }
        if (res.data.data.video) {
          this.setData({
            showVideo: true
          })
        }
      }
    })
  },
  //上传图片按钮
  choosePhoto() {
    wx.chooseImage({
      count: 30,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempPhotos = res.tempFilePaths[0];
        //上传图片
        this.uploadFile(tempPhotos,0);
        //把图片显示到页面
        const newPhotos = this.data.photos.concat(tempPhotos);
        this.setData({
          photos: newPhotos,
        });
      },
    });
  },
  //视频上传方法
  chooseVideo() {
    wx.chooseVideo({
      sourceType: ["album", "camera"],
      maxDuration: 60,
      camera: "back",
      success: (res) => {
        const videoSrc = res.tempFilePath;
        //上传视频
        this.uploadFile(videoSrc,1);
        //显示视频到页面
        this.setData({
          videoSrc,
        });
      },
    });
  },
  
});

主要思路和步骤：

在历史页面的js文件里面的data里面先初始化id，

 data: {   
    fillin:[],
    id:'10',
  },

在历史页面的wxml文件里面相关要传递id的地方添加点击页面以及把id放上去，

<navigator  bindtap="xiangqing" data-id="{{ item.id }}">
        <text style="color: blue; text-decoration: underline;">点击查看详情</text>
      </navigator>

在历史页面的js文件里面写跳转到详情页面并把id传过去的相关函数，

xiangqing: function(e) {
    const id = e.currentTarget.dataset.id;
    const item = e.currentTarget.dataset.item || {}; // 加入空值处理
  
    
    wx.navigateTo({
      url: '/pages/xiangqing/xiangqing?id=' + id ,
    });
  },

然后在详情页面的js文件里面也初始化id，

 data: {
    id:0,
    fillin:{}
  },

然后在详情页面的js文件里面写接收从历史页面传过来的id，

onLoad: function(options) {
    const { id} = options; // 获取传递过来的id、姓名、性别、出生日期和填写时间
    this.setData({
      id: id,
    });
  },