|
|
@@ -5,9 +5,9 @@
|
|
|
<image class="simage" :src="info.image" mode=""></image>
|
|
|
<view class="stop-main">
|
|
|
<view class="stop-title">{{ info.name }}</view>
|
|
|
- <view class="stop-address" v-if="info.jl">
|
|
|
+ <view class="stop-address">
|
|
|
<image class="mrt-image" src="../../static/index/index10.png" mode=""></image>
|
|
|
- <view class="mrt-font">距离{{ info.jl }}KM</view>
|
|
|
+ <view class="mrt-font">距离您{{ info.jl }}KM</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -33,19 +33,30 @@
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
- <view class="shop-dhq">
|
|
|
- <view class="dhq-left">
|
|
|
+ <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 class="dhq-right">
|
|
|
- <view class="right-btn">
|
|
|
- 抢购
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="right-btn">
|
|
|
- 抢购
|
|
|
+ <view class="dhq-right fs0">
|
|
|
+ <view class="right-btn" @click="goBuy(qitem)">
|
|
|
+ 抢购
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</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"
|
|
|
@@ -54,24 +65,32 @@
|
|
|
<image class="scroll-image" :src="item" mode="heightFix"></image>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="" style="height: 100rpx;">
|
|
|
+
|
|
|
</view>
|
|
|
<view class="btn-box flex">
|
|
|
<view class="btn-left" @click="tocall()">联系商家</view>
|
|
|
<view class="btn-right" @click="markertap()">导航到店</view>
|
|
|
</view>
|
|
|
- <uni-popup ref="popup" type="bottom" @click="close">
|
|
|
- <view class="popup_row">
|
|
|
- <view class="rows">
|
|
|
- <view class="rows-item" @click="toGaodeMap">高德地图</view>
|
|
|
- <view class="rows-item" @click="tobaiDuMap">百度地图</view>
|
|
|
- <!-- <view class="rows-item" @click="totengxunMap">腾讯地图</view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
+
|
|
|
</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';
|
|
|
@@ -81,54 +100,54 @@
|
|
|
return {
|
|
|
id: '',
|
|
|
info: '',
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- latitude1: '',
|
|
|
- longitude1: '',
|
|
|
address: ''
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude']),
|
|
|
+ },
|
|
|
onLoad(option) {
|
|
|
- // this.id = option.id;
|
|
|
+ this.id = option.id;
|
|
|
// this.loadData();
|
|
|
+ if (this.latitude) {
|
|
|
+ this.getStoreDetail()
|
|
|
+ } else {
|
|
|
+ this.getaddress()
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.getStoreDetail()
|
|
|
},
|
|
|
methods: {
|
|
|
- markertap(e) {
|
|
|
- this.$refs.popup.open();
|
|
|
+ // 获取门店详情
|
|
|
+ getStoreDetail() {
|
|
|
+ let obj = this
|
|
|
+ getStoreDetail({}, obj.id).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ obj.info = res.data
|
|
|
+ obj.info.jl = obj.getFlatternDistance(obj.latitude, obj.longitude, obj.info.latitude, obj
|
|
|
+ .info.longitude);
|
|
|
+
|
|
|
+ })
|
|
|
},
|
|
|
- loadData() {
|
|
|
- const obj = this;
|
|
|
- // store_details({}, this.id).then(({ data }) => {
|
|
|
- // console.log(data);
|
|
|
- // this.info = data;
|
|
|
- // });
|
|
|
- uni.getLocation({
|
|
|
- type: 'gcj02',
|
|
|
- success: res => {
|
|
|
- console.log('dizhi+++++++++++');
|
|
|
- this.longitude = res.longitude; //经度
|
|
|
- this.latitude = res.latitude; //纬度
|
|
|
- store_details({}, this.id).then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- obj.longitude1 = data.longitude;
|
|
|
- obj.latitude1 = data.latitude;
|
|
|
- obj.address = data.detailed_address;
|
|
|
- data.jl = this.getFlatternDistance(this.latitude, this.longitude, data
|
|
|
- .latitude, data.longitude);
|
|
|
- this.info = data;
|
|
|
- });
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- console.log(err);
|
|
|
- openMap().then(e => {
|
|
|
- this.getaddress();
|
|
|
- });
|
|
|
- }
|
|
|
+ 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;
|
|
|
@@ -149,35 +168,36 @@
|
|
|
phoneNumber: num //仅为示例
|
|
|
});
|
|
|
},
|
|
|
- // 调用高德
|
|
|
- toGaodeMap() {
|
|
|
- let latitude = this.latitude1;
|
|
|
- let longitude = this.longitude1;
|
|
|
- let address = this.address;
|
|
|
- console.log('选择高德', latitude, longitude, address);
|
|
|
- window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
|
|
|
+ goBuy(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/product/product?id=' + item.id
|
|
|
+ })
|
|
|
},
|
|
|
- // 调用腾讯
|
|
|
- totengxunMap() {
|
|
|
- let latitude = this.latitude1;
|
|
|
- let longitude = this.longitude1;
|
|
|
- let address = this.address;
|
|
|
- console.log('选择腾讯', latitude, longitude);
|
|
|
- window.location.href =
|
|
|
- `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
|
|
|
+ getaddress() {
|
|
|
+ console.log('dizhi+++++++++++');
|
|
|
+ let obj = this;
|
|
|
+ // #ifdef H5
|
|
|
+ weixindata().then(wxOjb => {
|
|
|
+ console.log(wxOjb, '获取微信');
|
|
|
+ wxOjb.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ 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
|
|
|
},
|
|
|
- // 调用百度
|
|
|
- tobaiDuMap() {
|
|
|
- let latitude = this.latitude1;
|
|
|
- let longitude = this.longitude1;
|
|
|
- let latitude6 = this.latitude;
|
|
|
- let longitude6 = this.longitude;
|
|
|
- let address = this.address;
|
|
|
- console.log('选择百度', latitude, longitude);
|
|
|
- console.log('获取当前经纬度', latitude6, longitude6);
|
|
|
- window.location.href =
|
|
|
- `http://api.map.baidu.com/direction?origin=latlng:${latitude6},${longitude6}|name:我的位置&destination=${latitude},${longitude}&mode=driving®ion=${address}&output=html&src=webapp.baidu.openAPIdemo`;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -299,12 +319,12 @@
|
|
|
margin-left: 20rpx;
|
|
|
display: inline-block;
|
|
|
height: 240rpx;
|
|
|
- width: 240rpx;
|
|
|
+ // width: 240rpx;
|
|
|
}
|
|
|
|
|
|
.scroll-image {
|
|
|
height: 240rpx;
|
|
|
- width: 240rpx;
|
|
|
+ // width: 240rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -387,9 +407,67 @@
|
|
|
.shop-dhq {
|
|
|
width: 702rpx;
|
|
|
height: 171rpx;
|
|
|
- box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
|
|
|
+ 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>
|
