|
|
@@ -0,0 +1,362 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+
|
|
|
+ <view class="shopline" v-for="(item,index) in queryShopList" @click="goDetail(item)">
|
|
|
+ <view class="shoplineLeft">
|
|
|
+ <image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
|
|
|
+ <image src="../../static/img/noimg.png" mode="" class="shopImg" v-else></image>
|
|
|
+ </view>
|
|
|
+ <view class="shopright">
|
|
|
+ <view class="shopTop">
|
|
|
+ <view class="shopName">{{item.shopName}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="brandsBg" v-if="item.brands">
|
|
|
+
|
|
|
+ <view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
|
|
|
+ v-if="item.endTime">{{item.endTime}}</span> </view>
|
|
|
+
|
|
|
+ <view class="shopBottomLeft">
|
|
|
+
|
|
|
+ <span class="shopaddress"
|
|
|
+ v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
|
|
|
+ <span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 上拉 加载更多 -->
|
|
|
+ <view class="noMore" v-if="noMoreShow && (queryShopList.length!=0)">没有更多数据</view>
|
|
|
+ <!-- 无数据空白页 -->
|
|
|
+ <nodata v-if="queryShopList.length==0"></nodata>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import nodata from '../../components/nodata/nodata.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ nodata,
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ location: {
|
|
|
+ lng: '',
|
|
|
+ lat: '',
|
|
|
+ },
|
|
|
+ queryShopList: '',
|
|
|
+ noMoreShow: false,
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad() {
|
|
|
+ var that = this;
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success: function(res) {
|
|
|
+ console.log(res)
|
|
|
+ that.location.lat = res.latitude
|
|
|
+ that.location.lng = res.longitude
|
|
|
+
|
|
|
+ that.getqueryShopList() //获取全部门店列表
|
|
|
+
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+
|
|
|
+ getqueryShopList() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.$http('opencarOwnerHome/queryShopInfoList', {
|
|
|
+
|
|
|
+ lat: this.location.lat ? this.location.lat : '',
|
|
|
+ lng: this.location.lng ? this.location.lng : '',
|
|
|
+
|
|
|
+
|
|
|
+ }, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.queryShopList = res.data
|
|
|
+ console.log('list+=', this.queryShopList);
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ goDetail(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '../shop/shopDetail?id=' + item.shopId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+
|
|
|
+ this.getqueryShopList()
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .box {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-bottom: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopline {
|
|
|
+ margin: 0rpx 24rpx 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .nodataImg {
|
|
|
+ width: 400rpx;
|
|
|
+ padding-top: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noTxt {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nodataBox {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopImg {
|
|
|
+ width: 146rpx;
|
|
|
+ height: 146rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBox {
|
|
|
+ padding-top: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopCont {
|
|
|
+ padding-left: 22rpx;
|
|
|
+ width: 520rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopName {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .span1 {
|
|
|
+ color: #FF4F00;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .span2 {
|
|
|
+ color: #FF4F00;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .span3 {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding-left: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBq {
|
|
|
+ color: #FF4F00;
|
|
|
+ font-size: 22rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ border: 1px solid #FF4F00;
|
|
|
+ line-height: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ padding: 0rpx 5rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brandsBg {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 5rpx 0rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .brands {
|
|
|
+ border-radius: 4rpx;
|
|
|
+ padding: 0 5rpx;
|
|
|
+ color: #F19D01;
|
|
|
+ height: 28rpx;
|
|
|
+ border: 1px solid #F19D01;
|
|
|
+
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ margin: 5rpx 10rpx 5rpx 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeBg {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopTime {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addressBox {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopNameSearchInput {
|
|
|
+ width: 500rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .colorCS {
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopbox {
|
|
|
+ padding: 0 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .shopImg {
|
|
|
+ width: 146rpx;
|
|
|
+ height: 146rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopCallImg {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopTop {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 510rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopright {
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopName {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 37rpx;
|
|
|
+ width: 450rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopScore1 {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4F00;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopScore11 {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #FF4F00;
|
|
|
+ margin-right: 14rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopScore2 {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ padding: 8rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopScore3 {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .Btn {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #FF2400 linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
|
|
|
+ border-radius: 6rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBottom {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBottomLeft {
|
|
|
+
|
|
|
+ font-size: 25rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 30rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopaddress {
|
|
|
+ width: 400rpx;
|
|
|
+ /* 隐藏文字显示 ...不换行 */
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noMore {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+</style>
|
guo
