Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore(样式调整): 所有页面统一使用<view :style="themeColor"> 这种方式包裹

Browse Source
This commit is contained in:
ZF Sun
2025-12-31 11:17:59 +08:00
parent 7a28bb7f7a
commit ef7b609efb
5 changed files with 788 additions and 725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

912
pages_promotion/fenxiao/index.vue
View File

File diff suppressed because it is too large Load Diff

130
pages_promotion/fenxiao/promote.vue
View File

@@ -1,54 +1,58 @@
<template>
<view class="fenxiao-promote" :style="themeColor + ';' + { backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }">
<view class="my-earnings">
<view class="earnings-head-wrap">
<view class="earnings-head">
<image class="name" :src="$util.img('public/uniapp/fenxiao/promote/my_earnings.png')" mode="aspectFit"></image>
<image class="money-bg" :src="$util.img('public/uniapp/fenxiao/promote/money.png')" mode="aspectFill"></image>
<view class="content">
累计收益
<text class="money-text">{{ detailData.total_commission }}</text>
元
</view>
</view>
</view>
<view class="earnings-body">
<view class="earnings-tab">
<text :class="{ active: tabIndex == 0 }" @click="tabCut(0)">已邀请好友</text>
<text :class="{ active: tabIndex == 1 }" @click="tabCut(1)">已下单好友</text>
</view>
<scroll-view scroll-y="true" class="earnings-content-wrap" @scrolltolower="getTeam()">
<view class="earnings-list" v-if="promote.list.length">
<view class="earnings-item" v-for="(item, index) in promote.list" :key="index">
<image
class="item-img"
:src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().head"
@error="item.headimg = $util.getDefaultImage().head"
mode="aspectFill"
></image>
<view class="item-content">
<view class="item-name multi-hidden">{{ item.nickname }}</view>
</view>
<view :style="themeColor">
<view class="fenxiao-promote"
:style="{ backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }">
<view class="my-earnings">
<view class="earnings-head-wrap">
<view class="earnings-head">
<image class="name" :src="$util.img('public/uniapp/fenxiao/promote/my_earnings.png')"
mode="aspectFit"></image>
<image class="money-bg" :src="$util.img('public/uniapp/fenxiao/promote/money.png')"
mode="aspectFill"></image>
<view class="content">
累计收益
<text class="money-text">{{ detailData.total_commission }}</text>
元
</view>
</view>
<view class="earnings-empty" v-else>暂无已邀请好友，快去邀请吧</view>
</scroll-view>
</view>
<view class="earnings-body">
<view class="earnings-tab">
<text :class="{ active: tabIndex == 0 }" @click="tabCut(0)">已邀请好友</text>
<text :class="{ active: tabIndex == 1 }" @click="tabCut(1)">已下单好友</text>
</view>
<scroll-view scroll-y="true" class="earnings-content-wrap" @scrolltolower="getTeam()">
<view class="earnings-list" v-if="promote.list.length">
<view class="earnings-item" v-for="(item, index) in promote.list" :key="index">
<image class="item-img"
:src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().head"
@error="item.headimg = $util.getDefaultImage().head" mode="aspectFill"></image>
<view class="item-content">
<view class="item-name multi-hidden">{{ item.nickname }}</view>
</view>
</view>
</view>
<view class="earnings-empty" v-else>暂无已邀请好友，快去邀请吧</view>
</scroll-view>
</view>
</view>
</view>
<view class="activity-rules">
<image class="rules-name" :src="$util.img('public/uniapp/fenxiao/promote/activity_rules.png')" mode="aspectFit"></image>
<view class="content" v-if="promoteContent.content"><rich-text :nodes="promoteContent.content"></rich-text></view>
<view class="rules-empty" v-else>暂无活动规则</view>
</view>
<view class="active-btn"><button type="primary" @click="toPoster()">邀请好友</button></view>
<ns-copyright></ns-copyright>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
<view class="activity-rules">
<image class="rules-name" :src="$util.img('public/uniapp/fenxiao/promote/activity_rules.png')"
mode="aspectFit"></image>
<view class="content" v-if="promoteContent.content"><rich-text
:nodes="promoteContent.content"></rich-text></view>
<view class="rules-empty" v-else>暂无活动规则</view>
</view>
<view class="active-btn"><button type="primary" @click="toPoster()">邀请好友</button></view>
<ns-copyright></ns-copyright>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</view>
</template>
@@ -68,11 +72,11 @@ export default {
isPay: 0,
detailData: {},
templateId: '',
poster:'',
poster: '',
};
},
onShow() {
setTimeout( () => {
setTimeout(() => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
@@ -83,7 +87,7 @@ export default {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
}, 1000);
if (this.storeToken) {
this.getTeam();
@@ -100,8 +104,8 @@ export default {
this.getPoster();
},
methods: {
toPoster(){
this.$util.redirectTo('/pages_promotion/fenxiao/promote_code', { poster: this.poster,templateId:this.templateId })
toPoster() {
this.$util.redirectTo('/pages_promotion/fenxiao/promote_code', { poster: this.poster, templateId: this.templateId })
},
tabCut(index) {
this.tabIndex = index;
@@ -213,14 +217,17 @@ export default {
background-color: #ff2d46;
background-size: 100%;
background-repeat: no-repeat;
.my-earnings,
.activity-rules {
background-color: #fff;
border-radius: 30rpx;
}
.my-earnings {
margin-top: 230rpx;
padding-bottom: 40rpx;
.earnings-head-wrap {
background-color: #fff7f5;
height: 160rpx;
@@ -228,33 +235,40 @@ export default {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.earnings-head {
position: relative;
padding-top: 60rpx;
display: flex;
align-items: center;
justify-content: center;
.name {
position: absolute;
width: 384rpx;
height: 74rpx;
top: -22rpx;
}
.content {
font-size: $font-size-tag;
}
.money-bg {
width: 80rpx;
height: 80rpx;
}
.money-text {
margin: 0 6rpx;
font-size: 40rpx;
line-height: 1;
}
}
.earnings-body {
padding: 0 30rpx;
.earnings-tab {
display: flex;
justify-content: space-around;
@@ -263,9 +277,11 @@ export default {
font-size: 30rpx;
color: #e93224;
margin-bottom: 10rpx;
text.active {
position: relative;
font-weight: bold;
&::after {
position: absolute;
content: '';
@@ -278,35 +294,43 @@ export default {
}
}
}
.earnings-content-wrap {
max-height: 440rpx;
}
.earnings-item {
display: flex;
align-items: center;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.item-img {
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.item-time {
font-size: $font-size-tag;
color: $color-tip;
}
.item-name {
line-height: 1.3;
}
.money {
margin-left: auto;
color: #f9b124;
}
}
}
.earnings-empty {
display: flex;
align-items: center;
@@ -315,10 +339,12 @@ export default {
font-size: 30rpx;
}
}
.activity-rules {
position: relative;
margin-top: 60rpx;
min-height: 300rpx;
.rules-name {
position: absolute;
width: 384rpx;
@@ -327,9 +353,11 @@ export default {
left: 50%;
transform: translateX(-50%);
}
.content {
padding: 70rpx 20rpx 0;
}
.rules-empty {
padding-top: 140rpx;
text-align: center;