|
|
@@ -0,0 +1,291 @@
|
|
|
+<template>
|
|
|
+ <div class="mine">
|
|
|
+ <div class="head">
|
|
|
+ <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
|
|
|
+ <span>{{ $t('lang264') }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content flex-col flex-ac">
|
|
|
+ <div :class="[$i18n.locale == 'en' ? 'title' : 'title sp']">{{ $t('lang265') }}</div>
|
|
|
+ <div class="btn">
|
|
|
+ <img src="@/assets/images/index/btn1.png" alt="" />
|
|
|
+ <span class="btn_text" v-if="superFl.end_time == 0" @click="setNewbieWeal">{{ $t('lang266') }}</span>
|
|
|
+ <span class="btn_text" v-else-if="superFl.end_time > 0">{{ $t('lang283') }}</span>
|
|
|
+ </div>
|
|
|
+ <div :class="[$i18n.locale == 'en' ? 'title t1' : 'title t1 sp']">{{ $t('lang267') }}</div>
|
|
|
+ <div class="btn">
|
|
|
+ <img src="@/assets/images/index/btn2.png" alt="" />
|
|
|
+ <span class="btn_text" v-if="superFl.is_super == 0 && new Date().getTime() > 0 && new Date().getTime() < Number(superFl.end_time) * 1000" @click="setSuperWeal">{{ $t('lang266') }}</span>
|
|
|
+ <span class="btn_text" v-else-if="superFl.is_super == 0 && new Date().getTime() > Number(superFl.end_time) * 1000 && Number(superFl.end_time) != 0">{{ $t('lang285') }}</span>
|
|
|
+ <span class="btn_text" v-else-if="superFl.is_super == 0 && Number(superFl.end_time) == 0">{{ $t('lang286') }}</span>
|
|
|
+ <span class="btn_text" v-else-if="superFl.is_super == 1">{{ $t('lang283') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="count flex-row" v-if="superFl.is_super == 0 && new Date().getTime() > 0 && new Date().getTime() < Number(superFl.end_time) * 1000">
|
|
|
+ <span>距离过期剩余：</span>
|
|
|
+ <van-count-down class="down" :time="Number(superFl.end_time) * 1000 - new Date().getTime()" />
|
|
|
+ </div>
|
|
|
+ <div class="tip">
|
|
|
+ <span class="tt">{{ $t('lang268') }}</span>
|
|
|
+ {{ $t('lang269') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup v-model="areaShow" round :close-on-click-overlay="false" position="center" @close="areaShow = false">
|
|
|
+ <img src="@/assets/images/index/close.png" class="close" alt="" @click="areaShow = false" />
|
|
|
+ <div class="card flex-col flex-ac">
|
|
|
+ <div class="card_text1">
|
|
|
+ <span>{{ $t('lang275') }}</span>
|
|
|
+ <span>“{{ $i18n.locale == 'en' ? product?.name?.substring(0, 8) + '...' + product?.name?.substring(product.name.length - 5, product.name.length) : product.name }}”</span>
|
|
|
+ <span>*{{ product.num + $t('lang270') }}</span>
|
|
|
+ </div>
|
|
|
+ <div :class="[$i18n.locale == 'en' ? 'card_text2_en' : 'card_text2']">{{ $t('lang272') }}</div>
|
|
|
+ <div class="card_text3">{{ $t('lang273') }}</div>
|
|
|
+ <div :class="[$i18n.locale == 'en' ? 'card_text4_en' : 'card_text4']">{{ $t('lang274') }}</div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Dialog, Notify, Toast } from 'vant';
|
|
|
+import { usApi, newsLetterApi, walletApi, homeApi } from '@/api/index';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userinfo: {},
|
|
|
+ areaShow: false,
|
|
|
+ product: {},
|
|
|
+ superFl: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.getNewbieWeal();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回上一页
|
|
|
+ back() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+
|
|
|
+ getNewbieWeal() {
|
|
|
+ homeApi.getNewbieWeal({}).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log(res.data);
|
|
|
+ this.superFl = res.data;
|
|
|
+ // this.areaShow = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setNewbieWeal(type_id) {
|
|
|
+ let _this = this;
|
|
|
+ homeApi.setNewbieWeal({ type_id }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log(res.data);
|
|
|
+ _this.product = res.data;
|
|
|
+ _this.areaShow = true;
|
|
|
+ _this.getNewbieWeal();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setSuperWeal() {
|
|
|
+ let _this = this;
|
|
|
+ Dialog.confirm({
|
|
|
+ title: _this.$t('lang136'),
|
|
|
+ message: _this.$t('lang284').replace('XX', _this.superFl.chabao),
|
|
|
+ confirmButtonText: _this.$t('lang111'),
|
|
|
+ cancelButtonText: _this.$t('lang135'),
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ homeApi.setSuperWeal({}).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ _this.getNewbieWeal();
|
|
|
+ _this.$toast(_this.$t('lang287'));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // on cancel
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['account']),
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.mine {
|
|
|
+ height: calc(100vh - 50px);
|
|
|
+ margin: 50px 0 0;
|
|
|
+ background: url('~@/assets/images/index/fl.jpg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .head {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: rgba(#000, 0.8);
|
|
|
+ letter-spacing: 1.5px;
|
|
|
+ font-weight: 550;
|
|
|
+ background: #fff;
|
|
|
+ padding: 14px 0;
|
|
|
+ .arrow_img {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ width: 10px;
|
|
|
+ height: 16px;
|
|
|
+ // transform: translate(0, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100vw;
|
|
|
+ font-size: 13px;
|
|
|
+ .title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-shadow: 1.5px 1.5px 0px #5b58e7;
|
|
|
+ padding: 40% 0 22%;
|
|
|
+ }
|
|
|
+ .sp {
|
|
|
+ letter-spacing: 4px;
|
|
|
+ }
|
|
|
+ .t1 {
|
|
|
+ padding: 31% 60px 23% 0;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ font-size: 10px;
|
|
|
+ letter-spacing: 1.1px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 36px;
|
|
|
+ .tt {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block; /* 或者使用其他合适的布局方式 */
|
|
|
+ color: transparent; /* 使文字本身不可见 */
|
|
|
+ background-image: linear-gradient(to right, #f8eaf7, #aaa9f5); /* 定义渐变颜色 */
|
|
|
+ -webkit-background-clip: text; /* 针对WebKit浏览器 */
|
|
|
+ background-clip: text; /* 使渐变仅应用于文字 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ font-size: 13px;
|
|
|
+ margin-top: -10px;
|
|
|
+ .down {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 130px;
|
|
|
+ position: relative;
|
|
|
+ // height: 209px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &_text {
|
|
|
+ position: absolute;
|
|
|
+ top: 24px;
|
|
|
+ left: 51px;
|
|
|
+ font-size: 11px;
|
|
|
+ letter-spacing: 1.5px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-shadow: 1px 1px 0px #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ width: 300px;
|
|
|
+ height: 405px;
|
|
|
+ text-align: center;
|
|
|
+ background: url('~@/assets/images/index/card.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ &_text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 266px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &_text2 {
|
|
|
+ letter-spacing: 1.2px;
|
|
|
+ font-size: 11px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ &_text2_en {
|
|
|
+ letter-spacing: 1.2px;
|
|
|
+ font-size: 11px;
|
|
|
+ margin-top: 5px;
|
|
|
+ line-height: 95%;
|
|
|
+ }
|
|
|
+ &_text3 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin-top: 17px;
|
|
|
+ display: inline-block; /* 或者使用其他合适的布局方式 */
|
|
|
+ color: transparent; /* 使文字本身不可见 */
|
|
|
+ background-image: linear-gradient(to bottom, #f8eaf7, #ada4d8); /* 定义渐变颜色 */
|
|
|
+ -webkit-background-clip: text; /* 针对WebKit浏览器 */
|
|
|
+ background-clip: text; /* 使渐变仅应用于文字 */
|
|
|
+ }
|
|
|
+
|
|
|
+ &_text4 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin-top: 6px;
|
|
|
+ display: inline-block; /* 或者使用其他合适的布局方式 */
|
|
|
+ color: transparent; /* 使文字本身不可见 */
|
|
|
+ background-image: linear-gradient(to bottom, #dacbe7, #7674ee); /* 定义渐变颜色 */
|
|
|
+ -webkit-background-clip: text; /* 针对WebKit浏览器 */
|
|
|
+ background-clip: text; /* 使渐变仅应用于文字 */
|
|
|
+ }
|
|
|
+
|
|
|
+ &_text4_en {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin-top: 6px;
|
|
|
+ display: inline-block; /* 或者使用其他合适的布局方式 */
|
|
|
+ color: transparent; /* 使文字本身不可见 */
|
|
|
+ background-image: linear-gradient(to bottom, #dacbe7, #7674ee); /* 定义渐变颜色 */
|
|
|
+ -webkit-background-clip: text; /* 针对WebKit浏览器 */
|
|
|
+ background-clip: text; /* 使渐变仅应用于文字 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ float: right;
|
|
|
+ margin-bottom: -10px;
|
|
|
+ margin-right: -20px;
|
|
|
+ }
|
|
|
+ /deep/.van-popup {
|
|
|
+ padding: 50px;
|
|
|
+ background-color: rgba(#000, 0);
|
|
|
+ }
|
|
|
+ /deep/ .van-overlay {
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ .flex-col {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .flex-ac {
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .flex-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xiaomei
