yxt_group
/
mallplus
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
184 Commits
1 Branch
0 Tags
117 MiB
 
 
 
 
 
 
Tree: f5ce28401d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f5ce28401d'
${ noResults }
mallplus/mallplusui-uniapp-app/pages/index/nearbyBusiness.vue

561 lines
14 KiB
Raw Blame History

<template>
<view class="content">
<!-- 顶部搜索 -->
<view class="getPosition">
<image src="/static/position.png" @click="openMap()" style="width: 50upx;height: 50upx;" mode=""></image>
<text @click="toAddressList()" >{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}</text>
</view>
<!-- 头部 -->
<view class="title-box">
<view @click="scanCode()" class="scan"><image src="http://rs.eonfox.cc/clzy/static/scan-ico.png" mode="" style="width:40upx; height:40upx; "></image></view>
<view class="input-box" @click="openSearch">
<view style="float: left;">
<image src="/static/search.png" mode="" style="width:40upx; height:40upx; margin-left: 10upx; margin-right: 10upx; margin-top: 10upx; "></image>
</view>
<view style=" float:left; height:100%;"><input type="text" value="" placeholder="输入关键字搜索" class="input" /></view>
</view>
</view>
<view class="topTitle">
<image src="http://rs.eonfox.cc/clzy/static/star-ico.png" mode="" style="width:68upx;height:68upx;float:left;margin-right: -10upx;"></image>
<text class="topText">全部商家</text>
</view>
<view class="checkGroup">
<radio-group>
<label class="radio" v-for="(item,index) in disType" :key='index'><radio value="r1" class="radio" @click="gain(item.id)"/>{{item.name}}</label>
</radio-group>
</view>
<view class="classification">
<view class="allClassification typeList" @click="gosort">
<uni-icon type="bars" size="22" class="bars" color="8e8e8e"></uni-icon>
<text>全部分类</text>
</view>
<view class="city typeList" @click="load">
<uni-icon type="refreshempty" size="25" color="8e8e8e"></uni-icon>
<text>加载全部</text>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<view class="shop-box" style="margin-top: 80upx;">
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="shop-box">
<!-- #endif -->
<view v-if="!storeList" style="text-align: center; color:#5C5C5C; font-size: 30upx;">暂无商家记录</view>
<view class="shop" v-for="(item, index) in storeList" @click="gobrand" :data-Businessid="item.id" :key="index">
<image :src="item.logo" mode="" class="image" width="100%" height="100%"></image>
<view class="shopText">
<text class="name">{{ item.name }}</text>
<view class="evaluate">
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
<text class="garde" style="margin-right:10upx; color:#666666; ">收藏 {{ item.collect }}</text>
</view>
<view class="bottomInformation">
<text v-if="item.addressDetail" class="crux" style="margin-top: 30upx; color:#666666; overflow: hidden; display: inline-block; height: 40upx; text-overflow:ellipsis;">
{{ item.addressDetail }}
</text>
<text v-else class="crux" style="margin-top: 30upx; color:#666666; overflow: hidden; display: inline-block; height: 40upx; text-overflow:ellipsis;">
{{ item.addressProvince }}-{{ item.addressCity }}
</text>
<text class="distance" style=" color:#666666;">{{ item.distance.toFixed(4) }}</text>
</view>
</view>
</view>
<!--<uni-load-more :loadingType="loadingType" :contentText="contentrefresh"></uni-load-more>-->
</view>
<view class="mask" v-show="display" @click="Colse"></view>
<view class="sortBox" v-show="display">
<view class="sortBox-title">
<view>请选择商家类别</view>
<view @click="Colse"><uni-icon type="closeempty" size="30"></uni-icon></view>
</view>
<view class="sortBoxBox" v-for="(items, index1) in Parent" :key="index1">
<view class="sortRight">
<text v-for="(item, index2) in items.son" :key="index2" @click="sublevel(item.type_id)">{{ item.name }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import eonfox from '@/components/eonfox/eonfox.js';
import fns from '@/components/eonfox/fns.js';
import QQMapWX from '@/components/eonfox/qqmap-wx-jssdk.js';
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import navBar from "@/components/zhouWei-navBar";
var qqmapsdk = new QQMapWX({
key: '5XABZ-AQ764-SMHUQ-DABAC-R7E4H-37FM2'
});
// #ifdef H5
let jweixin = require('jweixin-module');
// #endif
var ef = new eonfox();
export default {
components: {
mallplusCopyright,uniIcon
},
data() {
return {
sjnumber: [],
storeList: [],
name: '',
address: '',
page: 10,
merchant: [],
distance:20,
loadingType: 0,
contentText: {
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
disType:[
{
id: 5,
name: "5km",
},
{
id: 10,
name: "10km",
},
{
id: 20,
name: "20km",
},
{
id: 40,
name: "40km",
},
],
Parent: [],
display: false,
addressData: {
longitude:0.0,
latitude:0.0,
}, //默认收货地址
addressId: '', //地址id
statusBarHeight: ''
};
},
components: {
uniIcon,
uniLoadMore,
navBar
},
onShow: function() {
(this.latitude = ''), (this.longitude = '');
this.load();
},
async onLoad(options) {
this.load();
},
onReachBottom() {
},
methods: {
openSearch(){
console.log('搜索')
},
Colse() {
this.display = !this.display;
},
toAddressList() {
var type = '1'; //不知道这个type有什么值，取大一点
uni.navigateTo({
url: '../../pagesU/address/address?source=' + type
});
},
gobrand: function(e) {
console.log(e);
// return
var sjid = e.currentTarget.dataset.businessid;
console.log('目标', sjid);
uni.navigateTo({
url: '../../pagesC/store/businessDetails?id=' + sjid
+'&lon='+this.addressData.longitude
+'&lat='+this.addressData.latitude
// 参数的传递 newsid
});
},
gosort() {
this.display = !this.display;
},
openMap() {
var _this = this;
uni.chooseLocation({
success: function(res) {
console.log('res', res);
_this.addressData.longitude=res.longitude;
_this.addressData.latitude=res.latitude;
_this.addressId = 1 ;
_this.addressData.province = res.address ;
_this.addressData.name = res.name;
console.log('经度：' + res.longitude);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
_this.storeList = {};
}
});
},
async load() {
var that = this;
let params = {};
if(!that.addressId){
that.addressData = await Api.apiCall('get', Api.goods.getItemDefautl, params);
}
console.log(that.addressData);
if(that.addressData.longitude){
params = { geohash: that.addressData.latitude+','+ that.addressData.longitude, pageSize: that.page,distance:this.distance };
console.log(params);
let list = await Api.apiCall('get', Api.index.nearStoreList, params);
that.storeList = list;
}
console.log('that.addressId：' + that.addressId);
},
gain(id){
this.distance=id ;
this.load();
},
//点击查询商家分类
sublevel(id) {
var that = this;
that.display = !that.display;
ef.submit({
request: {
s: ['MERCHANTLIST', [{ lon: that.longitude, lat: that.latitude, search: { type_id: id } }]] //子级
},
callback: function(data) {
var res = fns.checkError(data, 's', function(errno, error) {
fns.err(error);
});
that.sjnumber = data.data.s.data.data;
console.log('分类', data);
},
error: function(err) {
fns.err('加载失败', err, 1);
}
});
},
//二维码
scanCode() {
var _this = this;
uni.showToast({
// #ifdef APP-PLUS
title: '这是APP',
icon: 'none',
// #endif
// #ifdef H5
title: '这是H5',
icon: 'none',
// #endif
// #ifdef MP-WEIXIN
title: '这是小程序',
icon: 'none',
// #endif
success() {
setTimeout(function() {}, 1500);
}
});
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
if (res.result) {
var data = JSON.parse(res.result);
console.log('res:', data);
if (!data.errno) {
if (data.type != 'merchant_money_plus') {
uni.showToast({
title: '该二维码非收款二维码'
});
} else if (data.data.merchant_id) {
_this.merchant_id = data.data.merchant_id;
if (data.data && data.data.user_id) {
var user_id = data.data.user_id;
} else {
var user_id = '';
}
uni.navigateTo({
url: '../../pagesB/payUser/payUser?mch_id=' + data.data.merchant_id + '&user_id=' + data.data.user_id
});
} else {
uni.showToast({
title: '扫码失败',
icon: 'none'
});
}
} else {
uni.showToast({
title: data.error,
icon: 'none'
});
}
}
}
});
}
}
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.content
width 100%
overflow hidden
.title-box
display flex
justify-content center // 水平居中
align-items center // 垂直居中
flex-direction row // 左到右
width 750upx
padding 0 20upx
height 100upx
.scan
width 40upx
height 40upx
.input-box
// margin-left 20upx
width 700upx
height 58upx
// border 1upx solid #d3d3d3
border-radius 50upx
.search
display inline-block
position absolute
top 0
left 0
.input
width 80%
display inline-block
font-size 28upx
text-align center
// text-align left
line-height 100%
height 100%
.chat
flex 1
.topTitle
width 100%
height 80upx
display flex
align-items center // 垂直居中
flex-direction row
padding 0 20upx
color #333
font-size 30upx
.topText{
margin-left 10upx
}
.leftBox
width 300upx
text-align right
.checkGroup{
padding-left 26upx
margin-bottom 10upx
font-size 30upx
.uni-label-pointer {
margin-right 16upx
}
}
.classification
height 80upx
display flex
align-items center
justify-content center // 垂直居中
flex-direction row
font-size 28upx
.typeList
text-align center
line-height 80upx
border 1px solid #d3d3d3
width 50%
height 100%
position relative
.typeList:before
content ""
position absolute
top 34upx
right 66upx
width: 0px;
height: 0px;
border-left: 12upx solid transparent;
border-right: 12upx solid transparent;
border-top: 12upx solid #bfbfbf;
.allClassification{
border-left 0
}
.city{
border-right 0
}
.place
font-size 30upx
height 100upx
text-align left
line-height 100upx
border-bottom 1px solid #d3d3d3
padding-left 20px
.shop-box, width 100%
height auto
.shop
height 200upx
border-bottom 1px solid #eee
display flex
align-items center
justify-content flex-start
flex-direction row
.image
width 160upx
height 160upx
margin-left 25upx
border-radius 50%
.shopText
width 500upx
height 220upx
margin-left 25upx
padding-top 25upx
.name
color #333
font-weight 600
font-size 30upx
width 100%
height 30px
.evaluate
font-size 20upx
margin-top 20upx
.bottomInformation
align-items center
justify-content space-between
flex-direction row
width 100%
color #333
font-size 28upx
.crux
width 240upx
display inline-block
.distance
width calc(100% - 250upx)
float right
text-align right
margin-top 30upx
.icoimg
width 48upx
height 48upx
</style>
<style>
.search-weixin-input {
font-size: 28upx;
background: #f5f5f5;
height: 60upx;
width: 90%;
border-radius: 50upx;
text-align: center;
}
.search-weixin {
background: #ffffff;
height: 80upx;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1upx solid #eeeeee;
position: fixed;
}
.sortBox {
position: fixed;
width: 650upx;
height: auto;
padding-top: 20upx;
padding-bottom: 40upx;
top: 25vh;
background-color: #ffffff;
margin-left: 50upx;
font-size: 28upx;
border: #e3e3e3 solid 3upx;
border-radius: 25upx;
z-index: 1000;
}
.sortBox-title {
width: 610upx;
padding: 20upx 20upx;
display: flex;
justify-content: space-between;
align-items: center;
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 4;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
}
.sortBoxBox {
width: 610upx;
padding: 20upx 20upx;
display: flex;
flex-wrap: wrap;
}
.sortRight {
width: auto;
padding-bottom: 20upx;
height: auto;
}
.sortRight text {
padding: 10upx;
border: #cccccc solid 1upx;
border-radius: 10upx;
color: #dd524d;
margin-left: 20upx;
float: left;
margin-bottom: 10upx;
}
.getPosition {
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
background-color: #fff;
}
.getPosition-weixin {
height: 90upx;
position: fixed;
z-index: 99;
width: 100%;
}
.getPosition-top {
width: 100%;
position: fixed;
top: 0;
z-index: 99;
background: #ffffff;
}
</style>