feat：修改我的家庭页面并对接接口

epdc-resident-mp-yushan/subpages/family/pages/familyInfo/familyInfo.js

@@ -1,4 +1,8 @@
-// subpages/family/pages/familyInfo/familyInfo.js
+import {
+  addFamilyMember,
+  updateFamilyMember,
+  getFamilyMember
+} from '../../utils/api.js'
 Page({
 
   /**
@@ -7,6 +11,7 @@ Page({
   data: {
     submitBtnIsAllowed: false,
     isShowDialog: false,
+    pageType: null, // add 新增 edit 编辑 look 查看
     fmData: {
         name: '',
         idCard: '',
@@ -47,7 +52,23 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    let idCard = options.idCard
+    this.setData({
+      pageType:options.pageType
+    })
+    console.log(this.data.pageType);
+    if(options.pageType !== 'add'){
+      this.getMemberInfo(idCard)
+    }
+  },
+  // 获取成员详情信息
+  async getMemberInfo(idCard){
+    const res = await getFamilyMember({idCard:idCard})
+    if(res.msg === 'success' && res.code === 0){
+      this.setData({
+        'fmData':res.data,
+      })
+    }
   },
   nameSync(e){
     this.setData({
@@ -141,6 +162,22 @@ Page({
         return '男';
     }
   },
+
+  // 编辑按钮点击事件
+  editTap () {
+    // if (this.data.fmData.idCard) {
+    //   this.handleValidBlur('', this.data.fmData.idCard)
+    // }
+    this.setData({
+      pageType: 'edit'
+    })
+  },
+  // 取消编辑
+  closeEditTap () {
+    this.setData({
+      pageType: 'look'
+    })
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

epdc-resident-mp-yushan/subpages/family/pages/familyInfo/familyInfo.wxml

@@ -153,82 +153,17 @@
       </view>
     </view>
 
-    <view class="operate">
+    <view class="operate" wx:if="{{pageType === 'add'}}">
       <view class="btn {{ submitBtnIsAllowed ? '' : 'z-disabled'}}" bind:tap="submit">确认提交</view>
     </view>
-    <view class="edit">
-      <view class="btn {{ submitBtnIsAllowed ? '' : 'z-disabled'}} left">编辑</view>
-      <view class="btn right" bindtap="delect">删除</view>
+    <view class="edit" wx:if="{{pageType === 'look'}}">
+      <view class="editbtn" bindtap="editTap">编辑</view>
     </view>
-    <view class="edit-two">
-      <view class="btn {{ submitBtnIsAllowed ? '' : 'z-disabled'}} left">取消编辑</view>
-      <view class="btn {{ submitBtnIsAllowed ? '' : 'z-disabled'}} right">提交</view>
+    <view class="edit-two" wx:if="{{pageType === 'edit'}}">
+      <view class="editbtn" bindtap="closeEditTap">取消编辑</view>
+      <view class="btn {{ submitBtnIsAllowed ? '' : 'z-disabled'}} right" bindtap="editSubmit">提交</view>
     </view>
   </view>
 </view>
 
-<!-- minfloor="3" maxFloor="3" -->
-<select5Address id="select5Address"></select5Address>
 
-<!-- 删除dialog -->
-<view class="m-modal" wx:if="{{isShowDialog}}">
-  <view class="content">
-    <view class="close-dialog"
-      bindtap="cancel" >
-      <image src="../../../../../assets/images/guanbi.png" />
-    </view>
-
-    <view class="title">家庭成员信息删除</view>
-    <view class="fm">
-      <view class="item-list">
-
-        <view class="item" style="border-top: 0rpx">
-          <view class="field">
-            <view class="must">*</view>
-            <view class="field-text">删除原因</view>
-          </view>
-          <view class="value">
-            <picker class="picker"
-              range="{{nationList}}"
-              range-key="label"
-              data-list-name="nationList"
-              data-id-key="nationValue"
-              data-name-key="nationName"
-              bindchange="inputSyncPicker">
-              <view class="picker-text" wx:if="{{fmData.nationName}}">{{fmData.nationName}}</view>
-              <view class="picker-text z-weak" wx:else>请选择</view>
-              <image class="menu-arrow" src="/subpages/family/images/arrow.png" mode="aspectFit" />
-            </picker>
-          </view>
-        </view>
-
-        <view class="item" style="border-top: 0rpx">
-          <view class="field">
-            <view class="must">*</view>
-            <view class="field-text">情况说明：</view>
-          </view>
-        </view>
-        
-        <view class="item">
-          <view class="textarea">
-            <textarea type="text"
-              value="{{ fmData.remark }}"
-              placeholder="请输入情况说明"
-              placeholder-class="z-ph"
-              data-fm="fmData"
-              data-name="remark"
-              bindinput="inputSync"
-              cursor-spacing="14"
-              maxlength="300">
-            </textarea>
-          </view>
-        </view>
-
-      </view>
-    </view>
-    <view class="btns">
-      <view class="btn right">确定</view>
-      <view class="btn left" bindtap="cancel">取消</view>
-    </view>
-  </view>
-</view>

epdc-resident-mp-yushan/subpages/family/pages/familyInfo/familyInfo.wxss

@@ -1 +1,16 @@
-@import '../../wxss/familyInfo.wxss';
+@import '../../wxss/familyInfo.wxss';
+
+
+.editbtn{
+    margin:100rpx auto;
+    width:240rpx;
+    height:80rpx;
+    line-height:80rpx;
+    border-radius:40rpx;
+    text-align:center;
+    font-size:32rpx;
+    font-family:Source Han Serif SC;
+    font-weight:400;
+    color:#fff;
+    background-color: #0399d8;
+}

epdc-resident-mp-yushan/subpages/family/pages/index/index.js

@@ -1,29 +1,55 @@
-// subpages/family/pages/index/index.js
+import {
+  getHouseInfo
+} from '../../utils/api.js'
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    familyInfo:null,
+    idCard:110101199003074178,
     showQr: true,
+    memberList:[],
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    // let idCard = options.idCard
+    // let roomCode = options.roomCode
+    this.getInfo('3702110100420037200006')
+  },
+  // 获取房屋信息
+  async getInfo(code){
+    const res = await getHouseInfo({roomCode:code})
+    if(res.msg === 'success' && res.code === 0){
+      this.setData({
+        'familyInfo':res.data,
+        'roomCode':res.data.members
+      })
+    }
+  },
+  // 跳转新增页面
+  handleTo(){
+    wx.navigateTo({
+      url: '/subpages/family/pages/familyInfo/familyInfo?pageType=add'
+    })
   },
+  // 跳转查看页面
   toFamilyInfo(){
     wx.navigateTo({
-      url: '/subpages/family/pages/familyInfo/familyInfo',
+      url: '/subpages/family/pages/familyInfo/familyInfo?pageType=look&idCard='+ this.data.familyInfo.idCard
     })
   },
+  // 取消编辑
   cancel() {
 		this.setData({
 			showQr: true,
 		});
 	},
+  // 点击保存二维码
   comfirmSave() {
 		wx.downloadFile({
 			url: this.data.info.qrCodeUrl,
@@ -56,7 +82,13 @@ Page({
       }
 		})
 	},
-
+  handlePreview() {
+		const { info } = this.data;
+		if (!info.qrCodeUrl) return;
+		this.setData({
+			showQr: false,
+		});
+	},
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

epdc-resident-mp-yushan/subpages/family/pages/index/index.wxml

@@ -1,26 +1,26 @@
 <view class="f-container">
-  <block wx:if="{{info.houseCode}}">
+  <block wx:if="{{familyInfo.roomCode}}">
     <view class="f-top">
       <view class="f-card">
         <view class="flex-view">
           <view class="card-left">
-            <view class="card-title">{{ info.houseName }}</view>
-            <view wx:if="{{info.houseCode.length <= 24}}" class="card-num">
-              <text>No.{{ info.houseCode }}</text>
+            <view class="card-title">{{ familyInfo.plotName + familyInfo.buildingName + familyInfo.unit + familyInfo.roomNo}}</view>
+            <view wx:if="{{familyInfo.roomCode.length <= 24}}" class="card-num">
+              <text>No.{{ familyInfo.roomCode }}</text>
               <!-- <text >No.6666666666666666666666</text> -->
               <image />
             </view>
           </view>
           <view class="card-right">
-            <view class="card-qr {{ info.houseCode.length > 24 && 'card-qr-long'}}" bind:tap="handlePreview">
-              <!-- <image src="{{ info.qrCodeUrl }}"  /> -->
+            <view class="card-qr {{ familyInfo.roomCode.length > 24 && 'card-qr-long'}}" bind:tap="handlePreview">
+              <!-- <image src="{{ familyInfo.qrCodeUrl }}"  /> -->
               <image mode="widthFix" src="../../images/family-qr.png" />
             </view>
-            <view wx:if="{{info.houseCode.length <= 24}}" class="card-qr-name">我的“e家码”</view>
+            <view wx:if="{{familyInfo.roomCode.length <= 24}}" class="card-qr-name">我的"e家码"</view>
           </view>
         </view>
-        <view wx:if="{{info.houseCode.length > 24}}" class="card-num mt16">
-          <text>No.{{ info.houseCode }}</text>
+        <view wx:if="{{familyInfo.roomCode.length > 24}}" class="card-num mt16">
+          <text>No.{{ familyInfo.roomCode }}</text>
           <!-- <text >No.666666666666666666666666666666666666</text> -->
           <image />
         </view>
@@ -41,12 +41,13 @@
           <view class="table-col">手机号</view>
           <view class="table-col">明细</view>
         </view>
-        <block wx:if="{{list.length > 0}}">
-          <view class="table-cell" wx:for="{{6}}">
-            <view class="table-col">张三李四</view>
-            <view class="table-col">户主</view>
-            <view class="table-col">13388990099</view>
-            <view class="table-col table-col-4" bind:tap="toFamilyInfo">查看</view>
+        <block wx:if="{{familyInfo.members.length > 0}}">
+          <view class="table-cell" wx:for="{{familyInfo.members}}" wx:key="userId" class="table-cell">
+            <view class="table-col">{{ item.userName }}</view>
+            <view class="table-col">{{ item.relation }}</view>
+            <view class="table-col">{{ item.mobile }}</view>
+            <view class="table-col table-col-4" data-type="edit" data-id="{{item.id}}"
+            bind:tap="toFamilyInfo">查看</view>
           </view>
         </block>
         <view wx:else class="no-data">暂无成员</view>

epdc-resident-mp-yushan/subpages/family/utils/api.js

@@ -4,54 +4,61 @@ const request  = require('../../../utils/request')
  * 绑定我的家庭房屋
  */
 export function bindingFamily (param) {
-  return request.post('/api/custom/family/bindingFamily',param)
+  return request.post('custom/family/bindingFamily',param)
 }
 
 /**
  * 获取小区下拉列表
  */
 export function getPlotOption (param) {
-  return request.get('/api/custom/personroom/getPlotOption',param)
+  return request.get('custom/personroom/getPlotOption',param)
 }
 
 /**
  * 获取楼栋下拉列表
  */
 export function getBuildingOption (param) {
-  return request.get('/api/custom/personroom/getBuildingOption',param)
+  return request.get('custom/personroom/getBuildingOption',param)
 }
 
 /**
  * 获取单元下拉列表
  */
 export function getUnitOption (param) {
-  return request.get('/api/custom/personroom/getUnitOption',param)
+  return request.get('custom/personroom/getUnitOption',param)
 }
 
 /**
  * 获取房屋下拉列表
  */
 export function getHouseOption (param) {
-  return request.get('/api/custom/personroom/getHouseOption', param)
+  return request.get('custom/personroom/getHouseOption', param)
 }
 
 /**
  * 添加成员信息
  */
  export function addFamilyMember (param) {
-  return request.post('/api/custom/personroom/addFamilyMember', param)
+  return request.post('custom/personroom/addFamilyMember', param)
 }
 
 /**
  * 修改成员信息
  */
  export function updateFamilyMember (param) {
-  return request.post('/api/custom/personroom/updateFamilyMember',param)
+  return request.post('custom/personroom/updateFamilyMember',param)
 }
 
 /**
  * 获取成员信息
  */
  export function getFamilyMember (param) {
-  return request.get('/api/custom/personroom/getFamilyMember',param)
+  return request.get('custom/personroom/getFamilyMember',param)
+}
+
+/**
+ * 获取房屋信息
+ */
+ export function getHouseInfo (param) {
+  return request.get('custom/personroom/getHouseInfo',param)
 }

epdc-resident-mp-yushan/subpages/family/wxss/family.wxss

@@ -1 +1 @@
-page{background:#fff;box-sizing:border-box}.f-container{width:100%;box-sizing:border-box}.f-top{position:relative;width:100%;height:200rpx;background:#e3271c;border-radius:0 0 30rpx 30rpx;-webkit-border-radius:0 0 30rpx 30rpx;-moz-border-radius:0 0 30rpx 30rpx;-ms-border-radius:0 0 30rpx 30rpx;-o-border-radius:0 0 30rpx 30rpx}.f-top .flex-view{display:flex;justify-content:space-between}.f-top .f-card{position:absolute;left:50%;bottom:-64rpx;width:690rpx;height:200rpx;margin-left:-345rpx;box-sizing:border-box;padding:28rpx 30rpx 18rpx;background-color:#fff;box-shadow:0 5rpx 32rpx 0 rgba(184,184,184,.25);overflow:hidden;border-radius:14rpx;-moz-border-radius:14rpx;-ms-border-radius:14rpx;-o-border-radius:14rpx;-webkit-border-radius:14rpx}.f-top .f-card .card-right{flex-shrink:0;margin-left:30rpx}.f-top .f-card .card-title{height:96rpx;font-family:PingFang-SC-Bold;font-size:34rpx;letter-spacing:1rpx;color:#020202;overflow:hidden}.f-top .f-card .card-num{display:flex;align-items:center;font-family:PingFang-SC-Medium;font-size:28rpx;letter-spacing:1rpx;color:#333;overflow:hidden}.f-top .f-card .card-num image{flex-shrink:0;width:32rpx;height:18rpx}.f-top .f-card .card-qr{width:120rpx;height:120rpx;border:1rpx solid #eee}.f-top .f-card .card-qr image{display:block;width:100%;height:100%}.f-top .f-card .card-qr-long{width:100rpx;height:100rpx}.f-top .f-card .card-qr-name{font-family:PingFang-SC-Regular;font-size:22rpx;font-weight:400;font-stretch:normal;letter-spacing:1rpx;color:#333}.f-wr{width:100%;box-sizing:border-box;padding:100rpx 20rpx 0}.title-right,.title-wr{display:flex;align-items:center}.title-wr{justify-content:space-between;padding:28rpx 0;border-bottom:1rpx solid #e7eeee}.title-wr .title-label{position:relative;padding-left:25rpx;font-family:PingFang-SC-Bold;font-size:34rpx;font-weight:400;font-stretch:normal;letter-spacing:0;color:#333}.title-wr .title-label::after{content:'';position:absolute;top:50%;left:0;width:6rpx;height:30rpx;margin-top:-15rpx;background-color:#e60000;border-radius:3rpx;-webkit-border-radius:3rpx;-moz-border-radius:3rpx;-ms-border-radius:3rpx;-o-border-radius:3rpx}.title-wr .title-right-label{font-family:PingFang-SC-Light;font-size:26rpx;font-weight:400;font-stretch:normal;color:#999}.title-wr .right-icon{width:30rpx;height:30rpx}.f-table{background-color:#fbfbfb}.f-table .table-cell{display:flex;align-items:center;padding:26rpx 0;border:solid 1rpx #e3e3e3;border-top:0;font-family:PingFang-SC-Regular;font-size:30rpx;color:#000003}.f-table .table-cell .table-col{flex:1;text-align:center;line-height:1}.f-table .table-cell .table-col-4{color:#dd2a2a}.f-table .table-header{background:#f1f1f1;border:0;font-family:PingFang-SC-Regular;font-size:28rpx;color:#666}.f-btns{display:flex;align-items:center;padding:30rpx 0}.f-btns .f-btns-icon{width:30rpx;height:30rpx;font-size:28rpx;color:#dd2a2a;text-align:center;line-height:30rpx;border:1rpx solid #dd2a2a;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.f-btns .f-btns-label{margin-left:10rpx;font-size:28rpx;color:#dd2a2a}.mt40{margin-top:40rpx}.mt16{margin-top:16rpx}.no-data{font-size:28rpx;color:#999;text-align:center;line-height:300rpx}.m-fm .fm{top:500rpx;width:600rpx;padding:0 0 40rpx 0;background:#fff;overflow:hidden}.m-fm .fm .btn-close{top:27rpx;padding:0 30rpx;font-size:36rpx;color:#fff;line-height:90rpx}.m-fm .fm .btn-close image{display:block;width:36rpx;height:36rpx}.m-fm .fm .fm-btn{width:240rpx;height:54rpx;margin:20rpx auto 0;font-family:PingFang-SC-Medium;font-size:28rpx;font-weight:400;font-stretch:normal;letter-spacing:0;color:#999;text-align:center;line-height:54rpx;border-radius:27rpx;border:solid 1rpx #eee;-webkit-border-radius:27rpx;-moz-border-radius:27rpx;-ms-border-radius:27rpx;-o-border-radius:27rpx}.m-fm .fm-header{width:100%;height:90rpx;margin-bottom:20rpx;text-align:center;line-height:90rpx;font-family:PingFang-SC-Bold;font-size:32rpx;color:#fff;background-image:linear-gradient(90deg,#ca151d 0,#e11c13 100%)}.m-fm .fm-qr{width:400rpx;height:400rpx;box-sizing:border-box;margin:0 auto}.m-fm .fm-qr image{display:block;width:100%;height:100%}.no-family{padding-top:200rpx}.no-family image{display:block;width:506rpx;margin:0 auto}.no-family .no-btn{width:220rpx;height:66rpx;margin:60rpx auto 0;font-size:32rpx;color:#fff;text-align:center;line-height:66rpx;background-image:linear-gradient(90deg,#ca151d 0,#e11c13 100%);border-radius:30rpx;-webkit-border-radius:30rpx;-moz-border-radius:30rpx;-ms-border-radius:30rpx;-o-border-radius:30rpx}
+page{background:#fff;box-sizing:border-box}.f-container{width:100%;box-sizing:border-box}.f-top{position:relative;width:100%;height:200rpx;background:#e3271c;border-radius:0 0 30rpx 30rpx;-webkit-border-radius:0 0 30rpx 30rpx;-moz-border-radius:0 0 30rpx 30rpx;-ms-border-radius:0 0 30rpx 30rpx;-o-border-radius:0 0 30rpx 30rpx}.f-top .flex-view{display:flex;justify-content:space-between;}.f-top .f-card{position:absolute;left:50%;bottom:-64rpx;width:690rpx;height:200rpx;margin-left:-345rpx;background-color:#fff;box-sizing:border-box;padding:28rpx 30rpx 18rpx;box-shadow: rgba(184,184,184,.25) 0px 0px 30px 5px;overflow:hidden;border-radius:14rpx;-moz-border-radius:14rpx;-ms-border-radius:14rpx;-o-border-radius:14rpx;-webkit-border-radius:14rpx}.f-top .f-card .card-right{flex-shrink:0;margin-left:30rpx}.f-top .f-card .card-title{height:96rpx;font-family:PingFang-SC-Bold;font-size:34rpx;letter-spacing:1rpx;color:#333;overflow:hidden}.f-top .f-card .card-num{display:flex;align-items:center;font-family:PingFang-SC-Medium;font-size:28rpx;letter-spacing:1rpx;color:#333;overflow:hidden}.f-top .f-card .card-num image{flex-shrink:0;width:32rpx;height:18rpx}.f-top .f-card .card-qr{width:140rpx;height:140rpx;margin: auto;position: relative;top: -5px;}.f-top .f-card .card-qr image{display:block;width:100%;height:100%;border-radius: 10px;}.f-top .f-card .card-qr-long{width:100rpx;height:100rpx}.f-top .f-card .card-qr-name{font-family:PingFang-SC-Regular;font-size:22rpx;font-weight:400;font-stretch:normal;letter-spacing:1rpx;color:#333}.f-wr{width:100%;box-sizing:border-box;padding:100rpx 20rpx 0}.title-right,.title-wr{display:flex;align-items:center}.title-wr{justify-content:space-between;padding:28rpx 0;border-bottom:1rpx solid #e7eeee}.title-wr .title-label{position:relative;padding-left:25rpx;font-family:PingFang-SC-Bold;font-size:34rpx;font-weight:400;font-stretch:normal;letter-spacing:0;color:#333}.title-wr .title-label::after{content:'';position:absolute;top:50%;left:0;width:6rpx;height:30rpx;margin-top:-15rpx;background-color:#e60000;border-radius:3rpx;-webkit-border-radius:3rpx;-moz-border-radius:3rpx;-ms-border-radius:3rpx;-o-border-radius:3rpx}.title-wr .title-right-label{font-family:PingFang-SC-Light;font-size:26rpx;font-weight:400;font-stretch:normal;color:#999}.title-wr .right-icon{width:30rpx;height:30rpx}.f-table{background-color:#fbfbfb}.f-table .table-cell{display:flex;align-items:center;padding:26rpx 0;border:solid 1rpx #e3e3e3;border-top:0;font-family:PingFang-SC-Regular;font-size:30rpx;color:#000003}.f-table .table-cell .table-col{flex:1;text-align:center;line-height:1}.f-table .table-cell .table-col-4{color:#dd2a2a}.f-table .table-header{background:#f1f1f1;border:0;font-family:PingFang-SC-Regular;font-size:28rpx;color:#666}.f-btns{display:flex;align-items:center;padding:30rpx 0}.f-btns .f-btns-icon{width:30rpx;height:30rpx;font-size:28rpx;color:#dd2a2a;text-align:center;line-height:30rpx;border:1rpx solid #dd2a2a;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.f-btns .f-btns-label{margin-left:10rpx;font-size:28rpx;color:#dd2a2a}.mt40{margin-top:40rpx}.mt16{margin-top:16rpx}.no-data{font-size:28rpx;color:#999;text-align:center;line-height:300rpx}.m-fm .fm{top:500rpx;width:600rpx;padding:0 0 40rpx 0;background:#fff;overflow:hidden}.m-fm .fm .btn-close{top:27rpx;padding:0 30rpx;font-size:36rpx;color:#fff;line-height:90rpx}.m-fm .fm .btn-close image{display:block;width:36rpx;height:36rpx}.m-fm .fm .fm-btn{width:240rpx;height:54rpx;margin:20rpx auto 0;font-family:PingFang-SC-Medium;font-size:28rpx;font-weight:400;font-stretch:normal;letter-spacing:0;color:#999;text-align:center;line-height:54rpx;border-radius:27rpx;border:solid 1rpx #eee;-webkit-border-radius:27rpx;-moz-border-radius:27rpx;-ms-border-radius:27rpx;-o-border-radius:27rpx}.m-fm .fm-header{width:100%;height:90rpx;margin-bottom:20rpx;text-align:center;line-height:90rpx;font-family:PingFang-SC-Bold;font-size:32rpx;color:#fff;background-image:linear-gradient(90deg,#ca151d 0,#e11c13 100%)}.m-fm .fm-qr{width:400rpx;height:400rpx;box-sizing:border-box;margin:0 auto}.m-fm .fm-qr image{display:block;width:100%;height:100%}.no-family{padding-top:200rpx}.no-family image{display:block;width:506rpx;margin:0 auto}.no-family .no-btn{width:220rpx;height:66rpx;margin:60rpx auto 0;font-size:32rpx;color:#fff;text-align:center;line-height:66rpx;background-image:linear-gradient(90deg,#ca151d 0,#e11c13 100%);border-radius:30rpx;-webkit-border-radius:30rpx;-moz-border-radius:30rpx;-ms-border-radius:30rpx;-o-border-radius:30rpx}