From 9af6462c931d0625bc3bd5f762aaf557024b878a Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Mon, 10 Jul 2023 13:02:46 +0800
Subject: [PATCH] shop config to vue

---
 src/api/shop.js                        |  11 ++
 src/api/site.js                        |   6 +
 src/pages/setting/shopConfig/index.vue | 152 ++++++++++++++++++++++++-
 vite.config.js                         |   1 +
 4 files changed, 168 insertions(+), 2 deletions(-)
 create mode 100644 src/api/shop.js
 create mode 100644 src/api/site.js

diff --git a/src/api/shop.js b/src/api/shop.js
new file mode 100644
index 0000000..a5ef989
--- /dev/null
+++ b/src/api/shop.js
@@ -0,0 +1,11 @@
+import { request } from '@/utils/request'
+
+export function getShopConfig(params) {
+    return request('/shop/getShopConfig', 'post', params)
+}
+
+export function setShopConfig(params) {
+    return request('/shop/setShopConfig', 'post', params)
+}
+
+
diff --git a/src/api/site.js b/src/api/site.js
new file mode 100644
index 0000000..38e2ec3
--- /dev/null
+++ b/src/api/site.js
@@ -0,0 +1,6 @@
+import { request } from '@/utils/request'
+
+export function getSiteConfig(params) {
+    return request('/site/getSiteConfig', 'post', params)
+}
+
diff --git a/src/pages/setting/shopConfig/index.vue b/src/pages/setting/shopConfig/index.vue
index a205ad2..7996fbf 100644
--- a/src/pages/setting/shopConfig/index.vue
+++ b/src/pages/setting/shopConfig/index.vue
@@ -1,15 +1,140 @@
 <template>
-  <div>
-    shopConfig
+  <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="http://localhost:8080/adminapi/v1/shop/uploadLogo"
+              :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 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;
@@ -19,9 +144,11 @@
     :deep(.el-breadcrumb) {
       font-size: 16px;
       color: #606266;
+
       .el-breadcrumb__inner {
         display: inline-block;
         vertical-align: middle;
+
         .el-breadcrumb__separator {
           color: #c0c4cc;
         }
@@ -33,4 +160,25 @@
 .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>
diff --git a/vite.config.js b/vite.config.js
index b0e46c5..602c45a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -39,6 +39,7 @@ export default defineConfig(({ mode }) => {
         input: {
           dashboard: resolve(__dirname, 'dashboard.html'),
           login: resolve(__dirname, 'login.html'),
+          shopConfig: resolve(__dirname, 'shopConfig.html'),
           payment: resolve(__dirname, 'payment.html'),
           shipping: resolve(__dirname, 'shipping.html'),
           order: resolve(__dirname, 'order.html'),