|
@@ -0,0 +1,430 @@
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <el-form
|
|
|
|
+ :model="listData"
|
|
|
|
+ :rules="rules"
|
|
|
|
+ ref="listData"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="demo-ruleForm"
|
|
|
|
+ >
|
|
|
|
+ <h5>咨询窗口</h5>
|
|
|
|
+ <el-form-item label="显示:" prop="consultationStatus">
|
|
|
|
+ <el-radio-group v-model="listData.consultationStatus">
|
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group></el-form-item
|
|
|
|
+ >
|
|
|
|
+ <h5>购物车</h5>
|
|
|
|
+ <el-form-item label="显示:" prop="shoppingCarStatus">
|
|
|
|
+ <el-radio-group v-model="listData.shoppingCarStatus">
|
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group></el-form-item
|
|
|
|
+ >
|
|
|
|
+ <h5>客服微信</h5>
|
|
|
|
+ <el-form-item label="显示:" prop="serviceWechatStatus">
|
|
|
|
+ <el-radio-group v-model="listData.serviceWechatStatus">
|
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group></el-form-item
|
|
|
|
+ >
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="微信号:"
|
|
|
|
+ prop="serviceWechatNumber"
|
|
|
|
+ :rules="
|
|
|
|
+ listData.serviceWechatStatus == 1
|
|
|
|
+ ? rules.serviceWechatNumber
|
|
|
|
+ : [{ required: false }]
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ style="width: 300px"
|
|
|
|
+ v-model="listData.serviceWechatNumber"
|
|
|
|
+ clearable
|
|
|
|
+ placeholder="请输入微信号"
|
|
|
|
+ ></el-input> </el-form-item
|
|
|
|
+ ><el-form-item
|
|
|
|
+ label="二维码:"
|
|
|
|
+ prop="serviceWechatImg"
|
|
|
|
+ :rules="
|
|
|
|
+ listData.serviceWechatStatus == 1
|
|
|
|
+ ? rules.serviceWechatImg
|
|
|
|
+ : [{ required: false }]
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <div class="photoBox">
|
|
|
|
+ <el-button
|
|
|
|
+ type="text"
|
|
|
|
+ v-if="!listData.serviceWechatImg"
|
|
|
|
+ @click="upload('serviceWechatImg')"
|
|
|
|
+ >+点击上传<span style="color: #999"
|
|
|
|
+ ><br />请上传 1:1 图片或是截图<br />支持png、jpg</span
|
|
|
|
+ ></el-button
|
|
|
|
+ >
|
|
|
|
+ <el-image
|
|
|
|
+ v-else
|
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
|
+ :src="$methodsTools.splitImgHost(listData.serviceWechatImg)"
|
|
|
|
+ :preview-src-list="[
|
|
|
|
+ $methodsTools.splitImgHost(listData.serviceWechatImg),
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ <i
|
|
|
|
+ v-if="listData.serviceWechatImg"
|
|
|
|
+ class="el-icon-error err_icon"
|
|
|
|
+ @click="clear('serviceWechatImg')"
|
|
|
|
+ ></i>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <h5>服务热线</h5>
|
|
|
|
+ <el-form-item label="显示:" prop="serviceHotlineStatus">
|
|
|
|
+ <el-radio-group v-model="listData.serviceHotlineStatus">
|
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group></el-form-item
|
|
|
|
+ >
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="服务时间:"
|
|
|
|
+ prop="servicingTime"
|
|
|
|
+ :rules="
|
|
|
|
+ listData.serviceHotlineStatus == 1
|
|
|
|
+ ? rules.servicingTime
|
|
|
|
+ : [{ required: false }]
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ style="width: 300px"
|
|
|
|
+ v-model="listData.servicingTime"
|
|
|
|
+ clearable
|
|
|
|
+ placeholder="例如:周一至周五(9:00-18:00)"
|
|
|
|
+ ></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="号码:"
|
|
|
|
+ prop="serviceNumber"
|
|
|
|
+ :rules="
|
|
|
|
+ listData.serviceHotlineStatus == 1
|
|
|
|
+ ? rules.serviceNumber
|
|
|
|
+ : [{ required: false }]
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ style="width: 300px"
|
|
|
|
+ type="textarea"
|
|
|
|
+ :rows="2"
|
|
|
|
+ placeholder="请输入"
|
|
|
|
+ v-model="listData.serviceNumber"
|
|
|
|
+ />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <h5>移动端</h5>
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <el-form-item label="公众号:" prop="accountsStatus">
|
|
|
|
+ <el-radio-group v-model="listData.accountsStatus">
|
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group></el-form-item
|
|
|
|
+ ><el-form-item label="同步:" prop="accountsSync">
|
|
|
|
+ <el-checkbox-group v-model="listData.accountsSync">
|
|
|
|
+ <el-checkbox :label="1">页尾</el-checkbox>
|
|
|
|
+ <el-checkbox :label="2">个人中心</el-checkbox>
|
|
|
|
+ </el-checkbox-group></el-form-item
|
|
|
|
+ ><el-form-item
|
|
|
|
+ label="二维码:"
|
|
|
|
+ prop="accountsImg"
|
|
|
|
+ :rules="
|
|
|
|
+ listData.accountsStatus == 1
|
|
|
|
+ ? rules.accountsImg
|
|
|
|
+ : [{ required: false }]
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <div class="photoBox">
|
|
|
|
+ <el-button
|
|
|
|
+ type="text"
|
|
|
|
+ v-if="!listData.accountsImg"
|
|
|
|
+ @click="upload('accountsImg')"
|
|
|
|
+ >+点击上传<span style="color: #999"
|
|
|
|
+ ><br />请上传 1:1 图片或是截图<br />支持png、jpg</span
|
|
|
|
+ ></el-button
|
|
|
|
+ >
|
|
|
|
+ <el-image
|
|
|
|
+ v-else
|
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
|
+ :src="$methodsTools.splitImgHost(listData.accountsImg)"
|
|
|
|
+ :preview-src-list="[
|
|
|
|
+ $methodsTools.splitImgHost(listData.accountsImg),
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ <i
|
|
|
|
+ v-if="listData.accountsImg"
|
|
|
|
+ class="el-icon-error err_icon"
|
|
|
|
+ @click="clear('accountsImg')"
|
|
|
|
+ ></i>
|
|
|
|
+ </div> </el-form-item
|
|
|
|
+ ></el-col>
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <el-form-item label="H5:" prop="h5Status">
|
|
|
|
+ <el-radio-group v-model="listData.h5Status">
|
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group></el-form-item
|
|
|
|
+ ><el-form-item label="同步:" prop="h5Sync">
|
|
|
|
+ <el-checkbox-group v-model="listData.h5Sync">
|
|
|
|
+ <el-checkbox :label="1">页尾</el-checkbox>
|
|
|
|
+ <el-checkbox :label="2">个人中心</el-checkbox>
|
|
|
|
+ </el-checkbox-group></el-form-item
|
|
|
|
+ ><el-form-item
|
|
|
|
+ label="二维码:"
|
|
|
|
+ prop="h5Img"
|
|
|
|
+ :rules="
|
|
|
|
+ listData.h5Status == 1 ? rules.h5Img : [{ required: false }]
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <div class="photoBox">
|
|
|
|
+ <el-button
|
|
|
|
+ type="text"
|
|
|
|
+ v-if="!listData.h5Img"
|
|
|
|
+ @click="upload('h5Img')"
|
|
|
|
+ >+点击上传<span style="color: #999"
|
|
|
|
+ ><br />请上传 1:1 图片或是截图<br />支持png、jpg</span
|
|
|
|
+ ></el-button
|
|
|
|
+ >
|
|
|
|
+ <el-image
|
|
|
|
+ v-else
|
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
|
+ :src="$methodsTools.splitImgHost(listData.h5Img)"
|
|
|
|
+ :preview-src-list="[$methodsTools.splitImgHost(listData.h5Img)]"
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ <i
|
|
|
|
+ v-if="listData.h5Img"
|
|
|
|
+ class="el-icon-error err_icon"
|
|
|
|
+ @click="clear('h5Img')"
|
|
|
|
+ ></i>
|
|
|
|
+ </div> </el-form-item
|
|
|
|
+ ></el-col>
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <el-form-item label="小程序:" prop="appletStatus">
|
|
|
|
+ <el-radio-group v-model="listData.appletStatus">
|
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group></el-form-item
|
|
|
|
+ ><el-form-item label="同步:" prop="appletSync">
|
|
|
|
+ <el-checkbox-group v-model="listData.appletSync">
|
|
|
|
+ <el-checkbox :label="1">页尾</el-checkbox>
|
|
|
|
+ <el-checkbox :label="2">个人中心</el-checkbox>
|
|
|
|
+ </el-checkbox-group></el-form-item
|
|
|
|
+ ><el-form-item
|
|
|
|
+ label="二维码:"
|
|
|
|
+ prop="appletImg"
|
|
|
|
+ :rules="
|
|
|
|
+ listData.appletStatus == 1
|
|
|
|
+ ? rules.appletImg
|
|
|
|
+ : [{ required: false }]
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <div class="photoBox">
|
|
|
|
+ <el-button
|
|
|
|
+ type="text"
|
|
|
|
+ v-if="!listData.appletImg"
|
|
|
|
+ @click="upload('appletImg')"
|
|
|
|
+ >+点击上传<span style="color: #999"
|
|
|
|
+ ><br />请上传 1:1 图片或是截图<br />支持png、jpg</span
|
|
|
|
+ ></el-button
|
|
|
|
+ >
|
|
|
|
+ <el-image
|
|
|
|
+ v-else
|
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
|
+ :src="$methodsTools.splitImgHost(listData.appletImg)"
|
|
|
|
+ :preview-src-list="[
|
|
|
|
+ $methodsTools.splitImgHost(listData.appletImg),
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ <i
|
|
|
|
+ v-if="listData.appletImg"
|
|
|
|
+ class="el-icon-error err_icon"
|
|
|
|
+ @click="clear('appletImg')"
|
|
|
|
+ ></i>
|
|
|
|
+ </div> </el-form-item
|
|
|
|
+ ></el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-form>
|
|
|
|
+ <input ref="file" type="file" style="display: none" @change="getImgFile" />
|
|
|
|
+ <div style="margin-top: 20px">
|
|
|
|
+ <el-button type="primary" @click="submit">保存</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { listConfig, updateConfig } from "@/api/system/config";
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ initData: {
|
|
|
|
+ configValue: {},
|
|
|
|
+ },
|
|
|
|
+ listData: { accountsSync: [], h5Sync: [], appletSync: [] },
|
|
|
|
+ rules: {
|
|
|
|
+ consultationStatus: [
|
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ shoppingCarStatus: [
|
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ serviceWechatStatus: [
|
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ serviceWechatNumber: [
|
|
|
|
+ { required: true, message: "请输入微信号", trigger: "blur" },
|
|
|
|
+ ],
|
|
|
|
+ serviceWechatImg: [
|
|
|
|
+ { required: true, message: "请上传二维码", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ serviceHotlineStatus: [
|
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ servicingTime: [
|
|
|
|
+ { required: true, message: "请输入服务时间", trigger: "blur" },
|
|
|
|
+ ],
|
|
|
|
+ serviceNumber: [
|
|
|
|
+ { required: true, message: "请输入号码", trigger: "blur" },
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ accountsStatus: [
|
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ accountsSync: [
|
|
|
|
+ { required: false, message: "请选择", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ accountsImg: [
|
|
|
|
+ { required: true, message: "请上传二维码", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ h5Status: [{ required: true, message: "请选择", trigger: "change" }],
|
|
|
|
+ h5Sync: [{ required: false, message: "请选择", trigger: "change" }],
|
|
|
|
+ h5Img: [{ required: true, message: "请上传二维码", trigger: "change" }],
|
|
|
|
+
|
|
|
|
+ appletStatus: [
|
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ appletSync: [{ required: false, message: "请选择", trigger: "change" }],
|
|
|
|
+ appletImg: [
|
|
|
|
+ { required: true, message: "请上传二维码", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ uploadProp: "",
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.init();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ init() {
|
|
|
|
+ listConfig({ configKey: "client.config" }).then((res) => {
|
|
|
|
+ if (res.rows.length) {
|
|
|
|
+ this.initData = res.rows[0];
|
|
|
|
+ let configValue = JSON.parse(res.rows[0].configValue) || {};
|
|
|
|
+ this.listData = configValue.consultPc || {};
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ upload(prop) {
|
|
|
|
+ this.uploadProp = prop;
|
|
|
|
+ this.$refs.file.click();
|
|
|
|
+ },
|
|
|
|
+ getImgFile(e) {
|
|
|
|
+ var file = e.target.files[0];
|
|
|
|
+ if (file === undefined) {
|
|
|
|
+ e.target.value = "";
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (file.size > 0.3 * 1024 * 1024) {
|
|
|
|
+ this.$message.error("图片不得大于300kb");
|
|
|
|
+ e.target.value = "";
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ var type = file.name.toLowerCase().split(".").splice(-1);
|
|
|
|
+ if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
|
|
|
|
+ this.$message.error("上传格式需为:.jpg/.png/.jpeg");
|
|
|
|
+ e.target.value = "";
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.$upload
|
|
|
|
+ .upload(file, 0)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.$set(this.listData, this.uploadProp, res);
|
|
|
|
+ })
|
|
|
|
+ .finally(() => {
|
|
|
|
+ e.target.value = "";
|
|
|
|
+ this.$refs.listData.validateField(this.uploadProp);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ clear(prop) {
|
|
|
|
+ this.listData[prop] = "";
|
|
|
|
+ this.$refs.listData.validateField(prop);
|
|
|
|
+ },
|
|
|
|
+ submit() {
|
|
|
|
+ this.$refs["listData"].validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ let initData = JSON.parse(JSON.stringify(this.initData));
|
|
|
|
+ initData.configValue = JSON.parse(initData.configValue);
|
|
|
|
+ initData.configValue["consultPc"] = this.listData;
|
|
|
|
+ initData.configValue = JSON.stringify(initData.configValue);
|
|
|
|
+ updateConfig(initData).then((res) => {
|
|
|
|
+ this.$message.success("保存成功");
|
|
|
|
+ this.init();
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ console.log("error submit!!");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.photoBox {
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ width: 200px;
|
|
|
|
+ height: 200px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 150px;
|
|
|
|
+ border: 1px dashed #bdbdbd;
|
|
|
|
+ position: relative;
|
|
|
|
+ .el-button {
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ & > .err_icon {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 4px;
|
|
|
|
+ right: 4px;
|
|
|
|
+ color: red;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ user-select: none;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+h5 {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ padding-left: 30px;
|
|
|
|
+ margin: 10px 0px 16px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+}
|
|
|
|
+.photo_text {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #aaa;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+}
|
|
|
|
+._p {
|
|
|
|
+ color: #a4a4a4;
|
|
|
|
+ margin: 0px;
|
|
|
|
+}
|
|
|
|
+</style>
|