zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/1/head
zq 8 months ago
parent
36ec46514b
commit
e1eabb1a7a
9 changed files with 258 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/changeFlase.png
  2. BIN
      src/assets/changeTrue.png
  3. 18
      src/components/GuipSwitch.vue
  4. 2
      src/components/PageTitle.vue
  5. 2
      src/store/index.js
  6. 5
      src/style/theme/common.scss
  7. 128
      src/views/ConfigureServicePrices.vue
  8. 196
      src/views/Register.vue
  9. 15
      src/views/elementGroups.vue

BIN
src/assets/changeFlase.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/changeTrue.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

18
src/components/GuipSwitch.vue
View File

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

2
src/components/PageTitle.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page-title-wrap min-flex"> <div class="page-title-wrap min-flex">
<b>{{ pageTitle }}</b> <b >{{ pageTitle }}</b>
</div> </div>
</template> </template>
<script> <script>

2
src/store/index.js
View File

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

5
src/style/theme/common.scss
View File

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

128
src/views/ConfigureServicePrices.vue
View File

@ -1,11 +1,23 @@
<template> <template>
<div class="column">
<!-- 配置服务价格页面 --> <!-- 配置服务价格页面 -->
<div class="config-service-price min-width"> <div class="config-service-price min-width">
<div class="config-service-left"> <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>
<div class="config-service-right"> <div class="config-service-right">
<el-form> <el-form ref="ruleFormRef" :model="form">
<!-- 面包屑导航 start --> <!-- 面包屑导航 start -->
<!-- 面包屑导航 end --> <!-- 面包屑导航 end -->
@ -31,7 +43,7 @@
<div class="left-pay-item "> <div class="left-pay-item ">
<div class="flex-between"> <div class="flex-between">
<span>微信收款</span> <span>微信收款</span>
<GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭" <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
@change="onSwitchChange"> @change="onSwitchChange">
</GuipSwitch> </GuipSwitch>
</div> </div>
@ -40,7 +52,7 @@
<div class="left-pay-item "> <div class="left-pay-item ">
<div class="flex-between"> <div class="flex-between">
<span>支付宝收款</span> <span>支付宝收款</span>
<GuipSwitch :modelValue="form.zhifubaoFlag" activeText="开启" <GuipSwitch v-model="form.zhifubaoFlag" activeText="开启"
inactiveText="关闭" @change="onSwitchChange"> inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch> </GuipSwitch>
</div> </div>
@ -78,7 +90,7 @@
<div class="left-pay-item "> <div class="left-pay-item ">
<div class="flex-between"> <div class="flex-between">
<span>淘宝收款</span> <span>淘宝收款</span>
<GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭" <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
@change="onSwitchChange"> @change="onSwitchChange">
</GuipSwitch> </GuipSwitch>
</div> </div>
@ -143,7 +155,12 @@
<Footer></Footer> <Footer></Footer>
</div> </div>
</div> </div>
<div class="pageFooter flex">
<GuipButton type="primary" @click="submitFun">保存</GuipButton>
</div>
</div>
</template> </template>
<script> <script>
import PageTitle from '@/components/PageTitle.vue'; import PageTitle from '@/components/PageTitle.vue';
@ -152,17 +169,18 @@ import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue'; import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue'; import GuipInput from '@/components/GuipInput.vue';
import GuipSelect from '@/components/GuipSelect.vue'; import GuipSelect from '@/components/GuipSelect.vue';
import GuipButton from '@/components/GuipButton.vue';
import Footer from '@/components/Footer.vue'; import Footer from '@/components/Footer.vue';
import GuipSwitch from '@/components/GuipSwitch.vue'; import GuipSwitch from '@/components/GuipSwitch.vue';
import store from '../store';
export default { export default {
// 站点设置 // 站点设置
name: '', name: '',
props: [''], props: [''],
components: { components: {
// GuipInput,
PageTitle, PageTitle,
// GuipButton, GuipButton,
GuipFormItem, GuipFormItem,
GuipInput, GuipInput,
GuipSelect, GuipSelect,
@ -171,6 +189,12 @@ export default {
}, },
data() { data() {
return { return {
activeService:'一般新文献',
addImgList: {
'万方': require('@/assets/register/wanfang.png'),
'维普': require('@/assets/register/weipu.svg'),
'学术不端': require('@/assets/register/xueshubuduan.svg'),
},
options_payword: [ options_payword: [
{ {
label: '按篇', value: '0' label: '按篇', value: '0'
@ -193,9 +217,26 @@ export default {
computed: { computed: {
...mapState(['pageTitle', 'addServiceList']) // 从Vuex映射showSidebar状态到组件的计算属性中 ...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: { methods: {
onSwitchChange(data) { 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() { deleteFunc() {
@ -203,23 +244,60 @@ export default {
collectFunc() { collectFunc() {
}, },
// 保存提交
submitFun(){
console.log(this.form,'====this.form');
// 获取form数据
},
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.alias-wrap ::v-deep .el-form-item {
margin-bottom: 0;
}
.config-service-price { .config-service-price {
display: flex; display: flex;
.config-service-left { .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 { .config-service-right {
align-items: stretch;
width: calc(100% - 158px); width: calc(100% - 158px);
} }
.content1{
margin: 12px 0;
}
.alias-wrap { .alias-wrap {
width: 100%; width: 100%;
display: flex; display: flex;
@ -347,11 +425,18 @@ 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 { .info-error {
color: #FF4D4F; color: #FF4D4F;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@ -368,4 +453,13 @@ export default {
width: 97.6%; width: 97.6%;
margin: 0 auto; 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> </style>

196
src/views/Register.vue
View File

@ -19,14 +19,16 @@
<span>基础信息</span> <span>基础信息</span>
</div> </div>
<div :class="['step-line', activeStep > 1 ? 'step_active-line' : '']"></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 == 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/step2_ing.svg" alt="" class="custom-icon">
<img v-if="activeStep > 2" src="@/assets/register/step_success.svg" alt="" class="custom-icon"> <img v-if="activeStep > 2" src="@/assets/register/step_success.svg" alt="" class="custom-icon">
<span>收款方式</span> <span>收款方式</span>
</div> </div>
<div :class="['step-line', activeStep > 2 ? 'step_active-line' : '']"></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_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 == 3" src="@/assets/register/step3_ing.svg" alt="" class="custom-icon">
<!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> --> <!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> -->
@ -342,7 +344,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex"> <div class="flex">
<span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助' <span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
}}</span> }}</span>
<span class="">{{ scope.row.name }}</span> <span class="">{{ scope.row.name }}</span>
</div> </div>
</template> </template>
@ -465,7 +467,8 @@
<DomainModal /> <DomainModal />
</GuipDialog> </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="addService_wrap">
<div class="addServicetop"> <div class="addServicetop">
<div class="flex"> <div class="flex">
@ -489,15 +492,11 @@
<h3 class="flex"><img :src="addImgList[category.name]" alt="">{{ category.name }}</h3> <h3 class="flex"><img :src="addImgList[category.name]" alt="">{{ category.name }}</h3>
<p class="service-desc">{{ category.desc }}</p> <p class="service-desc">{{ category.desc }}</p>
<ul> <ul>
<li v-for="item in category.list" :key="item.name" :class="item.checked ? 'service-active' :''"> <li v-for="item in category.list" :key="item.name" :class="item.checked ? 'service-active' : ''">
<div class="service-name-item flex-between"> <div class="service-name-item flex-between">
<span>{{ item.name }}</span> <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> </div>
<p class="service-desc-item">{{ item.desc }}</p> <p class="service-desc-item">{{ item.desc }}</p>
<p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p> <p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
@ -553,10 +552,10 @@ export default {
data() { data() {
return { return {
btnstyleObj1: { btnstyleObj1: {
width: '137px', width: '137px',
height: '38px', height: '38px',
}, },
serviceTotal:0, serviceTotal: 0,
activeCategory: 0, activeCategory: 0,
addlist: [ addlist: [
{ {
@ -568,34 +567,36 @@ export default {
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
word: '1000字符', word: '1000字符',
checked:false checked: false,
checkFlag: true
}, },
{ {
name: '本科论文', name: '本科论文',
desc: '适用于在校大学生毕业论文。', desc: '适用于在校大学生毕业论文。',
price: '2.4', price: '2.4',
word: '1000字符', word: '1000字符',
checked:false checked: false,
checkFlag: false
}, },
{ {
name: '说博士论文', name: '说博士论文',
desc: '适用于应届高校硕博士研究生论文检测。', desc: '适用于应届高校硕博士研究生论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '高职高专', name: '高职高专',
desc: '适用于高等职业学院和高等专科学校论文检测。', desc: '适用于高等职业学院和高等专科学校论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '一般新文献1name', name: '一般新文献1name',
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
] ]
@ -608,63 +609,64 @@ export default {
name: '一般新文献222', name: '一般新文献222',
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
checked:false, checked: false,
checkFlag: true,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '本科论文222', name: '本科论文222',
desc: '适用于在校大学生毕业论文。', desc: '适用于在校大学生毕业论文。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '说博士论文222', name: '说博士论文222',
desc: '适用于应届高校硕博士研究生论文检测。', desc: '适用于应届高校硕博士研究生论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '高职高专222', name: '高职高专222',
desc: '适用于高等职业学院和高等专科学校论文检测。', desc: '适用于高等职业学院和高等专科学校论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '一般新文献2222', name: '一般新文献2222',
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '高职高专2224', name: '高职高专2224',
desc: '适用于高等职业学院和高等专科学校论文检测。', desc: '适用于高等职业学院和高等专科学校论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '一般新文献2222221', name: '一般新文献2222221',
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '高职高专22242', name: '高职高专22242',
desc: '适用于高等职业学院和高等专科学校论文检测。', desc: '适用于高等职业学院和高等专科学校论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '一般新文献22222211', name: '一般新文献22222211',
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
] ]
@ -677,35 +679,35 @@ export default {
name: '一般新文献333', name: '一般新文献333',
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '本科论文33', name: '本科论文33',
desc: '适用于在校大学生毕业论文。', desc: '适用于在校大学生毕业论文。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '说博士论文333', name: '说博士论文333',
desc: '适用于应届高校硕博士研究生论文检测。', desc: '适用于应届高校硕博士研究生论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '高职高专333', name: '高职高专333',
desc: '适用于高等职业学院和高等专科学校论文检测。', desc: '适用于高等职业学院和高等专科学校论文检测。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
{ {
name: '一般新文献3332', name: '一般新文献3332',
desc: '适用于所有未正式发表的文献类型。', desc: '适用于所有未正式发表的文献类型。',
price: '2.4', price: '2.4',
checked:false, checked: false,
word: '1000字符' word: '1000字符'
}, },
] ]
@ -759,7 +761,7 @@ export default {
dialogVisible: false,//是否展示弹框 dialogVisible: false,//是否展示弹框
showCancelButton: true, // 控制是否显示取消按钮 showCancelButton: true, // 控制是否显示取消按钮
showCloseButton: true, // 控制是否显示关闭按钮 showCloseButton: true, // 控制是否显示关闭按钮
activeStep: 2,//当前步骤条 activeStep: 3,//当前步骤条
has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺 has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺
distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商 distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商
payment_method_list: [//收款方式 payment_method_list: [//收款方式
@ -855,28 +857,38 @@ export default {
computed: { computed: {
// 计算选中的总数 // 计算选中的总数
selectedCount() { selectedCount() {
const newaddlist = JSON.parse(JSON.stringify(this.addlist))
let list = [] 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) => { 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)
}
}) })
store.commit('SET_ADDSERVICELIST', list); console.log(list, 'list----', this.addlist);
return list1.length; store.commit('SET_ADDSERVICELIST', list);
return listTotal.length;
}, },
}, },
methods: { methods: {
nextGoSettingPrice(){ nextGoSettingPrice() {
this.$router.push('/settingServicePrice') this.$router.push('/settingServicePrice')
}, },
goCurActiveStep(step){ goCurActiveStep(step) {
if(step < this.activeStep){ if (step < this.activeStep) {
this.activeStep = step this.activeStep = step
} }
}, },
@ -1090,26 +1102,26 @@ export default {
// 处理滚动事件 // 处理滚动事件
handleScroll() { handleScroll() {
const scrollPosition = this.$refs.content.scrollTop; 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) => { this.addlist.forEach((category, index) => {
const element = this.$refs[`category-${index}`][0]; const element = this.$refs[`category-${index}`][0];
const elementTop = Math.round(element.offsetTop - 70); const elementTop = Math.round(element.offsetTop - 70);
const elementBottom = elementTop + element.offsetHeight; 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) { if (scrollPosition >= elementTop && scrollPosition < elementBottom) {
this.activeCategory = index; this.activeCategory = index;
} }
}); });
}, },
updateSelectedCount(item) { updateSelectedCount(item) {
this.serviceTotal = this.selectedCount; 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);
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -1443,25 +1455,30 @@ export default {
padding-left: 36px; padding-left: 36px;
} }
} }
::v-deep .addDialog-wrap .el-dialog { ::v-deep .addDialog-wrap .el-dialog {
background: #F6F7FA; background: #F6F7FA;
height: 546px; height: 546px;
border-radius: 8px; border-radius: 8px;
} }
::v-deep .addDialog-wrap .el-dialog .el-dialog__body { ::v-deep .addDialog-wrap .el-dialog .el-dialog__body {
padding: 0 24px 0; padding: 0 24px 0;
} }
::v-deep .addDialog-wrap .el-dialog__header { ::v-deep .addDialog-wrap .el-dialog__header {
background: #F6F7FA; background: #F6F7FA;
border-radius: 8px; border-radius: 8px;
} }
.addDialog-wrap{
.bottom{ .addDialog-wrap {
.bottom {
margin-top: 24px; margin-top: 24px;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
span{
span {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
@ -1474,9 +1491,11 @@ export default {
} }
} }
} }
.addService_wrap { .addService_wrap {
text-align: left; text-align: left;
background-color: #fff; background-color: #fff;
// display: ; // display: ;
.addServicetop { .addServicetop {
display: flex; display: flex;
@ -1486,7 +1505,8 @@ export default {
top: 12px; top: 12px;
left: 24px; left: 24px;
width: 963.43px; width: 963.43px;
b{
b {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 26px; line-height: 26px;
@ -1494,9 +1514,11 @@ export default {
font-variation-settings: "opsz" auto; font-variation-settings: "opsz" auto;
color: #1E2226; color: #1E2226;
} }
ul { ul {
display: flex; display: flex;
padding-left: 20px; padding-left: 20px;
li { li {
cursor: pointer; cursor: pointer;
list-style-type: none; list-style-type: none;
@ -1514,7 +1536,8 @@ export default {
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #8A9099; color: #8A9099;
border: 1px solid transparent; border: 1px solid transparent;
img{
img {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 4px; margin-right: 4px;
@ -1528,21 +1551,24 @@ export default {
} }
} }
} }
.addServicebot{
.addServicebot {
overflow-y: auto; overflow-y: auto;
max-height: 380px; max-height: 380px;
margin-top: 24px; margin-top: 24px;
ul{
ul {
// display: flex; // display: flex;
// flex-wrap: wrap; // flex-wrap: wrap;
// justify-content: space-between; // justify-content: space-between;
display: grid; display: grid;
grid-gap:14px; grid-gap: 14px;
grid-template-columns: repeat(auto-fit, 220px); grid-template-columns: repeat(auto-fit, 220px);
// grid-auto-rows: 50px; // grid-auto-rows: 50px;
padding-left: 0; padding-left: 0;
margin: 20px 0 0 ; margin: 20px 0 0;
li{
li {
list-style-type: none; list-style-type: none;
width: 220px; width: 220px;
height: 126px; height: 126px;
@ -1555,15 +1581,18 @@ export default {
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all .3s;
} }
li:hover{
li:hover {
background: #F6F7FA; background: #F6F7FA;
transition: all .3s; transition: all .3s;
} }
} }
.service-active{
.service-active {
border: 1px solid #006AFF; border: 1px solid #006AFF;
} }
.service-desc{
.service-desc {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@ -1571,12 +1600,14 @@ export default {
color: #8A8C99; color: #8A8C99;
margin: 6px 0 8px; margin: 6px 0 8px;
} }
.service-name-item{
.service-name-item {
font-size: 14px; font-size: 14px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #1E2226; color: #1E2226;
} }
.service-desc-item{
.service-desc-item {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
line-height: 17px; line-height: 17px;
@ -1585,46 +1616,53 @@ export default {
color: #8A9099; color: #8A9099;
margin: 14px 0 12px; margin: 14px 0 12px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */ -webkit-line-clamp: 2;
/* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 34px; height: 34px;
} }
.service-price-item{
.service-price-item {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
font-variation-settings: "opsz" auto; font-variation-settings: "opsz" auto;
color: #8A9099; color: #8A9099;
i{
i {
font-style: normal; font-style: normal;
color: #1E2226; color: #1E2226;
} }
span{
span {
color: #1E2226; color: #1E2226;
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
} }
} }
.category-section{
.category-section {
padding: 20px; padding: 20px;
h3{
h3 {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #1E2226; color: #1E2226;
img{
img {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-right: 8px; margin-right: 8px;
} }
} }
} }
} }
} }
</style> </style>

15
src/views/elementGroups.vue
View File

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

Write Preview
Loading…
Cancel
Save