uni_mattress/sleep/pages/user/shareUser/index.vue

<template>
	<scroll-view :scroll-y="sysScroll" style="height: 100%">

	<view class="flex-col justify-start page">
	  <cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">共享用户</view></cu-custom>
    <scroll-view scroll-x class="nav" style="background-color: #1e1ef7e3">
      <view class="flex text-center text-white">
        <view class="cu-item flex-sub" :class="2===tabCur?'text-orange cur':''" @tap="tabSelect(2)" data-id="2">推送亲友列表</view>
        <view class="cu-item flex-sub" :class="1===tabCur?'text-orange cur':''" @tap="tabSelect(1)" data-id="1">可看亲友列表</view>
      </view>
    </scroll-view>

    <view style="height: 100%">
      <view v-if="2===tabCur" :style="tableData.length === 0 || tableData.length < 4 ? 'height:100%':''" class="flex-col justify-start section">
        <view class="flex-col section_2 space-y-421">
          <view class="flex-col">
            <text class="self-start font_1 text_2">共享用户</text>
            <view class="flex-col group_3 space-y-10">
              <view class="flex-row justify-between items-center section_6" v-for="(item, index) in tableData" :key="index">
                <view class="flex-row">
                  <image v-if="item.face === null || item.face === ''" class="image_6" src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/7F70B5FF967F44BC97BD7CD8786A70B4.png"/>
                  <image v-else class="image_6" :src="item.face"/>
                  <view class="flex-col items-start group_4 space-y-10">
                    <text class="font_1 text_3">{{ item.nickname }}</text>
                    <text class="text_5">{{ item.mobile }}</text>
                    <text class="text_6 text_7">{{ formatTime(item.create_time) }}</text>
                    <view style="margin-left: -90upx" class="text-white">
                      <switch :checked="item.bool_sms" color="#1E09DE" style="transform:scale(0.7)" @change="changeBoosSms" :data-id="item.id" />
                      <text class="font_2">短信提醒</text>
                      <switch :checked="item.bool_voice" color="#1E09DE" style="transform:scale(0.7)" @change="changeBoosVoice" :data-id="item.id"/>
                      <text class="font_2">电话语音</text>
                    </view>
                  </view>

                </view>
                <view class="flex-col justify-start items-center text-wrapper" @click="deleteById(item.id)"><text class="text_4">删除</text></view>

              </view>

<!--              <button style="width: 100%;margin-top: 10upx" class="flex-row justify-center items-center section_7 space-x-10" open-type="share" @click="clickTz(0)">-->
<!--                <image class="image_7" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874414496441492308.png"/>-->
<!--                <text class="text_8">添加推送亲友</text>-->
<!--              </button>-->
              <view class="flex-row justify-center items-center section_7 space-x-10" @click="modalName ='DialogModal'">
                <image class="image_7" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874414496441492308.png"/>
                <text class="text_8">添加推送亲友</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view v-else :style="tableData.length === 0 || tableData.length < 4 ? 'height:100%':''" class="flex-col justify-start section">
        <view class="flex-col section_2 space-y-421">
          <view class="flex-col">
            <text class="self-start font_1 text_2">共享用户</text>
            <view class="flex-col group_3 space-y-10">

              <view class="flex-row justify-between items-center section_6" v-for="(item, index) in tableData" :key="index">
                <view class="flex-row">
                  <image v-if="item.face === null || item.face === ''" class="image_6" src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/7F70B5FF967F44BC97BD7CD8786A70B4.png"/>
                  <image v-else class="image_6" :src="item.face"/>
                  <view class="flex-col items-start group_4 space-y-10">
                    <text class="font_1 text_3">{{ item.nickname }}</text>
                    <text class="text_5">{{ item.mobile }}</text>
                    <text class="text_6 text_7">{{ formatTime(item.create_time) }}</text>
                  </view>
                </view>
                <view class="flex-col justify-start">
                  <view class="text-wrapper2 bg-button margin-bottom">
                    <text class="text_4"  @click="lookReport(item.union_id, item.friend_id)">查看</text>
                  </view>
                  <view class="text-wrapper2 bg-button2 margin-top-xl">
                    <text class="text_4" @click="deleteById(item.id)">取消</text>
                  </view>

                </view>
              </view>

              <view class="flex-row justify-center items-center section_7 space-x-10" @click="modalName ='DialogModal'">
                <image class="image_7" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874414496441492308.png"/>
                <text class="text_8">新增可看亲友</text>
              </view>
<!--              <button style="width: 100%;margin-top: 10upx" class="flex-row justify-center items-center section_7 space-x-10" open-type="share" @click="clickTz(1)">-->
<!--                <image class="image_7" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874414496441492308.png"/>-->
<!--                <text class="text_8">新增可看亲友</text>-->
<!--              </button>-->
            </view>
          </view>
        </view>
      </view>

    </view>



    <view class="cu-modal" :class="modalName ==='DialogModal'?'show':''">

				<view class="cu-dialog">
				  <view class="cu-bar bg-white justify-end">
				    <view style="color: black" class="content">{{ tabCur === 2 ? '添加推送亲友' : '申请查看亲友'}}</view>
				    <view class="action" @tap="hideModal">
				      <text class="cuIcon-close text-red"></text>
				    </view>
				  </view>
				  <view v-if="tabCur !== 2" class="padding-xl">
				    <input @focus="onfoucs" @blur="onblur" v-model="searchPhone" placeholder="请输入对方手机号" name="input" />
				  </view>
          <view v-else class="padding-xl text-sm">
<!--            <text class="text-red text-df">提示：</text><br/>-->
            <text><text class="text-df">绑定自己：</text>自己的电话可以接到报警短信和<text class="text-red">075533318520</text>打来的报警电话</text><br/>
            <text><text class="text-df">微信分享：</text>朋友的电话可以接到报警短信和<text class="text-red">075533318520</text>打来的报警电话</text>
          </view>
				  <view class="cu-bar bg-white justify-end">
            <view v-if="tabCur ===2" class="action">
              <button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
              <button class="cu-btn bg-blue margin-left" @tap="addLookOwn">绑定自己</button>
              <button class="cu-btn bg-green margin-left" open-type="share" @click="clickTz(0)"><text class="cuIcon-weixin"></text>微信分享</button>
            </view>
				    <view v-else class="action">
				      <button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
				      <button class="cu-btn bg-blue margin-left" @tap="addLook">申请查看</button>
<!--				      <button class="cu-btn bg-green margin-left" open-type="share" @click="clickTz(0)"><text class="cuIcon-weixin"></text>微信分享</button>-->
				    </view>
				  </view>
				</view>


		</view>
	</view>
	</scroll-view>

</template>

<script>
import Storage from '@/utils/storage'
import { unixToDate } from '@/ui-utils/Foundation'
import * as API_vitalSignsLook from '@/api/vitalSignsLook'
	export default {
		data() {
			return {
        page_size: 20,
        page_no: 1,
        tableData: [],
        finishedLoad: false,
        uid: '',
        modalName: false,
        searchPhone: '',
        tabCur: 2,
        title: '添加推送亲友',
		bottomVal: '',
		sysScroll: true
			}
		},
    onShow() {
		  this.uid = Storage.getItem('uid')
      if (this.uid) {
        this.sx()
        this.userInfo = Storage.getItem('userInfo')
      }
    },
    onPullDownRefresh() {
      this.sx()
    },
    onReachBottom() {
      if (!this.finishedLoad) {
        this.page_no += 1;
        this.GET_MemberList()
      }
    },
		methods: {
			onfoucs() {
					this.sysScroll = false
			},
			onblur() {
				this.sysScroll = true
			},
      sx() {
        this.page_no = 1
        this.finishedLoad = false
        this.tableData = []
        this.GET_MemberList()
      },
      /** 加载用户列表 */
      GET_MemberList() {
        const params = {
          page_no: this.page_no,
          page_size: this.page_size,
        }
        if (this.tabCur === 1) {
          params.fixedCondition = ' ccll.status=1 and ccll.member_id=' + this.uid + ' and ccll.friend_id = em.member_id'
        } else if (this.tabCur === 2) {
          params.fixedCondition = ' ccll.status=1 and ccll.friend_id=' + this.uid + ' and ccll.member_id = em.member_id'
        }
        let _this = this
        API_vitalSignsLook.getList(params).then(res => {
          console.log('res====', res)
          if (res.data.length > 0) {
            _this.tableData.push(...res.data);
          } else {
            _this.finishedLoad = true;
          }
        }).catch(() => {
          _this.loading = false
        })
      },
      back() {
        uni.navigateBack()
      },
      formatTime(value) {
        return unixToDate(value, '')
      },
      deleteById(id) {
        let _this = this
        uni.showModal({
          title: '警告',
          content: this.tabCur === 2 ? '删除操作后该亲友将不再接收预警消息，是否删除？' : '取消后不能再查看该用户睡眠报告，是否取消？',
          success: function (res) {
            if (res.confirm) {
              API_vitalSignsLook.deleteLogLook(id).then(
                  res => {
                    _this.sx()
                    uni.showToast({
                      title: '已删除!'
                    })
                  }
              )
            }
          }
        })
      },
      hideModal(e) {
        this.modalName = null
      },
      addLook() {
        if (this.searchPhone === '') {
          uni.showModal({
            content: '请输入对方手机号',
            showCancel: false
          })
          return
        }
        let params = {
          member_id: this.uid,
          type: 1,
          add_member_id: this.uid,
          status: 1,
          phone: this.searchPhone
        }
        const _this = this
        API_vitalSignsLook.addByMobile(params).then(res => {
          if (!res.success) {
            uni.showModal({
              content: res.message,
              showCancel: false
            })
          } else {
            uni.showToast({
              title: '操作成功',
              icon: 'none'
            })
            _this.modalName = null
            _this.searchPhone = ''
            _this.sx()
          }
        })
      },
      addLookOwn() {
        let index = this.tableData.findIndex( t => t.member_id === this.uid)
        if (index !== -1) {
          uni.showModal({
            content: '您已经绑定自己了',
            showCancel: false
          })
          return
        }
       let params = {
          memberId: this.uid,
          type: 0,
          bool_sms: 1,
          bool_voice: 1
        }
        API_vitalSignsLook.addByShare(params).then(res => {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          this.modalName = null
          this.searchPhone = ''
          this.sx()
        })
      },
      tabSelect(type) {
        this.tabCur = type
        this.sx()
      },
      changeBoosSms(e) {
        console.log('e==', e)
        const data = {
          bool_sms: e.detail.value
        }
        this.API_update(data, e.currentTarget.dataset.id)
      },
      changeBoosVoice(e) {
        console.log('e==', e)
        const data = {
          bool_voice: e.detail.value
        }
        this.API_update(data, e.currentTarget.dataset.id)
      },

      async API_update(data, id) {
        console.log(data, id)
        await API_vitalSignsLook.editLogLook(data, id)
      },
      clickTz(type) {
        this.modalName = false
        this.lx = type
      },
      lookReport(unionId, uid) {
        uni.navigateTo({
          url: '/pages/log/report/friendRealTime?unionId=' + unionId + '&uid=' + uid
        })
      }
		},
    onShareAppMessage(e) {
      wx.showShareMenu({withShareTicket: true})
      let path = '/pages/tabBar/home?type=VITAL_SHARE&no='+this.uid+'&lx='+this.lx
      let title = ''
      if (this.lx === 0) {
        title = '你的亲友'+this.userInfo.nickname+'邀请您查看他的体征数据，互帮互爱，呵护健康！'
      } else {
        title = '你的亲友'+this.userInfo.nickname+'推荐你使用守护之影小程序，构筑自己的关爱互联圈，从此健康更有保障！'
      }
      let _this = this
      return {
        title: title,
        path: path,
        success: res => { // 转发成功 则关闭弹框 可获取转发信息
          _this.isShow = false
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
.page {
  //background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/2E8800F59CE14717A09884B811B3C608.png");
  background-size: cover ;
  background-attachment: fixed ;
  background-position: center center;

  .section {
    background-image: linear-gradient(180deg, rgba(86, 86, 217, 0.95) 0%, #1dbff79c 100%);
    padding-bottom: 50upx;
    .section_2 {
      .font_1 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 1.06rem;
        color: #ffffff;
      }
      .text_2 {
        margin-left: 1.25rem;
        margin-top: 1.38rem;
      }
      .group_3 {
        margin-top: 0.88rem;
        padding: 0 1.25rem;
        .section_6 {
          padding: 0.94rem 0 0.94rem 0.94rem;
          background-color: #ffffff33;
          border-radius: 1rem;
          .image_6 {
            border-radius: 50%;
            width: 4rem;
            height: 4rem;
          }
          .group_4 {
            margin: 0.25rem 0 0.25rem 1.25rem;
            .text_3 {
              line-height: 1.03rem;
            }
            .text_5 {
              color: #ffffff;
              font-size: 0.88rem;
              font-family: PingFangSC;
              line-height: 0.63rem;
            }
            .text_7 {
              color: #ffffff;
              font-size: 0.63rem;
              font-family: PingFangSC;
              line-height: 0.47rem;
            }
          }
          .text-wrapper {
            padding: 0.25rem 0;
            background-image: linear-gradient(90deg, #2c3ff2 0%, #1e09de 100%);
            border-radius: 6.25rem 0px 0px 6.25rem;
            width: 2.75rem;
            height: 1.50rem;
            text-align: center;
          }
          .text-wrapper2 {
            border-radius: 6.25rem 0px 0px 6.25rem;
            width: 2.75rem;
            height: 1.50rem;
            text-align: center;
          }
          .bg-button {
            background-image: linear-gradient(90deg, #2c3ff2 0%, #1e09de 100%);
          }
          .bg-button2 {
            background-image: linear-gradient(90deg, #339ce2 0%, #077bba 100%);
          }
        }
        .section_7 {
          padding: 2.13rem 0;
          background-color: #ffffff33;
          border-radius: 1rem;
          .image_7 {
            width: 1.5rem;
            height: 1.5rem;
          }
          .text_8 {
            color: #ffffff;
            font-size: 1.5rem;
            font-family: PingFangSC;
            line-height: 1.41rem;
          }
        }
        .space-x-10 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 0.63rem;
          }
        }
      }
      .space-y-10 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.63rem;
        }
      }
      .text_6 {
        opacity: 0.5;
      }
    }
    .space-y-421 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 5rem;
      }
    }
  }
  .text_4 {
    color: #ffffff;
    font-size: 0.75rem;
    font-family: PingFangSC;
    //line-height: 0.69rem;
    padding-bottom: 0.25rem;
  }
}
</style>