118 lines
2.1 KiB
Plaintext
Executable File
118 lines
2.1 KiB
Plaintext
Executable File
<template>
|
|
<view class="page">
|
|
<view class="line"></view>
|
|
|
|
<scroll-view scroll-y="true">
|
|
<view
|
|
v-for="(item, index) in cityList"
|
|
class="item"
|
|
:class="{ active: index == activeIndex }"
|
|
:key="index"
|
|
@click="chooseLocation(item.city_id, item.city_name)"
|
|
@touchstart="touchstartLocation(index)"
|
|
@touchend="touchendLocation"
|
|
>
|
|
<text class="item-text">
|
|
{{ item.city_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 cityList from '@/json/area_city.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
cityList: [],
|
|
activeIndex: -1
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
let provinceId = params.provinceId;
|
|
console.log(params);
|
|
console.log(cityList);
|
|
let realCityList = [];
|
|
for (let i = 0; i < cityList.length; i++) {
|
|
let tempProvinceId = cityList[i].province_id;
|
|
if (tempProvinceId == provinceId) {
|
|
realCityList.push(cityList[i]);
|
|
}
|
|
}
|
|
this.cityList = realCityList;
|
|
},
|
|
methods: {
|
|
touchstartLocation(index) {
|
|
this.activeIndex = index;
|
|
},
|
|
touchendLocation() {
|
|
this.activeIndex = -1;
|
|
},
|
|
chooseLocation(cityId, cityName) {
|
|
uni.setStorageSync('myLocationCity', cityName);
|
|
uni.navigateTo({
|
|
url: 'chooseDistrict?cityId=' + cityId
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.right-arrow {
|
|
align-items: center;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.item-text {
|
|
color: #ffffff;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.right-part {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
.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;
|
|
align-items: center;
|
|
}
|
|
|
|
.active {
|
|
background-color: #4a4c52;
|
|
}
|
|
.page {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: #181b27;
|
|
}
|
|
</style>
|