Initial project commit
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
<script setup>
|
||||
import cityData from "@/utils/city-data";
|
||||
|
||||
defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
currentCity: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close", "select"]);
|
||||
|
||||
const hotCities = [
|
||||
"北京", "上海", "广州", "深圳",
|
||||
"成都", "杭州", "南京", "武汉",
|
||||
"重庆", "西安", "长沙", "厦门",
|
||||
"青岛", "大连", "苏州", "三亚",
|
||||
];
|
||||
|
||||
const handleSelect = (city) => {
|
||||
emit("select", city);
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const handleMask = () => {
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view v-if="visible" class="city-picker">
|
||||
<view class="mask" @tap="handleMask" @touchmove.stop.prevent />
|
||||
<view class="panel">
|
||||
<view class="panel-header">
|
||||
<text class="panel-title">选择城市</text>
|
||||
<view class="close-btn" @tap="handleMask">
|
||||
<text class="close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="panel-body">
|
||||
<view
|
||||
class="city-item all-city"
|
||||
:class="{ active: currentCity === '全部城市' }"
|
||||
@tap="handleSelect('全部城市')"
|
||||
>
|
||||
<text class="city-text">全部城市</text>
|
||||
</view>
|
||||
|
||||
<view class="section-label">
|
||||
<text class="section-label-text">热门城市</text>
|
||||
</view>
|
||||
|
||||
<view class="city-grid">
|
||||
<view
|
||||
v-for="c in hotCities"
|
||||
:key="c"
|
||||
class="city-tag"
|
||||
:class="{ active: currentCity === c }"
|
||||
@tap="handleSelect(c)"
|
||||
>
|
||||
<text class="tag-text">{{ c }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-label all-section">
|
||||
<text class="section-label-text">全部城市</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="province in cityData"
|
||||
:key="province.province"
|
||||
class="province-section"
|
||||
>
|
||||
<text class="province-title">{{ province.province }}</text>
|
||||
<view class="city-grid">
|
||||
<view
|
||||
v-for="c in province.cities"
|
||||
:key="`${province.province}-${c}`"
|
||||
class="city-tag"
|
||||
:class="{ active: currentCity === c || currentCity === c.replace('市', '') }"
|
||||
@tap="handleSelect(c)"
|
||||
>
|
||||
<text class="tag-text">{{ c }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.city-picker {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f1f5f9;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 28rpx;
|
||||
background: #f5f6fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
height: calc(70vh - 114rpx);
|
||||
padding: 24rpx 32rpx 48rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.city-item {
|
||||
padding: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background: #f5f6fa;
|
||||
}
|
||||
|
||||
.city-item.active {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.city-text {
|
||||
font-size: 30rpx;
|
||||
color: #1e293b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.city-item.active .city-text {
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.all-section {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.section-label-text {
|
||||
font-size: 26rpx;
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.city-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.province-section {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.province-title {
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.city-tag {
|
||||
width: calc(25% - 12rpx);
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f6fa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.city-tag.active {
|
||||
background: #6366f1;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 26rpx;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.city-tag.active .tag-text {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user