webs/power_leasing/src/views/account/shopNew.vue

<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>