wanmeiyizhan/pages/clickRescue/index.vue

<template>
  <view class="main">
    <!-- <view class="topMessage">安全提示：车靠边，人撤离，即报警</view> -->
    <view class="content" :style="{height: (screenWidth*953) / 569 + 'px' }">
      <image
        class="img"
        src="https://wmr.anhui-expressway.net/extra/driver_static/assets/images/rescue-tip-new.png"
      />
      <!-- <view class="itemBox">
        <view class="itemTop">
          <view class="itemLeft">1</view>
          <view class="itemRight">
            <view class="title">车靠边</view>
            <view class="text">在确保安全的前提下，将车辆靠边停靠</view>
          </view>
        </view>
        <view class="itemBottom"></view>
      </view>

      <view class="itemBox">
        <view class="itemTop">
          <view class="itemLeft">2</view>
          <view class="itemRight">
            <view class="title">设标志</view>
            <view class="text">打开双闪，并在车后150米以外设置警告标志</view>
          </view>
        </view>
        <view class="itemBottom"></view>
      </view>

      <view class="itemBox">
        <view class="itemTop">
          <view class="itemLeft">3</view>
          <view class="itemRight">
            <view class="title">人撤离</view>
            <view class="text">车上人员转移到安全地带，并拨打救援电话</view>
          </view>
        </view>
        <view class="itemBottom"></view>
      </view> -->
    </view>

    <view class="bottomBtn">
      <view class="btn" @click="handleGoWxMin">
        <img class="icon" src="/static/images/home/trailer.svg" />
        <text class="btnText">一键救援</text>
      </view>
      <view class="btn right" @click="handleCallPhone">
        <img class="icon" src="/static/images/home/rescuePhone.svg" />
        <text class="btnText">救援电话</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginType: "",
      screenWidth: 0,
    };
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    console.log("systemInfo", systemInfo);
    this.screenWidth = systemInfo.screenWidth
    let type = uni.getStorageSync("loginType");
    console.log("type", type);
    this.loginType = type;
  },
  methods: {
    handleCallPhone() {
      uni.makePhoneCall({
        phoneNumber: "96566",
      });
    },
    handleGoWxMin() {
      if (this.loginType === "min") {
        console.log("qwq");

        uni.navigateToMiniProgram({
          // appId: "wx18badcd70575b5f8",  老的
          appId: "wx66d2a32a9ead6251",
          envVersion: "release",
        });
      } else {
        // 52954de3b2113c083277c927595270be
        this.handleAppTomin(
          "wx66d2a32a9ead6251",
          "d3b483453c26f8d2fc2eb00e35a4785a",
          "/pages/driverIndex/driverIndex",
          "即将打开“皖美一键救援”小程序"
        );
      }
    },
    // app跳转小程序的方法
    handleAppTomin(appid, secret, indexUrl, contentText) {
      uni.showModal({
        title: "提示",
        content: contentText || "是否打开微信？",
        success: (res) => {
          if (res.confirm) {
            uni.request({
              method: "GET",
              url: `https://api.weixin.qq.com/cgi-bin/token?appid=${appid}&secret=${secret}&grant_type=client_credential`,
              success: (res1) => {
                console.log("res1", res1);
                uni.request({
                  method: "POST",
                  url:
                    "https://api.weixin.qq.com/wxa/generatescheme?access_token=" +
                    res1.data.access_token,
                  data: {
                    // path跳转到的小程序目标页面，query跳转需要携带参数，在目标页面onload里面接收options里面，其他参数固定，获取看文档了解
                    jump_wxa: {
                      path: indexUrl || "pages/index/index",
                      env_version: "release", // 正式版为"release"，体验版为"trial"，开发版为"develop"
                    },
                    is_expire: true,
                    expire_type: 1,
                    expire_interval: 1,
                    // env_version: "trial",
                  },
                  success: (res2) => {
                    console.log("res2", res2);
                    plus.runtime.openURL(res2.data.openlink);
                  },
                });
              },
            });
          }
        },
      });
    },
  },
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #ecf0f4;
  box-sizing: border-box;
  //   padding: 32px;

  .topMessage {
    width: 100vw;
    height: 80rpx;
    background: linear-gradient(#feeeed 0%, #fdfafa 100%);
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0 48rpx;
    color: #e75554;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: center;
  }
  .content {
    width: 100vw;
    // height: 100%;
    // height: calc( (569 / 953) * 100vw );

    .img {
      width: 100%;
      height: 100%;
    }
    // height: calc(100vh - 160rpx - 64rpx - 80rpx);
    box-sizing: border-box;
    // margin-top: 24px;
    .itemBox {
      width: 100%;
      margin-bottom: 32rpx;
      .itemTop {
        width: 100%;
        display: flex;
        align-items: flex-start;
        .itemLeft {
          width: 40rpx;
          height: 40rpx;
          color: #fff;
          text-align: center;
          line-height: 40rpx;
          border-radius: 50%;
          background: #0275f4;
          margin-right: 16rpx;
          margin-top: 8rpx;
        }
        .itemRight {
          width: calc(100% - 56rpx);
          .title {
            font-weight: 600;
          }
          .text {
          }
        }
      }
      .itemBottom {
        width: 100%;
        height: 300rpx;
      }
    }
  }

  .bottomBtn {
    width: 100vw;
    box-sizing: border-box;
    padding: 0 16px;
    position: fixed;
    bottom: 80rpx;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      width: calc((100% - 8px) / 2);
      height: 80rpx;
      background: #00c2a6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16rpx;
      .icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }
      .btnText {
        font-size: 16px;
        color: #fff;
      }
    }
    .right {
      background: #ff8827;
    }
  }
}
</style>