Merge branch 'router' of http://gitlab.oytour.com/viitto/pptist into router

src/assets/styles/common.css

@@ -416,6 +416,16 @@ page {
 .q-ma-lg{
 	margin:20px
 }
+.q-ma-xs{
+	margin-right: 5px;
+	margin-left: 5px;
+}
+.q-mr-xs{
+	margin-right: 5px;
+}
+.q-ml-xs{
+	margin-left: 5px;
+}
 .q-pa-lg{
 	padding:20px
 }

src/components/Maps/MapAttributes/MarkAttributes.vue

@@ -53,7 +53,22 @@
                     <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
                 </div>
             </div>
+            <div class="attr-items flex items-center grey-bg q-mt-lg">
+                <div style="font-size: 11px;width:50px;">加粗</div>
+                <div class="col flex">
+                    <IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',3)"/>
+                    <Slider class="filter-slider grow" :max="800" :min="400" :step="200" :value="attrs.fontWeight" 
+                    @update:value="value => {updateLabFontSizeHandler(value as number),attrs.fontWeight=value}" />
+                    <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',3)"/>
+                </div>
+            </div>
             
+            <div class="attr-items flex items-center q-mt-md">
+                <div style="font-size: 11px;width:50px;">字体</div>
+                <el-select size="mini" v-model="attrs.fontFamily" filterable @change="val=>updateLabFontFamilyHandler(val as number)" placeholder="请选择">
+                    <el-option v-for="item in formatFonts" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
             <div class="attr-items flex items-center q-mt-md">
                 <div style="font-size: 11px;width:50px;">对齐</div>
                 <el-select size="mini" v-model="attrs.fontAlign" @change="val=>setAlignChangeHandler(val as number)" placeholder="请选择">
@@ -106,12 +121,16 @@ import tinycolor from 'tinycolor2';
 import { color as am4coreColor,Label} from "@amcharts/amcharts4/core";
 import { watch } from 'vue';
 import MapService from '@/services/MapService';
+import { useFontStore } from '@/store'
 const mapStore = useMapStore()
 const { current,fillColor } = storeToRefs(mapStore)
+const { formatFonts } = storeToRefs(useFontStore())
 const attrs = reactive({
     arrow:-1,
     textEnable:false,
     fontSize:12,
+    fontWeight:400,
+    fontFamily: '',
     fontAlign:0,
     fontText:'',
     fontColor:'#000',
@@ -151,6 +170,14 @@ const AddSubtract = (symbol: string,val: number) => {
         }
         value =  attrs.fontSize
         updateLabFontSizeHandler(value as number)
+    }if(val==3){
+        if(symbol=='-'&&attrs.fontWeight>400){
+            attrs.fontWeight = attrs.fontWeight-200
+        }if(symbol=='+'&&attrs.fontWeight<800){
+            attrs.fontWeight = attrs.fontWeight+200
+        }
+        value =  attrs.fontWeight
+        updateLabFontWeightHandler(value as number)
     }
 }
 const updateFilter = (t: number, val: number) => {
@@ -213,6 +240,8 @@ const createLabel = ()=>{
     //label.fontWeight = 'bold'
 
     attrs.fontSize = 13
+    attrs.fontWeight = 400
+    attrs.fontFamily = 'Microsoft Yahei'
     attrs.fill = fillColor.value.realColor
     attrs.text = '文字内容'
     attrs.fontAlign = 0
@@ -293,6 +322,24 @@ const updateLabFontSizeHandler = (val:number) =>{
         }, 500);
     }
 }
+const updateLabFontWeightHandler = (val:number) =>{
+    let lab = getCurrentLabel()
+    if(lab){
+        lab.fontWeight=val
+        setTimeout(() => {
+            asyncAllMarkHandler()
+        }, 500);
+    }
+}
+const updateLabFontFamilyHandler = (val:number) =>{
+    let lab = getCurrentLabel()
+    if(lab){
+        lab.fontFamily=val
+        setTimeout(() => {
+            asyncAllMarkHandler()
+        }, 500);
+    }
+}
 const setLabelTextHandler = (val:string)=>{
     let lab = getCurrentLabel()
     if(lab){
@@ -335,6 +382,8 @@ const setAttribute = ()=>{
         attrs.textEnable = true
         attrs.fontText = lab.text
         attrs.fontSize = lab.fontSize??15
+        attrs.fontWeight = lab.fontWeight??400
+        attrs.fontFamily = lab.fontFamily??'Microsoft Yahei'
         attrs.fontAlign = lab.marginBottom
         attrs.fontColor = tinycolor(lab.fill?.hex??'#000000').toHex8String()
         //attrs.fontSize = 

src/components/Maps/MapAttributes/index.vue

@@ -31,9 +31,10 @@ const { current } = storeToRefs(mapStore)
     right: 20px;
     left: unset;
     top: 45px;
+    bottom: 200px;
     position: absolute;
     z-index: 9;
-    
+    overflow: auto;
 }
 
 .attr-box .attr-header {

src/views/Editor/index.vue

@@ -124,6 +124,7 @@ const datas = reactive({
           TemplateType: TemplatesType,// 1行程模版 2广告模版
           Width: 0,
           Height: 0,
+          ColorId: '',
         }
     },
 

src/views/Market/Index.vue

@@ -29,7 +29,7 @@
                     <div class="column text-small">
                         <div class="row flex-between items-center marketTagTitleBox">
                             <span class="marketTag-Title"><span>目的地</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
-                            <el-button color="#EFEFEF">
+                            <el-button color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible">
                                 <span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
                             </el-button>
                         </div>
@@ -80,7 +80,9 @@
                     <div class="column text-small">
                         <div class="row flex-between items-center marketTagTitleBox">
                             <span class="marketTag-Title"><span>色系</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
-                            <el-button color="#FFF"><span></span></el-button>
+                            <el-button v-if="countriesOther.length>0" color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible">
+                                <span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                            </el-button>
                         </div>
                         <div class="row wrap q-pt-sm">
                             <div class="row items-center wrap">
@@ -89,9 +91,10 @@
                                     effect="dark"
                                     content="不限"
                                     placement="bottom">
-                                    <div class="marketTag-color text-small pointer" @change="onColorNameChangeHandler('')">
+                                    <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
                                         <span class="colorMark"
-                                        :style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)','border-color':queryObj.ColorName==''?'black':'#eee'}"></span>
+                                        :style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)',
+                                        'border-color':queryObj.ColorName==''?'black':'#eee'}"></span>
                                     </div>
                                 </el-tooltip>
                                 <template v-for="(x,i) in colorArr" :key="i">
@@ -113,6 +116,26 @@
                 </div>
             </div>
             <div style="margin-top: 20px;">
+                <div class="MarketType row flex-between">
+                    <div class="row">
+                        <div class="MarketButton cursor-pointer" 
+                        :class="[queryObj.TemplateType == item.type?'active':'']" v-for="(item,index) in typeArr" :key="index"
+                        @click="onTypeChangeHandler(item.type)">
+                            {{item.typeName}}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="MarketButton cursor-pointer" 
+                        :class="[queryObj.sort == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
+                        @click="onTypeChangeHandler(item.type,1)">
+                            {{item.typeName}}
+                        </div>
+                        <div class="MarketButton active active2 cursor-pointer">
+                            <span>版面</span>
+                            <el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon>
+                        </div>
+                    </div>
+                </div>
                 <!-- q-mt-lg row wrap -->
                 <div v-if="dataList.length>0" class=" rounded"
                     style="column-count: 6;">
@@ -136,11 +159,11 @@
                             <div class="MarketIndexList-img">
                                 <img :src="item.CoverImg" class="rounded" />
                             </div>
-                            <div class="MarketIndexList-text row items-center">
+                            <!-- <div class="MarketIndexList-text row items-center">
                                 <el-tag class="mx-1 q-mr-md" effect="dark" v-if="item.TemplateType==2" 
                                 size="small">广告</el-tag>
                                 <span>{{item.Title}}</span>
-                            </div>
+                            </div> -->
                         </div>
                         
                     </template>
@@ -192,6 +215,7 @@ const colorArrOther = ref([] as Array < any > ); //颜色
 const colorArr = ref([] as Array < any > ); //颜色
 const seasonArr = ref([] as Array < any > ); //季节
 const typeArr = ref([] as Array < any > ); //类型
+const sortArr = ref([] as Array < any > ); //排序
 const dataList = ref([] as Array < any > ); //模板数据列表
 const marketRef = ref<any>()
 const MenuColorVisible = ref(false)
@@ -249,6 +273,7 @@ const queryObj = reactive({
     TempType: 0,
     TemplateType: TemplateType,//0 不限 1模版 2广告
     type: 0,
+    sort: 0
 })
 const addTemplate = (type:number) =>{
     // searchData.value.TemplateType = type
@@ -379,9 +404,14 @@ const onSeasonNameChangeHandler = (SeasonName: string) => {
 }
 
 //类型切换
-const onTypeChangeHandler = (Type: string) => {
+const onTypeChangeHandler = (Type: string,num: Number) => {
+    if(num){
+        queryObj.sort = Type;
+    }else{
         searchData.value.MarketTemplateType = Type
         queryObj.TemplateType = Type;
+    }
+    
     queryObj.pageIndex = 1
     queryTemplateBySearchHandler();
 }
@@ -433,11 +463,11 @@ const getTemplateQuery = async () => {
             if (tempData && tempData.ColorList) {
                 colorArrOther.value = tempData.ColorList.filter((x,index)=>{ 
                     if(model.value==1){ return index>=15 }
-                    else return index>=7
+                    else return index>=14
                 })
                 colorArr.value = tempData.ColorList.filter((x,index)=>{ 
-                    if(model.value==1){ return index<15 }
-                    else return index<15
+                    if(model.value==1){ return index<14 }
+                    else return index<14
                 })
             }
             //季节
@@ -445,10 +475,21 @@ const getTemplateQuery = async () => {
                 seasonArr.value = tempData.SeasonList;
             }
             //类型
-            for(let i=1;i<3;i++){
+            for(let i=0;i<3;i++){
+                let text = '所有模版'
+                if(i==1) text = '行程'
+                if(i==2) text = '广告'
                 typeArr.value.push({
                     type:i,
-                    typeName:i==1?'模版':'广告'
+                    typeName:text
+                })
+            }
+            for(let i=0;i<2;i++){
+                let text = '综合排序'
+                if(i==1) text = '最新模板'
+                sortArr.value.push({
+                    type:i,
+                    typeName:text
                 })
             }
         }
@@ -485,6 +526,45 @@ onMounted(()=>{
             url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
         font-display: swap;
     }
+    .MarketButton.active.active2{
+        margin-right: 0;
+    }
+    .MarketButton.active.active2::after{
+        background: none;
+    }
+    .MarketButton{
+        width: 90px;
+        height: 36px;
+        line-height: 36px;
+        font-size: 14px;
+        text-align: center;
+        color: #9EA2B3;
+        position: relative;
+        margin-right: 13px;
+    }
+    .MarketButton.active{
+        background: #F4F7FE;
+        border-radius: 6px;
+        -webkit-border-radius: 6px;
+        -moz-border-radius: 6px;
+        -ms-border-radius: 6px;
+        -o-border-radius: 6px;
+        color: #1C1C1C;
+    }
+    .MarketButton.active::after{
+        content: "";
+        position: absolute;
+        left: 35.5px;
+        bottom: 0;
+        width: 19px;
+        height: 4px;
+        background: linear-gradient(134deg, #649DED, #570AD8);
+    }
+    .MarketType{
+        margin-top: 29px;
+        margin-bottom: 33px;
+        /* background: #fff; */
+    }
     .marketTag-color{
         margin-top: 5px;
         margin-bottom: 13px;
@@ -567,9 +647,9 @@ onMounted(()=>{
         border-radius: 8px;
         font-family: PingFang SC;
         font-weight: 400;
-        font-size: 14px;
+        font-size: 14px !important;
         color: #FFFFFF;
-        line-height: 32px;
+        line-height: 36px;
         text-align: center;
     }
     .Market-fromBj{
@@ -655,7 +735,7 @@ onMounted(()=>{
     .MarketIndexListBox{
         /* width:calc(20% - 10px); */
         /* margin: 10px 10px 0 0;  */
-        padding:5px;
+        /* padding:5px; */
         position: relative;
         overflow: hidden;
         box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;