feat: layout

src/pages/Activity/Manage/index.vue

 <template>
-  <layout>
+  <Layout>
     <div
       class="manage-wrapper"
       v-loading="tableLoading"
@@ -155,10 +155,10 @@
         </div>
       </el-form>
     </div>
-  </layout>
+  </Layout>
 </template>
 <script>
-import { layout } from "../../Groupmeal/layout/index.vue";
+import { Layout } from "../../Groupmeal/layout/index.vue";
 import { ElMessage } from "element-plus";
 import ActivityService from "@/service/Activity/index";
 import dayJs from "dayjs";
@@ -185,7 +185,7 @@ export default {
     };
   },
   components: {
-    layout
+    Layout
   },
   methods: {
     /* API */

src/pages/Goods/List/index.vue

@@ -2,10 +2,7 @@
   <layout>
     <el-card class="goods">
       <!-- 筛选区 -->
-      <el-form
-        inline
-        class="search_condition"
-      >
+      <el-form inline class="search_condition">
         <!-- 商品id -->
         <el-form-item label="商品id">
           <el-input v-model="searchProps.goods_spu_id"></el-input>
@@ -66,21 +63,13 @@
         </el-form-item>
         <!-- 按钮操作 -->
         <el-form-item style="justify-self: flex-end;">
-          <el-button
-            @click="searchList"
-            type="primary"
-          >搜索</el-button>
+          <el-button @click="searchList" type="primary">搜索</el-button>
           <el-button @click="resetList">重置</el-button>
         </el-form-item>
       </el-form>
 
       <!-- 列表区 -->
-      <el-table
-        class="goods_list"
-        :data="goodsList"
-        border
-        stripe
-      >
+      <el-table class="goods_list" :data="goodsList" border stripe>
         <el-table-column
           label="商品id"
           prop="goods_spu_id"
@@ -116,36 +105,33 @@
           prop="publish_user_id"
           align="center"
         ></el-table-column>
-        <el-table-column
-          label="状态"
-          align="center"
-        >
+        <el-table-column label="状态" align="center">
           <template #default="scope">
-            <span
-              v-if="scope.row.audit_status == 0"
-              style="color:#FF982C;"
-            >待审核</span>
-            <span
-              v-if="scope.row.audit_status == 1"
-              style="color:#5CC247;"
-            >审核通过</span>
-            <span
-              v-if="scope.row.audit_status == 2"
-              style="color:#FD6B6F;"
-            >审核驳回</span>
+            <span v-if="scope.row.audit_status == 0" style="color:#FF982C;"
+              >待审核</span
+            >
+            <span v-if="scope.row.audit_status == 1" style="color:#5CC247;"
+              >审核通过</span
+            >
+            <span v-if="scope.row.audit_status == 2" style="color:#FD6B6F;"
+              >审核驳回</span
+            >
             &nbsp;&nbsp;&nbsp;
             <span
               v-if="scope.row.online_status == 0 && scope.row.audit_status != 2"
               style="color:#FF982C;"
-            >未上架</span>
+              >未上架</span
+            >
             <span
               v-if="scope.row.online_status == 1 && scope.row.audit_status != 2"
               style="color:#5CC247;"
-            >已上架</span>
+              >已上架</span
+            >
             <span
               v-if="scope.row.online_status == 2 && scope.row.audit_status != 2"
               style="color:#FD6B6F;"
-            >已下架</span>
+              >已下架</span
+            >
           </template>
         </el-table-column>
         <el-table-column
@@ -159,26 +145,23 @@
           align="center"
         ></el-table-column>
         <!-- 操作快捷键 -->
-        <el-table-column
-          label="操作"
-          align="center"
-          fixed="right"
-          width="200"
-        >
+        <el-table-column label="操作" align="center" fixed="right" width="200">
           <template #default="scope">
             <el-button
               type="text"
               @click="goDetail(`EDIT`, scope.row.goods_spu_id)"
-            >编辑</el-button>
+              >编辑</el-button
+            >
 
             <el-button
               v-if="scope.row.audit_status == 0"
               type="text"
               @click="goDetail(`AUDIT`, scope.row.goods_spu_id)"
-            >审核</el-button>
+              >审核</el-button
+            >
 
             <el-popconfirm
-              v-if="scope.row.online_status == 2 "
+              v-if="scope.row.online_status == 2"
               title="您确定要上架该商品吗？"
               cancelButtonType="default"
               @confirm="changeGoodsState('GROUNDING', scope.row.goods_spu_id)"
@@ -189,7 +172,10 @@
             </el-popconfirm>
 
             <el-popconfirm
-              v-if=" scope.row.online_status != 2 && (scope.row.audit_status == 1 || scope.row.online_status == 1) "
+              v-if="
+                scope.row.online_status != 2 &&
+                  (scope.row.audit_status == 1 || scope.row.online_status == 1)
+              "
               title="您确定要下架该商品吗？"
               cancelButtonType="default"
               @confirm="
@@ -202,9 +188,10 @@
             </el-popconfirm>
 
             <el-button
-              @click="goDetail(`DETAIL`,scope.row.goods_spu_id)"
+              @click="goDetail(`DETAIL`, scope.row.goods_spu_id)"
               type="text"
-            >详情</el-button>
+              >详情</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -240,14 +227,14 @@ export default {
     Layout
   },
 
-  created () {
+  created() {
     // 获取级联选择
     this.getOptionList();
     // 获取商品列表
     this.getCommodityList();
   },
 
-  data () {
+  data() {
     return {
       // 级联选择器参数
       cascaderProps: {
@@ -300,7 +287,7 @@ export default {
 
   methods: {
     // 获取级联选择
-    async getOptionList () {
+    async getOptionList() {
       try {
         const res = await getGoodsList();
         if (res.code !== 0) return this.$message.error(res.reason);
@@ -310,20 +297,20 @@ export default {
       }
     },
     // 获取数组返回值并转换为字符串
-    getVal (value, index = 0) {
+    getVal(value, index = 0) {
       const valueArray = value.map(item => {
         return item[index];
       });
       return valueArray.join();
     },
-    getValue (value) {
+    getValue(value) {
       const values = value.map(item => {
         return item;
       });
       return values.join();
     },
     // 获取列表
-    async getCommodityList () {
+    async getCommodityList() {
       try {
         const res = await getList(this.searchProps);
         if (res.code !== 0) return this.$message.error(res.reason);
@@ -335,25 +322,25 @@ export default {
       }
     },
     // 所属分类赋值
-    handleTypeChange (val) {
+    handleTypeChange(val) {
       this.searchProps.category_1_id = this.getVal(val, 0);
       this.searchProps.category_2_id = this.getVal(val, 1);
     },
     // 审核状态赋值
-    handleStatusChange (val) {
+    handleStatusChange(val) {
       this.searchProps.audit_status = this.getValue(val);
     },
     // 上架状态赋值
-    handleOnlineStatusChange (val) {
+    handleOnlineStatusChange(val) {
       this.searchProps.online_status = this.getValue(val);
     },
     // 按条件搜索
-    searchList () {
+    searchList() {
       console.log(this.searchProps);
       this.getCommodityList();
     },
     // 重置表单
-    resetList () {
+    resetList() {
       this.searchProps = {
         page: 1, // 页码
         page_size: 20, // 页数大小
@@ -372,7 +359,7 @@ export default {
       this.getCommodityList();
     },
     // 上架/下架操作
-    async changeGoodsState (state, spuId) {
+    async changeGoodsState(state, spuId) {
       // 上架操作
       if (state === "GROUNDING") {
         const res = await putOnline(spuId);
@@ -389,14 +376,14 @@ export default {
     },
 
     // 页码变化
-    handleCurrentChange (e) {
+    handleCurrentChange(e) {
       this.searchProps.page = e;
       // 获取信息
       this.getCommodityList();
     },
 
     // 去往详情页
-    goDetail (operation, spuId) {
+    goDetail(operation, spuId) {
       console.log(spuId);
       this.$router.push({ name: "GoodsDetail", params: { operation, spuId } });
     }

src/pages/Goods/Retail/index.vue

@@ -200,13 +200,8 @@
               ></el-input>
               <div style="margin: 20px 0"></div>
             </el-form-item>
-            <el-form-item
-              prop="commission_mode"
-              label="金额计算方式:"
-            >
-              <el-radio-group
-                v-model="ruleForm.commission_mode"
-              >
+            <el-form-item prop="commission_mode" label="金额计算方式:">
+              <el-radio-group v-model="ruleForm.commission_mode">
                 <el-radio :label="2">按金额</el-radio>
                 <el-radio :label="1">按比例</el-radio>
               </el-radio-group>
@@ -218,7 +213,9 @@
                 @input="changeValue($event, 'first_commission_value')"
                 :disabled="shopStart !== 0"
               >
-                <template #append>{{ruleForm.commission_mode == 1? '%' : '￥'}}</template>
+                <template #append>{{
+                  ruleForm.commission_mode == 1 ? "%" : "￥"
+                }}</template>
               </el-input>
             </el-form-item>
             <el-form-item label="分享者佣金: " prop="second_commission_value">
@@ -228,7 +225,9 @@
                 @input="changeValue($event, 'second_commission_value')"
                 :disabled="shopStart !== 0"
               >
-                <template #append>{{ruleForm.commission_mode == 1? '%' : '￥'}}</template>
+                <template #append>{{
+                  ruleForm.commission_mode == 1 ? "%" : "￥"
+                }}</template>
               </el-input>
             </el-form-item>
             <el-form-item label="活动生效时间:">
@@ -345,13 +344,13 @@ import {
   getFindGoodsList,
   getAddMarketingList,
   getMarketingInfo,
-  updateMarketingList,
+  updateMarketingList
 } from "@/service/Goods/goods";
 import { ElMessage } from "element-plus";
 // 开启关闭防抖
 function debounce(callback, delay) {
   let timer = null;
-  return function (...args) {
+  return function(...args) {
     if (timer) {
       clearTimeout(timer);
     }
@@ -364,7 +363,7 @@ function debounce(callback, delay) {
 export default {
   name: "GoodsRetail",
   components: {
-    Layout,
+    Layout
   },
   data() {
     var commission = (rule, value, callback) => {
@@ -373,7 +372,7 @@ export default {
         (this.ruleForm.first_commission_value +
           this.ruleForm.second_commission_value >
           50 ||
-        value > 50 )
+          value > 50)
       ) {
         callback(new Error("上线佣金与分享者佣金之和不可大于50%"));
       } else {
@@ -388,14 +387,14 @@ export default {
         first_commission_value: "",
         second_commission_value: "",
         start_time: "",
-        end_time: "",
+        end_time: ""
       },
       goods_list: [],
       options: [
         { value: 0, label: "全部" },
         { value: 1, label: "启用" },
         { value: 2, label: "关闭" },
-        { value: 3, label: "到期" },
+        { value: 3, label: "到期" }
       ],
       // 搜索条件
       retailActivitie: {
@@ -405,7 +404,7 @@ export default {
         online_status: [],
         page: 1,
         page_size: 20,
-        count: 0,
+        count: 0
       },
 
       ruleForm: {
@@ -415,33 +414,33 @@ export default {
         second_commission_value: "",
         start_time: "",
         end_time: "",
-        goods_spu_id: [],
+        goods_spu_id: []
       },
       timeSelect: [],
       ruleIdForm: {
         life_account_id: "",
         goods_spu_id: "",
         start_time: "",
-        end_time: "",
+        end_time: ""
       },
       rules: {
         marketing_name: [
           { required: true, message: "请输入活动名称", trigger: "blur" },
-          { min: 1, max: 50, message: "活动名称不能大于50", trigger: "blur" },
+          { min: 1, max: 50, message: "活动名称不能大于50", trigger: "blur" }
         ],
         second_commission_value: [
           {
             required: true,
             message: "请填写分享者佣金",
-            trigger: "blur",
+            trigger: "blur"
           },
           { type: "number", message: "必须为数值型" },
-          { validator: commission },
+          { validator: commission }
         ],
         first_commission_value: [
           { type: "number", message: "必须为数值型" },
-          { validator: commission },
-        ],
+          { validator: commission }
+        ]
       },
       allList: [],
       dialogFormVisible: false,
@@ -450,7 +449,7 @@ export default {
       endTime: "",
       marketing_id: "",
       marketing_info: {},
-      disabled: false,
+      disabled: false
     };
   },
   methods: {
@@ -494,11 +493,11 @@ export default {
       }
     },
     // 开启关闭
-    handelEnable: debounce(async function (row, type) {
+    handelEnable: debounce(async function(row, type) {
       try {
         const res = await updateMarketingList({
           marketing_id: row.marketing_id,
-          online_status: type,
+          online_status: type
         });
         if (res.code !== 0) {
           ElMessage.error(res.reason);
@@ -523,7 +522,7 @@ export default {
         goods_sku_id: "",
         online_status: [],
         page: 1,
-        page_size: 20,
+        page_size: 20
       }),
         this.$refs[retailActivitie].resetFields();
       this.getMarketingList({});
@@ -581,7 +580,7 @@ export default {
         goods_spu_id,
         life_account_id,
         start_time,
-        end_time,
+        end_time
       };
       try {
         // 发请求
@@ -594,18 +593,18 @@ export default {
       }
     },
     selectGoodsChange(e) {
-      this.ruleForm.goods_spu_id = e.map((item) => item.goods_sku_id);
+      this.ruleForm.goods_spu_id = e.map(item => item.goods_sku_id);
     },
     async getAllList() {
       let all = await getMarketingList({
         page: 1,
-        page_size: this.retailActivitie.count,
+        page_size: this.retailActivitie.count
       });
       this.allList = all.result;
     },
     // 添加活动列表
     async addList() {
-      this.$refs.ruleForm.validate(async (valid) => {
+      this.$refs.ruleForm.validate(async valid => {
         if (valid) {
           console.log(this.ruleForm.goods_spu_id);
           if (this.ruleForm.goods_spu_id.length <= 0) {
@@ -620,7 +619,7 @@ export default {
             marketing_name,
             first_commission_value,
             commission_mode,
-            second_commission_value,
+            second_commission_value
           } = this.ruleForm;
           let [start_time, end_time] = this.timeSelect || [];
           if (
@@ -639,7 +638,7 @@ export default {
             first_commission_value: first_commission_value + "",
             second_commission_value: second_commission_value + "",
             start_time: this.formatTime(start_time),
-            end_time: this.formatTime(end_time),
+            end_time: this.formatTime(end_time)
           };
           try {
             const res = await getAddMarketingList(addParams);
@@ -666,7 +665,7 @@ export default {
         second_commission_value: "",
         start_time: "",
         end_time: "",
-        goods_spu_id: [],
+        goods_spu_id: []
       }),
         (this.timeSelect = []),
         (this.goods_list = []),
@@ -674,7 +673,7 @@ export default {
           life_account_id: "",
           goods_spu_id: "",
           start_time: "",
-          end_time: "",
+          end_time: ""
         });
     },
     // 取消
@@ -682,12 +681,12 @@ export default {
       this.dialogFormVisible = false;
       this.resetDate();
       this.getMarketingList();
-    },
+    }
   },
   created() {
     this.getMarketingList();
     this.getAllList();
-  },
+  }
 };
 </script>
 <style lang="less" scoped>

src/pages/Goods/layout/index.vue

@@ -7,14 +7,13 @@
     <div class="main">
       <slot></slot>
     </div>
-
   </div>
 </template>
 <script>
-import PageHeader from '../components/PageHeader';
+import PageHeader from "../components/PageHeader";
 
 export default {
-  components: { PageHeader },
+  components: { PageHeader }
 };
 </script>
 

src/pages/Groupmeal/layout/index.vue

@@ -7,14 +7,13 @@
     <div class="main">
       <slot></slot>
     </div>
-
   </div>
 </template>
 <script>
-import PageHeader from '../components/PageHeader';
+import PageHeader from "../components/PageHeader";
 
 export default {
-  components: { PageHeader },
+  components: { PageHeader }
 };
 </script>