pc_shop_admin/src/views/shop/shop-manage/site/edit.vue

<template>
  <div>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="165px"
      class="goods-form">
      <el-form-item
        label="标题"
        prop="title">
        <el-input
          v-model="formData.title"
          style="width: 500px"
          placeholder="" />
      </el-form-item>
      <el-form-item>
        <template #label>
          <span style="color: #f56c6c">*</span>&nbsp;logo
        </template>
        <input
          style="display: none"
          type="text"
          name="logo"
          :value="formData.logo" />
        <image-upload
          :max="1"
          :list.sync="imagesList"></image-upload>
      </el-form-item>
      <el-form-item label="主题色">
        <el-color-picker v-model="formData.theme_color"></el-color-picker>
      </el-form-item>
      <el-form-item label="字体色">
        <el-color-picker v-model="formData.font_color"></el-color-picker>
      </el-form-item>
      <el-form-item label="隐藏价格">
        <el-radio-group v-model="formData.hide_prices">
          <el-radio :label="0">显示</el-radio>
          <el-radio :label="1">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <template #label>
          <span style="color: #f56c6c">*</span>&nbsp;网址
        </template>
        <el-radio-group v-model="domainType">
          <el-radio :label="1">catalogue域名</el-radio>
          <el-radio :label="2">第三方域名</el-radio>
        </el-radio-group>
        <el-form-item
          prop="pre"
          v-if="domainType === 1">
          <el-input
            @change="(e) => (formData.url = e + '.promocatalogue.com.au')"
            v-model="formData.pre">
            <template #append>.promocatalogue.com.au</template>
          </el-input>
        </el-form-item>
        <el-form-item
          prop="other"
          v-if="domainType === 2">
          <el-input
            @change="(e) => (formData.url = e)"
            v-model="formData.other"></el-input>
        </el-form-item>
        <el-input
          v-show="false"
          v-model="formData.url"
          style="width: 500px"
          placeholder="" />
      </el-form-item>

      <el-form-item
        label="二级域名"
        prop="alias_url"
        v-if="domainType === 2">
        <el-input v-model="formData.alias_url"></el-input>
      </el-form-item>

      <el-form-item
        label="Enquiry接收邮箱"
        prop="email">
        <el-input
          v-model="formData.email"
          style="width: 500px"
          placeholder="">
        </el-input>
      </el-form-item>
      <el-form-item
        label="Margin"
        prop="margin">
        <el-input
          v-model="formData.margin"
          style="width: 500px"
          type="number"
          placeholder="">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="Setup Margin"
        prop="setup_margin">
        <el-input
          v-model="formData.setup_margin"
          style="width: 500px"
          type="number"
          placeholder="">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="页脚信息"
        prop="footer">
        <el-input
          name="footer"
          v-model="formData.footer"
          style="width: 100%">
        </el-input>
      </el-form-item>
      <el-form-item
        label="Contact Us"
        prop="">
        <tinymce
          v-model="formData.contactus"
          :height="500"
          :width="980"
          style="display: inline-block" />
      </el-form-item>
      <el-form-item
        label="About Us"
        prop="">
        <tinymce
          v-model="formData.aboutus"
          :height="500"
          :width="980"
          style="display: inline-block" />
      </el-form-item>
      <el-form-item
        label="Terms & Conditions："
        prop="">
        <tinymce
          v-model="formData.terms"
          :height="500"
          :width="980"
          style="display: inline-block" />
      </el-form-item>
      <el-form-item>
        <div class="flex">
          <el-button
            type="primary"
            :loading="loading"
            @click="checkForm">
            {{ $t('btn_save') }}
          </el-button>
          <el-button
            :loading="loading"
            @click="close">
            {{ $t('btn_close') }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import imageUpload from '@/components/ImageUpload'
import { common } from '@/api'
import cloneDeep from 'lodash.clonedeep'

export default {
  name: 'CompEditShop',
  components: { Tinymce, 'image-upload': imageUpload },
  props: {
    id: {
      type: Number,
      default: 0,
    },
    status: {
      type: Number,
      default: 2,
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      domainType: 1,
      loading: false,
      formData: {},
      rules: {
        title: [
          {
            required: true,
            message: this.$t('text_please_input'),
            trigger: 'blur',
          },
        ],
        logo: [
          {
            required: true,
            message: this.$t('text_please_input'),
            trigger: 'change',
          },
        ],
        pre: [
          {
            required: true,
            message: this.$t('text_please_input'),
            trigger: 'blur',
          },
        ],
        other: [
          {
            required: true,
            message: this.$t('text_please_input'),
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true,
            message: this.$t('text_please_input'),
            trigger: 'blur',
          },
        ],
        margin: [
          {
            required: true,
            message: this.$t('text_please_input'),
            trigger: 'blur',
          },
        ],
        setup_margin: [
          {
            required: true,
            message: this.$t('text_please_input'),
            trigger: 'blur',
          },
        ],
      },
      imagesList: [],
    }
  },
  watch: {
    form: {
      handler() {
        // console.log('form watch run')
        // if (this.status === 3) {
        this.transData()
        // }
      },
      deep: true,
    },
    // imagesList() {
    //   this.formData.logo = this.imagesList.length ? this.imagesList[0].url : ''
    //   this.$refs.form.validateField('logo')
    // },
  },
  methods: {
    transData() {
      this.loading = true
      const temp = JSON.parse(JSON.stringify(this.form))
      if (temp.logo && temp.logo.length) {
        // this.$set(this, 'imagesList', [
        //   {
        //     url: temp.logo,
        //   },
        // ])
        this.imagesList = [
          {
            uid: '',
            url: 'https:' + temp.logo,
          },
        ]
      }

      if (temp.url) {
        const regexp = /\.promocatalogue\.com\.au/
        if (regexp.test(temp.url)) {
          this.domainType = 1
          if (!temp.pre) {
            temp.pre = temp.url.replace(regexp, '')
          }
        } else {
          this.domainType = 2
          if (!temp.other) {
            temp.other = temp.url.trim()
          }
        }
      } else {
        this.domainType = 1
      }
      if (!temp.theme_color) {
        temp.theme_color = '#fff'
      }
      if (!temp.font_color) {
        temp.font_color = '#222'
      }
      if (typeof temp.hide_prices !== 'number') {
        temp.hide_prices = 0
      }
      if (!temp.footer) {
        temp.footer = ''
      }
      if (!temp.alias_url) {
        temp.alias_url = ''
      }
      this.formData = temp
      this.loading = false
    },
    close() {
      this.formData = {}
      this.imagesList = []
      this.$refs.form.clearValidate()
      this.$emit('close', 1)
    },
    checkForm() {
      this.formData.url =
        this.domainType === 1
          ? this.formData.pre + '.promocatalogue.com.au'
          : this.formData.other.trim()
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        if (!this.imagesList.length) {
          this.$message.error('请上传logo')
          return
        }
        const f = cloneDeep(this.formData)
        this.loading = true
        f.logo = this.imagesList[0].url.replace(this.$mediaRegExp, '/')
        if (f.id) {
          common
            .editSite(f)
            .then((res) => {
              if (res.code === 1) {
                this.$emit('update')
                this.$message.success('保存成功')
              }
            })
            .finally(() => {
              this.loading = false
            })
        } else {
          common
            .addSite(f)
            .then((res) => {
              if (res.code === 1) {
                this.$emit('update')
                this.$message.success('保存成功')
              }
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
  },
}
</script>