thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
pages/my/vip/vip.vue Normal file
View File

@ -0,0 +1,256 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 4 07 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-banner__box">
<image :src="`${resUrl}/member/img_banner_3x.png`" mode="widthFix" class="fui-banner__img"></image>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-content__box">
<image :src="`${resUrl}/member/img_mod_bg.png`" class="fui-bg__img"></image>
<view class="fui-btn__top fui-flex__center">加入会员 <text class="fui-pl">享受权益</text></view>
<view class="fui-inner__box">
<view class="fui-intro__text">组件数：<text>120</text>+ /永久使用 </view>
<fui-button radius="100rpx" background="linear-gradient(180deg, #E3BF82 0%, #997B4A 100%)"
borderColor="rgba(0,0,0,0)" border-width="0" @click="purchase">
<!-- #ifdef MP-TOUTIAO || MP-BAIDU || MP-QQ -->
{{status==1?'立即开通':'获取组件'}}
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO || MP-BAIDU || MP-QQ -->
立即开通
<!-- #endif -->
</fui-button>
<view class="fui-menu__box">
<view class="fui-menu__item" v-for="(item,index) in menus" :key="index" @tap="href(index)">
<image :src="`/static/images/member/icon_${item.icon}_3x.png`"></image>
<view class="fui-title">{{item.title}}</view>
</view>
</view>
</view>
</view>
</view>
<fui-animation :duration="500" :animationType="['fade']" :styles="styles" :show="show" @click="handleClick">
<view class="fui-ani__box">
<!-- @tap.stop="" 阻止关闭-->
<image class="fui-hd__img" src="/static/images/member/light/img_layer_3x.png" mode="widthFix"></image>
<view class="fui-flex__center fui-flex__column">
<view class="fui-ani__title">开通会员</view>
<view class="fui-desc">会员开通请前往 First UI官网(<text>firstui.cn</text>)，在官网购买开通会员后，前往个人中心订单页即可下载会员源码。
</view>
<fui-button btn-size="medium" radius="100rpx"
background="linear-gradient(180deg, #E3BF82 0%, #997B4A 100%)" borderColor="rgba(0,0,0,0)"
border-width="0" @click="getLink">复制官网链接</fui-button>
</view>
</view>
</fui-animation>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
import $fui from '@/components/firstui/fui-clipboard';
export default {
data() {
return {
resUrl:this.fui.resUrl(),
menus: [{
icon: 'vip',
title: 'VIP的优势？'
}, {
icon: 'difference',
title: '商用版的区别？'
}, {
icon: 'date',
title: 'VIP的有效期？'
}],
show: false,
styles: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
/* #ifndef APP-NVUE */
display: 'flex',
/* #endif */
'justify-content': 'center',
'align-items': 'center',
backgroundColor: 'rgba(0,0,0,0.6)'
}
}
},
computed: mapState(['status']),
methods: {
href(index) {
let title = [
'会员除了获取商业版组件源码外与非会员有什么其他优势？',
'开源版与商业版有什么区别?',
'会员的有效期是多久?'
][index];
let idx = [10, 9, 14][index];
this.fui.href(`../qa/qa?index=${idx}&title=${title}`)
},
purchase(mask) {
// #ifdef MP-TOUTIAO || MP-BAIDU || MP-QQ
if (this.status == 0) {
this.fui.toast('功能完善中~')
} else {
setTimeout(() => {
this.show = true;
}, 80);
}
// #endif
// #ifndef MP-TOUTIAO || MP-BAIDU || MP-QQ
setTimeout(() => {
this.show = true;
}, 80);
// #endif
},
handleClick() {
this.show = false;
},
getLink(e) {
$fui.getClipboardData('https://www.firstui.cn/', res => {
this.fui.toast('链接复制成功');
this.show = false;
}, e);
}
}
}
</script>
<style>
page {
background-color: #181818;
}
.fui-banner__box{
width: 100%;
height: 638rpx;
}
.fui-banner__img {
width: 100%;
height: 638rpx;
display: block;
}
.fui-content__box {
position: relative;
height: 760rpx;
}
.fui-bg__img {
width: 100%;
height: 760rpx;
display: block;
}
.fui-inner__box {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
padding: 68rpx 64rpx 0;
box-sizing: border-box;
}
.fui-btn__top {
width: 416rpx;
height: 84rpx;
background: #222222;
box-shadow: 0 4rpx 8rpx 0 rgba(17, 17, 17, 0.8);
border-radius: 42rpx;
color: #7F6232;
position: absolute;
z-index: 10;
top: -16rpx;
left: 50%;
transform: translateX(-50%);
}
.fui-pl {
padding-left: 24rpx;
}
.fui-intro__text {
color: #fff;
font-size: 28rpx;
font-weight: 600;
text-align: center;
padding-top: 64rpx;
padding-bottom: 32rpx;
}
.fui-intro__text text {
color: #E3BF82;
font-size: 64rpx;
padding-right: 8rpx;
/* line-height: 64rpx; */
font-style: italic;
}
.fui-menu__box {
display: flex;
align-items: center;
padding-top: 96rpx;
}
.fui-menu__item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.fui-menu__item image {
width: 96rpx;
height: 96rpx;
}
.fui-title {
font-size: 24rpx;
color: #D1D1D1;
padding-top: 16rpx;
white-space: nowrap;
}
.fui-ani__box {
width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding-bottom: 64rpx;
}
.fui-hd__img {
width: 100%;
height: 204rpx;
display: block;
}
.fui-ani__title {
font-size: 36rpx;
font-weight: 600;
padding: 54rpx 0 32rpx;
text-align: center;
}
.fui-desc {
padding: 0 54rpx 82rpx;
font-size: 24rpx;
line-height: 48rpx;
font-weight: 400;
color: #333333;
box-sizing: border-box;
}
.fui-desc text {
color: #FF2B2B;
}
</style>