|
@@ -2,7 +2,7 @@
|
|
|
<el-dialog
|
|
|
:title="title"
|
|
|
:visible.sync="open"
|
|
|
- width="95%"
|
|
|
+ width="70%"
|
|
|
append-to-body
|
|
|
:close-on-click-modal="false"
|
|
|
@close="cancel"
|
|
@@ -18,40 +18,45 @@
|
|
|
element-loading-spinner="''"
|
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
>
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
<el-tab-pane label="模板配置:" name="first"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </el-tabs> -->
|
|
|
<div style="display: flex;width: 100%;">
|
|
|
- <div style="width: calc( 100% - 600px );padding-right: 10px;box-sizing: border-box;">
|
|
|
- <asEditor />
|
|
|
+ <div style="width: 600px;padding-right: 10px;box-sizing: border-box;justify-content: center;display: flex;flex-direction: column;">
|
|
|
+ <span style="justify-content: center;display: flex;font-size: 18px;font-weight: 600;">{{ form.name }}</span>
|
|
|
+ <IphoneXR
|
|
|
+ :url1="form.backImage?form.backImage.join(','):''"
|
|
|
+ :url2="form.backImage2?form.backImage2.join(','):''"
|
|
|
+ :color="form.productBg"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div style="width: 600px;flex-shrink: 0;border-left: 1px solid #ccc;padding-left: 10px;box-sizing: border-box;">
|
|
|
+ <div style="width: calc( 100% - 600px );flex-shrink: 0;border-left: 1px solid #ccc;padding-left: 10px;box-sizing: border-box;">
|
|
|
<el-form :model="form" ref="form" :rules="rules" label-width="150px">
|
|
|
<div>
|
|
|
- <el-form-item label="模板名称:" prop="activityName">
|
|
|
- <el-input style="width: 350px;" v-model="form.activityName" placeholder="请输入模板名称" maxlength="50" show-word-limit />
|
|
|
+ <el-form-item label="模板名称:" prop="name">
|
|
|
+ <el-input style="width: 350px;" v-model="form.name" placeholder="请输入模板名称" maxlength="50" show-word-limit />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="页面路径:" prop="activityName">
|
|
|
- <el-input style="width: 350px;" v-model="form.activityName" placeholder="请输入页面路径" maxlength="50" show-word-limit />
|
|
|
+ <el-form-item label="页面路径:" prop="appletPath">
|
|
|
+ <el-input style="width: 350px;" v-model="form.appletPath" placeholder="请输入页面路径" maxlength="50" show-word-limit />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="背景图1:" prop="image">
|
|
|
+ <el-form-item label="背景图1:" prop="backImage">
|
|
|
<div style="display: flex;">
|
|
|
<div
|
|
|
- v-for="(item,index) in form.image"
|
|
|
+ v-for="(item,index) in form.backImage"
|
|
|
:key="index"
|
|
|
style="width: 100px; height: 100px;position: relative;border: 1px solid #999;border-radius: 5px;margin-right: 20px;">
|
|
|
<el-image
|
|
|
style="width: 100%; height: 100%"
|
|
|
:src="item"
|
|
|
- :preview-src-list="form.image">
|
|
|
+ :preview-src-list="form.backImage">
|
|
|
</el-image>
|
|
|
- <span @click="handleRemove(index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
|
|
|
+ <span @click="handleRemove('backImage',index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
|
|
|
<i class="el-icon-error"></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div
|
|
|
style="width: 100px; height: 100px;"
|
|
|
- v-if="!form.image||form.image.length<1"
|
|
|
+ v-if="!form.backImage||form.backImage.length<1"
|
|
|
v-loading="actionUrlLoading"
|
|
|
element-loading-text="上传中..."
|
|
|
element-loading-spinner="el-icon-loading"
|
|
@@ -64,38 +69,37 @@
|
|
|
bucket: 'tourism'
|
|
|
}"
|
|
|
:show-file-list="false"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :on-progress="handleAvatarProgress"
|
|
|
+ :before-upload="(file)=>beforeAvatarUpload(file)"
|
|
|
+ :on-success="(response, file, fileList)=>handleAvatarSuccess(response, file, fileList,'backImage','actionUrlLoading')"
|
|
|
+ :on-progress="()=>handleAvatarProgress('actionUrlLoading')"
|
|
|
:disabled="actionUrlLoading"
|
|
|
- :on-error="handleAvatarError"
|
|
|
+ :on-error="()=>handleAvatarError('actionUrlLoading')"
|
|
|
>
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
-
|
|
|
+ <span>支持jpg/png/gif,支持1MB大小以内的图片上传</span>
|
|
|
</div>
|
|
|
- <span>建议尺寸375px X 392px,支持jpg/png/gif,支持1MB大小以内的图片上传</span>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="背景图2:" prop="image">
|
|
|
+ <el-form-item label="背景图2:" prop="backImage2">
|
|
|
<div style="display: flex;">
|
|
|
<div
|
|
|
- v-for="(item,index) in form.image"
|
|
|
+ v-for="(item,index) in form.backImage2"
|
|
|
:key="index"
|
|
|
style="width: 100px; height: 100px;position: relative;border: 1px solid #999;border-radius: 5px;margin-right: 20px;">
|
|
|
<el-image
|
|
|
style="width: 100%; height: 100%"
|
|
|
:src="item"
|
|
|
- :preview-src-list="form.image">
|
|
|
+ :preview-src-list="form.backImage2">
|
|
|
</el-image>
|
|
|
- <span @click="handleRemove(index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
|
|
|
+ <span @click="handleRemove('backImage2',index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
|
|
|
<i class="el-icon-error"></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div
|
|
|
style="width: 100px; height: 100px;"
|
|
|
- v-if="!form.image||form.image.length<1"
|
|
|
- v-loading="actionUrlLoading"
|
|
|
+ v-if="!form.backImage2||form.backImage2.length<1"
|
|
|
+ v-loading="actionUrlLoading1"
|
|
|
element-loading-text="上传中..."
|
|
|
element-loading-spinner="el-icon-loading"
|
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
@@ -107,20 +111,20 @@
|
|
|
bucket: 'tourism'
|
|
|
}"
|
|
|
:show-file-list="false"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :on-progress="handleAvatarProgress"
|
|
|
- :disabled="actionUrlLoading"
|
|
|
- :on-error="handleAvatarError"
|
|
|
+ :before-upload="(file)=>beforeAvatarUpload(file)"
|
|
|
+ :on-success="(response, file, fileList)=>handleAvatarSuccess(response, file, fileList,'backImage2','actionUrlLoading1')"
|
|
|
+ :on-progress="()=>handleAvatarProgress('actionUrlLoading1')"
|
|
|
+ :disabled="actionUrlLoading1"
|
|
|
+ :on-error="()=>handleAvatarError('actionUrlLoading1')"
|
|
|
>
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <span>建议尺寸375px X 392px,支持jpg/png/gif,支持1MB大小以内的图片上传</span>
|
|
|
+ <span>支持jpg/png/gif,支持1MB大小以内的图片上传</span>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="产品区域背景色值:" prop="eventTime">
|
|
|
+ <el-form-item label="产品区域背景色值:" prop="productBg">
|
|
|
<el-color-picker v-model="form.productBg"></el-color-picker>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
@@ -155,10 +159,10 @@ import {
|
|
|
listTableApi,
|
|
|
} from '@/api/CURD'
|
|
|
import selectTicketOrders from "../model/selectTicketOrders.vue"
|
|
|
-import asEditor from "@/myComponents/asEditor"
|
|
|
+import IphoneXR from "../model/iphoneXR.vue"
|
|
|
export default {
|
|
|
name: "addAndEdit",
|
|
|
- components: {selectTicketOrders,asEditor},
|
|
|
+ components: {selectTicketOrders,IphoneXR},
|
|
|
dicts: ['tourism_couponManagement_type','tourism_couponManagement_useUserType','tourism_couponManagement_receiveType','tourism_couponManagement_useConfig','goods_type'],
|
|
|
data() {
|
|
|
return {
|
|
@@ -178,18 +182,18 @@ export default {
|
|
|
id: undefined,
|
|
|
},
|
|
|
rules: {
|
|
|
- activityName: [{ required: true, message: "请输入活动名称", trigger: ["change","blur"] }],
|
|
|
- image: [{ required: true, message: "请上传封面", trigger: ["change","blur"] }],
|
|
|
- eventTime: [{ required: true, message: "请选择活动起止时间", trigger: ["change","blur"] }],
|
|
|
- jsonObj: [{ required: true, message: "请选择模板", trigger: ["change","blur"] }],
|
|
|
- useUserRelid_2: [{ required: true, message: "请选择优惠券", trigger: ["change","blur"] }],
|
|
|
- useUserRelid_3: [{ required: true, message: "请选择景区门票", trigger: ["change","blur"] }],
|
|
|
+ name: [{ required: true, message: "请输入模板名称", trigger: ["change","blur"] }],
|
|
|
+ appletPath: [{ required: true, message: "请输入页面路径", trigger: ["change","blur"] }],
|
|
|
+ backImage: [{ required: true, message: "请上传背景图1", trigger: ["change","blur"] }],
|
|
|
+ backImage2: [{ required: true, message: "请上传背景图2", trigger: ["change","blur"] }],
|
|
|
+ productBg: [{ required: true, message: "请选择产品区域背景色值", trigger: ["change","blur"] }],
|
|
|
},
|
|
|
|
|
|
activeName: 'first',
|
|
|
|
|
|
actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
|
|
|
actionUrlLoading: false,
|
|
|
+ actionUrlLoading1: false,
|
|
|
|
|
|
jsonObjList: []
|
|
|
};
|
|
@@ -208,15 +212,15 @@ export default {
|
|
|
this.$set(this,'form',{
|
|
|
...row,
|
|
|
eventTime: [], // 活动时间段
|
|
|
- image: [],
|
|
|
- useUserRelid_2: [],
|
|
|
- useUserRelid_3: [],
|
|
|
+ backImage: [],
|
|
|
+ backImage2: [],
|
|
|
})
|
|
|
this.formStatus = 1
|
|
|
}else if(model=='EDIT') { // 新增
|
|
|
let obj = {
|
|
|
...row,
|
|
|
- image: row.image?row.image.split(','):[],
|
|
|
+ backImage: row.backImage?row.backImage.split(','):[],
|
|
|
+ backImage2: row.backImage2?row.backImage2.split(','):[],
|
|
|
}
|
|
|
this.$set(this,'form',{
|
|
|
memberId: row.id
|
|
@@ -241,10 +245,10 @@ export default {
|
|
|
if(res.code == 200) {
|
|
|
let obj = {
|
|
|
...res.data,
|
|
|
- eventTime: [res.data.startDate,res.data.endDate], // 发放时间段
|
|
|
- image: res.data.image?res.data.image.split(','):[],
|
|
|
- useUserRelid_3: [],
|
|
|
- useUserRelid_2: []
|
|
|
+ name: res.data.templateName,
|
|
|
+ backImage: res.data.templateStyle.backImage?res.data.templateStyle.backImage.split(','):[],
|
|
|
+ backImage2: res.data.templateStyle.backImage2?res.data.templateStyle.backImage2.split(','):[],
|
|
|
+ productBg: res.data.templateStyle.productBg?res.data.templateStyle.productBg:'',
|
|
|
}
|
|
|
this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
|
|
|
this.formStatus = 1
|
|
@@ -288,12 +292,14 @@ export default {
|
|
|
this.loadingText = "提交数据中..."
|
|
|
this.loading = true
|
|
|
let param = JSON.parse(JSON.stringify(this.form))
|
|
|
- param['startDate'] = param.eventTime[0]
|
|
|
- param['endDate'] = param.eventTime[1]
|
|
|
-
|
|
|
- delete param.eventTime
|
|
|
- delete param.useUserRelid_2
|
|
|
- delete param.useUserRelid_3
|
|
|
+ param['templateStyle'] = {
|
|
|
+ backImage: this.form.backImage.join(','),
|
|
|
+ backImage2: this.form.backImage2.join(','),
|
|
|
+ productBg: this.form.productBg,
|
|
|
+ }
|
|
|
+ delete param.backImage
|
|
|
+ delete param.backImage2
|
|
|
+ delete param.productBg
|
|
|
if (this.model != 'ADD') {
|
|
|
addTableApi(
|
|
|
this.configUrl.edit,{
|
|
@@ -361,34 +367,33 @@ export default {
|
|
|
|
|
|
},
|
|
|
/** 上传图片 单张 */
|
|
|
- handleAvatarSuccess(response, file, fileList) {
|
|
|
+ handleAvatarSuccess(response, file, fileList,name,loadingName) {
|
|
|
console.log("res, file",response, file, fileList)
|
|
|
- this.actionUrlLoading = false
|
|
|
+ this[loadingName] = false
|
|
|
if(response.code == 200) {
|
|
|
- this.form.imag.push(response.data.url)
|
|
|
+ this.form[name].push(response.data.url)
|
|
|
}
|
|
|
},
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const isLt2M = file.size / 1024 / 1024 <= 1;
|
|
|
+ beforeAvatarUpload(file,size=1,typeList=['png','jepg','jpg','gif']) {
|
|
|
+ const isLt2M = file.size / 1024 / 1024 <= size;
|
|
|
let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
|
|
|
- let typeList = ['png','jepg','jpg']
|
|
|
const isJPG = typeList.includes(testmsg);
|
|
|
if (!isJPG) {
|
|
|
this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
|
|
|
}
|
|
|
if (!isLt2M) {
|
|
|
- this.$message.error('上传图片图片大小不能超过 1MB!');
|
|
|
+ this.$message.error(`上传图片图片大小不能超过 ${size}MB!`);
|
|
|
}
|
|
|
return isJPG && isLt2M;
|
|
|
},
|
|
|
- handleAvatarProgress(){
|
|
|
- this.actionUrlLoading = true
|
|
|
+ handleAvatarProgress(loadingName){
|
|
|
+ this[loadingName] = true
|
|
|
},
|
|
|
- handleAvatarError() {
|
|
|
- this.actionUrlLoading = false
|
|
|
+ handleAvatarError(loadingName) {
|
|
|
+ this[loadingName] = false
|
|
|
},
|
|
|
- handleRemove(index) {
|
|
|
- this.form.imag.splice(index,1)
|
|
|
+ handleRemove(name,index) {
|
|
|
+ this.form[name].splice(index,1)
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -399,7 +404,7 @@ export default {
|
|
|
padding: 0 30px;
|
|
|
padding: 0 30px;
|
|
|
min-height: 50vh;
|
|
|
- max-height: 65vh;
|
|
|
+ max-height: 70vh;
|
|
|
overflow-y: auto;
|
|
|
>div {
|
|
|
width: 100%;
|