4dkk_mp/src/views/account/overview/index.vue

<template>
  <div class="info">
    <div class="infodetail">
      <div class="title">基本信息</div>
      <div class="list" v-if="overviewInfo">
          <div class="list_item" v-for="item in refundSchema" :key="item.field">
            <div class="lable">{{item.label}}</div>
            <div class="value">
              <Icon icon="icon-park-outline:vip-one" :style="`color:${overviewInfo[item.field] == 1?'#d3d334':''}`" v-if="item.field == 'vip'" />
              <span v-else>{{overviewInfo[item.field]}}</span>
            </div>
          </div>
      </div>
    </div>
    <a-divider />
    <div class="infodetail">
      <div class="title">硬件产品</div>
      <div class="list">
          <div class="list_item">
            <div class="lable">相机数量</div>
            <div class="value">
              <div class="text">{{overviewInfo.cameraCount}}台</div>              
              <Button type="primary" size="small" v-if="getCheckPerm('account-cameraDetails')" @click="openCaremModal(true)"> 查看详情 </Button>
            </div>
          </div>
          <div class="list_item">
            <div class="lable">场景数量</div>
            <div class="value">
              <div class="text">{{overviewInfo.sceneNum}}个</div>              
            </div>
          </div>
      </div>
    </div>
    <a-divider />
    <div class="infodetail">
      <div class="title">软件服务</div>
      <div class="list" v-if="overviewInfo">
          <div class="list_item">
            <div class="lable">四维看看</div>
            <div class="value">
              <div class="text">专业会员 {{overviewInfo.incrementCount}}个</div>              
              <Button type="primary" v-if="getCheckPerm('account-equityDetails')" size="small" @click="openInteresModal(true,{})"> 权益详情 </Button>
              <Button type="primary" v-if="getCheckPerm('increment-add')" size="small" @click="handleAddEquity('equity')"> 新增权益 </Button>
            </div>
          </div>
          <div class="list_item">
            <div class="lable"></div>
            <div class="value">
              <div class="text">下载次数 {{overviewInfo.surDownNum}}次</div>              
              <Button type="primary" size="small" v-if="getCheckPerm('download-add')" @click="handleaddDown('0')"> 新增下载 </Button>
            </div>
          </div>
          
          <div class="list_item">
            <div class="lable">四维深时</div>
            <div class="value">
              <div class="text">下载次数 {{overviewInfo.surSSDownNum}}次</div>              
              <Button type="primary" size="small" v-if="getCheckPerm('download-add')" @click="handleaddDown('1')"> 新增下载 </Button>
            </div>
          </div>
      </div>
    </div>
    <a-divider />
    <AddModal @register="registerAddModal" />
    <AddDownModal @register="registerAddDowmModal" />
    <interesModal @register="registerInteres" />
    <caremModal @register="registerCarem" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { Description } from '/@/components/Description/index';
  import { BasicTable } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Icon } from '/@/components/Icon';
  import { Divider, Button } from 'ant-design-vue';
  import { otherInfoStore } from '/@/store/modules/other';
  import AddModal from './AddModal.vue';
  import AddDownModal from './AddDownModal.vue';
  import caremModal from './caremModal.vue';
  import interesModal from './interesModal.vue';
  import { useModal } from '/@/components/Modal';
  import { usePermissionStore } from '/@/store/modules/permission';

  import {
    refundSchema,
    refundData,
    personSchema,
    personData,
  } from './data';
  export default defineComponent({
    components: { Icon, Button,interesModal, Description, AddModal, AddDownModal, caremModal,  BasicTable, PageWrapper, [Divider.name]: Divider },
    setup() {
      const otherInfo = otherInfoStore();
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const [registerAddDowmModal, { openModal: openAddDowmModal }] = useModal();
      const [registerInteres, { openModal: openInteresModal }] = useModal();
      const [registerCarem, { openModal: openCaremModal }] = useModal();
      const overviewInfo = computed(() => otherInfo.getOverviewInfo);
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      function handleaddDown(type: string) {
        openAddDowmModal(true, {
          ...overviewInfo.value,
          type: type,
        });
      }
      function handleAddEquity(type: string) {
        console.log('type', type);
        if(type == 'down'){
          openAddDowmModal(true, {
          ...overviewInfo.value,
          type,
        });
        }else{
          openAddModal(true, {
          type,
          userId:overviewInfo.value.id,
        });
        }
      }
      function handleSetEquity(){
        openInteresModal(true, {
          ...overviewInfo.value,
        });
      }
      return {
        registerAddModal,
        registerInteres,
        registerAddDowmModal,
        registerCarem,
        openAddModal,
        openInteresModal,
        openCaremModal,
        refundSchema,
        refundData,
        personSchema,
        personData,
        overviewInfo,
        handleAddEquity,
        handleaddDown,
        handleSetEquity,
        getCheckPerm,
      };
    },
  });
</script>
<style lang="less" scoped>
  .info{
    margin: 16px;
    background-color: #fff;
    padding: 12px 10px 6px;
    .title{
      min-height: 48px;
      margin-bottom: -1px;
      padding: 0 24px;
      color: #000000d9;
      font-weight: 500;
      font-size: 16px;
      background: transparent;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 2px 2px 0 0;
    }
    .list{
      padding: 0 24px;
      .list_item{
        display: flex;
        padding-top: 12px;
        .lable{
          width: 100px;
          text-align: right;
          margin-right: 20px;
        }
        .value{
          .ant-btn{
            margin-right: 30px;
          }
          .text{
            width: 130px;
            display: inline-block;
          }
        }
      }
    }
  }
  .desc-wrap {
    padding: 16px;
    background-color: @component-background;
  }
</style>