asd-mobild/src/views/zhulao/views/circle/list.vue

<template>
  <div>
    <van-nav-bar title="商户列表" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="page_list">
        <div v-for="(item,index) in merList" :key="index">
            <div class="item_bg" @click="detailTap(item.id)">
                <div class="top_bg">
                    <div class="name">{{item.name}}</div>
                    <div class="distance_bg">
                    <van-image class="distance_icon" :src="require('../../assets/images/elderly/location.png')" />
                    <span class="dis_text">{{item.distance| distanceConversion}}</span>
                    </div>
                </div>
                <div class="judge_bg">
                    <div  v-for="(starItem,starIndex) in starTotal" :key="starIndex">
                        <van-image class="star_icon" :src="item.score > starIndex ? require('../../assets/images/elderly/xx.png') : require('../../assets/images/elderly/collection.png')" />
                    </div>
                </div>
                <div class="address_bg">
                    <van-image class="location_icon" :src="require('../../assets/images/elderly/icondistance.png')" />
                    <div>{{item.detailedAddress}}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import {institutions_search} from '../../api/index.js'
export default {
    data() {
        return {
            merList:[],
            starTotal:5,
            radius:0,
            longitude:'',
            latitude:'',
            categoryId:''

        }
    },
    filters: {
      distanceConversion(num) {
        var dis
        if (num >= 5000) {
            dis = '>5km'
        } else if (num >= 1000 && num < 10000) {
            dis = (num / 1000).toFixed(2) + 'km'
        } else {
            dis = num + 'm'
        }
        return dis
      }
    },
    mounted() {
    },
    created() {
        this.longitude = this.$route.query.longitude
        this.latitude = this.$route.query.latitude
        this.radius = this.$route.query.radius
        this.categoryId = this.$route.query.categoryId
        this.getInstitutions_search()
    },
    methods: {
        async getInstitutions_search() {
            var institutionSearch = await institutions_search({
                "radius": this.radius,
                "institutionalTypeList":this.categoryId,
                "lat": this.latitude,
                "lng": this.longitude,
                "pageNum":1,
                'pageSize':10
            })
            let merListTemp=[]
            institutionSearch.rows.forEach((e) => {
                // e.distance = util.getDistance(this.data.latitude,this.data.longitude,e.lat,e.lng)
                e.score = 4
                merListTemp.push(e)
            });
           this.merList =merListTemp
        },
        detailTap(id) {
            console.log('商户id')
            console.log(id)
            this.$router.push({path:'/detail',query:{institutionsId:id}})
        }
    }
}
</script>
<style lang="scss" scoped>
.page_list {
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
}
.item_bg {
  padding: 10px 15px;
  box-sizing: border-box;
  width: 96%;
  min-height: 220px;
  border-radius: 10px;
  background-color: white;
  margin: 10px auto;
  font-size: 32px;
}
.top_bg {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name {
  flex: .8;
}
.distance_bg {
  flex: .2;
}
.distance_icon {
  width: 30px;
  height: 30px;
  margin-right: 10rpx;
}
.dis_text {
  color: rgb(243, 99, 80);
  font-size: 28px;
}
.judge_bg {
  width: 100%;
  height: auto;
}
.address_bg {
  width: 100%;
  height: auto;
  color: #3a3939;
  font-size: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.location_icon {
  width: 30px;
  height: 30px;
  margin: 7px 10px 0 0;
}
.judge_bg {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 6px 0;
}
.star_icon {
  width: 30px;
  height: 30px;
  margin-right: 6px;
}

</style>