<!-- 选择 -->
<template>
<div class="market-container">
<div class="main-area " @click="overlayShow = true">
<div class="name">
{{ market.name || '暂无市场信息' }}
</div>
<van-icon style="margin-left: 10px;" name="arrow-down" />
</div>
<van-action-sheet v-model="overlayShow" class="wjw-sheet" :get-container="getContainer">
<div class="wjw-wrapper">
<div class="top">
<van-image width="18" height="18" fit="contain" :src="closeUrl" @click="overlayShow = false" />
</div>
<div class="bottom">
<div class="button">
<div class="title">选择市</div>
</div>
<div class="content">
<span v-if="marketOptions && marketOptions.length > 0">
<div
v-for="(item, index) in marketOptions"
:key="index"
class="item flex-row-align"
:class="{ 'van-hairline--bottom': index !== marketOptions.length - 1, 'active': market.id === item.id }"
@click="chooseItem(item)"
>
<span class="left-name">{{ item.name }}</span>
<van-icon v-if="market.id === item.id" size="18px" color="#3E6FFA" name="success" />
</div>
</span>
<van-empty v-else description="暂无市" :image="noPicUrl" />
</div>
</div>
</div>
</van-action-sheet>
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';
import { getAllMarket } from '@/api/user'
import { findByCityName } from 'api/giftCard'
import { getUserInfo, setUserInfo } from '@/utils/auth'
export default {
name: 'StoreSelect',
// import引入的组件需要注入到对象中才能使用
components: { },
data() {
// 这里存放数据
return {
market: {},
marketOptions: [],
cityName: '',
overlayShow: false,
closeUrl: require('@/assets/images/sheet-closed.png'),
noPicUrl: require('@/assets/images/no-pic.png')
}
},
// 生命周期 - 创建完成(可以访问当前this实例)
created() {
this.getAllMarket()
console.log(this.getUserInfo())
},
// 方法集合
methods: {
getUserInfo,
setUserInfo,
// 获取经纬度
currentPoint(ev) {
// debugger
console.log(ev)
if (ev) {
this.cityName = ev.address.city
}
},
getContainer() {
return document.querySelector('.app-container')
},
getAllMarket() { // 获取
// debugger
// console.log(currentLongitudeAndLatitude)
getAllMarket({}).then(res => {
this.$set(this, 'marketOptions', res.data)
// debugger
console.log(this.marketOptions)
let currentLongitudeAndLatitude = JSON.parse(sessionStorage.getItem('currentLongitudeAndLatitude'))
let paeams = currentLongitudeAndLatitude.address.city
this.findByCityName(paeams).then(res => {
// debugger
// let object = res.data
let sessionmarket = JSON.parse(sessionStorage.getItem('markt'))
if (sessionmarket) {
this.market = sessionmarket
// debugger
let infomation = this.getUserInfo()
infomation.marketId = sessionmarket.id
this.setUserInfo(infomation)
this.$emit('marketSelect', sessionmarket)
// console.log(infomation)
} else {
this.market = res.data
this.$emit('marketSelect', this.market)
}
}).catch(err => {
console.log(err)
this.market = this.marketOptions.find(item => item.id === 1)
this.market = sessionStorage.getItem('markt') ? JSON.parse(sessionStorage.getItem('markt')) : this.market
})
// console.log(this.market)
// debugger
}).catch(err => {
console.log(err)
})
},
findByCityName(cityName) {
// debugger
// this.currentPoint()
return new Promise((resolve, reject) => {
findByCityName({ cityName: cityName }).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
},
chooseItem(item) {
// debugger
this.market = item
this.overlayShow = false
// sessionStorage.setItem('markt', JSON.stringify(item))
// let infomation = this.getUserInfo()
// infomation.marketId = item.id
// infomation.sysCityId = item.sysCityId
// this.setUserInfo(infomation)
this.$emit('marketSelect', this.market)
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.market-container {
width: 100%;
background-color: $bottom-bg-color;
.main-area {
display: flex;
align-items: center;
height: 36px;
padding: 0 16px;
font-size: 13px;
color: #6D6D6D;
background-color: #F6F6F6;
// justify-content: space-between;
.name{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
line-clamp: 1;
-webkit-line-clamp: 1; //显示几行
}
}
}
.wjw-sheet {
.content {
.item {
min-height: 24px;
line-height: 18px;
padding-left: 7px;
padding-top: 12px;
padding-bottom: 4px;
font-size: 13px;
color: #5a5a5a;
justify-content: space-between;
&.active {
color: #3E6FFA;
}
.left-name {
width: calc(100% - 24px);
}
}
}
}
</style>
应用
<MarketSelect @marketSelect="marketSelect" />