模板选择相关

src/components/domainBind.vue

@@ -61,9 +61,19 @@ export default {
         isShowAddDomainDialog: false,
     }
   },
+  watch: {
+      defaultPrefix(newVal) {
+          if(newVal){
+              this.data.prefix = newVal
+          }
+      },
+      defaultDomain(newVal) {
+          if(newVal){
+              this.data.domain = newVal
+          }
+      }
+  },
   mounted(){
-      this.data.prefix = this.defaultPrefix
-      this.data.domain = this.defaultDomain
       this.getDomainList()
   },
   methods:{
@@ -72,11 +82,11 @@ export default {
           that.$http('POST', '/agentnew/ajax_get_private_domains', {}).then(response => {
               if(response.status){
                   if(response.data.length>0){
-                      if(!this.data.domain) this.data.domain = '.'+response.data[0]
                       that.domainOptions = response.data.map(item => ({
                           label: '.'+item,
                           value: '.'+item
                       }));
+                      if(!response.data.includes(this.data.domain) || !this.data.domain) this.data.domain = '.'+response.data[0]
                   } else {
                       if(!this.data.domain) this.data.domain = '暂无域名'
                   }

src/components/site/addSiteStep/step1.vue

@@ -14,8 +14,8 @@
                             </GuipFormItem>
                             <GuipFormItem column="column" class="channel-radio">
                                 <div slot="formLeft">销售渠道</div>
-                                <span slot="formRight" class="desc">{{channel_label}}</span>
-                                <GuipRadio slot="formDom" v-model="formData.sale_channel" :options="sale_channels"
+                                <span slot="formRight" class="desc">{{formData.sale_channel_label}}</span>
+                                <GuipRadio slot="formDom" v-model="formData.sale_channel" :options="formData.sale_channels"
                                            prop="sale_channel" :rules="formRules.sale_channel" @change="radioChange" />
                             </GuipFormItem>
                         </div>
@@ -23,16 +23,16 @@
                         <div class="flex-right">
                             <GuipFormItem column="column" class="mb24">
                                 <div slot="formLeft">域名来源</div>
-                                <GuipRadio slot="formDom" v-model="domainType" :options="domain_types" prop="domain" :rules="formRules.domain"
+                                <GuipRadio slot="formDom" v-model="formData.domain_type" :options="formData.domain_types" prop="domain" :rules="formRules.domain"
                                            @change="radioDomainChange" />
                             </GuipFormItem>
                             <GuipFormItem column="column">
                                 <div slot="formLeft">域名设置</div>
-                                <GuipInput v-show="domainType==='1'" slot="formDom" v-model="domainPrefix" class="w540">
+                                <GuipInput v-show="formData.domain_type==='1'" slot="formDom" v-model="formData.domain_prefix" class="w540">
                                     <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
-                                    <span slot="appendshow">{{domainName}}</span>
+                                    <span slot="appendshow">{{formData.domain_name}}</span>
                                 </GuipInput>
-                                <domainBind v-show="domainType==='2'" slot="formDom" :defaultPrefix="domainPrefix" :defaultDomain="domainName" @handleEvent="handleChangeDomain" />
+                                <domainBind v-show="formData.domain_type==='2'" slot="formDom" :defaultPrefix="formData.domain_prefix" :defaultDomain="formData.domain_name" @handleEvent="handleChangeDomain" />
                             </GuipFormItem>
                         </div>
                     </div>
@@ -43,18 +43,21 @@
                         <div class="flex-left">
                             <p class="flex-left-desc">销售方向</p>
                             <div class="flex mt12">
-                                <GuipRadio v-model="formData.site_type" :options="site_types" :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
+                                <GuipRadio v-model="formData.site_type" :options="formData.site_types" :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
                             </div>
                             <div class="tem-home">
-                                <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
+                                <div class="tem-home-top">
+                                    <img :src="formData.picture?formData.picture:require('@/assets/register/tem-img-normal.png')" alt="">
+                                </div>
                                 <div class="tem-home-bottom">
-                                    <b>经典深蓝模板（默认）</b>
+                                    <input type="hidden" v-model="formData.site_tpl">
+                                    <b>{{formData.site_tpl_name}}</b>
                                     <div>
-                                        <div class="tem-look" @click="lookTemImg">
+                                        <div class="tem-look" @click="previewTpl">
                                             <img src="@/assets/register/look-tem.svg" alt="">
                                             预览
                                         </div>
-                                        <div @click="editTemImg">
+                                        <div @click="changeTpl">
                                             <img src="@/assets/register/edit-tem.svg" alt="">
                                             修改
                                         </div>
@@ -83,6 +86,7 @@ import GuipInput from "@/components/GuipInput.vue";
 import GuipRadio from "@/components/GuipRadio.vue";
 import GuipFormItem from "@/components/GuipFormItem.vue";
 import domainBind from "@/components/domainBind.vue";
+import db from '@/utils/indexedDBUtil'
 
 export default {
   name: 'domainSet',
@@ -101,11 +105,24 @@ export default {
     return {
         formData: {
             short_name: '',
-            domain:'',
             sale_channel: '',
+            sale_channel_label: '',
             site_type: '',
-            site_tpl: '1',
+            site_tpl: '',
+            site_tpl_name: '',
+            site_tpl_ico: '',
+            site_tpl_logo: '',
+            picture:'',
             not_finished_uid: '',
+            plat_domain: '',
+            domain_type: '',
+            domain_prefix: '',
+            domain_name: '',
+            sale_channels:{},
+            sale_channels_label:{},
+            domain_types:{},
+            site_types:{},
+            site_type_tpl:{},
         },
         formRules: {
             short_name: [
@@ -114,79 +131,100 @@ export default {
             sale_channel: [
                 { required: true, message: '请选择销售渠道', trigger: 'blur' }
             ],
-            domain: [
+            domain_prefix: [
                 { required: true, message: '请设置站点域名', trigger: 'blur' }
             ],
             site_type: [
                 { required: true, message: '请选择站点类型', trigger: 'blur' }
             ],
         },
-
-        channel_options: [
-            { label: '淘系平台售卖', value: '0', selectedLabel: ''},
-            { label: '非电商平台销售', value: '1', selectedLabel: '适用于搜索推广，如360、百度、微信售卖等渠道' },
-            { label: '自用不出售', value: '2', selectedLabel: '适用于不需要对外售卖，专用于自己检测的用户' },
-            { label: '拼多多平台售卖', value: '3', selectedLabel: '' }
-        ],
-
-        sale_channels:{},
-        domain_types:{},
-        site_types:{},
-        domainType: '1',
-        domainPrefix: '',
-        domainName: '',
-        platDomain: '',
     }
   },
-  watch:{
-      domainPrefix() {
-          this.checkFormDataDomain();
-      },
-      domainName() {
-          this.checkFormDataDomain();
-      }
-  },
   computed: {
-    channel_label() {
-        const labels = this.sale_channels_label;
-        const value = this.formData.sale_channel;
-        return labels && labels[value] ? labels[value] : '';
-    }
+    submitData() {
+        return {
+            short_name: this.formData.short_name,
+            domain: this.formData.domain_prefix + this.formData.domain_name,
+            sale_channel: this.formData.sale_channel,
+            site_type: this.formData.site_type,
+            site_tpl: this.formData.site_tpl,
+            not_finished_uid: this.formData.not_finished_uid,
+            ico: this.formData.site_tpl_ico,
+            logo: this.formData.site_tpl_logo,
+        }
+    },
   },
   mounted() {
+      const formData = JSON.parse(localStorage.getItem('formData'))
+      if(formData){
+          this.formData = formData;
+          localStorage.removeItem('formData')
+          this.getSiteTplSet()
+          return true;
+      }
+
       this.getAddInfo()
   },
   methods:{
+      async getSiteTplSet(){
+          const siteTplInfo = JSON.parse(localStorage.getItem('site_tpl_info'))
+          if(siteTplInfo){
+              this.formData.site_tpl = siteTplInfo.site_tpl
+              this.formData.site_tpl_name = siteTplInfo.site_tpl_name
+              this.formData.picture = siteTplInfo.picture
+              localStorage.removeItem('site_tpl_info')
+          }
+
+          const ico = await db.get('ico')
+          if(ico){
+              this.formData.site_tpl_ico = ico
+              await db.remove('ico')
+          }
+          const logo = await db.get('logo')
+          if(logo){
+              this.formData.site_tpl_logo = logo
+              await db.remove('logo')
+          }
+      },
       getAddInfo() {
           const that = this
-          that.payList = []
           this.$http('POST', '/agentnew/ajax_get_site_add_info', {}).then(response => {
               if(response.status){
                   const addInfo = response.data
-                  that.sale_channels = addInfo.sale_channels
-                  that.sale_channels_label = addInfo.sale_channels_label
-                  that.domain_types = addInfo.domain_types
-                  that.site_types = addInfo.site_types
-                  that.platDomain = addInfo.plat_domain
+                  that.formData.sale_channels = addInfo.sale_channels
+                  that.formData.sale_channels_label = addInfo.sale_channels_label
+
+                  that.formData.domain_type = String(addInfo.domain_type)
+                  that.formData.domain_types = addInfo.domain_types
+                  that.formData.plat_domain = addInfo.plat_domain
+                  that.formData.domain_name = addInfo.plat_domain
+
+                  that.formData.site_type = String(addInfo.site_type)
+                  that.formData.site_types = addInfo.site_types
+                  that.formData.site_type_tpl = addInfo.site_type_tpl
+                  if(that.formData.site_type){
+                      that.formData.site_tpl = this.formData.site_type_tpl[this.formData.site_type].site_tpl
+                      that.formData.site_tpl_name = this.formData.site_type_tpl[this.formData.site_type].site_tpl_name
+                      that.formData.picture = this.formData.site_type_tpl[this.formData.site_type].picture
+                  }
 
                   if(Object.keys(that.siteInfo).length>0){
                       that.$nextTick(() => {
                           that.formData.short_name = that.siteInfo.short_name
-                          that.formData.domain = that.siteInfo.domain
-                          that.formData.sale_channel = that.siteInfo.sale_channel
-                          that.formData.site_type = that.siteInfo.site_type
+                          that.formData.sale_channel = String(that.siteInfo.sale_channel)
+                          that.formData.site_type = String(that.siteInfo.site_type)
                           that.formData.site_tpl = that.siteInfo.site_tpl
+                          that.formData.site_tpl_name = that.siteInfo.site_tpl_name
+                          that.formData.picture = that.siteInfo.picture
                           that.formData.not_finished_uid = that.siteInfo.uid
 
                           //域名存在且不是平台主域名
-                          if(that.formData.domain){
-                              that.domainType = String(that.siteInfo.domain_type)
-                              that.domainPrefix = that.siteInfo.domain_prefix;
-                              that.domainName = that.siteInfo.domain_name;
+                          if(that.siteInfo.domain){
+                              that.formData.domain_type = String(that.siteInfo.domain_type)
+                              that.formData.domain_prefix = that.siteInfo.domain_prefix;
+                              that.formData.domain_name = that.siteInfo.domain_name;
                           }
                       })
-                  }else{
-                      that.domainName = that.platDomain
                   }
                   return true
               }
@@ -195,45 +233,47 @@ export default {
               console.error(error, 'error')
           })
       },
-      radioChange(val){
-          this.formData.sale_channel = val
+      radioChange(){
+          const labels = this.formData.sale_channels_label;
+          const value = this.formData.sale_channel;
+          this.formData.sale_channel_label = labels && labels[value] ? labels[value] : '';
       },
-      radioDomainChange(val){
-          this.domainType = val
-          this.domainName = val === '1' ? this.platDomain : ''
+      radioDomainChange(){
+          this.formData.domain_name = this.formData.domain_type === '1' ? this.formData.plat_domain : ''
       },
-      radioTypeChange(val){
-          this.formData.site_type = val
+      radioTypeChange(){
+          if(this.formData.site_type){
+              this.formData.site_tpl = this.formData.site_type_tpl[this.formData.site_type].site_tpl
+              this.formData.site_tpl_name = this.formData.site_type_tpl[this.formData.site_type].site_tpl_name
+              this.formData.picture = this.formData.site_type_tpl[this.formData.site_type].picture
+          }
       },
       handleClear() {
-          this.domainPrefix = '';
+          this.formData.domain_prefix = '';
       },
       handleChangeDomain(data) {
-          this.domainPrefix = data.prefix
-          this.domainName = data.domain
+          this.formData.domain_prefix = data.prefix
+          this.formData.domain_name = data.domain
       },
-      checkFormDataDomain(){
-          if (this.domainPrefix && this.domainName) {
-              this.formData.domain = this.domainPrefix + this.domainName;
-          }
-      },
-      lookTemImg(){
-
+      previewTpl(){
+          window.open('http://'+this.siteInfo.domain, '_blank');
       },
-      editTemImg(){
-
+      changeTpl(){
+          if(this.formData.site_type === ''){
+              this.$message.warning('请选择站点类型');
+              return false;
+          }
+          localStorage.setItem('formData', JSON.stringify(this.formData))
+          this.$router.push(`/agent/siteTemplate?site_type=${this.formData.site_type}`)
       },
       saveConfirm() {
           const that = this
           that.$refs.formRef.validate((valid) => {
               if (valid) {
                   const that = this
-                  that.$http('POST', '/agentnew/ajax_add_new_site', that.formData).then(response => {
+                  that.$http('POST', '/agentnew/ajax_add_new_site', that.submitData).then(response => {
                       if(response.status && response.data.uid){
                           that.formData.uid = response.data.uid
-                          that.formData.domain_type = that.domainType
-                          that.formData.domain_prefix = that.domainPrefix
-                          that.formData.domain_name = that.domainName
                           that.$emit('handelSiteInfo', that.formData)
 
                           if(that.formData.sale_channel === '2'){
@@ -278,6 +318,11 @@ export default {
 
   .tem-home-top {
     width: 100%;
+    height: 255px;
+    overflow: hidden;
+    img{
+      width: 100%;
+    }
   }
 
   .tem-home-bottom {

src/utils/indexedDBUtil.js

@@ -0,0 +1,79 @@
+const indexedDBUtil = (() => {
+    const dbName = 'MyDB'
+    const storeName = 'files'
+    let db = null
+
+    // 打开数据库
+    function openDB() {
+        return new Promise((resolve, reject) => {
+            if (db) return resolve(db)
+
+            const request = indexedDB.open(dbName, 1)
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result
+                if (!db.objectStoreNames.contains(storeName)) {
+                    db.createObjectStore(storeName)
+                }
+            }
+            request.onsuccess = (event) => {
+                db = event.target.result
+                resolve(db)
+            }
+            request.onerror = (event) => {
+                reject(event.target.error)
+            }
+        })
+    }
+
+    // 保存数据
+    async function set(key, value) {
+        const db = await openDB()
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(storeName, 'readwrite')
+            const store = tx.objectStore(storeName)
+            const request = store.put(value, key)
+            request.onsuccess = () => resolve(true)
+            request.onerror = (e) => reject(e)
+        })
+    }
+
+    // 获取数据
+    async function get(key) {
+        const db = await openDB()
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(storeName, 'readonly')
+            const store = tx.objectStore(storeName)
+            const request = store.get(key)
+            request.onsuccess = () => resolve(request.result)
+            request.onerror = (e) => reject(e)
+        })
+    }
+
+    // 删除某个 key
+    async function remove(key) {
+        const db = await openDB()
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(storeName, 'readwrite')
+            const store = tx.objectStore(storeName)
+            const request = store.delete(key)
+            request.onsuccess = () => resolve(true)
+            request.onerror = (e) => reject(e)
+        })
+    }
+
+    // 清空全部
+    async function clear() {
+        const db = await openDB()
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(storeName, 'readwrite')
+            const store = tx.objectStore(storeName)
+            const request = store.clear()
+            request.onsuccess = () => resolve(true)
+            request.onerror = (e) => reject(e)
+        })
+    }
+
+    return { set, get, remove, clear }
+})()
+
+export default indexedDBUtil

src/views/agent/sitePersonalization.vue

@@ -11,9 +11,11 @@
                                 <GuipRadio v-model="siteInfo.site_type" :options="siteInfo.site_types" label="" prop="site_type" @change="radioChange" />
                             </div>
                             <div class="tem-home">
-                                <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
+                                <div class="outImg_tem">
+                                    <img class="tem-home-top" :src="siteInfo.site_tpl_img ? siteInfo.site_tpl_img : require('@/assets/register/tem-img-normal.png')" alt="">
+                                </div>
                                 <div class="tem-home-bottom">
-                                    <b>经典深蓝模板（默认）</b>
+                                    <b>{{siteInfo.site_tpl_name ? siteInfo.site_tpl_name : '经典深蓝模板（默认）'}}</b>
                                     <div>
                                         <div class="tem-look" @click="previewTpl">
                                             <img src="@/assets/register/look-tem.svg" alt="">
@@ -382,8 +384,7 @@ export default {
             window.open('http://'+this.siteInfo.domain, '_blank');
         },
         changeTpl() {
-            this.$router.push(`/agent/siteTemplate?uid=${this.$route.query.uid}`)
-            // window.open('/agent/siteTemplate', '_blank');
+            this.$router.push(`/agent/siteTemplate?uid=${this.siteInfo.uid}`)
         },
         onSwitchChange(data) {
             console.log(data, '---');
@@ -419,6 +420,7 @@ export default {
                 this.$nextTick(() => {
                     if (response.status) {
                         this.$Message.success(response.info);
+                        this.getSiteInfo()
                     } else {
                         this.$Message.error(response.info);
                     }
@@ -525,6 +527,13 @@ export default {
 //     content: none;
 // }
 
+.outImg_tem {
+  height: 110px;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 2px solid #E8E9EA;
+}
+
 ::v-deep .el-tabs__header {
     margin-bottom: 0;
 }

src/views/agent/siteTemplate.vue

@@ -7,41 +7,50 @@
                     <div class="templeteImgs flex" v-if="templeteList.length">
                         <div class="templeteImgs-item column" v-for="(item, index) in templeteList" :key="item.tpl_id"
                             @click="chooseTemplate(item)">
-                            <div class="outImg_tem">
+                            <div class="outImg_tem" :class="tpl_id === item.id?'outImg_tem_active':''">
                                 <img :src="item.picture" alt="" preview class="tem_img">
                             </div>
                             <span class="look" @click.stop="previewImg(item, index)">预览</span>
-                            <img src="@/assets/site/tem-active.svg" class="tem-active" v-if="tpl_id == item.id" alt="">
+                            <img src="@/assets/site/tem-active.svg" class="tem-active" v-if="tpl_id === item.id" alt="">
                             <p>{{ item.name }}</p>
                         </div>
+                        <div class="templeteImgs-item column" v-if="tpl_customize" @click="choosePrivTemplate()">
+                            <div class="outImg_tem" :class="is_public_tpl === 0?'outImg_tem_active':''">
+                                <img src="@/assets/site/tpl_customize.svg" alt="" class="tem_img">
+                            </div>
+                            <img src="@/assets/site/tem-active.svg" v-if="is_public_tpl === 0" class="tem-active" alt="">
+                            <p>自定义模板</p>
+                        </div>
                     </div>
                 </div>
-                <div class="flex-common flex-between mt12">
+                <div class="flex-common flex-between mt12" v-if="is_public_tpl === 1">
                     <div class="uploadLeft">
                         <div class="uploadwrap">
-                            <label class="flex upload-title">站点ICO<img class="ml-4"
-                                    src="@/assets/form_qua_ic.svg" /></label>
-                            <!-- <el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
+                            <label class="flex upload-title gap8">
+                                站点ICO<img class="ml-4" src="@/assets/form_qua_ic.svg" />
+                            </label>
+                            <el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
                             :limit="Number(1)" ref="avatorUpload" :auto-upload="false" accept=".ico">
-                            <GuipButton class="upload-button" slot="trigger" type="ignore"
-                                :btnstyle="{ width: '118px' }">
-                                <i class="bgImg"></i>选择文件
-                            </GuipButton>
-                            <div slot="tip" class="el-upload__tip">浏览器标题前面的图片，必须是ico格式，尺寸32PX*32PX</div>
-                        </el-upload> -->
-                            <input type="file" accept=".ico" @change="handleAvatarChange" ref="fileInput"
-                                style="display: none">
-                            <GuipButton class="upload-button mt12" slot="trigger" type="ignore"
-                                :btnstyle="{ width: '118px' }" @click="$refs.fileInput.click()">
-                                <i class="bgImg"></i>选择文件
-                            </GuipButton>
-                            <p class="desc mt12">浏览器标题前面的图片，必须是ico格式，尺寸32PX</p>
+                                <GuipButton class="upload-button" slot="trigger" type="ignore"
+                                    :btnstyle="{ width: '118px' }">
+                                    <i class="bgImg"></i>选择文件
+                                </GuipButton>
+                                <div slot="tip" class="el-upload__tip">浏览器标题前面的图片，必须是ico格式，尺寸32PX*32PX</div>
+                            </el-upload>
+<!--                            <input type="file" accept=".ico" @change="handleAvatarChange" ref="fileInput"-->
+<!--                                style="display: none">-->
+<!--                            <GuipButton class="upload-button mt12" slot="trigger" type="ignore"-->
+<!--                                :btnstyle="{ width: '118px' }" @click="$refs.fileInput.click()">-->
+<!--                                <i class="bgImg"></i>选择文件-->
+<!--                            </GuipButton>-->
+<!--                            <p class="desc mt12">浏览器标题前面的图片，必须是ico格式，尺寸32PX</p>-->
                         </div>
                         <div class="uploadwrap mt24">
-                            <label class="flex upload-title">站点首页Logo<img class="ml-4"
-                                    src="@/assets/form_qua_ic.svg" /></label>
+                            <label class="flex upload-title gap8">
+                                站点首页Logo<img class="ml-4" src="@/assets/form_qua_ic.svg" />
+                            </label>
                             <el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
-                                :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
+                                :limit="Number(1)" ref="avatorUpload1" :auto-upload="false" accept=".png">
                                 <GuipButton class="upload-button" slot="trigger" type="ignore"
                                     :btnstyle="{ width: '118px' }">
                                     <i class="bgImg"></i>选择文件
@@ -52,17 +61,42 @@
                     </div>
                     <div class="previewRight">
                         <h4>实时预览</h4>
-                        <img :src="logoUrl" alt="" class="logo">
-                        <img :src="icoUrl" alt="" class="ico">
-                        <div class="img-preview" v-if="pictureUrl">
-                            <img :src="pictureUrl" alt="" class="preview-img">
+                        <div class="img-preview" v-if="previewUrl">
+                            <img :src="previewUrl" alt="" class="preview-img">
                             <img :src="previewLogo" v-if="previewLogo" alt="Logo预览" class="preview-logo">
                             <img :src="previewIco" v-if="previewIco" alt="ico预览" class="preview-ico">
                         </div>
                     </div>
                 </div>
+
+                <div class="flex-common mt12" v-if="is_public_tpl === 0">
+                    <PromptText text="自定义模板·注意事项" :type="1" class="add-info">
+                        <template #desc>
+                            <div class="alert-more-info mt12">
+                                <div class="flex mb10 gap10"><span>1.</span>按开发文档书写自定义网站，并压缩上传后，可生成自定义首页，此模板完全由你设定</div>
+                                <div class="flex gap10">
+                                    2.<a href="#" class="link flex gap10" target="_blank">
+                                    <img src="@/assets/site/form_linkActive.svg" alt="">下载开发文档</a>
+                                </div>
+                            </div>
+                        </template>
+                    </PromptText>
+
+                    <div class="uploadwrap mt32">
+                        <el-upload class="upload-demo" :on-change="handleAvatarChange2" action="#" :multiple="false"
+                                   :limit="Number(1)" ref="avatorUpload2" :auto-upload="false" accept=".zip">
+                            <div class="flex gap12">
+                                <GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
+                                    <i class="bgImg"></i><span v-if="!priv_down_url">选择文件</span><span v-else>重新上传</span>
+                                </GuipButton>
+                                <a v-if="priv_down_url" :href="priv_down_url" target="_blank" class="link flex gap10"><img src="@/assets/site/form_linkActive.svg" alt="">导出网页模板</a>
+                            </div>
+                            <div slot="tip" class="el-upload__tip">根据开发文档的提示，将内容压缩成zip包上传</div>
+                        </el-upload>
+                    </div>
+                </div>
             </div>
-            <Footer></Footer>
+            <Footer class="pb100"></Footer>
             <div v-if="previewVisible" class="preview-modal" @click="previewVisible = false">
                 <img :src="currentImage" class="preview-image">
             </div>
@@ -83,11 +117,14 @@ import Footer from '@/components/Footer.vue'
 // import LightBox from 'vue-image-lightbox'
 // import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 // import VueEasyLightbox from 'vue-easy-lightbox'
-import { convertIcoToPng } from '@/utils/icoConverter'
+// import { convertIcoToPng } from '@/utils/icoConverter'
+import PromptText from "@/components/PromptText.vue";
+import db from '@/utils/indexedDBUtil'
 export default {
     // 站点设置
     name: '',
     components: {
+        PromptText,
         // GuipInput,
         GuipButton,
         Footer
@@ -99,77 +136,74 @@ export default {
 
     data() {
         return {
-            activeName: '1',
             tpl_id: '',
-            logoUrl: '',
+            tpl_name: '',
+            is_public_tpl: '',
+            priv_down_url: '',
+            tpl_customize: '',
             previewLogo: '',
             previewIco: '',
-            icoUrl: '',
-            // media: [],
+            previewUrl: '',
             pictureUrl: '',
-            addImgList: {
-                '万方': require('@/assets/register/wanfang.png'),
-                '维普': require('@/assets/register/weipu.svg'),
-                '学术不端': require('@/assets/register/xueshubuduan.svg'),
-            },
             templeteList: [],
             formData: new FormData(),
-            showLightbox: false,
-            imageIndex: 0,
             previewVisible: false,
+            currentImage: ''
         }
     },
     mounted() {
-        this.get_site_tpl_list();
-    },
-    computed: {
-        // 转换数据格式为lightbox需要的格式
-        media() {
-            return this.templeteList.map(item => ({
-                src: item.picture,
-                type: this.getImageType(item.picture),
-                thumb: item.thumbnail,
-                caption: item.name // 可选，显示标题
-            }))
+        if(!this.$route.query.uid && !this.$route.query.site_type){
+            this.$message.error('未知错误');
+            this.$router.push('/')
+            return false;
         }
+        this.get_site_tpl_list();
     },
     methods: {
         // 初始化
         get_site_tpl_list() {
-            this.$http('POST', '/agentnew/ajax_get_site_tpl_list', {
-                uid: this.$route.query?.uid,
-            }).then(response => {
-                this.$nextTick(() => {
-                    if(response.data.length >0){
-                        this.templeteList = [...response.data]
-                        this.pictureUrl = response.data[0].picture;
-                        this.tpl_id = response.data[0].id;
-                    }
-                })
+            let obj = {}
+            if(this.$route.query.site_type) obj.site_type = this.$route.query.site_type;
+            if(this.$route.query.uid) obj.uid = this.$route.query.uid;
+
+            this.$http('POST', '/agentnew/ajax_get_site_tpl_list', obj).then(response => {
+                if(response.status) {
+                    this.$nextTick(() => {
+                        this.tpl_id = response.data.tpl_data.tpl_id
+                        this.pictureUrl = response.data.tpl_data.picture
+                        this.previewUrl = response.data.tpl_data.thumbnail
+                        this.tpl_customize = response.data.tpl_data.tpl_customize
+                        this.is_public_tpl = response.data.tpl_data.is_public_tpl
+                        this.priv_down_url = response.data.tpl_data.priv_down_url
+                        this.previewLogo = response.data.tpl_data.site_tpl_logo
+                        this.previewIco = response.data.tpl_data.site_tpl_ico
+
+                        this.templeteList = [...response.data.list]
+                    })
+                }
             }).catch(error => {
                 console.error(error, 'error')
             })
         },
-        // 从URL获取图片类型
-        getImageType(url) {
-            const ext = url.split('.').pop().toLowerCase()
-            switch (ext) {
-                case 'png': return 'image/png'
-                case 'jpg':
-                case 'jpeg': return 'image/jpeg'
-                case 'gif': return 'image/gif'
-                default: return 'image/jpeg' // 默认类型
-            }
-        },
         jumpCancle(){
-            console.log('object');
             this.$router.go(-1)
         },
         update_site_tpl() {
+            //站点不存在只保存选择的模板id到
+            if(!this.$route.query.uid){
+                let site_tpl_info = {
+                    site_tpl: this.tpl_id,
+                    site_tpl_name: this.tpl_name,
+                    picture: this.pictureUrl,
+                }
+                localStorage.setItem('site_tpl_info', JSON.stringify(site_tpl_info))
+                this.$router.go(-1)
+                return true;
+            }
+
             this.formData.set('uid', this.$route.query.uid)
             this.formData.set('tpl_id', this.tpl_id)
-            this.formData.set('is_public_tpl', 1)
-
+            this.formData.set('is_public_tpl', this.is_public_tpl)
             this.$http('POST', '/agentnew/ajax_update_site_tpl', this.formData).then(response => {
                 if(response.status){
                     this.$Message.success(response.info)
@@ -178,58 +212,76 @@ export default {
             }).catch(error => {
                 console.error(error, 'error')
             })
+            return true;
         },
         chooseTemplate(item) {
+            this.is_public_tpl = 1
             this.tpl_id = item.id;
+            this.tpl_name = item.name;
             this.pictureUrl = item.picture;
+            this.previewUrl = item.thumbnail;
             this.$Message.info(item.introduce)
         },
-        previewImg(item, index) {
-            console.log('222---11');
-            this.imageIndex = index
+        choosePrivTemplate(){
+            this.is_public_tpl = 0
+            this.tpl_id = ''
+            this.tpl_name = '';
+        },
+        previewImg(item) {
             this.currentImage = item.picture
             this.previewVisible = true
         },
         hide() {
             this.previewVisible = false
         },
-        handleAvatarChange1(file, fileList) {
-            console.log(file, fileList, 'pictureUrl====')
-            // 验证文件类型
-            if (file.raw.type !== 'image/png') {
-                this.$message.error('只能上传PNG格式的图片!')
-                return false
-            }
-            // 验证文件类型
-            if (file.raw.type !== 'image/png') {
-                this.$message.error('只能上传PNG格式的图片!')
-                return false
-            }
+        handleAvatarChange2(file) {
+            let fileObj = file.raw
+            this.formData.set('zip_tpl', fileObj);
+        },
+        async handleAvatarChange1(file) {
             let fileObj = file.raw
             this.formData.set('logo', fileObj);
+            await db.set('logo', fileObj)
+            //预览
             const reader = new FileReader()
             reader.onload = (e) => {
                 this.previewLogo = e.target.result
             }
             reader.readAsDataURL(file.raw)
         },
-        async handleAvatarChange(event) {
-            const file = event.target.files[0]
-            // console.log(file,'file==');
-            if (!file) return
-            this.formData.set('ico', file);
-            try {
-                let previewImages = [await convertIcoToPng(file)]
-                this.previewIco = previewImages[0].dataUrl
-            } catch (err) {
-                console.error('转换失败:', err)
-                alert('ICO文件解析失败')
+        async handleAvatarChange(file) {
+            let fileObj = file.raw
+            this.formData.set('ico', fileObj);
+            await db.set('ico', fileObj)
+            //预览
+            const reader = new FileReader()
+            reader.onload = (e) => {
+                this.previewIco = e.target.result
             }
+            reader.readAsDataURL(file.raw)
         }
     }
 }
 </script>
 <style scoped lang="scss">
+.pb100{
+  padding-bottom: 100px;
+}
+.mb10{
+  margin-bottom: 10px;
+}
+.link{
+  text-decoration: none;
+  color: #006AFF;
+}
+.add-info{
+  padding: 20px 14px;
+  letter-spacing: 0.08em;
+  ::v-deep .prompt-desc{
+    color: #1E2226;
+    font-weight: bold;
+  }
+}
 .siteTem-wrap{
     padding: 12px 12px 0;
     height: 100%;
@@ -318,7 +370,7 @@ export default {
     }
 
     .preview-img{
-        width: 1400px;
+        width: 100%;
     }
     .img-preview {
         flex: 1;
@@ -327,17 +379,17 @@ export default {
 
         .preview-logo {
             position: absolute;
-            top: 5px;
-            height: 50px;
-            left: 20px;
+            top: 67px;
+            height: 35px;
+            left: 40px;
         }
 
         .preview-ico {
             position: absolute;
-            top: 5px;
-            height: 32px;
-            width: 32px;
-            left: 200px;
+            top: 20px;
+            height: 25px;
+            width: 25px;
+            left: 189px;
         }
     }
 
@@ -357,6 +409,10 @@ export default {
     border: 2px solid #E8E9EA;
 }
 
+.outImg_tem_active{
+    border: 2px solid #006AFF;
+}
+
 ::v-deep .el-tabs__nav-wrap {
     border-width: 0px 0px 1px 0px;
     border-style: solid;
@@ -410,8 +466,7 @@ export default {
 .templeteImgs {
     max-width: 100%;
     justify-content: flex-start;
-    white-space: nowrap;
-    overflow-x: auto;
+    flex-wrap: wrap;
     gap: 13px;
 
     .templeteImgs-item {
@@ -419,6 +474,8 @@ export default {
         border-radius: 4px;
         cursor: pointer;
 
+
+
         .tem_img {
             width: 176px;
             border-radius: 6px;
@@ -442,7 +499,7 @@ export default {
         }
 
         .look {
-            // display: none;
+            display: none;
             transition: all .3s;
             position: absolute;
             right: 2px;
@@ -451,7 +508,6 @@ export default {
             height: 30px;
             background: rgba(0, 0, 0, 0.61);
             backdrop-filter: blur(3px);
-            line-height: 18px;
             line-height: 30px;
             color: #fff;
             text-align: center;
@@ -463,6 +519,9 @@ export default {
                 display: block;
                 transition: all .3s;
             }
+            .outImg_tem{
+                border: 2px solid #006AFF;
+            }
         }
     }
 }