yanyuan/src/pagesProject/project/components/ConfigInfo/ConfigInfo.vue

<template>
  <scroll-view class="h-full" :scroll-y="true">
    <view class="pt-2">
      <view class="px-3 bg-white">
        <view v-for="(item, index) in itemList" :key="index" :style="headStyle" class="py-3">
          <!-- 头部 -->
          <view class="w-full flex flex-row items-center justify-between">
            <view class="flex flex-1 items-center" @click="changeOpen(index)">
              <img class="w-5 h-5 mr-2" :src="item.img" alt="" />
              {{ item.head }}
              <u-badge
                type="error"
                :count="remindNum"
                size="mini"
                class="relative"
                style="top: -25px; right: -25px"
                v-if="remindNum && index === 3"
              ></u-badge>
            </view>
            <view class="flex flex-row">
              <view v-if="index === 0 && personalInfo && personalInfo.userName" class="text-gray-400 mr-2" @click="changeOpen(index)">
                {{ personalInfo.userName }}
              </view>
              <view v-if="index === 1 || index === 2" class="mr-4">
                <u-icon name="plus" @click="add(index)"></u-icon>
              </view>
              <u-icon name="arrow-up" v-if="item.open" @click="changeOpen(index)"></u-icon>
              <u-icon name="arrow-down" v-else @click="changeOpen(index)"></u-icon>
            </view>
          </view>
          <!-- 内容区 -->
          <view v-if="item.open" class="w-full mt-3">
            <view style="border: 1px solid #e5e5e5" v-if="index === 0">
              <Info @showToast="showToast" :personalInfo="personalInfo" :isEdit="true" />
            </view>
            <Medicine @showToast="showToast" ref="medicineChild" v-if="index === 1" />
            <Caregiver @showToast="showToast" ref="caregiverChild" v-if="index === 2" />
            <Family @showToast="showToast" v-if="index === 3" />
          </view>
        </view>
      </view>
      <view class="py-6 flex flex-col text-center">
        <img class="mx-auto weixin-png" src="https://www.tall.wiki/staticrec/yanyuan/weixin.png" />
        <view class="mt-2" style="color: #999">扫码添加客服微信</view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </scroll-view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import Medicine from './components/Medicine.vue';
import Caregiver from './components/Caregiver.vue';
import Family from './components/Family.vue';

export default {
  name: 'ConfigInfo',
  components: { Medicine, Caregiver, Family },

  data() {
    return {
      itemList: [
        { head: '长者信息', open: true, img: 'https://www.tall.wiki/staticrec/yanyuan/menu1.png' },
        { head: '药物使用记录', open: false, img: 'https://www.tall.wiki/staticrec/yanyuan/menu2.png' },
        { head: 'Zarit照顾者负担量表', open: false, img: 'https://www.tall.wiki/staticrec/yanyuan/menu3.png' },
        { head: '家属成员', open: false, img: 'https://www.tall.wiki/staticrec/yanyuan/menu4.png' },
      ],
      headStyle: {
        borderBottom: '1px solid #f8f8f8',
        fontSize: '16px',
        width: '100%',
      },
      personalInfo: null,
    };
  },

  computed: {
    ...mapGetters('project', ['projectId']),
    ...mapState('role', ['remindNum']),
  },

  async created() {
    await this.handlePersonalInfo();
  },

  mounted() {
    if (this.remindNum > 0) {
      this.itemList.forEach((item, i) => {
        if (i === 3) {
          item.open = true;
        } else {
          item.open = false;
        }
      });
    }
  },

  destroyed() {
    this.$t.ui.hideLoading();
  },

  methods: {
    ...mapActions('yanyuan', ['getPersonalInfo']),

    // 切换手风琴
    changeOpen(index) {
      this.itemList.forEach((item, i) => {
        if (i === index) {
          item.open = !item.open;
          if (index === 0 && item.open) {
            this.handlePersonalInfo();
          }
        } else {
          item.open = false;
        }
      });
    },

    // 成功弹框
    showToast(type, title, icon) {
      this.$refs.uToast.show({
        type,
        title,
        icon,
      });
    },

    // 添加
    add(index) {
      if (index === 1) {
        if (this.itemList[index].open) {
          this.$refs.medicineChild[0].add();
        }
      }
      if (index === 2) {
        if (this.itemList[index].open) {
          this.$refs.caregiverChild[0].add();
        }
      }
    },

    /**
     * 查询个人信息
     */
    async handlePersonalInfo() {
      try {
        this.$t.ui.showLoading();
        const params = { projectId: this.projectId };
        const data = await this.$u.api.queryTrainee(params);
        this.personalInfo = data;
        this.$t.ui.hideLoading();
      } catch (error) {
        this.$t.ui.hideLoading();
        console.error('error: ', error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.weixin-png {
  width: 120px;
  height: 120px;
}
</style>