矿机租赁系统代码更新

power_leasing/src/views/account/shopNew.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="panel">
+    <h2 class="panel-title">新增店铺</h2>
+    <div class="panel-body">
+      <div class="row">
+        <label class="label">店铺名称</label>
+        <el-input v-model="form.name" placeholder="请输入店铺名称" :maxlength="30" show-word-limit />
+      </div>
+      <!-- <div class="row">
+        <label class="label">主营类目</label>
+        <el-input v-model="form.category" placeholder="请输入主营类目" />
+      </div> -->
+      <div class="row">
+        <label class="label">店铺描述</label>
+        <div class="textarea-wrapper">
+          <el-input
+            type="textarea"
+            v-model="form.description"
+            :rows="4"
+            :maxlength="300"
+            placeholder="请输入店铺描述"
+            show-word-limit
+            @input="handleDescriptionInput"
+          />
+          <!-- <div class="char-count" :class="{ 'char-limit': form.description.length >= 300 }">
+            {{ form.description.length }}/300
+          </div> -->
+        </div>
+      </div>
+      <div class="row">
+        <el-button type="primary" @click="handleCreate">创建店铺</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAddShop } from "@/api/shops";
+export default {
+  data() {
+    return {
+      form: { name: "", description: "", image: "" },
+    };
+  },
+  mounted() {},
+  methods: {
+    // 简单的emoji检测：覆盖常见表情平面与符号范围
+    hasEmoji(str) {
+      if (!str || typeof str !== 'string') return false
+      const emojiRegex = /[\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{1FA70}-\u{1FAFF}\u2600-\u27BF]/u
+      return emojiRegex.test(str)
+    },
+    async fetchAddShop() {
+      const res = await getAddShop(this.form);
+      if (res && res.code==200) {
+        this.$message({
+          message: '店铺创建成功',
+          type: 'success',
+          showClose: true
+        })      
+        this.$router.push('/account/shops')
+      }
+  
+    },
+    handleDescriptionInput(value) {
+      // 确保不超过300个字符
+      if (value && value.length > 300) {
+        this.form.description = value.substring(0, 300)
+        this.$message({
+          message: '店铺描述不能超过300个字符',
+          type: 'warning',
+          showClose: true
+        })
+      }
+    },
+    handleCreate() {
+      const isOnlySpaces = (v) => typeof v === 'string' && v.length > 0 && v.trim().length === 0
+      if (!this.form.name || isOnlySpaces(this.form.name)) {
+        this.$message({
+          message: '店铺名称不能为空或全是空格',
+          type: 'warning',
+          showClose: true
+        });
+        return;
+      }
+      if (this.hasEmoji(this.form.name)) {
+        this.$message({
+          message: '店铺名称不能包含表情符号',
+          type: 'warning',
+          showClose: true
+        });
+        return;
+      }
+      if (this.form.name && this.form.name.length > 30) {
+        this.$message({
+          message: '店铺名称不能超过30个字符',
+          type: 'warning',
+          showClose: true
+        });
+        return;
+      }
+      if (isOnlySpaces(this.form.description)) {
+        this.$message({
+          message: '店铺描述不能全是空格',
+          type: 'warning',
+          showClose: true
+        });
+        return;
+      }
+      // 检查店铺描述长度
+      if (this.form.description && this.form.description.length > 300) {
+        this.$message({
+          message: '店铺描述不能超过300个字符',
+          type: 'warning',
+          showClose: true
+        });
+        return;
+      }
+      // 不允许在已有店铺时新建。这里通过路由跳转来源检查或请求前端缓存判断。
+      // 更稳妥：可在进入本页前做守卫拦截；此处做一次兜底校验。
+      if (this.$route.query && this.$route.query.hasShop === '1') {
+        this.$message({
+          message: '每个用户仅允许一个店铺，无法新建',
+          type: 'warning',
+          showClose: true
+        });
+        this.$router.replace('/account/shops');
+        return;
+      }
+
+      if (!this.form.name) {
+        this.$message.error('店铺名称不能为空')
+        return
+      }
+
+
+
+      this.fetchAddShop(this.form)
+    },
+  },
+};
+</script>
+
+<style scoped>
+.panel-title {
+  margin: 0 0 12px 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+.row {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.label {
+  color: #666;
+  text-align: right;
+}
+
+.textarea-wrapper {
+  position: relative;
+}
+
+.char-count {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: #999;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 2px 6px;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.char-count.char-limit {
+  color: #f56c6c;
+  font-weight: 600;
+}
+</style>
+