ng_notes_mini/pages/index/org_member.vue

<template>
  <view class="content">
    <view>
		<view class="active-title-box">
		   <picker @change="bindPickerChange" :value="index" :range="orgArray" :range-key="'name'">
					<view class="uni-input">{{orgValue}}</view>
					<image src="/static/arrow_down.svg" mode="aspectFit"></image>
		   </picker>
		</view>
		<view class="active-box" v-for="(item,index) in orgList" :key="index">
			<view class="active-content-box">
				<view class="active-content">
					<view class="active-name">{{item.name}}</view>
					<view class="active-date">({{item.office}})</view>
				</view>
				<view class="active-content" style="margin-top: 10rpx">
					<view>{{item.phone}}</view>
				</view>
			</view>
		</view>
		<view v-if="!orgList.length" style="text-align: center;">
			<image src="/static/nodata.svg" mode="aspectFit" style="width: 300rpx;height: 300rpx;"></image>
		</view>
	</view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
	components: {
	},
  data() {
    return {
      isAuth:getApp().globalData.globalAuth,
      userHeadImg: getApp().globalData.user_headUrl,
      userNickName:getApp().globalData.user_name,
	  orgValue:'',
	  orgArray:[],
	  orgId:'',
	  index: 0,
	  orgList:[]
    };
  },
  onShow() {
  },
  onLoad(){
	 this.getMemberGroup(); 
  },
  methods: {
		  bindPickerChange: function(e) {
			  this.orgValue = this.orgArray[e.target.value].name;
			  this.orgId = this.orgArray[e.target.value].branch_id;
			  this.getMemberList(this.orgId);
		  },
		  change(e) {
			  this.single = e;
			  console.log("-change事件:", e);
		  },
		  getMemberGroup() {
		    let md5Sign = md5(
		      "method=" +"member" + "&timestamp=" + getApp().globalData.globalTimestamp +
		        "&secret=" + getApp().globalData.secret
		    );
		    let url = getApp().globalData.shareUrl +"api/api.php" +
		      "?method=member&action=member_branch&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&sign=" +
		      md5Sign;
		    uni.request({
		      url: url,
		      method: "POST",
		      header: {
		        "content-type": "application/x-www-form-urlencoded",
		      },
		      data: {
		        openid: getApp().globalData.open_id,
		      },
		      success: (res) => {
		        if (res.data.code === 200) {
					this.orgArray = res.data.data;
					if(this.orgArray.length){
						this.orgValue = this.orgArray[0].name;
						this.getMemberList(this.orgArray[0].branch_id)
					}
		        }
		      },
		      fail: () => {
		        console.log("连接失败");
		      },
		    });
		  },
		  getMemberList(branchId) {
		    let md5Sign = md5(
		      "method=" +"member" + "&timestamp=" + getApp().globalData.globalTimestamp +
		        "&secret=" + getApp().globalData.secret
		    );
		    let url = getApp().globalData.shareUrl +"api/api.php" +
		      "?method=member&action=member_by_branch&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&sign=" +
		      md5Sign;
		    uni.request({
		      url: url,
		      method: "POST",
		      header: {
		        "content-type": "application/x-www-form-urlencoded",
		      },
		      data: {
		        openid: getApp().globalData.open_id,
				branch_id:branchId,
		      },
		      success: (res) => {
		        if (res.data.code === 200) {
					this.orgList = res.data.data;
		        }
		      },
		      fail: () => {
		        console.log("连接失败");
		      },
		    });
		  },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  .self-inf {
    // border-radius: 0rpx 0rpx 100% 100%;
    .img-name-box {
		height: 150rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		width: 85%;
      .auth-btn {
		margin-left: 30rpx;
		margin-top: 20rpx;
        font-size: 28rpx;
        background-color: #02a7f0;
        color: #fff;
      }
      .heade-img {
        z-index: 1;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        // margin-left: 80rpx;
      }
    }
    .nickname {
      font-weight: 600;
      font-size: 28rpx;
      margin-left: 30rpx;
      margin-top: 20rpx;
      color: #555;
      letter-spacing: 1rpx;
    }
  }
}
.antu-box {
	display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    margin-left: 5%;
    margin-top: 50rpx;
    border-radius: 10rpx;
    width: 90%;
    color: #555;
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.2);
}
.org-info-box {
    display: flex;
    justify-content: space-evenly;
    height: 80rpx;
    align-items: center;
    width: 100%;
    border-top: 1px solid #d4d4d4;
    color: #555;
    font-size: 28rpx;
    background: #fff;
} 
.org-line {
	width: 1px;
	height: 82rpx;
	background: #d4d4d4;
} 

.active-title-box {
	display: flex;
    align-items: center;
    margin-top: 10rpx;
    font-size: 26rpx;
    height: 100rpx;
    border-bottom: 1px solid #d7d7d7;
    margin-top: 10rpx;
		.time-select-box {
			width: 32%;
			margin-left: 5%;
		}
		picker {
		    width: 30%;
			border: 1px solid #d7d7d7;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
			padding: 0 10rpx;
			position: relative;
			image {
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				top: 11px;
				right: 5px;
			}
		}
		button {
			width: 24%;
			font-size: 25rpx;
			background: #4988fd;
			color: #fff;
			margin-left: 25rpx;
		}
	
	
}
.active-box {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 28rpx;
    padding: 15rpx;
    border-bottom: 1px solid #d7d7d7;
	.active-type {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: yellow;
		text-align: center;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #fff;
	}
	.active-content-box {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
		width: 100%;
	}
	.active-content {
		display: flex;
		align-items: center;
		height: 45rpx;
		font-size: 28rpx;	
		.active-name {
			font-size: 30rpx;
			width: 18%;
		}
		.active-date {
			color: #999;
		}
	}
	.edit-icon-box {
		position: absolute;
		right: 10px;
		top: 10px;
		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;	
		}
	}
	.bg-yellow {
		background-color: #ffdd40;
	}
	.bg-red {
		background-color: #ec808d;
	}
	.bg-blue {
		background-color: #81d3f8;
	}
}
</style>