feat: 创建新商户

src/api/modules/merchant.js

@@ -15,3 +15,20 @@ export function setMerchantPermissions(data) {
     data
   })
 }
+
+export function shopBaseConfig(query, data) {
+  return request({
+    url: '/shop/base_config',
+    method: 'put',
+    params: query,
+    data
+  })
+}
+
+export function listPlatformCategory(params) {
+  return request({
+    url: '/category/list',
+    method: 'get',
+    params
+  })
+}

src/views/modules/operation-management/permission/merchant-account/index.vue

@@ -33,6 +33,106 @@
         <el-form-item label="密码" prop="password">
           <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
         </el-form-item>
+
+        <h3>店铺基础信息</h3>
+        <el-form-item label="摊位名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入摊位名称"></el-input>
+        </el-form-item>
+        <el-form-item label="主营类目" prop="categoryId">
+          <el-select v-model="form.categoryId" placeholder="请选择主营类目" style="width: 100%">
+            <el-option
+              v-for="item in categoryList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="摊位背景图" prop="background">
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="handleBackgroundSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.background" :src="form.background" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="摊位联系电话" prop="contactPhone">
+          <el-input v-model="form.contactPhone" placeholder="请输入联系电话/手机号"></el-input>
+        </el-form-item>
+        <el-form-item label="摊位照片" prop="fileList">
+          <el-upload
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            list-type="picture-card"
+            :file-list="form.fileList"
+            :on-success="handleFileListSuccess"
+            :before-upload="beforeAvatarUpload"
+            :on-remove="handleRemove"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="摊位位置" prop="address">
+          <el-input v-model="form.address" placeholder="请输入摊位位置"></el-input>
+        </el-form-item>
+        <el-form-item label="摊位详细地址" prop="detailAddress">
+          <el-input v-model="form.detailAddress" placeholder="请输入摊位详细地址"></el-input>
+        </el-form-item>
+        <el-form-item label="许可证" prop="permits">
+          <el-upload
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            list-type="picture-card"
+            :file-list="form.permits"
+            :on-success="handlePermitsSuccess"
+            :before-upload="beforeAvatarUpload"
+            :on-remove="handlePermitsRemove"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="是否自动营业" prop="isAutoBusiness">
+          <el-switch v-model="form.isAutoBusiness"></el-switch>
+        </el-form-item>
+        <el-form-item v-if="form.isAutoBusiness" label="营业时间">
+          <el-time-picker
+            is-range
+            v-model="businessHours"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围">
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="顾客自提点位置" prop="pickName">
+          <el-input v-model="form.pickName" placeholder="请输入顾客自提点位置"></el-input>
+        </el-form-item>
+        <el-form-item label="自提点详细地址" prop="pickAddress">
+          <el-input v-model="form.pickAddress" placeholder="请输入自提点详细地址"></el-input>
+        </el-form-item>
+        <el-form-item label="自提点位置示意图" prop="pickImg">
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="handlePickImgSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.pickImg" :src="form.pickImg" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="承诺送达自提点时间" prop="promisePickDeliveryTime">
+          <el-input v-model.number="form.promisePickDeliveryTime" placeholder="请输入小时数">
+            <template slot="append">小时以内</template>
+          </el-input>
+        </el-form-item>
       </template>
 
       <template v-if="form.operationType === 'update'">
@@ -96,9 +196,11 @@ import {
   checkUsername,
   resetPassword
 } from '@/api/modules/subaccount' // Assuming some APIs can be reused
-import { inviteJoin, setMerchantPermissions } from '@/api/modules/merchant' // New merchant API
+import { inviteJoin, setMerchantPermissions, shopBaseConfig, listPlatformCategory } from '@/api/modules/merchant' // New merchant API
+import { mer_admin } from '@/api/modules/mer_admin'
 import routerConfig from '@/router/full-routers'
 import { mapState } from 'vuex'
+import cookie from 'js-cookie'
 
 // Function to filter the full menu tree based on available permissions
 const filterTreeByPerms = (tree, availablePerms) => {
@@ -160,8 +262,30 @@ export default {
         permissionCodes: [],
         accountId: null,
         enable: true,
-        selectedMarketId: ''
+        selectedMarketId: '',
+        name: '',
+        categoryId: '',
+        background: '',
+        isAutoBusiness: true,
+        businessDays: '1111111',
+        startBusinessTime: 0,
+        endBusinessTime: 1440,
+        contactPhone: '',
+        fileList: [],
+        address: '',
+        permits: [],
+        lng: '',
+        lat: '',
+        detailAddress: '',
+        pickName: '',
+        pickLng: '',
+        pickAddress: '',
+        pickLat: '',
+        pickImg: '',
+        promisePickDeliveryTime: '',
       },
+      businessHours: [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)],
+      categoryList: [],
       merchantAccountList: [], // To be populated with merchant accounts
       permissionList: [],
       defaultProps: {
@@ -178,6 +302,34 @@ export default {
         password: [
           { required: true, message: "请输入密码", trigger: "blur" },
         ],
+        name: [
+          { required: true, message: "请输入摊位名称", trigger: "blur" },
+        ],
+        categoryId: [
+          { required: true, message: "请选择主营类目", trigger: "change" },
+        ],
+        background: [
+          { required: true, message: "请上传摊位背景图", trigger: "change" },
+        ],
+        fileList: [
+          { required: true, message: "请上传摊位照片", trigger: "change" },
+        ],
+        address: [
+          { required: true, message: "请输入摊位位置", trigger: "blur" },
+        ],
+        detailAddress: [
+          { required: true, message: "请输入摊位详细地址", trigger: "blur" },
+        ],
+        pickName: [
+          { required: true, message: "请输入顾客自提点位置", trigger: "blur" },
+        ],
+        pickAddress: [
+          { required: true, message: "请输入自提点详细地址", trigger: "blur" },
+        ],
+        promisePickDeliveryTime: [
+          { required: true, message: "请输入承诺送达自提点时间", trigger: "blur" },
+          { type: 'number', message: '必须为数字值'}
+        ],
         permissionCodes: [
           { required: true, message: "请选择菜单权限", trigger: "change", type: 'array' },
         ],
@@ -195,7 +347,15 @@ export default {
       "marketId",
       "shopId",
       "markets"
-    ])
+    ]),
+    uploadUrl() {
+      return mer_admin.uploadFile();
+    },
+    uploadHeaders() {
+      return {
+        token: cookie.get('token')
+      };
+    }
   },
   watch: {
     'form.operationType'(newType) {
@@ -219,8 +379,14 @@ export default {
   },
   created() {
     this.getPermissions();
+    this.getPlatformCategory();
   },
   methods: {
+    getPlatformCategory() {
+      listPlatformCategory({ type: this.isCloudShop ? 1 : 0 }).then(res => {
+        this.categoryList = res.data.data;
+      });
+    },
     getPermissions() {
       getAvailablePermissions().then((res) => {
         const availablePerms = (res && res.data && Array.isArray(res.data.data)) ? res.data.data : [];
@@ -249,6 +415,36 @@ export default {
     handleTreeCheck() {
       this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true);
     },
+    handleBackgroundSuccess(res) {
+      this.form.background = res.data;
+    },
+    handleFileListSuccess(res, file, fileList) {
+      this.form.fileList = fileList;
+    },
+    handlePermitsSuccess(res, file, fileList) {
+      this.form.permits = fileList;
+    },
+    handlePickImgSuccess(res) {
+      this.form.pickImg = res.data;
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!');
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+      }
+      return isJPG && isLt2M;
+    },
+    handleRemove(file, fileList) {
+      this.form.fileList = fileList;
+    },
+    handlePermitsRemove(file, fileList) {
+      this.form.permits = fileList;
+    },
     // To be implemented
     // loadMerchantAccountList() {
     //   getMerchantAccountList().then(res => {
@@ -286,16 +482,26 @@ export default {
             };
             inviteJoin(createData).then((res) => {
               const merchantAccountId = res.data.data.merchantId; // Assuming this is the merchant ID
+              const shopId = res.data.data.shopId; // Assuming this is the shop ID
               const permissionsData = {
                 merchantAccountId,
                 permissionCodes: this.form.permissionCodes,
                 marketId
               };
               setMerchantPermissions(permissionsData).then(() => {
-                this.$message.success('商户创建成功且权限已设置');
+                const shopData = {
+                  ...this.form,
+                  imgs: this.form.fileList.map(f => f.url).join(','),
+                  permits: this.form.permits.map(f => f.url).join(','),
+                  startBusinessTime: this.businessHours[0].getHours() * 60 + this.businessHours[0].getMinutes(),
+                  endBusinessTime: this.businessHours[1].getHours() * 60 + this.businessHours[1].getMinutes(),
+                };
+                shopBaseConfig({ shopId }, shopData).then(() => {
+                  this.$message.success('商户创建成功，权限及店铺信息已设置');
                   this.$refs.ruleFormRef.resetFields();
                 });
               });
+            });
           } else if (this.form.operationType === 'update') {
             if (!this.form.accountId) {
               this.$message.error('请先选择要更新的商户账号');
@@ -323,4 +529,26 @@ export default {
 .app-container {
   padding: 20px;
 }
-</style>
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }