xuexiaole-mobile/src/pages/home/bindDevice/bindChildAccount.vue

<template>
  <view>
    <view class="userInfo">
      <image
        class="headIcon"
        :src="infoData?.initiatingUserAvatar || `${OSS_URL}/urm/bindDevice/gling.png`"
        mode="scaleToFill"
      />
      <text class="name">{{ infoData?.initiatingUserName }}</text>
      <text class="phone"></text>
      <text class="info">( {{ infoData?.initiatingUserPhone }} )</text>
      <view class="tip">申请绑定{{ infoData?.bindType === 0 ? '设备' : '孩子' }}</view>
    </view>
    <!-- 设备信息 -->
    <view v-if="infoData?.bindType === 0" class="reminder">
      <view class="title">设备信息</view>
      <view class="serialNumber">
        <text class="xlh">序列号：</text>
        <text class="">{{ infoData?.simSerialNumber }}</text>
      </view>
    </view>
    <view v-else class="reminder">
      <view class="title">亲子关系</view>
      <view class="relationship">
        <view class="user">
          <image
            :src="infoData?.childUserAvatar || `${OSS_URL}/urm/bindDevice/baba.png`"
            mode="scaleToFill"
          />
          <text class="accountNumber">{{ infoData?.childUserName }}</text>
        </view>
        <image class="gling" :src="`${OSS_URL}/urm/bindDevice/gling.png`" mode="scaleToFill" />
        <template v-for="i in useRelation" :key="i.id">
          <view v-if="infoData?.identityType && i.id === infoData?.identityType" class="user">
            <image :src="i.icon" mode="scaleToFill" class="avatar" />
            <text class="accountNumber">{{ i.name }}</text>
          </view>
        </template>
      </view>
    </view>
    <template v-if="infoData?.bindFlag === 0">
      <view class="btn sub" @click="subFun(true)"> 同意 </view>
      <view class="btn Rejected" @click="subFun(false)"> 拒绝 </view>
    </template>
    <template v-if="infoData?.bindFlag === 1">
      <view class="btn disabled_btn"> 已同意 </view>
    </template>
    <template v-if="infoData?.bindFlag === 2">
      <view class="btn disabled_btn"> 已拒绝 </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { applyInfo, adminApproval } from '@/api';
import type { applyInfoType } from './index';
import { useRelation, debounce } from '@/hooks';

const OSS_URL = import.meta.env.VITE_OSS_HOST;

const infoData = ref<applyInfoType>();

function getApplyInfo(e) {
  try {
    uni.showLoading({ title: '加载中...' });
    applyInfo({
      id: e,
    }).then(res => {
      infoData.value = res;
    });
  } finally {
    uni.hideLoading();
  }
}
async function handleBtnFn(e: boolean) {
  adminApproval({
    approvalFlag: e,
    id: infoData.value.id,
  })
    .then(async res => {
      uni.showToast({
        title: '提交成功！',
        icon: 'success',
      });
      await getApplyInfo(infoData.value.id);
    })
    .catch(err => {
      console.log('err', err);
    });
}
const subFun = debounce(handleBtnFn, 500);

onLoad(async option => {
  await getApplyInfo(option.id);
});
</script>

<style lang="scss" scoped>
.userInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .headIcon {
    width: 120upx;
    height: 120upx;
    border-radius: 50%;
    margin-top: 50upx;
  }
  .name {
    font-size: 32upx;
    color: rgba(51, 51, 51, 1);
    margin-top: 20upx;
  }
  .info {
    margin-top: 10upx;
    font-size: 28upx;
    color: rgba(169, 170, 181, 1);
  }

  .tip {
    margin-top: 30upx;
  }
}

.reminder {
  width: 690upx;
  margin-left: 30upx;
  border-radius: 20upx;
  background-color: #fff;
  padding: 30upx 40upx;
  box-sizing: border-box;
  margin-top: 50upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .relationship {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .user {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 30upx;

      image {
        width: 100upx;
        height: 100upx;
      }
      .accountNumber {
        margin-top: 20upx;
        font-size: 30upx;
        color: rgba(102, 102, 102, 1);
      }
    }

    .gling {
      width: 40upx;
      height: 8upx;
    }
  }

  .serialNumber {
    display: flex;
    width: 100%;
    // align-items: center;
    margin-top: 30upx;
    font-size: 28upx;
    .xlh {
      color: rgba(134, 134, 134, 1);
    }
  }
}
.btn {
  width: 690upx;
  height: 90upx;
  border-radius: 20upx;
  font-size: 30upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30upx;
}

.sub {
  color: #fff;
  margin-top: 120upx;
  background-color: rgba(97, 93, 255, 1);
}

.Rejected {
  color: rgba(97, 93, 255, 1);
  margin-top: 40upx;
  background-color: rgba(232, 232, 250, 1);
}
.disabled_btn {
  color: rgba(169, 170, 181, 0.76);
  margin-top: 40upx;
  background-color: rgba(226, 226, 231, 1);
}
</style>