UI优化

src/views/activity/component/holiday-category-dialog.vue

@@ -10,7 +10,7 @@
           <li class="list-group-item" v-for="(item, idx) in list" :key="idx">
             <el-form-item :prop="idx + '.categoryName'" :rules="rules.categoryName">
               <!-- <p class="show-name" v-show="!item.isEdit">{{list[idx].categoryName}}</p> -->
-              <el-input v-model="list[idx].categoryName" style="width: 466px" maxlength="8"> </el-input>
+              <el-input v-model="list[idx].categoryName" style="width: 466px" maxlength="8" placeholder="请输入分类名称"> </el-input>
             </el-form-item>
             <div class="btn-wrap" v-if="list.length > 1">
               <span class="icon-span" @click="onDeleteItem(idx)"><i class="iconfont-components3 icon-cp-DeleteOutlined" /></span>

src/views/activity/component/holiday-dialog.vue

 <template>
-  <el-dialog title="编辑" :visible.sync="visible" width="600px" @close="onClose">
-    <el-form :model="submitData" :rules="rules" ref="submitData" label-width="120px">
+  <el-dialog title="新增节日" :visible.sync="visible" width="600px" @close="onClose">
+    <el-form :model="submitData" :rules="rules" ref="submitData" label-width="95px">
+      <el-row type="flex" style="background: #f7f8fa; border-radius: 2px; height: 32px; margin-bottom: 20px" align="middle">
+        <i class="el-icon-warning" style="padding: 0 9px; color: #2f54eb"></i>
+        <div style="font-size: 12px; color: #303133">新增节日后，则在商户后台节日活动弹框中展示</div>
+      </el-row>
       <el-form-item label="节日分类" prop="categoryCode">
-        <el-select v-model="submitData.categoryCode" clearable placeholder="全部分类">
+        <el-select v-model="submitData.categoryCode" clearable placeholder="请选择分类" style="width:465px">
           <el-option v-for="item in categoryList" :key="item.activityCategoryId" :label="item.categoryName" :value="item.activityCategoryId"> </el-option>
         </el-select>
       </el-form-item>
@@ -26,7 +30,7 @@
           </el-radio>
         </div>
 
-        <div>
+        <div style="padding-top:10px">
           <el-radio v-model="submitData.dateType" label="2">
             <div style="display: inline-block">农历</div>
             <el-form-item v-if="submitData.dateType == 2" label="" prop="date" style="margin-left: 16px; display: inline-block">
@@ -38,24 +42,24 @@
 
       <el-form-item label="选择日期" v-if="submitData.customFlag == 1" prop="holidaysDate">
         <el-row type="flex" align="middle">
-            <el-form-item prop="month" style="margin: 0 10px 0 0">
-              <el-select v-model="submitData.month" placeholder="请选择月份" class="selector-item">
-                <el-option v-for="item in months" :key="item.key" :label="item.value" :value="item.key"> </el-option>
-              </el-select>
-            </el-form-item>
+          <el-form-item prop="month" style="margin: 0 10px 0 0">
+            <el-select v-model="submitData.month" placeholder="请选择月份" class="selector-item">
+              <el-option v-for="item in months" :key="item.key" :label="item.value" :value="item.key"> </el-option>
+            </el-select>
+          </el-form-item>
 
-            <el-form-item prop="week" style="margin: 0 10px 0 0">
-              <el-select v-model="submitData.week" placeholder="请选择周" class="selector-item">
-                <el-option v-for="item in weeks" :key="item.key" :label="item.value" :value="item.key"> </el-option>
-              </el-select>
-            </el-form-item>
+          <el-form-item prop="week" style="margin: 0 10px 0 0">
+            <el-select v-model="submitData.week" placeholder="请选择周" class="selector-item">
+              <el-option v-for="item in weeks" :key="item.key" :label="item.value" :value="item.key"> </el-option>
+            </el-select>
+          </el-form-item>
 
-            <el-form-item prop="weekDay" style="margin: 0 10px 0 0">
-              <el-select v-model="submitData.weekDay" placeholder="请选择星期" class="selector-item">
-                <el-option v-for="item in weekDays" :key="item.key" :label="item.value" :value="item.key"> </el-option>
-              </el-select>
-            </el-form-item>
-          </el-row>
+          <el-form-item prop="weekDay" style="margin: 0 10px 0 0">
+            <el-select v-model="submitData.weekDay" placeholder="请选择星期" class="selector-item">
+              <el-option v-for="item in weekDays" :key="item.key" :label="item.value" :value="item.key"> </el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
       </el-form-item>
 
       <el-form-item label="排序号" prop="sort">
@@ -64,8 +68,8 @@
 
       <el-form-item>
         <el-row type="flex" justify="end">
-          <el-button type="primary" @click="submitForm('submitData')">确定</el-button>
           <el-button @click="onClose">取消</el-button>
+          <el-button type="primary" @click="submitForm('submitData')">确定</el-button>
         </el-row>
       </el-form-item>
     </el-form>

src/views/activity/holiday-manage.vue

@@ -34,13 +34,13 @@
       </el-table-column>
     </el-table>
 
-    <el-row type="flex" justify="end" style="margin-top: 20px" v-if="totalCount > 0">
+    <el-row type="flex" justify="end" v-if="totalCount > 0">
       <el-pagination @size-change="doSizeChange" @current-change="doCurrentChange" background="#2F54EB" :current-page="searchParams.pageNum" :page-sizes="[20, 30, 40, 50]" :page-size="searchParams.pageSize" layout="total, sizes, prev, pager, next" :total="totalCount"> </el-pagination>
     </el-row>
 
-    <holiday-category-dialog :visible.sync="holidayCategoryDialogVisible" @refresh="getCategoryList"></holiday-category-dialog>
+    <holiday-category-dialog :visible.sync="holidayCategoryDialogVisible" @refresh="getCategoryList" v-if="holidayCategoryDialogVisible"></holiday-category-dialog>
 
-    <holiday-dialog :visible.sync="holidayDialogVisible" @change="loadData"></holiday-dialog>
+    <holiday-dialog :visible.sync="holidayDialogVisible" @change="loadData" v-if="holidayDialogVisible"></holiday-dialog>
   </div>
 </template>