配置服务价格侧边修改、swtich组件修改

src/components/GuipSwitch.vue

@@ -1,4 +1,5 @@
 <template>
+    <el-form-item >
     <div class="flex switchWrap">
         <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText }}</span>
         <el-switch 
@@ -15,6 +16,8 @@
             </template>
         </el-switch>
     </div>
+  </el-form-item>
+
 </template>
 <!-- 他这个描述文案不太符合当前使用暂且不用 -->
 <!-- :active-text="activeText" 
@@ -57,10 +60,19 @@ export default {
             loading: false, // 加载状态
         };
     },
+    // watch: {
+    //     modelValue(newVal) {
+    //         console.log(newVal,'newVal---');
+    //         this.internalValue = newVal;
+    //     },
+    // },
     watch: {
-        modelValue(newVal) {
+    value(newVal) {
       this.internalValue = newVal;
     },
+    internalValue(newVal) {
+      this.$emit('input', newVal);
+    },
   },
     methods: {
         // 处理 switch 状态变化

src/store/index.js

@@ -11,7 +11,7 @@ export default new Vuex.Store({
     menuList:[],//目录菜单
     showBreadcrumb:false,//是否展示面包屑
     pageTitle:'一般新文献',//页面标题
-    addServiceList:[]
+    addServiceList:[]//选中的服务
   },
   actions: {
     SET_HEADER({ commit }) {

src/style/theme/common.scss

@@ -10,7 +10,10 @@ body {
         padding: 0;
     }
 }
-
+.column{
+    display: flex;
+    flex-direction: column;
+}
 .mb24{
     margin-bottom: 24px;
 }

src/views/ConfigureServicePrices.vue

@@ -1,11 +1,23 @@
 <template>
+    <div class="column">
     <!-- 配置服务价格页面 -->
     <div class="config-service-price min-width">
         <div class="config-service-left">
-
+            <div class="left-menu-wrap" v-for="(item,index) in addServiceList" :key="index">
+                <div class="menu-top flex">
+                    <img class="menu-top-img" :src="addImgList[item.name]" alt="">
+                    <span>{{ item.name }}</span>
+                </div>
+                <div v-for="(item1,index1) in item.list" :key="item1.name" :class="['menu-item flex-between',(item1.name == activeService) ? 'menu-active':'']"
+                  @click="goToCurService(item1,index1)">
+                    <span>{{ item1.name }}</span>
+                    <img class="menu-item-name" v-if="item1.checkFlag" src="@/assets/changeTrue.png" alt="">
+                    <img class="menu-item-name" v-else src="@/assets/changeFlase.png" alt="">
+                </div>
+            </div>
         </div>
         <div class="config-service-right">
-            <el-form>
+            <el-form ref="ruleFormRef" :model="form">
 
                 <!-- 面包屑导航 start -->
                 <!-- 面包屑导航 end -->
@@ -31,7 +43,7 @@
                                     <div class="left-pay-item ">
                                         <div class="flex-between">
                                             <span>微信收款</span>
-                                            <GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
+                                            <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
                                                 @change="onSwitchChange">
                                             </GuipSwitch>
                                         </div>
@@ -40,7 +52,7 @@
                                     <div class="left-pay-item ">
                                         <div class="flex-between">
                                             <span>支付宝收款</span>
-                                            <GuipSwitch :modelValue="form.zhifubaoFlag" activeText="开启"
+                                            <GuipSwitch v-model="form.zhifubaoFlag" activeText="开启"
                                                 inactiveText="关闭" @change="onSwitchChange">
                                             </GuipSwitch>
                                         </div>
@@ -78,7 +90,7 @@
                                     <div class="left-pay-item ">
                                         <div class="flex-between">
                                             <span>淘宝收款</span>
-                                            <GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
+                                            <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
                                                 @change="onSwitchChange">
                                             </GuipSwitch>
                                         </div>
@@ -143,6 +155,11 @@
             <Footer></Footer>
 
         </div>
+       
+    </div>
+    <div class="pageFooter flex">
+            <GuipButton type="primary" @click="submitFun">保存</GuipButton>
+        </div>
         </div>
 </template>
 <script>
@@ -152,17 +169,18 @@ import { mapState } from 'vuex';
 import GuipFormItem from '@/components/GuipFormItem.vue';
 import GuipInput from '@/components/GuipInput.vue';
 import GuipSelect from '@/components/GuipSelect.vue';
+import GuipButton from '@/components/GuipButton.vue';
 import Footer from '@/components/Footer.vue';
 import GuipSwitch from '@/components/GuipSwitch.vue';
+import store from '../store';
 
 export default {
     // 站点设置
     name: '',
     props: [''],
     components: {
-        // GuipInput,
         PageTitle,
-        // GuipButton,
+        GuipButton,
         GuipFormItem,
         GuipInput,
         GuipSelect,
@@ -171,6 +189,12 @@ export default {
     },
     data() {
         return {
+            activeService:'一般新文献',
+            addImgList: {
+                '万方': require('@/assets/register/wanfang.png'),
+                '维普': require('@/assets/register/weipu.svg'),
+                '学术不端': require('@/assets/register/xueshubuduan.svg'),
+            },
             options_payword: [
                 {
                     label: '按篇', value: '0'
@@ -193,9 +217,26 @@ export default {
     computed: {
         ...mapState(['pageTitle', 'addServiceList']) // 从Vuex映射showSidebar状态到组件的计算属性中
     },
+    mounted(){
+        console.log(this.$route.query,'888');
+        if(Object.keys(this.$route.query).length > 0){
+            this.activeService = this.$route.query.index
+        }
+        // addServiceList 这个数据 如果可以走接口不错 放在store中，会刷新导致数据丢失；放在本地的话，似乎也可以，木有尝试过
+        console.log(this.activeService,'addServiceList-----');
+    },
     methods: {
         onSwitchChange(data) {
-            console.log(data, '---');
+            
+            console.log(data,this.form.zhifubaoFlag, '---');
+        },
+        goToCurService(data){
+            store.commit('SET_PAGETITLE', data.name);
+            this.activeService = data.name;
+            this.$refs.ruleFormRef.resetFields()
+            // 这样子会重复跳转
+            // this.$router.push('/settingServicePrice?name='+data.name)
+            // this.$router.push('/settingServicePrice?index='+index)
         },
         deleteFunc() {
 
@@ -203,23 +244,60 @@ export default {
         collectFunc() {
 
         },
+        // 保存提交
+        submitFun(){
+            console.log(this.form,'====this.form');
+            // 获取form数据
+        },
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.alias-wrap ::v-deep .el-form-item {
+    margin-bottom: 0;
+}
 .config-service-price {
     display: flex;
-
     .config-service-left {
-        width: 158px;
+        align-items: stretch;
-        height: 100%;
+        background: #fff;
-        background: #eee;
+        width: 120px;
+        transition: all .5s;
+        padding: 21px 26px 21px 12px;
+        .menu-top{
+            color: #1E2226;
+            padding: 11px 0;
+        }
+        .menu-top-img{
+            width: 18px;
+        }
+        .menu-item-name{
+            width: 20px;
+            height: 14px;
+        }
+        .menu-item{
+            letter-spacing: 0.08em;
+            color: #8A9099;
+            padding: 9px 0px;
+            span{
+                max-width: 89px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+        .menu-active{
+            color: #006AFF;
+        }
     }
 
     .config-service-right {
+        align-items: stretch;
         width: calc(100% - 158px);
     }
-
+    .content1{
+        margin: 12px 0;
+    }
     .alias-wrap {
         width: 100%;
         display: flex;
@@ -347,10 +425,17 @@ export default {
         }
     }
 }
-
+@media screen and (min-width: 1441px) {
-.alias-wrap ::v-deep .el-form-item {
+    .config-service-right{ 
-    margin-bottom: 0;
+        width: calc(100% - 218px);
+    }
+    .config-service-price .config-service-left{
+        width: 188px !important;
+        transition: all .5s;
     }
+}
+
+
 
 .info-error {
     color: #FF4D4F;
@@ -368,4 +453,13 @@ export default {
     width: 97.6%;
     margin: 0 auto;
 }
+.pageFooter{
+    justify-content: center;
+    width: 100%;
+    padding: 16px 0px;
+    opacity: 1;
+    background: #FFFFFF;
+    /* 蓝色阴影_常规 */
+    box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
+}
 </style>

src/views/Register.vue

@@ -19,14 +19,16 @@
             <span>基础信息</span>
           </div>
           <div :class="['step-line', activeStep > 1 ? 'step_active-line' : '']"></div>
-          <div :class="['step-item', activeStep == 2 ? 'checked' : activeStep > 2 ? 'success' : '']" @click="goCurActiveStep(2)">
+          <div :class="['step-item', activeStep == 2 ? 'checked' : activeStep > 2 ? 'success' : '']"
+            @click="goCurActiveStep(2)">
             <img v-if="activeStep == 1" src="@/assets/register/step2_null.svg" alt="" class="custom-icon">
             <img v-if="activeStep == 2" src="@/assets/register/step2_ing.svg" alt="" class="custom-icon">
             <img v-if="activeStep > 2" src="@/assets/register/step_success.svg" alt="" class="custom-icon">
             <span>收款方式</span>
           </div>
           <div :class="['step-line', activeStep > 2 ? 'step_active-line' : '']"></div>
-          <div :class="['step-item', activeStep == 3 ? 'checked' : activeStep > 2 ? 'success' : '']" @click="goCurActiveStep(3)">
+          <div :class="['step-item', activeStep == 3 ? 'checked' : activeStep > 2 ? 'success' : '']"
+            @click="goCurActiveStep(3)">
             <img v-if="activeStep != 3" src="@/assets/register/step3_null.svg" alt="" class="custom-icon">
             <img v-if="activeStep == 3" src="@/assets/register/step3_ing.svg" alt="" class="custom-icon">
             <!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> -->
@@ -465,7 +467,8 @@
       <DomainModal />
     </GuipDialog>
 
-    <el-dialog :visible.sync="dialogVisibleAdd" ref="addDialog" width="1011px" class="addDialog-wrap" :show-close="false" >
+    <el-dialog :visible.sync="dialogVisibleAdd" ref="addDialog" width="1011px" class="addDialog-wrap"
+      :show-close="false">
       <div class="addService_wrap">
         <div class="addServicetop">
           <div class="flex">
@@ -492,12 +495,8 @@
               <li v-for="item in category.list" :key="item.name" :class="item.checked ? 'service-active' : ''">
                 <div class="service-name-item flex-between">
                   <span>{{ item.name }}</span>
-                  <input
+                  <input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
-                    type="checkbox"
+                    @change="updateSelectedCount(item)" />
-                    :id="`item-${item.id}`"
-                    v-model="item.checked"
-                    @change="updateSelectedCount(item)"
-                  />
                 </div>
                 <p class="service-desc-item">{{ item.desc }}</p>
                 <p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
@@ -568,14 +567,16 @@ export default {
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
               word: '1000字符',
-              checked:false
+              checked: false,
+              checkFlag: true
             },
             {
               name: '本科论文',
               desc: '适用于在校大学生毕业论文。',
               price: '2.4',
               word: '1000字符',
-              checked:false
+              checked: false,
+              checkFlag: false
             },
             {
               name: '说博士论文',
@@ -609,6 +610,7 @@ export default {
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
               checked: false,
+              checkFlag: true,
               word: '1000字符'
             },
             {
@@ -759,7 +761,7 @@ export default {
       dialogVisible: false,//是否展示弹框
       showCancelButton: true, // 控制是否显示取消按钮
       showCloseButton: true, // 控制是否显示关闭按钮
-      activeStep: 2,//当前步骤条
+      activeStep: 3,//当前步骤条
       has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺
       distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商
       payment_method_list: [//收款方式
@@ -855,20 +857,30 @@ export default {
   computed: {
     // 计算选中的总数
     selectedCount() {
+      const newaddlist = JSON.parse(JSON.stringify(this.addlist))
       let list = []
-      let list1=[]
+      let listTotal = []
-      this.addlist.forEach(item=>{
+      newaddlist.forEach(item => {
-        list1=[]
+        let item2 = JSON.parse(JSON.stringify(item));
+        item2.list = [];
         item.list.forEach((item1) => {
-          if(item.checked){
+          if (item1.checked) {
-            list.push(item)
+            // list1.push(item1)
-            list1.push(item1)
+            listTotal.push(item1)
-            list.list = list1
+            if (item2.list.length == 0) {
+              item2.list = [item1]
+            } else {
+              item2.list.push(item1)
+            }
           }
         })
+        if (item2.list.length > 0) {
+          list.push(item2)
+        }
       })
+      console.log(list, 'list----', this.addlist);
       store.commit('SET_ADDSERVICELIST', list);
-      return list1.length;
+      return listTotal.length;
     },
   },
   methods: {
@@ -1090,13 +1102,12 @@ export default {
     // 处理滚动事件
     handleScroll() {
       const scrollPosition = this.$refs.content.scrollTop;
-      console.log(this.activeCategory,scrollPosition,'this.activeCategory');
+      // 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);
-        console.log('进来了',scrollPosition,elementTop,elementBottom,index,scrollPosition >= elementTop && scrollPosition < elementBottom);
         if (scrollPosition >= elementTop && scrollPosition < elementBottom) {
           this.activeCategory = index;
         }
@@ -1104,8 +1115,9 @@ export default {
     },
     updateSelectedCount(item) {
       this.serviceTotal = this.selectedCount;
-      this.$set(this.addlist,item)
+      console.log(item, 'item----');
-      // console.log('选中总数已更新：',item, this.selectedCount,this.addlist);
+      // this.$set(this.addlist,item)
+      console.log('选中总数已更新：', this.addlist);
     },
 
   },
@@ -1443,24 +1455,29 @@ export default {
     padding-left: 36px;
   }
 }
+
 ::v-deep .addDialog-wrap .el-dialog {
   background: #F6F7FA;
   height: 546px;
   border-radius: 8px;
 }
+
 ::v-deep .addDialog-wrap .el-dialog .el-dialog__body {
   padding: 0 24px 0;
 }
+
 ::v-deep .addDialog-wrap .el-dialog__header {
   background: #F6F7FA;
   border-radius: 8px;
 
 }
+
 .addDialog-wrap {
   .bottom {
     margin-top: 24px;
     justify-content: flex-end;
     align-items: center;
+
     span {
       font-size: 14px;
       font-weight: normal;
@@ -1474,9 +1491,11 @@ export default {
     }
   }
 }
+
 .addService_wrap {
   text-align: left;
   background-color: #fff;
+
   // display: ;
   .addServicetop {
     display: flex;
@@ -1486,6 +1505,7 @@ export default {
     top: 12px;
     left: 24px;
     width: 963.43px;
+
     b {
       font-size: 20px;
       font-weight: bold;
@@ -1494,9 +1514,11 @@ export default {
       font-variation-settings: "opsz" auto;
       color: #1E2226;
     }
+
     ul {
       display: flex;
       padding-left: 20px;
+
       li {
         cursor: pointer;
         list-style-type: none;
@@ -1514,6 +1536,7 @@ export default {
         letter-spacing: 0.08em;
         color: #8A9099;
         border: 1px solid transparent;
+
         img {
           width: 18px;
           height: 18px;
@@ -1528,10 +1551,12 @@ export default {
       }
     }
   }
+
   .addServicebot {
     overflow-y: auto;
     max-height: 380px;
     margin-top: 24px;
+
     ul {
       // display: flex;
       // flex-wrap: wrap;
@@ -1542,6 +1567,7 @@ export default {
       // grid-auto-rows: 50px;
       padding-left: 0;
       margin: 20px 0 0;
+
       li {
         list-style-type: none;
         width: 220px;
@@ -1555,14 +1581,17 @@ export default {
         cursor: pointer;
         transition: all .3s;
       }
+
       li:hover {
         background: #F6F7FA;
         transition: all .3s;
       }
     }
+
     .service-active {
       border: 1px solid #006AFF;
     }
+
     .service-desc {
       font-size: 14px;
       font-weight: normal;
@@ -1571,11 +1600,13 @@ export default {
       color: #8A8C99;
       margin: 6px 0 8px;
     }
+
     .service-name-item {
       font-size: 14px;
       letter-spacing: 0.08em;
       color: #1E2226;
     }
+
     .service-desc-item {
       font-size: 12px;
       font-weight: normal;
@@ -1585,23 +1616,27 @@ export default {
       color: #8A9099;
       margin: 14px 0 12px;
       display: -webkit-box;
-      -webkit-line-clamp: 2; /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
+      -webkit-line-clamp: 2;
+      /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       height: 34px;
     }
+
     .service-price-item {
       font-size: 12px;
       line-height: 16px;
       letter-spacing: 0.08em;
       font-variation-settings: "opsz" auto;
       color: #8A9099;
+
       i {
         font-style: normal;
         color: #1E2226;
 
       }
+
       span {
         color: #1E2226;
         font-size: 20px;
@@ -1609,14 +1644,17 @@ export default {
         line-height: 20px;
       }
     }
+
     .category-section {
       padding: 20px;
+
       h3 {
         margin: 0;
         font-size: 16px;
         font-weight: normal;
         letter-spacing: 0.08em;
         color: #1E2226;
+
         img {
           width: 30px;
           height: 30px;

src/views/elementGroups.vue

@@ -206,6 +206,12 @@
                     <PhoneCode slot="formDom"></PhoneCode>
                 </GuipFormItem>
             </div>
+
+            <div class="ele-item">
+            <label for="">开关L</label>
+            <GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
+            </GuipSwitch>
+        </div>
             <el-button type="primary" @click="submitForm">表单Submit</el-button>
 
         </el-form>
@@ -259,11 +265,7 @@
             active-text="按月付费" inactive-text="按年付费">
         </el-switch> -->
 
-        <div class="ele-item">
+       
-            <label for="">开关L</label>
-            <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
-            </GuipSwitch>
-        </div>
     </div>
 </template>
 
@@ -518,7 +520,8 @@ export default {
             return randomNumber
         },
         onSwitchChange(value) {
-            console.log('Switch 状态变化:', value);
+            
+            console.log('Switch 状态变化:',this.switchValue, value);
         },
         // 弹框相关方法---start
         openDialog() {