持续集成分支

library/project/wuxi/AppMeeting/AppCheckInfo.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="AppCheckInfo">
+    <div class="home-content">
+      <div class="check-info">
+        <div class="item">
+          <div class="title">
+            <img src="./img/time-icon.png" alt="">入住时间
+          </div>
+          <p>2024年4月23日至2024年4月24日</p>
+        </div>
+        <div class="item">
+          <div class="title">
+            <img src="./img/hotel-icon.png" alt="">入住酒店
+          </div>
+          <p>水韵酒店</p>
+        </div>
+        <div class="item">
+          <div class="title">
+            <img src="./img/address-icon.png" alt="">酒店地址
+          </div>
+          <p>春申大道421号</p>
+        </div>
+      </div>
+      <AiMap class="map-info" :map.sync="amap" :lib.sync="mapLib" />
+      <div class="bottom-bg"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'CheckInfo',
+  appName: '入住信息',
+  data() {
+    return {
+      amap: null,
+      mapLib: null,
+      lat: '31.39439',
+      lng: '109.559364',
+      address: '水韵酒店',
+    }
+  },
+
+  mounted() {
+    document.title = '入住信息'
+    this.initMap()
+  },
+
+  methods: {
+    initMap() {
+      if(this.mapLib){
+        let pos = new this.mapLib.LngLat(this.lng, this.lat)
+        var marker = new this.mapLib.Marker({
+          position: pos,
+          anchor: 'bottom-center',
+          content: `<div class="marker">${this.address}</div>`,
+        })
+        this.amap.on('click', () => {
+          this.openMap()
+        })
+        this.amap.add(marker)
+        this.amap.setFitView()
+
+      }else {
+        setTimeout(() => {
+          this.initMap()
+        },3000)
+      }      
+      
+    },
+    openMap() {
+      var userAgent = navigator.userAgent.toLowerCase();
+        if (userAgent.indexOf('micromessenger') !== -1) {
+          this.$confirm('请点击右上角[...],在浏览器打开。', {
+            showCancel: false,
+            confirmText: '关闭'
+          })
+        } else {
+          window.location.href = `amapuri://route/plan/?sourceApplication=amap&did=&dlat=${this.lat}&dlon=${this.lng}&dname=巫溪县水韵酒店&dev=0&t=0`
+        }
+
+    }
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppCheckInfo {
+  height: 100%;
+  width: 100%;
+  background-image: url("./img/detail-bg.png");
+  background-size: 100% 100%;
+  padding: 32px 0 128px 0;
+  overflow: auto;
+  box-sizing: border-box;
+  .home-content {
+    height: 100%;
+    width: calc(100% - 64px);
+    margin: 0 32px;
+    background: #FFF;
+    border-radius: 24px;
+    .check-info {
+      padding: 92px 36px 40px 36px;
+      .item {
+        margin-bottom: 40px;
+        .title {
+          line-height: 44px;
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 32px;
+          color: #222;
+          margin-bottom: 12px;
+          img {
+            display: inline-block;
+            width: 36px;
+            height: 36px;
+            vertical-align: middle;
+            margin-right: 12px;
+          }
+        }
+        p {
+          line-height: 50px;
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 36px;
+          color: #999;
+          padding-left: 48px;
+        }
+      }
+    }
+    .map-info {
+      padding: 0 32px;
+      width: calc(100% - 64px);
+      height: 510px;
+    }
+    .bottom-bg {
+      height: calc(100% - 700px);
+      width: 100%;
+      background-image: url("./img/bottom-bg.png");
+      background-size: 100% 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+    }
+  }
+
+  ::v-deep .marker {
+    border-radius: 52px;
+    background: #F46159;
+    color: #fff;
+    font-size: 22px;
+    padding: 4px 16px;
+    white-space: nowrap;
+    position: relative;
+
+    &:before {
+      position: absolute;
+      left: calc(50% - 30px);
+      bottom: -34px;
+      z-index: -1;
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background-color: #F46159;
+      animation: mapWarn 1s ease-out 0s infinite;
+      content: " ";
+    }
+
+    &:after {
+      position: absolute;
+      display: block;
+      content: " ";
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 8px solid transparent;
+      border-bottom: none;
+      border-top-color: #F46159;
+      height: 0;
+      width: 0;
+    }
+  }
+ 
+}
+</style>