smsb-web-rz/src/views/ad/applet/user/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <table-dialog
      ref="assetDialog"
      title="个人媒资"
      size="lg"
      :schema="assetSchema"
    />
    <table-dialog
      ref="orderDialog"
      title="个人订单"
      size="lg"
      :schema="orderSchema"
      @row-click="onToggle"
    />
    <table-dialog
      ref="adDialog"
      title="上播内容"
      :schema="adSchema"
    />
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

<script>
import { State } from '@/constant'
import {
  parseByte,
  parseDuration,
  transformOrderAssetToAsset
} from '@/utils'
import {
  getUsers,
  getAssets,
  getOrders
} from '../api'

export default {
  name: 'AdAssetReview',
  data () {
    return {
      schema: {
        list: getUsers,
        transform: this.transform,
        filters: [
          { key: 'phoneNumber', type: 'search', placeholder: '手机号' }
        ],
        cols: [
          { prop: 'file', type: 'asset', refresh: true },
          { prop: 'nickName', label: '昵称' },
          { prop: 'phoneNumber', label: '手机号', align: 'center', 'min-width': 120 },
          { type: 'invoke', render: [
            { label: '媒资', on: this.onAsset },
            { label: '订单', on: this.onOrder }
          ] }
        ]
      },
      assetSchema: {
        list: this.getAssets,
        transform: this.transformAsset,
        filters: [
          { key: 'status', type: 'select', placeholder: '状态', options: [
            { value: State.SUBMITTED, label: '待审核' },
            { value: State.RESOLVED, label: '通过' },
            { value: State.REJECTED, label: '驳回' }
          ] }
        ],
        cols: [
          { prop: 'typeInfo', type: 'refresh', width: 72, align: 'center' },
          { prop: 'file', label: '资源', type: 'asset', on: this.onViewAsset },
          { prop: 'size', label: '文件大小', align: 'right' },
          { prop: 'ratio', label: '分辨率', align: 'right' },
          { prop: 'diff', label: '其他', align: 'right' },
          { prop: 'statusTag', type: 'tag' },
          { prop: 'createTime', label: '上传时间', align: 'right', 'min-width': 120 },
          { type: 'invoke', render: [
            { label: '查看', allow: ({ file }) => !!file, on: this.onViewAsset }
          ] }
        ]
      },
      orderSchema: {
        list: this.getOrders,
        transform: this.transformOrder,
        filters: [
          { key: 'status', type: 'select', placeholder: '订单状态', options: [
            { value: 1, label: '待审核' },
            { value: 2, label: '通过' },
            { value: 3, label: '驳回' },
            { value: 4, label: '待支付' },
            { value: 5, label: '已过期' }
          ] }
        ],
        cols: [
          { type: 'expand', refresh: true, render: (data, h) => h('div', {
            staticClass: 'o-info'
          }, [
            h('div', null, `时段：${data.range}`),
            h('div', null, `频率：${data.freq}`)
          ]) },
          { prop: 'deviceName', label: '设备', 'min-width': 100 },
          { prop: 'startDate', label: '上刊日期', align: 'right', 'min-width': 100 },
          { prop: 'price', label: '总价(元)', 'min-width': 100, align: 'right' },
          { prop: 'statusTag', type: 'tag' },
          { prop: 'createTime', label: '提交时间', align: 'right', 'min-width': 120 },
          { prop: 'auditTime', label: '审核时间', align: 'right', 'min-width': 120 },
          { type: 'invoke', render: [
            { label: '上播内容', on: this.onViewOrderAssets }
          ] }
        ]
      },
      adSchema: {
        nonPagination: true,
        list: this.getOrderAssets,
        cols: [
          { prop: 'typeInfo', label: '资源', width: 72, align: 'center' },
          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
          { prop: 'ratio', label: '分辨率', align: 'right' },
          { prop: 'adDuration', label: '上播时长', align: 'center' },
          { prop: 'statusTag', type: 'tag' },
          { type: 'invoke', render: [
            { label: '查看', allow: ({ file }) => !!file, on: this.onViewAsset }
          ] }
        ]
      }
    }
  },
  methods: {
    transform ({ openid, avatarUrl, nickName, phoneNumber }) {
      return {
        openid,
        file: avatarUrl && /^http/.test(avatarUrl)
          ? {
            net: true,
            thumb: avatarUrl
          }
          : null,
        nickName,
        phoneNumber
      }
    },
    getAssets (params) {
      return getAssets({
        openid: this.$openid,
        ...params
      })
    },
    transformAsset (asset) {
      const data = transformOrderAssetToAsset(asset)
      if (data.file) {
        const { width, height, status, reason, size, duration, createTime } = asset
        data.ratio = width && height ? `${width}x${height}` : '-'
        data.statusTag = {
          type: ['', 'primay', 'success', 'danger'][status],
          label: ['-', '待审核', '通过', '驳回'][status],
          msg: reason
        }
        data.size = parseByte(size)
        data.diff = parseDuration(duration)
        data.createTime = createTime
      }
      return data
    },
    onAsset ({ openid }) {
      this.$openid = openid
      this.$refs.assetDialog.show()
    },
    getOrders (params) {
      return getOrders({
        openid: this.$openid,
        ...params
      })
    },
    onOrder ({ openid }) {
      this.$openid = openid
      this.$refs.orderDialog.show()
    },
    transformOrder ({ id, price, status, expand, orders, assets, createTime, auditTime }) {
      const { startDate, startTime, endTime, day, duration, count } = orders[0]
      return {
        id,
        deviceName: orders[0].name,
        startDate,
        range: `${startTime}-${endTime}`,
        price: (price / 100).toFixed(2),
        freq: `${day}天 x ${duration}秒 x ${count}次`,
        statusTag: this.getOrderTag(status, expand),
        assets,
        createTime,
        auditTime
      }
    },
    getOrderTag (status, expand) {
      switch (status) {
        case 1:
          return {
            type: 'primay',
            label: '待审核'
          }
        case 2:
          return {
            type: 'success',
            label: '通过'
          }
        case 3:
          return {
            type: 'danger',
            label: '驳回',
            msg: expand
          }
        case 4:
          return {
            type: 'warning',
            label: '待支付'
          }
        case 5:
          return {
            type: 'danger',
            label: '已过期'
          }
        default:
          return null
      }
    },
    onToggle (row) {
      this.$refs.orderDialog.getTable().getInst().toggleRowExpansion(row)
    },
    onViewOrderAssets (order) {
      this.$order = order
      this.$refs.adDialog.show()
    },
    getOrderAssets () {
      return Promise.resolve({ data: this.$order.assets.map(this.transformAsset) })
    },
    onViewAsset ({ file }) {
      this.$refs.previewDialog.show(file)
    }
  }
}
</script>