销售方向
-
- 
+
+
+ ![]()
+
- 经典深蓝模板（默认）
+
+ {{formData.site_tpl_name}}
-
+
预览
-
预览
+
修改
@@ -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 {
diff --git a/src/utils/indexedDBUtil.js b/src/utils/indexedDBUtil.js
new file mode 100644
index 0000000..ec904fc
--- /dev/null
+++ b/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
diff --git a/src/views/agent/sitePersonalization.vue b/src/views/agent/sitePersonalization.vue
index fa2de99..cd6d72b 100644
--- a/src/views/agent/sitePersonalization.vue
+++ b/src/views/agent/sitePersonalization.vue
@@ -11,9 +11,11 @@
修改
-
+
+
+ ![]()
+
- 经典深蓝模板（默认）
+ {{siteInfo.site_tpl_name ? siteInfo.site_tpl_name : '经典深蓝模板（默认）'}}
@@ -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;
}
diff --git a/src/views/agent/siteTemplate.vue b/src/views/agent/siteTemplate.vue
index 167c71d..921cb2e 100644
--- a/src/views/agent/siteTemplate.vue
+++ b/src/views/agent/siteTemplate.vue
@@ -7,41 +7,50 @@
-
@@ -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;
}
diff --git a/src/views/agent/siteTemplate.vue b/src/views/agent/siteTemplate.vue
index 167c71d..921cb2e 100644
--- a/src/views/agent/siteTemplate.vue
+++ b/src/views/agent/siteTemplate.vue
@@ -7,41 +7,50 @@
-
+
![]()
预览
- 
+
+
+
{{ item.name }}
+
+
+ 
+
+
+
+ 自定义模板
+
+
![]()
- ![]()
-
+
+
-
+
![]()
@@ -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)
}
}
}
-
-
-
-
- 选择文件
-
-
+ 选择文件
+
+
浏览器标题前面的图片，必须是ico格式，尺寸32PX
+浏览器标题前面的图片，必须是ico格式，尺寸32PX*32PX
+
+
+
+
+
+
+
+
-
+
+ :limit="Number(1)" ref="avatorUpload1" :auto-upload="false" accept=".png">
选择文件
@@ -52,17 +61,42 @@
实时预览
-
- ![]()
+
+ ![]()
![Logo预览]()
![ico预览]()
下载开发文档