|
|
@@ -0,0 +1,254 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <el-card class="card">
|
|
|
+ <template #header>
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">
|
|
|
+ {{ t('R-ShopInfo') }}
|
|
|
+ </div>
|
|
|
+ <div class="title-icon">
|
|
|
+ <el-icon @click="edit = true"><Edit /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-form ref="addFormRef" :model="addForm" :rules="formRules" label-width="120px">
|
|
|
+ <el-form-item :label="`${t('ShopManage.t1')}:`" prop="merchantName">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="addForm.merchantName"
|
|
|
+ disabled
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="`${t('ShopManage.t7')}:`" prop="firstName">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="addForm.firstName"
|
|
|
+ :disabled="!edit"
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="`${t('ShopManage.t6')}:`" prop="lastName">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="addForm.lastName"
|
|
|
+ :disabled="!edit"
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="`${t('ShopManage.t2')}:`" prop="email">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="addForm.email"
|
|
|
+ :disabled="!edit"
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="`${t('ShopManage.t3')}:`" prop="mobile">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="addForm.mobile"
|
|
|
+ :disabled="!edit"
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="`${t('ShopManage.t4')}:`" prop="country">
|
|
|
+ <el-select
|
|
|
+ v-model="addForm.country"
|
|
|
+ :placeholder="t('Placeholder.Choose')"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :disabled="!edit"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in country"
|
|
|
+ :key="index"
|
|
|
+ :label="item.enName"
|
|
|
+ :value="item.code"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="`${t('ShopManage.t5')}:`" prop="address">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="addForm.address"
|
|
|
+ :disabled="!edit"
|
|
|
+ :placeholder="t('Placeholder.Input')"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template v-if="edit" #footer>
|
|
|
+ <el-button type="primary" @click="saveInfo" :loading="addLoading">{{
|
|
|
+ t('Btn.Save')
|
|
|
+ }}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { computed, inject, onMounted, reactive, ref } from 'vue'
|
|
|
+ import ServiceMarket from '@/service/marketing'
|
|
|
+ import Service from '@/service/user'
|
|
|
+ import Config from '@/config'
|
|
|
+ import { useI18n } from 'vue-i18n'
|
|
|
+
|
|
|
+ const { Code } = Config
|
|
|
+ const formRef = ref(null)
|
|
|
+ const addFormRef = ref(null)
|
|
|
+ const addForm = reactive({})
|
|
|
+ const country = ref(null)
|
|
|
+ const addLoading = ref(false)
|
|
|
+
|
|
|
+ const pigeon = inject('pigeon')
|
|
|
+ const Session = inject('session')
|
|
|
+ const { t } = useI18n()
|
|
|
+ const formRules = computed(() => ({
|
|
|
+ merchantName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('ShopManage.p1'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('ShopManage.p2'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ mobile: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('ShopManage.p3'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ country: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('ShopManage.p4'),
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ address: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('ShopManage.p5'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ lastName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('ShopManage.p6'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ firstName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: t('ShopManage.p7'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }))
|
|
|
+ const edit = ref(false)
|
|
|
+
|
|
|
+ const user = computed(() => {
|
|
|
+ const userStr = Session.Get('user', true)
|
|
|
+ return userStr ? JSON.parse(userStr) : {}
|
|
|
+ })
|
|
|
+ // 获取国家列表
|
|
|
+ const getCountry = async () => {
|
|
|
+ try {
|
|
|
+ let res = await ServiceMarket.Country({})
|
|
|
+ if (res.code == Code.StatusOK) {
|
|
|
+ country.value = res.data
|
|
|
+ } else {
|
|
|
+ pigeon.MessageError(res.msg || t('Msg.Error'))
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取国家列表失败:', error)
|
|
|
+ pigeon.MessageError(t('Msg.NetworkError'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const getShopInfo = async () => {
|
|
|
+ const params = {
|
|
|
+ id: user.value.merchantId,
|
|
|
+ }
|
|
|
+ const res = await Service.getShopManageInfo(params)
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == Code.StatusOK) {
|
|
|
+ Object.assign(addForm, { ...res.data })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const saveInfo = async () => {
|
|
|
+ const valid = await addFormRef.value.validate()
|
|
|
+ if (!valid) return
|
|
|
+ addLoading.value = true
|
|
|
+ try {
|
|
|
+ const params = { ...addForm }
|
|
|
+ const res = await Service.shopManageEdit(params)
|
|
|
+
|
|
|
+ if (res.code == Code.StatusOK) {
|
|
|
+ await getShopInfo()
|
|
|
+ edit.value = false
|
|
|
+ } else {
|
|
|
+ pigeon.MessageError(res.msg)
|
|
|
+ }
|
|
|
+ addLoading.value = false
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getCountry()
|
|
|
+ getShopInfo()
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 2px;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 50px 0;
|
|
|
+ display: flex;
|
|
|
+ //align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ width: 900px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .title-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-self: flex-end;
|
|
|
+ justify-self: flex-end;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
ljc