Files
lucky_shop/pages_promotion/fenxiao/index.vue
ZF sun a7541d0598 refactor: 将页面硬编码文本替换为国际化语言包
统一替换积分商城、分销页面的硬编码字符串为多语言key,包括订单状态、按钮文案、提示信息等,提升项目多语言适配能力
2026-06-22 15:09:19 +08:00

615 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view :style="themeColor">
<view class="fenxiao-index"
:style="fenxiaoIndexPageStyle">
<block v-if="info.fenxiao_id > 0">
<!-- 头部 -->
<view class="fenxiao-index-header" :class="{ 'not-level': !levelList.length }">
<view class="member">
<view class="member-pic">
<image :src="info.headimg ? $util.img(info.headimg) : $util.getDefaultImage().head"
@error="info.headimg = $util.getDefaultImage().head" mode="aspectFill" show-menu-by-longpress/>
<!-- <text class="level-name ">{{ info.level_name }}</text> -->
</view>
<view class="member-info">
<view class="member-info-box">
<text class="name">{{ info.fenxiao_name }}</text>
<p class="level" v-if="info.level_num > 0"><img
:src="$util.img('public/uniapp/fenxiao/index/commissionFission-level.png')"
alt="" class="level-icon">{{ info.level_name }}</p>
</view>
<view class="recommend">{{ $lang('fenxiao.parentAgent') }}:{{ info.parent_name ? info.parent_name : $lang('fenxiao.mainStore') }}</view>
<view class="recommend">{{ $lang('fenxiao.invitedSuccess') }}:{{ teamNum.num }}人<text class="iconfont icon-right"
style="font-size: 24rpx;"></text></view>
</view>
<!-- <view class="promote-rules font-size-tag" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
<text class="iconfont icon-wenhao font-size-tag"></text>
推广规则
</view> -->
</view>
<!-- <view class="fenxiao-level-wrap" v-if="levelList.length">
<image :src="$util.img('public/uniapp/fenxiao/index/level_icon.png')" mode="widthFix" class="level-icon"/>
<view class="level-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/level')">
<view class="title">{{ info.level_num > 0 ? info.level_name : '等级未解锁' }}</view>
<view class="desc">下单、邀请好友均可提升等级</view>
</view>
<view class="btn" @click="$refs.taskPopup.open()" v-if="info.condition.last_level">做任务</view>
</view> -->
</view>
<view class="fenxiao-index-allmoney">
<view class="allmoney-top-money">
<view class="allmoney-top">
<view class="font-size-sub">可{{ fenxiaoWords.withdraw }}(元)</view>
<view class="withdrawal-record"
@click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
{{ $lang('fenxiao.withdrawalDetail') }}
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="total-commission price-font">{{ info.account }}</view>
</view>
<view class="allmoney-bottom">
<!-- <view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/bill')">
<view class="title">总{{ fenxiaoWords.account }}</view>
<view class="money price-font">{{ info.total_commission | moneyFormat }}</view>
</view>
<view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="title">已提现{{ fenxiaoWords.account }}</view>
<view class="money price-font">{{ info.account_withdraw | moneyFormat }}</view>
</view> -->
<view class="allmoney-all-wrap"
@click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="title">{{ $lang('fenxiao.withdrawing') }}(元)<text class="iconfont icon-right"
style="font-size: 24rpx;"></text></view>
<view class="money price-font">{{ info.account_withdraw_apply | moneyFormat }}</view>
</view>
<view class="allmoney-all-wrap"
@click="$util.redirectTo('/pages_promotion/fenxiao/order', { type: 1 })">
<view class="title">{{ $lang('fenxiao.pendingEntry') }}(元)<text class="iconfont icon-right"
style="font-size: 24rpx;"></text></view>
<view class="money price-font">{{ info.in_progress_money | moneyFormat }}</view>
</view>
</view>
<view class="withdraw-btn" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_apply')">{{ $lang('fenxiao.withdraw') }}
</view>
</view>
<view class="fenxiao-index-allmoney" style="padding: 0;border-radius:24rpx;margin-top: 0;"
@click="toPoster()">
<image :src="$util.img('public/uniapp/fenxiao/index/commissionFission-qrcode1.png')" mode="widthFix"
style="width: 100%;border-radius:24rpx" show-menu-by-longpress/>
</view>
<!-- 功能列表 -->
<view class="fenxiao-menu-list">
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/team')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/down-line.png')" mode="widthFix" show-menu-by-longpress>
</image>
</view>
<view class="info">
<view class="title">{{ $lang('fenxiao.myFans') }}</view>
<view class="desc">{{ $lang('fenxiao.invitedUsers') }}</view>
</view>
</view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/jifenjiangli.png')" mode="widthFix" show-menu-by-longpress>
</image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.withdraw }}明细</view>
<view class="desc">{{ $lang('fenxiao.totalCommission') }}¥{{ info.total_commission | moneyFormat }}
</view>
</view>
</view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/order')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/fenxiaodingdan.png')" mode="widthFix" show-menu-by-longpress>
</image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.concept + $lang('fenxiao.order') }}</view>
<view class="desc">{{ fenxiaoWords.concept + $lang('fenxiao.order') }}{{ $lang('fenxiao.detail') }}</view>
</view>
</view>
<view class="menu-item" @click="toPoster()">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/friend.png')" mode="widthFix" show-menu-by-longpress></image>
</view>
<view class="info">
<view class="title">{{ $lang('fenxiao.myInviteCode') }}</view>
<view class="desc">{{ $lang('fenxiao.inviteFriendsEarn') }}</view>
</view>
</view>
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/code.png')" mode="widthFix" show-menu-by-longpress></image>
</view>
<view class="info">
<view class="title">邀请好友</view>
<view class="desc">邀好友赚好礼</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/bill')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/bill.png')" mode="widthFix" show-menu-by-longpress></image>
</view>
<view class="info">
<view class="title">账单报表</view>
<view class="desc">{{ fenxiaoWords.account }}变更明细</view>
</view>
</view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/goods_list', { templateId: templateId })">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/market.png')" mode="widthFix" show-menu-by-longpress></image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.concept }}商品</view>
<view class="desc">{{ fenxiaoWords.concept }}商品</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/ranking_list', { type: 'profit' })">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/commission_rank.png')" mode="widthFix" show-menu-by-longpress>
</image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.account }}排行</view>
<view class="desc">您的排名为第{{ profitRanking }}位</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/ranking_list', { type: 'invited_num' })">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/promoter_rank.png')" mode="widthFix" show-menu-by-longpress>
</image>
</view>
<view class="info">
<view class="title">推广人排行</view>
<view class="desc">您的排名为{{ invitedNumRanking }}位</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/level')" v-if="levelList.length">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/team_reward.png')" mode="widthFix" show-menu-by-longpress></image>
</view>
<view class="info">
<view class="title">等级说明</view>
<view class="desc">{{ fenxiaoWords.concept }}等级说明</view>
</view>
</view> -->
</view>
<!-- <view class="fenxiao-team">
<view class="fenxiao-index-other">
<view @click="$util.redirectTo('/pages_promotion/fenxiao/team')" class="all-money-item">
<view class="img-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/down-line.png')" mode="aspectFill" show-menu-by-longpress></image>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit">我的粉丝</text>
<text class="all-money-num">{{ teamNum.num }}人</text>
</view>
</view>
</view>
<view class="fenxiao-index-other">
<view @click="$util.redirectTo('/pages_promotion/fenxiao/child_fenxiao')" class="all-money-item">
<view class="img-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/yejikaohe.png')" mode="aspectFill" show-menu-by-longpress></image>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit">{{ fenxiaoWords.fenxiao_name }}</text>
<text class="all-money-num">{{ teamNum.fenxiao_num }}人</text>
</view>
</view>
</view>
</view> -->
</block>
<ns-copyright></ns-copyright>
<view class="empty" v-if="!info.fenxiao_id > 0 && showEmpty">
<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix" show-menu-by-longpress></image>
<text>{{ $lang('fenxiao.notFenxiao', { fenxiao_name: fenxiaoWords.fenxiao_name }) }},{{ $lang('fenxiao.applyNow') }}</text>
<view @click="$util.redirectTo('/pages_promotion/fenxiao/apply')" class="color-base-bg">{{ $lang('fenxiao.joinNow') }}</view>
</view>
<loading-cover ref="loadingCover"></loading-cover>
<ns-login ref="login"></ns-login>
<uni-popup ref="taskPopup" type="bottom">
<view class="task-popup popup-layer" v-if="levelInfo">
<view class="head-wrap">
<text>{{ $lang('fenxiao.quickUpgradeTip') }}</text>
<text class="iconfont icon-close" @click="$refs.taskPopup.close()"></text>
</view>
<view class="body-wrap">
<view class="equity-content" v-for="(item, index) in levelInfo.task" :key="index">
<text class="subordinate-consumption">
{{ item.title }}
<text class="iconfont icon-wenhao" @click="openTips(item)"></text>
<text class="incomplete">{{ item.progress == 100 ? $lang('fenxiao.completed') : $lang('fenxiao.incomplete') }}</text>
</text>
<view class="circle">
<progress :percent="item.progress" activeColor="#E7B667" stroke-width="4" />
</view>
<text class="zero">{{ item.value }}</text>
<text>/{{ item.condition }}</text>
<text class="to-complete-box" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
<text class="to-complete">{{ item.progress == 100 ? $lang('fenxiao.completed') : $lang('fenxiao.toComplete') }}</text>
</text>
</view>
</view>
</view>
</uni-popup>
<uni-popup type="bottom" ref="tips">
<view class="popup">
<view class="popup-header">
<text class="tit">{{ $lang('fenxiao.hint') }}</text>
<text class="iconfont icon-close" @click="$refs.tips.close()"></text>
</view>
<view class="popup-body">
<view>{{ tips }}</view>
<view v-if="levelInfo">{{ levelInfo.upgrade_type == 1 ? $lang('fenxiao.upgradeConditionAny') : $lang('fenxiao.upgradeConditionAll') }}</view>
</view>
</view>
</uni-popup>
</view>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
<script>
import fenxiaoWords from '@/common/js/fenxiao-words.js';
export default {
data() {
return {
info: {
fenxiao_name: '',
fenxiao_id: 0
},
showEmpty: false,
teamNum: {
fenxiao_num: 0,
member_num: 0
},
//初始化获取到的模板id
templateId: '',
tips: '',
profitRanking: 0,
invitedNumRanking: 0,
levelList: [],
poster: ''
};
},
mixins: [fenxiaoWords],
onShow() {
if (this.fenxiaoWords && this.fenxiaoWords.concept) this.$langConfig.title(this.fenxiaoWords.concept + '中心');
if (this.storeToken) {
this.checkFenxiaoIsStart();
} else {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/index');
});
}
this.getTemplateId();
this.getPoster();
},
onLoad() {
setTimeout(() => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: this.$lang('fenxiao.merchantNotOpenFenxiao'),
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo(this.$util.INDEX_PAGE_URL, {}, 'redirectTo');
}, 2000);
}
}, 1000);
this.getFenxiaoLevel();
},
methods: {
toPoster() {
this.$util.redirectTo('/pages_promotion/fenxiao/promote_code', { poster: this.poster, templateId: this.templateId })
},
/**
* 获取分享海报
*/
getPoster() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/posterList',
success: res => {
if (res.code >= 0) {
this.poster = res.data.toString();
this.poster = encodeURIComponent(this.poster);
}
}
});
},
/**
* 检测分销是否开启
*/
checkFenxiaoIsStart() {
this.$api.sendRequest({
url: '/fenxiao/api/config/basics',
success: res => {
if (res.code == 0 && res.data) {
if (res.data.level > 0) {
this.getFenxiaoDetail();
} else {
this.$util.showToast({
title: this.$lang('fenxiao.merchantNotOpenFenxiao'),
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo(this.$util.MEMBER_PAGE_URL);
}, 2000);
}
}
}
});
},
// 获取分销商信息
getFenxiaoDetail() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/detail',
success: res => {
if (res.data) {
if (res.data.status == -1) {
this.$util.showToast({
title: this.$lang('fenxiao.fenxiaoFrozen')
});
setTimeout(() => {
this.$util.redirectTo(this.$util.MEMBER_PAGE_URL);
}, 2000);
return;
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
this.info = res.data;
this.getTeamNum();
this.getRanking('invited_num');
this.getRanking('profit');
this.showEmpty = true;
} else {
this.$util.redirectTo('/pages_promotion/fenxiao/apply', {}, 'redirectTo');
}
},
fail: res => {
this.showEmpty = true;
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
//去提现
goTixian() {
this.$util.redirectTo('/pages_promotion/fenxiao/withdraw_apply');
},
toLevel() {
this.$util.redirectTo('/pages_promotion/fenxiao/level');
},
close() {
this.$refs.taskPopup.close();
},
getTeamNum() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/teamnum',
success: res => {
if (res.code >= 0) {
this.teamNum = res.data;
}
}
});
},
/**
* 获取分享海报模板id
*/
getTemplateId() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/posterTemplateIds',
success: res => {
if (res.code >= 0) {
this.templateId = [...res.data].join();
}
}
});
},
moneyFormat(money) {
if (isNaN(parseFloat(money))) return money;
return parseFloat(money).toFixed(2);
},
openTips(data) {
this.tips = data.tips;
this.$refs.tips.open();
},
getRanking(type) {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/ranking',
data: {
type: type
},
success: res => {
if (res.code >= 0) {
if (type == 'profit') this.profitRanking = res.data;
if (type == 'invited_num') this.invitedNumRanking = res.data;
}
}
});
},
getFenxiaoLevel() {
this.$api.sendRequest({
url: '/fenxiao/api/Level/lists',
success: res => {
if (res.code == 0 && res.data) {
this.levelList = res.data;
}
}
});
}
},
onBackPress(options) {
if (options.from === 'navigateBack') {
return false;
}
this.$util.redirectTo(this.$util.MEMBER_PAGE_URL, {}, 'reLaunch');
return true;
},
watch: {
storeToken: function (nVal, oVal) {
if (nVal) {
this.checkFenxiaoIsStart();
}
}
},
computed: {
levelInfo() {
if (this.info && this.info.condition && this.info.condition.last_level) {
let level = this.info.condition.last_level;
level.task = [];
level.complete = 0;
if (level.one_fenxiao_order_num > 0) {
let task = {
title: this.$lang('fenxiao.subordinateConsume'),
desc: this.$lang('fenxiao.subordinateConsumeCount') + level.one_fenxiao_order_num + this.$lang('fenxiao.orders'),
tips: this.$lang('fenxiao.subordinateConsumeCountTip'),
condition: level.one_fenxiao_order_num,
value: this.info.one_fenxiao_order_num,
progress: parseFloat(this.info.one_fenxiao_order_num) > parseFloat(level.one_fenxiao_order_num) ?
100 :
((parseFloat(this.info.one_fenxiao_order_num) / parseFloat(level.one_fenxiao_order_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_fenxiao_total_order > 0) {
let task = {
title: this.$lang('fenxiao.subordinateConsume'),
desc: this.$lang('fenxiao.subordinateConsumeMoney') + this.moneyFormat(level.one_fenxiao_total_order) + this.$lang('fenxiao.yuan'),
tips: this.$lang('fenxiao.subordinateConsumeMoneyTip'),
condition: this.moneyFormat(level.one_fenxiao_total_order),
value: this.info.one_fenxiao_total_order,
progress: parseFloat(this.info.one_fenxiao_total_order) > parseFloat(level.one_fenxiao_total_order) ?
100 :
((parseFloat(this.info.one_fenxiao_total_order) / parseFloat(level.one_fenxiao_total_order)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_fenxiao_order_money > 0) {
let task = {
title: this.$lang('fenxiao.subordinateConsume'),
desc: this.$lang('fenxiao.subordinateConsumeCommission', { account: this.fenxiaoWords.account }) + this.moneyFormat(level
.one_fenxiao_order_money) + this.$lang('fenxiao.yuan'),
tips: this.$lang('fenxiao.subordinateConsumeCommissionTip', { account: this.fenxiaoWords.account }),
condition: this.moneyFormat(level.one_fenxiao_order_money),
value: this.info.one_fenxiao_order_money,
progress: parseFloat(this.info.one_fenxiao_order_money) > parseFloat(level.one_fenxiao_order_money) ?
100 :
((parseFloat(this.info.one_fenxiao_order_money) / parseFloat(level.one_fenxiao_order_money)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.order_num > 0) {
let task = {
title: this.$lang('fenxiao.selfConsume'),
desc: this.$lang('fenxiao.selfConsumeCount') + level.order_num + this.$lang('fenxiao.orders'),
tips: this.$lang('fenxiao.selfConsumeCountTip'),
condition: level.order_num,
value: this.info.order_num,
progress: parseFloat(this.info.order_num) > parseFloat(level.order_num) ? 100 : ((parseFloat(this.info.order_num) / parseFloat(level.order_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.order_money > 0) {
let task = {
title: this.$lang('fenxiao.selfConsume'),
desc: this.$lang('fenxiao.selfConsumeMoney') + this.moneyFormat(level.order_money) + this.$lang('fenxiao.yuan'),
tips: this.$lang('fenxiao.selfConsumeMoneyTip'),
condition: this.moneyFormat(level.order_money),
value: this.info.order_money,
progress: parseFloat(this.info.order_money) > parseFloat(level.order_money) ?
100 :
((parseFloat(this.info.order_money) / parseFloat(level.order_money)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_child_num > 0) {
let task = {
title: this.$lang('fenxiao.inviteFriend'),
desc: this.$lang('fenxiao.inviteFriendCount') + level.one_child_num + this.$lang('fenxiao.people'),
tips: this.$lang('fenxiao.inviteFriendTip'),
condition: level.one_child_num,
value: this.info.one_child_num,
progress: parseFloat(this.info.one_child_num) > parseFloat(level.one_child_num) ?
100 :
((parseFloat(this.info.one_child_num) / parseFloat(level.one_child_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_child_fenxiao_num > 0) {
let task = {
title: this.$lang('fenxiao.inviteFriend'),
desc: this.$lang('fenxiao.inviteFenxiaoCount') + level.one_child_fenxiao_num + this.$lang('fenxiao.people'),
tips: this.$lang('fenxiao.inviteFenxiaoTip'),
condition: level.one_child_fenxiao_num,
value: this.info.one_child_fenxiao_num,
progress: parseFloat(this.info.one_child_fenxiao_num) > parseFloat(level.one_child_fenxiao_num) ?
100 :
((parseFloat(this.info.one_child_fenxiao_num) / parseFloat(level.one_child_fenxiao_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
return level;
}
},
fenxiaoIndexPageStyle() {
const style = {
...this.tabBarPagePaddingStyle
};
if (this.$util && this.$util.img) {
style.background = 'url(' + this.$util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')';
style.backgroundRepeat = 'no-repeat';
style.backgroundSize = '100%';
}
return this.$util.objToStyle(style);
}
}
};
</script>
<style lang="scss">
@import './public/css/index.scss';
</style>
<style scoped lang="scss">
::v-deep .uni-popup__wrapper {
height: auto;
}
::v-deep .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box,
.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box {
background: none;
max-height: unset !important;
overflow-y: hidden !important;
}
::v-deep .uni-popup__wrapper {
border-radius: 20rpx 20rpx 0 0;
}
</style>