You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
12 KiB
375 lines
12 KiB
2 weeks ago
|
<template>
|
||
|
|
<div class="">
|
||
|
|
<div class="addService_wrap">
|
||
|
|
<div class="addServicetop">
|
||
|
|
<h3>添加查重服务</h3>
|
||
|
|
<!-- 分类导航 -->
|
||
|
|
<el-scrollbar>
|
||
|
|
<ul>
|
||
|
|
<li v-for="(item, index) in menuList" :key="item.name" @click="scrollToCategory(index)"
|
||
|
|
:class="['normal_service', activeCategory == index ? 'active_service' : '']">
|
||
|
|
<span class="flex">
|
||
|
|
<img :src="require('@/assets/serviceIcon/ver_'+item.type+'.svg')" alt="">
|
||
|
|
{{ item.name }}
|
||
|
|
</span>
|
||
|
|
<img class="activeImg" src="@/assets/serviceIcon/activeImg_choose.svg" alt="">
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
<!-- 内容 -->
|
||
|
|
<div class="addServicebot" ref="content">
|
||
|
|
<ul :key="datenow">
|
||
|
|
<li v-for="item in addlist" :key="item.name"
|
||
|
|
:class="item.checked ? 'service-active' : ''">
|
||
|
|
<div class="service-name-item flex-between">
|
||
|
|
<span>{{ item.name }}</span>
|
||
|
|
<input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
|
||
|
|
@change="updateSelectedCount" />
|
||
|
|
</div>
|
||
|
|
<p class="service-desc-item">看见啊还是看见阿水</p>
|
||
|
|
<p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom flex">
|
||
|
|
<GuipButton type="system" size="page" @click="cancel">取消</GuipButton>
|
||
|
|
<GuipButton type="primary" size="page" @click="nextGoSettingPrice">确定，去设置售价</GuipButton>
|
||
|
|
<p>已选<b>{{ serviceTotal }}</b>项服务</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import store from '@/store';
|
||
|
|
import GuipButton from '@/components/GuipButton.vue';
|
||
|
|
export default {
|
||
|
|
name: 'siteServiceAdd',
|
||
|
|
props: [''],
|
||
|
|
components: {
|
||
|
|
GuipButton,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
datenow:Date.now(),
|
||
|
|
serviceTotal:0,
|
||
|
|
activeCategory:0,
|
||
|
|
uid: 0,
|
||
|
|
type: 0,
|
||
|
|
prodid: 0,
|
||
|
|
menuList:[],
|
||
|
|
addlist:[],
|
||
|
|
serviceAddUrl: '/agent/siteServiceAdd',
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
if (!this.$route.query.uid && !this.$route.query.prodid) {
|
||
|
|
this.$message.error('非法请求');
|
||
|
|
this.$router.push('/agent/siteAdd')
|
||
|
|
}
|
||
|
|
this.uid = this.$route.query.uid
|
||
|
|
this.prodid = this.$route.query.prodid
|
||
|
|
// this.loadPddSDK()
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
store.commit('SET_PAGETITLE', '站点信息');
|
||
|
|
this.getAddServiceList();
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 计算选中的总数
|
||
|
|
selectedCount() {
|
||
|
|
const newaddlist = JSON.parse(JSON.stringify(this.addlist))
|
||
|
|
let list = []
|
||
|
|
newaddlist.forEach(item => {
|
||
|
|
if (item.checked) {
|
||
|
|
list.push(item)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log(list, 'list----', this.addlist);
|
||
|
|
// store.commit('SET_ADDSERVICELIST', list);
|
||
|
|
return list.length;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
cancel(){
|
||
|
|
this.$router.go(-1)
|
||
|
|
},
|
||
|
|
updateSelectedCount() {
|
||
|
|
this.serviceTotal = this.addlist.filter(item => item.checked).length;
|
||
|
|
this.$set(this.menuList[this.activeCategory],'list',this.addlist)
|
||
|
|
this.datenow = Date.now()
|
||
|
|
},
|
||
|
|
nextGoSettingPrice() {
|
||
|
|
const result = {};
|
||
|
|
Object.entries(this.menuList).forEach(([key, category]) => {
|
||
|
|
// 筛选出选中的子项
|
||
|
|
const selectedList = category.list.filter(item => item.checked);
|
||
|
|
// 只有当分类被选中或有选中的子项时才添加到结果中
|
||
|
|
if (category.checked || selectedList.length > 0) {
|
||
|
|
result[key] = {
|
||
|
|
...category,
|
||
|
|
list: selectedList
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// console.log(this.menuList,result,'result===筛选出来的数据');
|
||
|
|
store.commit('SET_SECOND_MENU', result);
|
||
|
|
localStorage.setItem('selectedServices',JSON.stringify(result))
|
||
|
|
this.$router.push(this.serviceAddUrl + '?uid=' + this.uid + '&prodid=' + this.prodid)
|
||
|
|
},
|
||
|
|
getAddServiceList() {
|
||
|
|
const that = this
|
||
|
|
that.$http('POST', '/agentnew/ajax_get_service_add_list', {
|
||
|
|
uid: that.uid,
|
||
|
|
prodid: that.prodid,
|
||
|
|
}).then(response => {
|
||
|
|
that.$nextTick(() => {
|
||
|
|
that.menuList = response.data
|
||
|
|
that.activeCategory = Object.keys(response.data)[0];
|
||
|
|
// store.commit('SET_SECOND_MENU', response.data);
|
||
|
|
that.setMenuList()
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
setMenuList(type, status) {
|
||
|
|
this.addNum = 0
|
||
|
|
Object.values(this.menuList).forEach((item) => {
|
||
|
|
let ver_select = false
|
||
|
|
item.list.forEach((item1) => {
|
||
|
|
item1.checked = false
|
||
|
|
if (item1.type === type) {
|
||
|
|
item1.is_select = status
|
||
|
|
}
|
||
|
|
if (item1.is_select === true) {
|
||
|
|
ver_select = true
|
||
|
|
this.addNum++
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
if (ver_select) item.is_select = true
|
||
|
|
})
|
||
|
|
this.serviceTotal = 0;
|
||
|
|
this.scrollToCategory(this.activeCategory)
|
||
|
|
},
|
||
|
|
scrollToCategory(index) {
|
||
|
|
this.activeCategory = index;
|
||
|
|
this.addlist = this.menuList[index]['list']
|
||
|
|
this.serviceTotal = this.addlist.filter(item => item.checked).length;
|
||
|
|
console.log(this.addlist,'addlist===');
|
||
|
|
// const element = this.$refs[`category-${index}`][0];
|
||
|
|
// element.scrollIntoView({ behavior: 'smooth' });
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.addService_wrap {
|
||
|
|
text-align: left;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 36px;
|
||
|
|
margin: 12px;
|
||
|
|
|
||
|
|
.addServicetop {
|
||
|
|
// display: flex;
|
||
|
|
// justify-content: space-between;
|
||
|
|
// align-items: center;
|
||
|
|
// position: absolute;
|
||
|
|
// top: 12px;
|
||
|
|
// left: 24px;
|
||
|
|
// width: 963.43px;
|
||
|
|
|
||
|
|
b {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: 26px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
font-variation-settings: "opsz" auto;
|
||
|
|
color: #1E2226;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
display: flex;
|
||
|
|
padding-left: 0px;
|
||
|
|
gap: 8px;
|
||
|
|
|
||
|
|
li {
|
||
|
|
cursor: pointer;
|
||
|
|
list-style-type: none;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
white-space: nowrap;
|
||
|
|
min-width: 181.71px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.normal_service {
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #23242B;
|
||
|
|
border-radius: 6px;
|
||
|
|
background: #F2F7FF;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 14px 10px;
|
||
|
|
img {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
.activeImg{
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.active_service {
|
||
|
|
transition: all .3s;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: bold;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: linear-gradient(285deg, #006AFF 4%, #4D97FF 92%);
|
||
|
|
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
|
||
|
|
.activeImg{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.addServicebot {
|
||
|
|
overflow-y: auto;
|
||
|
|
max-height: 380px;
|
||
|
|
margin-top: 24px;
|
||
|
|
|
||
|
|
ul {
|
||
|
|
display: grid;
|
||
|
|
grid-gap: 14px;
|
||
|
|
grid-template-columns: repeat(auto-fit, 260px);
|
||
|
|
padding-left: 0;
|
||
|
|
margin: 20px 0 0;
|
||
|
|
|
||
|
|
li {
|
||
|
|
list-style-type: none;
|
||
|
|
width: 260px;
|
||
|
|
height: 126px;
|
||
|
|
border-radius: 4px;
|
||
|
|
opacity: 1;
|
||
|
|
padding: 14px 10px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid #DFE2E6;
|
||
|
|
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;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
font-variation-settings: "opsz" auto;
|
||
|
|
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;
|
||
|
|
line-height: 17px;
|
||
|
|
letter-spacing: 0.03em;
|
||
|
|
font-variation-settings: "opsz" auto;
|
||
|
|
color: #8A9099;
|
||
|
|
margin: 14px 0 12px;
|
||
|
|
display: -webkit-box;
|
||
|
|
-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;
|
||
|
|
font-weight: normal;
|
||
|
|
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;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
padding: 16px 44px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
p {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: normal;
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
font-variation-settings: "opsz" auto;
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|