新增颜色 # 验证 首页颜色优化

src/assets/styles/common.css

@@ -14,6 +14,12 @@ page {
 	url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/KFZWXS7eHHXx.woff") format("woff");
 	font-display: swap;
 }
+.relative{
+	position: relative;
+}
+.absolute{
+	position: absolute;
+}
 .alifont{
 	font-family: alifont,chineseAlifont;
 }
@@ -333,3 +339,6 @@ page {
 .el-button{
 	font-size: 12px !important;
 }
+.pointer{
+	cursor: pointer;
+}
\ No newline at end of file

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -148,7 +148,7 @@
                     />
                     <span class="Required q-mr-xs q-ml-sm">*</span>
                     <el-input
-                        placeholder="输入颜色16进制"
+                        placeholder="例：#e5e3da"
                         v-model="datas.addColor.ColorValue"
                         class="ml-1 w-20 q-ml-sm"
                         size="small"
@@ -271,6 +271,14 @@
             }) 
             return
         }
+        if(datas.addColor.ColorValue.indexOf('#')==-1){
+            ElMessage({
+                showClose: true,
+                message: "色号需要在最前面加 # 号",
+                type: 'warning',
+            }) 
+            return
+        }
         try {
             datas.addColorLoading = true
             let dataRes = await ConfigService.SetTemplateConfigData(datas.addColor)

src/views/Market/Index.vue

@@ -55,12 +55,50 @@
                         <div class="MarketVerticalLine">&nbsp;</div>
                     </div>
                     <div class="q-pb-md">
-                        <div class="row text-small items-center wrap">
+                        <div class="row text-small items-center nowrap">
                             <span style="margin-right: 50px;">颜色：</span>
                             <el-check-tag :checked="queryObj.ColorName == ''" @change="onColorNameChangeHandler('')"
                                 class="text-small q-mr-md">通用</el-check-tag>
+                            <div class="row items-center nowrap">
+                                <template v-for="(x,i) in colorArr" :key="i">
+                                    <div>
+                                        <span class="colorMark"
+                                        :style="{'background':x.ColorValue}"></span>
+                                    </div>
                                     <el-check-tag :checked="queryObj.ColorName == x.ColorName" @change="onColorNameChangeHandler(x.ColorName)"
-                                class="text-small q-mr-md" v-for="(x,i) in colorArr" :key="i">{{x.ColorName}}</el-check-tag>
+                                    class="text-small q-mr-md q-ml-sm">{{x.ColorName}}</el-check-tag>
+                                </template>
+                            </div>
+                            <Popover trigger="click" placement="bottom-start" v-model:value="MenuColorVisible">
+                                <template #content>
+                                    <div v-for="(x,i) in colorArrOther" :key="i"
+                                    class="row">
+                                        <div>
+                                            <span class="colorMark"
+                                            :style="{'background':x.ColorValue}"></span>
+                                        </div>
+                                        <el-check-tag :checked="queryObj.ColorName == x.ColorName" 
+                                        @change="onColorNameChangeHandler(x.ColorName,x.ColorValue)"
+                                        class="text-small q-mr-md q-ml-sm">{{x.ColorName}}</el-check-tag>
+                                    </div>
+                                </template>
+                                <div class="row items-center">
+                                    <div>
+                                        <span class="colorMark"
+                                        :style="{'background':datas.ColorValue}"></span>
+                                    </div>
+                                    <el-check-tag :checked="datas.ColorValue!=''"
+                                    class="text-small q-mr-md q-ml-sm">
+                                        <el-icon class="pointer" v-if="!MenuColorVisible">
+                                            <ArrowDownBold @click="MenuColorVisible = false"/> 
+                                        </el-icon>
+                                        <el-icon class="pointer" v-else>
+                                            <ArrowUpBold @click="MenuColorVisible = true"/>
+                                        </el-icon>
+                                    </el-check-tag>
+                                </div>
+                                
+                            </Popover>
                         </div>
                     </div>
                 </div>
@@ -132,10 +170,12 @@
     } = storeToRefs(userStore())
     const lines = ref([] as Array < any > ) //线路
     const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
+    const colorArrOther = ref([] as Array < any > ); //颜色
     const colorArr = ref([] as Array < any > ); //颜色
     const seasonArr = ref([] as Array < any > ); //季节
     const dataList = ref([] as Array < any > ); //模板数据列表
     const marketRef = ref<any>()
+    const MenuColorVisible = ref(false)
 
     const currentPage = ref(1 as Number);
     const showCurrentTemplate = ref<any>()
@@ -144,6 +184,7 @@
         TemplateRow: {},
         DetailsVisible: false,
         loading: false,
+        ColorValue: '',
     })
     const queryObj = reactive({
         pageIndex: 1,
@@ -279,7 +320,10 @@
     }
 
     //颜色切换
-    const onColorNameChangeHandler = (ColorName: string) => {
+    const onColorNameChangeHandler = (ColorName: string,ColorValue: String) => {
+        MenuColorVisible.value = false
+        if(ColorValue) datas.ColorValue = ColorValue
+        else datas.ColorValue = ''
         queryObj.ColorName = ColorName;
         queryObj.pageIndex = 1
         queryTemplateBySearchHandler();
@@ -313,7 +357,8 @@
                 }
                 //颜色
                 if (tempData && tempData.ColorList) {
-                    colorArr.value = tempData.ColorList;
+                    colorArrOther.value = tempData.ColorList.filter((x,index)=>{ return index>=3})
+                    colorArr.value = tempData.ColorList.filter((x,index)=>{ return index<3})
                 }
                 //季节
                 if (tempData && tempData.SeasonList) {
@@ -355,7 +400,12 @@
             url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
         font-display: swap;
     }
-
+    .colorMark{
+        width: 5px;
+        height: 5px;
+        display: inline-block;
+        border-radius: 50%;
+    }
     .aliMarketfont {
         font-family: aliMarketfont;
     }