yikangyang-web/src/views/Accompany/components/ShowAccompany.vue

<template>
  <div>
    <el-drawer :title="$route.meta.title" direction="rtl" size="68%" :visible.sync="visible" append-to-body
      @close="$emit('update:isShow',false)">
      <section class="drawer-container">
        <el-descriptions ref="elDesc" class="drawer-container__desc" size="small" border :column="2"
          direction="vertical" :label-style="{ 'font-weight': '500', 'font-size': '15px' }">

          <el-descriptions-item label="产品名称">
            {{ form['name'] }}
          </el-descriptions-item>
          <el-descriptions-item label="产品定价">
            {{ form['price'] }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            {{ form['status'] ? '启用' : '禁用' }}
          </el-descriptions-item>
          <el-descriptions-item label="关联站点">
            <span v-for="item in form['site']" style="display: inline-block;margin-right:5px">{{item.name}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="标题图片">
            <vxe-image :src="form['cover']?form['cover']['url']:''" :width="80"></vxe-image>
          </el-descriptions-item>

          <el-descriptions-item label="产品图集">
            <vxe-image :src="form['images']" :width="80"></vxe-image>
          </el-descriptions-item>
          <el-descriptions-item label="产品简介" :span="2">
            {{ form['introduce'] }}
          </el-descriptions-item>
          <el-descriptions-item label="适用人群" :span="2">
            <div v-html="form['content']"></div>
          </el-descriptions-item>
          <el-descriptions-item label="服务流程" :span="2">
            <div v-html="form['flow_content']"></div>
          </el-descriptions-item>
          <el-descriptions-item label="费用说明" :span="2">
            <div v-html="form['price_content']"></div>
          </el-descriptions-item>
          <el-descriptions-item label="预约须知" :span="2">
            <div v-html="form['appoint_content']"></div>
          </el-descriptions-item>

        </el-descriptions>
      </section>
    </el-drawer>
  </div>
</template>

<script>
  import {
    show
  } from '@/api/accompany/accompany'

  export default {
    name: 'AccompanyShow',
    props: {
      isShow: {
        type: Boolean,
        default: false,
        required: true
      },

      siteType: {
        type: Array,
        default: () => []
      }

    },
    data() {
      return {
        loading: false,
        visible: false,
        form: {
          id: '',
          name: '',
          site_id: '',
          site: '',
          cover_id: '',
          cover: '',
          images: [],
          images_ids: [],
          introduce: '',
          status: 1,
          content: '',
          flow_content: '',
          price_content: '',
          appoint_content: '',
          price: '',
          type: ''
        }
      }
    },
    watch: {
      isShow(newVal) {
        this.visible = newVal
      },
      visible(newVal) {
        this.$emit('update:isShow', newVal)
      }
    },
    methods: {
      async getDetail(id) {
        try {
          const detail = await show({
            id,
            show_relation: ['cover']
          })
          for (const key in this.form) {
            if (detail.hasOwnProperty(key)) {
              this.form[key] = detail[key]
              let arr = []
              if (detail['images'].length > 0) {
                detail['images'].map(item => {
                  arr.push(item.url)
                })
                this.form['images'] = arr
              }
            }
          }
        } catch (err) {
          console.error(err)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .drawer-container {
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;

    &>* {
      flex: 1;
    }
  }
</style>