You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
yanzong_qianduan/pages/shop/extract.vue

200 lines
5.2 KiB

5 months ago
<template>
<view class="container b-f">
<!-- 门店列表 -->
<view class="shop-list">
<view v-for="(item, index) in shopList" :key="index" @click="onSelectedShop(item.shop_id,item.distance_unit)" class="shop-item dis-flex flex-y-center">
<view class="shop-item__content flex-box">
<view class="shop-item__title">
<text>{{ item.shop_name }}</text>
</view>
<view class="shop-item__address">
<text>地址{{ item.region.province }}{{ item.region.city }}{{ item.region.region }}{{ item.address }}</text>
</view>
<view class="shop-item__phone">
<text>联系电话{{ item.phone }}</text>
</view>
<view v-if="item.distance" class="shop-item__distance">
<text class="iconfont icon-dingwei"></text>
<text class="f-24">{{ item.distance_unit }}</text>
</view>
</view>
<!-- 选中状态 -->
<view v-if="item.shop_id == selectedId" class="shop-item__right">
<text class="iconfont icon-check1"></text>
</view>
</view>
</view>
<!-- 定位按钮 -->
<view v-if="!isAuthor" class="widget-location dis-flex flex-x-center flex-y-center" @click="onAuthorize()">
<text class="iconfont icon-locate"></text>
</view>
<empty v-if="!shopList.length" :isLoading="isLoading" tips="亲,暂无自提门店哦" /><addShuiyin />
</view>
</template>
<script>
import * as ShopApi from '@/api/shop'
import Empty from '@/components/empty'
export default {
components: {
Empty
},
data() {
return {
// 正在加载中
isLoading: true,
// 是否授权了定位权限
isAuthor: true,
// 当前选择的门店ID
selectedId: null,
// 门店列表
shopList: []
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad({ selectedId }) {
const app = this
// 记录当前选择的门店ID
app.selectedId = selectedId ? selectedId : null
// 获取默认门店列表
app.getShopList()
// 获取用户坐标
app.getLocation(res => {
app.getShopList(res.longitude, res.latitude)
})
},
methods: {
// 获取门店列表
getShopList(longitude, latitude) {
const app = this
app.isLoading = true
ShopApi.list({
isCheck: 1,
longitude: longitude ? longitude : '',
latitude: latitude ? latitude : ''
})
.then(result => app.shopList = result.data.list)
.finally(() => app.isLoading = false)
},
// 获取用户坐标
// 参考文档:https://uniapp.dcloud.io/api/location/location?id=getlocation
getLocation(callback) {
const app = this
uni.getLocation({
type: 'wgs84',
success: callback,
fail() {
app.$toast('获取定位失败,请点击右下角按钮重新尝试定位')
app.isAuthor = false
}
})
},
// 授权启用定位权限
onAuthorize() {
const app = this
// #ifdef MP
uni.openSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
console.log('定位权限授权成功')
app.isAuthor = true
setTimeout(() => {
// 获取用户坐标
app.getLocation(res => {
app.getShopList(res.longitude, res.latitude)
})
}, 1000)
}
}
})
// #endif
// #ifdef H5
// 获取用户坐标
app.getLocation(res => {
app.getShopList(res.longitude, res.latitude)
})
// #endif
},
/**
* 选择门店
*/
onSelectedShop(selectedId,distance_unit) {
const app = this
// 设置选中的id
app.selectedId = selectedId
// 相应全局事件订阅: 选择自提门店
uni.$emit('syncSelectedId', selectedId)
uni.$emit('syncSelectedDistance_unit', distance_unit)
// 返回上级页面
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style lang="scss" scoped>
.shop-list .shop-item {
padding: 20rpx 30rpx;
min-height: 180rpx;
font-size: 26rpx;
line-height: 1.5;
border-bottom: 1px solid #eee;
}
.shop-item__title {
font-size: 30rpx;
color: #535353;
margin-bottom: 10rpx;
}
.shop-item__address,
.shop-item__phone {
color: #919396;
}
.shop-item__distance {
margin-top: 10rpx;
color: #c1c1c1;
height: 40rpx;
}
.shop-item__distance .iconfont {
color: #81838e;
margin-right: 5rpx;
}
// 选中图标
.shop-item__right {
margin-left: 20rpx;
color: #535353;
font-size: 38rpx;
}
// 定位图标
.widget-location {
position: fixed;
right: calc(var(--window-right) + 40rpx);
bottom: calc(var(--window-bottom) + 70rpx);
width: 72rpx;
height: 72rpx;
z-index: 200;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
color: #555;
font-size: 40rpx;
}
</style>