|
@@ -0,0 +1,374 @@
|
|
|
+<template>
|
|
|
+ <u-popup v-model="show" mode="bottom" :mask-close-able="false" border-radius="14" safe-area-inset-bottom
|
|
|
+ :duration="100">
|
|
|
+ <view class="content-wrapper">
|
|
|
+ <!-- 头部 -->
|
|
|
+ <u-sticky>
|
|
|
+ <view class="sticky">
|
|
|
+ <view class="sticky-title xl normal bold">请设置企业产业分类</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-sticky>
|
|
|
+
|
|
|
+ <!-- 内容 -->
|
|
|
+ <view class="cate-two flex col-top">
|
|
|
+
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <view class="aside bg-white">
|
|
|
+ <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
|
|
|
+ <block v-for="(item, index) in cateList" :key="index">
|
|
|
+ <view class="first-cate"></view>
|
|
|
+ <view :class="'one-item xs ' + (index == selectIndex ? 'active' : 'muted')"
|
|
|
+ @click="changeActive(index)">
|
|
|
+ <view v-if="index == selectIndex" class="active-line bg-primary "></view>
|
|
|
+ <text class="name xs flex-1">{{ item.title }}</text>
|
|
|
+ <u-icon :name="(index == selectIndex ? 'arrow-right' : 'arrow-right')"
|
|
|
+ size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <!-- 二级分类 -->
|
|
|
+ <!-- <view class="muted xs" v-for="(twoItem, twoIndex) in cateTwoList" :key="twoIndex"
|
|
|
+ v-if="index == selectIndex">
|
|
|
+ <view :class="'one-item xs ' + (twoIndex == selectTowIndex ? 'active' : '')"
|
|
|
+ @click.stop="changeTwoActive(twoIndex)">
|
|
|
+ <text class="name xs flex-1">{{ twoItem.title }}</text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <view class="main">
|
|
|
+ <view class="main-wrap">
|
|
|
+ <view class="cate-two">
|
|
|
+ <view class="two-item bg-white m-b-20">
|
|
|
+ <view class="three-list flex flex-wrap" style="padding: 20rpx;">
|
|
|
+ <view class="text-center w-full p-6" v-for="(sitem, sindex) in cateTwoList"
|
|
|
+ :key="sindex" @tap="changeThreeActive(sitem)">
|
|
|
+ <view class="three-item flex row-between"
|
|
|
+ :class="{ 'three-active': cateThreeId == sitem.id }">
|
|
|
+ <view></view>
|
|
|
+ <view class="flex-1 xs">{{ sitem.title }}</view>
|
|
|
+ <view>
|
|
|
+ <u-icon name="checkmark" size="28" color="#F37171"
|
|
|
+ v-if="cateThreeId == sitem.id"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <view class="confrim-btn">
|
|
|
+ <u-button @click="show = false;">确定</u-button>
|
|
|
+ </view> -->
|
|
|
+ <u-top-tips ref="uTips"></u-top-tips>
|
|
|
+ <view class="footer">
|
|
|
+ <button class="white btn lg" @click="handleConsult">确定</button>
|
|
|
+ <u-alert-tips class="m-t-30" type="error" title="产业分类一经确认,不可更改,并且只展示企业所属分类的图谱信息,请仔细确认" :description="description"></u-alert-tips>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getCategoryTree,
|
|
|
+ setChain,
|
|
|
+ } from '@/api/app';
|
|
|
+ export default {
|
|
|
+ name: "chain",
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: Boolean
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keyword: '',
|
|
|
+ hideRight: true,
|
|
|
+ menuCurrentIndex: 0,
|
|
|
+ topicData: [],
|
|
|
+
|
|
|
+ cateList: [],
|
|
|
+ selectIndex: 0, //一级分类索引
|
|
|
+ selectTowIndex: 0, //二级分类索引
|
|
|
+ selectThreeIndex: null, //二级分类索引
|
|
|
+ cateTwoList: [], //二级分类列表
|
|
|
+ cateThreeList: [], //三级分类列表
|
|
|
+ cateThreeId: 0,
|
|
|
+ chain: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getListFun()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 弹窗Popup显示状态
|
|
|
+ show: {
|
|
|
+ get: function() {
|
|
|
+ return this.value
|
|
|
+ },
|
|
|
+ set: function(value) {
|
|
|
+ this.$emit('input', value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取
|
|
|
+ async getListFun() {
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ data
|
|
|
+ } = await getCategoryTree({})
|
|
|
+ if (code == 1) {
|
|
|
+ this.cateList = data
|
|
|
+ this.cateTwoList = data[this.selectIndex].children
|
|
|
+ this.cateThreeSet()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeActive(index) {
|
|
|
+ this.selectIndex = index
|
|
|
+ this.selectTowIndex = 0 //二级分类索引重置0
|
|
|
+ this.cateTwoList = this.cateList[this.selectIndex].children
|
|
|
+ this.cateThreeSet()
|
|
|
+ },
|
|
|
+ changeTwoActive(index) {
|
|
|
+ this.selectTowIndex = index
|
|
|
+ this.cateThreeSet()
|
|
|
+ },
|
|
|
+ changeThreeActive(item) {
|
|
|
+ this.cateThreeId = item.id
|
|
|
+ this.chain = item;
|
|
|
+ },
|
|
|
+ handleConsult() {
|
|
|
+ if (this.cateThreeId == 0) {
|
|
|
+ // this.$toast({
|
|
|
+ // title: '请选择产业分类',
|
|
|
+ // type: 'error',
|
|
|
+ // })
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: '请选择产业分类',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ setChain({chain: this.cateThreeId}).then(res => {
|
|
|
+ this.$emit('change', this.chain)
|
|
|
+ this.$emit('input', false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cateThreeSet() {
|
|
|
+ let children = this.cateTwoList[this.selectTowIndex].children
|
|
|
+ this.cateThreeList = children.filter((item, index) => item.type == 1)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .bb {
|
|
|
+ border-bottom: 1px solid $-color-body;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-wrapper {
|
|
|
+ height: 900rpx;
|
|
|
+
|
|
|
+ .sticky {
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sticky-title {
|
|
|
+ padding: 24rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ height: 712rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ // 左侧菜单
|
|
|
+ .left-menu {
|
|
|
+ width: 250rpx;
|
|
|
+
|
|
|
+ .submenu {
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 菜单选中
|
|
|
+ .active {
|
|
|
+ font-weight: 500;
|
|
|
+ color: $-color-primary;
|
|
|
+ position: relative;
|
|
|
+ background-color: rgba($-color-primary, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .active::before {
|
|
|
+ content: '';
|
|
|
+ width: 6rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 10rpx;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ background-color: $-color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右侧内容
|
|
|
+ .right-content {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .tags-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ image::after {
|
|
|
+ content: '';
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 50rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 120rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 50%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.1) url('/bundle_b/static/icon_tags.png') no-repeat center center;
|
|
|
+ background-size: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cate-two {
|
|
|
+ .aside {
|
|
|
+ width: 250rpx;
|
|
|
+ flex: none;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .first-cate {
|
|
|
+ margin: 0 20rpx 0rpx 40rpx;
|
|
|
+ border-top: $-solid-border;
|
|
|
+ }
|
|
|
+
|
|
|
+ .first-cate:first-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one-item {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ padding: 26rpx 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $-color-primary;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active-line {
|
|
|
+ position: absolute;
|
|
|
+ width: 6rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ left: 4rpx;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ height: 100%;
|
|
|
+ flex: 1;
|
|
|
+ width: 500rpx;
|
|
|
+ padding-left: 16rpx;
|
|
|
+
|
|
|
+ /deep/ .u-tabs {
|
|
|
+ border-radius: 0 0 12rpx 12rpx;
|
|
|
+ box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.03)
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-wrap {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .two-item {
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 90rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #BBBBBB;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .three-list {
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 0 10rpx;
|
|
|
+
|
|
|
+ .three-item {
|
|
|
+ background: #F7F8FA;
|
|
|
+ padding: 16rpx 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .three-item.three-active {
|
|
|
+ border: 2rpx solid #F37171;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F37171;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods .item {
|
|
|
+ border-radius: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ left: 0%;
|
|
|
+ bottom: 50rpx;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ height: 84rpx;
|
|
|
+ line-height: 84rpx;
|
|
|
+ background-color: $-color-primary;
|
|
|
+ box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
|
|
|
+ border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|