Delivery-merchant/pages/Wallet.vue

<template>
	<view class="titlenav">
		<!-- <titlenav :flag="true"></titlenav> -->
		<view class="top"><view class="title">财务中心</view></view>
		<view class="content">
			<view>
				<view class="text1">9918.50</view>
				<view class="text2">可提现金额(元)</view>
			</view>
			<view class="btn" @click="Withdrawal">提现</view>
		</view>
		<view class="time">
			<view class="time2" @click="show = true"><input type="text" :readonly="readonly" v-model="startTime" /></view>
			<view>
				<text class="text1 text2">收入 ¥6832.50</text>
				<text class="text1">提现 ¥5200.00</text>
			</view>
		</view>
		<u-picker mode="time" v-model="show" :params="params"></u-picker>
		<div class="list">
			<van-empty v-if="empty" image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wodeguanzhu.png" description="暂无收益记录哦"></van-empty>
			<template>
				<div v-for="(item, index) in recordList" :key="index">
					<bill-info :Info="item"></bill-info>
					<!-- <bill-info billType="pay" :Info="item"></bill-info> -->
				</div>
			</template>
		</div>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import BillInfo from '../components/BillInfo.vue';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: { Titlenav },
	data() {
		return {
			params: {
				year: true,
				month: true,
				hour: false,
				minute: false,
				second: false
			},
			empty: false,
			startTime: '2021年9月',
			show: false,
			recordList: [
				{
					amount: 0.01,
					attach: '17561',
					createdAt: '2021-07-27 19:32:00',
					del: false,
					id: 17562,
					remark: '',
					settleTime: '2021-07-27 19:32:00',
					title: '提现',
					type: 'WITHDRAW'
				}
			]
		};
	},
	computed: {
		...mapState(['systemInfo'])
	},
	methods: {
		confirm(e) {
			console.log(e);
		},
		Withdrawal() {
			uni.showModal({
				title: '实名认证',
				content: '您的账户还未实名认证，认证后可进行提现',
				confirmText: '前往认证',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/Authentication'
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.titlenav {
	background: #214bbe;
	.top {
		padding-top: 10px;
		.title {
			font-size: 22px;
			font-weight: bold;
			color: #ffffff;
			line-height: 26px;
			margin-left: 20px;
		}
	}
	.content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 33px 60px;
		.text1 {
			font-size: 36px;
			font-family: OSP-DIN, OSP;
			font-weight: normal;
			color: #ffffff;
			line-height: 40px;
		}
		.text2 {
			font-size: 13px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 18px;
		}
		.btn {
			width: 80px;
			height: 36px;
			background: #ffffff;
			border-radius: 4px;
			line-height: 36px;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			color: #214bbe;
		}
	}
	.time {
		height: 72px;
		background: #f5f7fa;
		border-radius: 16px 16px 0px 0px;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.time2 {
			width: 110px;
			padding: 5px 0;
			background: #ffffff;
			border-radius: 4px;
			text-align: center;
		}
		.text1 {
			font-size: 12px;
			font-weight: 400;
			color: #646566;
			line-height: 17px;
			&.text2 {
				margin-right: 16px;
			}
		}
	}
	.list {
		background: #ffffff;
	}
}
</style>