yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.新添商户成地图可视化页面

Browse Source
yj-dev
杨杰 2 years ago
parent 67e8b1bf33
commit b6b881de22
5 changed files with 1177 additions and 1639 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 36
      App.vue
  2. 2
      index.html
  3. 780
      pages/tabBar/category/category.vue
  4. 1996
      pages/tabBar/home/home.vue
  5. 2
      pages/user/coupon/coupon.vue

36
App.vue
Unescape View File

@ -99,25 +99,25 @@
// #endif
// #ifdef H5
let that = this;
that.globalData.url = 'https://hsgcs.dctpay.com/crest';
that.globalData.v1url = 'https://hsgcs.dctpay.com/v1';
that.globalData.payurl = 'https://gratia-pay.dctpay.com/crest';
that.globalData.orderurl = 'https://hsgcs.dctpay.com/order';
that.globalData.userurl = 'https://hsgcs.dctpay.com/user';
that.globalData.brestUrl = 'https://hsgcs.dctpay.com/brest';
that.globalData.imgUrl = 'https://hsgcs.dctpay.com/filesystem/';
that.globalData.imageWxImg = 'https://hsgcs.dctpay.com/filesystem/wxApplets/';
that.globalData.imageqrImg = 'https://hsgcs.dctpay.com/filesystem/temporary/';
// that.globalData.url = 'https://hsgcs.dctpay.com/crest';
// that.globalData.v1url = 'https://hsgcs.dctpay.com/v1';
// that.globalData.payurl = 'https://gratia-pay.dctpay.com/crest';
// that.globalData.orderurl = 'https://hsgcs.dctpay.com/order';
// that.globalData.userurl = 'https://hsgcs.dctpay.com/user';
// that.globalData.brestUrl = 'https://hsgcs.dctpay.com/brest';
// that.globalData.imgUrl = 'https://hsgcs.dctpay.com/filesystem/';
// that.globalData.imageWxImg = 'https://hsgcs.dctpay.com/filesystem/wxApplets/';
// that.globalData.imageqrImg = 'https://hsgcs.dctpay.com/filesystem/temporary/';
// that.globalData.url = 'https://hsg.dctpay.com/crest';
// that.globalData.v1url = 'https://hsg.dctpay.com/v1';
// that.globalData.payurl = 'https://pay.dctpay.com/crest';
// that.globalData.orderurl = 'https://hsg.dctpay.com/order';
// that.globalData.userurl = 'https://hsg.dctpay.com/user';
// that.globalData.brestUrl = 'https://hsg.dctpay.com/brest';
// that.globalData.imgUrl = 'https://hsg.dctpay.com/filesystem/';
// that.globalData.imageWxImg = 'https://hsg.dctpay.com/filesystem/wxApplets/';
// that.globalData.imageqrImg = 'https://hsg.dctpay.com/filesystem/temporary/';
that.globalData.url = 'https://hsg.dctpay.com/crest';
that.globalData.v1url = 'https://hsg.dctpay.com/v1';
that.globalData.payurl = 'https://pay.dctpay.com/crest';
that.globalData.orderurl = 'https://hsg.dctpay.com/order';
that.globalData.userurl = 'https://hsg.dctpay.com/user';
that.globalData.brestUrl = 'https://hsg.dctpay.com/brest';
that.globalData.imgUrl = 'https://hsg.dctpay.com/filesystem/';
that.globalData.imageWxImg = 'https://hsg.dctpay.com/filesystem/wxApplets/';
that.globalData.imageqrImg = 'https://hsg.dctpay.com/filesystem/temporary/';
uni.getStorage({
key: 'openId',
success(e) {

2
index.html
Unescape View File

@ -18,7 +18,7 @@
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
<script src="https://open.95516.com/s/open/js/upsdk.js"></script>
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<!-- <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> -->
</head>
<body>
<noscript>

780
pages/tabBar/category/category.vue
Unescape View File

@ -1,603 +1,177 @@
<template>
<view>
<!-- 状态栏 -->
<view class="status" :style="{position:headerPosition}"></view>
<view class="header" :style="{position:headerPosition}">
<view class="addr" @click="goPostion">
<!-- <view class="icon location"></view> -->
{{city}}
<image mode="widthFix" style="width: 15px;" :src="imagewxUrl+imgadres"></image>
</view>
<view class="input-box">
<input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
<view class="icon search"></view>
</view>
</view>
<!-- 占位 -->
<view class="place"></view>
<!-- <view class="category-list"> -->
<view class="width100 height45l backcorfff" v-if="MerchantList != ''">
<view class="width90">
<!-- <view class="stuMenu flleft fotct" @click="showPopup() ">{{showCategoryIndex}}
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image>
</view> -->
<picker mode="selector" :range="MerchantList" range-key="merchantName" @change="showCategory">
<view class="font14">{{showCategoryIndex}}
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image>
</view>
</picker>
</view>
</view>
<view v-if="categoryList == '' " class="mart60 fotct font14 fcor666 fotct width100">
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
</view>
<view class="width96 height100p backcorfff border-r mart10" v-for="(box,i) in categoryList" :key="i">
<image mode="widthFix" :src="imageUrl+box.ext1" class="recontleft flleft mart10 border-r"
style="max-height: 80px;" @click="toCategory(box)">
</image>
<view class="recontright">
<view class="text2 width100 font18 fontwig6 paddtop15" @click="toCategory(box)">
{{box.storeName}}
</view>
<view class="width100 mart10 height22">
<view class="width70 flleft text1 font13 fcor999" @click="toCategory(box)">
{{box.address}}
</view>
<view class="width30 flright font13 fcor666 fotct" @click="seeloaction(item)">
<image mode="widthFix" :src="imagewxUrl+imgadres4" style="width: 10px;"></image>
{{box.distance}}km
</view>
</view>
</view>
</view>
<!-- <wybPopup ref="popup" type="top" height="800" width="500" radius="6" :showCloseIcon="false">
<view class="fotct font18 fontwig6 fcor333 mart10 height30">筛选门店</view>
<view class="mart15">
<view :class="item.merchantName == showCategoryIndex?'activeRefuel':'refuel'"
v-for="(item,index) in MerchantList" :key="index" @click="showCategory(item.merchantName,item.id)">
{{item.merchantName}}
</view>
</view>
</wybPopup> -->
<!-- #ifdef MP-->
<button open-type="contact">
<image :src="imagewxUrl+imgadres5" mode="widthFix" class="xfimg"></image>
</button>
<!-- #endif -->
<!-- #ifdef H5-->
<image :src="imagewxUrl+imgadres5" mode="widthFix" class="h5xfimg" @click="playPhone"></image>
<!-- #endif -->
</view>
</template>
<script>
import {
getCouponList,
getStoreListByMerchant,
getMerchantList,
findByLatAndLng
} from "../../../Utils/Api.js";
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
let app = getApp();
export default {
components: {
wybPopup
},
data() {
return {
showCategoryIndex: '',
showCategoryIndexId: '',
headerPosition: "fixed",
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'jt.png',
imgadres2: 'xiala.png',
imgadres1: 'noorder.png',
imgadres4: 'dh.png',
imgadres3: 'noorder.png',
imgadres5: 'cusservice.png',
city: "",
imageUrl: app.globalData.imgUrl,
//分类列表
categoryList: [],
MerchantList: [],
pageNum: 1,
pageSize: 10,
isNoMoreData: false
// loadingText: '点击加载更多'
}
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = "fixed";
} else {
this.headerPosition = "absolute";
}
},
onLoad() {},
onShow() {
this.pageNum = 1;
this.categoryList = [];
this.MerchantList = [];
if (app.globalData.cityName != '') {
this.city = app.globalData.qianzhuCityName;
this.getMerchantList();
} else {
this.postionIng();
}
},
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
onReachBottom() {
this.getStoreListByMerchant();
},
methods: {
//显示弹出
showPopup() {
this.$refs.popup.show();
},
postionIng() {
let that = this;
uni.getLocation({
type: 'wgs84',
success: function(res) {
app.globalData.latitude = res.latitude;
app.globalData.longitude = res.longitude;
that.findByLatAndLng(res.longitude, res.latitude);
// uni.request({
// url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude +
// ',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB',
// data: {},
// success: function(res) {
// that.city = res.data.result.address_component.city.replace(/市/g,
// '');
// app.globalData.cityId = res.data.result.ad_info.adcode;
// // app.globalData.cityId = '500100';
// that.getMerchantList();
// }
// })
}
})
},
//金纬度转
findByLatAndLng(item, item1) {
let datas = {
lng: item,
lat: item1
}
findByLatAndLng(datas).then(res => {
if (res.return_code == '000000') {
this.city = res.return_data.provinceName;
app.globalData.cityName = res.return_data.provinceName;
app.globalData.qianzhuCityName = res.return_data.cityName;
app.globalData.cityId = res.return_data.regionId;
// app.globalData.cityId = '500100';
if (res.return_data.result.addressComponent.adcode) {
this.getMerchantList();
}
}
});
},
// 商户列表
getMerchantList() {
let params = {
regionId: app.globalData.cityId
}
getMerchantList(params).then(res => {
if (res.return_code == '000000' && res.return_data != '') {
this.MerchantList = res.return_data;
this.showCategoryIndex = res.return_data[0].merchantName;
this.showCategoryIndexId = res.return_data[0].id;
this.pageNum = 1;
this.pageSize = 10;
this.isNoMoreData = false;
this.categoryList = [];
this.getStoreListByMerchant();
} else {
this.MerchantList = [];
uni.showToast({
title: '暂无数据',
icon: 'none',
duration: 2000
})
}
})
},
//跳转位置
goPostion() {
uni.navigateTo({
url: '/pages/user/positioning/positioning'
})
},
//门店列表
getStoreListByMerchant() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let pagenum = this.pageNum;
let params = {
merchantId: this.showCategoryIndexId,
longitude: app.globalData.longitude,
latitude: app.globalData.latitude,
pageNum: pagenum,
pageSize: this.pageSize
}
getStoreListByMerchant(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
uni.hideLoading();
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
this.categoryList = this.categoryList.concat(res.return_data.list);
if (res.return_data.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.categoryList = [];
}
})
},
//分类切换显示
showCategory(e) {
this.showCategoryIndex = this.MerchantList[e.target.value].merchantName;
this.showCategoryIndexId = this.MerchantList[e.target.value].id;
this.pageNum = 1;
this.pageSize = 10;
this.isNoMoreData = false;
this.categoryList = [];
this.getStoreListByMerchant();
},
toCategory(e) {
uni.navigateTo({
url: '../../goods/store-list/store-details?id=' + e.id + '&juli=' + e.distance
})
// uni.navigateTo({
// url: '../../goods/goods?id=' + e
// });
uni.setStorage({
key: "store_id",
data: e.id
})
uni.setStorage({
key: "store_juli",
data: e.distance
})
},
//搜索跳转
toSearch() {
uni.navigateTo({
url: '../../goods/HM-search/HM-search'
})
// uni.showToast({title: "建议跳转到新页面做搜索功能"});
},
//拨打客服电话
playPhone() {
let cont = "本服务由惠兑礼品提供\n400-678-0738";
let content = cont.replace(/<br>/g,"\n");
uni.showModal({
title: '客服',
content: content,
success: function(res) {
if (res.confirm) {
uni.makePhoneCall({
phoneNumber: '4006780738', //电话号码
success: function(e) {
console.log(e);
},
fail: function(e) {
console.log(e);
}
})
}
}
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #f1f3f5;
}
.h5xfimg {
width: 80rpx;
bottom: 140rpx;
position: fixed;
right: 40rpx;
}
.xfimg {
width: 80rpx;
bottom: 60rpx;
position: fixed;
right: 40rpx;
}
.status {
width: 100%;
height: 0;
position: fixed;
z-index: 10;
background-color: #fff;
top: 0;
/* #ifdef APP-PLUS */
height: var(--status-bar-height); //覆盖样式
/* #endif */
}
button::after {
border: none
}
.recontleft {
width: 80px;
margin-left: 10px;
}
.recontright {
margin-left: 100px;
}
.refuel {
padding: 6px 5px;
border-radius: 5px;
background-color: #f6f6f6;
color: #666666;
margin-left: 10px;
margin-top: 15px;
display: inline-block;
font-size: 13px;
width: 18%;
text-align: center;
}
.activeRefuel {
padding: 6px 5px;
border-radius: 5px;
border: 1px solid #089bf5;
color: #089bf5;
margin-left: 10px;
margin-top: 15px;
display: inline-block;
font-size: 13px;
width: 18%;
text-align: center;
}
.stuMenu {
width: 33.3%;
height: 30px;
line-height: 30px;
font-size: 14px;
margin-top: 10px;
color: #333333;
}
.stuimg {
width: 10px;
vertical-align: middle;
}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
}
.header {
width: 92%;
padding: 0 4%;
height: 100upx;
display: flex;
align-items: center;
position: fixed;
top: 0;
z-index: 10;
background-color: #0083f5;
/* #ifdef APP-PLUS */
top: var(--status-bar-height);
/* #endif */
.addr {
width: 120upx;
height: 60upx;
flex-shrink: 0;
color: #FFFFFF;
display: flex;
align-items: center;
font-size: 28upx;
.icon {
height: 60upx;
margin-right: 5upx;
display: flex;
align-items: center;
font-size: 42upx;
color: #ffc50a;
}
}
.input-box {
width: 100%;
height: 70rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
position: relative;
display: flex;
align-items: center;
.icon {
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 0;
width: 60upx;
height: 60upx;
font-size: 34upx;
color: #c0c0c0;
}
input {
padding-left: 28upx;
height: 28upx;
font-size: 28upx;
width: 100%;
}
}
.icon-btn {
width: 60upx;
height: 60upx;
flex-shrink: 0;
display: flex;
.icon {
width: 60upx;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 42upx;
background-color: transparent;
}
}
}
.place {
background-color: #ffffff;
height: 100upx;
/* #ifdef APP-PLUS */
margin-top: var(--status-bar-height);
/* #endif */
}
.category-list {
width: 100%;
display: flex;
.left,
.right {
position: absolute;
top: 100upx;
/* #ifdef APP-PLUS */
top: calc(100upx + var(--status-bar-height));
/* #endif */
bottom: 0upx;
}
.left {
width: 24%;
left: 0upx;
background-color: #f2f2f2;
.row {
width: 100%;
height: 90upx;
display: flex;
align-items: center;
.text {
width: 100%;
position: relative;
font-size: 28upx;
display: flex;
justify-content: center;
color: #3c3c3c;
.block {
position: absolute;
width: 0upx;
left: 0;
}
}
&.on {
height: 100upx;
background-color: #fff;
.text {
font-size: 30upx;
font-weight: 600;
color: #2d2d2d;
.block {
width: 10upx;
height: 80%;
top: 10%;
background-color: #0083f5;
}
}
}
}
}
.right {
width: 76%;
left: 24%;
.category {
width: 94%;
padding: 20upx 3%;
.banner {
width: 100%;
height: 24.262vw;
border-radius: 10upx;
overflow: hidden;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);
image {
width: 100%;
height: 24.262vw;
}
}
.list {
margin-top: 40upx;
width: 100%;
display: flex;
flex-wrap: wrap;
.box {
width: calc(70vw / 2);
margin-bottom: 30upx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
image {
width: 60%;
height: calc(70vw / 2 * 0.6);
}
.text {
margin-top: 5upx;
width: 80%;
display: flex;
justify-content: center;
font-size: 26upx;
}
}
}
}
}
}
</style>
<template>
<view class="content">
<map style="width: 100%; height: 90vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude"
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
scale: 13, //缩放级别
bottomData: false,
marker: [{
id: 0,
latitude: 23.13065, //纬度
longitude: 113.3274, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
// title:'我在这里',//标注点名
alpha: 0.9, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '天宝大厦', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 1234597,
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
// title:'我在这里',//标注点名
alpha: 0.9, //透明度
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持
// color:'red',//文本颜色
// },
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '广州塔', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 2,
latitude: 23.1338, //纬度
longitude: 113.33052, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '德隆大厦', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 3,
latitude: 23.136455, //纬度
longitude: 113.329002, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '羊城国际商贸中心', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 4,
latitude: 23.224781, //纬度
longitude: 113.293911, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '天瑞广场A座', //文本
color: '#ffffff', //文字颜色
fontSize: 16, //文本大小
borderRadius: 22, //边框圆角
borderWidth: '12',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
{
id: 5,
latitude: 23.072726, //纬度
longitude: 113.277921, //经度
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '大米和小米儿童康复(广州盈丰)中心', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderWidth: '8',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
],
}
},
onLoad() {
},
computed: {
mapheight() {
let data = ''
if (this.bottomData) {
if (this.upTop) {
data = '50px'
} else {
data = '200px'
}
} else {
data = '90vh'
}
return data
},
coverbottom() {
let data = ''
if (this.bottomData) {
data = '20rpx'
} else {
data = '100rpx'
}
return data
}
},
methods: {
//地图点击事件
markertap(e) {
console.log("===你点击了标记点===", e)
},
//地图点击事件
callouttap(e) {
console.log('地图点击事件', e)
}
}
}
</script>

1996
pages/tabBar/home/home.vue
View File

File diff suppressed because one or more lines are too long

2
pages/user/coupon/coupon.vue
Unescape View File

@ -220,7 +220,7 @@
font-size: 16px;
}
</style>
<button class="download" style="height:40px;line-height: 40PX;width:100%;border:none;">立即使用</button>
<button class="download" style="height:40px;line-height: 40PX;width:100%;border:none;">去使用</button>
</script>
</wx-open-launch-weapp>

Write Preview
Loading…
Cancel
Save