zianxin/Friendship-and-chat-uniapp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:邀请福利

Browse Source
This commit is contained in:
dzc committed 2025-12-03 14:05:47 +08:00
1 parent e85a8ca368
commit b587ab476e
4 files changed
+709 -621
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.vue
+591 -592
View File
File diff suppressed because it is too large. Load diff
src/pages/wechat/index.vue
+68 -29
View File
@@ -7,11 +7,11 @@
</template>
</wd-navbar>
<!-- 用户信息 -->
<view class="bg-gradient-to-b flex justify-between items-center">
<view class="flex items-center p-6">
<image :src="userInfo.avatar"
class="mr-4 size-50px rounded-full bg-#333 border border-amber border-solid" mode="aspectFill" />
<view class="flex-1">
<view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx flex justify-between items-center px-6 py-4">
<view class="flex items-center">
<image :src="userInfo.avatar" class="size-50px rounded-full bg-#333 border border-amber border-solid"
mode="aspectFill" />
<view class="flex-1 ml-20rpx">
<view class="mb-1 text-base">{{ userInfo.nickname }}</view>
<view class="mb-2 text-xs text-#ffffff80 flex items-center">
<text>ID: {{ userInfo.id }}</text>
@@ -19,43 +19,66 @@
</view>
</view>
</view>
<view>
<view
class="text-color-theme-dark border-color-theme border-1px border-solid active_cl_bg-color-theme text-xs text-center px-2 py-8rpx rounded-full">
退出登录
</view>
</view>
<!-- 提现相关 -->
<view>
<view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
<view class="flex items-center justify-center">
<view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.txTab" :key="i">
<text>{{ v.title }}</text>
<text>{{ v.value }}</text>
<text class="text-color-theme text-2xl">{{ v.value }}</text>
<text class="mt-10rpx">{{ v.title }}</text>
</view>
</view>
<view class="flex justify-center items-center">
<text>立即提现</text>
<view class="flex justify-center items-center mt-30rpx">
<text
class="bg-color-theme-dark active_cl_bg-color-theme text-base text-center px-80rpx py-12rpx rounded-full">
立即提现
</text>
</view>
</view>
<!-- tab -->
<view class="flex justify-center items-center">
<view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.menuTab" :key="i">
<image class="size-40rpx" :src="v.icon" mode="aspectFill" />
<text>{{ v.title }}</text>
<view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx py-4 flex justify-evenly items-center">
<view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.menuTab" :key="i"
@tap="doItem(v)">
<div class="size-100rpx flex justify-center items-center rounded-full"
:style="{ backgroundColor: v.bgColor }">
<text class="iconfont text-2xl" :class="v.icon" />
</div>
<text class="mt-10rpx">{{ v.title }}</text>
</view>
</view>
<!-- 规则 -->
<view>
<view>邀请奖励规则</view>
<view>
<view v-for="(v, i) in data.rule">
<text>{{ i + 1 }}</text>
<text>{{ v.title }}</text>
<view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
<view class="text-lg">邀请奖励规则</view>
<view class="mt-30rpx">
<view class="card-thin flex items-start px-16rpx py-12rpx mb-15rpx" v-for="(v, i) in data.rule">
<view class="size-40rpx flex justify-center items-center bg-color-theme-dark rounded-8rpx">
<text class="text-base">{{ i + 1 }}</text>
</view>
<text class="ml-20rpx text-xs">{{ v.title }}</text>
</view>
</view>
</view>
<!-- 海报 -->
<view>
<view>我的邀请海报</view>
<view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
<view class="text-lg">我的邀请海报</view>
<image class="mt-30rpx" src="/src/static/upload-icon.png" mode="widthFix" />
<view class="mt-30rpx flex justify-between items-center text-xs">
<view
class="flex-1 text-center px-2 py-8rpx border-1px border-solid rounded-full border-color-theme active_cl_bg-color-theme">
复制链接
</view>
<view class="w-30rpx" />
<view
class="flex-1 text-center px-2 py-8rpx border-1px border-solid rounded-full border-color-theme-dark bg-color-theme-dark active_cl_bg-color-theme">
保存海报
</view>
</view>
</view>
<view class="h-30rpx" />
</wd-config-provider>
</template>
@@ -86,29 +109,45 @@ const data = {
menuTab: [
{
title: '礼物奖励',
value: '100',
icon: 'icon-liwu',
bgColor: '#fad34a',
path: "",
},
{
title: '钻石充值',
value: '100',
icon: 'icon-lv_zuanshi_fill',
bgColor: '#ff5081',
path: "/pages/profile/recharge",
},
{
title: '会员中心',
value: '100',
icon: 'icon-huiyuan',
bgColor: '#ebc26a',
path: "/pages/profile/apply-vip",
},
{
title: '邀请好友',
value: '100',
icon: 'icon-tianjiahaoyou',
bgColor: '#a4e55a',
path: "",
},
],
rule: [
{
title: '邀请好友注册，即可获得100钻石',
title: '通过链接/二维码邀请用户首次充值,可获得50%现金奖励',
},
{
title: '好友注册后，即可获得100钻石',
title: '邀请奖励满200元可提现,3个月工作日内到账',
},
],
}
const doItem = (item) => {
if (item.path) {
uni.navigateTo({
url: item.path,
});
}
}
</script>
src/static/icon/self/iconfont.css
+30
View File
@@ -0,0 +1,30 @@
@font-face {
font-family: "iconfont"; /* Project id 5079650 */
src: url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.woff2?t=1764739737667') format('woff2'),
url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.woff?t=1764739737667') format('woff'),
url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.ttf?t=1764739737667') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-huiyuan:before {
content: "\e67e";
}
.icon-lv_zuanshi_fill:before {
content: "\e601";
}
.icon-tianjiahaoyou:before {
content: "\e618";
}
.icon-liwu:before {
content: "\e600";
}
unocss.config.ts
+20
View File
@@ -47,6 +47,18 @@ export default {
'background-color': '#B37B2E',
},
],
[
'border-color-theme',
{
'border-color': '#F9C26F',
},
],
[
'border-color-theme-dark',
{
'border-color': '#D29E52',
},
],
[
'text-color-theme',
{
@@ -85,6 +97,14 @@ export default {
'border-radius': '16rpx',
},
],
[
'card-thin',
{
'background-color': 'rgba(0, 0, 0, 0.3)',
'box-shadow': 'rgba(0, 0, 0, 0.05) 0px 0px 0px 1px',
'border-radius': '16rpx',
},
],
],
transformers: [transformerAttributify(), transformerClass()],