模版解锁

src/views/Market/Index.vue

 <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,9 +18,10 @@
                             </template>
                         </el-input>
                     </div>  
-                    <UserCard></UserCard>
+                    <UserCard :ScanCode="ScanCode"></UserCard>
                 </div>
             </div>
+            <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">
@@ -177,7 +180,7 @@
                               </div> -->
                               <div class="MarketIndexListBox bg-white rounded">
                                 <div class="MarketIndexList-Hover">
-                                <div class="MarketIndexButtomIcon row flex-between">
+                                    <div v-if="item.TempId" class="MarketIndexButtomIcon row flex-between">
                                         <div>
                                         </div>
                                         <div>
@@ -187,10 +190,14 @@
                                             </el-icon>
                                         </div>
                                     </div>
+                                    <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="goToTemplate(item)">
-                                        {{model==1?'编辑':'使用'}}
+                                        @click="item.TempId?goToTemplate(item):goToTemplate(item,1)">
+                                            {{item.TempId?'使用':'立即解锁'}}
                                         </el-button>
                                     </div>
                                 </div>
@@ -212,6 +219,8 @@
                 </div>
             </div>
             
+        </div>
+        
         <foote v-if="(queryObj.pageCount == queryObj.pageIndex || queryObj.pageCount==0) && !loading"></foote>
     </div>
     
@@ -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

@@ -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{