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>
<div ref="marketRef" class="Market-from">
<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="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')" />
<div class="row grow Market-select reactive">
<el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
......@@ -16,200 +18,207 @@
</template>
</el-input>
</div>
<UserCard></UserCard>
<UserCard :ScanCode="ScanCode"></UserCard>
</div>
</div>
<div class="marketTag-from row">
<div class="bg-white rounded text-nowrap marketTag">
<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-dropdown v-if="countriesOther.length>0" trigger="click">
<el-button color="#EFEFEF">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
<div class="relative" style="padding: 0 17px 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;">
<div class="marketTag-from row">
<div class="bg-white rounded text-nowrap marketTag">
<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-dropdown v-if="countriesOther.length>0" trigger="click">
<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>
<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>
</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 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 class="bg-white rounded text-nowrap marketTag">
<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" class="opacity0"><span></span></el-button>
</div>
<div class="row wrap q-pt-sm">
<el-check-tag :checked="queryObj.SeasonList.length==0" @change="onSeasonNameChangeHandler('')"
class="text-small">四季</el-check-tag>
<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>
<div class="bg-white rounded text-nowrap marketTag">
<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" class="opacity0"><span></span></el-button>
</div>
<div class="row wrap q-pt-sm">
<el-check-tag :checked="queryObj.SeasonList.length==0" @change="onSeasonNameChangeHandler('')"
class="text-small">四季</el-check-tag>
<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>
</div>
</div>
</div>
</div>
<div class="bg-white rounded text-nowrap marketTag">
<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-dropdown v-if="colorArrOther.length>0" trigger="click">
<el-button color="#EFEFEF">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
<div class="bg-white rounded text-nowrap marketTag">
<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-dropdown v-if="colorArrOther.length>0" trigger="click">
<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" 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>
<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>
</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
</div>
<div class="row wrap q-pt-sm">
<el-tooltip
class="box-item"
effect="dark"
:content="x.Name"
placement="bottom"
>
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
content="不限"
placement="bottom">
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
<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>
</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 style="margin-top: 20px;">
<div class="MarketType row flex-between" style="max-width: 1400px;margin: auto;">
<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.OrderByType == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
@click="onTypeChangeHandler(item.type,1)">
{{item.typeName}}
<div style="margin-top: 20px;">
<div class="MarketType row flex-between" style="max-width: 1400px;margin: auto;">
<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>
<el-dropdown trigger="click" v-if="parmas&&!parmas.temptype">
<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 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>
<template #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>
<el-dropdown trigger="click" v-if="parmas&&!parmas.temptype">
<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>
</template>
</el-dropdown>
<template #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>
<!-- (dataList.length>0&&queryObj.pageIndex>1)||(dataList.length>0&&queryObj.pageIndex==1&&!loading) -->
<div v-if="dataList.length>0"
class="listBox rounded">
<!-- :width="260" -->
<Waterfall :list="dataList"
:breakpoints="{
1400:{rowPerView:5},
800:{rowPerView:5},
500:{rowPerView:5}
}"
:hasAroundGutter="false" :align="'left'"
rowKey="TempId" :gutter="25"
:loadProps="loadProps"
>
<template #item="{ item, url, index }">
<!-- <div class="card">
<LazyImg :url="url" />
<p class="text">这是具体内容</p>
</div> -->
<div class="MarketIndexListBox bg-white rounded">
<div class="MarketIndexList-Hover">
<div class="MarketIndexButtomIcon row flex-between">
<div>
<!-- (dataList.length>0&&queryObj.pageIndex>1)||(dataList.length>0&&queryObj.pageIndex==1&&!loading) -->
<div v-if="dataList.length>0"
class="listBox rounded">
<!-- :width="260" -->
<Waterfall :list="dataList"
:breakpoints="{
1400:{rowPerView:5},
800:{rowPerView:5},
500:{rowPerView:5}
}"
:hasAroundGutter="false" :align="'left'"
rowKey="TempId" :gutter="25"
:loadProps="loadProps"
>
<template #item="{ item, url, index }">
<!-- <div class="card">
<LazyImg :url="url" />
<p class="text">这是具体内容</p>
</div> -->
<div class="MarketIndexListBox bg-white rounded">
<div class="MarketIndexList-Hover">
<div v-if="item.TempId" class="MarketIndexButtomIcon row flex-between">
<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 class="MarketOpa2"></div>
<el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item,index)">
<View></View>
</el-icon>
<div v-else class="Unlock-Box row items-center flex-center">
<img class="cursor-pointer" src="../../assets//img/Unlock.png"
style="width: 87px;height: 94px;" @click="goToTemplate(item,1)"/>
</div>
<div class="MarketIndexButtomBox">
<el-button class="MarketIndexButtom" type="primary"
@click="item.TempId?goToTemplate(item):goToTemplate(item,1)">
{{item.TempId?'使用':'立即解锁'}}
</el-button>
</div>
</div>
<div class="MarketIndexButtomBox">
<el-button class="MarketIndexButtom" type="primary"
@click="goToTemplate(item)">
{{model==1?'编辑':'使用'}}
</el-button>
<div class="MarketIndexList-img">
<LazyImg :url="item.CoverImg"
class="rounded" style="display: block;"/>
</div>
</div>
<div class="MarketIndexList-img">
<LazyImg :url="item.CoverImg"
class="rounded" style="display: block;"/>
</div>
</div>
</template>
</Waterfall>
</div>
<div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded"
style="padding: 3.68vw 0;">
<el-empty description="暂无数据" :image="noDataImg(1)" />
</template>
</Waterfall>
</div>
<div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded"
style="padding: 3.68vw 0;">
<el-empty description="暂无数据" :image="noDataImg(1)" />
</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 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>
<foote v-if="(queryObj.pageCount == queryObj.pageIndex || queryObj.pageCount==0) && !loading"></foote>
......@@ -227,6 +236,9 @@
<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>
<!-- 关注公众号 -->
<follow v-show="isPublicAccount" :show="isPublicAccount" @close="isPublicAccount=false"
@success="isPublicAccount=false,userInfo.OpenScanCode=true"></follow>
</template>
<script setup lang="ts">
......@@ -247,6 +259,7 @@ import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import foote from '@/components/footer/index.vue';
import temDetails from "@/components/home/temDetails.vue";
import vipFooter from "@/components/home/vipFooter.vue";
import adHeader from '@/components/home/adHeader.vue';
import BackTop from "@/components/home/BackTop.vue";
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
......@@ -338,11 +351,17 @@ const loadProps = reactive({
error
})
const isPublicAccount = ref(false)
const goBackTop = () => {
marketRef.value.scrollTop = 0
}
// 关闭扫码提示
const closeScanCode = () =>{
userInfo.value.OpenScanCode = true
}
// 关闭vip购买提示
const closeVip = () =>{
userInfo.value.OpenPrompt = true
......@@ -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
if((searchData.value.TempId2&&searchData.value.TempId2!=item.TempId)||!searchData.value.TempId2) {
slidesStore.ClearSlides()
......@@ -762,17 +784,17 @@ onMounted(()=>{
margin-top: 38px;
}
.MarketHeader>div{
padding: 10px 22px;
.MarketHeader .MarketSearch{
/* padding: 10px 22px;
max-width:1440px;
margin:0 auto;
margin:0 auto; */
}
.MarketHeader{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 2;
z-index: 3;
background: #E3ECFF;
animation:myHeader 1s;
-webkit-animation:myHeader 1s;
......@@ -788,6 +810,13 @@ onMounted(()=>{
from {top: -100px;}
to {top: 0px;}
}
.MarketSearch{
padding: 0 17px;
max-width:1440px;
margin: 22px auto;
position: relative;
z-index: 2;
}
.Market-select-line{
width: 1px;
height: 14px;
......@@ -1017,4 +1046,11 @@ onMounted(()=>{
padding: 0;
width: 199px !important;
}
.Unlock-Box{
position: absolute;
left: 0;
right: 0;
bottom: 42px;
}
</style>
\ No newline at end of file
src/views/SellTemplate/components/SearchDocument.vue
View file @ 623468c1
......@@ -162,9 +162,11 @@ const openFilePositionHandler = (item:any)=>{
</script>
<style>
.search-area{
position:absolute;
position: relative;
left: calc(50% - 31.8vw - 10px);
/* position: absolute;
left: calc(50% - 19vw - 10px); */
top:0px;
left: calc(50% - 19vw - 10px);
z-index:9;
}
.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