tuanfeng-pc-admin/src/views/business/businessList/components/DetailModal.vue

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions">
    <el-form ref="formData" :model="formData" size="mini" label-position="left" label-suffix=":" label-width="200px">
      <!-- 商家任务信息 -->
      <el-form-item label="商家ID" prop="shopId">
        {{ formData.shopId || '--' }}
      </el-form-item>
      <el-form-item label="店铺名称" prop="shopName">
        {{ formData.shopName || '--' }}
      </el-form-item>
      <el-form-item label="支持的支付类型" prop="payType">
        <span v-if="formData.payType === 9">惠市宝</span>
        <span v-else-if="formData.payType === 4">通联</span>
        <span v-else-if="formData.payType === 0">无</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="是否支持代金券" prop="isVoucher">
        <span v-if="formData.isVoucher === 1">允许</span>
        <span v-else-if="formData.isVoucher === 2">拒绝</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="请输入代金券返还比例" prop="voucherReturn">
        {{ formData.voucherReturn || '--' }}%
      </el-form-item>
      <el-form-item label="代金券提现比例" prop="voucherCoinRatio">
        {{ formData.voucherCoinRatio || '--' }}
      </el-form-item>
      <el-form-item label="是否支持消费金" prop="isBeeCoin">
        <span v-if="formData.isBeeCoin === 1">支持</span>
        <span v-else-if="formData.isBeeCoin === 2">不支持</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="商家消费金提现比例" prop="beeCoinRatio">
        {{ formData.beeCoinRatio || '--' }}
      </el-form-item>
      <el-form-item label="店铺负责人" prop="chargePersonName">
        {{ formData.chargePersonName || '--' }}
      </el-form-item>
      <el-form-item label="负责人电话" prop="chargePersonPhone">
        {{ formData.chargePersonPhone || '--' }}
      </el-form-item>
      <el-form-item label="区域ID" prop="areaId">
        {{ formData.areaId || '--' }}
      </el-form-item>
      <el-form-item label="官方分类名">
        <span v-if="categoryList && categoryList.length">{{ getCategoryItem() && getCategoryItem().storeName }}</span>
      </el-form-item>
      <el-form-item label="店铺地址" prop="shopAdress">
        {{ formData.shopAdress || '--' }}
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        {{ formData.longitude || '--' }}
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        {{ formData.latitude || '--' }}
      </el-form-item>
      <el-form-item label="生效日期" prop="effectiveDate">
        {{ formData.effectiveDate || '--' }}
      </el-form-item>
      <el-form-item label="生效年限" prop="effectiveYear">
        {{ formData.effectiveYear || '--' }}
      </el-form-item>
      <el-form-item label="合同状态" prop="contractState">
        <span v-if="formData.contractState === 0">无效</span>
        <span v-else-if="formData.contractState === 1">有效</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="店铺类型" prop="shopType">
        <span v-if="formData.shopType === 1">品牌厂家</span>
        <span v-else-if="formData.shopType === 2">本地</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="营业开始时间" prop="startTime">
        {{ formData.startTime || '--' }}
      </el-form-item>
      <el-form-item label="营业结束时间" prop="endTime">
        {{ formData.endTime || '--' }}
      </el-form-item>
      <el-form-item label="店铺类型" prop="shopType">
        <span v-if="formData.shopType === 1">品牌厂家</span>
        <span v-else-if="formData.shopType === 2">本地</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="惠市宝商家编号" prop="hsbMrchId">
        {{ formData.hsbMrchId || '--' }}
      </el-form-item>
      <el-form-item label="直播间审核" prop="auditLive">
        <span v-if="formData.auditLive === 0">关闭</span>
        <span v-else-if="formData.auditLive === 1">开启</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="直播间商品审核" prop="auditLiveProduct">
        <span v-if="formData.auditLiveProduct === 0">关闭</span>
        <span v-else-if="formData.auditLiveProduct === 1">开启</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="评分" prop="score">
        {{ formData.score || '--' }}
      </el-form-item>
      <el-form-item label="商家月售额" prop="monthlySales">
        {{ formData.monthlySales || '--' }}
      </el-form-item>
      <el-form-item label="人均消费额" prop="perCapita">
        {{ formData.perCapita || '--' }}
      </el-form-item>
      <el-form-item label="商家简介" prop="shopBrief">
        {{ formData.shopBrief || '--' }}
      </el-form-item>
      <el-form-item label="广告图" prop="advertisement">
        <div v-if="formData.advertisement && formData.advertisement.length">
          <el-image
            v-for="(item, index) in formData.advertisement" :key="index" :src="item"
            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
            :preview-src-list="formData.advertisement"
          />
        </div>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="账号" prop="shopPhone">
        {{ formData.shopPhone || '--' }}
      </el-form-item>
      <el-form-item label="密码" prop="shopPassword">
        {{ formData.shopPassword || '--' }}
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        {{ formData.createTime || '--' }}
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { businessListGetById, businessClassList } from '@/api/business'
import XeUtils from 'xe-utils'

export default {
  name: 'DetailModal',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '查看商家详情'
      },
      visible: false,
      formData: {
        shopId: '',
        shopName: '', // 店铺名称
        voucherCoinRatio: '', // 代金券提现比例
        isBeeCoin: '', // 是否支持消费金
        beeCoinRatio: '', // 商家消费金提现比例
        chargePersonName: '', // 店铺负责人
        chargePersonPhone: '', // 负责人电话
        shopAdress: '', // 地址
        effectiveDate: '', // 生效日期
        effectiveYear: '', // 生效年限
        shopType: 2, // 商家类型 1 商家 2 本地
        payType: 0, // 支付类型
        isVoucher: 1, // 是否支持代金卷 1 true 2 false
        voucherReturn: '',
        contractState: 1, // 合同状态 1-有效 0-无效
        auditLive: 1,
        auditLiveProduct: 1,
        shopPhone: '', // 账号
        shopPassword: '', // 密码
        perCapita: '', // 人均
        score: '', // 评分
        advertisement: [], // 广告图
        areaId: '', // 区域id
        hsbMrchId: '', // 惠市宝商家编号，不是必填
        longitude: '', // 经纬度
        latitude: '', // 经纬度
        classificationId: '', // 商家分类id
        classificationName: '', // 非后端参数
        startTime: '',
        endTime: '',
        shopBrief: '', // 商家简介
        monthlySales: '',
        createTime: ''
      },
      categoryList: []
    }
  },
  created() {
    this.getCategoryTreeList()
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    async getCategoryTreeList() {
      const res = await businessClassList({ page: 1, pageSize: 9999 })
      XeUtils.eachTree(res.data.records, (item) => {
        if (Array.isArray(item.childs) && item.childs.length === 0) {
          item.childs = undefined
        }
      }, { children: 'childs' })
      this.categoryList = res.data.records
    },
    getCategoryItem() {
      const { classificationId } = this.formData
      const categoryItem = XeUtils.findTree(this.categoryList, (item) => item.id === classificationId)
      return categoryItem ? categoryItem.item : {}
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params, {
        advertisement: params.advertisement ? params.advertisement.split(',') : []
      })
      if (params.shopId) {
        this.getInfo(params.shopId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await businessListGetById({ shopId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          shopId: res.data.shopId || '',
          advertisement: res.data.advertisement ? res.data.advertisement.split(',') : []
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>