|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<div class="app-container-search main-bgcolor main-radius" style="padding: 10px 30px; display: flex;">
|
|
|
|
|
<div style="flex: 1;">
|
|
|
|
|
<h1 class="">{{ title }}</h1>
|
|
|
|
|
<div class="uni-template-container setting-radio" style="padding: 20px;">
|
|
|
|
|
<el-form
|
|
|
|
|
:model="form"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
ref="form"
|
|
|
|
|
label-width="160px"
|
|
|
|
|
>
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div class="title-container">
|
|
|
|
|
基本信息
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-form-item label="模板名称" prop="templateName">
|
|
|
|
|
<el-input class="w400" placeholder="请输入" v-model="form.templateName" maxlength="64" clearable></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="扫码弹窗" prop="showPop">
|
|
|
|
|
<el-radio v-model="form.showPop" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showPop" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="模板类型" prop="templateType">
|
|
|
|
|
<el-radio v-model="form.templateType" :label="1">标准模板</el-radio>
|
|
|
|
|
<el-radio v-model="form.templateType" :label="2">定制模板</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 标准模板 -->
|
|
|
|
|
<div class="standard-container" v-if="form.templateType == 1">
|
|
|
|
|
<el-form-item label="头部背景图" prop="bgUrl">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('bgUrl')">
|
|
|
|
|
<img :src="form.bgUrl" alt="扫码记录图标" v-if="form.bgUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.bgUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="头部字体颜色" prop="fontColor">
|
|
|
|
|
<el-color-picker v-model="form.fontColor"></el-color-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="扫码记录" prop="showScanRecord">
|
|
|
|
|
<el-radio v-model="form.showScanRecord" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showScanRecord" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="扫码记录图标" prop="scanRecordIconUrl" v-if="form.showScanRecord">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('scanRecordIconUrl')">
|
|
|
|
|
<img :src="form.scanRecordIconUrl" alt="扫码记录图标" v-if="form.scanRecordIconUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.scanRecordIconUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="切换语言" prop="showChangeLanguage">
|
|
|
|
|
<el-radio v-model="form.showChangeLanguage" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showChangeLanguage" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 定制模板 -->
|
|
|
|
|
<div class="custom-container" v-if="form.templateType == 2">
|
|
|
|
|
<el-form-item label="背景图" prop="bgUrl">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('bgUrl')">
|
|
|
|
|
<img :src="form.bgUrl" alt="扫码记录图标" v-if="form.bgUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.bgUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 节点配置 -->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div class="title-container">
|
|
|
|
|
节点配置
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<span>节点对应小程序显示配置中的环节信息, 节点位置以左上角为起点, 通过XY轴百分比值确定中心点位置; 图标显示尺寸为图标在小程序上显示的大小。</span>
|
|
|
|
|
<div v-for="(item, index) in form.templateItemList" :key="index" class="uni-template-node-container">
|
|
|
|
|
<el-form-item :label='item.name' prop="name">
|
|
|
|
|
<el-button type="danger" icon="el-icon-delete-solid" class="uni-template-node-icon" @click="removeNode(index)"></el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="图标" :prop="`templateItemList[${index}][iconUrl]`" :rules="rules.iconUrl">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial(`templateItemList,${index}`)">
|
|
|
|
|
<img :src="item.iconUrl" alt="扫码记录图标" v-if="item.iconUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!item.iconUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="位置" :required="true" :show-message="false">
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<el-form-item label="" :prop="`templateItemList[${index}][x]`" :rules="rules.x">
|
|
|
|
|
<el-input class="w200" v-model="item.x" @input="handleNumberInput(item.x, 100, 0, 'x', index)">
|
|
|
|
|
<span slot="prepend">X:</span>
|
|
|
|
|
<span slot="append">%</span>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="" :prop="`templateItemList[${index}][y]`" :rules="rules.y" style="margin-left: 20px;">
|
|
|
|
|
<el-input class="w200" v-model="item.y" @input="handleNumberInput(item.y, 100, 0, 'y', index)">
|
|
|
|
|
<span slot="prepend">Y:</span>
|
|
|
|
|
<span slot="append">%</span>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="图标显示尺寸" :required="true" :show-message="false">
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<el-form-item label="" :prop="`templateItemList[${index}][width]`" :rules="rules.width">
|
|
|
|
|
<el-input class="w200" v-model="item.width" @input="handleNumberInput(item.width, 100, 0, 'width', index)">
|
|
|
|
|
<span slot="prepend">宽:</span>
|
|
|
|
|
<span slot="append">px</span>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="" :prop="`templateItemList[${index}][height]`" :rules="rules.height" style="margin-left: 20px;">
|
|
|
|
|
<el-input class="w200" v-model="item.height" @input="handleNumberInput(item.height, 100, 0, 'height', index)">
|
|
|
|
|
<span slot="prepend">高:</span>
|
|
|
|
|
<span slot="append">px</span>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="" v-if="index == form.templateItemList.length - 1">
|
|
|
|
|
<el-button type="primary" icon="el-icon-plus" class="uni-template-node-icon" @click="addNode"></el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uni-template-node-container" v-if="form.templateItemList.length == 0">
|
|
|
|
|
<el-button type="primary" icon="el-icon-plus" class="uni-template-node-icon" style="margin: 0px 0px 10px 160px;" @click="addNode"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 图标配置 -->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div class="title-container">
|
|
|
|
|
图标配置
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-form-item label="扫码记录" prop="showScanRecord">
|
|
|
|
|
<el-radio v-model="form.showScanRecord" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showScanRecord" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="扫码记录图标" prop="scanRecordIconUrl" v-if="form.showScanRecord">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('scanRecordIconUrl')">
|
|
|
|
|
<img :src="form.scanRecordIconUrl" alt="扫码记录图标" v-if="form.scanRecordIconUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.scanRecordIconUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="商品详情" prop="showGoodsDetail">
|
|
|
|
|
<el-radio v-model="form.showGoodsDetail" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showGoodsDetail" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="商品详情图标" prop="goodsDetailIconUrl" v-if="form.showGoodsDetail">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('goodsDetailIconUrl')">
|
|
|
|
|
<img :src="form.goodsDetailIconUrl" alt="扫码记录图标" v-if="form.goodsDetailIconUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.goodsDetailIconUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="AI助手" prop="showAi">
|
|
|
|
|
<el-radio v-model="form.showAi" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showAi" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="AI助手图标" prop="aiIconUrl" v-if="form.showAi">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('aiIconUrl')">
|
|
|
|
|
<img :src="form.aiIconUrl" alt="扫码记录图标" v-if="form.aiIconUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.aiIconUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="商城" prop="showShop">
|
|
|
|
|
<el-radio v-model="form.showShop" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showShop" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="商城图标" prop="shopIconUrl" v-if="form.showShop">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('shopIconUrl')">
|
|
|
|
|
<img :src="form.shopIconUrl" alt="扫码记录图标" v-if="form.shopIconUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.shopIconUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="切换语言" prop="showChangeLanguage">
|
|
|
|
|
<el-radio v-model="form.showChangeLanguage" :label="true">显示</el-radio>
|
|
|
|
|
<el-radio v-model="form.showChangeLanguage" :label="false">不显示</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="切换语言图标" prop="changeLanguageIconUrl" v-if="form.showChangeLanguage">
|
|
|
|
|
<div class="icon-container" @click="openSelectMaterial('changeLanguageIconUrl')">
|
|
|
|
|
<img :src="form.changeLanguageIconUrl" alt="扫码记录图标" v-if="form.changeLanguageIconUrl" style="width: 100px;height: 100px;">
|
|
|
|
|
<i class="el-icon-plus" v-if="!form.changeLanguageIconUrl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="设为默认小程序模板" prop="defaultTemplate">
|
|
|
|
|
<el-switch v-model="form.defaultTemplate" :active-value="true" :inactive-value="false"></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
|
|
<el-button @click="$router.go(-1)">取 消</el-button>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="uni-template-preview">
|
|
|
|
|
<div class="preview-title">模板预览</div>
|
|
|
|
|
<div class="mobile-border">
|
|
|
|
|
<div class="mobile-outer-border">
|
|
|
|
|
<img src="@/assets/images/mobile-border.png" fit="contain" style="width: 100%; height: 100%;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="x-container">
|
|
|
|
|
<div class="x-text">X</div>
|
|
|
|
|
<div class="x-line"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="y-container">
|
|
|
|
|
<div class="y-text">Y</div>
|
|
|
|
|
<div class="y-line"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mobile-inner-border">
|
|
|
|
|
<appPreview :info="form" :operateDate="operateDate"></appPreview>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 选择素材弹窗 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="选择素材"
|
|
|
|
|
:visible.sync="selectMaterialVisible"
|
|
|
|
|
width="1300px"
|
|
|
|
|
:before-close="closeSelectMaterial"
|
|
|
|
|
append-to-body
|
|
|
|
|
class="select-material-dialog"
|
|
|
|
|
>
|
|
|
|
|
<div class="select-material-container">
|
|
|
|
|
<div class="left-container">
|
|
|
|
|
<el-input v-model="queryGroupParams.groupName" placeholder="请输入分组名称" @keyup.enter.native="getMaterialGroup()"></el-input>
|
|
|
|
|
<el-menu v-if="materialGroupList.length > 0" default-active="all">
|
|
|
|
|
<el-menu-item index="all" @click="getMaterialList()">全部</el-menu-item>
|
|
|
|
|
<el-menu-item v-for="item in materialGroupList" :key="item.id" :index="String(item.id)" @click="getMaterialList(item.id)">{{ item.groupName }}</el-menu-item>
|
|
|
|
|
</el-menu>
|
|
|
|
|
<div style="margin-top: 20px; text-align: center;" v-else>暂无分组数据</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right-container" id="meterial-list" style="display: relative;">
|
|
|
|
|
<div v-if="materialList.length > 0">
|
|
|
|
|
<el-button type="primary" @click="openUploadImage">上传图片</el-button>
|
|
|
|
|
<div class="material-item-container">
|
|
|
|
|
<el-card
|
|
|
|
|
:body-style="{ padding: '5px' }"
|
|
|
|
|
v-for="(item, index) in materialList"
|
|
|
|
|
:key="index" class="material-item"
|
|
|
|
|
:class="{ 'item-active': item.selected }"
|
|
|
|
|
@click.native="clickMaterialItem(index)"
|
|
|
|
|
>
|
|
|
|
|
<img :src="item.materialUrl" fit="contain" style="width: 100%; height: 160px;">
|
|
|
|
|
<div style="padding: 5px 14px;">
|
|
|
|
|
<el-checkbox v-model="item.selected">{{ item.materialName }}</el-checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
|
<pagination
|
|
|
|
|
v-show="materialTotal > 0"
|
|
|
|
|
:total="materialTotal"
|
|
|
|
|
:page.sync="queryParams.pageNo"
|
|
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
|
|
@pagination="getMaterialList"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<el-empty description="暂无数据"></el-empty>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="closeSelectMaterial">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitselectMaterial">确定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 选择素材弹窗 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="上传图片"
|
|
|
|
|
:visible.sync="uploadImageVisible"
|
|
|
|
|
width="640px"
|
|
|
|
|
:before-close="closeUploadImage"
|
|
|
|
|
append-to-body
|
|
|
|
|
class="select-material-dialog"
|
|
|
|
|
>
|
|
|
|
|
<el-form ref="uploadForm" :model="uploadForm" :rules="uploadRules" label-width="100px">
|
|
|
|
|
<el-form-item label="上传至分组" prop="groupId">
|
|
|
|
|
<el-select v-model="uploadForm.groupId" placeholder="请选择分组">
|
|
|
|
|
<el-option v-for="item in materialGroupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="上传图片"
|
|
|
|
|
prop="materialFileList"
|
|
|
|
|
>
|
|
|
|
|
<imageUpload
|
|
|
|
|
v-model="uploadForm.materialFileList"
|
|
|
|
|
:limit="10"
|
|
|
|
|
:fileSize="10"
|
|
|
|
|
:fileType="['png', 'jpg', 'jpeg', 'gif', 'svg']"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="closeUploadImage">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitUploadImage" v-loading.lock="uploadImageLoading">确定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { Loading } from 'element-ui';
|
|
|
|
|
import appPreview from '@/components/Customer/appPreview';
|
|
|
|
|
import { createStandardTemplate, createCustomizeTemplate, updateStandardTemplate, updateCustomizeTemplate, getUniTemplate } from '@/api/configure/uniTemplate';
|
|
|
|
|
import {
|
|
|
|
|
getMaterialManagementPage,
|
|
|
|
|
getMaterialGroupList,
|
|
|
|
|
createMaterialManagement,
|
|
|
|
|
} from "@/api/configure/materialManagement";
|
|
|
|
|
import { formatToPositiveNumber } from "@/utils/number";
|
|
|
|
|
import ImageUpload from "@/components/ImageUpload2";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
appPreview,
|
|
|
|
|
ImageUpload
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 展示内容（农事作业等）
|
|
|
|
|
operateDate: {},
|
|
|
|
|
form: {},
|
|
|
|
|
rules: {
|
|
|
|
|
templateName: [{ required: true, message: "模板名称不能为空", trigger: "change" }],
|
|
|
|
|
showPop: [{ required: true, message: "扫码弹窗显示状态不能为空", trigger: "change" }],
|
|
|
|
|
templateType: [{ required: true, message: "模板类型不能为空", trigger: "change" }],
|
|
|
|
|
bgUrl: [{ required: true, message: "背景图不能为空", trigger: "change" }],
|
|
|
|
|
fontColor: [{ required: true, message: "字体颜色不能为空", trigger: "change" }],
|
|
|
|
|
showScanRecord: [{ required: true, message: "扫码记录显示状态不能为空", trigger: "change" }],
|
|
|
|
|
scanRecordIconUrl: [{ required: true, message: "扫码记录图标不能为空", trigger: "change" }],
|
|
|
|
|
showGoodsDetail: [{ required: true, message: "商品详情显示状态不能为空", trigger: "change" }],
|
|
|
|
|
goodsDetailIconUrl: [{ required: true, message: "商品详情图标不能为空", trigger: "change" }],
|
|
|
|
|
showAi: [{ required: true, message: "AI助手显示状态不能为空", trigger: "change" }],
|
|
|
|
|
aiIconUrl: [{ required: true, message: "AI助手图标不能为空", trigger: "change" }],
|
|
|
|
|
showShop: [{ required: true, message: "商城显示状态不能为空", trigger: "change" }],
|
|
|
|
|
shopIconUrl: [{ required: true, message: "商城图标不能为空", trigger: "change" }],
|
|
|
|
|
showChangeLanguage: [{ required: true, message: "切换语言显示状态不能为空", trigger: "change" }],
|
|
|
|
|
changeLanguageIconUrl: [{ required: true, message: "切换语言图标不能为空", trigger: "change" }],
|
|
|
|
|
defaultTemplate: [{ required: true, message: "是否设为默认小程序模板不能为空", trigger: "change" }],
|
|
|
|
|
iconUrl: [{ required: true, message: "图标不能为空", trigger: "change" }],
|
|
|
|
|
x: [{ required: true, message: "X轴百分比值不能为空", trigger: "change" }],
|
|
|
|
|
y: [{ required: true, message: "Y轴百分比值不能为空", trigger: "change" }],
|
|
|
|
|
width: [{ required: true, message: "图标显示宽度不能为空", trigger: "change" }],
|
|
|
|
|
height: [{ required: true, message: "图标显示高度不能为空", trigger: "change" }],
|
|
|
|
|
},
|
|
|
|
|
title: '新增模板',
|
|
|
|
|
// 所属商户列表
|
|
|
|
|
businessNameList: [],
|
|
|
|
|
isDisabled: false,
|
|
|
|
|
|
|
|
|
|
// 选择素材弹窗相关参数
|
|
|
|
|
selectMaterialVisible: false,
|
|
|
|
|
selectMaterialType: '',
|
|
|
|
|
selectedMaterialUrl: '',
|
|
|
|
|
loadingMaterial: null,
|
|
|
|
|
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
},
|
|
|
|
|
queryGroupParams: {
|
|
|
|
|
groupName: null,
|
|
|
|
|
},
|
|
|
|
|
materialList: [],
|
|
|
|
|
materialTotal: 0,
|
|
|
|
|
materialGroupList: [],
|
|
|
|
|
|
|
|
|
|
// 上传图片相关参数
|
|
|
|
|
uploadImageVisible: false,
|
|
|
|
|
uploadImageLoading: false,
|
|
|
|
|
uploadForm: {
|
|
|
|
|
groupId: undefined,
|
|
|
|
|
materialFileList: [],
|
|
|
|
|
},
|
|
|
|
|
uploadRules: {
|
|
|
|
|
groupId: [{ required: true, message: "请选择分组", trigger: "change" }],
|
|
|
|
|
materialFileList: [{ required: true, message: "请上传图片", trigger: "change" }],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.reset();
|
|
|
|
|
let id = this.$route.query.id;
|
|
|
|
|
if (id) {
|
|
|
|
|
this.title = "修改模板";
|
|
|
|
|
this.isDisabled = true;
|
|
|
|
|
getUniTemplate(id).then(({ data })=>{
|
|
|
|
|
if(data){
|
|
|
|
|
this.form = {
|
|
|
|
|
...data,
|
|
|
|
|
templateItemList: data.templateItemList.map((item, index) => {
|
|
|
|
|
return {
|
|
|
|
|
...item,
|
|
|
|
|
name: '节点' + (index + 1),
|
|
|
|
|
};
|
|
|
|
|
}),
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
reset() {
|
|
|
|
|
this.form = {
|
|
|
|
|
id: undefined,
|
|
|
|
|
templateName: '',
|
|
|
|
|
showPop: true,
|
|
|
|
|
templateType: 1,
|
|
|
|
|
bgUrl: undefined,
|
|
|
|
|
fontColor: '#ffffff',
|
|
|
|
|
templateItemList: [],
|
|
|
|
|
showScanRecord: true,
|
|
|
|
|
scanRecordIconUrl: undefined,
|
|
|
|
|
showGoodsDetail: true,
|
|
|
|
|
goodsDetailIconUrl: undefined,
|
|
|
|
|
showAi: true,
|
|
|
|
|
aiIconUrl: undefined,
|
|
|
|
|
showShop: true,
|
|
|
|
|
shopIconUrl: undefined,
|
|
|
|
|
showChangeLanguage: true,
|
|
|
|
|
changeLanguageIconUrl: undefined,
|
|
|
|
|
defaultTemplate: false,
|
|
|
|
|
};
|
|
|
|
|
this.resetForm("form");
|
|
|
|
|
},
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.$refs["form"].validate(async valid => {
|
|
|
|
|
if (!valid) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(this.form.id) {
|
|
|
|
|
let rest = {};
|
|
|
|
|
if (this.form.templateType == 1) {
|
|
|
|
|
rest = await updateStandardTemplate(this.form);
|
|
|
|
|
} else {
|
|
|
|
|
rest = await updateCustomizeTemplate(this.form);
|
|
|
|
|
}
|
|
|
|
|
if(rest.data) {
|
|
|
|
|
this.$message.success("修改成功");
|
|
|
|
|
this.$router.go(-1);
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
let res = {};
|
|
|
|
|
if (this.form.templateType == 1) {
|
|
|
|
|
res = await createStandardTemplate(this.form);
|
|
|
|
|
} else {
|
|
|
|
|
res = await createCustomizeTemplate(this.form);
|
|
|
|
|
}
|
|
|
|
|
if (res.data) {
|
|
|
|
|
this.$message.success("创建成功");
|
|
|
|
|
this.$router.go(-1);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 添加节点
|
|
|
|
|
addNode() {
|
|
|
|
|
this.form.templateItemList.push({
|
|
|
|
|
name: '节点' + (this.form.templateItemList.length + 1),
|
|
|
|
|
iconUrl: '',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 0,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 删除节点
|
|
|
|
|
removeNode(index) {
|
|
|
|
|
this.form.templateItemList.splice(index, 1);
|
|
|
|
|
this.form.templateItemList.forEach((item, index) => {
|
|
|
|
|
item.name = '节点' + (index + 1);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 输入框数字限制
|
|
|
|
|
handleNumberInput(value, max, min, type, index) {
|
|
|
|
|
if (value == "" || value == undefined || (value.indexOf("-") == 0 && Number(value) == 0)) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
value = `${value}`.replace(/[^\d.-]/g, "");
|
|
|
|
|
let newValue = formatToPositiveNumber(value, 2);
|
|
|
|
|
const signs =
|
|
|
|
|
value == "-" ||
|
|
|
|
|
(Number.isNaN(Number(value)) && value.indexOf("-") == 0) ||
|
|
|
|
|
Number(value) < 0
|
|
|
|
|
? "-"
|
|
|
|
|
: "";
|
|
|
|
|
if (Number(`${signs}${newValue}`) > max) {
|
|
|
|
|
this.form.templateItemList[index][type] = max;
|
|
|
|
|
} else if (Number(`${signs}${newValue}`) < min) {
|
|
|
|
|
this.form.templateItemList[index][type] = min;
|
|
|
|
|
} else {
|
|
|
|
|
this.form.templateItemList[index][type] = `${signs}${newValue}`;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 素材弹窗相关
|
|
|
|
|
openSelectMaterial(type) {
|
|
|
|
|
this.selectMaterialVisible = true;
|
|
|
|
|
this.selectMaterialType = type;
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.loadingMaterial = Loading.service({ text: '加载中...', target: '.right-container' });
|
|
|
|
|
getMaterialGroupList().then(({ data }) => {
|
|
|
|
|
this.materialGroupList = data;
|
|
|
|
|
if (this.materialGroupList.length > 0) {
|
|
|
|
|
getMaterialManagementPage(this.queryParams).then(({ data: { list, total } }) => {
|
|
|
|
|
this.materialList = list.map((item) => {
|
|
|
|
|
if (this.selectMaterialType.indexOf("templateItemList") > -1) {
|
|
|
|
|
item.selected = item.materialUrl === this.form.templateItemList[this.selectMaterialType.split(",")[1]].iconUrl;
|
|
|
|
|
} else {
|
|
|
|
|
item.selected = item.materialUrl === this.form[this.selectMaterialType];
|
|
|
|
|
}
|
|
|
|
|
return item;
|
|
|
|
|
});
|
|
|
|
|
this.materialTotal = total;
|
|
|
|
|
this.loadingMaterial.close();
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.loadingMaterial.close();
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.loadingMaterial.close();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getMaterialGroup() {
|
|
|
|
|
getMaterialGroupList(this.queryGroupParams).then(({ data }) => {
|
|
|
|
|
this.materialGroupList = data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getMaterialList(id) {
|
|
|
|
|
this.queryParams.groupId = id;
|
|
|
|
|
this.loadingMaterial = Loading.service({ text: '加载中...', target: '.right-container' });
|
|
|
|
|
getMaterialManagementPage(this.queryParams).then(( { data: { list, total } } ) => {
|
|
|
|
|
this.materialList = list.map((item) => {
|
|
|
|
|
if (this.selectMaterialType.indexOf("templateItemList") > -1) {
|
|
|
|
|
item.selected = item.materialUrl === this.form.templateItemList[this.selectMaterialType.split(",")[1]].iconUrl;
|
|
|
|
|
} else {
|
|
|
|
|
item.selected = item.materialUrl === this.form[this.selectMaterialType];
|
|
|
|
|
}
|
|
|
|
|
return item;
|
|
|
|
|
});
|
|
|
|
|
this.materialTotal = total;
|
|
|
|
|
this.loadingMaterial.close();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
closeSelectMaterial() {
|
|
|
|
|
this.selectMaterialVisible = false;
|
|
|
|
|
this.materialList = [];
|
|
|
|
|
this.materialTotal = 0;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 确认选择素材
|
|
|
|
|
submitselectMaterial() {
|
|
|
|
|
if (this.selectMaterialType.indexOf("templateItemList") > -1) {
|
|
|
|
|
this.form.templateItemList[this.selectMaterialType.split(",")[1]].iconUrl = this.selectedMaterialUrl;
|
|
|
|
|
} else {
|
|
|
|
|
this.form[this.selectMaterialType] = this.selectedMaterialUrl;
|
|
|
|
|
}
|
|
|
|
|
this.selectMaterialVisible = false;
|
|
|
|
|
},
|
|
|
|
|
resetMaterialForm() {
|
|
|
|
|
this.selectedMaterialUrl = '';
|
|
|
|
|
},
|
|
|
|
|
// 确认选择素材
|
|
|
|
|
clickMaterialItem(index) {
|
|
|
|
|
const item = this.materialList[index];
|
|
|
|
|
if (!item.selected) {
|
|
|
|
|
this.selectedMaterialUrl = item.materialUrl;
|
|
|
|
|
} else {
|
|
|
|
|
this.selectedMaterialUrl = '';
|
|
|
|
|
}
|
|
|
|
|
this.materialList = this.materialList.map((item, i) => {
|
|
|
|
|
if (i === index && !item.selected) {
|
|
|
|
|
item.selected = true;
|
|
|
|
|
} else {
|
|
|
|
|
item.selected = false;
|
|
|
|
|
}
|
|
|
|
|
return item;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 打开上传图片弹窗
|
|
|
|
|
openUploadImage() {
|
|
|
|
|
this.uploadImageVisible = true;
|
|
|
|
|
},
|
|
|
|
|
closeUploadImage() {
|
|
|
|
|
this.uploadImageVisible = false;
|
|
|
|
|
this.uploadForm = {
|
|
|
|
|
groupId: undefined,
|
|
|
|
|
materialFileList: [],
|
|
|
|
|
};
|
|
|
|
|
this.resetForm("uploadForm");
|
|
|
|
|
},
|
|
|
|
|
// 上传图片
|
|
|
|
|
submitUploadImage() {
|
|
|
|
|
this.$refs["uploadForm"].validate((valid) => {
|
|
|
|
|
if (!valid) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const params = this.uploadForm.materialFileList.map((item) => ({
|
|
|
|
|
groupId: this.uploadForm.groupId,
|
|
|
|
|
materialUrl: item.url,
|
|
|
|
|
materialName: item.name,
|
|
|
|
|
}));
|
|
|
|
|
createMaterialManagement(params).then(() => {
|
|
|
|
|
this.$message.success("上传图片成功");
|
|
|
|
|
this.closeUploadImage();
|
|
|
|
|
this.getMaterialList(this.queryParams.groupId);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.uni-template-container {
|
|
|
|
|
.title-container {
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: #303133;
|
|
|
|
|
border-left: 4px solid rgb(24 144 255);
|
|
|
|
|
}
|
|
|
|
|
.uni-template-node-container {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
border-bottom: 1px dashed #e8e8e8;
|
|
|
|
|
.uni-template-node-icon {
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-container {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px dashed #c0ccda;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
background-color: #fbfdff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
i {
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
color: #909399;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-container:hover {
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.select-material-dialog {
|
|
|
|
|
.select-material-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-container {
|
|
|
|
|
width: 210px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 0px 10px;
|
|
|
|
|
border-right: 1px solid #e8e8e8;
|
|
|
|
|
min-height: 400px;
|
|
|
|
|
|
|
|
|
|
:deep(.el-menu) {
|
|
|
|
|
border-right: none;
|
|
|
|
|
.el-menu-item {
|
|
|
|
|
height: 36px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-container {
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
.material-item-container {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-content: flex-start;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 430px;
|
|
|
|
|
}
|
|
|
|
|
.material-item {
|
|
|
|
|
width: 185px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.material-item:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: 1px solid #1890ff;
|
|
|
|
|
}
|
|
|
|
|
.item-active {
|
|
|
|
|
border: 1px solid #1890ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog__body) {
|
|
|
|
|
border-top: 1px solid #e8e8e8;
|
|
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uni-template-preview {
|
|
|
|
|
z-index: 100;
|
|
|
|
|
width: 500px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
.preview-title {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: #303133;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mobile-border {
|
|
|
|
|
width: 428px;
|
|
|
|
|
height: 856px;
|
|
|
|
|
position: relative;
|
|
|
|
|
// background: url("~@/assets/images/mobile-border.png") no-repeat center center;
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mobile-outer-border {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
left: 20px;
|
|
|
|
|
// z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mobile-inner-border {
|
|
|
|
|
width: 375px;
|
|
|
|
|
height: 815px;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 40px;
|
|
|
|
|
left: 45px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
// overflow-y: scroll;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.x-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.x-text {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: red;
|
|
|
|
|
z-index: 101;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.x-line {
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 950px;
|
|
|
|
|
background-color: rgb(182, 182, 182);
|
|
|
|
|
z-index: 101;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.y-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 28px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.y-text {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: red;
|
|
|
|
|
z-index: 101;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.y-line {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background-color: rgb(182, 182, 182);
|
|
|
|
|
z-index: 101;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
