770 lines
30 KiB
Vue
770 lines
30 KiB
Vue
<template>
|
|
<div class="props-store-edit">
|
|
<el-dialog
|
|
:title="textOptTitle"
|
|
:visible="true"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false"
|
|
:width="isNobleVip? '930px' : '450px'"
|
|
top="50px"
|
|
>
|
|
<div v-loading="submitLoading">
|
|
<el-form ref="form" :model="form" :rules="localizedFormRules" label-width="130px" style="margin-right:50px;">
|
|
<el-row :gutter="10">
|
|
<el-col :md="24" :lg="isNobleVip ? 12 : 24">
|
|
<el-form-item :label="$t('pages.propsStore.form.system')" prop="sysOrigin">
|
|
<el-select
|
|
v-model="form.sysOrigin"
|
|
:placeholder="$t('pages.propsStore.form.system')"
|
|
style="width: 100%"
|
|
:disabled="true"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in permissionsSysOriginPlatforms"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
<span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
|
|
<span style="float: left;margin-left:10px">{{ item.label }}</span>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.form.propsType')" prop="propsType">
|
|
<el-select
|
|
v-model="form.propsType"
|
|
:placeholder="$t('pages.propsStore.form.propsType')"
|
|
style="width: 100%"
|
|
:disabled="true"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in propsCommodityTypeOptions"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.form.propsResource')" :prop="sourceMap[form.propsType].isChangeSource ? 'tmpSourceIndex' : ''">
|
|
<el-row v-loading="sourceMap[form.propsType].loading" :gutter="10">
|
|
<el-col v-if="sourceMap[form.propsType].isChangeSource" :span="15">
|
|
<el-form-item :prop="isUpdate ? 'tmpSourceIndex' : ''">
|
|
<el-select
|
|
v-model="form.tmpSourceIndex"
|
|
:placeholder="$t('pages.propsStore.placeholder.type')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
@change="changePropsSouce"
|
|
>
|
|
<el-option v-for="(item, index) in sourceMap[form.propsType].list" :key="item.id" :label="item.name" :value="index">
|
|
<div style="float: left;">
|
|
<img :src="item.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ item.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="sourceSelect.cover"
|
|
:preview-src-list="[sourceSelect.cover]"
|
|
>
|
|
<div slot="error" class="image-slot" style="text-align: center;">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="sourceSelect.sourceUrl"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<el-button v-if="!sourceMap[form.propsType].isChangeSource" type="text" @click="clickChangeSource(form.propsType)">{{ $t('pages.propsStore.action.changeResource') }}</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.form.currencyType')" prop="tmpCurrencyTypes">
|
|
<el-select
|
|
v-model="form.tmpCurrencyTypes"
|
|
:placeholder="$t('pages.propsStore.form.currencyType')"
|
|
style="width: 100%"
|
|
multiple
|
|
>
|
|
<el-option v-for="item in propsCurrencyTypeOptions" :key="item.value" :disabled="isNobleVip && item.value !== 'GOLD'" :label="item.name" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.form.validDays')" prop="tmpValidDays">
|
|
<el-select
|
|
v-model="form.tmpValidDays"
|
|
:placeholder="$t('pages.propsStore.form.validDays')"
|
|
style="width: 100%"
|
|
class="filter-item"
|
|
multiple
|
|
>
|
|
<el-option v-for="item in propsValidDays" :key="item.value" :label="item.name" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="$t('pages.propsStore.form.label')" prop="label">
|
|
<el-input v-model.trim="form.label" :placeholder="$t('pages.propsStore.placeholder.label')" />
|
|
</el-form-item>
|
|
<el-row v-if="form.propsType === 'NOBLE_VIP'">
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.discount')" prop="discount">
|
|
<el-input v-model="form.discount" :placeholder="$t('pages.propsStore.form.discount')" @change="calculateDiscountPrice()" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.sort')" prop="sort">
|
|
<el-input v-model.trim="form.sort" v-number :placeholder="$t('pages.propsStore.placeholder.sort')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="form.propsType !== 'NOBLE_VIP'">
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.discount')" prop="discount">
|
|
<el-input v-model="form.discount" :placeholder="$t('pages.propsStore.form.discount')" :disabled="true" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.sort')" prop="sort">
|
|
<el-input v-model.trim="form.sort" v-number :placeholder="$t('pages.propsStore.placeholder.sort')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item :label="$t('pages.propsStore.form.shelfStatus')" prop="shelfStatus">
|
|
<el-radio-group v-model="form.shelfStatus">
|
|
<el-radio :label="true">{{ $t('pages.propsStore.status.onShelf') }}</el-radio>
|
|
<el-radio :label="false">{{ $t('pages.propsStore.status.offShelf') }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-if="isNobleVip" :md="24" :lg="12">
|
|
<el-form-item :label="$t('pages.propsStore.propsTypes.RIDE')">
|
|
<el-row v-loading="sourceMap['RIDE'].loading" :gutter="10">
|
|
<el-col v-if="sourceMap['RIDE'].isChangeSource" :span="15">
|
|
<el-form-item>
|
|
<el-select
|
|
v-model="form.tmpCarIndex"
|
|
:placeholder="$t('pages.propsStore.placeholder.type')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
@change="changeCarSouce"
|
|
>
|
|
<el-option v-for="(item, index) in sourceMap['RIDE'].list" :key="item.id" :label="item.name" :value="index">
|
|
<div style="float: left;">
|
|
<img :src="item.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ item.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="carSouceSelect.cover"
|
|
:preview-src-list="[carSouceSelect.cover]"
|
|
>
|
|
<div slot="error" class="image-slot" style="text-align: center;">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="carSouceSelect.sourceUrl"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<el-button v-if="!sourceMap['RIDE'].isChangeSource" type="text" @click="clickChangeSource('RIDE')">{{ $t('pages.propsStore.action.changeResource') }}</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.propsTypes.AVATAR_FRAME')">
|
|
<el-row v-loading="sourceMap['AVATAR_FRAME'].loading" :gutter="10">
|
|
<el-col v-if="sourceMap['AVATAR_FRAME'].isChangeSource" :span="15">
|
|
<el-form-item>
|
|
<el-select
|
|
v-model="form.tmpAvatarIndex"
|
|
:placeholder="$t('pages.propsStore.placeholder.type')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
@change="changeAvatarFrameSource"
|
|
>
|
|
<el-option v-for="(item, index) in sourceMap['AVATAR_FRAME'].list" :key="item.id" :label="item.name" :value="index">
|
|
<div style="float: left;">
|
|
<img :src="item.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ item.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="avatarSouceSelect.cover"
|
|
:preview-src-list="[avatarSouceSelect.cover]"
|
|
>
|
|
<div slot="error" class="image-slot" style="text-align: center;">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="avatarSouceSelect.sourceUrl"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<el-button v-if="!sourceMap['AVATAR_FRAME'].isChangeSource" type="text" @click="clickChangeSource('AVATAR_FRAME')">{{ $t('pages.propsStore.action.changeResource') }}</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.propsTypes.DATA_CARD')">
|
|
<el-row v-loading="sourceMap['DATA_CARD'].loading" :gutter="10">
|
|
<el-col v-if="sourceMap['DATA_CARD'].isChangeSource" :span="15">
|
|
<el-form-item>
|
|
<el-select
|
|
v-model="form.tmpDataCardIndex"
|
|
:placeholder="$t('pages.propsStore.placeholder.type')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
@change="changeDataCardSource"
|
|
>
|
|
<el-option v-for="(item, index) in sourceMap['DATA_CARD'].list" :key="item.id" :label="item.name" :value="index">
|
|
<div style="float: left;">
|
|
<img :src="item.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ item.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="dataCardSouceSelect.cover"
|
|
:preview-src-list="[dataCardSouceSelect.cover]"
|
|
>
|
|
<div slot="error" class="image-slot" style="text-align: center;">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="dataCardSouceSelect.sourceUrl"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<el-button v-if="!sourceMap['DATA_CARD'].isChangeSource" type="text" @click="clickChangeSource('DATA_CARD')">{{ $t('pages.propsStore.action.changeResource') }}</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.propsTypes.CHAT_BUBBLE')">
|
|
<el-row v-loading="sourceMap['CHAT_BUBBLE'].loading" :gutter="10">
|
|
<el-col v-if="sourceMap['CHAT_BUBBLE'].isChangeSource" :span="15">
|
|
<el-form-item>
|
|
<el-select
|
|
v-model="form.tmpChatBubbleIndex"
|
|
:placeholder="$t('pages.propsStore.placeholder.type')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
@change="changeChatBubbleSource"
|
|
>
|
|
<el-option v-for="(item, index) in sourceMap['CHAT_BUBBLE'].list" :key="item.id" :label="item.name" :value="index">
|
|
<div style="float: left;">
|
|
<img :src="item.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ item.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="chatBubbleSouceSelect.cover"
|
|
:preview-src-list="[chatBubbleSouceSelect.cover]"
|
|
>
|
|
<div slot="error" class="image-slot" style="text-align: center;">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="chatBubbleSouceSelect.sourceUrl"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<el-button v-if="!sourceMap['CHAT_BUBBLE'].isChangeSource" type="text" @click="clickChangeSource('CHAT_BUBBLE')">{{ $t('pages.propsStore.action.changeResource') }}</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.propsStore.form.vipType')" prop="propsAbility.vipType">
|
|
<el-select
|
|
v-model="form.propsAbility.vipType"
|
|
:placeholder="$t('pages.propsStore.placeholder.vipType')"
|
|
style="width: 100%"
|
|
class="filter-item"
|
|
>
|
|
<el-option v-for="item in nobleVipTabOptions" :key="item.value" :label="item.name" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.loginReward')" prop="propsAbility.loginRewardsAmount">
|
|
<el-input v-model="form.propsAbility.loginRewardsAmount" :placeholder="$t('pages.propsStore.form.loginReward')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.vipLevel')" prop="propsAbility.vipLevel">
|
|
<el-input v-model="form.propsAbility.vipLevel" :placeholder="$t('pages.propsStore.form.vipLevel')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.adminCount')" prop="propsAbility.adminNumber">
|
|
<el-input v-model="form.propsAbility.adminNumber" :placeholder="$t('pages.propsStore.form.adminCount')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('pages.propsStore.form.roomMemberCount')" prop="propsAbility.roomMaxMember">
|
|
<el-input v-model="form.propsAbility.roomMaxMember" :placeholder="$t('pages.propsStore.form.roomMemberCount')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm()">{{ $t('pages.propsStore.action.save') }}</el-button>
|
|
<el-button @click="handleClose()">{{ $t('pages.propsStore.action.cancel') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { listSysOriginTypeList, addOrUpdatePropsStore } from '@/api/props'
|
|
import { propsTypes, propsCurrencyType, propsValidDays, nobleVipTabs, propsCommodityTypes } from '@/constant/type'
|
|
import { deepClone } from '@/utils'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
props: {
|
|
row: {
|
|
type: Object,
|
|
require: false,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
discountPrice: '',
|
|
propsCommodityTypes,
|
|
nobleVipTabs,
|
|
isChangeNobleSouce: false,
|
|
isCangeAvatarFrameSouce: false,
|
|
isCangeDataCardSouce: false,
|
|
isChangeCarSouce: false,
|
|
isChangeChatBubbleSouce: false,
|
|
propsValidDays,
|
|
propsCurrencyType,
|
|
svgaplayerVisable: false,
|
|
coverUploadLoading: false,
|
|
coverFileList: [],
|
|
sourceUploadLoading: false,
|
|
sourceUrlFileList: [],
|
|
propsTypes,
|
|
submitLoading: false,
|
|
uploadLoading: false,
|
|
form: {
|
|
id: '',
|
|
sysOrigin: '',
|
|
sourceId: '',
|
|
propsType: '',
|
|
currencyTypes: '',
|
|
validDays: '',
|
|
discount: 0,
|
|
shelfStatus: true,
|
|
sort: 0,
|
|
label: '',
|
|
del: false,
|
|
propsAbility: {
|
|
id: '',
|
|
vipType: '',
|
|
vipLevel: '',
|
|
adminNumber: '',
|
|
loginRewardsAmount: '',
|
|
roomMaxMember: '',
|
|
avatarFrameId: '',
|
|
chatBubbleId: '',
|
|
carId: '',
|
|
dataCardId: ''
|
|
},
|
|
tmpCurrencyTypes: [],
|
|
tmpValidDays: [],
|
|
tmpSourceIndex: '',
|
|
tmpAvatarIndex: '',
|
|
tmpDataCardIndex: '',
|
|
tmpChatBubbleIndex: '',
|
|
tmpFloatPictureIndex: '',
|
|
tmpCarIndex: ''
|
|
},
|
|
formRules: {},
|
|
sourceTypeList: [],
|
|
selectType: {},
|
|
isLoadSourceTypeList: false,
|
|
listTypeLoading: false,
|
|
|
|
sourceSelect: {},
|
|
carSouceSelect: {},
|
|
avatarSouceSelect: {},
|
|
dataCardSouceSelect: {},
|
|
chatBubbleSouceSelect: {},
|
|
|
|
sourceMap: {
|
|
'AVATAR_FRAME': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
},
|
|
'RIDE': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
},
|
|
'NOBLE_VIP': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
},
|
|
'THEME': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
},
|
|
'LAYOUT': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
},
|
|
'CHAT_BUBBLE': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
},
|
|
'FLOAT_PICTURE': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
},
|
|
'DATA_CARD': {
|
|
loading: false,
|
|
isLoadSourceTypeList: false,
|
|
isChangeSource: false,
|
|
list: []
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
isNobleVip() {
|
|
return this.form && this.form.propsType === 'NOBLE_VIP'
|
|
},
|
|
rowSourceUrl() {
|
|
return this.row ? this.row.propsSource.sourceUrl : ''
|
|
},
|
|
isShowCoverUpload() {
|
|
return !this.form.cover
|
|
},
|
|
isShowSourceUpload() {
|
|
return !this.form.sourceUrl
|
|
},
|
|
textOptTitle() {
|
|
return this.form && this.form.id ? this.$t('pages.propsStore.action.edit') : this.$t('pages.propsStore.action.add')
|
|
},
|
|
isUpdate() {
|
|
return !!(this.form && this.form.id)
|
|
},
|
|
propsCommodityTypeOptions() {
|
|
return this.propsCommodityTypes.map(item => ({
|
|
...item,
|
|
name: this.$t(`pages.propsStore.propsTypes.${item.value}`)
|
|
}))
|
|
},
|
|
propsCurrencyTypeOptions() {
|
|
return this.propsCurrencyType.map(item => ({
|
|
...item,
|
|
name: this.$t(`pages.propsStore.currencyTypes.${item.value}`)
|
|
}))
|
|
},
|
|
nobleVipTabOptions() {
|
|
return this.nobleVipTabs.map(item => ({
|
|
...item,
|
|
name: this.$t(`pages.propsStore.nobleVipTypes.${item.value}`)
|
|
}))
|
|
},
|
|
localizedFormRules() {
|
|
const commonRules = [
|
|
{ required: true, message: this.$t('pages.propsStore.validation.required'), trigger: 'blur' }
|
|
]
|
|
return {
|
|
sort: commonRules,
|
|
propsType: commonRules,
|
|
sysOrigin: commonRules,
|
|
tmpTypeIndex: commonRules,
|
|
tmpCurrencyTypes: commonRules,
|
|
tmpValidDays: commonRules,
|
|
validDays: commonRules,
|
|
discount: commonRules,
|
|
shelfStatus: commonRules,
|
|
'propsAbility.vipType': commonRules,
|
|
'propsAbility.vipLevel': commonRules,
|
|
'propsAbility.adminNumber': commonRules,
|
|
'propsAbility.loginRewardsAmount': commonRules,
|
|
'propsAbility.roomMaxMember': commonRules,
|
|
'propsAbility.avatarFrameId': commonRules,
|
|
'propsAbility.carId': commonRules,
|
|
'propsAbility.chatBubbleId': commonRules,
|
|
'propsAbility.dataCardId': commonRules,
|
|
tmpCarIndex: commonRules,
|
|
tmpDataCardIndex: commonRules,
|
|
tmpAvatarIndex: commonRules,
|
|
tmpChatBubbleIndex: commonRules,
|
|
tmpFloatPictureIndex: commonRules,
|
|
tmpSourceIndex: commonRules
|
|
}
|
|
},
|
|
...mapGetters(['permissionsSysOriginPlatforms'])
|
|
},
|
|
watch: {
|
|
row: {
|
|
handler(newVal) {
|
|
if (!newVal) {
|
|
return
|
|
}
|
|
const newForm = deepClone(newVal.commodity)
|
|
newForm.tmpValidDays = newForm.validDays ? newForm.validDays.split(',').map(item => Number(item)) : []
|
|
newForm.tmpCurrencyTypes = newForm.currencyTypes ? newForm.currencyTypes.split(',') : []
|
|
newForm.discount = newForm.discount || 0
|
|
newForm.sort = newForm.sort || 0
|
|
newForm.propsAbility = deepClone(newVal.propsAbility && newVal.propsAbility.nobleVipAbility ? newVal.propsAbility.nobleVipAbility : this.form.propsAbility)
|
|
|
|
if (newVal.propsSource) {
|
|
this.sourceSelect = {
|
|
id: newVal.propsSource.id,
|
|
cover: newVal.propsSource.cover,
|
|
sourceUrl: newVal.propsSource.sourceUrl
|
|
}
|
|
}
|
|
|
|
if (newVal.propsAbility) {
|
|
const dataCard = newVal.propsAbility.dataCard
|
|
if (dataCard) {
|
|
this.dataCardSouceSelect = {
|
|
id: dataCard.id,
|
|
cover: dataCard.cover,
|
|
sourceUrl: dataCard.sourceUrl
|
|
}
|
|
}
|
|
|
|
const car = newVal.propsAbility.car
|
|
if (car) {
|
|
this.carSouceSelect = {
|
|
id: car.id,
|
|
cover: car.cover,
|
|
sourceUrl: car.sourceUrl
|
|
}
|
|
}
|
|
|
|
const avatarFrame = newVal.propsAbility.avatarFrame
|
|
if (avatarFrame) {
|
|
this.avatarSouceSelect = {
|
|
id: avatarFrame.id,
|
|
cover: avatarFrame.cover,
|
|
sourceUrl: avatarFrame.sourceUrl
|
|
}
|
|
}
|
|
|
|
const chatBubble = newVal.propsAbility.chatBubble
|
|
if (chatBubble) {
|
|
this.chatBubbleSouceSelect = {
|
|
id: chatBubble.id,
|
|
cover: chatBubble.cover,
|
|
sourceUrl: chatBubble.sourceUrl
|
|
}
|
|
}
|
|
}
|
|
|
|
this.form = newForm
|
|
this.calculateDiscountPrice()
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
if (!this.isUpdate) {
|
|
if (this.isNobleVip) {
|
|
for (const key in this.sourceMap) {
|
|
this.sourceMap[key].isChangeSource = true
|
|
this.loadSourceType(key)
|
|
}
|
|
return
|
|
}
|
|
this.sourceMap[this.form.propsType].isChangeSource = true
|
|
this.loadSourceType(this.form.propsType)
|
|
}
|
|
},
|
|
methods: {
|
|
clickChangeSource(type) {
|
|
this.sourceMap[type].isChangeSource = !this.sourceMap[type].isChangeSource
|
|
const sourceData = this.sourceMap[type]
|
|
if (sourceData.isChangeSource === true && sourceData.isLoadSourceTypeList === false) {
|
|
this.loadSourceType(type)
|
|
}
|
|
},
|
|
changePropsSouce(index) {
|
|
this.sourceSelect = this.sourceMap[this.form.propsType].list[index]
|
|
this.form.sourceId = this.sourceSelect.id
|
|
},
|
|
changeCarSouce(index) {
|
|
this.carSouceSelect = this.sourceMap['RIDE'].list[index]
|
|
this.form.propsAbility.carId = this.carSouceSelect.id
|
|
},
|
|
changeAvatarFrameSource(index) {
|
|
this.avatarSouceSelect = this.sourceMap['AVATAR_FRAME'].list[index]
|
|
this.form.propsAbility.avatarFrameId = this.avatarSouceSelect.id
|
|
},
|
|
changeDataCardSource(index) {
|
|
this.dataCardSouceSelect = this.sourceMap['DATA_CARD'].list[index]
|
|
this.form.propsAbility.dataCardId = this.dataCardSouceSelect.id
|
|
},
|
|
changeChatBubbleSource(index) {
|
|
this.chatBubbleSouceSelect = this.sourceMap['CHAT_BUBBLE'].list[index]
|
|
this.form.propsAbility.chatBubbleId = this.chatBubbleSouceSelect.id
|
|
},
|
|
loadSourceType(type) {
|
|
const that = this
|
|
that.sourceMap[type].loading = true
|
|
listSysOriginTypeList(that.form.sysOrigin, type).then(res => {
|
|
that.sourceMap[type].loading = false
|
|
that.sourceMap[type].isLoadSourceTypeList = true
|
|
that.sourceMap[type].list = res.body || []
|
|
}).catch(er => {
|
|
that.sourceMap[type].loading = false
|
|
console.error(er)
|
|
})
|
|
},
|
|
uploadCover(file) {
|
|
const that = this
|
|
that.coverUploadLoading = true
|
|
that.$simpleUploadFlie(file).then(res => {
|
|
that.coverUploadLoading = false
|
|
that.form.cover = that.$getAccessImgUrl(res.name)
|
|
}).catch(er => {
|
|
that.coverUploadLoading = false
|
|
})
|
|
},
|
|
handleCoverFileRemove(file, fileList) {
|
|
this.form.cover = ''
|
|
this.coverUploadLoading = false
|
|
},
|
|
sourceUpload(file) {
|
|
const that = this
|
|
that.sourceUploadLoading = true
|
|
that.$simpleUploadFlie(file).then(res => {
|
|
that.sourceUploadLoading = false
|
|
that.form.sourceUrl = that.$getAccessImgUrl(res.name)
|
|
}).catch(er => {
|
|
that.sourceUploadLoading = false
|
|
})
|
|
},
|
|
handleSourceFileRemove(file, fileList) {
|
|
this.form.sourceUrl = ''
|
|
this.sourceUploadLoading = false
|
|
},
|
|
handleClose() {
|
|
this.$emit('close')
|
|
},
|
|
submitForm() {
|
|
const that = this
|
|
that.$refs.form.validate(valid => {
|
|
if (!valid) {
|
|
console.error('error submit!!')
|
|
return
|
|
}
|
|
that.form.currencyTypes = that.form.tmpCurrencyTypes.join(',')
|
|
that.form.validDays = that.form.tmpValidDays.join(',')
|
|
that.submitLoading = true
|
|
addOrUpdatePropsStore(that.form).then(res => {
|
|
that.submitLoading = false
|
|
that.$emit('success', res)
|
|
}).catch(er => {
|
|
that.submitLoading = false
|
|
that.$emit('fail')
|
|
console.error(er)
|
|
})
|
|
})
|
|
},
|
|
clickSvgaplayer() {
|
|
this.svgaplayerVisable = true
|
|
},
|
|
calculateDiscountPrice() {
|
|
if (this.form.discount >= 0 && this.form.discount <= 1) {
|
|
return
|
|
}
|
|
this.form.discount = 1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|