|
|
@@ -0,0 +1,282 @@
|
|
|
+<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"
|
|
|
+ />
|
|
|
+ <table-dialog
|
|
|
+ ref="adDialog"
|
|
|
+ title="上播内容"
|
|
|
+ :schema="adSchema"
|
|
|
+ />
|
|
|
+ <preview-dialog ref="previewDialog" />
|
|
|
+ </wrapper>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ State,
|
|
|
+ AssetType,
|
|
|
+ AssetTypeInfo
|
|
|
+} from '@/constant'
|
|
|
+import {
|
|
|
+ parseByte,
|
|
|
+ parseDuration
|
|
|
+} 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: 'fileType', type: 'refresh', width: 80 },
|
|
|
+ { 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,
|
|
|
+ listeners: { 'row-click': this.onToggle },
|
|
|
+ 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: {
|
|
|
+ list: this.getSources,
|
|
|
+ cols: [
|
|
|
+ { prop: 'fileType', label: '文件', width: 100, align: 'center' },
|
|
|
+ { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
|
|
|
+ { 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 ({ keyName, type, size, duration, width, height, thumb, status, reason, createTime }) {
|
|
|
+ const isImage = type === AssetType.IMAGE
|
|
|
+ return {
|
|
|
+ keyName,
|
|
|
+ fileType: AssetTypeInfo[type],
|
|
|
+ file: {
|
|
|
+ type,
|
|
|
+ url: keyName,
|
|
|
+ thumb: isImage ? keyName : thumb,
|
|
|
+ origin: !isImage
|
|
|
+ },
|
|
|
+ ratio: width && height ? `${width}x${height}` : '-',
|
|
|
+ size: parseByte(size),
|
|
|
+ diff: parseDuration(duration),
|
|
|
+ statusTag: {
|
|
|
+ type: ['', 'primay', 'success', 'danger'][status],
|
|
|
+ label: ['-', '待审核', '通过', '驳回'][status],
|
|
|
+ msg: status === State.REJECTED ? reason : ''
|
|
|
+ },
|
|
|
+ createTime
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ getSources () {
|
|
|
+ const sources = this.$order.assets
|
|
|
+ return Promise.resolve({
|
|
|
+ data: sources.map(this.transformSource),
|
|
|
+ totalCount: sources.length
|
|
|
+ })
|
|
|
+ },
|
|
|
+ transformSource ({ keyName, type, adDuration, thumb, status, reason }) {
|
|
|
+ const isImage = type === AssetType.IMAGE
|
|
|
+ return type
|
|
|
+ ? {
|
|
|
+ fileType: AssetTypeInfo[type],
|
|
|
+ file: {
|
|
|
+ type,
|
|
|
+ url: keyName,
|
|
|
+ thumb: isImage ? keyName : thumb,
|
|
|
+ origin: !isImage
|
|
|
+ },
|
|
|
+ adDuration: parseDuration(adDuration),
|
|
|
+ statusTag: {
|
|
|
+ type: ['', 'primay', 'success', 'danger'][status],
|
|
|
+ label: ['-', '待审核', '通过', '驳回'][status],
|
|
|
+ msg: status === State.REJECTED ? reason : ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ fileType: '素材已删除',
|
|
|
+ adDuration: parseDuration(adDuration)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onViewAsset ({ file }) {
|
|
|
+ this.$refs.previewDialog.show(file)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
Casper Dai