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

<template>
	<scroll-view :scroll-y="sysScroll">
	
	<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="flex-grow: 1;">
      <view v-if="2===tabCur" style="height: 100%;background-image: linear-gradient(180deg, rgba(86, 86, 217, 0.95) 0%, #1dbff79c 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>

              <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 ? '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 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(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">共享用户</view>
				    <view class="action" @tap="hideModal">
				      <text class="cuIcon-close text-red"></text>
				    </view>
				  </view>
				  <view class="padding-xl">
				    <input 
						@focus="onfoucs"
						@blur="onblur"
						v-model="searchPhone" 
						placeholder="请输入对方手机号" 
						name="input" />
				  </view>
				  <view class="cu-bar bg-white justify-end">
				    <view 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: '删除操作后数据不可复原，您确定要删除此数据？',
          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 = {
          friend_id: this.uid,
          type: 0,
          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()
          }
        })
      },
      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
      }
		},
    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+'推荐你使用UU守护小程序，构筑自己的关爱互联圈，从此健康更有保障！'
      }
      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.25rem;
            .text_4 {
              color: #ffffff;
              font-size: 0.75rem;
              font-family: PingFangSC;
              line-height: 0.69rem;
            }
          }
        }
        .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;
      }
    }
  }
}
</style>