创建店铺增加店铺类型选择

src/components/common/pageMain.vue

@@ -66,9 +66,9 @@ export default {
   display: block;
   height: 100%;
 }
-/* .main-content {
-  min-height: 500px;
-} */
+.main-content {
+  padding-bottom: 40px;
+}
 .main-content .form-container {
   width: 600px;
   margin: 0 auto;

src/pages/setting/info.vue

@@ -62,7 +62,10 @@ export default {
         shop_name: [{ required: true, message: '必填', trigger: 'blur' }],
         shop_logo: [{ required: true, message: '请上传', trigger: 'change' }],
         end_time: [{ required: true, message: '请选择', trigger: 'change' }],
-        shop_desc: [{ required: true, message: '必填', trigger: 'blur' }],
+        shop_desc: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { max: 100, message: '最多输入100个字符', trigger: 'blur' }
+        ],
         shop_tel: [{ required: true, message: '必填', trigger: 'blur' }]
       },
       dialogVisible: false

src/pages/shop/add.vue

 <template>
   <page-main title="创建店铺">
     <el-card class="box-card">
-      <div class="form-container">
-        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
+      <el-button type="text" @click="$router.replace('/shop')"><i class="el-icon-arrow-left"></i>返回</el-button>
+      <div class="choose" v-if="shopTypeChooseVisible">
+        <h4 class="choose-title">请选择需要创建的店铺类型</h4>
+        <div class="choose-list">
+          <div class="choose-item">
+            <div class="choose-item-pic">
+              <h5>紫荆教育</h5>
+              <p>招生教学一站式解决方案</p>
+            </div>
+            <div class="choose-item-content">
+              <p>适用于<br />教育培训机构，知识付费专家</p>
+              <el-button type="primary" size="medium" plain @click="handleChoose('1')">立即开店</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="form-container" v-else>
+        <div class="shop-add-success" v-if="addSuccessVisible">
+          <img src="../../assets/images/shop_create_success_icon.png" width="300" />
+          <p>店铺创建成功，请前往设置店铺相关信息</p>
+          <el-button type="primary" @click="entryShop">前往设置</el-button>
+        </div>
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" v-else>
           <el-form-item label="店铺名称" prop="shop_name">
             <el-input v-model="ruleForm.shop_name" placeholder="请输入店铺、品牌、机构的全称"></el-input>
           </el-form-item>
@@ -49,9 +70,15 @@ export default {
         shop_name: [{ required: true, message: '必填', trigger: 'blur' }],
         shop_logo: [{ required: true, message: '请上传', trigger: 'change' }],
         end_time: [{ required: true, message: '请选择', trigger: 'change' }],
-        shop_desc: [{ required: true, message: '必填', trigger: 'blur' }],
+        shop_desc: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { max: 100, message: '最多输入100个字符', trigger: 'blur' }
+        ],
         shop_tel: [{ required: true, message: '必填', trigger: 'blur' }]
-      }
+      },
+      shopTypeChooseVisible: true,
+      addSuccessVisible: false,
+      shopId: ''
     }
   },
   methods: {
@@ -60,10 +87,83 @@ export default {
     },
     addShop() {
       addShop(this.ruleForm).then(response => {
+        this.shopId = response.shop_id
+        this.addSuccessVisible = true
         // 进入店铺列表
-        this.$router.push({ path: '/shop' })
+        // this.$router.push({ path: '/shop' })
       })
+    },
+    // 选择店铺类型
+    handleChoose(type) {
+      this.ruleForm.shop_type = type
+      this.shopTypeChooseVisible = false
+    },
+    // 进入商铺
+    entryShop() {
+      this.$store.dispatch('setShopId', this.shopId)
+      // 进入店铺设置
+      this.$router.replace({ path: '/setting/info' })
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.choose-title {
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  padding: 20px 0;
+}
+.choose-list {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.choose-item {
+  width: 298px;
+  border: 1px solid #bababa;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+.choose-item-pic {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 286px;
+  background: url('../../assets/images/shop_choose_bg.png') no-repeat;
+  background-size: cover;
+  h5 {
+    font-size: 24px;
+    color: #fff;
+  }
+  p {
+    margin-top: 25px;
+    font-size: 20px;
+    color: #fff;
+  }
+}
+.choose-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  height: 184px;
+  p {
+    margin-bottom: 20px;
+    font-size: 20px;
+  }
+}
+.shop-add-success {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  p {
+    padding: 20px 0;
+    font-size: 20px;
+  }
+}
+</style>