feat(ad): some commercial attributes

src/views/external/box/settings/api.js

@@ -1,5 +1,8 @@
 import request from '@/utils/request'
-import { update } from '@/api/base'
+import {
+  update,
+  add
+} from '@/api/base'
 
 export function getAttributes (deviceId) {
   return request({
@@ -34,3 +37,17 @@ export function updateAdAttributes (deviceId, attributes) {
     }
   })
 }
+
+export function bindFileToAttributes (id, file) {
+  const formData = new FormData()
+  formData.append('id', id)
+  formData.append('name', 'picUpload')
+  formData.append('file', file)
+
+  return add({
+    url: '/contract/enclosure/upload',
+    method: 'POST',
+    data: formData,
+    timeout: 0
+  })
+}

src/views/external/box/settings/components/AdConfigDialog.vue

@@ -42,14 +42,97 @@
         :max="1000000000"
         step-strictly
       />
+      <span class="c-grid-form__label">类型</span>
+      <el-select
+        v-model="attributes.tag"
+        class="u-width--sm"
+      >
+        <el-option
+          v-for="option in tagOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+      <span class="c-grid-form__label">简介</span>
+      <el-input
+        v-model.trim="attributes.introduce"
+        class="u-width--lg"
+        type="textarea"
+        :rows="3"
+      />
+      <span class="c-grid-form__label">简介图片</span>
+      <div class="l-flex--row">
+        <div
+          v-for="(file, index) in files"
+          :key="index"
+          class="l-flex--row c-sibling-item u-relative"
+        >
+          <img
+            class="c-media"
+            :src="file.url"
+          >
+          <i
+            class="l-flex__none c-media__del el-icon-delete has-active"
+            @click="onDelFile(file, index)"
+          />
+        </div>
+        <div
+          v-show="files.length < 3"
+          class="c-sibling-item c-media add u-pointer"
+          @click="onSelect"
+        >
+          <i class="el-icon-plus" />
+        </div>
+        <!-- <el-upload
+          ref="upload"
+          class="c-config-dialog__upload"
+          action="none"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onChange"
+        >
+          <button class="c-sibling-item o-button">
+            上传 <i class="el-icon-upload el-icon--right" />
+          </button>
+        </el-upload> -->
+      </div>
+      <span class="c-grid-form__label">日均观看人次</span>
+      <el-input
+        v-model.trim="attributes.dailyFlow"
+        class="u-width"
+      />
+      <span class="c-grid-form__label">男女比(%)</span>
+      <el-input
+        v-model.trim="attributes.gendeRatio"
+        class="u-width"
+      />
+      <span class="c-grid-form__label">老少青比(%)</span>
+      <el-input
+        v-model.trim="attributes.ageRatio"
+        class="u-width"
+      />
     </div>
+    <single-asset-dialog
+      ref="assetDialog"
+      :choosen="onChoosenAsset"
+      @directory-changed="onAssetDirectoryChanged"
+      @view="onViewAsset"
+    />
+    <preview-dialog ref="previewDialog" />
   </confirm-dialog>
 </template>
 
 <script>
+import { AssetType } from '@/constant'
+import {
+  getAssetsByQuery,
+  getAssetUrl
+} from '@/api/asset'
 import {
   getAdAttributes,
-  updateAdAttributes
+  updateAdAttributes,
+  bindFileToAttributes
 } from '../api'
 
 export default {
@@ -57,7 +140,27 @@ export default {
   data () {
     return {
       isAdd: false,
-      attributes: {}
+      attributes: {},
+      files: [],
+      schema: {
+        list: getAssetsByQuery,
+        cols: [
+          { prop: 'file', label: '', type: 'asset' }
+        ]
+      },
+      tagOptions: [
+        { label: '不限', value: '' },
+        { label: '商圈百货', value: '1' },
+        { label: '星级酒店', value: '2' },
+        { label: '地产物业', value: '3' },
+        { label: '企业机构', value: '4' },
+        { label: '机场车站', value: '5' },
+        { label: '旅游景区', value: '6' },
+        { label: '住宅社区', value: '7' },
+        { label: '医疗机构', value: '8' },
+        { label: '教育机构', value: '9' }
+      ],
+      directoryOption: null
     }
   },
   computed: {
@@ -70,26 +173,118 @@ export default {
     }
   },
   methods: {
+    onChange ({ raw }) {
+      this.$refs.upload.clearFiles()
+      const isImg = raw.type === 'image/jpeg' || raw.type === 'image/png' || raw.type === 'image/jpg'
+      if (!isImg) {
+        this.$message({
+          type: 'warning',
+          message: '上传格式不正确（只能是.png,.jpg,.jpeg'
+        })
+        return
+      }
+      bindFileToAttributes(this.$deviceId, raw)
+    },
+    randomDailyFlow () {
+      return Math.random() * 2000 | 0
+    },
+    randomGende () {
+      const random = Math.random() * 100 | 0
+      return `${random}:${100 - random}`
+    },
+    randomAge () {
+      const random1 = Math.random() * 100 | 0
+      const random2 = Math.random() * (100 - random1) | 0
+      return `${100 - random1 - random2}:${random1}:${random2}`
+    },
     show ({ id }) {
       const loading = this.$showLoading()
       this.$deviceId = id
       getAdAttributes(id).then(({ data }) => {
         this.isAdd = !data
+        this.files = data?.pictureUrl ? this.getFiles(data.pictureUrl) : []
         this.attributes = {
           enable: false,
           minDuration: 5, // 最小投放广告时长（单位秒）
           minCount: 10, // 最小投放次数
           price: 1000, // 单位分
-          ...data
+          ...data,
+          dailyFlow: this.randomDailyFlow(),
+          gendeRatio: this.randomGende(),
+          ageRatio: this.randomAge()
         }
         this.$refs.configDialog.show()
       }).finally(() => {
         this.$closeLoading(loading)
       })
     },
+    getFiles (pictureUrl) {
+      const result = []
+      pictureUrl.split(',').forEach(keyName => {
+        result.push({
+          url: getAssetUrl(keyName),
+          keyName
+        })
+      })
+      return result
+    },
     onSave (done) {
-      updateAdAttributes(this.$deviceId, this.attributes).then(done)
+      updateAdAttributes(this.$deviceId, {
+        ...this.attributes,
+        pictureUrl: this.files.map(({ keyName }) => keyName).join(',')
+      }).then(done)
+    },
+    onSelect () {
+      this.$refs.assetDialog.show(
+        AssetType.IMAGE,
+        this.directoryOption
+      )
+    },
+    onAssetDirectoryChanged (directory) {
+      this.directoryOption = directory
+    },
+    onViewAsset ({ file }) {
+      this.$refs.previewDialog.show(file)
+    },
+    onChoosenAsset ({ keyName }) {
+      this.files.push({
+        url: getAssetUrl(keyName),
+        keyName
+      })
+      return Promise.resolve()
+    },
+    onDelFile (file, index) {
+      this.files.splice(index, 1)
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.c-media {
+  width: 64px;
+  height: 64px;
+  border-radius: $radius;
+
+  &.add {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px dashed #ccc;
+
+    &:hover{
+      border: 1px dashed $primary;
+    }
+  }
+
+  &__del {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: $padding--2xs;
+    right: $padding--2xs;
+    color: $gray;
+  }
+}
+</style>