You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
497 lines
14 KiB
Vue
497 lines
14 KiB
Vue
<template>
|
|
<div class="container" hover-class="none" :hover-stop-propagation="false">
|
|
<u-skeleton :loading="loading" :animation="true" border-radius="12"></u-skeleton>
|
|
|
|
<div class="g_p_10 g_pb_80 u-skeleton" :class="loading ? 'g_ml_10 g_mr_10' : ''"
|
|
style="min-height: calc(100vh - 30px)">
|
|
<!-- <div v-if="infoList.length > 0"> -->
|
|
<div class="sub g_bg_f g_radius_8 g_mb_10 flex_center g_p_10" hover-class="none" :data-item="item"
|
|
v-for="(item, index) in infoList" :key="index">
|
|
<div>
|
|
<div class="g_flex_row_between flex_center"
|
|
:class="item.classify == 1 ? 'g_fs_17 g_mb_10' : 'g_fs_15'">
|
|
<div class="flex-1 u-skeleton-rect">
|
|
<div class="g_fw_600 g_c_3 g_fs_18"
|
|
:style="{ width: loading ? 'calc(100vw - 240px)' : '' }">
|
|
{{ item.storeName || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="g_text_c g_radius_16 g_flex_column_center u-skeleton-rect"
|
|
:class="loading ? 'g_h_20 g_w_20' : 'g_h_32 g_w_32'" style="background-color: #e5f4ff"
|
|
hover-stop-propagation hover-class="thover">
|
|
<a :href="`tel:${item.phone}`" @click.stop="makePhoneCall" style="text-decoration: none"
|
|
hover-class="none">
|
|
<!-- @click.stop="makePhoneCall" -->
|
|
<div class="iconfont icon-a-dianhua1 g_fs_14 g_c_09f" :mark:tel="item.phone"
|
|
hover-class="none"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.classify == 1" hover-stop-propagation hover-class="thover"
|
|
@click.stop="goDetail(item.id)" :data-item="item">
|
|
<view v-if="item.imgList != ''" class="u-skeleton-rect" hover-class="none"
|
|
style="width: 100%; height: 200px; overflow: hidden" hover-stop-propagation="false">
|
|
<image :src="item.imgList[0]" mode="aspectFill"
|
|
style="width: 100%; height: 200px; display: block" class="db toppic"></image>
|
|
</view>
|
|
<!-- <swiper v-if="item.imgList != ''" style="width: 100%; height: 200px; overflow: hidden" :indicator-dots="true" indicator-color="rgba(0,0,0,.3)" :autoplay="true" :interval="5000" :circular="true" class="u-skeleton-rect">
|
|
<swiper-item class="" item-id="" v-for="(item, index) in item.imgList" :key="index">
|
|
<image :src="item" mode="aspectFill" style="width: 100%; height: 200px; display: block" class="db toppic"></image>
|
|
</swiper-item>
|
|
</swiper> -->
|
|
<div class="g_border_c_b g_mb_4" style="padding: 10px 0px">
|
|
<div class="container2 g_flex_row_between flex_center u-skeleton-rect">
|
|
<div class="content1 g_fs_16 g_flex_1" :class="{ expanded: true }">{{ item.desp }}</div>
|
|
<i class="iconfont icon-gengduo11 g_fs_12 g_c_9 g_ml_12" v-if="item.desp"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div hover-class="none">
|
|
<div class="g_flex_row_start flex_end flex_nw">
|
|
<div class="g_flex_1 g_mt_4">
|
|
<div class="g_fs_14 g_c_9 g_flex_row_start_none flex_center u-skeleton-rect"
|
|
style="width: calc(100vw - 150px)">
|
|
<i class="iconfont icon-dizhi1 g_fs_14 g_mr_4" style="line-height: 1"></i>
|
|
<div class="g_ell_1" style="width: calc(100vw - 150px)">
|
|
{{ item.address || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="g_fs_14 g_c_9 g_flex_row_start_none flex_center g_mt_8 u-skeleton-rect">
|
|
<i class="iconfont icon-lianxiren g_fs_14 g_mr_4"
|
|
style="line-height: 1; top: 1px"></i>门店联系人:
|
|
{{ item.userName || "-" }}
|
|
</div>
|
|
<div class="g_flex_row_start flex_nw flex_center g_radius_6 g_mt_8 u-skeleton-rect"
|
|
style="overflow: hidden;" @click.stop="showQRCode(item)"
|
|
hover-stop-propagation hover-class="thover">
|
|
<div class="g_bg_09f g_flex_row_center flex_center g_pl_4 g_pr_4 g_pt_2 g_pb_2">
|
|
<i class="iconfont icon-weixindibulan g_c_f"></i>
|
|
</div>
|
|
<div class="g_p_2 g_pr_6 g_fs_12 g_pl_4 g_c_9"
|
|
style="background-color: #e5f4ff; border-radius: 0 6px 6px 0">添加门店微信</div>
|
|
</div>
|
|
</div>
|
|
<div class="g_radius_20 g_p_6 g_c_9 g_fs_12 g_flex_row_center flex_center u-skeleton-rect"
|
|
:class="loading ? 'g_h_20 g_w_40' : ''" :mark:address="item" @click.stop="goMap"
|
|
style="background-color: #e5f4ff; overflow: hidden" hover-stop-propagation
|
|
hover-class="thover">
|
|
<i class="iconfont icon-daohang1 g_fs_18 g_mr_4 g_c_09f"></i>
|
|
{{ item.distance || "-" }}
|
|
</div>
|
|
<!-- <div class="g_mt_4 g_text_c" hover-class="thover" :hover-stop-propagation="false">
|
|
<image class="dhImg" :mark:address="item" @click.stop="goMap" src="//matripe-cms.oss-cn-beijing.aliyuncs.com/pugongying/daohang.svg"></image>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
|
|
<div v-if="infoList.length <= 0" style="margin-top: 120px">
|
|
<g-empty text="暂无门店"></g-empty>
|
|
<!-- <div class style="text-align: center" hover-class="none" :hover-stop-propagation="false">
|
|
<div class="t-icon t-icon-zanwu" style="width: 80px; height: 80px; margin: 180px auto 20px"></div>
|
|
<div class="g_text_c g_fs_14 c045">暂无门店</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<u-popup v-model="connectModalShow" mode="center" :closeable="true" border-radius="16" width="80%"
|
|
:mask-close-able="true">
|
|
<div class="g_text_c">
|
|
<div class="g_pt_32 g_fw_600 g_pb_24 g_fs_18">联系我们</div>
|
|
<div class="g_pb_4 g_fs_14 g_c_6">门店联系人: {{ currentStore.userName }}</div>
|
|
<div class="g_pb_32 g_fs_14 g_c_6" @click.stop="makePhoneCall" :mark:tel="currentStore.phone">联系电话:
|
|
{{ currentStore.splitPhone }}</div>
|
|
<image class="g_w_184 g_h_184" :src="currentStore.userQrcode" mode="aspectFit|aspectFill|widthFix"
|
|
lazy-load="false" binderror="" bindload="" show-menu-by-longpress> </image>
|
|
<div class="g_mt_16 g_fs_14 g_pb_32 g_fw_600">长按识别二维码</div>
|
|
</div>
|
|
</u-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
var QQMapWX = require("../../utils/qqmap-wx-jssdk.min.js");
|
|
// const commonUtil = require("../../utils/commonUtil");
|
|
// pages/company/company/index.js
|
|
export default {
|
|
onShareAppMessage() {
|
|
return this.G.shareFun();
|
|
},
|
|
data() {
|
|
return {
|
|
// isExpanded: false,
|
|
loading: true,
|
|
storeInfo: {},
|
|
infoList: ["", "", "", ""],
|
|
agencyId: uni.getStorageSync("apply-agencyId"),
|
|
connectModalShow: false,
|
|
qqmapsdk: null, // 地图插件实例
|
|
currentInfo: {}, // 用户当前位置信息
|
|
currentStore: {},
|
|
};
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
let that = this;
|
|
// console.log(JSON.parse(localStorage.getItem("apply-agencyId")));
|
|
this.qqmapsdk = new QQMapWX({
|
|
key: "LHQBZ-MLTEG-BO4QK-QJ2TH-NLGZJ-7GFAS",
|
|
});
|
|
// #ifdef MP-WEIXIN
|
|
that.getLocation().then(() => {
|
|
that.getInfo();
|
|
});
|
|
// #endif
|
|
// #ifdef H5
|
|
that.getInfo();
|
|
// #endif
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() {},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
let that = this;
|
|
if (typeof that.$mp.page.getTabBar === 'function' && that.$mp.page.getTabBar()) {
|
|
that.$mp.page.getTabBar().setData({
|
|
selected: 1,
|
|
isShow:true
|
|
})
|
|
}
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {},
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {},
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh() {},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {},
|
|
computed: {},
|
|
methods: {
|
|
getLocation() {
|
|
let that = this;
|
|
return new Promise((resolve, reject) => {
|
|
uni.authorize({
|
|
// 检测是否授权位置信息
|
|
scope: "scope.userLocation",
|
|
success() {
|
|
console.log("用户成功授权位置信息");
|
|
uni.getLocation({
|
|
type: "wgs84",
|
|
success(res) {
|
|
console.log(res);
|
|
that.currentInfo = {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
};
|
|
console.log("that.currentInfo", that.currentInfo);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
},
|
|
complete() {
|
|
console.log();
|
|
resolve();
|
|
},
|
|
});
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
console.log("用户拒绝授权位置信息，再次提示用户授权");
|
|
uni.showToast({
|
|
title: "请开启定位权限以显示距店铺距离",
|
|
icon: "none",
|
|
});
|
|
resolve();
|
|
// that.showRefuseLocationPermission();
|
|
},
|
|
complete() {
|
|
console.log();
|
|
// resolve();
|
|
},
|
|
});
|
|
});
|
|
},
|
|
toggleExpand() {
|
|
this.isExpanded = !this.isExpanded;
|
|
},
|
|
|
|
goDetail(id) {
|
|
console.log("0000");
|
|
// if (e.currentTarget.dataset.item.id) {
|
|
if (id) {
|
|
uni.navigateTo({
|
|
url: "/root/detail/company?id=" + id,
|
|
});
|
|
}
|
|
|
|
// }
|
|
// uni.navigateTo({
|
|
// url: "/root/detail/company?id=" + e.currentTarget.dataset.item.id,
|
|
// });
|
|
},
|
|
|
|
goMap(e) {
|
|
console.log(e.mark.address);
|
|
let that = this;
|
|
var detail = e.mark.address;
|
|
if (that.currentInfo.longitude) {
|
|
uni.openLocation({
|
|
latitude: Number(detail.lat),
|
|
longitude: Number(detail.lng),
|
|
name: detail.storeName,
|
|
address: detail.address,
|
|
scale: 12,
|
|
});
|
|
} else {
|
|
uni.openSetting({
|
|
// 显示授权页面
|
|
success: (res) => {
|
|
console.log("打开设置成功", res);
|
|
if (res.authSetting["scope.userLocation"]) {
|
|
console.log("成功授权userLocation");
|
|
that.getLocation().then(() => {
|
|
that.getInfo();
|
|
});
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log("打开设置失败", err);
|
|
},
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 获取企业信息
|
|
*/
|
|
getInfo() {
|
|
let that = this;
|
|
return that.G.Post(
|
|
that.api.company_list, {
|
|
pageSize: 100,
|
|
pageNum: 1,
|
|
keys: "",
|
|
// agencyId: uni.getStorageSync("AGENCY_ID"),
|
|
},
|
|
(res) => {
|
|
console.log(res);
|
|
let temp = false;
|
|
this.loading = false;
|
|
res.recordList.forEach((item) => {
|
|
console.log("that.currentInfo", that.currentInfo.longitude);
|
|
if (that.currentInfo.longitude) {
|
|
let dis = that.gpsDistance([that.currentInfo.longitude, that.currentInfo
|
|
.latitude
|
|
], [item.lng, item.lat]);
|
|
if (dis < 1000) {
|
|
item.distance = dis.toFixed(1) + "m";
|
|
} else if (dis > 1 * 1000 * 1000) {
|
|
item.distance = "999+km";
|
|
} else {
|
|
item.distance = (dis / 1000).toFixed(1) + "km";
|
|
}
|
|
item.dis = dis;
|
|
} else {
|
|
item.distance = "-km";
|
|
}
|
|
const content = item.desp || "对方还未介绍自己";
|
|
|
|
item.imgList = item.imgs.split(",");
|
|
|
|
console.log(item.distance);
|
|
});
|
|
// res.recordList.sort((a, b) => {
|
|
// return a.dis - b.dis;
|
|
// });
|
|
console.log("that.infoList", res.recordList);
|
|
that.infoList = res.recordList;
|
|
/* let num = 0;
|
|
let timer = setInterval(() => {
|
|
if (that.currentInfo && num < that.infoList.length) {
|
|
that.getDistance(that.infoList, num);
|
|
num++;
|
|
} else {
|
|
that.$forceUpdate();
|
|
clearInterval(timer);
|
|
}
|
|
}, 500); */
|
|
}
|
|
);
|
|
},
|
|
angle2rad(d) {
|
|
return (d * Math.PI) / 180.0;
|
|
},
|
|
|
|
gpsDistance(p1, p2) {
|
|
var lat1 = this.angle2rad(p1[1]);
|
|
var lat2 = this.angle2rad(p2[1]);
|
|
var a = lat1 - lat2;
|
|
var b = this.angle2rad(p1[0]) - this.angle2rad(p2[0]);
|
|
var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(lat1) * Math.cos(lat2) *
|
|
Math.pow(Math.sin(b / 2), 2)));
|
|
return distance * 6378137;
|
|
},
|
|
// 计算距离
|
|
getDistance(list, ind) {
|
|
let that = this;
|
|
that.G.Post(
|
|
"https://apis.map.qq.com/ws/distance/v1/matrix?mode=driving", {
|
|
key: "LHQBZ-MLTEG-BO4QK-QJ2TH-NLGZJ-7GFAS",
|
|
from: that.currentInfo.latitude + "," + that.currentInfo.longitude,
|
|
to: list[ind].lat + "," + list[ind].lng,
|
|
},
|
|
(res) => {
|
|
console.log("res", res);
|
|
let arr = res.result.rows[0].elements[0];
|
|
console.log(arr);
|
|
let distance = arr.distance;
|
|
console.log(distance);
|
|
|
|
if (distance < 1000) {
|
|
list[ind].distance = distance + "m";
|
|
} else if (distance > 1 * 1000 * 1000) {
|
|
list[ind].distance = "999+km";
|
|
} else {
|
|
list[ind].distance = (distance / 1000).toFixed(2) + "km";
|
|
}
|
|
console.log(" this.infoList", that.infoList);
|
|
}
|
|
);
|
|
},
|
|
/**
|
|
* 拨打电话
|
|
*/
|
|
makePhoneCall(e) {
|
|
var that = this;
|
|
if (!e.mark.tel) {
|
|
uni.showToast({
|
|
title: "暂无联系方式",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
uni.makePhoneCall({
|
|
phoneNumber: e.mark.tel,
|
|
});
|
|
},
|
|
showQRCode(item) {
|
|
console.log(item);
|
|
this.connectModalShow = true;
|
|
this.currentStore = {
|
|
...item,
|
|
splitPhone: this.G.splitPhone(item.phone),
|
|
};
|
|
console.log("this.currentStore", this.currentStore);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.container2 {
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
}
|
|
|
|
.lists {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.content1 {
|
|
max-height: 45px;
|
|
// margin-top: 8px;
|
|
/* 控制初始高度 */
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-in-out;
|
|
white-space: initial;
|
|
width: 100%;
|
|
color: #333;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* 显示两行 */
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.expanded {
|
|
max-height: none;
|
|
/* 展开后取消高度限制 */
|
|
}
|
|
|
|
.expand-button1 {
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
color: #999;
|
|
// cursor: pointer;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.servicebox {
|
|
padding: 10px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.servicebox .serviceinfo image {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
.servicebox .serviceBottom {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.servicebox .serviceBottom>div {
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
padding: 0 10px 0 16px;
|
|
}
|
|
|
|
.icon-dianhua {
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-ysd-bg);
|
|
color: var(--color-hover);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
float: right;
|
|
}
|
|
|
|
.dhImg {
|
|
width: 24px;
|
|
height: 24px;
|
|
// margin-top: 8px;
|
|
}
|
|
|
|
.sub {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style> |