property/user_ui/work/pages/manage/pay.vue

<template>
	<view class="paybox">
		<view class="pay pt40">
			<view class="paytit mb9 txc">实付金额</view>
			<view class="paynum mb9 txc">￥357.20</view>
			<view class="paytit txc">剩余支付时间<text class="text">14:59</text></view>
			<view class="paystu mt35">
				<view class="tit mb16">支付方式</view>
				<view class="buylist flexc mb10">
					<image :src="zfbimg" class="zfbimg"></image>
					<view class="tit flex1">支付宝支付</view>
					<image :src="chose" class="choseimg" v-if="paystu=='zfb'"></image>
					<image :src="nchose" class="choseimg" v-else></image>
				</view>
				<view class="buylist flexc mb12">
					<image :src="wximg" class="zfbimg"></image>
					<view class="tit flex1">微信支付</view>
					<image :src="chose" class="choseimg" v-if="paystu=='wx'"></image>
					<image :src="nchose" class="choseimg" v-else></image>
				</view>
			</view>
		</view>
		<view class="pay pt16">
			<view class="paystu">
				<view class="tit mb16 flexc">选择优惠方式<image :src="ywico" class="ywico"></image></view>
				<view class="buylist flexc mb10">
					<view class="tit flex1">附近商超优惠券200元</view>
					<image :src="chose" class="choseimg" v-if="paystu=='zfb'"></image>
					<image :src="nchose" class="choseimg" v-else></image>
				</view>
				<view class="buylist flexc">
					<view class="tit flex1">支付立减20元</view>
					<image :src="chose" class="choseimg" v-if="paystu=='wx'"></image>
					<image :src="nchose" class="choseimg" v-else></image>
				</view>
			</view>
		</view>
		<view class="plr12 mt40">
			<view class="rhbtn" @click="getSubmit">立即支付</view>
		</view>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				chose:require("@/work/static/chose.png"),
				nchose:require("@/work/static/nchose.png"),
				zfbimg:require("@/work/static/zfb.png"),
				wximg:require("@/work/static/wx.png"),
				ywico:require("@/work/static/manage/ywico.png"),
				rimg:require("@/static/images/rimg.png"),
				list:[],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
			}
		},
		onLoad: function() {
		
		},
		methods:{
			checkPermi, checkRole,
			getSubmit(){
				this.$tab.navigateTo("/work/pages/manage/success")
			},
			getDataFn(){
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType=this.tabidx
				getNoticeList(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = ''
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.paybox{padding: 20rpx 24rpx;
	.pay{background: #FFFFFF;margin-bottom: 24rpx;border-radius: 20rpx;
		.paytit{font-weight: 500;font-size: 24rpx;color: #666666;
			.text{color: #F40027;margin-left: 12rpx;}
		}
		.paynum{font-weight: bold;font-size: 48rpx;
color: #321E1E;}
		.ywico{width: 24rpx;height: 24rpx;margin-left: 16rpx;}
	}
	.paystu{padding:0 24rpx 22rpx;
		.buylist{padding:0 26rpx;min-height: 80rpx;
			
			.txt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;flex: 0 0 auto;margin-left:16rpx;}
			.rimg{width: 16rpx;height: 24rpx;flex: 0 0 auto;margin-left:16rpx;}
			.zfbimg{width: 58rpx;height: 58rpx;margin-right: 20rpx;flex: 0 0 auto;}
			.choseimg{width: 30rpx;height: 30rpx;margin-left: 30rpx;flex: 0 0 auto;}
		}
	}
}
</style>