123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- <template>
- <view class="">
- <view class="flex">
- <scroll-view scroll-y="true" class="box1" :style="{ height: scrollHeight + 'rpx' }">
- <view
- class="itemClass text-overflow"
- v-for="(item, index) in provinceList"
- :key="item.cityId"
- :class="{ selectedProvice: provinceIndex == index }"
- :style="{ color: provinceIndex == index ? selectedColor : '' }"
- @click="getClassificationList2(item.cityId, index)"
- >
- {{ item.name }}
- </view>
- </scroll-view>
- <scroll-view scroll-y="true" class="box2" :style="{ height: scrollHeight + 'rpx' }">
- <view
- class="itemClass text-overflow"
- v-for="(item, index) in cityList"
- :key="item.cityId"
- :style="{ color: cityIndex == index ? selectedColor : '' }"
- @click="getClassificationList3(item.cityId, index)"
- >
- {{ item.name }}
- </view>
- </scroll-view>
- <scroll-view
- scroll-y="true"
- class="box3"
- v-if="selectType == 'country' && !multiple"
- :style="{ height: scrollHeight + 'rpx' }"
- :class="{ bl: countyList.length > 0 }"
- >
- <view
- class="itemClass text-overflow"
- v-for="(item, index) in countyList"
- :key="item.cityId"
- :style="{ color: countyIndex == index ? selectedColor : '' }"
- @click="selectCounty({ name: item.name, cityId: item.cityId }, index)"
- >
- {{ item.name }}
- </view>
- </scroll-view>
- <scroll-view
- scroll-y="true"
- class="box3"
- v-else
- :style="{ height: scrollHeight + 'rpx' }"
- :class="{ bl: countyList.length > 0 }"
- >
- <!-- <view
- class="itemClass text-overflow"
- v-for="(item, index) in countyList"
- :key="item.cityId"
- :style="{ color: countyIndex == index ? selectedColor : '' }"
- @click="selectCounty({ name: item.name, cityId: item.cityId }, index)"
- >
- {{ item.name }}
- </view> -->
- <u-checkbox-group
- v-model="selectValue"
- iconPlacement="right"
- placement="column"
- @change="checkboxChange"
- >
- <view class="check-box-item" v-for="(item, index) in countyList" :key="index">
- <u-checkbox
- activeColor="#00d36d"
- labelSize="28rpx"
- labelColor="#333333"
- shape="circle"
- :label="item.name"
- :name="item.cityId"
- ></u-checkbox>
- </view>
- </u-checkbox-group>
- </scroll-view>
- </view>
- <view class="pop-bottom" v-if="multiple">
- <!-- <u-button shape="circle" text="取消" :customStyle="{ width: '300rpx' }"></u-button> -->
- <u-button
- color="linear-gradient( 275deg, #01CF6C 0%, #07E278 100%);"
- shape="circle"
- text="确定"
- @click="submit"
- ></u-button>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: "gjs-selectCity",
- props: {
- selectType: {
- type: String,
- default: "country", //province选择省份city选择城市country选择区县
- validator: function (value) {
- // 这个数组包含所有允许的值
- const validValues = ["province", "city", "country"];
- // 如果value存在于validValues数组中,则返回true
- return validValues.indexOf(value) !== -1;
- },
- },
- scrollHeight: {
- type: Number,
- default: 572,
- },
- selectedColor: {
- type: String,
- default: "#00D36D",
- },
- multiple: {
- type: Boolean,
- default: false,
- },
- },
- data() {
- return {
- provinceIndex: null,
- cityIndex: 0,
- countyIndex: 0,
- provinceList: [],
- cityList: [],
- countyList: [],
- selectCode: [],
- provenceName: "",
- cityName: "",
- // 新增多选
- selectValue: [],
- };
- },
- mounted() {
- this.getClassificationList1();
- },
- methods: {
- // 获取一级
- getClassificationList1() {
- let param = {
- levelType: "",
- parentCityId: "",
- };
- this.api.getCity(param).then((res) => {
- if (res.code == 200) {
- this.provinceList = res.data;
- }
- });
- },
- // 获取二级
- getClassificationList2(id, index) {
- this.provinceIndex = index;
- this.cityIndex = 0;
- this.countyIndex = 0;
- // 选择省份后 清除区信息
- this.countyList = [];
- let param = {
- levelType: 2,
- parentCityId: id,
- };
- this.selectCode[0] = id;
- this.provenceName = this.provinceList[index].name;
- if (this.selectType == "province") {
- this.$emit("select", {
- name: this.provinceList[index].name,
- cityId: id,
- });
- return;
- }
- this.api.getCity(param).then((res) => {
- if (res.code == 200) {
- this.cityList = res.data;
- }
- });
- },
- // 获取三级
- getClassificationList3(id, index) {
- // 选择城市 情况 多选
- this.selectValue = [];
- this.cityIndex = index;
- this.countyIndex = 0;
- let param = {
- levelType: 3,
- parentCityId: id,
- };
- this.selectCode[1] = id;
- this.cityName = this.cityList[index].name;
- if (this.selectType == "city") {
- this.$emit("select", {
- name: this.cityList[index].name,
- cityId: id,
- selectCode: this.selectCode,
- wholeName: this.provenceName + this.cityName,
- });
- return;
- }
- this.api.getCity(param).then((res) => {
- if (res.code == 200) {
- this.countyList = res.data;
- }
- });
- },
- selectCounty(item, index) {
- this.countyIndex = index;
- this.$emit("select", {
- name: item.name,
- cityId: item.cityId,
- });
- },
- // 新增多选提交按钮
- submit() {
- // console.log(this.selectValue);
- let _arr = this.findObjectsByIds(this.countyList, this.selectValue);
- this.$emit("select", _arr);
- // console.log(_arr)
- },
- // 多选事件
- checkboxChange(e) {
- // console.log(e)
- },
- // 筛选事件
- findObjectsByIds(objArray, numArray) {
- return numArray
- .map((id) => {
- const obj = objArray.filter((item) => item.cityId === id);
- return obj.length > 0 ? obj[0] : null;
- })
- .filter((item) => item !== null);
- },
- },
- };
- </script>
- <style>
- .flex {
- display: flex;
- }
- .box1 {
- /* width: 220rpx; */
- display: flex;
- flex: 1;
- background-color: #f5f7f7;
- }
- .box2 {
- display: flex;
- flex: 1;
- /* width: 220rpx; */
- }
- .bl {
- /* border-left: 1rpx solid #eeeeee; */
- }
- .box3 {
- display: flex;
- flex: 1;
- /* width: calc(100% - 440rpx); */
- }
- .itemClass {
- height: 90rpx;
- line-height: 90rpx;
- padding-left: 20rpx;
- padding-right: 15rpx;
- font-size: 28rpx;
- color: #333333;
- }
- .text-overflow {
- display: -webkit-box; /* 使用-webkit-box布局模型 */
- -webkit-box-orient: vertical; /* 指定盒子内容的排列方向为垂直 */
- -webkit-line-clamp: 1; /* 控制显示的行数,这里设置为1 */
- overflow: hidden; /* 当内容超出容器时隐藏多余的内容 */
- text-overflow: ellipsis; /* 使用省略号显示多余的文本内容 */
- }
- .selectedProvice {
- background-color: #ffffff;
- }
- /deep/::-webkit-scrollbar {
- display: none;
- width: 0;
- height: 0;
- }
- .pop-bottom {
- margin: 24rpx;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- }
- .check-box-item {
- box-sizing: border-box;
- /* padding: 10rpx 15rpx; */
- height: 90rpx;
- line-height: 90rpx;
- padding-left: 20rpx;
- padding-right: 36rpx;
- /* display: flex;
- flex-direction:row;
- align-items: center;
- justify-content: space-between; */
- }
- </style>
|