evshop_admin/src/pages/setting/shopConfig/index.vue

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">電商管理中心</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">店家設置</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- Breadcrumb: End -->
    <hr />
    <el-card>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="店家信息" name="1" />
        <!-- <el-tab-pane label="基本設置" name="2" /> -->
        <!-- <el-tab-pane label="顯示設置" name="3" /> -->
        <!-- <el-tab-pane label="購物流程" name="4" /> -->
        <!-- <el-tab-pane label="商品顯示設置" name="5" /> -->
        <!-- <el-tab-pane label="訊息設置" name="6" /> -->
      </el-tabs>
      <template v-if="activeName == '1'">
        <el-form ref="ruleFormRef" :model="form" label-width="120px" style="max-width: 560px">
          <el-form-item label="店家名稱" prop="shop_name">
            <el-input v-model="form.shop_name" />
          </el-form-item>
          <el-form-item label="店家地址">
            <el-input v-model="form.shop_address" />
          </el-form-item>
          <el-form-item label="公司名稱">
            <el-input v-model="form.service_company" />
          </el-form-item>
          <el-form-item label="客服Email">
            <el-input v-model="form.service_email" />
          </el-form-item>
          <el-form-item label="客服電話">
            <el-input v-model="form.service_phone" />
          </el-form-item>
          <el-form-item label="店家logo">
            <el-upload v-model:file-list="fileList" 
              class="upload-demo"
              :action="actionUrl"
              :multiple = "false"
              :limit="1"
              :on-exceed="handleExceed" 
              :on-success="handleSuccess"
              :on-error="handleError"
              :on-remove="handleRemove" list-type="picture">
              <el-button type="primary">點擊上傳Logo</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  jpg/png檔,建議尺寸: 360*130px
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">確定</el-button>
            <!-- <el-button @click="onResetForm(ruleFormRef)">重置</el-button> -->
          </el-form-item>
        </el-form>
      </template>
    </el-card>

  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'

import { getShopConfig,setShopConfig } from '@/api/shop.js'

// do not use same name with ref
const form = ref({})

const activeName = ref('1')
const ruleFormRef = ref()

onBeforeMount(async () => {
  let res = await getShopConfig()
  if (res.code === 200) {
    form.value = res.data
    fileList.value[0].url = import.meta.env.VITE_APP_BASE_URL + 'storage/' + res.data.shop_logo
    console.log(fileList.value[0].url)
  }
})

//tabs
const handleClick = () => {
  // console.log(tab, event)
}

//圖片上傳
const actionUrl = ref(import.meta.env.VITE_APP_BASE_URL+'/adminapi/v1/shop/uploadLogo')

const fileList = ref([
  {
    name: '',
    url: '',
  },
])

const handleExceed = () => {
  console.log('超出上傳限制');
  // this.$message.warning('超出上傳限制')
}

const handleRemove = () => {

}

const handleSuccess = (res)=>{
  if(res.code === 200){
    form.value.shop_logo = res.data
  }
}

const handleError = (res) => {
  console.log(res)
}

const onSubmit = async () => {
  let res = await setShopConfig(form.value)
  if (res.code === 200) {
    ElMessage.success('修改成功')
  }
}

const onResetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style lang="less" scoped>
.main {
  background-color: #ffffff;

  .breadcrumb {
    margin: 0 0 10px;
    padding: 10px 10px;
    line-height: 1.2;
    font-weight: 500;

    :deep(.el-breadcrumb) {
      font-size: 16px;
      color: #606266;

      .el-breadcrumb__inner {
        display: inline-block;
        vertical-align: middle;

        .el-breadcrumb__separator {
          color: #c0c4cc;
        }
      }
    }
  }
}

.action-icon {
  font-size: 24px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>