|
|
@@ -0,0 +1,522 @@
|
|
|
+<template>
|
|
|
+ <view class="center">
|
|
|
+ <view class="store-info flex">
|
|
|
+ <view class="store-top flex">
|
|
|
+ <image class="simage" :src="info.image" mode=""></image>
|
|
|
+ <view class="stop-main">
|
|
|
+ <view class="stop-title">{{ info.name }}</view>
|
|
|
+ <view class="stop-address">
|
|
|
+ <image class="mrt-image" src="../../static/index/index10.png" mode=""></image>
|
|
|
+ <view class="mrt-font">距离您{{ info.jl.toFixed(2)}}KM</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="store-item">
|
|
|
+ <image class="store-image1" src="../../static/img/store2.png" mode=""></image>
|
|
|
+ <view class="store-font">营业时间:{{ info.day_time }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="store-item">
|
|
|
+ <image class="store-image2" src="../../static/img/store3.png" mode=""></image>
|
|
|
+ <view class="store-font">预约电话:{{ info.phone }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="store-item">
|
|
|
+ <image class="store-image3" src="../../static/index/index10.png" mode=""></image>
|
|
|
+ <view class="store-font">门店地址:{{ info.detailed_address }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="store-main" v-if="info.images != null">
|
|
|
+ <view class="smain-title">门头照片</view>
|
|
|
+ <scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true"
|
|
|
+ scroll-left="10px">
|
|
|
+ <view class="scroll-item" v-for="(item, index) in info.images" :key="index">
|
|
|
+ <image class="scroll-image" :src="item" mode="heightFix" @click="openImg(info.images,item)"></image>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="" style="padding: 20rpx 20rpx 1rpx 20rpx;background-color: #fff;margin-top: 20rpx;">
|
|
|
+ <view class="shop-dhq flex" v-for="qitem in info.coupon">
|
|
|
+ <view class="dhq-left flex f-d-c f-j-c fg1 f-ai-s">
|
|
|
+ <view class="dhq-name">
|
|
|
+ {{qitem.store_name}}
|
|
|
+ </view>
|
|
|
+ <view class="dhq-price flex">
|
|
|
+ <view class="j-price">
|
|
|
+ {{qitem.price}}
|
|
|
+ </view>
|
|
|
+ <view class="j-zk">
|
|
|
+ {{(((qitem.price*10)/(qitem.ot_price*1)).toFixed(1))}}折
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dhq-right fs0">
|
|
|
+ <view class="right-btn" @click="goBuy(qitem)">
|
|
|
+ 抢购
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="store-main" v-if="info.slider_image != null">
|
|
|
+ <view class="smain-title">店内照片</view>
|
|
|
+ <scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true"
|
|
|
+ scroll-left="10px">
|
|
|
+ <view class="scroll-item" v-for="(item, index) in info.slider_image" :key="index">
|
|
|
+ <image class="scroll-image" :src="item" mode="heightFix" @click="openImg(info.slider_image,item)">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="" style="height: 100rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="btn-box flex">
|
|
|
+ <view class="btn-left" @click="tocall()">联系商家</view>
|
|
|
+
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <view class="btn-right" @click="toGaodeMap()">导航到店</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <view class="btn-right" @click="dh()">导航到店</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef APP -->
|
|
|
+ <!-- <view class="btn-right" @click="getLocation()">导航到店</view> -->
|
|
|
+ <view class="btn-right" @click="toGaodeMap()">导航到店</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // #ifdef H5
|
|
|
+ import {
|
|
|
+ weixindata,
|
|
|
+ shareLoad
|
|
|
+ } from '@/utils/wxAuthorized';
|
|
|
+ // #endif
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ getStoreDetail
|
|
|
+ } from '@/api/shop.js'
|
|
|
+ import {
|
|
|
+ store_details
|
|
|
+ } from '@/api/index.js';
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ info: '',
|
|
|
+ address: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude']),
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id;
|
|
|
+ // this.loadData();
|
|
|
+ if (this.latitude) {
|
|
|
+ this.getStoreDetail()
|
|
|
+ } else {
|
|
|
+ this.getaddress()
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.getStoreDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取门店详情
|
|
|
+ getStoreDetail() {
|
|
|
+ let obj = this
|
|
|
+ getStoreDetail({}, obj.id).then(res => {
|
|
|
+ console.log(res,'e1')
|
|
|
+ obj.info = res.data
|
|
|
+ obj.info.jl = obj.getFlatternDistance(obj.latitude, obj.longitude, obj.info.latitude, obj
|
|
|
+ .info.longitude);
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ markertap(e) {
|
|
|
+ let obj = this
|
|
|
+ // #ifdef H5
|
|
|
+ weixindata().then(wxOjb => {
|
|
|
+ console.log(wxOjb, '获取微信');
|
|
|
+ wxOjb.openLocation({
|
|
|
+ latitude: obj.info.latitude, // 纬度,浮点数,范围为90 ~ -90
|
|
|
+ longitude: obj.info.longitude, // 经度,浮点数,范围为180 ~ -180。
|
|
|
+ name: obj.info.name, // 位置名
|
|
|
+ address: obj.info.detailed_address, // 地址详情说明
|
|
|
+ scale: 28, // 地图缩放级别,整型值,范围从1~28。默认为最大
|
|
|
+ infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ //根据经纬度计算距离
|
|
|
+ getFlatternDistance(lat1, lng1, lat2, lng2) {
|
|
|
+ console.log(lat1, lng1, lat2, lng2)
|
|
|
+ let radLat1 = (lat1 * Math.PI) / 180.0;
|
|
|
+ let radLat2 = (lat2 * Math.PI) / 180.0;
|
|
|
+ let a = radLat1 - radLat2;
|
|
|
+ let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
|
|
|
+ let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
|
|
|
+ .pow(Math.sin(b / 2), 2)));
|
|
|
+ s = s * 6378.137;
|
|
|
+ s = Math.round(s * 10000) / 10000;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ scroll(e) {
|
|
|
+ console.log(e, '123456');
|
|
|
+ },
|
|
|
+ tocall() {
|
|
|
+ let num = this.info.phone;
|
|
|
+ console.log(num,'num');
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: num //仅为示例
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goBuy(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/product/product?id=' + item.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getaddress() {
|
|
|
+ console.log('dizhi+++++++++++');
|
|
|
+ let obj = this;
|
|
|
+ // #ifdef H5
|
|
|
+ weixindata().then(wxOjb => {
|
|
|
+ console.log(wxOjb, '获取微信');
|
|
|
+ wxOjb.getLocation({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: res => {
|
|
|
+ console.log(res, 123456);
|
|
|
+ obj.setLat(res.latitude);
|
|
|
+ obj.setLon(res.longitude);
|
|
|
+ obj.getStoreDetail()
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ console.log(err, 'shi+++++++++++++++');
|
|
|
+ openMap().then(e => {
|
|
|
+ obj.getaddress();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ //
|
|
|
+ openImg(list, item) {
|
|
|
+ uni.previewImage({
|
|
|
+ current: item,
|
|
|
+ urls: list
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 调用高德
|
|
|
+ toGaodeMap() {
|
|
|
+ let obj = this
|
|
|
+ var urlStr = encodeURI( `https://uri.amap.com/marker?position=${obj.info.longitude},${obj.info.latitude}&name=${obj.info.name}`)
|
|
|
+ plus.runtime.openURL(urlStr);
|
|
|
+
|
|
|
+ },
|
|
|
+ getLocation(item) {
|
|
|
+ let obj = this
|
|
|
+ console.log(obj.info.latitude,obj.info.longitude,'定位');
|
|
|
+ uni.chooseLocation({
|
|
|
+ latitude:obj.info.latitude,
|
|
|
+ longitude:obj.info.longitude,
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res,'当前地位置');
|
|
|
+ console.log('位置名称:' + res.name);
|
|
|
+ console.log('详细地址:' + res.address);
|
|
|
+ console.log('纬度:' + res.latitude);
|
|
|
+ console.log('经度:' + res.longitude);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 导航
|
|
|
+ dh() {
|
|
|
+ let obj = this
|
|
|
+ wx.openLocation({
|
|
|
+ latitude: obj.info.latitude * 1,
|
|
|
+ longitude: obj.info.longitude * 1,
|
|
|
+ name: obj.info.name,
|
|
|
+ address: obj.info.detailed_address
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .center,
|
|
|
+ page {
|
|
|
+ background: #f8f8f8;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-info {
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ .store-top {
|
|
|
+ padding: 40rpx 20rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .simage {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ background: #f44939;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stop-main {
|
|
|
+ height: 130rpx;
|
|
|
+ padding: 6rpx 0;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .stop-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stop-address {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .mrt-image {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mrt-font {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-item {
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx 30rpx 30rpx 44rpx;
|
|
|
+
|
|
|
+ .store-image1 {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-image2 {
|
|
|
+ margin: 0 1rpx;
|
|
|
+ width: 34rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-image3 {
|
|
|
+ margin: 0 7rpx;
|
|
|
+ width: 22rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-font {
|
|
|
+ margin-left: 22rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #2d2d2d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-main {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 30rpx 42rpx 40rpx;
|
|
|
+
|
|
|
+ .smain-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #464646;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-box {
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ height: 240rpx;
|
|
|
+
|
|
|
+ .scroll-item:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-item {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: inline-block;
|
|
|
+ height: 240rpx;
|
|
|
+ // width: 240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-image {
|
|
|
+ height: 240rpx;
|
|
|
+ // width: 240rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ box-shadow: 0rpx 0rpx 20rpx 0px rgba(50, 50, 52, 0.06);
|
|
|
+ padding: 22rpx 68rpx;
|
|
|
+
|
|
|
+ .btn-left {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: linear-gradient(180deg, #ffa30b, #ffd158);
|
|
|
+ box-shadow: 0px 3rpx 13rpx 3rpx rgba(255, 164, 13, 0.48);
|
|
|
+ border-radius: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-right {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: linear-gradient(180deg, #ff6223, #ffab60);
|
|
|
+ box-shadow: 0px 3rpx 13rpx 3rpx rgba(255, 164, 13, 0.48);
|
|
|
+ border-radius: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup_row {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .rows {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .rows-item {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #303133;
|
|
|
+ // border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .row-1 {
|
|
|
+ // margin: auto;
|
|
|
+ // .first_aid {
|
|
|
+ // width: 300rpx;
|
|
|
+ // height: 300rpx;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .row-2 {
|
|
|
+ // font-size: 38rpx;
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-dhq {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 171rpx;
|
|
|
+ box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.15);
|
|
|
+ margin: auto;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 48rpx 0 26rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .dhq-left {
|
|
|
+
|
|
|
+
|
|
|
+ .dhq-name {
|
|
|
+ font-size: 33rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dhq-price {
|
|
|
+ padding-top: 20rpx;
|
|
|
+
|
|
|
+ .j-price {
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4C4C;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '¥';
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .j-zk {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border: 1px solid #FF4C4C;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF4C4C;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .dhq-right {
|
|
|
+
|
|
|
+ .right-btn {
|
|
|
+ width: 105rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ background: linear-gradient(143.2747deg, #FF6A00, #EE0979);
|
|
|
+ border: 1rpx solid #FF4C4C;
|
|
|
+ border-radius: 27rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|