250108

src/package/booking/index.vue

@@ -32,32 +32,32 @@
 
     <uni-card title="场地介绍" :is-shadow="false" :border="false" :padding="0">
       <view class="web-text-heading booking-content">
-        <view v-html="merchant.content"></view>
+        <uv-parse :content="merchant.info"></uv-parse>
       </view>
     </uni-card>
 
-    <view class="xieyi web-cell web-text-secondary web-cell-align-top">
-      <view class="web-cell web-cell-content web-cell-align-top">
-        <uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
-        <uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
-        <view class="text" @click="onDisabled">
-          <text>我已阅读并同意</text>
-          <text class="link"
-                @click.stop="navTo('/package/article/detail?articleId=503')">《订票协议》
-          </text>
-        </view>
-      </view>
-    </view>
+    <!--    <view class="xieyi web-cell web-text-secondary web-cell-align-top">-->
+    <!--      <view class="web-cell web-cell-content web-cell-align-top">-->
+    <!--        <uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>-->
+    <!--        <uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>-->
+    <!--        <view class="text" @click="onDisabled">-->
+    <!--          <text>我已阅读并同意</text>-->
+    <!--          <text class="link"-->
+    <!--                @click.stop="navTo('/package/article/detail?articleId=503')">《订票协议》-->
+    <!--          </text>-->
+    <!--        </view>-->
+    <!--      </view>-->
+    <!--    </view>-->
     <view class="save-btn">
       <uv-button
         :customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
-        text="预定场地" @click="save"></uv-button>
+        text="预定场地" @click="openProtocol"></uv-button>
     </view>
 
   </view>
   <uv-gap height="50"></uv-gap>
 
-  <view class="booking-tel" @click="openBookingTel">活动订场</view>
+  <view class="booking-tel" @click="openBookingTel">场地咨询</view>
   <!-- 活动订场弹窗 -->
   <uni-popup ref="popup" type="center">
     <view class="popup-booking-tel">
@@ -82,6 +82,19 @@
   </uni-popup>
   <!-- 登录组件 -->
   <ws-login ref="login" :logo="logo" @done="reload"/>
+  <uv-popup ref="protocolPopup" mode="center" round="15" :closeOnClickOverlay="true" :safe-area-inset-bottom="false">
+    <view v-if="protocol">
+      <view class="p-30" style="width: 80vw; max-height: 80vh; overflow-y: scroll">
+        <uv-parse :content="protocol.content"></uv-parse>
+      </view>
+      <view class="p-30">
+        <uv-button type="primary" shape="circle" :disabled="countDown > 0" @click="save">{{
+            countDown > 0 ? `${countDown}秒后继续` : '已知晓并同意订票协议'
+          }}
+        </uv-button>
+      </view>
+    </view>
+  </uv-popup>
 </template>
 
 <script>
@@ -92,6 +105,8 @@ import {getThinkSite, getThinkSiteWithDistance} from "@/api/think/thinkSite";
 import {getLocationAction} from "@/utils";
 import request from "@/utils/request";
 import X2js from 'x2js';
+import {getArticle, pageArticle} from "@/api/cms/article";
+import coordtransform from "coordtransform";
 
 const carStore = useCarStore();
 
@@ -107,6 +122,9 @@ export default {
       disabled: true,
       lat: null,
       lng: null,
+      protocol: null,
+      countDown: 0,
+      timer: null,
     }
   },
   async onLoad(option) {
@@ -115,6 +133,7 @@ export default {
     const {longitude, latitude} = await getLocationAction()
     this.lat = latitude
     this.lng = longitude
+    await this.getProtocol()
     await this.reload();
   },
   onShow() {
@@ -124,6 +143,32 @@ export default {
     }
   },
   methods: {
+    async getProtocol() {
+      const res = await getArticle(503)
+      console.log(res)
+      if (res) {
+        this.protocol = res
+      }
+    },
+    openProtocol() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+      this.countDown = 5
+      this.setTimer()
+      this.$refs.protocolPopup.open()
+    },
+    setTimer() {
+      this.timer = setInterval(() => {
+        this.countDown--
+        if (this.countDown <= 0) {
+          clearInterval(this.timer)
+          this.timer = null
+          this.countDown = 0
+        }
+      }, 1000)
+    },
     async reload() {
       const app = this
 
@@ -175,9 +220,12 @@ export default {
       })
     },
     mapTo(item) {
+      const latitude = item.lat;
+      const longitude = item.lng;
+      const [lng, lat] = coordtransform.wgs84togcj02(longitude, latitude)
       uni.openLocation({
-        latitude: parseFloat(item.lat),
-        longitude: parseFloat(item.lng),
+        latitude: lat,
+        longitude: lng,
         success: function () {
           console.log('success');
         }
@@ -202,9 +250,10 @@ export default {
           console.log('返回可以用于uni.openLocation的经纬度: ', res);
           const latitude = this.merchant.lat;
           const longitude = this.merchant.lng;
+          const [lng, lat] = coordtransform.wgs84togcj02(longitude, latitude)
           uni.openLocation({
-            latitude: latitude,
-            longitude: longitude,
+            latitude: lat,
+            longitude: lng,
             success: function () {
               console.log('success');
             }
@@ -213,18 +262,26 @@ export default {
       });
     },
     save() {
-      if (!this.disabled) {
-        uni.showToast({
-          title: '请先阅读并同意订票协议',
-          icon: 'none'
-        })
-        return false
-      }
+      // if (!this.disabled) {
+      //   uni.showToast({
+      //     title: '请先阅读并同意订票协议',
+      //     icon: 'none'
+      //   })
+      //   return false
+      // }
+      if (this.timer) clearTimeout(this.timer)
+      this.$refs.protocolPopup.close()
       uni.navigateTo({
         url: '/package/booking/checkout?id=' + this.id
       })
     }
-  }
+  },
+  onHide() {
+    if (this.timer) clearTimeout(this.timer)
+  },
+  onUnload() {
+    if (this.timer) clearTimeout(this.timer)
+  },
 }
 </script>
 <style>