h5-dm-orderFront/src/views/shop/info.vue

<!-- 网站信息 -->
<template>
  <div class="website-information">
    <div style="display: flex">
      <div style="width: 50%;">
        <el-form ref="formRef" :model="formData" label-width="120px">
          <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">店铺信息</div>
            <el-form-item label="店铺名称" prop="name">
              <div class="w-80">
                <el-input
                    v-model="formData.name"
                    placeholder="请输入店铺名称"
                    maxlength="20"
                    show-word-limit
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="店铺简介" prop="intro">
              <div class="w-80">
                <el-input
                    v-model="formData.intro"
                    :rows="5"
                    type="textarea"
                    placeholder="请输入店铺介绍"
                    maxlength="90"
                    show-word-limit
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="店铺公告" prop="notice">
              <div class="w-80">
                <el-input
                    v-model="formData.notice"
                    :rows="5"
                    type="textarea"
                    placeholder="请输入店铺公告"
                    maxlength="100"
                    show-word-limit
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="店铺图片" prop="image">
              <div>
                <material-picker v-model="formData.image" :limit="1"/>
                <div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
              </div>
            </el-form-item>
            <el-form-item label="banner图片" prop="banner">
              <div>
                <material-picker v-model="formData.banner" :limit="3"/>
                <div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
              </div>
            </el-form-item>
<!--            <el-form-item label="预支付" prop="prePay">
              <el-switch v-model="formData.prePay" :active-value="1" :inactive-value="0"/>
            </el-form-item>-->
          </el-card>
        </el-form>
      </div>
      <div style="width: 50%;">
        <el-form label-width="120px">
          <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">&nbsp;</div>
            <el-form-item label="联系人" prop="contactPsn">
              <div class="w-80">
                <el-input
                    v-model="formData.contactPsn"
                    placeholder="请输入联系人"
                    clearable
                />
              </div>
            </el-form-item>
            <el-form-item label="联系方式" prop="contactTel">
              <div class="w-80">
                <el-input
                    v-model="formData.contactTel"
                    placeholder="请输入联系方式"
                    clearable
                />
              </div>
            </el-form-item>
            <el-form-item label="身份证照">
              <div style="display: flex">
                <material-picker v-model="formData.idCardFront" :limit="1"/>
                <material-picker v-model="formData.idCardBack" :limit="1"/>
              </div>
            </el-form-item>
            <el-form-item label="资质证件">
              <div style="display: flex">
                <material-picker v-model="formData.businessLicense" :limit="1"/>
                <material-picker v-model="formData.operatingLicense" :limit="1"/>
              </div>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <div class="w-80">
                <el-input
                    v-model="formData.address"
                    placeholder="请输入地址"
                    clearable
                />
              </div>
            </el-form-item>
            <el-form-item label="店铺状态" prop="status">
              <el-switch v-model="formData.status" :active-value="1" :inactive-value="0"
                         active-text="开始营业" inactive-text="暂停营业"/>
            </el-form-item>
          </el-card>
        </el-form>
      </div>
    </div>
    <footer-btns v-perms="['setting:website:save']">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </footer-btns>
  </div>
</template>

<script lang="ts" setup name="webInformation">
import {getShopConfig, saveShopConfig} from '@/api/shop'
import feedback from '@/utils/feedback'
import type {FormInstance} from 'element-plus'
import cache from "@/utils/cache";
import {ACCOUNT_KEY, SHOP_ID} from "@/enums/cacheEnums";
import useAppStore from "@/stores/modules/app";
const appStore = useAppStore()
const config = computed(() => appStore.config)

const formRef = ref<FormInstance>()
// 表单数据
const formData = reactive({
  id: null,
  name: '', // 店铺名称
  intro: '',
  notice: '',
  image: '',
  status: '',
  prePay: '',
  banner: '',
  contactPsn: '',
  contactTel: '',
  address: '',
  idCardFront: '',
  idCardBack: '',
  businessLicense: '',
  operatingLicense: '',
  userRelationId: null,
})

// 获取店铺信息
const getData = async () => {
  const shopId = cache.get(SHOP_ID);
  let account = ''
  if(!shopId){
    const accountCache = cache.get(ACCOUNT_KEY)
    if (accountCache) {
      account = JSON.parse(accountCache).value.account
    }
  }
  var params = {
    "shopId": cache.get(SHOP_ID),
    "contactTel": account
  }
  const data = await getShopConfig(params)
  for (const key in formData) {
    //@ts-ignore
    formData[key] = data[key]
  }
  formData.userRelationId = data?data['shopUserRelationId']:''
  if (formData.banner) {
    formData.banner = formData.banner.split(',')
  } else {
    formData.banner = '';
  }
  if (!formData.image) {//不能是null,会报错
    formData.image = '';
  }
  if (!formData.idCardFront) {//不能是null,会报错
    formData.idCardFront = '';
  }
  if (!formData.idCardBack) {//不能是null,会报错
    formData.idCardBack = '';
  }
  if (!formData.businessLicense) {//不能是null,会报错
    formData.businessLicense = '';
  }
  if (!formData.operatingLicense) {//不能是null,会报错
    formData.operatingLicense = '';
  }
  cache.set(SHOP_ID, formData.id)
  config.value.webName = formData.name
  if(formData.image){
    config.value.webLogo = formData.image
  }
}

// 保存店铺信息
const handleSubmit = async () => {
  console.log(formData)
  if(formData.banner){
    formData.banner = formData.banner.join(',')
  }
  await saveShopConfig(formData)
  feedback.msgSuccess('操作成功')
  getData()
}

getData()
</script>

<style lang="scss" scoped>
.website-information{
  background: #fff;
}
</style>