[本时生活小程序-线上备份]

pages/storeDetails/storeDetails.js

@@ -0,0 +1,62 @@
+// pages/storeDetails/storeDetails.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        storeinfo : '', //门店详情
+        distance  : 0,
+        longitude : 0,
+        latitude  : 0
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad (options) {
+
+        wx.$api.user.storesShow(options.store_id, options.user_lng, options.user_lat).then(res=>{
+            let distance = res.data.distance
+
+            if(distance > 1000){
+                    distance = (distance / 1000) + "km"
+            }else{
+                distance = distance + "m"
+            }
+                
+            this.setData({
+                storeinfo : res.data,
+                distance  : distance
+            })
+        })
+    },
+
+    /**
+     * 拨打电话
+     */
+    tel(e) {
+        let tel = this.data.storeinfo.mobile
+        wx.showActionSheet({
+            itemList    : ['呼叫商家'],
+            success     : res =>{
+                if(res.tapIndex==0){
+                    wx.makePhoneCall({
+                        phoneNumber: tel
+                    })
+                }
+            }
+        })
+    },
+
+    /**
+     * 导航
+     */
+    siteMap(){
+        wx.openLocation({
+            latitude    : parseFloat(this.data.storeinfo.latitude),
+            longitude   : parseFloat(this.data.storeinfo.longitude),
+            address     : this.data.storeinfo.address
+        })
+    }
+})

pages/storeDetails/storeDetails.json

@@ -0,0 +1,4 @@
+{
+	"usingComponents": {},
+	"navigationBarTitleText": "门店详情"
+}

pages/storeDetails/storeDetails.wxml

@@ -0,0 +1,37 @@
+<!-- 门店详情 -->
+<view class="detailsImg">
+	<image src="{{storeinfo.cover}}" mode="aspectFill"></image>
+</view>
+<view class="detailsCont">
+	<view class="detailsName">
+		{{storeinfo.title}}
+	</view>
+	<view class="detailsLabel">
+		<view class="detailsLabel-left">
+			<image src="/static/icon/site_icon.png"></image>
+			<view class="detailsLabel-name">
+				<text>{{storeinfo.address}}</text>
+				距您 {{distance}}
+			</view>
+		</view>
+		<image class="detailsLabel-tel" src="/static/icon/tel.png" bindtap="tel"></image>
+	</view>
+	<view class="detailsLabel">
+		<view class="detailsLabel-left">
+			<image src="/static/icon/time_icon.png"></image>
+			<view class="detailsLabel-name">
+				<text>营业时间</text>
+				<block wx:if="{{storeinfo.open_time != null}}">{{storeinfo.open_time}}</block>
+				<block wx:else>00：00</block>
+			</view>
+		</view>
+		<!-- <image class="detailsLabel-add" src="/static/icon/arrow_left.png"></image> -->
+	</view>
+</view>
+
+<!-- 按钮 -->
+<view class="detailsBtn">
+	<view class="detailsBtn-cont" bindtap="siteMap">
+		去导航
+	</view>
+</view>

pages/storeDetails/storeDetails.wxss

@@ -0,0 +1,102 @@
+/* 门店详情 */
+.detailsImg {
+    position: relative;
+    width: 100%;
+    padding-top: 60%;
+}
+
+.detailsImg image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.detailsCont {
+    background: #fff;
+}
+
+.detailsName {
+    font-size: 34rpx;
+    padding: 30rpx;
+    font-weight: 600;
+    box-sizing: border-box;
+}
+
+.detailsLabel {
+    display: flex;
+    padding: 30rpx;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.detailsLabel::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    background: #e7e7e7;
+    width: 100%;
+    height: 2rpx;
+}
+
+.detailsLabel-left {
+    width: calc(100%- 40rpx);
+    display: flex;
+    flex: 1;
+    color: #5e5e5e;
+}
+
+.detailsLabel-left image {
+    width: 40rpx;
+    height: 40rpx;
+    margin: 20rpx 20rpx 0 0;
+}
+
+.detailsLabel-tel {
+    width: 60rpx;
+    height: 60rpx;
+    margin-top: 14rpx;
+}
+
+.detailsLabel-name {
+    font-size: 26rpx;
+    width: calc(100% - 110rpx);
+    margin-right: 10rpx;
+}
+
+.detailsLabel-name text {
+    font-weight: 600;
+    font-size: 30rpx;
+    display: block;
+    margin-bottom: 10rpx;
+}
+
+.detailsLabel-add {
+    width: 34rpx;
+    height: 34rpx;
+    margin-top: 24rpx;
+}
+
+.detailsBtn {
+    background: #fff;
+    width: 100%;
+    height: 120rpx;
+    text-align: center;
+    left: 0;
+    bottom: 0;
+    position: fixed;
+    padding: 20rpx;
+    box-sizing: border-box;
+}
+
+.detailsBtn-cont {
+    width: 100%;
+    background: #ef8e41;
+    color: #fff;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    border-radius: 50rpx;
+}