免费券详情加预定包间按钮、商家详情

pengye
1 parent 72b8e951
Showing 3 changed files with 170 additions and 6 deletions
miniprogram/pack-activity/pack/receiveCoupon.js
miniprogram/pack-activity/pack/receiveCoupon.wxml
miniprogram/pack-activity/pack/receiveCoupon.wxss
--- a/miniprogram/pack-activity/pack/receiveCoupon.js
View file @173319b
+++ b/miniprogram/pack-activity/pack/receiveCoupon.js
View file @173319b
@@ -12,9 +12,11 @@ Page({
         detail: {},
         exp_date: {},
         resultCoupon: '', //0未领取 1已领取
+        seller: {},
+        distance: '',
     },
     myModal: '',
-    myToast :'',
+    myToast:'',
     /**
      * 生命周期函数--监听页面加载
      */
@@ -95,7 +97,7 @@ Page({
     // 领券
     getActivityCouponFun(type){
         let detail = this.data.detail
-        detail.name = this.data.sellername;
+        detail.name = this.data.seller.sellername;
         detail.oid = this.data.opt.oid;
         App.Activity.SetActivityAsReserve({
             aid: this.data.opt.id,
@@ -153,11 +155,60 @@ Page({
     },
     // 获取店铺名称
     getSellerDetail() {
+        let that = this;
         App.Customer.GetSellerDetail({
             sid: this.data.opt.sid
         }).then(res => {
+            let data = res.data;
+            let cateStr = []
+            if (data.cate && data.cate.length > 0) {
+                data.cate.some(cate => {
+                    cateStr.push(cate);
+                    if (cateStr.length > 2) {
+                        return true
+                    }
+                })
+                cateStr = cateStr.join('/')
+            }
+            let latitude = '';
+            let longitude = '';
+            let distance = '';
+            let seller = {
+                cateStr,
+                sellername: data.sellername,
+                is_online_reserve: data.is_online_reserve,
+                seller_image: data.seller_image,
+            }
+            wx.getLocation({
+                type: 'wgs84', // 返回可以用于 wx.openLocation 的经纬度
+                success: function (res) {
+                    latitude = res.latitude; // 纬度
+                    longitude = res.longitude; // 经度
+                    console.log(`当前的纬度: ${latitude}, 当前的经度: ${longitude}`);
+                    if (latitude && longitude) {
+                        distance = that.getDistance(latitude, longitude, data.lat, data.long);
+                        distance = parseInt(distance)
+                        if (distance > 1000) {
+                            distance = (distance / 1000).toFixed(2) + 'km'
+                        } else {
+                            distance += 'm';
+                        }
+                        that.setData({
+                            distance
+                        })
+                    }
+                },
+                fail: function (err) {
+                    console.error('获取位置失败:', err);
+                }
+            });
+            console.log({
+                ...seller
+            });
             this.setData({
-                sellername: res.data.sellername
+                seller: {
+                    ...seller
+                }
             })
         })
     },
@@ -214,7 +265,7 @@ Page({
             path += '&activity_id='+detail.activity_id
         }
         return {
-            title: `送你${this.data.sellername}${detail.price}元代金券，点击查看详情，领取到卡包吧！`,
+            title: `送你${this.data.seller.sellername}${detail.price}元代金券，点击查看详情，领取到卡包吧！`,
             path,
             imageUrl: 'https://nosqn.colorcun.com/share_money.png',
         }
@@ -243,7 +294,22 @@ Page({
         this.getSellerDetail();
         this.getCoupon()
     },
-
+    // 计算2点之间的距离
+    getDistance(lat1, lon1, lat2, lon2) {
+        const R = 6371e3; // 地球半径（米）
+        // 将经纬度转换为弧度
+        const φ1 = lat1 * Math.PI / 180; // 纬度1
+        const φ2 = lat2 * Math.PI / 180; // 纬度2
+        const Δφ = (lat2 - lat1) * Math.PI / 180; // 纬度差
+        const Δλ = (lon2 - lon1) * Math.PI / 180; // 经度差
+        // Haversine 公式
+        const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+            Math.cos(φ1) * Math.cos(φ2) *
+            Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        const distance = R * c; // 计算距离（米）
+        return distance; // 返回距离
+    },
     /**
      * 生命周期函数--监听页面显示
      */
--- a/miniprogram/pack-activity/pack/receiveCoupon.wxml
View file @173319b
+++ b/miniprogram/pack-activity/pack/receiveCoupon.wxml
View file @173319b
@@ -72,6 +72,26 @@
         <view class="info font24r">{{detail.explain}}</view>
     </view>
 </view>
+<view class="seller_data">
+    <image src="{{seller.seller_image}}" mode="aspectFill"/>
+    <view class="seller_box">
+        <view class="infos">
+            <view class="info_name font32r">{{seller.sellername}}</view>
+            <!-- <view class="park font24r">可停车</view> -->
+        </view>
+        <view class="infos">
+            <view class="dish font24r">{{seller.cateStr}}</view>
+            <view class="aa font24r" wx:if="{{seller.average && seller.average>0}}">人均￥{{seller.average}}</view>
+            <text class="font24r">{{distance}}</text>
+        </view>
+        <!-- <view class="bottom_btns">
+            <view class="book font24r">朋友订过</view>
+            <view class="book font24r">我订过</view>
+            <view class="book font24r">我去过</view>
+            <view class="book font24r">我有券</view>
+        </view> -->
+    </view>
+</view>
 <view class="bottom_box_wrap">
     <view class="bottom_box">
         <view class="font24r">温馨提示：</view>
@@ -88,6 +108,9 @@
         <text class="font24r">分享</text>
     </button>
     <view class="btns">
+        <view class="btn1 font36r" wx:if="{{seller.is_online_reserve == '1'}}">
+            <navigator url="/pages/reserve/reserve?id={{opt.sid}}&activeTab=reserve" class="book-item-font second-book-button flex-cc font30r" style="position: relative;">预订包间</navigator>
+        </view>
         <view wx:if="{{resultCoupon == '0' && detail.grant_last>0}}" class="btn font36r" bindtap="submitOrder">领取到卡包</view>
     </view>
 </view>
--- a/miniprogram/pack-activity/pack/receiveCoupon.wxss
View file @173319b
+++ b/miniprogram/pack-activity/pack/receiveCoupon.wxss
View file @173319b
@@ -165,13 +165,25 @@ page {
 .btn {
     color: #fff;
-    padding: 0 60rpx;
+    padding: 0 40rpx;
     height: 80rpx;
     line-height: 80rpx;
     border-radius: 40rpx;
+    font-weight: 600;
+    margin-left: 20rpx;
     background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
 }
+.btn1 {
+    font-weight: 600;
+    padding: 0 40rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    border-radius: 40rpx;
+    color: #fb4e21;
+    border: 2rpx solid #fb4e21;
+}
+
 #myModal .titleModal {
     margin-top: 80%;
     width: 100%;
@@ -233,4 +245,67 @@ page {
     border: 4rpx solid #fff;
     padding: 12rpx  0;
     margin: 80rpx auto 20rpx auto;
+}
+
+.seller_data {
+    display: flex;
+    justify-content: space-between;
+    padding: 16rpx 24rpx;
+    background: #fff;
+    margin: 20rpx;
+    border-radius: 16rpx;
+}
+
+.seller_data image {
+    width: 200rpx;
+    height: 200rpx;
+    border-radius: 10rpx;
+}
+
+.seller_box {
+    margin-left: 16rpx;
+    flex: 1;
+    position: relative;
+}
+
+.infos {
+    display: flex;
+    justify-content: space-between;
+    margin: 8rpx 0;
+    color: #696969;
+}
+
+.park {
+    background: #FFEEDF;
+    color: #B56737;
+    padding: 8rpx 12rpx 0 12rpx;
+    border-radius: 4rpx;
+    height: 30rpx;
+    line-height: 30rpx;
+    flex-shrink: 0;
+}
+
+.info_name {
+    color: #000;
+    overflow: hidden;
+    word-break: break-all;  
+    text-overflow: ellipsis; 
+    display: -webkit-box; 
+    -webkit-box-orient: vertical; 
+    -webkit-line-clamp: 1; 
+    font-weight: 600;
+}
+
+.bottom_btns {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+}
+
+.book {
+    margin-right: 8rpx;
+    padding: 4rpx 12rpx;
+    background: #FFE8D7;
+    color: #fb4e21;
+    border-radius: 4rpx;
 }