xpl/pages/assets/logroll.vue

<template>
	<view class="center">
		<view class="bg"><image src="../../static/img/logroll-bg.png" mode=""></image></view>
		<view class="main-box">
			<view class="main-title">
				<!-- <view class="main-title-image"><image class="image" src="../../static/icon/title.png" mode=""></image></view> -->
				<view class="main-title-font">互助说明</view>
			</view>
			<view class="main">
				<view class="people-info">
					<view class="info-font">收款人</view>
					<view class="info-main">
						<view class="info-left">
							<view class="avtor" v-if="info.next_checker"><image :src="info.next_checker.avatar" mode=""></image></view>
							<view class="left-font" v-if="info.next_checker">
								<view class="name clamp">{{ info.next_checker.nickname}}</view>
								<view class="phone">{{ info.next_checker.phone }}</view>
							</view>
						</view>
						<view class="info-right" v-if="info.next_checker">
							<view class="num">{{ info.my_last_join == null ? info.l1_money*1 : info.my_last_join == 1 ? info.l2_money*1 : info.l3_money*1 }}</view>
							<view class="right-font">{{ info.my_last_join == null ? info.l1_money_type : info.my_last_join == 1 ? info.l2_money_type : info.l3_money_type}}</view>
						</view>
					</view>
					<view class="pwd-box">
						<view class="pwd-font">密码</view>
						<view class="input"><input type="password" value="pwd" v-model="pwd" placeholder="请输入支付密码" placeholder-class="pwd-tip" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="open()">加入互助</view>
	</view>
</template>

<script>
import { activityDetail,joinActivity } from '@/api/market.js'
export default {
	data() {
		return {
			pwd: '',
			info:{},
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		open() {
			if(this.pwd == ''){
				this.$api.msg('密码不能为空');
				return
			}
			joinActivity({trade_psw:this.pwd},1).then(e =>{
				console.log(e)
				this.$api.msg('参与互助成功');
			}).catch(e =>{
				console.log(e)
			})
		},
		loadData(){
			activityDetail({},1).then(e =>{
				this.info =e.data
			})
		}
	}
};
</script>

<style lang="scss">
.center {
	width: 100%;
	height: 100%;
	position: relative;
	padding-bottom: 40rpx;
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.main-box {
	position: relative;
	z-index: 10;
	width: 690rpx;
	padding-top: 600rpx;
	margin: 0 auto;
	border-radius: 10rpx;
	.main-title {
		position: relative;
		z-index: 11;
		width: 322rpx;
		height: 80rpx;
		margin: -60rpx auto 0;
		border-radius: 50rpx;
		position: relative;
		background-color: #55a7f4;
		.main-title-image {
			position: absolute;
			left: 0;
			top: 0;
			width: 322rpx;
			height: 80rpx;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 50rpx;
			}
		}

		.main-title-font {
			position: relative;
			z-index: 10;
			text-align: center;
			line-height: 80rpx;
			font-size: 46rpx;
			font-weight: bold;
			color: #141564;
		}
	}
	.main {
		margin-top: -40rpx;
		width: 100%;
		padding: 112rpx 30rpx 30rpx;
		background: #365eab;
		position: relative;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}
.btn {
	position: relative;
	z-index: 12;
	width: 684rpx;
	height: 96rpx;
	background: #29f3fd;
	border-radius: 48rpx;
	margin: 78rpx auto 0;
	line-height: 96rpx;
	text-align: center;
	font-size: 42rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #030454;
}

.people-info {
	margin-top: 56rpx;
	padding: 0 26rpx;
	text-align: left;
	.info-font {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.info-main {
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.info-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.avtor {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
			.left-font {
				margin-left: 10rpx;
				.name {
					max-width: 300rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.phone {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 0.8;
				}
			}
		}
		.info-right {
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 1;
			.num {
				font-size: 54rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.right-font {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
}
.pwd-box {
	width: 490rpx;
	background: #f4f4f4;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 50rpx auto 0;
	padding: 20rpx 20rpx;
	.pwd-font {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.pwd-tip {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 0.51;
	}
	.input {
		margin-left: 20rpx;
		color: #999999;
	}
}
</style>