pyxis-page/src/views/game/game_theme.vue

<template>
  <div class="app-container">
    <el-form
        ref="postForm"
        :model="record"
        :rules="rules"
        label-width="222px"
        class="form-container"
    >
      <el-form-item
          prop="game_main_pic"
          label="主页正中间图片"
      >
        <upload-corp-image
            field="image-file"
            @crop-upload-success="mainUploadSuccess"
            :width="583"
            :height="287"
            img-format="png"
            v-model="record.game_main_pic"
        >

        </upload-corp-image>
      </el-form-item>

      <el-form-item
          prop="bg_item_icon"
          label="背景图案"
      >
        <upload-corp-image
            field="image-file"
            @crop-upload-success="bgUploadSuccess"
            :width="392"
            :height="396"
            img-format="png"
            v-model="record.bg_item_icon"
        >

        </upload-corp-image>
      </el-form-item>

      <el-form-item
          label="主页上单人赛按钮文字:"
          prop="game_single_btn"
      >
        <el-input
            v-model="record.game_single_btn"
            placeholder="主页上单人赛按钮文字"
            @input="inputBegin"
            required
        />
      </el-form-item>
      <el-form-item
          label="主页上多人赛按钮名字:"
          prop="game_multi_btn"
      >
        <el-input
            v-model="record.game_multi_btn"
            placeholder="主页上多人赛按钮名字"
            @input="inputBegin"
            required
        />
      </el-form-item>
      <el-form-item
          prop="bg_item_icon"
          label="默认的分享图"
      >
        <upload-corp-image
            field="image-file"
            @crop-upload-success="shareUploadSuccess"
            :width="500"
            :height="400"
            img-format="png"
            v-model="record.default_share_pic"
        >

        </upload-corp-image>
      </el-form-item>

      <el-form-item
          label="默认分享语:"
          prop="game_single_btn"
      >
        <el-input
            v-model="record.default_share_txt"
            placeholder="默认分享语, 字数太多的话, 分享出去会截断, 单行13个字左右"
            @input="inputBegin"
            required
        />
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            @click="saveVal"
            v-permission="['shop:game_setting']"
        >
          保存
        </el-button>
        <el-button @click="onCancel">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Sticky from '@/components/Sticky/index.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
import UploadImage from '@/components/UploadImage/index.vue'
import UploadCorpImage from '@/components/UploadCorpImage/index.vue'

import { getGameTheme, saveGameTheme } from '@/api/shop'
import { UserModule } from '@/store/modules/user'

@Component({
  name: 'GameTheme',
  components: {
    Sticky,
    ElImageViewer,
    UploadImage,
    UploadCorpImage
  },
  filters: {
    parseGameType: (type: number) => {
      return type === 1 ? '微信小游戏' : '网页版'
    }
  }
})
export default class extends Vue {
  private validateRequire = (rule: any, value: string, callback: Function) => {
    if (value === '') {
      if (rule.field === 'imageURL') {
        this.$message({
          message: 'Upload cover image is required',
          type: 'error'
        })
      } else {
        this.$message({
          message: rule.field + ' 是必填的',
          type: 'error'
        })
      }
      callback(new Error(rule.field + ' 是必填的'))
    } else {
      callback()
    }
  }

  private shop = ''
  private record: any = {}

  get userLevel() {
    return UserModule.level
  }

  get noShop() {
    return !this.shop
  }

  private rules = {
    name: [{ validator: this.validateRequire }]
  }

  $refs!: {
    postForm: HTMLFormElement
  }

  async created() {
    this.record.shop = this.$route.params?.shop
    this.record.game = this.$route.params?.game
    this.record.version = this.$route.params?.version
    console.log(this.shop)
    await this.getRemoteData()
  }

  async getRemoteData() {
    const { data } = await getGameTheme(this.record)
    this.record = Object.assign(this.record, data)
    this.$forceUpdate()
    console.log(this.record)
  }

  private async onCancel() {
    try {
      await this.$confirm('确认不保存当前信息?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      this.$store.dispatch('delView', this.$route)
      this.$router.go(-1)
    } catch (err) {

    }
  }

  private async saveVal() {
    try {
      await this.$refs.postForm.validate()
      const { data } = await saveGameTheme(this.record)
      this.$notify({
        title: 'Success',
        message: '操作成功',
        type: 'success',
        duration: 2000
      })
    } catch (err) {

    }
  }

  private inputBegin() {
    this.$forceUpdate()
  }

  private mainUploadSuccess(imgUrl: string) {
    console.log('game main success: ' + imgUrl)
    this.record.game_main_pic = imgUrl
    this.$forceUpdate()
  }

  private bgUploadSuccess(imgUrl: string) {
    console.log('bg item success: ' + imgUrl)
    this.record.bg_item_icon = imgUrl
    this.$forceUpdate()
  }

  private shareUploadSuccess(imgUrl: string) {
    console.log('share img success: ' + imgUrl)
    this.record.default_share_pic = imgUrl
    this.$forceUpdate()
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom span {
  font-size: 13px;
  color: #999;
}

.button {
  padding: 0;
  min-height: auto;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.one-block {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: .2s;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

</style>