hly
/
pay-video-applet-uniapp-24-8-22
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

提交提现记录页面和添加退出功能

master
chenkun 10 months ago
parent
0d2f3b41bb
commit
2a534e16d5
8 changed files with 571 additions and 348 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -3
      components/toast/confirmationPopup.vue
  2. +2
    -1
      package.json
  3. +221
    -159
      pages/index/center.vue
  4. +63
    -57
      pages/mine/promotionRecord.vue
  5. +50
    -54
      pages/mine/releaseRecord.vue
  6. +116
    -69
      pages/mine/sonPage/release/releaseList.vue
  7. +1
    -1
      pages/mine/withdraw.vue
  8. +112
    -4
      pages/mine/withdrawalRecord.vue

+ 6
- 3
components/toast/confirmationPopup.vue View File

@ -12,15 +12,15 @@
</view>
<view class="btns" v-if="!cancel">
<view class="btn"
@click="$emit('confirm')">
@click="$emit('confirm')">
{{ confirmText }}
</view>
</view>
<view class="btnstwo" v-else>
<view class="btn c">
<view class="btn c" @click="$emit('cancel')">
取消
</view>
<view class="btn">
<view class="btn" @click="$emit('confirm')">
{{ confirmText }}
</view>
</view>
@ -46,6 +46,9 @@
open(){
this.$refs.popup.open();
},
close(){
this.$refs.popup.close();
}
}
}
</script>


+ 2
- 1
package.json View File

@ -15,6 +15,7 @@
"license": "ISC",
"dependencies": {
"ali-oss": "^6.21.0",
"dayjs": "^1.11.12"
"dayjs": "^1.11.12",
"moment": "^2.30.1"
}
}

+ 221
- 159
pages/index/center.vue View File

@ -1,168 +1,230 @@
<template>
<view style="display: flex;flex-direction: column; width: 100vw;height: 100vh;">
<tabber :select="2" />
<!-- 顶部 -->
<view style="width: 100%;height: 30%;">
<image src="/static/image/center/1.png" style="width: 100%;height: 100%;"></image>
</view>
<!--中部 用户信息-->
<view
style="border-radius: 20rpx;position: absolute;top: 20%;left: 10%; width:80%;height: 12%;z-index: 1;background: white;">
<!--头像-->
<view
style="position: absolute;z-index:2;width:33%;height:100%;border-radius: 50%;overflow: hidden;top: -32%;left: 0%;">
<image :src="userInfo.headImage || '微信用户'" style="width: 100%;height: 100%;"></image>
</view>
<!--福利中心-->
<view style="position: absolute;z-index:2;width:33%;height:30%;top: 13%;right: 2%;">
<image src="/static/image/center/flzx.png" style="width: 100%;height: 100%;"></image>
</view>
<!-- 未认证-->
<view style="position: absolute;z-index:2;width:15%;height:20%;top: 33%;left: 28%;">
<image src="/static/image/center/wrz.png" style="width: 100%;height: 100%;"></image>
</view>
<!-- 去认证 -->
<view style="position: absolute;z-index:2;width:55%;height:20%;top: 32%;left: 44%;">
<view style="display: flex;flex-direction: column; width: 100vw;height: 100vh;">
<tabber :select="2"/>
<!-- 顶部 -->
<view style="width: 100%;height: 30%;">
<image src="/static/image/center/1.png" style="width: 100%;height: 100%;"></image>
</view>
<!--中部 用户信息-->
<view
style="border-radius: 20rpx;position: absolute;top: 20%;left: 10%; width:80%;height: 12%;z-index: 1;background: white;">
<!--头像-->
<view
style="position: absolute;z-index:2;width:30%;height:90%;border-radius: 50%;overflow: hidden;top: -32%;left: 2%;">
<image :src="userInfo.headImage || '微信用户'" style="width: 100%;height: 100%;"></image>
</view>
<!--福利中心-->
<view style="position: absolute;z-index:2;width:33%;height:30%;top: 13%;right: 2%;">
<image src="/static/image/center/flzx.png" style="width: 100%;height: 100%;"></image>
</view>
<!-- 未认证-->
<view style="position: absolute;z-index:2;width:15%;height:20%;top: 45%;left: 28%;">
<image src="/static/image/center/wrz.png" style="width: 100%;height: 100%;"></image>
</view>
<!-- 去认证 -->
<view style="position: absolute;z-index:2;width:55%;height:20%;top: 43%;left: 46%;">
<span style="font-size: 26rpx;" class="textColor"
@click="$utils.navigateTo('/mine/authOption')">去认证</span>
</view>
<!-- 用户信息 -->
<view style="position: absolute;z-index:2;width:55%;height:20%;top: 60%;left: 7%;">
<view>
<span style="font-size: 35rpx;margin-right: 5rpx">{{ userInfo.nickName || '微信用户' }}</span>
<span style="font-size: 18rpx">{{ userInfo.phone }}</span>
</view>
</view>
<!-- 点赞量 -->
<view
style="display: flex;flex-direction: column;gap:2rpx ;position: absolute;z-index:2;width:15%;height:40%;top: 55%;right: 3%;">
<view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
<image src="/static/image/center/dianZan.svg" style="width: 40%;height: 84%;"></image>
</view>
<view style="display: flex;justify-content: center ;font-size: 20rpx;color:#777777">点赞量</view>
</view>
</view>
<!-- 下部 -->
<view style="width: 100%;height: 70%;padding-top:150rpx">
<view>
<!--上GridView-->
<view>
<uv-grid :col="4">
<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="goToPage(item)">
<img :src="item.imageUrl" :alt="item.title"
:style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}" />
<text style="font-size: 30rpx;color: #333333;">{{ item.title }}
</text>
</uv-grid-item>
</uv-grid>
</view>
<!--其他-->
<view style="margin:50rpx 0 0 50rpx;font-size: 40rpx;color: #333333;">其他</view>
<!--下GridView-->
<view style="margin-top: 50rpx;">
<uv-grid :col="4">
<uv-grid-item v-for="(item,index) in otherList" :key="index" @click="goToPage(item)">
<img :src="item.imageUrl" :alt="item.title"
:style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}" />
<text style="font-size: 30rpx;color: #333333;">{{ item.title }}
</text>
</uv-grid-item>
</uv-grid>
</view>
</view>
</view>
</view>
@click="$utils.navigateTo('/mine/authOption')">去认证</span>
</view>
<!-- 用户信息 -->
<view style="position: absolute;z-index:2;width:55%;height:20%;top: 60%;left: 7%;">
<view>
<span style="font-size: 35rpx;margin-right: 5rpx">{{ userInfo.nickName || '微信用户' }}</span>
<span style="font-size: 18rpx">{{ userInfo.phone }}</span>
</view>
</view>
<!-- 点赞量 -->
<view
style="display: flex;flex-direction: column;gap:2rpx ;position: absolute;z-index:2;width:15%;height:40%;top: 55%;right: 3%;">
<view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
<image src="/static/image/center/dianZan.svg" style="width: 40%;height: 84%;"></image>
</view>
<view style="display: flex;justify-content: center ;font-size: 20rpx;color:#777777">点赞量</view>
</view>
</view>
<!-- 下部 -->
<view style="width: 100%;height: 70%;padding-top:150rpx">
<view>
<!--上GridView-->
<view>
<uv-grid :col="4">
<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="goToPage(item)">
<img :src="item.imageUrl" :alt="item.title"
:style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}"/>
<text style="font-size: 30rpx;color: #333333;">{{ item.title }}
</text>
</uv-grid-item>
</uv-grid>
</view>
<!--其他-->
<view style="margin:50rpx 0 0 50rpx;font-size: 40rpx;color: #333333;">其他</view>
<!--下GridView-->
<view style="margin-top: 50rpx;">
<uv-grid :col="4">
<uv-grid-item v-for="(item,index) in otherList" :key="index" @click="goToPage(item)">
<img :src="item.imageUrl" :alt="item.title"
:style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}"/>
<text style="font-size: 30rpx;color: #333333;">{{ item.title }}
</text>
</uv-grid-item>
</uv-grid>
</view>
</view>
</view>
<!-- 退出弹框-->
<confirmationPopup
ref="confirmationPopup"
title="提示"
:cancel="true"
@confirm="handleConfirm"
@cancel="handleCancel"
confirmText="确认">
<view class="confirmationPopup">
<!-- <image src="/static/image/publish/upload.png"
style="width: 150rpx;height: 150rpx;"
mode=""></image> -->
<view style="text-align:center">
确认退出登录吗？
</view>
</view>
</confirmationPopup>
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import {
mapState
} from 'vuex'
export default {
components: {
tabber,
},
computed: {
...mapState(['userInfo']),
},
data() {
return {
// 基础列表
baseList: [{
name: 'photo',
imageUrl: '/static/image/center/1.png',
title: '我的发布',
gotoPageUrl: '/mine/releaseRecord'
},
{
name: 'lock',
imageUrl: '/static/image/center/1.png',
title: '我的推广',
gotoPageUrl: '/mine/promotionRecord'
},
{
name: 'star',
imageUrl: '/static/image/center/1.png',
title: '我的银行卡',
gotoPageUrl: '/mine/addBankCard'
},
{
name: 'star',
imageUrl: '/static/image/center/1.png',
title: '我的钱包',
gotoPageUrl: '/mine/purse'
},
],
// 其他列表
otherList: [{
name: 'photo',
imageUrl: '/static/image/center/1.png',
title: '实名信息'
},
{
name: 'lock',
imageUrl: '/static/image/center/1.png',
title: '帮助反馈'
},
],
}
},
onShow() {
// 获取用户个人信息
this.$store.commit('getUserInfo')
},
methods: {
// 点击列表跳转页面
goToPage(item) {
this.$utils.navigateTo(item.gotoPageUrl)
},
}
}
import {
mapState
} from 'vuex'
import tabber from '@/components/base/tabbar.vue'
import confirmationPopup from "@/components/toast/confirmationPopup.vue";
export default {
components: {
confirmationPopup,
tabber,
},
computed: {
...mapState(['userInfo']),
},
data() {
return {
// 基础列表
baseList: [{
name: 'photo',
imageUrl: '/static/image/center/1.png',
title: '我的发布',
gotoPageUrl: '/mine/releaseRecord'
},
{
name: 'lock',
imageUrl: '/static/image/center/1.png',
title: '我的推广',
gotoPageUrl: '/mine/promotionRecord'
},
{
name: 'star',
imageUrl: '/static/image/center/1.png',
title: '我的银行卡',
gotoPageUrl: '/mine/addBankCard'
},
{
name: 'star',
imageUrl: '/static/image/center/1.png',
title: '我的钱包',
gotoPageUrl: '/mine/purse'
},
],
// 其他列表
otherList: [
{
name: 'photo',
imageUrl: '/static/image/center/1.png',
title: '实名信息',
gotoPageUrl: '/mine/promotionRecord'
},
{
name: 'lock',
imageUrl: '/static/image/center/1.png',
title: '帮助反馈'
},
{
name: 'outLogin',
imageUrl: '/static/image/center/1.png',
title: '退出登录',
gotoPageUrl: '/mine/promotionRecord'
},
],
}
},
onShow() {
// 获取用户个人信息
this.$store.commit('getUserInfo')
},
methods: {
// 点击列表跳转页面
goToPage(item) {
if (item.name == 'outLogin') {
//
this.$refs.confirmationPopup.open()
return
}
this.$utils.navigateTo(item.gotoPageUrl)
},
handleConfirm() {
// 退出登录
console.log("退出登录")
this.$refs.confirmationPopup.close()
},
handleCancel() {
// 取消退出登录
console.log("取消退出登录")
this.$refs.confirmationPopup.close()
}
}
}
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.textColor {
background: $uni-linear-gradient-color;
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.textColor {
background: $uni-linear-gradient-color;
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
.confirmationPopup {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 200rpx;
image {
margin-top: 40rpx;
}
.info {
margin-top: 40rpx;
font-size: 26rpx;
}
}
</style>

+ 63
- 57
pages/mine/promotionRecord.vue View File

@ -14,15 +14,17 @@
</view>
<!--搜索条件-->
<view class="search" >
<view class="search">
<!--搜索框-->
<view style="width:40%;height:100%">
<uv-input placeholder="请输入内容" border="surround" clearable ></uv-input>
<uv-input placeholder="请输入内容" border="surround" clearable></uv-input>
</view>
<!--开始时间-->
<view class="dateTimeCls">
<view class="date">
2023-12-23
<view class="date" @click="startDateOpen">
<uv-datetime-picker ref="startDateRef" v-model="queryParams.startDate" mode="date"
@confirm="startDateChange">
</uv-datetime-picker>
</view>
<view class="image">
<image src="/static/image/promotionRecord/2.svg" style="width: 100%;height: 100%"></image>
@ -30,8 +32,11 @@
</view>
<!--结束时间-->
<view class="dateTimeCls">
<view class="date">
2023-12-23
<view class="date" @click="endDateOpen">
{{ queryParams.endDate }}
<uv-datetime-picker ref="endDateRef" v-model="queryParams.endDate" mode="date"
@confirm="endDateChange">
</uv-datetime-picker>
</view>
<view class="image">
<image src="/static/image/promotionRecord/2.svg" style="width: 100%;height: 100%"></image>
@ -48,10 +53,10 @@
<script>
import PromotionRecordList from "@/pages/mine/sonPage/promotion/promotionRecordList.vue";
import moment from "moment";
export default {
components: {PromotionRecordList},
data() {
return {
promotionRecordList: [
@ -61,58 +66,58 @@ export default {
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
{
title: "推广记录",
createTime: '2024-08-22 09:00:00',
createBy: "24小时",
isPay: "￥100"
},
],
queryParams: {
pageNo: 1,
pageSize: 10,
startDate:moment(new Date()).format('YYYY-MM-DD'),
endDate: moment(new Date()).format('YYYY-MM-DD'),
},
}
},
methods: {}
methods: {
startDateChange(val) {
console.log(val.value, "======startDateChange=======")
this.queryParams.startDate = moment(new Date(val.value)).format('YYYY-MM-DD')
},
startDateOpen() {
this.$refs.startDateRef.open();
},
endDateChange(val) {
console.log(val.value, "=======endDateChange======")
var aaa = moment(new Date(val.value)).format('YYYY-MM-DD')
console.log(aaa, "aaa")
this.queryParams.endDate = val.value
},
endDateOpen() {
this.$refs.endDateRef.open();
},
startDateFormatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
endDateFormatter(type, value) {
console.log(type, value, "======endDateFormatter=======")
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
}
}
}
</script>
@ -123,7 +128,8 @@ export default {
margin: 0;
padding: 0;
}
.promotionRecord{
.promotionRecord {
width: 100vw;
height: 100vh;


+ 50
- 54
pages/mine/releaseRecord.vue View File

@ -14,77 +14,38 @@
</view>
<!--标签栏-->
<view class="tabbar">
<view class="tabbarItemActive" @click="getData('all')">
<span class="1==1 ? 'active' : ''">全部</span>
<view class="tabbarItemActive" @click="tabChange('all')">
<span :class="checkedIndex==0 ? 'active' : ''">全部</span>
</view>
<view class="tabbarItemNoActive" @click="getData('all')">
<span class="1==1 ? 'active' : ''">贴子</span>
<view class="tabbarItemNoActive" @click="tabChange('tiezi')">
<span :class="checkedIndex==1 ? 'active' : ''">贴子</span>
</view>
<view class="tabbarItemNoActive" @click="getData('all')">
<span class="1==1 ? 'active' : ''">名片</span>
<view class="tabbarItemNoActive" @click="tabChange('mingpian')">
<span :class="checkedIndex==2 ? 'active' : ''">名片</span>
</view>
</view>
<!--发布列表-->
<view style="" class="publishListClass">
<PublishList :list="publishList"/>
<ReleaseList :list="recordsList"/>
</view>
</view>
</view>
</template>
<script>
import PublishList from "@/pages/mine/sonPage/release/releaseList.vue";
import ReleaseList from "@/pages/mine/sonPage/release/releaseList.vue";
import {
mapState
} from 'vuex'
export default {
name: "releaseRecord",
components: {
PublishList
ReleaseList
},
data() {
return {
publishList: [
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
createBy: "小飞",
isPay: "是"
},
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
createBy: "小飞",
isPay: "是"
},
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
createBy: "小飞",
isPay: "是"
},
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
createBy: "小飞",
isPay: "是"
},
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
createBy: "小飞",
isPay: "是"
},
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
createBy: "小飞",
isPay: "是"
},
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
createBy: "小飞",
isPay: "是"
},
recordsList: [
{
title: "这是一条动态",
createTime: '2024-08-22 09:00:00',
@ -92,12 +53,47 @@ export default {
isPay: "是"
},
],
checkedIndex: 0,
queryParams: {
pageNo: 1,
pageSize: 10,
},
};
},
mounted() {
this.getData()
},
computed: {
...mapState(['userInfo']),
},
onShow() {
// 检查是否登录
// this.$refs.showLogin.checkLogin()
// 获取用户个人信息
this.$store.commit('getUserInfo')
},
methods: {
getData(type) {
console.log(type, "点击了标签栏")
}
this.$api('infoGetMyReleasePage', {
pageNo: this.queryParams.pageNo,
pageSize: this.queryParams.pageSize,
// 缺少type参数，需要补充
}, res => {
if (res.code == 200) {
this.recordsList = res.result.records
console.log(res.result, "发布列表")
}
})
},
// 标签栏发生变化
tabChange(type) {
this.checkedIndex = type == 'all' ? 0 : (type == 'tiezi' ? 1 : 2)
this.queryParams.pageNo = 1
this.queryParams.pageSize = 10
this.getData()
},
}
}
</script>


+ 116
- 69
pages/mine/sonPage/release/releaseList.vue View File

@ -1,94 +1,141 @@
<template>
<view class="publishList">
<view class="item" v-for="(item, index) in list"
@click="$utils.navigateTo('/publish/postDetail?id=123')"
:key="index">
<image src="/static/image/center/1.png" style="width: 40%"></image>
<view class="text">
<view class="title">
{{ item.title }}
</view>
<view class="createBy">
<view class="">
是否置顶：{{ item.createBy }}
</view>
</view>
<view class="publishList">
<view class="item" v-for="(item, index) in list"
@click="gotoDetail(item)"
:key="index">
<image :src="item.cover" style="width: 40%"></image>
<view class="text">
<view class="title">
{{ item.title }}
</view>
<view class="createBy">
<view class="">
是否置顶：{{ item.createBy }}
</view>
</view>
<view class="isPay">
<view class="">
是否付费：{{ item.isPay }}
</view>
</view>
<view class="createTime">
发布时间：{{ item.createTime }}
</view>
</view>
</view>
</view>
<view class="createTime">
发布时间：{{ item.createTime }}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"releaseList",
props : ['list'],
data() {
return {
};
}
}
export default {
name: "releaseList",
props: ['list'],
data() {
return {
total: 0,
queryParams: {
pageNo: 1,
pageSize: 10,
}
};
},
onShow() {
this.getData()
},
onReachBottom() {
let allTotal = this.queryParams.pageNo * this.queryParams.pageSize
if (allTotal < this.total) {
//当前条数小于总条数 则增加请求数
this.queryParams.pageSize += 10
this.getData() //调用加载数据方法
}
},
methods: {
getData() {
this.$api('infoGetMyReleasePage', {
pageNo: this.queryParams.pageNo,
pageSize: this.queryParams.pageSize,
// 缺少id参数，需要补充
}, res => {
if (res.code == 200) {
this.list = res.result.records
this.total = res.result.total
}
})
},
gotoDetail(item) {
// 根据字段区分跳转到不同页面
if (1==1){
// 跳转到动态详情页面
this.$utils.navigateTo('/publish/postDetail?id=' + item.id)
}else{
// 跳转到演员详情页面
this.$utils.navigateTo('/publish/actorDetail?id=' + item.id)
}
}
}
}
</script>
<style lang="scss" scoped>
.publishList{
.publishList {
width: 90%;
.item{
height: 200rpx;
width: 100%;
background-color: #fff;
overflow: hidden;
border-radius: 10rpx;
color: #777;
display: flex;
font-size: 24rpx;
margin: 30rpx 0;
image{
width: 50%;
height: 100%;
}
.text{
display: flex;
flex-direction: column;
padding: 16rpx;
width: 50%;
.title{
font-size: 30rpx;
font-weight: 600;
color: #000;
}
.createBy{
display: flex;
margin-top: auto;
margin-bottom: 10rpx;
justify-content: space-between;
&>view{
display: flex;
align-items: center;
justify-content: center;
}
}
.isPay{
.item {
height: 200rpx;
width: 100%;
background-color: #fff;
overflow: hidden;
border-radius: 10rpx;
color: #777;
display: flex;
font-size: 24rpx;
margin: 30rpx 0;
image {
width: 50%;
height: 100%;
}
.text {
display: flex;
flex-direction: column;
padding: 16rpx;
width: 50%;
.title {
font-size: 30rpx;
font-weight: 600;
color: #000;
}
.createBy {
display: flex;
margin-top: auto;
margin-bottom: 10rpx;
justify-content: space-between;
& > view {
display: flex;
align-items: center;
justify-content: center;
}
}
.isPay {
display: flex;
margin-top: auto;
margin-bottom: 10rpx;
color: #7395f4;
justify-content: space-between;
&>view{
& > view {
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
}
}
</style>

+ 1
- 1
pages/mine/withdraw.vue View File

@ -56,7 +56,7 @@ export default {
// 提现
withdrawPage() {
// this.$utils.navigateTo('/mine/withdraw');
this.$utils.navigateTo('/mine/withdrawalRecord');
}
}
}


+ 112
- 4
pages/mine/withdrawalRecord.vue View File

@ -1,6 +1,34 @@
<template>
<view>
提现记录
<view class="withdrawalRecord">
<!--顶部导航栏-->
<navbar leftClick @leftClick="$utils.navigateBack" title="提现记录" />
<!--提现记录页面-->
<view class="content">
<view class="list" v-for="(item,index) in list ">
<!--第一行-->
<view class="item1">
<view class="left">提现金额</view>
<view class="right">
<view class="money">${{item.money}}</view>
<view :class="item.flag ? 'yiDaoZhangClass' : 'shenHeClass'">已到账</view>
</view>
</view>
<!--第二行-->
<view class="item2">
<view class="left">申请时间</view>
<view class="right">{{item.ApplyDateTime}}</view>
</view>
<!--第三行-->
<view class="item2">
<view class="left">到账时间</view>
<view class="right">{{item.daozhangsj}}</view>
</view>
</view>
</view>
</view>
</template>
@ -8,12 +36,92 @@
export default {
data() {
return {
list: [{
money: '13354',
ApplyDateTime: '2024.12.12 16:55:55',
daozhangsj: '2024.12.12 16:55:55',
flag: true,
},
{
money: '13354',
ApplyDateTime: '2024.12.12 16:55:55',
daozhangsj: '2024.12.12 16:55:55',
flag: false,
}
]
};
}
}
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.withdrawalRecord {
background-color: #f8faff;
height: calc(100vh - 240rpx);
width: 100vw;
.content {
padding: 20rpx 20rpx 50rpx 20rpx;
box-sizing: border-box;
width: 100vw;
.list {
box-sizing: border-box;
border-bottom: 2rpx solid #e0e2e6;
padding: 30rpx;
display: flex;
flex-direction: column;
gap: 10rpx;
.item1 {
display: flex;
.left {
width: 30%;
</style>
}
.right {
display: flex;
width: 70%;
.money {
width: 75%;
}
.yiDaoZhangClass {
width: 25%;
background: $uni-linear-gradient-color;
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
.shenHeClass {
width: 25%;
}
}
}
.item2 {
display: flex;
.left {
width: 30%;
}
.right {
width: 70%;
}
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save