63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<view class="location-container">
|
|
<view class="fenge"></view>
|
|
<view class="location-list">
|
|
<!-- 地址项 -->
|
|
<view class="location-item" v-for="(item, index) in locationList" :key="index" @click="selectLocation(item)">
|
|
<view class="location-info">
|
|
<text :class="['location-address', { 'active': item.checked }]">{{ item.address }}</text>
|
|
</view>
|
|
<view class="location-select">
|
|
<image
|
|
v-if="!item.checked"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
|
mode="aspectFit"
|
|
style="width: 40rpx; height: 40rpx;"
|
|
></image>
|
|
<image
|
|
v-if="item.checked"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
|
mode="aspectFit"
|
|
style="width: 40rpx; height: 40rpx;"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
locationList: [
|
|
{
|
|
id: 1,
|
|
address: '上海市上海市浦东新区上海市浦东新区杨高中路2128号正大生活馆F2层',
|
|
checked: true
|
|
},
|
|
{
|
|
id: 2,
|
|
address: '上海市上海市浦东新区上海市浦东新区杨高中路2128号正大生活馆F2层',
|
|
checked: false
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
selectLocation(item) {
|
|
// 取消所有选中状态
|
|
this.locationList.forEach(loc => {
|
|
loc.checked = false;
|
|
});
|
|
// 设置当前选中项
|
|
item.checked = true;
|
|
console.log("🚀 ~ selectLocation ~ item.address:", item.address)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |