charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 修改样式

Browse Source
This commit is contained in:
charles
2026-07-16 15:54:26 +08:00
parent 4a669ec670
commit aa2f1009e8
12 changed files with 538 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/rwa_package/dongjian/jia.vue
+280 -263
View File
@@ -10,17 +10,17 @@
<view class="box-panel" style="padding:0;margin-bottom:30rpx;">
<view class="box-top">
<view class="flex-c-lr" style="align-items: center;">
<text class="text-40 text-bold text-gray">{{lockedData ? lockedData.selfBuyLocked : 0}}</text>
<text class="text-40 text-bold text-gray">{{ lockedData ? lockedData.selfBuyLocked : 0 }}</text>
<text class="text-fu1 text-24 text-w-400">自购锁定量(数字积分)</text>
</view>
<view class="flex-c-lr" style="align-items: center;">
<text class="text-40 text-bold text-gray">{{lockedData ? lockedData.spreadLocked : 0}}</text>
<text class="text-40 text-bold text-gray">{{ lockedData ? lockedData.spreadLocked : 0 }}</text>
<text class="text-fu1 text-24 text-w-400">推广锁定量(数字积分)</text>
</view>
</view>
<view class="tab-view">
<view class="tab-list" @click="onTab(index)" v-for="(item,index) in tabList" :key="index">
<text class="text-32" :style="{color:index == curTab ? '#7934F6' : '#666666'}">{{item}}</text>
<view class="tab-list" @click="onTab(index)" v-for="(item, index) in tabList" :key="index">
<text class="text-32" :style="{ color: index == curTab ? '#7934F6' : '#666666' }">{{ item }}</text>
<view class="tab-line" v-if="index == curTab"></view>
</view>
</view>
@@ -35,28 +35,28 @@
<view class="box-li">
<view class="box-biao">
<view class="box-head">
<view class="box-head-view" v-for="(item,index) in topHead" :key="item" :style="{
borderRightWidth:index == 2 ? 0 : '1rpx'
<view class="box-head-view" v-for="(item, index) in topHead" :key="item" :style="{
borderRightWidth: index == 2 ? 0 : '1rpx'
}">
<text class="text-fu text-24">{{item}}</text>
<text class="text-fu text-24">{{ item }}</text>
</view>
</view>
<view class="list-all-view">
<view class="list-view" v-for="(item,index) in topList" :key="index">
<view class="list-view" v-for="(item, index) in topList" :key="index">
<view class="list-view-box">
<text class="text-fu text-24 text-bold">{{item.amount}}</text>
<text class="text-fu text-24 text-bold">{{ item.amount }}</text>
</view>
<view class="list-view-box">
<text class="text-fu text-24 text-bold">{{item.time}}</text>
<text class="text-fu text-24 text-bold">{{ item.time }}</text>
</view>
<view class="list-view-box" style="borderRightWidth:0">
<text class="text-fu text-24 text-bold">{{item.source}}</text>
<text class="text-fu text-24 text-bold">{{ item.source }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="box-list" style="margin-top:24rpx;">
<view class="head-box">
@@ -67,105 +67,100 @@
<view class="box-li">
<view class="box-biao">
<view class="box-head">
<view class="box-head-view" v-for="(item,index) in bottomHead" :key="item" :style="{
borderRightWidth:index == 1 ? 0 : '1rpx'
<view class="box-head-view" v-for="(item, index) in bottomHead" :key="item" :style="{
borderRightWidth: index == 1 ? 0 : '1rpx'
}">
<text class="text-fu text-24">{{item}}</text>
<text class="text-fu text-24">{{ item }}</text>
</view>
</view>
<view class="list-all-view">
<view class="list-view" v-for="(item,index) in bottomList" :key="index">
<view class="list-view" v-for="(item, index) in bottomList" :key="index">
<view class="list-view-box">
<text class="text-fu text-24 text-bold">{{item.amount}}</text>
<text class="text-fu text-24 text-bold">{{ item.amount }}</text>
</view>
<view class="list-view-box" style="borderRightWidth:0">
<text class="text-fu text-24 text-bold">{{item.time}}</text>
<text class="text-fu text-24 text-bold">{{ item.time }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="box-panel mt-32 mb-32" v-if="curTab == 0">
<view class="box-panel mt-32 mb-32" v-if="curTab == 0">
<text class="text-gray text-28 text-bold" style="font-weight: bold;">数字积分获取说明</text>
<text class="text-fu text-24" style="margin-top:24rpx">1.商城优选区消费1:1获得贡献值，每消费1元获得1贡献值，次日根据当日商城营收占比获得数字积分。</text>
<text class="text-fu text-24"
style="margin-top:24rpx">1.商城优选区消费1:1获得贡献值，每消费1元获得1贡献值，次日根据当日商城营收占比获得数字积分。</text>
<text class="text-fu text-24 " style="margin-top:24rpx">2.直推用户消费10:1获得贡献值，直推用户优选区每消费10元您将获得1积分。</text>
<text class="text-fu text-24 " style="margin-top:24rpx">3.积分获得后均为锁定状态。</text>
<text class="text-gray text-28 text-bold" style="margin-top:48rpx">数字积分解锁说明</text>
<text class="text-fu text-24 " style="margin-top:24rpx">1.您本人在商城消费获得的积分，每日按1‰自然解锁。</text>
<text class="text-fu text-24 " style="margin-top:24rpx">2.直推用户消费获得的贡献值5：1解锁您本人消费获得的数字积分。</text>
<text class="text-fu text-24 " style="margin-top:24rpx">3.直推获得的奖励，根据您在商城的消费获得的贡献值2:1进行解锁，每获得2贡献值解锁1积分。</text>
<text class="text-fu text-24 " style="margin-top:24rpx">4.直推获得的奖励有效期7日，7日未解锁的部分将自动归属于上级，上级获得该奖励后也为锁定状态有效期7日，7日未解锁的部分将自动销毁</text>
<text class="text-fu text-24 " style="margin-top:24rpx">5.若发生退货退款等因素，信任桥将回收各部分奖励，若数字积分已兑换，则不符合7天无理由退货。</text>
<text class="text-fu text-24 "
style="margin-top:24rpx">3.直推获得的奖励，根据您在商城的消费获得的贡献值2:1进行解锁，每获得2贡献值解锁1积分。</text>
<text class="text-fu text-24 "
style="margin-top:24rpx">4.直推获得的奖励有效期7日，7日未解锁的部分将自动归属于上级，上级获得该奖励后也为锁定状态有效期7日，7日未解锁的部分将自动销毁</text>
<text class="text-fu text-24 "
style="margin-top:24rpx">5.若发生退货退款等因素，信任桥将回收各部分奖励，若数字积分已兑换，则不符合7天无理由退货。</text>
<text class="text-fu text-24 " style="margin-top:24rpx">6.最终解释权归信任桥所有。</text>
</view>
<!-- (2)转盘抽奖获得 -->
<view class="tab-two-panel" v-if="curTab == 1">
<mescroll-uni
ref="mescrollRef"
@down="downCallback"
@up="upCallback"
:up="upOption"
:down="downOption"
@init="mescrollInit"
:fixed="false"
>
<view class="mescrollUniView">
<view class="dai-list-view" v-for="(item,index) in daiList" :key="index">
<view class="dai-top">
<view class="time-view">
<text class="text-zu text-24" style="margin-right:12rpx">距销毁</text>
<u-count-down
:time="item.time"
format="HH:mm:ss"
autoStart
millisecond
@finish="onFinish"
:ref="'time' + item.refId"
@change="onChange($event,index)"
>
<view class="time-panel">
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{ item.timeData.days>10?item.timeData.days:'0'+item.timeData.days}}</text>
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@init="mescrollInit" :fixed="false">
<view class="mescrollUniView">
<view class="dai-list-view" v-for="(item, index) in daiList" :key="index">
<view class="dai-top">
<view class="time-view">
<text class="text-zu text-24" style="margin-right:12rpx">距销毁</text>
<u-count-down :time="item.time" format="HH:mm:ss" autoStart millisecond
@finish="onFinish" :ref="'time' + item.refId" @change="onChange($event, index)">
<view class="time-panel">
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{
item.timeData.days > 10 ? item.timeData.days : '0' + item.timeData.days}}</text>
</view>
<text class="text-zu text-24" style="margin:0 10rpx">天</text>
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{
item.timeData.hours > 10 ? item.timeData.hours : '0' + item.timeData.hours}}</text>
</view>
<text class="text-24" style="margin:0 10rpx">:</text>
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{ item.timeData.minutes
}}</text>
</view>
<text class="text-24" style="margin:0 10rpx">:</text>
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{ item.timeData.seconds
}}</text>
</view>
</view>
<text class="text-zu text-24" style="margin:0 10rpx">天</text>
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{ item.timeData.hours>10?item.timeData.hours:'0'+item.timeData.hours}}</text>
</view>
<text class="text-24" style="margin:0 10rpx">:</text>
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{ item.timeData.minutes }}</text>
</view>
<text class="text-24" style="margin:0 10rpx">:</text>
<view class="time__custom">
<text class="text-24" style="color:#FE2E2E">{{ item.timeData.seconds }}</text>
</view>
</view>
</u-count-down>
</u-count-down>
</view>
</view>
<view class="dai-mid" style="margin-top:40rpx;">
<text class="text-32 text-fu1">下级:</text>
<text class="text-32 text-gray">{{ item.lowerLevelPhone }}</text>
</view>
<view class="dai-mid" style="margin-top:32rpx;">
<text class="text-32 text-fu1">积分奖励总量:</text>
<text class="text-32 text-gray">{{ item.expendAmount }}</text>
</view>
<view class="dai-progress" style="margin-top:40rpx;">
<u-line-progress :percentage="item.unlockRatio" activeColor="#7934F6" height="16rpx"
:showText="true"></u-line-progress>
</view>
<view class="dai-bottom">
<text class="text-24 text-fu1">0</text>
<text class="text-24 text-fu1">{{ item.Tbclockacmont }}</text>
</view>
</view>
<view class="dai-mid" style="margin-top:40rpx;">
<text class="text-32 text-fu1">下级:</text>
<text class="text-32 text-gray">{{item.lowerLevelPhone}}</text>
</view>
<view class="dai-mid" style="margin-top:32rpx;">
<text class="text-32 text-fu1">积分奖励总量:</text>
<text class="text-32 text-gray">{{item.expendAmount}}</text>
</view>
<view class="dai-progress" style="margin-top:40rpx;">
<u-line-progress :percentage="item.unlockRatio" activeColor="#7934F6" height="16rpx" :showText="true" ></u-line-progress>
</view>
<view class="dai-bottom">
<text class="text-24 text-fu1">0</text>
<text class="text-24 text-fu1">{{item.Tbclockacmont}}</text>
</view>
</view>
</view>
</mescroll-uni>
</view>
</view>
@@ -176,7 +171,7 @@
<script>
import { getUserInfo } from '@/api/auth.js';
import { getVcoinLocked,getVcoinReleaseLog,getUserExpendTbcList } from '@/api/finance.js';
import { getVcoinLocked, getVcoinReleaseLog, getUserExpendTbcList } from '@/api/finance.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import DownPopup from '@/components/common/down-popup.vue';
@@ -190,33 +185,33 @@ import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {
mixins: [MescrollMixin],
components: { Header, TopSafe, DownPopup,MescrollUni },
components: { Header, TopSafe, DownPopup, MescrollUni },
data() {
return {
lockedData:null,
topHead:['解锁数量','解锁时间','触发解锁订单'],
bottomHead:['解锁数量','解锁时间'],
topList:[],
bottomList:[],
tabList:['已解锁','待解锁'],
curTab:0,
daiList:[],
lockedData: null,
topHead: ['解锁数量', '解锁时间', '触发解锁订单'],
bottomHead: ['解锁数量', '解锁时间'],
topList: [],
bottomList: [],
tabList: ['已解锁', '待解锁'],
curTab: 0,
daiList: [],
upOption: {
auto: false,
page: {
size: 10, // 每页数据的数量,默认10
},
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: `空空如也`,
},
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
auto: false,
page: {
size: 10, // 每页数据的数量,默认10
},
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: `空空如也`,
},
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
downOption: {
auto: false,
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
auto: false,
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
};
},
@@ -224,64 +219,64 @@ export default {
this.init();
},
methods: {
onChange(e,index){
this.daiList[index].timeData = e;
console.log('e',e)
onChange(e, index) {
this.daiList[index].timeData = e;
console.log('e', e)
},
onFinish(){
onFinish() {
this.downCallback();
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
this.mescroll = mescroll;
},
upCallback(page) {
let pageNum = page.num;
let pageSize = page.size;
let params = {
status:0,
page: page.num,
pageSize: page.size,
};
getUserExpendTbcList(params).then(res=>{
let curPageLen = '';
if(res.data.entitys){
curPageLen = res.data.entitys.length;
if (page.num === 1) this.daiList = [];
this.daiList = this.daiList.concat(res.data.entitys);
this.daiList.forEach(item=>{
item.time = item.endDate - item.date;
item.timeData = {};
})
console.log('daiList',this.daiList)
}else{
curPageLen = 0;
}
let pageNum = page.num;
let pageSize = page.size;
let params = {
status: 0,
page: page.num,
pageSize: page.size,
};
getUserExpendTbcList(params).then(res => {
let curPageLen = '';
if (res.data.entitys) {
curPageLen = res.data.entitys.length;
if (page.num === 1) this.daiList = [];
this.daiList = this.daiList.concat(res.data.entitys);
this.daiList.forEach(item => {
item.time = item.endDate - item.date;
item.timeData = {};
})
console.log('daiList', this.daiList)
} else {
curPageLen = 0;
}
this.mescroll.endBySize(curPageLen, res.data.totalCount);
})
})
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
},
onTab(index){
if(this.curTab != index){
onTab(index) {
if (this.curTab != index) {
this.curTab = index;
if(this.curTab == 0){
if (this.curTab == 0) {
this.daiList = [];
}else{
} else {
this.downCallback();
}
}
},
onJump(item){
onJump(item) {
uni.navigateTo({
url:`/pages/other_package/productInfo/productInfo?id=${item.refId}`
url: `/pages/other_package/productInfo/productInfo?id=${item.refId}`
})
},
init() {
@@ -291,40 +286,40 @@ export default {
this.vcoinReleaseLog(2);
// this.getQuichens()
},
vcoinLocked(){
getVcoinLocked().then(res=>{
vcoinLocked() {
getVcoinLocked().then(res => {
if (res.bizcode == 100) {
this.lockedData = res.data;
}
})
},
vcoinReleaseLog(val){
vcoinReleaseLog(val) {
let params = {
page:1,
pageSize:10000,
type:val
page: 1,
pageSize: 10000,
type: val
}
getVcoinReleaseLog(params).then(res=>{
getVcoinReleaseLog(params).then(res => {
if (res.bizcode == 100) {
if(val == 1){
if (val == 1) {
this.topList = res.data.entitys || [];
}else{
} else {
this.bottomList = res.data.entitys || [];
}
this.topList.forEach(item=>{
this.topList.forEach(item => {
item.time = func.formatDate(new Date(item.ctdate), 4);
})
this.bottomList.forEach(item=>{
this.bottomList.forEach(item => {
item.time = func.formatDate(new Date(item.ctdate), 4);
})
}
})
},
getQuichens() {
let params ={
page:1,
pageSize:1000
let params = {
page: 1,
pageSize: 1000
}
quickens(params).then(res => {
if (res.bizcode == 100) {
@@ -381,66 +376,74 @@ export default {
width: 100%;
height: 240rpx;
display: flex;
min-height:240rpx;
margin-bottom:40rpx;
min-height: 240rpx;
margin-bottom: 40rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.tab-two-panel{
width:100%;
height:calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
min-height:calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
.tab-two-panel {
width: 100%;
height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
min-height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
display: flex;
flex-direction: column;
padding: 0 32rpx;
box-sizing: border-box;
.mescrollUniView{
width:calc(100vw - 64rpx);
height:calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
min-height:calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
.mescrollUniView {
width: calc(100vw - 64rpx);
height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
min-height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
display: flex;
flex-direction: column;
.dai-list-view{
width:100%;
height:344rpx;
min-height:344rpx;
margin-bottom:24rpx;
.dai-list-view {
width: 100%;
height: 344rpx;
min-height: 344rpx;
margin-bottom: 24rpx;
display: flex;
flex-direction: column;
padding: 32rpx;
box-sizing: border-box;
border-radius: 16rpx;
border: 2rpx solid #EAEAEA;
.dai-bottom{
width:100%;
margin-top:12rpx;
.dai-bottom {
width: 100%;
margin-top: 12rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.dai-progress{
width:100%;
height:16rpx;
min-height:16rpx;
.dai-progress {
width: 100%;
height: 16rpx;
min-height: 16rpx;
display: flex;
}
.time-view{
width:100%;
height:40rpx;
min-height:40rpx;
.time-view {
width: 100%;
height: 40rpx;
min-height: 40rpx;
display: flex;
flex-direction: row;
align-items: center;
.time-panel{
height:40rpx;
.time-panel {
height: 40rpx;
display: flex;
flex:1;
flex: 1;
flex-direction: row;
align-items: center;
.time__custom{
width:48rpx;
height:40rpx;
.time__custom {
width: 48rpx;
height: 40rpx;
background-color: rgba(254, 46, 46, 0.10);
display: flex;
align-items: center;
@@ -449,17 +452,19 @@ export default {
}
}
}
.dai-mid{
width:100%;
height:32rpx;
.dai-mid {
width: 100%;
height: 32rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.dai-top{
width:100%;
height:40rpx;
.dai-top {
width: 100%;
height: 40rpx;
display: flex;
flex-direction: row;
align-items: cneter;
@@ -467,8 +472,9 @@ export default {
}
}
}
.box-panel {
position: relative;
z-index: 1;
display: flex;
@@ -476,9 +482,10 @@ export default {
width: 100%;
background-color: #fff;
box-sizing: border-box;
padding: 0 32rpx;
box-sizing: border-box;
.box-top {
width: 100%;
height: 90rpx;
@@ -489,48 +496,52 @@ export default {
padding: 0 32rpx;
box-sizing: border-box;
}
.tab-view{
width:100%;
height:80rpx;
min-height:80rpx;
.tab-view {
width: 100%;
height: 80rpx;
min-height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom:2rpx solid #D0D7DE;
border-bottom: 2rpx solid #D0D7DE;
box-sizing: border-box;
margin-top:48rpx;
.tab-list{
width:100%;
height:100%;
margin-top: 48rpx;
.tab-list {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.tab-line{
width:48rpx;
.tab-line {
width: 48rpx;
background-color: #7934F6;
height:4rpx;
height: 4rpx;
position: absolute;
bottom:0;
bottom: 0;
}
}
}
.box-list {
width:100%;
width: 100%;
display: flex;
padding:24rpx 0 4rpx;
padding: 24rpx 0 4rpx;
box-sizing: border-box;
background: rgba(121,52,246,0.08);
background: rgba(121, 52, 246, 0.08);
border-radius: 12rpx;
flex-direction: column;
align-items: center;
.box-li{
width:calc(100% - 8rpx);
height:386rpx;
min-height:396rpx;
.box-li {
width: calc(100% - 8rpx);
height: 386rpx;
min-height: 396rpx;
border-radius: 12rpx;
background-color: #fff;
display: flex;
@@ -538,77 +549,83 @@ export default {
align-items: center;
padding: 16rpx 24rpx;
box-sizing: border-box;
.box-biao{
width:100%;
height:100%;
.box-biao {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
border:1rpx solid #eaeaea;
border: 1rpx solid #eaeaea;
border-radius: 16rpx;
.list-all-view{
flex:1;
.list-all-view {
flex: 1;
display: flex;
overflow-y: auto;
width:100%;
width: 100%;
flex-direction: column;
.list-view{
width:100%;
height:64rpx;
.list-view {
width: 100%;
height: 64rpx;
display: flex;
flex-direction: row;
min-height:64rpx;
.list-view-box{
flex:1;
height:100%;
min-height: 64rpx;
.list-view-box {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-right:1rpx solid #EAEAEA;
border-right: 1rpx solid #EAEAEA;
box-sizing: border-box;
border-bottom:1rpx solid #EAEAEA;
border-bottom: 1rpx solid #EAEAEA;
}
}
}
.box-head{
width:100%;
height:80rpx;
min-height:80rpx;
.box-head {
width: 100%;
height: 80rpx;
min-height: 80rpx;
display: flex;
flex-direction: row;
.box-head-view{
flex:1;
height:100%;
.box-head-view {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-right:1rpx solid #EAEAEA;
border-right: 1rpx solid #EAEAEA;
box-sizing: border-box;
border-bottom:1rpx solid #EAEAEA;
border-bottom: 1rpx solid #EAEAEA;
background-color: #F8F8F8;
}
}
}
}
.head-box{
width:100%;
height:88rpx;
min-height:88rpx;
.head-box {
width: 100%;
height: 88rpx;
min-height: 88rpx;
position: relative;
display: flex;
flex-direction: column;
padding: 0 24rpx;
box-sizing: border-box;
.icon-img{
width:42rpx;
height:36rpx;
.icon-img {
width: 42rpx;
height: 42rpx;
position: absolute;
right:24rpx;
top:-8rpx;
right: 24rpx;
top: -8rpx;
}
}
}