941 lines
34 KiB
Vue
941 lines
34 KiB
Vue
<template>
|
|
<div class="props-activity-reward-config-edit">
|
|
<el-drawer
|
|
:title="textOptTitle"
|
|
:visible="true"
|
|
:before-close="handlePropsClose"
|
|
:close-on-press-escape="false"
|
|
:wrapper-closable="false"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
custom-class="drawer-auto-layout"
|
|
>
|
|
<div class="form-edit">
|
|
<el-form ref="form" :model="form" :rules="formRules" label-width="110px" style="margin-right:50px;">
|
|
<div class="dr-content">
|
|
<div ref="rewardContent">
|
|
<el-row v-for="(item, index) in form.rewardConfigList" :key="index" style="cursor:pointer;line-height:30px;">
|
|
<el-col :span="3">
|
|
<div class="sort">{{ index + 1 }}</div>
|
|
</el-col>
|
|
<el-col :span="3" style="text-align:center;">
|
|
<div v-if="item.type === 'GOLD'">
|
|
<img src="@/assets/gold_icon.png" style="width:30px;height:30px;cursor: pointer;">
|
|
</div>
|
|
<div v-else-if="item.type === 'DIAMOND'">
|
|
<img src="@/assets/diamond_icon.png" style="width:30px;height:30px;cursor: pointer;">
|
|
</div>
|
|
<div v-else-if="item.type === 'SPECIAL_ID'">
|
|
<img src="@/assets/special_id.png" style="width:30px;height:30px;cursor: pointer;">
|
|
</div>
|
|
<div v-else-if="isGameCoupon(item.type)">
|
|
<img src="@/assets/game_coupon.png" style="width:30px;height:30px;cursor: pointer;">
|
|
</div>
|
|
<div v-else class="preview-img" style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="item.cover"
|
|
:preview-src-list="[item.cover]"
|
|
>
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
<div class="preview-svga">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="item.sourceUrl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="15">
|
|
<span style="font-weight:bold;"> {{ getTypeName(item) }}</span>
|
|
<span v-if="item.type === 'SPECIAL_ID'">类型：{{ item.content }}、数量：{{ item.quantity }}</span>
|
|
<span v-else-if="item.type === 'GOLD' || item.type === 'DIAMOND' || isGameCoupon(item.type)">数量：{{ item.content }}</span>
|
|
<span v-else-if="item.type === 'BADGE'">{{ item.badgeName }} 天数：{{ item.quantity }} </span>
|
|
<span v-else-if="item.type === 'CUSTOMIZE'">描述：{{ item.remark }}</span>
|
|
<span v-else>
|
|
<span v-if="item.type === 'GIFT' || item.type === 'FRAGMENTS'">数量：</span>
|
|
<span v-else>天数：</span>
|
|
{{ item.quantity }}</span>
|
|
</el-col>
|
|
<el-col v-if="isAllowEdit" :span="3" style="text-align: right;">
|
|
<i class="del el-icon-delete-solid" @click="deleteUpdateItem(index)" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<el-form-item v-if="isAllowEdit" label="添加配置">
|
|
<div class="content-list">
|
|
<el-row v-for="(item, index) in form.tmpConfigList" :key="index">
|
|
<div class="content-box">
|
|
<div class="content-box-label">
|
|
<span>{{ item.ext.title }}</span>
|
|
</div>
|
|
<el-row v-if="item.clickType === 'SPECIAL_ID'" :gutter="10">
|
|
<el-col :span="13">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.content'"
|
|
:rules="{required: true, message: '必填字段不可为空', trigger: 'blur'}"
|
|
>
|
|
<el-input
|
|
v-model="item.content"
|
|
placeholder="请选择"
|
|
style="width:100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.quantity'"
|
|
:rules="{ required: true, message: '不可为空', trigger: 'blur'}"
|
|
>
|
|
<span><el-input v-model="item.quantity" v-number style="width: 100%;" placeholder="数量" /></span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
|
|
<i class="save el-icon-success" @click="submitItem(index)" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-else-if="isCurrency(item.clickType)" :gutter="10">
|
|
<el-col :span="19">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.content'"
|
|
:rules="{ required: true, message: '必填字段不可为空', trigger: 'blur'}"
|
|
>
|
|
<el-input v-model.trim="item.content" v-number type="text" placeholder="请输入内容" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
|
|
<i class="save el-icon-success" @click="submitItem(index)" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-else-if="isGameCoupon(item.clickType)" :gutter="10">
|
|
<el-col :span="19">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.content'"
|
|
:rules="{ required: true, message: '必填字段不可为空', trigger: 'blur'}"
|
|
>
|
|
<el-input v-model.trim="item.content" v-number type="text" placeholder="请输入内容" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
|
|
<i class="save el-icon-success" @click="submitItem(index)" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-else-if="isBadge(item.clickType)" :gutter="10">
|
|
<el-col :span="13">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.content'"
|
|
:rules="{required: true, message: '必填字段不可为空', trigger: 'blur'}"
|
|
>
|
|
<el-select
|
|
v-model="item.content"
|
|
placeholder="请选择"
|
|
style="width:100%"
|
|
filterable
|
|
@change="(val)=> changeContent(item, val)"
|
|
>
|
|
<el-option v-for="(pItem, pIndex) in propsTypeData[item.clickType].list" :key="pIndex" :label="pItem.name" :value="pItem.id">
|
|
<div style="float: left;">
|
|
<img :src="pItem.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ pItem.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.quantity'"
|
|
:rules="{ required: true, message: '不可为空', trigger: 'blur'}"
|
|
>
|
|
<!-- <span><el-input v-model="item.quantity" v-number style="width: 100%;" placeholder="天数" /></span> -->
|
|
|
|
<el-autocomplete
|
|
v-model="item.quantity"
|
|
v-number
|
|
popper-class="my-autocomplete"
|
|
:fetch-suggestions="querySearchBadgeRestaurants"
|
|
placeholder="天数"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="name">{{ scope.value }}</div>
|
|
<span class="addr">{{ scope.label }}</span>
|
|
</template>
|
|
</el-autocomplete>
|
|
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
|
|
<i class="save el-icon-success" @click="submitItem(index)" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-else-if="isCustomize(item.clickType)" :gutter="10">
|
|
<el-col :span="3">
|
|
<div class="preview-img" style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="item.ext.selectVal.cover"
|
|
:preview-src-list="[item.ext.selectVal.cover]"
|
|
>
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
<div class="preview-svga">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="item.ext.selectVal.sourceUrl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.content'"
|
|
:rules="{required: true, message: '必填字段不可为空', trigger: 'blur'}"
|
|
>
|
|
<el-select
|
|
v-model="item.content"
|
|
placeholder="请选择"
|
|
style="width:100%"
|
|
filterable
|
|
@change="(val)=> changeContent(item, val)"
|
|
>
|
|
<el-option v-for="(pItem, pIndex) in propsTypeData[item.clickType].list" :key="pIndex" :label="pItem.name" :value="pItem.id">
|
|
<div style="float: left;">
|
|
<img :src="pItem.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ pItem.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.remark'"
|
|
:rules="{ required: true, message: '不可为空', trigger: 'blur'}"
|
|
>
|
|
<div><el-input v-model="item.remark" style="width: 100%;" placeholder="描述" /></div>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
|
|
<i class="save el-icon-success" @click="submitItem(index)" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-else :gutter="10">
|
|
<el-col :span="3">
|
|
<div class="preview-img" style="width: 36px; height: 36px">
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="item.ext.selectVal.cover"
|
|
:preview-src-list="[item.ext.selectVal.cover]"
|
|
>
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
<div class="preview-svga">
|
|
<svgaplayer
|
|
type="popover"
|
|
:url="item.ext.selectVal.sourceUrl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.content'"
|
|
:rules="{required: true, message: '必填字段不可为空', trigger: 'blur'}"
|
|
>
|
|
<el-select
|
|
v-model="item.content"
|
|
placeholder="请选择"
|
|
style="width:100%"
|
|
filterable
|
|
@change="(val)=> changeContent(item, val)"
|
|
>
|
|
<el-option v-for="(pItem, pIndex) in propsTypeData[item.clickType].list" :key="pIndex" :label="pItem.name" :value="pItem.id">
|
|
<div style="float: left;">
|
|
<img :src="pItem.cover" width="40px" height="40px">
|
|
</div>
|
|
<div style="float: left;margin-left:10px">
|
|
{{ pItem.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item
|
|
:prop="'tmpConfigList.' + index + '.quantity'"
|
|
:rules="{ required: true, message: '不可为空', trigger: 'blur'}"
|
|
>
|
|
<div><el-input v-model="item.quantity" v-number style="width: 100%;" placeholder="数量/天数" /></div>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<i class="del el-icon-delete-solid" @click="form.tmpConfigList = []" />
|
|
<i class="save el-icon-success" @click="submitItem(index)" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-row>
|
|
|
|
</div>
|
|
<div>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['AVATAR_FRAME'].loading" @click="addContent('AVATAR_FRAME')"><i class="el-icon-circle-plus" />头像框</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['RIDE'].loading" @click="addContent('RIDE')"><i class="el-icon-circle-plus" />座驾</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['NOBLE_VIP'].loading" @click="addContent('NOBLE_VIP')"><i class="el-icon-circle-plus" />贵族</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['THEME'].loading" @click="addContent('THEME')"><i class="el-icon-circle-plus" />房间背景主题</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['GIFT'].loading" @click="addContent('GIFT')"><i class="el-icon-circle-plus" />礼物</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" @click="addContent('SPECIAL_ID')"><i class="el-icon-circle-plus" />靓号</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" @click="addContent('GOLD')"><i class="el-icon-circle-plus" />金币</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" @click="addContent('DIAMOND')"><i class="el-icon-circle-plus" />钻石</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" @click="addContent('GAME_COUPON')"><i class="el-icon-circle-plus" />游戏券</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['BADGE'].loading" @click="addContent('BADGE')"><i class="el-icon-circle-plus" />用户徽章</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['ROOM_BADGE'].loading" @click="addContent('ROOM_BADGE')"><i class="el-icon-circle-plus" />房间徽章</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['EMOJI'].loading" @click="addContent('EMOJI')"><i class="el-icon-circle-plus" />表情包</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['CHAT_BUBBLE'].loading" @click="addContent('CHAT_BUBBLE')"><i class="el-icon-circle-plus" />聊天气泡</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['FLOAT_PICTURE'].loading" @click="addContent('FLOAT_PICTURE')"><i class="el-icon-circle-plus" />飘窗</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['CUSTOMIZE'].loading" @click="addContent('CUSTOMIZE')"><i class="el-icon-circle-plus" />自定义(只读)</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['FRAGMENTS'].loading" @click="addContent('FRAGMENTS')"><i class="el-icon-circle-plus" />碎片</el-button>
|
|
<el-button type="text" :disabled="disableAddContent" :loading="propsTypeData['DATA_CARD'].loading" @click="addContent('DATA_CARD')"><i class="el-icon-circle-plus" />资料卡</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div v-if="isAllowEdit" class="drawer-footer">
|
|
<el-button @click="handlePropsClose()">取消</el-button>
|
|
<el-button type="primary" :loading="submitLoading" @click="submitForm()">保存</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import { listGiftBySysOrigin } from '@/api/gift'
|
|
import { listBadgePictureBySysOrigin } from '@/api/badge'
|
|
import { listSysOriginTypeList, listNotFamilyBySysOriginType } from '@/api/props'
|
|
import { propsTypes, propsCurrencyType, propsValidDays, specialIdTypes } from '@/constant/type'
|
|
import { deepClone } from '@/utils'
|
|
import Sortable from 'sortablejs'
|
|
import { listGroupBySysOrigin } from '@/api/sys-emoji'
|
|
export default {
|
|
props: {
|
|
row: {
|
|
type: Object,
|
|
require: false,
|
|
default: () => {}
|
|
},
|
|
sysOrigin: {
|
|
type: String,
|
|
return: true,
|
|
default: ''
|
|
},
|
|
allowEdit: {
|
|
type: Boolean,
|
|
return: true,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
const commonRules = [
|
|
{ required: true, message: '必填字段不可为空', trigger: 'blur' }
|
|
]
|
|
return {
|
|
specialIdTypes,
|
|
disableAddContent: false,
|
|
propsTypeData: {
|
|
'AVATAR_FRAME': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'DATA_CARD': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'CHAT_BUBBLE': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'RIDE': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'NOBLE_VIP': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'THEME': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'GIFT': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'BADGE': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'ROOM_BADGE': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'EMOJI': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'CUSTOMIZE': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'FRAGMENTS': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
},
|
|
'FLOAT_PICTURE': {
|
|
loading: false,
|
|
loadData: false,
|
|
list: []
|
|
}
|
|
},
|
|
propsTypeMap: {
|
|
'EMOJI': {
|
|
value: 'EMOJI',
|
|
name: '用户-表情包'
|
|
},
|
|
'BADGE': {
|
|
value: 'BADGE',
|
|
name: '用户-徽章'
|
|
},
|
|
'ROOM_BADGE': {
|
|
value: 'BADGE',
|
|
name: '房间-徽章'
|
|
},
|
|
'AVATAR_FRAME': {
|
|
value: 'PROPS',
|
|
name: '头像框'
|
|
},
|
|
'DATA_CARD': {
|
|
value: 'PROPS',
|
|
name: '资料卡'
|
|
},
|
|
'CHAT_BUBBLE': {
|
|
value: 'PROPS',
|
|
name: '聊天气泡'
|
|
},
|
|
'RIDE': {
|
|
value: 'PROPS',
|
|
name: '座驾'
|
|
},
|
|
'NOBLE_VIP': {
|
|
value: 'PROPS',
|
|
name: '贵族'
|
|
},
|
|
'GIFT': {
|
|
value: 'GIFT',
|
|
name: '礼物'
|
|
},
|
|
'GOLD': {
|
|
value: 'GOLD',
|
|
name: '金币'
|
|
},
|
|
'DIAMOND': {
|
|
value: 'DIAMOND',
|
|
name: '钻石'
|
|
},
|
|
'SPECIAL_ID': {
|
|
value: 'SPECIAL_ID',
|
|
name: '靓号'
|
|
},
|
|
'THEME': {
|
|
value: 'PROPS',
|
|
name: '房间背景主题'
|
|
},
|
|
'GAME_COUPON': {
|
|
value: 'GAME_COUPON',
|
|
name: '游戏券'
|
|
},
|
|
'CUSTOMIZE': {
|
|
value: 'CUSTOMIZE',
|
|
name: '自定义(只读)'
|
|
},
|
|
'FRAGMENTS': {
|
|
value: 'FRAGMENTS',
|
|
name: '碎片'
|
|
},
|
|
'FLOAT_PICTURE': {
|
|
value: 'PROPS',
|
|
name: '飘窗'
|
|
}
|
|
},
|
|
isAllowEdit: false,
|
|
isChangeSource: false,
|
|
propsValidDays,
|
|
propsCurrencyType,
|
|
svgaplayerVisable: false,
|
|
coverUploadLoading: false,
|
|
coverFileList: [],
|
|
sourceUploadLoading: false,
|
|
sourceUrlFileList: [],
|
|
propsTypes,
|
|
submitLoading: false,
|
|
form: {
|
|
tmpConfigList: [],
|
|
rewardConfigList: [],
|
|
sysOrigin: '',
|
|
remark: ''
|
|
},
|
|
formRules: {
|
|
sysOrigin: commonRules
|
|
},
|
|
sourceTypeList: [],
|
|
selectType: {},
|
|
isLoadSourceTypeList: false,
|
|
listTypeLoading: false,
|
|
badgeRestaurants: [{ 'value': '0', 'label': '永久' }]
|
|
}
|
|
},
|
|
computed: {
|
|
textOptTitle() {
|
|
return (this.isAllowEdit ? '编辑' : '查看') + '(' + this.sysOrigin + ')'
|
|
}
|
|
},
|
|
watch: {
|
|
row: {
|
|
handler(newVal) {
|
|
if (!newVal) {
|
|
return
|
|
}
|
|
const newForm = deepClone(newVal)
|
|
if (!newForm || !newForm.propsRewards || newForm.propsRewards.length <= 0) {
|
|
this.form.rewardConfigList = []
|
|
this.form.sysOrigin = this.sysOrigin
|
|
} else {
|
|
this.form.sysOrigin = this.sysOrigin
|
|
this.form.rewardConfigList = newForm.propsRewards
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
sysOrigin: {
|
|
handler(newVal) {
|
|
if (!newVal) {
|
|
return
|
|
}
|
|
this.form.sysOrigin = newVal
|
|
},
|
|
immediate: true
|
|
},
|
|
allowEdit: {
|
|
handler(newVal) {
|
|
if (!newVal) {
|
|
return
|
|
}
|
|
this.isAllowEdit = newVal
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
const that = this
|
|
that.$nextTick(() => {
|
|
Sortable.create(that.$refs.rewardContent, {
|
|
onEnd: function(evt) {
|
|
const oldIndex = evt.oldIndex
|
|
const newIndex = evt.newIndex
|
|
if (newIndex === oldIndex) {
|
|
return
|
|
}
|
|
|
|
that.form.rewardConfigList.splice(newIndex, 0, that.form.rewardConfigList.splice(oldIndex, 1)[0])
|
|
const newList = that.form.rewardConfigList.splice(0)
|
|
that.form.rewardConfigList = []
|
|
that.$nextTick(() => {
|
|
that.form.rewardConfigList = newList
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
querySearchBadgeRestaurants(queryString, cb) {
|
|
var badgeRestaurants = this.badgeRestaurants
|
|
var results = queryString ? badgeRestaurants.filter(restaurant => {
|
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
|
|
}) : badgeRestaurants
|
|
cb(results)
|
|
},
|
|
changeContent(item, val) {
|
|
const that = this
|
|
const typeData = that.propsTypeData[item.clickType]
|
|
if (!typeData) {
|
|
return
|
|
}
|
|
|
|
const list = typeData.list
|
|
|
|
if (!list && list.length < 1) {
|
|
return
|
|
}
|
|
|
|
const data = typeData.list.find(typeItem => typeItem.id === val)
|
|
item.ext.selectVal.id = data.id
|
|
item.ext.selectVal.cover = data.cover
|
|
item.ext.selectVal.sourceUrl = data.sourceUrl
|
|
},
|
|
submitItem(index) {
|
|
const that = this
|
|
that.$refs.form.validate(valid => {
|
|
if (!valid) {
|
|
console.error('error submit!!')
|
|
return
|
|
}
|
|
const item = that.form.tmpConfigList[0]
|
|
const itemExt = item.ext
|
|
that.form.rewardConfigList.push({
|
|
type: item.type,
|
|
content: item.content,
|
|
detailType: item.clickType,
|
|
quantity: item.quantity,
|
|
cover: itemExt.selectVal.cover,
|
|
sourceUrl: itemExt.selectVal.sourceUrl,
|
|
remark: item.remark
|
|
})
|
|
that.form.tmpConfigList.splice(index, 1)
|
|
})
|
|
},
|
|
getTypeName(item) {
|
|
const typeData = this.propsTypeMap[item.detailType]
|
|
if (typeData) {
|
|
return typeData.name
|
|
}
|
|
return ''
|
|
},
|
|
deleteUpdateItem(index) {
|
|
this.form.rewardConfigList.splice(index, 1)
|
|
},
|
|
addContent(type) {
|
|
const that = this
|
|
that.$refs.form.validate(valid => {
|
|
if (!valid) {
|
|
console.error('error submit!!')
|
|
return
|
|
}
|
|
if (that.form.tmpConfigList && that.form.tmpConfigList.length > 0) {
|
|
that.submitItem(0)
|
|
}
|
|
if (that.isGoldOrDiamond(type) || type === 'SPECIAL_ID') {
|
|
that.addContentData(type)
|
|
return
|
|
}
|
|
if (that.isGameCoupon(type)) {
|
|
that.addContentData(type)
|
|
return
|
|
}
|
|
if (that.propsTypeData[type].loadData === true) {
|
|
that.addContentData(type)
|
|
return
|
|
}
|
|
that.propsTypeData[type].loading = true
|
|
|
|
if (that.isGift(type)) {
|
|
that.disableAddContent = true
|
|
listGiftBySysOrigin(that.form.sysOrigin).then(res => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loadData = true
|
|
that.propsTypeData[type].loading = false
|
|
const list = res.body || []
|
|
that.propsTypeData[type].list = list.map(item => {
|
|
return { type, id: item.id, name: item.giftName, amount: item.giftCandy, cover: item.giftPhoto, sourceUrl: item.giftSourceUrl }
|
|
})
|
|
that.addContentData(type)
|
|
}).catch(er => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loading = false
|
|
console.error(er)
|
|
})
|
|
return
|
|
}
|
|
|
|
const badgeType = that.getBadgeType(type)
|
|
if (badgeType) {
|
|
that.disableAddContent = true
|
|
listBadgePictureBySysOrigin(that.form.sysOrigin, badgeType).then(res => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loadData = true
|
|
that.propsTypeData[type].loading = false
|
|
const list = res.body || []
|
|
that.propsTypeData[type].list = list.map(item => {
|
|
return { type, id: item.badgeConfigId, name: item.badgeName, amount: 0, cover: item.selectUrl, sourceUrl: item.animationUrl }
|
|
})
|
|
that.addContentData(type)
|
|
}).catch(er => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loading = false
|
|
console.error(er)
|
|
})
|
|
return
|
|
}
|
|
|
|
if (type === 'NOBLE_VIP') {
|
|
that.disableAddContent = true
|
|
listNotFamilyBySysOriginType(that.form.sysOrigin, 'NOBLE_VIP').then(res => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loadData = true
|
|
that.propsTypeData[type].loading = false
|
|
const list = res.body || []
|
|
that.propsTypeData[type].list = list.map(item => {
|
|
return { type, id: item.id, name: item.name, amount: item.amount, cover: item.cover, sourceUrl: item.sourceUrl }
|
|
})
|
|
that.addContentData(type)
|
|
}).catch(er => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loading = false
|
|
console.error(er)
|
|
})
|
|
return
|
|
}
|
|
|
|
if (type === 'EMOJI') {
|
|
listGroupBySysOrigin(that.form.sysOrigin).then(res => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loadData = true
|
|
that.propsTypeData[type].loading = false
|
|
const list = res.body || []
|
|
that.propsTypeData[type].list = list.map(item => {
|
|
return { type, id: item.id, name: item.groupName, cover: item.cover }
|
|
})
|
|
that.addContentData(type)
|
|
}).catch(er => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loading = false
|
|
console.error(er)
|
|
})
|
|
return
|
|
}
|
|
|
|
that.disableAddContent = true
|
|
listSysOriginTypeList(that.sysOrigin, type).then(res => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loadData = true
|
|
that.propsTypeData[type].loading = false
|
|
const list = res.body || []
|
|
that.propsTypeData[type].list = list.map(item => {
|
|
return { type, id: item.id, name: item.name, amount: item.amount, cover: item.cover, sourceUrl: item.sourceUrl, remark: item.remark }
|
|
})
|
|
that.addContentData(type)
|
|
}).catch(er => {
|
|
that.disableAddContent = false
|
|
that.propsTypeData[type].loading = false
|
|
console.error(er)
|
|
})
|
|
})
|
|
},
|
|
getBadgeType(type) {
|
|
if (this.isUserBadge(type)) {
|
|
return 'ACTIVITY'
|
|
}
|
|
|
|
if (this.isRoomBadge(type)) {
|
|
return 'ROOM_ACHIEVEMENT'
|
|
}
|
|
return null
|
|
},
|
|
isCurrency(type) {
|
|
return type === 'GOLD' || type === 'DIAMOND'
|
|
},
|
|
isGameCoupon(type) {
|
|
return type === 'GAME_COUPON'
|
|
},
|
|
isBadge(type) {
|
|
return this.isRoomBadge(type) || this.isUserBadge(type)
|
|
},
|
|
isUserBadge(type) {
|
|
return type === 'BADGE'
|
|
},
|
|
isCustomize(type) {
|
|
return type === 'CUSTOMIZE'
|
|
},
|
|
isRoomBadge(type) {
|
|
return type === 'ROOM_BADGE'
|
|
},
|
|
isGift(type) {
|
|
return type === 'GIFT'
|
|
},
|
|
isTheme(type) {
|
|
return type === 'THEME'
|
|
},
|
|
addContentData(type) {
|
|
const that = this
|
|
that.form.tmpConfigList.push({
|
|
type: that.propsTypeMap[type].value,
|
|
clickType: type,
|
|
content: '',
|
|
quantity: '',
|
|
remark: '',
|
|
ext: {
|
|
title: that.propsTypeMap[type].name,
|
|
selectVal: { id: '', cover: '', sourceUrl: '' }
|
|
}
|
|
})
|
|
},
|
|
isGoldOrDiamond(type) {
|
|
return type === 'GOLD' || type === 'DIAMOND'
|
|
},
|
|
clickChangeSource() {
|
|
this.isChangeSource = !this.isChangeSource
|
|
if (this.isChangeSource === true && this.isLoadSourceTypeList === false) {
|
|
this.loadSourceType()
|
|
}
|
|
},
|
|
changeType(index) {
|
|
this.selectType = this.sourceTypeList[index]
|
|
this.form.sourceId = this.selectType.id
|
|
},
|
|
loadSourceType() {
|
|
const that = this
|
|
that.listTypeLoading = true
|
|
listSysOriginTypeList(that.sysOrigin, 'RIDE').then(res => {
|
|
that.listTypeLoading = false
|
|
that.isLoadSourceTypeList = false
|
|
that.sourceTypeList = res.body || []
|
|
}).catch(er => {
|
|
that.listTypeLoading = false
|
|
console.error(er)
|
|
})
|
|
},
|
|
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
|
|
},
|
|
handlePropsClose() {
|
|
this.$emit('close')
|
|
},
|
|
submitForm() {
|
|
const that = this
|
|
that.$refs.form.validate(valid => {
|
|
if (!valid) {
|
|
console.error('error submit!!')
|
|
return
|
|
}
|
|
|
|
if (!that.form.rewardConfigList || that.form.rewardConfigList.length < 1) {
|
|
that.$opsMessage.fail('请资源组配置内容.')
|
|
return
|
|
}
|
|
that.submitLoading = true
|
|
const form = deepClone(that.form)
|
|
form.rewardConfigList = []
|
|
that.form.rewardConfigList.forEach((item, index) => {
|
|
form.rewardConfigList.push({
|
|
type: item.type,
|
|
detailType: item.detailType,
|
|
content: item.content,
|
|
quantity: item.quantity,
|
|
sort: index + 1,
|
|
remark: item.remark,
|
|
cover: item.cover,
|
|
amount: item.amount
|
|
})
|
|
})
|
|
that.submitLoading = false
|
|
that.$emit('success', form.rewardConfigList)
|
|
})
|
|
},
|
|
clickSvgaplayer() {
|
|
this.svgaplayerVisable = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
.form-edit {
|
|
overflow: auto;
|
|
.dr-content {
|
|
padding: 5px 0px 5px 20px;
|
|
}
|
|
.sort {
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #f7f6f5;
|
|
margin: auto;
|
|
text-align: center;
|
|
line-height: 29px;
|
|
font-weight: bold;
|
|
}
|
|
.del {
|
|
font-size: 30px;
|
|
color: #F56C6C;
|
|
cursor: pointer;
|
|
}
|
|
.save {
|
|
font-size: 30px;
|
|
color: #FF9326;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.my-autocomplete {
|
|
li {
|
|
line-height: normal;
|
|
padding: 7px;
|
|
|
|
.name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.addr {
|
|
font-size: 12px;
|
|
color: #b4b4b4;
|
|
}
|
|
|
|
.highlighted .addr {
|
|
color: #ddd;
|
|
}
|
|
}
|
|
}
|
|
</style>
|