|
|
@@ -1,15 +1,328 @@
|
|
|
<template>
|
|
|
- <div class="share-page">share-sport-link</div>
|
|
|
+ <div :class="[currentBg, 'share-page ignore-share-page']">
|
|
|
+ <!-- header -->
|
|
|
+ <div class="share-head">
|
|
|
+ <div class="avatar-container">
|
|
|
+ <img :src="user.avatar" class="avatar" v-if="user.avatar" />
|
|
|
+ <div v-else class="avatar-empty"></div>
|
|
|
+ </div>
|
|
|
+ <div class="user-name">
|
|
|
+ {{ user.name }}
|
|
|
+ </div>
|
|
|
+ <div class="text-style">
|
|
|
+ 今天使用智能鞋运动了
|
|
|
+ </div>
|
|
|
+ <div class="text-sport-container">
|
|
|
+ <div class="text-sport-time">{{ duration }}</div>
|
|
|
+ <div class="text-sport-title">分钟</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-consume">累计消耗 {{ consume }} kal</div>
|
|
|
+ <div class="text-achievement">击败了全国 {{ defeat }}% 用户</div>
|
|
|
+ <div class="date">{{ createdAt }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- content -->
|
|
|
+ <div class="share-content">
|
|
|
+ <div class="content-item">相当于持续{{ words[randomNumber] }}</div>
|
|
|
+ <div class="content-center">{{ kilometer }}</div>
|
|
|
+ <div class="content-item">公里</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="share-bottom">
|
|
|
+ <div class="share-bottom-title">
|
|
|
+ <img src="@/assets/sport-share-link/achievement-bg.png" />
|
|
|
+ </div>
|
|
|
+ <div class="share-bottom-content">
|
|
|
+ <div
|
|
|
+ class="achievement-item achievement-item-margin"
|
|
|
+ v-for="item in user.achievements_show"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <img :src="item.logo" />
|
|
|
+ <div class="achievement-text">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="share-tips">
|
|
|
+ <div class="tips-left">
|
|
|
+ <div class="tips-logo"></div>
|
|
|
+ <div class="tips-title">运动智能鞋</div>
|
|
|
+ <div class="sub-tips">这是一段产品sloagn</div>
|
|
|
+ </div>
|
|
|
+ <div class="tips-qrcode-container">
|
|
|
+ <div class="qrcode-item qrcode-item-1">
|
|
|
+ <div class="qrcode-img">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="qrcode-title">安卓下载</div>
|
|
|
+ </div>
|
|
|
+ <div class="qrcode-item">
|
|
|
+ <div class="qrcode-img"></div>
|
|
|
+ <div class="qrcode-title">IOS下载</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-export default {};
|
|
|
+import { defineComponent, computed } from "vue";
|
|
|
+import { initShare } from "./share";
|
|
|
+import { getUrlParameter } from "@/utils/index";
|
|
|
+export default defineComponent({
|
|
|
+ setup() {
|
|
|
+ // 0 是步行 1是骑行 2是跑
|
|
|
+ const words = ["步行", "骑行", "跑步"];
|
|
|
+ const unit = [0.8214, 0.6142, 1.036];
|
|
|
+
|
|
|
+ const randomNumber = computed(() => parseInt(`${Math.random() * 3}`));
|
|
|
+
|
|
|
+ const currentBg = computed(() => {
|
|
|
+ return "bg-" + randomNumber.value;
|
|
|
+ });
|
|
|
+
|
|
|
+ const hash = getUrlParameter(window.location.href, "h");
|
|
|
+ const { user, consume, duration, defeat, period, createdAt } = initShare(
|
|
|
+ hash
|
|
|
+ );
|
|
|
+
|
|
|
+ const kilometer = computed(() =>
|
|
|
+ Math.floor(consume.value / 55 / unit[randomNumber.value])
|
|
|
+ );
|
|
|
+ return {
|
|
|
+ currentBg,
|
|
|
+ user,
|
|
|
+ consume,
|
|
|
+ duration,
|
|
|
+ defeat,
|
|
|
+ period,
|
|
|
+ createdAt,
|
|
|
+ words,
|
|
|
+ randomNumber,
|
|
|
+ kilometer,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.share-page {
|
|
|
- color: red;
|
|
|
- background: url(~@/assets/sport-share-link/share_img_riding.png);
|
|
|
- background-size: cover;
|
|
|
+.ignore-share-page {
|
|
|
+ background-size: 100% auto;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-color: #635248;
|
|
|
+ // align-items: ;
|
|
|
+}
|
|
|
+
|
|
|
+.share-page {
|
|
|
+ background-position: 0 -20px;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-1 {
|
|
|
+ background-image: url(~@/assets/sport-share-link/share_img_riding.png);
|
|
|
+}
|
|
|
+.bg-2 {
|
|
|
+ background-image: url(~@/assets/sport-share-link/share_img_run.png);
|
|
|
+}
|
|
|
+.bg-0 {
|
|
|
+ background-image: url(~@/assets/sport-share-link/share_img_walk.png);
|
|
|
+}
|
|
|
+
|
|
|
+.share-head {
|
|
|
+ .avatar-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 65px;
|
|
|
+ .avatar {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 70px;
|
|
|
+ border: 4px solid black;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-style {
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-sport-container {
|
|
|
+ margin-top: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-sport-time {
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f52323;
|
|
|
+ text-align: center;
|
|
|
+ font-family: DIN;
|
|
|
+ }
|
|
|
+ .text-sport-title {
|
|
|
+ font-size: 17px;
|
|
|
+ color: #f52323;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ .text-consume {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
+ .text-achievement {
|
|
|
+ width: 281px;
|
|
|
+ height: 29px;
|
|
|
+ line-height: 29px;
|
|
|
+ margin: 9px auto;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ rgba(255, 255, 255, 0) 0%,
|
|
|
+ #ffffff 53%,
|
|
|
+ rgba(255, 255, 255, 0) 100%
|
|
|
+ );
|
|
|
+ opacity: 1;
|
|
|
+ color: #f52323;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .avatar-empty {
|
|
|
+ max-width: 80px;
|
|
|
+ max-height: 80px;
|
|
|
+ border-radius: 70px;
|
|
|
+ border: 4px solid black;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.share-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 90px;
|
|
|
+ align-items: center;
|
|
|
+ .content-item {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .content-center {
|
|
|
+ font-size: 32px;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.share-bottom {
|
|
|
+ margin-top: 290px;
|
|
|
+ .share-bottom-title {
|
|
|
+ margin: 0 auto;
|
|
|
+ // width: 80%;
|
|
|
+ width:254px;
|
|
|
+ img{
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ // text-align: center;
|
|
|
+ // color: #fff;
|
|
|
+ // background: url(~@/assets/sport-share-link/achievement-bg.png) no-repeat;
|
|
|
+ // background-size: cover;
|
|
|
+ height: 27px;
|
|
|
+ // background-position: 50% -50%;
|
|
|
+ }
|
|
|
+ .share-bottom-content {
|
|
|
+ margin: 25px 17px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ }
|
|
|
+ .achievement-item {
|
|
|
+ width: 70px;
|
|
|
+ text-align: center;
|
|
|
+ // margin-left: 15px;
|
|
|
+ img {
|
|
|
+ max-width: 70px;
|
|
|
+ max-height: 70px;
|
|
|
+ }
|
|
|
+ .achievement-text {
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #d2c0b5;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .achievement-item-margin {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.share-tips {
|
|
|
+ margin-top: 36px;
|
|
|
+ padding: 0 17px 12px;
|
|
|
+ // border-top: 1px dotted #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .tips-left {
|
|
|
+ margin-top: 19px;
|
|
|
+ }
|
|
|
+ .tips-logo {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: #ffc400;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .tips-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .sub-tips {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 7px;
|
|
|
+ }
|
|
|
+ .tips-qrcode-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // padding: 0 17px 19px;
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+ .qrcode-item {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .qrcode-item-1 {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qrcode-title {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .qrcode-img {
|
|
|
+ width: 75px;
|
|
|
+ height: 75px;
|
|
|
+ // background-color: #fff;
|
|
|
+ background-image: url(~@/assets/sport-share-link/qr-image.png);
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.margin-top-18 {
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
</style>
|
