xiuhuwangqiu/bundle/recharge/record.vue

<template>
    <view class="" style="padding-bottom: 20rpx;">
        <navbar title="充值记录"></navbar>

        <view v-if="listData.length>0" class="pbenv">
			<view class="address-list">
				<view class="address bg-white d-b-c" v-for="(item,index) in listData" :key="index">
					<view class="">
						<view class=" flex-1 mb10">
							<view class="user f32 address-info">
								<text>充值金额：{{ item.order_amount }}</text>
							</view>
							<view class="pt20 f26 gray3">
								订单编号：{{ item.order_sn }}
							</view>		
							<view class="pt20 f26 gray3">
								订单创建时间：{{ item.create_time }}
							</view>
						</view>
					</view>

					<view class="d-f a-i-c" @click="toInvoice(item.id)" v-if="item.fp_status == 0">
						<image class="add_icon_img" src="/static/icon/edit.png" mode="aspectFill"  style="width: 24rpx; height: 24rpx;"></image>
						<view class="" style="margin-left: 10rpx;">
							开票
						</view>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    import navbar from '@/components/navbar.vue';
    export default {
        components: {
            navbar,
        },

        data() {
			return {
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*数据*/
				listData: [],
				/*默认地址id*/
				default_id: '0',
				options: {}
			}
		},
		onLoad: function(options) {
			this.options = options;
		},
	
		onShow: function() {
			uni.showLoading({
				title: '加载中'
			});
			/*获取地址列表*/
			this.getData();
		},
		methods: {
			/*获取数据*/
			getData() {
				let self = this;
				let dataType = self.dataType;
				self._get('order.groundOrder/rechangeList', {}, function(res) {
					console.log("🚀 ~ res:", res)
					self.listData = res.data.lists;
					self.loadding = false;
					uni.hideLoading();
				});
			},

			// 去开票
			toInvoice(order_id) {
				console.log("🚀 ~ methods.toInvoice:")
				uni.navigateTo({
					url: `/pages/order/invoice?order_id=${order_id}&type=2`
				});
			},
		}
    }

</script>

<style lang="scss">
	page {
		background-color: $xh-bg;
	}

	.address-list {
		margin-top: 20rpx;
		border-top: 16rpx solid #F2F2F2;
		padding: 0 30rpx;
		padding-bottom: 90rpx;
	}

	.foot-btns {
		padding: 0;
	}

	.foot-btns .btn-red {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 0;
	}

	.none_add {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 318rpx;
	}

	.no_add {
		width: 292rpx;
		height: 202rpx;
	}

	.no_add_add {
		width: 630rpx;
		margin: 0 60rpx;
		height: 90rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		background: #365A9A !important;
		color: #FFFFFF;
		position: fixed;
		bottom: 40rpx;
		left: 0;
		right: 0;
	}

	.add_add {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0777CD;
		padding: 0 35rpx;
		border-bottom: 1rpx solid #D9D9D9;
	}

	.defaul_add {
		padding: 9rpx 14rpx 10rpx 15rpx;
		@include background_color('bg-op');
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F6220C;
		@include font_color('font_color');
	}

	.add_icon_img {
		width: 30rpx;
		height: 30rpx;
	}

	.none_line {
		width: 1rpx;
		height: 44rpx;
		background: #D9D9D9;
	}
	.add_add-btn{
		position: fixed;
		bottom: 40rpx;
		width:690rpx;
		margin: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		height: 90rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #365A9A !important;
		color: #fff;
	}
	.pbenv{
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
		box-sizing: border-box;
	}

	.address-info {
		font-size: 30rpx;
		color: #121212;
		line-height: 42rpx;
	}

	.address {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;

		.info {
			padding: 30rpx;
		}
	}
</style>