shanxian-work-app/component/allArea/allArea.vue

<template>
	<view class="allArea">

		<view class="backIcon" @click="back">
			<image src="http://resource.weilaibike.com/yunwei/leftArrow.png"></image>
		</view>
		<view class="area">
			<text class="arear-text" @click="Area">{{list[curVal].text}}</text>
		</view>
		<view :animation="animationData" class="arear-list" v-show="isShow">
			<view class="arear-child-list" v-for="(items,index1) in list" :key='index1' @click="pop(index1)">
				{{items.text}}
			</view>
		</view>
	</view>
</template>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
	export default {
		data() {
			return {
				screenHeight: "",
				isShow: false,
				list: uni.getStorageSync('allArea'),
				animationData: {},
				count: "", //点击事件次数
				curVal: uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0, //骑行区与第一个下标
				curId: "", //骑行区域id

			}
		},
		onShow(){
			console.log('这是子组件')
		},
		methods: {
			Area: function(e) {
				// // this.curVal = uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0
				// console.log(uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0, '这是下标')
				// this.isShow = !this.isShow
				// console.log(this.isShow, "这是骑行区与")
				// console.log(this.list)
				var list1 = uni.getStorageSync('allArea')
				var arr = []
				for (let i = 0, len = list1.length; i < len; i++) {
					arr = arr.concat(list1[i].text)
					console.log(arr)
				}
				console.log( uni.getStorageSync('allArea'),"99999")
				var area= uni.getStorageSync('allArea')
				uni.showActionSheet({
				   
					itemList: arr,
					success: function(res) {
						var list=uni.getStorageSync('allArea')
						let index=res.tapIndex
							
						this.curVal = index
						this.curId=list[index].areaID
						
						uni.setStorageSync('curVal', index)
						uni.setStorageSync('curId', list[index].areaID)
						console.log(this.curId,"index");
						this.$emit('getChild',this.list[index])
						
						// console.log(list[index].areaID,"66666");
						
					
						
					
						// this.curVal = e
						// this.curId = this.list[e].areaID
						// uni.setStorageSync('curVal', e)
						// uni.setStorageSync('curId', this.list[e].areaID)
						// this.$emit('getChild',this.list[e])
						// console.log(e, "骑行区")
						// console.log(this.curVal, "这是骑行区if")
					},
					fail: function(res) {}
					})
			},

			pop: function(e) {
				this.isShow = !this.isShow
				this.curVal = e
				this.curId = this.list[e].areaID
				uni.setStorageSync('curVal', e)
				uni.setStorageSync('curId', this.list[e].areaID)
				this.$emit('getChild', this.list[e])
				console.log(e, "骑行区")
				console.log(this.curVal, "这是骑行区if")

			},
			// show: function() {
			// 	setTimeout(function() {
			// 		this.list = uni.getStorageSync('allArea')
			// 		this.curVal = uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0
			// 	}, 2000)
			// },
			//返回上一页
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.allArea {
		display: inline-block;
		position: fixed;
		padding-top: var(--status-bar-height);
		background-color: #ffffff;
		/* padding: 28rpx 0; */
		padding-bottom: 28rpx;
		z-index: 1000;
		width: 100%;
		border-bottom: 2upx solid #C5C5C5;
	} 
	

	.iconfont {
		display: inline-block;
		height: 100%;
		font-size: 34rpx;
		width: 50rpx;
		text-align: center;
		padding: 14rpx 0;

	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.area {
		display: inline-block;
		vertical-align: middle;
	}

	.iconfont {
		display: inline-block;
		height: 100%;
		font-size: 34rpx;
		width: 50rpx;
		text-align: center;
		padding: 14rpx 0;

	}

	.backIcon {
		display: inline-block;
		vertical-align: bottom;
	}

	.backIcon image {
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 40rpx;
		width: 50rpx;
	}

	.area {
		position: absolute;
		background-color: #FFFFFF;
		font-size: 32rpx;
		width: 100%;
	}

	.arear-list {
		position: absolute;
		z-index: -1;
		left: 0;
		top: 130rpx;
		width: 90%;
		background-color: #FFFFFF;
		margin-left: 20rpx;
		padding: 0 20rpx;
	}

	.arear-child-list {
		padding: 20rpx 0;
		font-size: 30rpx;
		border-bottom: solid 1rpx #e6e6e6;
	}
</style>