diff --git a/src/assets/addIcon.svg b/src/assets/addIcon.svg new file mode 100644 index 0000000..abcbdf7 --- /dev/null +++ b/src/assets/addIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/collect.svg b/src/assets/collect.svg new file mode 100644 index 0000000..1d7a3e4 --- /dev/null +++ b/src/assets/collect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/delete.svg b/src/assets/delete.svg new file mode 100644 index 0000000..3161f77 --- /dev/null +++ b/src/assets/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/goodsTem.png b/src/assets/goodsTem.png new file mode 100644 index 0000000..7bb657c Binary files /dev/null and b/src/assets/goodsTem.png differ diff --git a/src/assets/register/close.svg b/src/assets/register/close.svg new file mode 100644 index 0000000..26c4c0f --- /dev/null +++ b/src/assets/register/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/register/wanfang.png b/src/assets/register/wanfang.png new file mode 100644 index 0000000..a093ba2 Binary files /dev/null and b/src/assets/register/wanfang.png differ diff --git a/src/assets/register/wanfang.svg b/src/assets/register/wanfang.svg new file mode 100644 index 0000000..dbcb2d4 --- /dev/null +++ b/src/assets/register/wanfang.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/register/weipu.svg b/src/assets/register/weipu.svg new file mode 100644 index 0000000..505a774 --- /dev/null +++ b/src/assets/register/weipu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/register/xueshubuduan.svg b/src/assets/register/xueshubuduan.svg new file mode 100644 index 0000000..2cccc43 --- /dev/null +++ b/src/assets/register/xueshubuduan.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/PageTitle.vue b/src/components/PageTitle.vue new file mode 100644 index 0000000..f02722c --- /dev/null +++ b/src/components/PageTitle.vue @@ -0,0 +1,52 @@ + + + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index c487209..f7575a6 100755 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,9 +6,9 @@ import HomeView from '../views/HomeView.vue'; // import Franchise from '../views/Franchise.vue' Vue.use(VueRouter) -const whiteSlideList = ['/','/ui'];//侧边导航白名单 -const whiteHeaderList = ['/','/ui','/register'];//头部导航白名单 -const whiteFooterList = ['/','/ui'];//底部白名单 +const whiteSlideList = ['/','/ui',];//侧边导航白名单 +const whiteHeaderList = ['/','/ui','/register','/settingServicePrice'];//头部导航白名单 +const whiteFooterList = ['/','/ui','/settingServicePrice'];//底部白名单 const routes = [ { path: '/', @@ -49,6 +49,11 @@ const routes = [ name: '加盟', component: () => import(/* webpackChunkName: "franchise" */ '../views/Franchise.vue') }, + { + path: '/settingServicePrice', + name: '配置服务价格', + component: () => import(/* webpackChunkName: "franchise" */ '../views/ConfigureServicePrices.vue') + }, ] const router = new VueRouter({ diff --git a/src/store/index.js b/src/store/index.js index 2ee5a6e..19066f6 100755 --- a/src/store/index.js +++ b/src/store/index.js @@ -10,7 +10,8 @@ export default new Vuex.Store({ showHeader:false, menuList:[],//目录菜单 showBreadcrumb:false,//是否展示面包屑 - pageTitle:'一般新文献'//页面标题 + pageTitle:'一般新文献',//页面标题 + addServiceList:[] }, actions: { SET_HEADER({ commit }) { @@ -28,6 +29,9 @@ export default new Vuex.Store({ SET_PAGETITLE({ commit }) { commit('SET_PAGETITLE'); }, + SET_ADDSERVICELIST({ commit }) { + commit('SET_ADDSERVICELIST'); + }, }, mutations: { SET_SIDEBAR(state, show) { @@ -44,6 +48,9 @@ export default new Vuex.Store({ }, SET_PAGETITLE(state, title) { state.pageTitle = title; + }, + SET_ADDSERVICELIST(state, list) { + state.addServiceList = list; } }, getters: { diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss index 673f85f..cc25d31 100644 --- a/src/style/theme/common.scss +++ b/src/style/theme/common.scss @@ -11,6 +11,9 @@ body { } } +.mb24{ + margin-bottom: 24px; +} .el-container { height: 100%; @@ -72,6 +75,19 @@ body { max-width: 590px; flex: 1; } + .flex-left-desc{ + /* body/body 2_regular */ + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + letter-spacing: 0.08em; + font-variation-settings: "opsz" auto; + /* text/text_1 */ + color: #1E2226; + text-align: left; + // margin: ; + } } diff --git a/src/views/ConfigureServicePrices.vue b/src/views/ConfigureServicePrices.vue new file mode 100644 index 0000000..7c10802 --- /dev/null +++ b/src/views/ConfigureServicePrices.vue @@ -0,0 +1,371 @@ + + + \ No newline at end of file diff --git a/src/views/Register.vue b/src/views/Register.vue index acc7ddd..4b94757 100755 --- a/src/views/Register.vue +++ b/src/views/Register.vue @@ -13,20 +13,20 @@
-
+
基础信息
-
+
收款方式
-
+
@@ -86,6 +86,7 @@
销售渠道
+ 适用于搜索推广，如360、百度、微信售卖等渠道 @@ -341,7 +342,7 @@ @@ -464,20 +465,54 @@ - -
- 添加查重服务 -
    -
  • - - {{ item.name }} -
    • -
+ +
+
+
+ 添加查重服务 + + +
    +
  • + + {{ item.name }} +
    • +
+ +
+ +
+ +
+
+

{{ category.name }}

+

{{ category.desc }}

+
    +
  • +
    + {{ item.name }} + +
    +

    {{ item.desc }}

    +

    ¥{{ item.price }} / {{ item.word }}

    +
    • +
+
+
+
-
- +
+ 已选{{ serviceTotal }}项服务 + 下一步
+
跳过 @@ -498,6 +533,7 @@ import PaymentMethod from '@/components/paymentMethod.vue'; import DomainModal from '@/components/domainModal.vue'; import CustomDropdown from '@/components/CustomDropdown.vue'; // import GuipTable from '@/components/GuipTable.vue'; +import store from '../store'; export default { components: { @@ -516,63 +552,171 @@ export default { }, data() { return { - addlist:[ + btnstyleObj1: { + width: '137px', + height: '38px', + }, + serviceTotal:0, + activeCategory: 0, + addlist: [ { - name:'万方', - desc:'提供中英文文献相似性检测服务。自主研发的“句子级正交软聚类倒排语义” 算法，海量数据全文对比，5分钟快速出报告。', - list:[ + name: '万方', + desc: '提供中英文文献相似性检测服务。自主研发的“句子级正交软聚类倒排语义” 算法，海量数据全文对比，5分钟快速出报告。', + list: [ { - name:'一般新文献', - desc:'适用于所有未正式发表的文献类型。', - price:'2.4', - word:'1000字符' + name: '一般新文献', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + word: '1000字符', + checked:false }, { - name:'本科论文', - desc:'适用于在校大学生毕业论文。', - price:'2.4', - word:'1000字符' + name: '本科论文', + desc: '适用于在校大学生毕业论文。', + price: '2.4', + word: '1000字符', + checked:false }, { - name:'说博士论文', - desc:'适用于应届高校硕博士研究生论文检测。', - price:'2.4', - word:'1000字符' + name: '说博士论文', + desc: '适用于应届高校硕博士研究生论文检测。', + price: '2.4', + checked:false, + word: '1000字符' }, { - name:'高职高专', - desc:'适用于高等职业学院和高等专科学校论文检测。', - price:'2.4', - word:'1000字符' + name: '高职高专', + desc: '适用于高等职业学院和高等专科学校论文检测。', + price: '2.4', + checked:false, + word: '1000字符' }, { - name:'一般新文献', - desc:'适用于所有未正式发表的文献类型。', - price:'2.4', - word:'1000字符' + name: '一般新文献1name', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + checked:false, + word: '1000字符' }, ] }, { - name:'维普', - desc:'', - list:[ + name: '维普', + desc: '维普维普维普维普维普维普维普维普', + list: [ { - - } + name: '一般新文献222', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '本科论文222', + desc: '适用于在校大学生毕业论文。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '说博士论文222', + desc: '适用于应届高校硕博士研究生论文检测。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '高职高专222', + desc: '适用于高等职业学院和高等专科学校论文检测。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '一般新文献2222', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '高职高专2224', + desc: '适用于高等职业学院和高等专科学校论文检测。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '一般新文献2222221', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '高职高专22242', + desc: '适用于高等职业学院和高等专科学校论文检测。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '一般新文献22222211', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + checked:false, + word: '1000字符' + }, ] }, { - name:'学术不端', - desc:'', - list:[ + name: '学术不端', + desc: '学术不端学术不端学术不端学术不端学术不端学术不端', + list: [ { - - } + name: '一般新文献333', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '本科论文33', + desc: '适用于在校大学生毕业论文。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '说博士论文333', + desc: '适用于应届高校硕博士研究生论文检测。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '高职高专333', + desc: '适用于高等职业学院和高等专科学校论文检测。', + price: '2.4', + checked:false, + word: '1000字符' + }, + { + name: '一般新文献3332', + desc: '适用于所有未正式发表的文献类型。', + price: '2.4', + checked:false, + word: '1000字符' + }, ] }, ], - dialogVisibleAdd:false, + addImgList: { + '万方': require('@/assets/register/wanfang.png'), + '维普': require('@/assets/register/weipu.svg'), + '学术不端': require('@/assets/register/xueshubuduan.svg'), + }, + dialogVisibleAdd: false, selectedItemWeixin: {},//微信收款方式 selectedItem: {},//店铺绑定 selectedValue1: null,//店铺绑定 @@ -615,7 +759,7 @@ export default { dialogVisible: false,//是否展示弹框 showCancelButton: true, // 控制是否显示取消按钮 showCloseButton: true, // 控制是否显示关闭按钮 - activeStep: 3,//当前步骤条 + activeStep: 2,//当前步骤条 has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺 distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商 payment_method_list: [//收款方式 @@ -708,12 +852,39 @@ export default { options_zhifubao: [], }; }, + computed: { + // 计算选中的总数 + selectedCount() { + let list = [] + let list1=[] + this.addlist.forEach(item=>{ + list1=[] + item.list.forEach((item1) => { + if(item.checked){ + list.push(item) + list1.push(item1) + list.list = list1 + } + }) + }) + store.commit('SET_ADDSERVICELIST', list); + return list1.length; + }, + }, methods: { + nextGoSettingPrice(){ + this.$router.push('/settingServicePrice') + }, + goCurActiveStep(step){ + if(step < this.activeStep){ + this.activeStep = step + } + }, showDomainModal() { this.dialogVisibleAdd = true; - }, - handleCloseAdd(){ - this.dialogVisibleAdd = false; + this.$nextTick(() => { + this.$refs.content.addEventListener('scroll', this.handleScroll); + }); }, yumingInput() { this.dialogVisible1 = true; @@ -904,9 +1075,41 @@ export default { }, changeNormalWeixin() { - } + }, + // 关闭弹窗 + handleCloseAdd() { + this.dialogVisibleAdd = false; + this.$refs.content.removeEventListener('scroll', this.handleScroll); + }, + // 滚动到指定分类 + scrollToCategory(index) { + this.activeCategory = index; + const element = this.$refs[`category-${index}`][0]; + element.scrollIntoView({ behavior: 'smooth' }); + }, + // 处理滚动事件 + handleScroll() { + const scrollPosition = this.$refs.content.scrollTop; + console.log(this.activeCategory,scrollPosition,'this.activeCategory'); + this.addlist.forEach((category, index) => { + const element = this.$refs[`category-${index}`][0]; + const elementTop = Math.round(element.offsetTop - 70); + const elementBottom = elementTop + element.offsetHeight; + + console.log('进来了',scrollPosition,elementTop,elementBottom,index,scrollPosition >= elementTop && scrollPosition < elementBottom); + if (scrollPosition >= elementTop && scrollPosition < elementBottom) { + this.activeCategory = index; + } + }); + }, + updateSelectedCount(item) { + this.serviceTotal = this.selectedCount; + this.$set(this.addlist,item) + // console.log('选中总数已更新：',item, this.selectedCount,this.addlist); + }, - } + }, + };