androidCN/pages/index/BillPending/BillPending.vue

<template>

	<view class="page">
		<u-tabs :list="tabs" @click="sectionChange" style="background-color: #fff;" :current=current
			:itemStyle="{'width':'250rpx','padding':'24rpx'}" lineHeight="2px" lineWidth="30px"></u-tabs>
		<!-- 账单明细 -->
		<view class="contain" v-show="cdshow==0">
			<view class="topbilledit">
				<view class="changetime1">
					<picker mode="date" :value="myday" fields="month" @change="dateChange">
						<view class="selestDate">{{myday}}</view>
					</picker>
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
				</view>
			</view>
			<view style="padding:16rpx 0 16rpx 32rpx">
				共有 <span style="color: red">{{totalnumber}}</span>条记录
			</view>
			<view class="u-listdata">
				<u-list @scrolltolower="scrolltolower" :pagingEnabled='true'
					style="height:400px;flex:1;padding-bottom: 49px;">
					<u-list-item v-for="(item, index) in indexList1" :key="index">
						<view class="paisong">
							<u-icon name="arrow-up" @click="item.showMore=false" class="iconBtn" size="20px"
								v-if="item.showMore" color="#999"></u-icon>
							<u-icon name="arrow-down" @click="item.showMore=true" class="iconBtn" size="22px"
								color="#999" v-else></u-icon>
							<checkbox :checked="item.check" class="check" @click="checkItem(item)" />
							<view class="title">
								{{item.costType | getDictLab(that)}}: <span><text class="txt">￥{{item.amount}}</text>
									<text class="status s1" v-if='item.status==1'>
										已支付
									</text>
									<text class="status s2" v-if='item.status==2'>
										待支付
									</text>
									<text class="status s3" v-if='item.status==3'>
										支付失败
									</text></span>
							</view>
							<template v-if="item.showMore">
								<view class="subtit" style="margin-top: 16rpx;" v-for="subItem in item.billLists"
									:key="subItem.id">
									<template v-if="item.costType!='PropertyFee'">
										{{subItem.equipName}}:{{subItem.amount}}
									</template>
									<template v-else>
										{{subItem.costType| getDictLab2(that)}}:{{subItem.amount}}
									</template>
								</view>
							</template>
						</view>
					</u-list-item>
				</u-list>
			</view>
			<view class="zhifu">
				<view class="zhifuright" @click="Immediatepayment">
					<view class="heji">
						合计：<span>￥ {{heji}}</span>
					</view>
					<view class="likezhifu">
						<u-button type="primary" size='mini' shape='circle' text="立即支付"></u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="contain" v-show="cdshow==1">
			<view class="topbilledit" @click="orderTypechange">
				<view class="changetime1">
					{{myorderType}}
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
				</view>
			</view>
			<view class="u-listdata">
				<view style="padding:16rpx 0 16rpx 32rpx">
					共有 <span style="color: red">{{orderTotalnumber}}</span>条记录
				</view>
				<u-list @scrolltolower="orderScrolltolower" :pagingEnabled='true' style="height:400px;flex:1;">
					<u-list-item v-for="(item, index) in orderList" :key="index">
						<view class="paisong2" @click="orderDetail(item)">
							<view class="status" v-if='item.status==0' style="background-color: #FF9C27;">
								待支付
							</view>
							<view class="status" v-if='item.status==1'>
								已支付
							</view>
							<view class="status" v-if="item.status=='-1'" style="background-color: #9DA0AC;">
								已关闭
							</view>

							<view class="subtit" style="margin-top: 20rpx;">
								支付金额: <span>￥{{item.payAmount}}</span>
							</view>
							<view class="subtit" v-if="status=='1'">
								支付时间: {{item.payAt}}
							</view>
							<view class="subtit">
								下单时间: {{item.createDate}}
							</view>
							<view class="subtit">
								交易类型: 微信支付
							</view>
							<view class="operation" v-if="item.status==0">
								<text @click.stop="cancle(item.id,index)">取消订单</text>
								<text class="p2">继续付款</text>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>

		</view>
		<!--缴费记录 -->
		<view class="contain" v-show="cdshow==2">
			<!-- 	列表 -->
			<view class="u-listdata">
				<view class="topbilledit" @click="typechange">
					<view class="changetime1">
						{{mytype}}
					</view>
					<view class="changetime2">
						<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
					</view>
				</view>
				<view style="padding:16rpx 0 0 30rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>
				<u-list @scrolltolower="scrolltolower2" :pagingEnabled='true'
					style="height:400px;flex:1;padding-bottom: 49px;">
					<u-list-item v-for="(item, index) in indexList2" :key="index">
						<view class="paisong2">
							<view class="status" v-if="item.type=='Subsidy'">
								补助
							</view>
							<view class="status s2" v-if="item.type=='PreStorage'">
								预存
							</view>
							<view class="status s3" v-if="item.type=='Refund'">
								退费
							</view>
							<view class="status s4" v-if="item.type=='Water'">
								水费
							</view>
							<view class="status s4" v-if="item.type=='Elec'">
								电费
							</view>
							<view class="status s4" v-if="item.type=='PropertyFee'">
								物业费
							</view>
							<div class="title">{{item.tenantInfo.name}}</div>
							<view class="subtit">
								扣缴金额:{{item.amount}}
							</view>
							<view class="subtit">
								账户金额:{{item.surplus}}
							</view>
							<view class="subtit">
								租户电话:{{item.tenantInfo.tel}}
							</view>
							<view class="subtit">
								操作人:{{item.createName}}
							</view>
							<view class="subtit">
								扣缴时间:{{item.createDate}}
							</view>
						</view>

					</u-list-item>
				</u-list>
				<view class="Predeposit" v-show="Predepositshow">
					<span @click="Predeposit">预存</span>
				</view>
			</view>
		</view>
		<u-picker :show="showtype" itemHeight="76" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype"
			@cancel='canceltype'></u-picker>
		<!-- <text>请选择支付方式</text> -->
		<u-popup :show="showpay" @close="closepay" mode="bottom" :round="10" :closeable=true :closeOnClickOverlay=true>
			<view class="paytall">
				<view class="hejitop">
					￥ {{heji}}
				</view>
				<view class="zhifufs">
					<u-radio-group v-model="zhifufangshi" placement="column" iconPlacement="right">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.id">
						</u-radio>
					</u-radio-group>
				</view>
				<view style="margin: 0 30rpx;">
					<u-button type="primary" text="确认支付" @click="Confirmationpayment"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 充值提示框 -->
		<u-modal :show="showjiaofei" title="提示" content='当前账户余额不足,请问是否充值？' @confirm="jiaofeiconfirm"
			@cancel='cancleJiaofei()' :showCancelButton=true>
		</u-modal>
		<!-- 支付框 -->
		<view class="canys" v-if="zhifucanvas">
			<h4>请用微信扫码二维码</h4>
			<canvas class="zhifucanvas" canvas-id='canvas'></canvas>
			<view class="guanbi">
				<u-button type="primary" :plain="true" text="关闭" style="border:none" @click="guanbi"></u-button>
			</view>
		</view>
		<!-- 预存 -->
		<u-popup :show="showpayjine" @close="closepay1" mode="bottom" :round="10" :closeable=true
			:closeOnClickOverlay=true>
			<view class="paytall1" style="padding-bottom: 20rpx;">
				<view class="hejitop">
					预存
				</view>
				<view class="zhifufs">
					<u--form labelWidth="30" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item label="¥" prop="userInfo.amount" ref="item1">
							<u--input v-model="model1.userInfo.amount" border="none" placeholder="点击输入金额"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view style="margin:0 32rpx">
					<u-button type="primary" text="确认支付" @click="Confirmationpaymentjine"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 订单类型 -->
		<u-picker :show="orderShowtype" :itemHeight="80" :columns="orderColumnstype" keyName="label"
			@confirm="orderConfirmtype" @cancel='orderCanceltype'>
		</u-picker>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	import {
		methods
	} from '../../../uni_modules/uview-ui/libs/mixin/mixin';
	var QRCode = require('@/utils/qrcode.js');
	const BaseApi = require("@/http/baseApi.js");
	export default {
		name: 'Workordertodone',
		data() {
			const currentDate = this.getDate({
				format: 'yyyy-mm'
			})
			return {
				that: this,
				billstype: [],
				PropertyTypedata: [],
				tabs: [{
					name: '账单明细',
				}, {
					name: '我的订单',
				}, {
					name: '扣缴记录'
				}],
				model1: {
					userInfo: {
						amount: '',
					},
				},
				rules: {
					'userInfo.amount': {
						type: 'string',
						required: true,
						message: '请填写预存金额',
						trigger: ['blur', 'change']
					},
				},
				showMore: false,
				Predepositshow: true,
				showpayjine: false,
				zhifucanvas: false,
				radiolist1: [],
				radiovalue1: '微信',
				showjiaofei: false,
				showpay: false,
				myday: currentDate,
				totalnumber: 0,
				jfnodata: false,
				showtype: false,
				//账单明细
				billIds: [],
				// 订单
				myorderType: '类型',
				orderPd: true,
				orderShowtype: false,
				orderTotalnumber: 0,
				orderList: [],
				orderDataForm: {
					status: "",
					page: 1,
					limit: 10,
				},
				orderColumnstype: [
					[{
							label: '全部',
							id: ''

						}, {
							label: '已关闭',
							id: '-1'
						},
						{
							label: '待支付',
							id: '0'
						},
						{
							label: '已支付',
							id: '1'
						},
					]
				],
				//end
				//扣缴记录
				mytype: '扣缴类型',
				indexList2: [],
				dataForm: {
					tenantId: '',
					costCycle: currentDate,
					type: '',
					page: 1,
					limit: 10,
				},
				cdshow: 0,
				current: 0,
				zhanghuyue: 0,
				heji: 0,
				indexList1: [],
				nodata: true,
				pd: true,
				zhifufangshi: '',
				columnstype: [],
				PropertyType: [],
			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) { //option为object类型，会序列化上个页面传递的参数
			let userInfo = JSON.parse(decodeURIComponent(options.info));
			this.dataForm.tenantId = userInfo.tenantId;
			var getDictDataList = uni.getStorageSync('getDictDataList');
			this.billstype = getDictDataList.filter((item) => item.dictType == 'PayType');
			this.columnstype = [this.billstype[0].dataList];
			this.PropertyTypedata = getDictDataList.filter((item) => item.dictType == 'PropertyType');
			this.PropertyType = [this.PropertyTypedata]
			// for (let i = 0; i < getDictDataList.length; i++) {
			// 	if (getDictDataList[i].dictType == 'PayType') {
			// 		this.columnstype = [getDictDataList[i].dataList]
			// 	}
			// 	if (getDictDataList[i].dictType == 'PropertyType') {
			// 		this.PropertyType = [getDictDataList[i].dataList]
			// 	}
			// }
			this.getpaisongdata(); //账单明细
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},
		filters: {
			getDictLab(v, that) {
				let val = that.billstype[0].dataList.filter((item) => item.dictValue == v);
				if (val && val[0]) {
					return val[0].dictLabel;
				}
			},
			getDictLab2(v, that) {
				let val = that.PropertyTypedata[0].dataList.filter((item) => item.dictValue == v);
				if (val && val[0]) {
					return val[0].dictLabel || '11';
				}
			}
		},
		methods: {
			guanbi() {
				this.zhifucanvas = false;
				this.dataForm.page = 1;
				this.indexList1 = [];
				this.getpaisongdata();
			},
			// 创建订单
			createOrder(postdata, type) {
				uni.request({
					url: BaseApi.BaseApi + '/pay/createOrder',
					method: "POST",
					data: postdata,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						"token": uni.getStorageSync('tokendata'),
					},
					success: (res) => {
						if (type) {
							let qrcode = new QRCode('canvas', {
								text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
								width: 213,
								height: 213,
								colorDark: "black",
								colorLight: "white",
								correctLevel: QRCode.CorrectLevel.H,
							});
						}
					}
				});
			},
			//确认预存
			Confirmationpaymentjine() {
				this.$refs.uForm.validate().then(res => {
					this.zhifucanvas = true;
					this.showpayjine = false;
					this.Predepositshow = false;
					let postdata = {
						totalFee: this.model1.userInfo.amount,
						tenantId: this.dataForm.tenantId,
						tradeType: 'NATIVE',
						billIds: ''
					}
					this.createOrder(postdata, 1);
				}).catch(errors => {
					//Funi.$u.toast('校验失败')
				})
			},
			Predeposit() {
				this.showpayjine = true;
			},
			queryOrder1() {
				this.Predepositshow = true;
				this.zhifucanvas = false;
				this.indexList1 = [];
				this.dataForm.page = 1;
				this.getpaisongdata();
			},
			queryOrder2() {
				this.Predepositshow = true;
				this.zhifucanvas = false;
				this.indexList2 = [];
				this.dataForm.page = 1;
				this.getpayrecord();
			},
			//提交订单
			Confirmationpayment() {
				this.showpay = false;
				if (this.zhifufangshi == 'zhanghu') {
					//余额是否足够支付，不够提示充值
					let billIdslist = this.billIds;
					if (this.zhanghuyue >= this.heji) {
						let postdata = {
							amount: String(this.heji),
							tenantId: this.dataForm.tenantId,
							payType: 'Account',
							billIds: billIdslist
						}
						this.$api.post('/billinfo/billPay', postdata)
							.then(res => {
								if (res.data.code == 0) {
									this.$refs.uNotify.success(res.data.msg)
									this.showpay = false;
									this.indexList1 = [];
									this.dataForm.page = 1;
									this.getpaisongdata();
								} else {
									this.$refs.uNotify.error(res.data.msg)
									this.showpay = false;
								}
							})

					} else if (this.zhanghuyue < this.heji) {
						let postdata = {
							totalFee: this.heji,
							tenantId: this.dataForm.tenantId,
							tradeType: 'NATIVE',
							billIds: billIdslist
						}
						this.createOrder(postdata)
						this.showjiaofei = true;
					}
				} else if (this.zhifufangshi == 'weixin') {
					this.zhifucanvas = true;
					this.showpay = false;
					let billIdslist = this.billIds.join(',');
					let postdata = {
						totalFee: this.heji,
						tenantId: this.dataForm.tenantId,
						tradeType: 'NATIVE',
						billIds: billIdslist
					}
					this.createOrder(postdata, 1);
				}
				this.heji = 0;
			},
			//确认提前缴费
			jiaofeiconfirm() {
				this.showpayjine = true;
				this.showjiaofei = false;
				this.dataForm.page = 1;
				this.indexList1 = [];
				this.getpaisongdata();
			},
			// 取消缴费
			cancleJiaofei() {
				this.showjiaofei = false;
				this.dataForm.page = 1;
				this.indexList1 = [];
				this.getpaisongdata();
			},
			Immediatepayment() {
				//获取账户余额
				this.$api.get('/accountinfo/detail/' + this.dataForm.tenantId, {})
					.then(res => {
						this.zhanghuyue = res.data.data.amount;
						this.showpay = true;
						this.radiolist1 = [{
								name: '微信',
								disabled: false,
								id: 'weixin',
							},
							{
								name: '账户余额' + '(可用￥' + this.zhanghuyue + ')',
								disabled: false,
								id: 'zhanghu'
							},
						]
					})
			},
			closepay() {
				this.showpay = false
			},
			closepay1() {
				this.showpayjine = false
			},
			//勾选账单明细
			checkItem(e) {
				e.check = !e.check;
				if (e.check) {
					this.heji += e.amount;
					for (let i = 0; i < e.billLists.length; i++) {
						this.billIds.push(e.billLists[i].id);
					}
				} else {
					if (this.heji > 0) {
						this.heji -= e.amount;
					}
					for (let i = 0; i < e.billLists.length; i++) {
						let ind = this.billIds.indexOf(e.billLists[i].id);
						if (ind > -1) {
							this.billIds.splice(ind, 1);
						}
					}
				}
			},
			// 我的订单
			cancle(id, ind) {
				let that = this;
				uni.request({
					url: BaseApi.BaseApi + '/pay/closeOrder/' + id,
					methods: 'get',
					success(res) {
						if (res.data.returnCode == "SUCCESS") {
							that.orderList.splice(ind, 1);
						}
					}
				})
			},
			dateChange(e) {
				this.myday = e.target.value;
				this.dataForm.costCycle = e.target.value;
				this.dataForm.page = 1;
				this.indexList1 = [];
				this.getpaisongdata();
			},
			sectionChange(val) {
				this.current = val.index;
				if (val.index == 0) {
					this.cdshow = 0;
					this.indexList1 = [];
					this.dataForm.page = 1;
					this.getpaisongdata();
				} else if (val.index == 1) {
					this.cdshow = 1;
					this.orderList = [];
					this.orderDataForm.page = 1;
					this.getorderList();
				} else if (val.index == 2) {
					this.cdshow = 2;
					this.indexList2 = [];
					this.dataForm.page = 1;
					this.getpayrecord();
				}

			},
			scrolltolower() {
				if (this.pd) {
					this.getpaisongdata();
				} else {
					return
				}
			},
			scrolltolower2() {
				if (this.pd) {
					this.getpayrecord();
				} else {
					return
				}
			},
			getpayrecord() {
				this.$api.get('/payrecord/page', this.dataForm)
					.then(res => {
						this.totalnumber = res.data.data.total;
						if (res.data.data.list.length != 0) {

							this.indexList2.push(...res.data.data.list);
							this.dataForm.page = this.dataForm.page + 1;
							this.pd = true;
							this.jfnodata = false;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd = false;
						}

					})
			},
			getpaisongdata() {
				this.$api.post('/billinfo/billDetail', this.dataForm)
					.then(res => {
						this.totalnumber = res.data.data.length;
						if (res.data.data.length != 0) {
							for (let i = 0; i < res.data.data.length; i++) {
								res.data.data[i].check = false;
								res.data.data[i].showMore = false;
							}
							this.indexList1.push(...res.data.data);
							this.dataForm.page = this.dataForm.page + 1;
							this.pd = true;
							this.jfnodata = false;
						} else {
							if (this.dataForm.page != 1) {
								uni.showToast({
									title: '暂无更多数据了',
									icon: 'none',
									duration: 1500
								})
							}
							this.pd = false;
						}

					})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			typechange() {
				this.showtype = true;
			},
			confirmtype(e) {
				this.indexList2 = [];
				this.showtype = false;
				if (e.value[0].dictValue == 'all') {
					this.mytype = e.value[0].dictLabel;
					this.dataForm.type = '';
					this.dataForm.page = 1;
					this.getpayrecord();
				} else {
					this.mytype = e.value[0].dictLabel;
					this.dataForm.type = e.value[0].dictValue;
					this.dataForm.page = 1;
					this.getpayrecord();
				}

			},
			canceltype() {
				this.showtype = false;
			},
			// 订单
			orderDetail(e) {
				uni.navigateTo({
					url: `/pages/my/Myorder/Orderdetails/Orderdetails?companyOrgId=${e.id}`
				});
			},
			orderScrolltolower() {
				if (this.orderPd) {
					this.getorderList();
				} else {
					return
				}
			},
			getorderList() {
				this.$api.get('/order/page', this.orderDataForm)
					.then(res => {
						this.orderTotalnumber = res.data.data.total;
						if (res.data.data.list.length != 0) {
							this.orderList.push(...res.data.data.list);
							this.orderDataForm.page = this.orderDataForm.page + 1;
							this.orderPd = true;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.orderPd = false;
						}
					})
			},

			orderCanceltype() {
				this.orderShowtype = false;
			},
			orderConfirmtype(e) {
				this.orderShowtype = false;
				this.myorderType = e.value[0].label;
				this.orderDataForm.status = e.value[0].id;
				this.orderList = [];
				this.orderDataForm.page = 1;
				this.getorderList();
			},
			orderTypechange() {
				this.orderShowtype = true;
			},


		}
	}
</script>

<style lang="scss">
	.Predeposit {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 98rpx;
		line-height: 98rpx;
		width: 750rpx;
		background-color: #fff;
		text-align: center;
		color: #2E69EB;
		box-shadow: 0 -6px 12px 0 rgba(153, 153, 153, 0.10);
	}

	.nodata {
		text-align: center;
		padding-top: 400rpx;
	}

	.zhifucanvas {
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
	}

	.canys {
		width: 500rpx;
		height: 600rpx;
		position: fixed;
		top: 30%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #e6e6e6;

		h4 {
			width: 500rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.guanbi {
		margin-top: 50rpx;
	}

	.zhifufs {
		padding: 10rpx 60rpx 30px;

		::v-deep .u-radio-label--right {
			margin-top: 30rpx;
		}

		::v-deep .uni-input-placeholder {
			text-align: left
		}

		::v-deep .u-radio__icon-wrap {
			width: 40rpx !important;
			height: 40rpx !important;
		}

		::v-deep .u-radio__text {
			font-size: 32rpx !important;
		}
	}

	.hejitop {
		text-align: center;
		border-bottom: 1px solid #eee;
		padding: 48rpx 0 24rpx;
		font-size: 32rpx;
	}

	.paytall {
		padding: 12px 0;
	}

	.heji span {
		color: #ED3A25;
	}

	.likezhifu {
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.zhifu {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 98rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.zhifuright {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.page {
		height: 100%;
		overflow: hidden;

		.contain {
			height: calc(100% - 44px);
			padding: 0;
			display: flex;
			flex-direction: column;

			.u-listdata {
				height: 400px;
				flex: 1;
				display: flex;
				flex-direction: column;

			}
		}
	}

	.paisong,
	.paisong2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		margin: 0 16px 24rpx;
		padding: 12px 16px 12px 34px;
		border-radius: 4px;
		position: relative;

		.iconBtn {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
			z-index: 1;
		}

		.title {
			width: 90%;
			font-size: 32rpx;
			color: #0C1935;
			margin-bottom: 16rpx;

			span {
				position: relative;
			}

			.txt {
				color: #FA5555;
				font-weight: 600;
			}

			.status {
				width: 50px;
				padding: 3px 3px 10px 3px;
				text-align: center;
				font-size: 13px;
				color: #fff;
				background-color: #09C700;
				border-radius: 11px;
				position: absolute;
				right: -50px;
				top: -10px;
				transform: scale(0.8);

				&.s1 {
					background: url('@/static/imgs/paySuccess.png') no-repeat;
					background-size: 100%;
				}

				&.s2 {
					background: url('@/static/imgs/payerror.png') no-repeat;
					background-size: 100%;
				}
			}
		}

		.subtit {
			color: #9DA0AC;
			margin-bottom: 6rpx;
		}

		.check {
			position: absolute;
			left: 16rpx;
			top: 24rpx;
			z-index: 1;
			font-size: 0;
			transform: scale(.7)
		}
	}

	.paisong2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		margin: 0 16px 24rpx;
		padding: 12px 16px;
		border-radius: 4px;
		position: relative;

		.status {
			position: absolute;
			width: 96rpx;
			height: 48rpx;
			border-radius: 0 8rpx 0 20rpx;
			right: 0;
			line-height: 48rpx;
			text-align: center;
			top: 0;
			z-index: 1;
			font-size: 22rpx;
			background-color: #30D3A2;
			color: #fff;

			&.s2 {
				background-color: #09C700;
			}

			&.s3 {
				background-color: #FA5555;
			}

			&.s4 {
				background-color: #FF9C27;
			}
		}
	}

	.topbilledit {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		height: 88rpx;
	}

	.changetime2 {
		padding-left: 10rpx;
	}

	.operation {
		text-align: right;
		margin-right: -32rpx;
		height: 70rpx;
		margin-top: 32rpx;

		text {
			padding: 6px 12px;
			font-size: 12px;
			border: 1px solid #D8D8D8;
			border-radius: 20px;
			margin-right: 16px;

			&.p2 {
				border-color: #2E69EB;
				color: #2E69EB;
			}
		}

	}
</style>