123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403 |
- <template>
- <view class="wrapper1" v-show="isShowMask1">
- <transition name="content">
- <view class="content_view" v-show="isShow">
- <view class="title_view">
- <view class="back_view">
- <image :src="imgUrl+'to_right.png'" mode="" v-if="isBack" @click="backToAdd"></image>
- <image src="" mode="" v-else></image>
- </view>
- <view class="title">请选择所在地区</view>
- <view class="close_view" @click="hidden">
- <icon class="close_icon" :type="'clear'" size="20" color='#DCDCDC'/>
- </view>
- </view>
- <view class="select_top">
- <view class="select_top_item" ref="select_top_item" v-for="(item,index) in dataList" :key="index" @click="select_top_item_click(index)">
- <text class="address_value">{{item.name}}</text>
- </view>
-
- </view>
- <swiper class="swiper" :current="currentIndex" @change="swiperChange">
- <swiper-item v-for="(swiper_item,swiper_index) in dataList" :key="swiper_index">
- <view class="swiper-item">
- <scroll-view class="scroll-view-item" scroll-y="true">
- <view class="address_item flex_row_between_center" v-for="(item,index) in cityAreaArray[swiper_index]" :key="index" @click="address_item_click(swiper_index,index,item)" :style="{background:selectIndexArr[swiper_index] === index?bgGrey:bgWhite}">
- {{item.regionName}}
- <image v-if="selectIndexArr[swiper_index] === index" class="address_item_icon" :src="imgUrl+'yixuan-selectAddress/gou.png'"
- mode=""></image>
- </view>
- </scroll-view>
- </view>
- </swiper-item>
- </swiper>
- </view>
- </transition>
- <view class="mask" @click="hidden" v-show="isShowMask" @touchmove.stop.prevent="moveHandle"></view>
- </view>
- </template>
-
- <script>
- // import areaData from '../../static/area.json'
- export default {
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- isShow: false,
- isShowMask: false,
- isShowMask1: false,
- dataList: [{
- code: '',
- name: '请选择'
- }],
- currentIndex: 0,
- cityData: {},
- cityAreaArray: [],
- selectIndexArr: [],
- indicatorStyleLeft: 16,
- sel_area_tip: {
- code: '',
- name: '请选择'
- },
- bgGrey: '#F8F8F8',
- bgWhite: '#fff',
- areaData:[]
- };
- },
- props: {
- sel_data: {
- type: Array,
- value: []
- },
- isBack:{
- type:Boolean,
- default:true
- }
- },
- methods: {
- show() {
- this.getAddressList()
- this.isShow = true
- this.isShowMask1 = true
- this.isShowMask = true
- },
- showNoMask(){
- this.getAddressList()
- this.isShowMask1 = true
- this.isShow = true
- },
- getAddressList(){
- let param = {};
- param.url = 'v3/system/front/region/list';
- param.data = {};
- param.method = 'GET';
- this.$request(param).then(res => {
- if(res.state == 200){
- this.areaData=res.data
- this.cityData = this.areaData
- this.cityAreaArray.push(this.areaData)
- }else{
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- hidden() {
- this.isShow = false
- setTimeout(() => {
- this.isShowMask = false
- this.isShowMask1 = false
- }, 100);
- },
- select_top_item_click(index) {
- this.currentIndex = index
- this.$nextTick(() => {
- this.changeIndicator(index)
- })
- },
- swiperChange(event) {
- let index = event.detail.current
- this.currentIndex = index
- this.changeIndicator(index)
- },
- changeIndicator(index) {
- let indicatorWidth = 30
- const query = uni.createSelectorQuery().in(this);
- let arr = query.selectAll('.select_top_item .address_value')
- arr.fields({
- size: true,
- scrollOffset: false
- }, data => {
- let itemWidth = data[index]["width"] > 80 ? 70 : data[index]["width"]
- let itemCenterX = 10 + index * 80 + itemWidth / 2
- let left = itemCenterX - indicatorWidth / 2
- this.indicatorStyleLeft = left
- }).exec();
- },
- address_item_click(swiper_index, index, item) {
- this.selectIndexArr.splice(swiper_index, 5, index)
- //判断当前是否为最下一级
- if (swiper_index === 0) { //第一级
- let currentObj = this.cityData[index]
- let city = currentObj.regionName
- this.dataList.splice(swiper_index, 0, {
- code: currentObj.regionCode,
- name: currentObj.regionName
- });
- this.dataList.splice(swiper_index+1);
- this.dataList.splice(swiper_index+1, 0, {
- code: '',
- name: '请选择'
- })
- this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["children"])
- setTimeout(() => {
- this.currentIndex = 1
- this.changeIndicator(1)
- }, 50);
- } else {
- let currentAreaArray = this.cityAreaArray[swiper_index]
- let currentObj = currentAreaArray[index]
- let area = currentObj["children"]
- if (area.length!= 0) {
- let city = currentObj.regionName
- this.dataList.splice(swiper_index, 0, {
- code: currentObj.regionCode,
- name: currentObj.regionName
- })
- this.dataList.splice(swiper_index+1);
- this.dataList.splice(swiper_index+1, 0, {
- code: '',
- name: '请选择'
- })
- this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["children"])
- setTimeout(() => {
- this.currentIndex = swiper_index + 1
- this.changeIndicator(swiper_index + 1)
- }, 50);
- } else { //是最下一级
- let city = currentObj.regionName
- this.dataList.splice(swiper_index, 0, {
- code: currentObj.regionCode,
- name: currentObj.regionName
- })
- //删除最后一个
- this.dataList.splice(swiper_index + 1)
- //选择成功返回数据
- this.$emit("selectAddress", this.dataList)
- this.$nextTick(() => {
- this.changeIndicator(swiper_index)
- })
- setTimeout(() => {
- this.isShow = false
- }, 100);
- setTimeout(() => {
- this.isShowMask = false
- this.isShowMask1 = false
- }, 500);
- }
- }
- },
- moveHandle(){
-
- },
- backToAdd(){
- this.$emit('backToAdd')
- }
- },
-
-
- created() {
- // this.cityData = this.areaData
- // this.cityAreaArray.push(this.areaData)
- },
- mounted() {
- // this.changeIndicator(0)
- }
- }
- </script>
- <style lang="scss">
- // 不换行
- @mixin no-wrap() {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- .wrapper1 {
- z-index: 1999;
- position: absolute;
- top: -88rpx;
- left: 0;
- bottom: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.4);
- .content_view {
- z-index: 999;
- background: #fff;
- position: fixed;
- height: 65%;
- left: 0;
- bottom: 0;
- right: 0;
- border-top-left-radius: 10rpx;
- border-top-right-radius: 10rpx;
- width: 750rpx;
- margin: 0 auto;
- .title_view {
- height: 12%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 30rpx;
- height: 100rpx;
- .title {
- font-size: 32rpx;
- color: 32rpx;
- font-weight: bold;
- color: #333333;
- }
- .close_view {
- height: 60rpx;
- width: 40rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- .select_top {
- height: 90rpx;
- display: flex;
- justify-content: start;
- align-items: center;
- padding: 0 30rpx;
- position: relative;
- box-sizing: border-box;
- border-bottom: 1rpx solid #f2f2f2;
- .select_top_item {
- margin-right: 30rpx;
- font-size: 28rpx;
- line-height: 80rpx;
- @include no-wrap();
- color: #333;
- border-bottom: 6rpx solid #fff;
- max-width: 200rpx;
- &:last-child{
- color: $main-color;
- border-bottom: 6rpx solid $main-color;
- font-weight: bold;
- height: 90rpx;
- }
- }
- }
- .swiper {
- height: 80%;
- position: relative;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- .swiper-item {
- height: 100%;
- .scroll-view-item {
- height: 100%;
- .address_item {
- color: #333333;
- font-size: 28rpx;
- display: flex;
- align-items: center;
- height: 90rpx;
- line-height: 90rpx;
- padding: 0 30rpx;
- .address_item_icon {
- width: 28rpx;
- height: 20rpx;
- margin-left: 20rpx;
- }
- }
- }
- }
- }
- }
- .mask {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background: $uni-text-color-grey;
- opacity: 0.4;
- }
- }
- .content-enter {
- transform: translateY(100%);
- }
-
- .back_view{
- display: flex;
- align-items: center;
- image{
- width: 30rpx;
- height: 30rpx;
- }
- text{
- font-size: 28rpx;
- }
- }
- .content-enter-to {
- transform: translateY(0%);
- }
- .content-enter-active {
- transition: transform 0.5s;
- }
- .content-leave {
- transform: translateY(0%);
- }
- .content-leave-to {
- transform: translateY(100%);
- }
- .content-leave-active {
- transition: transform 0.5s;
- }
- </style>
|