uni_mattress/sleep/pages/shareUser/shareUser.vue

<template>
	<view class="flex-col justify-start page">
	  <cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>

	  <view 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>

	          <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 class="flex-row justify-center items-center relative group_5">
	        <view class="flex-col justify-start items-center button"><text class="font_2" @click="back">完成</text></view>
<!--	        <text class="font_2 text_6 pos_2">跳过</text>-->
	      </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 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-green margin-left" @tap="addLook">申请查看</button>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import Storage from '@/utils/storage'
import { unixToDate } from '@/ui-utils/Foundation'
import * as API_vitalSignsLook from '@/api/vitalSignsLook'
import {addByMobile} from "../../api/vitalSignsLook";
	export default {
		data() {
			return {
        page_size: 20,
        page_no: 1,
        tableData: [],
        finishedLoad: false,
        uid: '',
        modalName: false,
        searchPhone: ''
			}
		},
    onShow() {
		  this.uid = Storage.getItem('uid')
      if (this.uid) {
        this.sx()
      }
    },
    onPullDownRefresh() {
      this.sx()
    },
    onReachBottom() {
      if (!this.finishedLoad) {
        this.page_no += 1;
        this.GET_MemberList()
      }
    },
		methods: {
      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,
        }
        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()
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  
  .section {
    // background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/2E8800F59CE14717A09884B811B3C608.png");
    background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png");
	background-size: cover;
    background-repeat: no-repeat;
	height: 100%;
	
    .section_2 {
      background-image: linear-gradient(180deg, #1e1ef7e3 0%, #1dbff59c 100%);
	  height: 100%;
	  
      .section_3 {
        padding: 1.13rem 0.44rem 0.38rem;
        background-color: #ffffff4d;
        .group {
          padding: 0 0.5rem;
          .image {
            width: 1.06rem;
            height: 0.69rem;
          }
          .image_2 {
            width: 0.94rem;
            height: 0.69rem;
          }
          .image_3 {
            width: 1.5rem;
            height: 0.72rem;
          }
        }
        .space-x-6-reverse {
          & > view:not(:last-child),
          & > text:not(:last-child),
          & > image:not(:last-child) {
            margin-right: 0.38rem;
          }
        }
        .group_2 {
          padding: 0.63rem 0 0.38rem;
          .text {
            font-size: 1.16rem;
          }
          .section_4 {
            padding: 0.38rem 0.75rem;
            background-color: #ffffff99;
            border-radius: 1rem;
            border: solid 0.031rem #00000014;
            .image-wrapper {
              width: 1.19rem;
              .image_5 {
                width: 1.19rem;
                height: 0.44rem;
              }
              .image_4 {
                width: 1.13rem;
                height: 1.06rem;
              }
            }
            .section_5 {
              background-color: #00000033;
              width: 0.063rem;
              height: 1.16rem;
            }
          }
          .space-x-11 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-left: 0.69rem;
            }
          }
          .pos {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      .space-y-22 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 1.38rem;
        }
      }
      .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;
        }
      }
      .group_5 {
        padding: 0 1.75rem;
        .button {
          padding: 0.5rem 0;
          background-image: linear-gradient(90deg, #5611f780 0%, #2c3ff7 100%);
          border-radius: 1rem;
          width: 8.69rem;
        }
        .font_2 {
          font-size: 1rem;
          font-family: PingFangSC;
          line-height: 0.94rem;
          color: #ffffff;
        }
        .pos_2 {
          position: absolute;
          right: 1.78rem;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .text_6 {
        opacity: 0.5;
      }
    }
    .space-y-421 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 5rem;
      }
    }
  }
}
</style>