123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- <template>
- <view class="content">
- <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom" @scroll="scroll">
- <view class="list" @click="intoDetail" v-for="item in storeList" :key="item.id">
- <u-image width="160rpx" height="160rpx" :border-radius="10" :src="item.icon?item.icon:'/static/img/mddef.jpg'"></u-image>
- <view class="store-info">
- <view class="name">
- {{item.name}}
- </view>
- <view class="address">
- {{item.addrDetail}}
- </view>
- <view class="location">
- <view class="left">
- <uni-icons class="icon" size="16" type="paperplane"></uni-icons>
- <text>{{item.distance}} km</text>
- </view>
- <view class="right">
- <u-icon class="icon" size="32" name="clock"></u-icon>
- <text>{{item.time}} 营业</text>
- </view>
- </view>
- </view>
- <view class="list-right">
- <view :class="item.statusClass">
- <u-image width="100rpx" height="100rpx" :src="getStoreStatus(item)"></u-image>
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- import uniIcons from "@/components/uni-icons/uni-icons.vue"
- export default {
- components: {
- uniIcons
- },
- data() {
- return {
- storeList: [{
- id: 1,
- icon: '',
- addrDetail: '陕西省西安市未央区北二环贞观路',
- name: '贞观路站',
- distance: 0.1,
- time: '8:00-22:00',
- status: 1
- },
- {
- id: 10,
- icon: '',
- addrDetail: '陕西省西安市未央区北二环贞观路二环贞观路',
- name: '贞观路站',
- distance: 0.1,
- time: '8:00-22:00',
- status: 0
- },
- {
- id: 11,
- icon: '',
- addrDetail: '陕西省西安市未央区北二环贞观路',
- name: '贞观路站',
- distance: 0.1,
- time: '8:00-22:00',
- status: 2
- }
- ],
- currentPosition: {
- lat: '0',
- lng: '0'
- },
- pageNo: 1,
- pageSize: 10
- }
- },
- onShow() {
- },
- onLoad() {
- // 获取当前经纬度
- let _this = this
- uni.getLocation({
- type: 'wgs84', // 默认wgs84
- success: function(res) {
- _this.currentPosition.lat = res.latitude;
- _this.currentPosition.lng = res.longitude;
- _this.gpsCompletion = true;
- // 查询门店信息
- // _this.getStoresList()
- },
- fail: function(res) {
- console.log(res)
- // 查询门店信息
- // _this.getStoresList()
- },
- });
- },
- computed: {},
- methods: {
- getStoresList() {
- uni.showLoading({
- title: '正在加载...'
- })
- let lat = this.currentPosition.lat
- let lng = this.currentPosition.lng
- getStoresList({
- pageNo: this.pageNo,
- pageSize: this.pageSize,
- lat: lat,
- lng: lng
- }).then(res => {
- console.log(res)
- if (res.status == 200) {
- let list = res.data.list
- if (list && list.length) {
- list.map(item => {
- if (item.addrDetail.indexOf("省") > 0 && item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") >
- 0) {
- item.addrDetail = item.addrDetail
- } else {
- if (item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") > 0) {
- item.addrDetail = item.addrProvinceName + item.addrDetail
- } else if (item.addrDetail.indexOf("区") > 0) {
- item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDetail
- } else {
- item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail
- }
- }
- item.distance = item.distance ? Math.round(item.distance / 1000) : ''
- item.star = getStarNum(item.level)
- })
- this.storeList = this.storeList.concat(list)
- } else {
- if (this.pageNo != 1) {
- uni.showToast({
- title: '已经是最后一页'
- })
- this.isLastPage = true
- }
- }
- }
- uni.hideLoading()
- })
- },
- // 获取网点营业状态
- getStoreStatus(item) {
- switch (item.status) {
- case 0:
- item.statusClass = 'store-off'
- return '/static/img/ygb.png'
- break;
- case 1:
- item.statusClass = 'store-on'
- return '/static/img/yyz.png'
- break;
- case 2:
- item.statusClass = 'store-waite'
- return '/static/img/dky.png'
- break;
- default:
- break;
- }
- },
- // 进入网点详情
- intoDetail (item) {
- uni.navigateTo({
- url: `/pages/store/storeDetail?id=${item.id}`
- })
- },
- // 到达底部
- reachBottom() {
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .content {
- padding: 0 20rpx;
- .scroll-Y {
- width: 100%;
- height: 100%;
- .list {
- padding: 20rpx 0;
- display: flex;
- border-bottom: 1px solid #eee;
- .store-info {
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: space-between;
- padding: 0 20rpx;
- .name {
- font-size: 32rpx;
- color: #000;
- }
- .address{
- font-size: 26rpx;
- padding: 10rpx 0;
- }
- .location {
- display: flex;
- align-items: center;
- font-size: 24rpx;
- .left {
- margin-right: 20rpx;
- }
- .icon {
- color: #999;
- margin-right: 5rpx;
- }
- }
- }
- .list-right {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- }
- }
- </style>
|