Skip to content

P
pptist
Commit 623468c1 authored by zhengke's avatar zhengke
Browse files
Options

模版解锁

parent 79d5a65b
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 176 deletions
src/views/Market/Index.vue
View file @ 623468c1
<template> <template>
<div ref="marketRef" class="Market-from"> <div ref="marketRef" class="Market-from">
<div class="Market-fromBj"></div> <div class="Market-fromBj"></div>
<div class="relative" style="padding: 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;"> <div class="">
<div :class="[datas.scrollTop>200?'MarketHeader':'']"> <div :class="[datas.scrollTop>200?'MarketHeader':'']">
<div class="row items-center"> <adHeader v-if="!userInfo.iv&&!userInfo.it&&!userInfo.OpenScanCode" style="position: relative;z-index: 2;"
@close="closeScanCode" @scanCode="isPublicAccount=true"></adHeader>
<div class="MarketSearch row items-center">
<img class="q-pr-36 cusor-pointer" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png" style="height: 28px;" @click="forwordHandler('/space')" /> <img class="q-pr-36 cusor-pointer" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png" style="height: 28px;" @click="forwordHandler('/space')" />
<div class="row grow Market-select reactive"> <div class="row grow Market-select reactive">
<el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33"> <el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
...@@ -16,200 +18,207 @@ ...@@ -16,200 +18,207 @@
</template> </template>
</el-input> </el-input>
</div> </div>
<UserCard></UserCard> <UserCard :ScanCode="ScanCode"></UserCard>
</div> </div>
</div> </div>
<div class="marketTag-from row"> <div class="relative" style="padding: 0 17px 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;">
<div class="bg-white rounded text-nowrap marketTag"> <div class="marketTag-from row">
<div class="column text-small"> <div class="bg-white rounded text-nowrap marketTag">
<div class="row flex-between items-center marketTagTitleBox"> <div class="column text-small">
<span class="marketTag-Title"><span>目的地</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span> <div class="row flex-between items-center marketTagTitleBox">
<el-dropdown v-if="countriesOther.length>0" trigger="click"> <span class="marketTag-Title"><span>目的地</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
<el-button color="#EFEFEF"> <el-dropdown v-if="countriesOther.length>0" trigger="click">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon> <el-button color="#EFEFEF">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<div class="row wrap q-pt-lg marketTagDown">
<el-check-tag :checked="x.checked"
@change="onCountryNameChangeHandler(x)" class="text-small"
v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag>
</div>
</template>
</el-dropdown>
<el-button v-else color="#FFF" class="opacity0">
<span></span>
</el-button> </el-button>
<template #dropdown>
<div class="row wrap q-pt-lg marketTagDown"> </div>
<el-check-tag :checked="x.checked" <div class="row wrap q-pt-sm ">
@change="onCountryNameChangeHandler(x)" class="text-small" <el-check-tag :checked="queryObj.CountryList.length==0" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag> <el-check-tag :checked="x.checked"
</div> @change="onCountryNameChangeHandler(x)" class="text-small"
</template> v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
</el-dropdown> </div>
<el-button v-else color="#FFF" class="opacity0">
<span></span>
</el-button>
</div>
<div class="row wrap q-pt-sm ">
<el-check-tag :checked="queryObj.CountryList.length==0" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
<el-check-tag :checked="x.checked"
@change="onCountryNameChangeHandler(x)" class="text-small"
v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
</div> </div>
</div> </div>
</div> <div class="bg-white rounded text-nowrap marketTag">
<div class="bg-white rounded text-nowrap marketTag"> <div class="column text-small">
<div class="column text-small"> <div class="row flex-between items-center marketTagTitleBox">
<div class="row flex-between items-center marketTagTitleBox"> <span class="marketTag-Title"><span>季节</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
<span class="marketTag-Title"><span>季节</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span> <el-button color="#FFF" class="opacity0"><span></span></el-button>
<el-button color="#FFF" class="opacity0"><span></span></el-button> </div>
</div> <div class="row wrap q-pt-sm">
<div class="row wrap q-pt-sm"> <el-check-tag :checked="queryObj.SeasonList.length==0" @change="onSeasonNameChangeHandler('')"
<el-check-tag :checked="queryObj.SeasonList.length==0" @change="onSeasonNameChangeHandler('')" class="text-small">四季</el-check-tag>
class="text-small">四季</el-check-tag> <el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)"
<el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)" class="text-small" :key="i">{{x.SeasonName}}</el-check-tag>
class="text-small" :key="i">{{x.SeasonName}}</el-check-tag> </div>
</div> </div>
</div> </div>
</div> <div class="bg-white rounded text-nowrap marketTag">
<div class="bg-white rounded text-nowrap marketTag"> <div class="column text-small">
<div class="column text-small"> <div class="row flex-between items-center marketTagTitleBox">
<div class="row flex-between items-center marketTagTitleBox"> <span class="marketTag-Title"><span>色系</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
<span class="marketTag-Title"><span>色系</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span> <el-dropdown v-if="colorArrOther.length>0" trigger="click">
<el-dropdown v-if="colorArrOther.length>0" trigger="click"> <el-button color="#EFEFEF">
<el-button color="#EFEFEF"> <span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon> </el-button>
<template #dropdown>
<div class="row wrap q-pt-lg marketTagDown" style="min-width: 410px;">
<template v-for="(x,i) in colorArrOther" :key="i">
<el-tooltip
class="box-item"
effect="dark"
:content="x.Name"
placement="bottom"
>
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
<span class="colorMark"
:style="{'background':x.Content,'border-color':x.checked?'black':'#eee'}"></span>
</div>
</el-tooltip>
</template>
</div>
</template>
</el-dropdown>
<el-button v-else color="#FFF" class="opacity0">
<span></span>
</el-button> </el-button>
<template #dropdown> </div>
<div class="row wrap q-pt-lg marketTagDown" style="min-width: 410px;"> <div class="row wrap q-pt-sm">
<template v-for="(x,i) in colorArrOther" :key="i"> <el-tooltip
<el-tooltip
class="box-item"
effect="dark"
:content="x.Name"
placement="bottom"
>
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
<span class="colorMark"
:style="{'background':x.Content,'border-color':x.checked?'black':'#eee'}"></span>
</div>
</el-tooltip>
</template>
</div>
</template>
</el-dropdown>
<el-button v-else color="#FFF" class="opacity0">
<span></span>
</el-button>
</div>
<div class="row wrap q-pt-sm">
<el-tooltip
class="box-item"
effect="dark"
content="不限"
placement="bottom">
<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.ColorList.length==0?'black':'#eee'}"></span>
</div>
</el-tooltip>
<template v-for="(x,i) in colorArr" :key="i">
<el-tooltip
class="box-item" class="box-item"
effect="dark" effect="dark"
:content="x.Name" content="不限"
placement="bottom" placement="bottom">
> <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
<span class="colorMark" <span class="colorMark"
:style="{'background':x.Content,'border-color':x.checked?'black':'#eee'}"></span> :style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)',
'border-color':queryObj.ColorList.length==0?'black':'#eee'}"></span>
</div> </div>
</el-tooltip> </el-tooltip>
</template> <template v-for="(x,i) in colorArr" :key="i">
<el-tooltip
class="box-item"
effect="dark"
:content="x.Name"
placement="bottom"
>
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
<span class="colorMark"
:style="{'background':x.Content,'border-color':x.checked?'black':'#eee'}"></span>
</div>
</el-tooltip>
</template>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div style="margin-top: 20px;">
<div style="margin-top: 20px;"> <div class="MarketType row flex-between" style="max-width: 1400px;margin: auto;">
<div class="MarketType row flex-between" style="max-width: 1400px;margin: auto;"> <div class="row">
<div class="row"> <div class="MarketButton cursor-pointer"
<div class="MarketButton cursor-pointer" :class="[queryObj.TemplateType == item.type?'active':'']" v-for="(item,index) in typeArr" :key="index"
:class="[queryObj.TemplateType == item.type?'active':'']" v-for="(item,index) in typeArr" :key="index" @click="onTypeChangeHandler(item.type)">
@click="onTypeChangeHandler(item.type)"> {{item.typeName}}
{{item.typeName}} </div>
</div>
</div>
<div class="row">
<div class="MarketButton cursor-pointer"
:class="[queryObj.OrderByType == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
@click="onTypeChangeHandler(item.type,1)">
{{item.typeName}}
</div> </div>
<el-dropdown trigger="click" v-if="parmas&&!parmas.temptype"> <div class="row">
<div class="MarketButton active active2 cursor-pointer"> <div class="MarketButton cursor-pointer"
<span>版面</span> :class="[queryObj.OrderByType == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
<el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon> @click="onTypeChangeHandler(item.type,1)">
{{item.typeName}}
</div> </div>
<template #dropdown> <el-dropdown trigger="click" v-if="parmas&&!parmas.temptype">
<div class="row wrap q-pt-lg q-ml-lg q-mb-lg marketTagDown marketTagDown"> <div class="MarketButton active active2 cursor-pointer">
<div class="MarketButton cursor-pointer" <span>版面</span>
:class="[queryObj.TempType == x.Id?'active':'']" v-for="(x,index) in layouts" :key="index" <el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon>
@click="SwitchingVersion(x)">
{{x.Name}}
</div>
</div> </div>
</template> <template #dropdown>
</el-dropdown> <div class="row wrap q-pt-lg q-ml-lg q-mb-lg marketTagDown marketTagDown">
<div class="MarketButton cursor-pointer"
:class="[queryObj.TempType == x.Id?'active':'']" v-for="(x,index) in layouts" :key="index"
@click="SwitchingVersion(x)">
{{x.Name}}
</div>
</div>
</template>
</el-dropdown>
</div>
</div> </div>
</div> <!-- (dataList.length>0&&queryObj.pageIndex>1)||(dataList.length>0&&queryObj.pageIndex==1&&!loading) -->
<!-- (dataList.length>0&&queryObj.pageIndex>1)||(dataList.length>0&&queryObj.pageIndex==1&&!loading) --> <div v-if="dataList.length>0"
<div v-if="dataList.length>0" class="listBox rounded">
class="listBox rounded"> <!-- :width="260" -->
<!-- :width="260" --> <Waterfall :list="dataList"
<Waterfall :list="dataList" :breakpoints="{
:breakpoints="{ 1400:{rowPerView:5},
1400:{rowPerView:5}, 800:{rowPerView:5},
800:{rowPerView:5}, 500:{rowPerView:5}
500:{rowPerView:5} }"
}" :hasAroundGutter="false" :align="'left'"
:hasAroundGutter="false" :align="'left'" rowKey="TempId" :gutter="25"
rowKey="TempId" :gutter="25" :loadProps="loadProps"
:loadProps="loadProps"
>
> <template #item="{ item, url, index }">
<template #item="{ item, url, index }"> <!-- <div class="card">
<!-- <div class="card"> <LazyImg :url="url" />
<LazyImg :url="url" /> <p class="text">这是具体内容</p>
<p class="text">这是具体内容</p> </div> -->
</div> --> <div class="MarketIndexListBox bg-white rounded">
<div class="MarketIndexListBox bg-white rounded"> <div class="MarketIndexList-Hover">
<div class="MarketIndexList-Hover"> <div v-if="item.TempId" class="MarketIndexButtomIcon row flex-between">
<div class="MarketIndexButtomIcon row flex-between"> <div>
<div> </div>
<div>
<div class="MarketOpa2"></div>
<el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item,index)">
<View></View>
</el-icon>
</div>
</div> </div>
<div> <div v-else class="Unlock-Box row items-center flex-center">
<div class="MarketOpa2"></div> <img class="cursor-pointer" src="../../assets//img/Unlock.png"
<el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item,index)"> style="width: 87px;height: 94px;" @click="goToTemplate(item,1)"/>
<View></View> </div>
</el-icon> <div class="MarketIndexButtomBox">
<el-button class="MarketIndexButtom" type="primary"
@click="item.TempId?goToTemplate(item):goToTemplate(item,1)">
{{item.TempId?'使用':'立即解锁'}}
</el-button>
</div> </div>
</div> </div>
<div class="MarketIndexButtomBox"> <div class="MarketIndexList-img">
<el-button class="MarketIndexButtom" type="primary" <LazyImg :url="item.CoverImg"
@click="goToTemplate(item)"> class="rounded" style="display: block;"/>
{{model==1?'编辑':'使用'}}
</el-button>
</div> </div>
</div> </div>
<div class="MarketIndexList-img"> </template>
<LazyImg :url="item.CoverImg" </Waterfall>
class="rounded" style="display: block;"/>
</div> </div>
</div> <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded"
</template> style="padding: 3.68vw 0;">
</Waterfall> <el-empty description="暂无数据" :image="noDataImg(1)" />
</div>
</div> <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"><img :src="noDataImg(2)" width="118" /></div>
<div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div>
style="padding: 3.68vw 0;">
<el-empty description="暂无数据" :image="noDataImg(1)" />
</div> </div>
<div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"><img :src="noDataImg(2)" width="118" /></div>
<div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div>
</div> </div>
</div> </div>
<foote v-if="(queryObj.pageCount == queryObj.pageIndex || queryObj.pageCount==0) && !loading"></foote> <foote v-if="(queryObj.pageCount == queryObj.pageIndex || queryObj.pageCount==0) && !loading"></foote>
...@@ -227,6 +236,9 @@ ...@@ -227,6 +236,9 @@
<vipFooter v-if="!userInfo.iv&&!userInfo.it&&!userInfo.OpenPrompt" @close="closeVip"></vipFooter> <vipFooter v-if="!userInfo.iv&&!userInfo.it&&!userInfo.OpenPrompt" @close="closeVip"></vipFooter>
<!-- 到顶部 --> <!-- 到顶部 -->
<BackTop v-if="dataList.length>10" :scrollTop="marketRef&&marketRef.scrollTop>=0?marketRef.scrollTop:0" @BackTop="goBackTop"></BackTop> <BackTop v-if="dataList.length>10" :scrollTop="marketRef&&marketRef.scrollTop>=0?marketRef.scrollTop:0" @BackTop="goBackTop"></BackTop>
<!-- 关注公众号 -->
<follow v-show="isPublicAccount" :show="isPublicAccount" @close="isPublicAccount=false"
@success="isPublicAccount=false,userInfo.OpenScanCode=true"></follow>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -247,6 +259,7 @@ import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas' ...@@ -247,6 +259,7 @@ import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import foote from '@/components/footer/index.vue'; import foote from '@/components/footer/index.vue';
import temDetails from "@/components/home/temDetails.vue"; import temDetails from "@/components/home/temDetails.vue";
import vipFooter from "@/components/home/vipFooter.vue"; import vipFooter from "@/components/home/vipFooter.vue";
import adHeader from '@/components/home/adHeader.vue';
import BackTop from "@/components/home/BackTop.vue"; import BackTop from "@/components/home/BackTop.vue";
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next' import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css' import 'vue-waterfall-plugin-next/dist/style.css'
...@@ -338,11 +351,17 @@ const loadProps = reactive({ ...@@ -338,11 +351,17 @@ const loadProps = reactive({
error error
}) })
const isPublicAccount = ref(false)
const goBackTop = () => { const goBackTop = () => {
marketRef.value.scrollTop = 0 marketRef.value.scrollTop = 0
} }
// 关闭扫码提示
const closeScanCode = () =>{
userInfo.value.OpenScanCode = true
}
// 关闭vip购买提示 // 关闭vip购买提示
const closeVip = () =>{ const closeVip = () =>{
userInfo.value.OpenPrompt = true userInfo.value.OpenPrompt = true
...@@ -430,7 +449,10 @@ const getTemplate = (item:any,index:Number) => { ...@@ -430,7 +449,10 @@ const getTemplate = (item:any,index:Number) => {
/** /**
* 页面跳转 * 页面跳转
*/ */
const goToTemplate = (item: any) => { const goToTemplate = (item: any,type:any) => {
if(type) return router.push({
path:`/p/show`
})
searchData.value.TempId = item.TempId searchData.value.TempId = item.TempId
if((searchData.value.TempId2&&searchData.value.TempId2!=item.TempId)||!searchData.value.TempId2) { if((searchData.value.TempId2&&searchData.value.TempId2!=item.TempId)||!searchData.value.TempId2) {
slidesStore.ClearSlides() slidesStore.ClearSlides()
...@@ -762,17 +784,17 @@ onMounted(()=>{ ...@@ -762,17 +784,17 @@ onMounted(()=>{
margin-top: 38px; margin-top: 38px;
} }
.MarketHeader>div{ .MarketHeader .MarketSearch{
padding: 10px 22px; /* padding: 10px 22px;
max-width:1440px; max-width:1440px;
margin:0 auto; margin:0 auto; */
} }
.MarketHeader{ .MarketHeader{
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
z-index: 2; z-index: 3;
background: #E3ECFF; background: #E3ECFF;
animation:myHeader 1s; animation:myHeader 1s;
-webkit-animation:myHeader 1s; -webkit-animation:myHeader 1s;
...@@ -788,6 +810,13 @@ onMounted(()=>{ ...@@ -788,6 +810,13 @@ onMounted(()=>{
from {top: -100px;} from {top: -100px;}
to {top: 0px;} to {top: 0px;}
} }
.MarketSearch{
padding: 0 17px;
max-width:1440px;
margin: 22px auto;
position: relative;
z-index: 2;
}
.Market-select-line{ .Market-select-line{
width: 1px; width: 1px;
height: 14px; height: 14px;
...@@ -1017,4 +1046,11 @@ onMounted(()=>{ ...@@ -1017,4 +1046,11 @@ onMounted(()=>{
padding: 0; padding: 0;
width: 199px !important; width: 199px !important;
} }
.Unlock-Box{
position: absolute;
left: 0;
right: 0;
bottom: 42px;
}
</style> </style>
\ No newline at end of file
src/views/SellTemplate/components/SearchDocument.vue
View file @ 623468c1
...@@ -162,9 +162,11 @@ const openFilePositionHandler = (item:any)=>{ ...@@ -162,9 +162,11 @@ const openFilePositionHandler = (item:any)=>{
</script> </script>
<style> <style>
.search-area{ .search-area{
position:absolute; position: relative;
left: calc(50% - 31.8vw - 10px);
/* position: absolute;
left: calc(50% - 19vw - 10px); */
top:0px; top:0px;
left: calc(50% - 19vw - 10px);
z-index:9; z-index:9;
} }
.search-range-box{ .search-range-box{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment