107 lines
2.1 KiB
Plaintext
107 lines
2.1 KiB
Plaintext
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<view class="line"></view>
|
||
|
|
|
||
|
|
<scroll-view scroll-y="true">
|
||
|
|
<view
|
||
|
|
v-for="(item, index) in provinceList"
|
||
|
|
class="item"
|
||
|
|
:class="{ active: index == activeIndex }"
|
||
|
|
:key="index"
|
||
|
|
@click="chooseLocation(item.province_id, item.province_name)"
|
||
|
|
@touchstart="touchstartLocation(index)"
|
||
|
|
@touchend="touchendLocation">
|
||
|
|
<text class="item-text">
|
||
|
|
{{ item.province_name }}
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<view class="right-part">
|
||
|
|
<image
|
||
|
|
class="right-arrow"
|
||
|
|
src="/static/images/icon-right-arrow2.png"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import storage from "@/utils/storage.js"; //缓存
|
||
|
|
import provinceList from "@/json/area_province.js";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
provinceList: [],
|
||
|
|
activeIndex: -1,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.provinceList = provinceList;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
touchstartLocation(index) {
|
||
|
|
this.activeIndex = index;
|
||
|
|
},
|
||
|
|
touchendLocation() {
|
||
|
|
this.activeIndex = -1;
|
||
|
|
},
|
||
|
|
|
||
|
|
chooseLocation(provinceId, provinceName) {
|
||
|
|
uni.setStorageSync("myLocationProvince", provinceName);
|
||
|
|
uni.navigateTo({
|
||
|
|
url: "chooseCity?provinceId=" + provinceId,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.page {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: #181b27;
|
||
|
|
|
||
|
|
.line {
|
||
|
|
height: 1rpx;
|
||
|
|
background-color: #393a41;
|
||
|
|
width: 750rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
padding-left: 30rpx;
|
||
|
|
padding-right: 30rpx;
|
||
|
|
width: 750rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: space-between;
|
||
|
|
.item-text {
|
||
|
|
color: #ffffff;
|
||
|
|
align-self: center;
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-part {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-self: center;
|
||
|
|
.right-arrow {
|
||
|
|
align-self: center;
|
||
|
|
width: 32rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
background-color: #4a4c52;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|