diff --git a/src/App.vue b/src/App.vue index b150345..f6dda01 100755 --- a/src/App.vue +++ b/src/App.vue @@ -10,9 +10,10 @@ - + + - + @@ -34,7 +35,7 @@ import Header from './components/Header.vue'; import Breadcrumb from './components/Breadcrumb.vue'; // import loadingAnimation from '@/assets/loadingAni.json' // 导入JSON文件 import GlobalLoading from '@/components/GlobalLoading1.vue' -import SliderScond from '@/components/SliderScond.vue' +import SliderScondThree from '@/components/SliderScondThree.vue' // import ContentWithLoading from '@/components/ContentWithLoading' export default { data() { @@ -44,7 +45,7 @@ export default { }, components: { GlobalLoading, - SliderScond, + SliderScondThree, // ContentWithLoading, SliderMenu, // Footer, @@ -56,6 +57,17 @@ export default { }, mounted() { window.addEventListener('beforeunload', this.clearStorage); + console.log(this.secondMenu,'secondMenu===='); + if (!this.secondMenu || this.secondMenu.length === 0 || Object.keys(this.secondMenu).length == 0) { + // 尝试从 localStorage 恢复 + console.log(savedData,'savedData'); + const savedData = localStorage.getItem('selectedServices'); + if (savedData) { + this.$store.commit('SET_SECOND_MENU', JSON.parse(savedData)); + } else { + this.$router.go(-1); + } + } }, beforeUnmount() { window.removeEventListener('beforeunload', this.clearStorage); @@ -101,6 +113,9 @@ export default { flex-direction: column; min-width: 1042px; } +.main-right-content2{ + min-width: 990px; +} ::v-deep .el-container .el-main { diff --git a/src/assets/serviceIcon/activeImg_choose.svg b/src/assets/serviceIcon/activeImg_choose.svg new file mode 100644 index 0000000..af36492 --- /dev/null +++ b/src/assets/serviceIcon/activeImg_choose.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/site/price1.svg b/src/assets/site/price1.svg new file mode 100644 index 0000000..124ec75 --- /dev/null +++ b/src/assets/site/price1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/site/price2.svg b/src/assets/site/price2.svg new file mode 100644 index 0000000..4d4e04b --- /dev/null +++ b/src/assets/site/price2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/site/price3.svg b/src/assets/site/price3.svg new file mode 100644 index 0000000..7f9d835 --- /dev/null +++ b/src/assets/site/price3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SliderScondThree.vue b/src/components/SliderScondThree.vue new file mode 100644 index 0000000..b51b450 --- /dev/null +++ b/src/components/SliderScondThree.vue @@ -0,0 +1,439 @@ + + + + + + \ No newline at end of file diff --git a/src/components/site/addSiteStep/step1.vue b/src/components/site/addSiteStep/step1.vue index eb8c53e..ae2de93 100644 --- a/src/components/site/addSiteStep/step1.vue +++ b/src/components/site/addSiteStep/step1.vue @@ -6,36 +6,38 @@

站点信息

- -
站点简称
-
一个站点对应一个销售渠道,定义好名字好区分
- -
- -
销售渠道
- {{formData.sale_channel_label}} - -
+ +
域名来源
- +
- + + + + {{ formData.plat_domain }} + + +
@@ -46,20 +48,22 @@

销售方向

- +
- +
- {{formData.site_tpl_name}} + {{ formData.site_tpl_name }}
- - - - + + + +
修改 @@ -89,8 +93,10 @@
- 跳过 - 下一步 + + 跳过 + 下一步
@@ -105,341 +111,380 @@ import domainBind from "@/components/domainBind.vue"; import db from '@/utils/indexedDBUtil' export default { - name: 'domainSet', - props: { - siteInfo: { - type: Object, - required: true - }, - skip: { - type: Boolean, - required: false - } - }, - components: { - domainBind, - GuipFormItem, GuipRadio, GuipInput, - GuipButton - }, - data(){ - return { - showAlert: false, - formData: { - short_name: '', - sale_channel: '', - sale_channel_label: '', - site_type: '', - 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: [ - { required: true, message: '请输入站点简称', trigger: 'blur' } - ], - sale_channel: [ - { required: true, message: '请选择销售渠道', trigger: 'blur' } - ], - domain_prefix: [ - { required: true, message: '请设置站点域名', trigger: 'blur' } - ], - site_type: [ - { required: true, message: '请选择站点类型', trigger: 'blur' } - ], + name: 'domainSet', + props: { + siteInfo: { + type: Object, + required: true }, - } - }, - computed: { - submitData() { - let domain = ""; - if (this.formData.domain_type === '1') { - domain = this.formData.domain_prefix + this.formData.plat_domain - } else if (this.formData.domain_type === '2') { - domain = this.formData.domain_prefix + this.formData.domain_name + skip: { + type: Boolean, + required: false } + }, + components: { + domainBind, + GuipFormItem, GuipRadio, GuipInput, + GuipButton + }, + data() { return { - short_name: this.formData.short_name, - domain: domain, - 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, + showAlert: false, + formData: { + short_name: '', + sale_channel: '', + sale_channel_label: '', + site_type: '', + 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: [ + { required: true, message: '请输入站点简称', trigger: 'blur' } + ], + sale_channel: [ + { required: true, message: '请选择销售渠道', trigger: 'blur' } + ], + domain_prefix: [ + { required: true, message: '请设置站点域名', trigger: 'blur' } + ], + site_type: [ + { required: true, message: '请选择站点类型', trigger: 'blur' } + ], + }, } }, - }, - mounted() { - const formData = JSON.parse(localStorage.getItem('formData')) - if(formData){ - this.formData = formData; - localStorage.removeItem('formData') - this.getSiteTplSet() - return true; - } - - if(this.skip && !localStorage.getItem('showAlert')) this.showAlert = true - this.getAddInfo() - }, - methods:{ - hideAlert(){ - this.showAlert = false - localStorage.setItem('showAlert', false) - }, - 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 - } + computed: { + submitData() { + let domain = ""; + if (this.formData.domain_type === '1') { + domain = this.formData.domain_prefix + this.formData.plat_domain + } else if (this.formData.domain_type === '2') { + domain = this.formData.domain_prefix + this.formData.domain_name + } + return { + short_name: this.formData.short_name, + domain: domain, + 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; + } - const ico = await db.get('ico') - if(ico) this.formData.site_tpl_ico = ico - const logo = await db.get('logo') - if(logo) this.formData.site_tpl_logo = logo - }, - getAddInfo() { - const that = this - this.$http('POST', '/agentnew/ajax_get_site_add_info', {}).then(response => { - if(response.status){ - const addInfo = response.data - that.formData.sale_channels = addInfo.sale_channels - that.formData.sale_channels_label = addInfo.sale_channels_label + if (this.skip && !localStorage.getItem('showAlert')) this.showAlert = true + this.getAddInfo() + }, + methods: { + hideAlert() { + this.showAlert = false + localStorage.setItem('showAlert', false) + }, + 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 + } - that.formData.domain_type = String(addInfo.domain_type) - that.formData.domain_types = addInfo.domain_types - that.formData.plat_domain = addInfo.plat_domain + const ico = await db.get('ico') + if (ico) this.formData.site_tpl_ico = ico + const logo = await db.get('logo') + if (logo) this.formData.site_tpl_logo = logo + }, + getAddInfo() { + const that = this + this.$http('POST', '/agentnew/ajax_get_site_add_info', {}).then(response => { + if (response.status) { + const addInfo = response.data + that.formData.sale_channels = addInfo.sale_channels + that.formData.sale_channels_label = addInfo.sale_channels_label - 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 - } + that.formData.domain_type = String(addInfo.domain_type) + that.formData.domain_types = addInfo.domain_types + that.formData.plat_domain = addInfo.plat_domain - if(Object.keys(that.siteInfo).length>0){ - that.$nextTick(() => { - that.formData.short_name = that.siteInfo.short_name - 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 + 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 + } - 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; - }) - } - return true - } - that.$message.error(response.info); - }).catch(error => { - console.error(error, 'error') - }) - }, - radioChange(){ - const labels = this.formData.sale_channels_label; - const value = this.formData.sale_channel; - this.formData.sale_channel_label = labels && labels[value] ? labels[value] : ''; - }, - 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.formData.domain_prefix = ''; - }, - handleChangeDomain(data) { - this.formData.domain_prefix = data.prefix - this.formData.domain_name = data.domain - }, - // previewTpl(){ - // window.open('http://'+this.siteInfo.domain, '_blank'); - // }, - changeTpl(){ - if(this.formData.site_type === ''){ - this.$message.warning('请选择站点类型'); - return false; - } - localStorage.setItem('formData', JSON.stringify(this.formData)) - if(this.formData.not_finished_uid){ - this.$router.push(`/agent/siteTemplate?uid=${this.formData.not_finished_uid}`) - }else{ - this.$router.push(`/agent/siteTemplate?site_type=${this.formData.site_type}`) - } - }, - jumpStep(){ - this.$router.push('/') - }, - saveConfirm() { - const that = this - let formValid = false; - that.$refs.formRef.validate((valid) => { - formValid = valid - }); + if (Object.keys(that.siteInfo).length > 0) { + that.$nextTick(() => { + that.formData.short_name = that.siteInfo.short_name + 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 - let domainValid = false; - if(that.formData.domain_type === '2'){ - that.$refs.domainBind.$refs.bindFormRef.validate(valid => { - domainValid = valid - }) - }else{ - domainValid = true - } + 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; + }) + } + return true + } + that.$message.error(response.info); + }).catch(error => { + console.error(error, 'error') + }) + }, + radioChange() { + const labels = this.formData.sale_channels_label; + const value = this.formData.sale_channel; + this.formData.sale_channel_label = labels && labels[value] ? labels[value] : ''; + }, + 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.formData.domain_prefix = ''; + }, + handleChangeDomain(data) { + this.formData.domain_prefix = data.prefix + this.formData.domain_name = data.domain + }, + // previewTpl(){ + // window.open('http://'+this.siteInfo.domain, '_blank'); + // }, + changeTpl() { + if (this.formData.site_type === '') { + this.$message.warning('请选择站点类型'); + return false; + } + localStorage.setItem('formData', JSON.stringify(this.formData)) + if (this.formData.not_finished_uid) { + this.$router.push(`/agent/siteTemplate?uid=${this.formData.not_finished_uid}`) + } else { + this.$router.push(`/agent/siteTemplate?site_type=${this.formData.site_type}`) + } + }, + jumpStep() { + this.$router.push('/') + }, + validateFunc(fields){ + const that = this + let flag = false + // 遍历每个表单项 + if(Array.isArray(fields)){ + fields.forEach(field => { + if (flag) return + // 验证单个字段 + field.validate('', (error) => { + if (error) { + // 获取字段的label + const label = field.label; + const prop = field.prop; + + flag = true; + console.log('label',prop, label); + if (!label) return + that.$positionMessage({ + type: 'error', + message: label + '不得为空', + target: that.$refs.nextStepRef1, // 可以是DOM元素或选择器 + position: 'top' + }) + } + }); + }); + } + }, + saveConfirm() { + const that = this + let formValid = false; + let fields = that.$refs.formRef.fields; + that.validateFunc(fields) + that.$refs.formRef.validate((valid) => { + formValid = valid + }); + let domainValid = false; + if (that.formData.domain_type === '2') { + that.$refs.domainBind.$refs.bindFormRef.validate(valid => { + domainValid = valid + }) + that.$positionMessage({ + type: 'error', + message: '域名设置不得为空', + target: that.$refs.nextStepRef1, // 可以是DOM元素或选择器 + position: 'top' + }) + } else { + domainValid = true + } - if (formValid && domainValid) { - that.$http('POST', '/agentnew/ajax_add_new_site', that.submitData).then(async response => { - if(response.status && response.data.uid){ - await that.deleteSiteTplData() + if (formValid && domainValid) { + that.$http('POST', '/agentnew/ajax_add_new_site', that.submitData).then(async response => { + if (response.status && response.data.uid) { + await that.deleteSiteTplData() - that.formData.uid = response.data.uid - that.$emit('handelSiteInfo', that.formData) + that.formData.uid = response.data.uid + that.$emit('handelSiteInfo', that.formData) - if(that.formData.sale_channel === '2'){ - //自用站点无需设置收款方式 - that.$emit('handelStep', 3) - }else{ - that.$emit('handelStep', 2) - } - return true; - } - that.$message.error(response.info); - }).catch(error => { - console.error(error, 'error') - }) - } - }, - async deleteSiteTplData(){ - localStorage.removeItem('activeStep') - localStorage.removeItem('site_tpl_info') - await db.remove('ico') - await db.remove('logo') - }, - } + if (that.formData.sale_channel === '2') { + //自用站点无需设置收款方式 + that.$emit('handelStep', 3) + } else { + that.$emit('handelStep', 2) + } + return true; + } + that.$message.error(response.info); + }).catch(error => { + console.error(error, 'error') + }) + } + }, + async deleteSiteTplData() { + localStorage.removeItem('activeStep') + localStorage.removeItem('site_tpl_info') + await db.remove('ico') + await db.remove('logo') + }, + } } \ No newline at end of file diff --git a/src/components/site/serviceSetting/domainSet.vue b/src/components/site/serviceSetting/domainSet.vue index 37214ed..91cbef8 100644 --- a/src/components/site/serviceSetting/domainSet.vue +++ b/src/components/site/serviceSetting/domainSet.vue @@ -6,16 +6,16 @@
+ +
+ 当前服务域名:{{info.domain}} +
域名来源
-
- 当前服务域名:{{info.domain}} -
- -
@@ -121,7 +121,7 @@ export default { font-size: 14px; letter-spacing: 0.08em; color: #1E2226; - margin-bottom: 12px; + margin-bottom: 16px; } .domain-radio{ diff --git a/src/router/index.js b/src/router/index.js index 09a519f..116a572 100755 --- a/src/router/index.js +++ b/src/router/index.js @@ -9,7 +9,7 @@ const whiteSecondSider = [ ]; const blackSliderList = [ '/franchise', '/agreement', '/customizeDoc', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList', - '/agent/domainList' + '/agent/domainList','/agent/siteAddChooseService' , '/agent/noticeList' ]; // 一级路由 @@ -24,7 +24,7 @@ const blackHeaderRightList = [ ]; const blackFooterList = [ '/', '/franchise','/agreement', '/customizeDoc','/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd', - '/agent/siteTemplate' + '/agent/siteTemplate','/agent/siteAddChooseService' ]; // const whiteSlideList = ['/', '/ui', // '/agent/siteList', @@ -184,12 +184,23 @@ const routes = [{ } }, { + path: '/agent/siteAddChooseService', + name: '服务列表-添加', + isFirst: true, + component: () => import( /* webpackChunkName: "siteServiceAdd" */ '../views/agent/siteAddChooseService.vue'), + meta: { + title: '添加服务', + breadcrumbParent: '服务列表', + // hideBreadcrumb: true // 一级页面不显示面包屑 + } + }, + { path: '/agent/siteServiceAdd', name: '服务列表-添加', isFirst: true, component: () => import( /* webpackChunkName: "siteServiceAdd" */ '../views/agent/siteServiceAdd.vue'), meta: { - title: '添加服务', + title: '设置价格', breadcrumbParent: '服务列表', // hideBreadcrumb: true // 一级页面不显示面包屑 } @@ -529,7 +540,7 @@ const router = new VueRouter({ }) router.beforeEach((to, from, next) => { // 有关路由跳转时,部分状态重置 - store.commit('SET_SECOND_MENU', []); + // store.commit('SET_SECOND_MENU', []); if(store.state.componentsName){ store.commit('SET_COMPONENTS_NAME', ''); } @@ -581,7 +592,7 @@ router.beforeEach((to, from, next) => { router.afterEach(() => { // 清除存储的currentMenuItem if(!store.state.showSecondSide && store.state.currentMenuItem){ - store.commit('SET_CURRENTMENUITEM',null); + // store.commit('SET_CURRENTMENUITEM',null); } // 添加延迟确保过渡效果 diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss index cc3b3ef..f226e9a 100644 --- a/src/style/theme/common.scss +++ b/src/style/theme/common.scss @@ -78,7 +78,7 @@ body { cursor: pointer; transition: all .3s; - &:hover { + & > *:hover { transition: all .3s; color: #006AFF !important; } diff --git a/src/views/agent/siteAddChooseService.vue b/src/views/agent/siteAddChooseService.vue new file mode 100644 index 0000000..af2cb08 --- /dev/null +++ b/src/views/agent/siteAddChooseService.vue @@ -0,0 +1,427 @@ + + + \ No newline at end of file diff --git a/src/views/agent/siteServiceAdd.vue b/src/views/agent/siteServiceAdd.vue index 1bd5b03..eae3310 100644 --- a/src/views/agent/siteServiceAdd.vue +++ b/src/views/agent/siteServiceAdd.vue @@ -1,7 +1,7 @@