admin/src/pages/system/cardAndCouponManager/bodyBuildingCardManager/edit.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>选择案场：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="cardInfo.CaseId" placeholder="请选择" @change="caseChange" :disabled="disabled">
                <el-option
                  v-for="item in cases"
                  :key="item.CaseId"
                  :label="item.CaseName"
                  :value="item.CaseId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>卡图片：</span>
          <div class="flex-item">
            <div>
              <a v-if="cardInfo.CardImageUrl && cardInfo.CardImageUrl.indexOf('.mp4') > -1" :href="cardInfo.CardImageUrl" target="blank" style="line-height:40px;">{{cardInfo.CardImageUrl}}</a>
              <el-upload
                class="avatar-uploader"
                action='string'
                :http-request="toolClass.upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="cardInfo.CardImageUrl && cardInfo.CardImageUrl.indexOf('.mp4') === -1" :src="cardInfo.CardImageUrl" class="avatar">
                <el-button type="primary" size="mini" v-if="!cardInfo.CardImageUrl || cardInfo.CardImageUrl.indexOf('.mp4') > -1">{{cardInfo.CardImageUrl.indexOf('.mp4') > -1 ? '更换' : '上传'}}文件</el-button>
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
              </el-upload>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>卡名称：</span>
          <div class="flex-item">
            <div style="width:200px;">
              <el-input
                placeholder="请输入"
                v-model="cardInfo.GymCardName"
                clearable
                :disabled="disabled">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>卡类型：</span>
          <div class="flex-item">
            <div>
              <el-select v-model="cardInfo.GymTypeId" placeholder="请选择" :disabled="disabled">
                <el-option
                  v-for="item in GymTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>卡价格：</span>
          <div class="flex-item">
            <div style="width:200px;">
              <el-input
                placeholder="请输入"
                v-model="cardInfo.Price"
                clearable
                :disabled="disabled">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>总张数：</span>
          <div class="flex-item">
            <div style="width:200px;">
              <el-input
                placeholder="请输入"
                v-model="cardInfo.TotalCount"
                clearable
                :disabled="disabled">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>发送类型：</span>
          <div class="flex-item">
            <div>
              <el-radio v-model="cardInfo.SendType" label="channel" :disabled="disabled">渠道</el-radio>
              <el-radio v-model="cardInfo.SendType" label="case" :disabled="disabled">案场</el-radio>
              <el-radio v-model="cardInfo.SendType" label="system" :disabled="disabled">系统</el-radio>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="cardInfo.SendType === 'channel'">
          <span>选择渠道：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="cardInfo.ChannelId" placeholder="请选择" :disabled="disabled">
                <el-option
                  v-for="item in channelList"
                  :key="item.ChannelId"
                  :label="item.ChannelName"
                  :value="item.ChannelId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>卡有效时间：</span>
          <div class="flex-item">
            <div>
              <div class="addLine flex-h" style="align-item:center;margin-bottom:20px;">
                <el-date-picker
                  value-format="yyyy-MM-dd 00:00:00"
                  v-model="cardInfo.StartDate"
                  type="date"
                  placeholder="选择起始日期"
                  :disabled="disabled">
                </el-date-picker>
                <span style="line-height:40px;">至</span>
                <el-date-picker
                  value-format="yyyy-MM-dd 23:59:59"
                  v-model="cardInfo.EndDate"
                  type="date"
                  placeholder="选择截止日期"
                  :disabled="disabled">
                </el-date-picker>
              </div>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>分享描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="cardInfo.CardShareInfo">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>规则描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="cardInfo.CardUseRule">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>使用说明：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="cardInfo.CardUseInstruction">
              </el-input>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submit">保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapGymCardActions } = createNamespacedHelpers('gymcard')
const { mapState: mapChannelState, mapActions: mapChannelActions } = createNamespacedHelpers('channel')

export default {
  name: '',
  data () {
    return {
      disabled: false,
      date: '',
      courseList: [],
      videoOff: false,
      total: 0,
      type: this.$route.query.type,
      isEdit: this.$route.query.id === undefined ? 0 : 1,
      GymTypeList: [{ // 卡类型
        id: 'once',
        name: '次卡'
      }, {
        id: 'month',
        name: '月卡'
      }, {
        id: 'quarter',
        name: '季卡'
      }, {
        id: 'year',
        name: '年卡'
      }],
      ChannelList: [], // 渠道列表
      TypeList: [], // 类型列表
      GoodsList: [], // 商品列表
      cardInfo: {
        GymCardId: '',
        CardImageUrl: '',
        GymCardName: '',
        GymTypeId: '',
        Price: '',
        TotalCount: '',
        SendType: '',
        ChannelId: '',
        StartDate: '',
        EndDate: '',
        CardShareInfo: '',
        CardUseRule: '',
        CardUseInstruction: '',
        CaseId: '',
        OrgId: ''
      },
      postData: {
        page: 1,
        pagesize: 10,
      },
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.GetChannelListList({
        caseid: this.defaultCaseId,
        page: 1,
        pagesize: 10000
      }).then(() => {
        if (this.$route.query.id) {
          this.disabled = true
          this.getGymCardById({
            id: this.$route.query.id
          }).then((res) => {
            // console.log(JSON.stringify(res.Card))
            this.cardInfo = res
          })
        }
      })
    })
  },
  computed: {
    ...mapChannelState({
      channelList: x => x.channelList,
    }),
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default,
      OrgId: x => x.app.user.OrgId,
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  methods: {
    ...mapGymCardActions([
      'addGymCard',
      'getGymCardById',
      'editGymCard',
    ]),
    ...mapChannelActions([
      'GetChannelListList',
    ]),
    caseChange () { // 选择案场
      this.GetChannelListList({
        caseid: this.cardInfo.CaseId,
        page: 1,
        pagesize: 10000
      })
      this.cardInfo.ChannelId = ''
    },
    submit () { // 保存
      // console.log(this.cardInfo.StartDate)
      if (this.$route.query.id) {
        this.cardInfo.TotalCount = this.cardInfo.TotalCount - 0
        this.editGymCard(this.cardInfo).then((res) => {
          this.$alert('操作成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push({ name: 'bodyBuildingCardManager' })
            }
          })
        })
      } else {
        this.cardInfo.OrgId = this.OrgId
        this.cardInfo.TotalCount = this.cardInfo.TotalCount - 0
        this.addGymCard(this.cardInfo).then((res) => {
          this.$alert('操作成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push({ name: 'bodyBuildingCardManager' })
            }
          })
        })
      }
    },
    cancel () { // 取消
      this.$router.push({ name: 'bodyBuildingCardManager' })
    },
    handleAvatarSuccess (res, file) {
      this.cardInfo.CardImageUrl = res.result.url
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.addLine {
  > * {
    margin-right: 10px;
  }
}
.mainForm > ul > li > div > div > button {
  margin-top: 0;
}
</style>