123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- <template>
- <!-- 分类 -->
- <view>
- <view class="flex" style="height: 600rpx">
- <scroll-view scroll-y="true" class="box1" style="height: 600rpx">
- <view
- class="itemClass text-overflow"
- v-for="(item, index) in provinceList"
- :key="item.id"
- :class="{ selectedProvice: provinceIndex == index }"
- :style="{ color: provinceIndex == index ? '#00D36D' : '' }"
- @click="getClassificationList2(item.id, index)"
- >
- {{ item.className }}
- </view>
- </scroll-view>
- <scroll-view scroll-y="true" class="box2" style="height: 600rpx">
- <view
- class="itemClass text-overflow"
- v-for="(item, index) in cityList"
- :key="item.id"
- :style="{ color: cityIndex == index ? '#00D36D' : '' }"
- @click="getClassificationList3(item.id, index)"
- >
- {{ item.className }}
- </view>
- </scroll-view>
- <scroll-view
- scroll-y="true"
- class="box3"
- style="height: 600rpx"
- :class="{ bl: countyList.length > 0 }"
- >
- <view
- class="itemClass text-overflow"
- v-for="(item, index) in countyList"
- :key="item.id"
- :style="{ color: countyIndex == index ? '#00D36D' : '' }"
- @click="selectCounty({ className: item.className, id: item.id }, index)"
- >
- {{ item.className }}
- </view>
- </scroll-view>
- </view>
- <view class="class-btn d-flex-center" v-if="showBottomConfim">
- <view class="d-flex-center" @click="reset">重置</view>
- <view class="d-flex-center" @click="submitForm">确定</view>
- </view>
- </view>
- </template>
- <script>
- import { getClassificationList, getClassCateSelf } from "@/api/home/index.js";
- export default {
- props: {
- showBottomConfim: {
- type: Boolean,
- default: false,
- },
- isPublish: {
- type: Boolean,
- default: false,
- },
- },
- data() {
- return {
- provinceIndex: null,
- cityIndex: 0,
- countyIndex: 0,
- provinceList: [],
- cityList: [],
- countyList: [],
- className: "分类",
- id: "",
- selectCode: [], //三级id
- };
- },
- mounted() {
- this.getClassificationList1();
- },
- methods: {
- // 获取一级分类
- getClassificationList1() {
- let param = {
- className: "",
- parentId: "",
- };
- if (this.isPublish) {
- this.api.getClassCateSelf().then((res) => {
- if (res.code == 200) {
- this.provinceList = res.data;
- }
- });
- } else {
- this.api.getClassificationList(param).then((res) => {
- if (res.code == 200) {
- this.provinceList = res.data;
- }
- });
- }
- },
- // 获取二级分类
- getClassificationList2(id, index) {
- this.provinceIndex = index;
- this.cityIndex = 0;
- this.countyIndex = 0;
- let param = {
- className: "",
- parentId: id,
- };
- this.selectCode[0] = id;
- this.api.getClassificationList(param).then((res) => {
- if (res.code == 200) {
- this.cityList = res.data;
- this.countyList = [];
- }
- });
- },
- // 获取三级分类
- getClassificationList3(id, index) {
- this.cityIndex = index;
- this.countyIndex = 0;
- let param = {
- className: "",
- parentId: id,
- };
- this.selectCode[1] = id;
- this.api.getClassificationList(param).then((res) => {
- if (res.code == 200) {
- this.countyList = res.data;
- }
- });
- },
- selectCounty(item, index) {
- this.countyIndex = index;
- this.className = item.className;
- this.id = item.id;
- this.selectCode[2] = item.id;
- this.$emit("select", {
- className: item.className,
- id: item.id,
- selectCode: this.selectCode,
- });
- },
- reset() {
- this.countyIndex = 0;
- this.$emit("search", {
- className: "分类",
- id: "",
- });
- },
- submitForm() {
- this.$emit("search", {
- className: this.className,
- id: this.id,
- });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .class-btn {
- height: 120rpx;
- background: #ffffff;
- font-size: 32rpx;
- color: white;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- & > view:nth-of-type(1) {
- width: 334rpx;
- height: 90rpx;
- background: #e6faf1;
- border-radius: 44rpx;
- border: 2rpx solid #00d36d;
- color: #00d36d;
- }
- & > view:nth-of-type(2) {
- width: 334rpx;
- height: 90rpx;
- color: #fff;
- background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
- border-radius: 44rpx;
- }
- }
- .flex {
- display: flex;
- }
- .box1 {
- width: 220rpx;
- background-color: #f5f7f7;
- }
- .box2 {
- width: 220rpx;
- }
- .bl {
- border-left: 1rpx solid #eeeeee;
- }
- .box3 {
- width: calc(100% - 440rpx);
- }
- .itemClass {
- height: 90rpx;
- line-height: 90rpx;
- padding-left: 20rpx;
- padding-right: 15rpx;
- font-size: 28rpx;
- color: #333333;
- }
- .selectedProvice {
- background-color: #ffffff;
- }
- /deep/::-webkit-scrollbar {
- display: none;
- width: 0;
- height: 0;
- }
- </style>
|