<template>
  <div class="link df fdc">
    <div class="link__header df ai-c jc-c">
      <span class="f36 fw">范肆趣动鞋</span>
    </div>
    <div class="link__body flex-1 pl16 pr16 pb16">
      <div class="block df fdc ai-c jc-c pt20 pb20 pl16 pr16">
        <img class="logo" src="@/assets/link/logo@2x.png" />
        <span class="mt12 fw">趣动APP</span>
        <div class="btn pt12 pb12 pl20 pr20 mt16" @click="openDownload">
          <span class="f14" style="color: #ffffff;">前往下载</span
          ><van-icon name="arrow" color="#ffffff" size=".28rem" />
        </div>
      </div>
      <div
        class="block df ai-c jc-sb pt12 pb12 pl16 pr16 mt16"
        @click="openServiceChat"
      >
        <div>
          <img class="icon" src="@/assets/link/wechat@2x.png" />
          <span class="fw ml12">趣动客服</span>
        </div>
        <van-icon name="arrow" color="#333333" size=".36rem" />
      </div>
      <div
        class="block df ai-c jc-sb pt12 pb12 pl16 pr16 mt16"
        @click="toGuide"
      >
        <div>
          <img class="icon" src="@/assets/link/guide@2x.png" />
          <span class="fw ml12">新手指引</span>
        </div>
        <van-icon name="arrow" color="#333333" size=".36rem" />
      </div>
      <!-- <div
        class="block df ai-c jc-sb pt12 pb12 pl16 pr16 mt16"
        @click="toGuide"
      >
        <div>
          <img class="icon" src="@/assets/link/store@2x.png" />
          <span class="fw ml12">范肆商城</span>
        </div>
        <van-icon name="arrow" color="#333333" size=".36rem" />
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const ran = navigator.userAgent;
    const isAndroid = ran.indexOf("Android") > -1 || ran.indexOf("Linux") > -1;
    const isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    const $_toGuide = () => {
      router.push("/guide");
    };
    const openServiceChat = () => {
      window.open(
        `https://work.weixin.qq.com/kfid/kfc7b89a5eb0af55040?enc_scene=ENCBcQ6kEH9MWUD9PRpQp9PS5RGQgD6oyXd9naB5LgScx5D&scene_param=${JSON.stringify(
          { from: 2 }
        )}`
      );
    };
    const openDownload = () => {
      window.open("https://a.app.qq.com/o/simple.jsp?pkgname=xie.hiyd.com");
    };
    return { toGuide: $_toGuide, openServiceChat, openDownload };
  }
});
</script>

<style lang="scss" scoped>
.link {
  background-color: #f1f1f1;
  min-height: 100vh;

  &__header {
    height: 2rem * 2;
  }
  &__body {
    .btn {
      background-color: #333;
      border-radius: 0.04rem * 2;
    }
    .block {
      background-color: white;
      border-radius: 0.08rem * 2;
    }
    .logo {
      width: 0.8rem * 2;
      height: 0.81rem * 2;
    }
    .icon {
      width: 0.45rem * 2;
      height: 0.45rem * 2;
    }
  }
}
</style>
