xpl/pages/index/node.vue

<template>
	<view class="center">
		<scroll-view class="box" scroll-y="true">
			<view class="bg"><image src="../../static/img/rengou.png" mode=""></image></view>
			<view class="title">
				<image src="../../static/img/start.png" mode=""></image>
				<view class="title-font">技术改变生活</view>
				<image src="../../static/img/start.png" mode=""></image>
			</view>
			<view class="main">
				说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容
			</view>
			<view class="btn" @click="buy()">加入合伙人</view>
		</scroll-view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-dox">
					<view class="popup-title">确认付款</view>
					<view class="popup-little">请输入支付密码确认付款</view>
				</view>
				<view class="people-info">
					<view class="info-main">
						{{ list.buy_price * 1 }}
						<text>{{ list.buy_money_type }}</text>
					</view>
					<view class="info-tip">加入合伙人</view>
					<view class="pwd-box">
						<view class="pwd-font">密码</view>
						<view class="input"><input type="password" value="password" v-model="password" placeholder="请输入支付密码" placeholder-class="pwd-tip" /></view>
					</view>
					<view class="btn-box" @click="pswQd">确认</view>
				</view>
			</view>
			<view class="close_icon" @click="close"><image src="../../static/img/Close.png"></image></view>
		</uni-popup>
	</view>
</template>
<script>
import { getPoint, buyPoint } from '@/api/set.js';
export default {
	data() {
		return {
			mun: 1,
			zuiduo: 0, //剩余份数占总数的百分比
			shen: 0, //还剩几份
			all: 0, //总量
			id: '',
			list: '',
			password: '',
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData() {
			getPoint().then(({ data }) => {
				console.log(data);
				this.list = data[0];
				this.id = data[0].id;
			});
		},
		buy() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		pswQd() {
			const obj = this;
			buyPoint(
				{
					trade_psw: this.password,
					num: this.mun
				},
				this.id
			)
				.then(e => {
					this.password = '';
					this.$refs.popup.close();
					uni.navigateTo({
						url: '/pages/money/success'
					})
				})
				.catch(e => {
					this.password = '';
					this.$refs.popup.close();
					console.log(e);
				});
		}
	}
};
</script>
<style lang="scss">
page {
	height: 100%;
}

.center {
	height: 0;
	min-height: 100%;
}
.box {
	position: relative;
	width: 100%;
	height: 1930rpx;
	.bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 1930rpx;
		image {
			width: 100%;
			height: 1930rpx;
		}
	}
	.btn {
		width: 684rpx;
		height: 96rpx;
		position: absolute;
		bottom: 108rpx;
		left: 0;
		right: 0;
		margin: auto;
		background: #29f3fd;
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #030454;
	}
	.title {
		padding-top: 700rpx;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 36rpx;
			height: 34rpx;
		}
		.title-font {
			padding: 0 10rpx;
			font-size: 48rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.main {
		position: relative;
		z-index: 10;
		width: 624rpx;
		height: 244rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: 50rpx auto 0;
	}
}
.popup {
	width: 540rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	text-align: center;
	padding-bottom: 50rpx;
	.popup-dox {
		padding-top: 84rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.popup-title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.popup-little {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #808080;
		}
	}
	.people-info {
		margin-top: 56rpx;
		padding: 0 26rpx;
		text-align: left;
		line-height: 1;
		.info-font {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.info-main {
			text-align: center;
			margin-top: 70rpx;
			font-size: 70rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #e83f30;
			text {
				font-size: 40rpx;
			}
		}
		.info-tip {
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
	.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 {
			width: 80rpx;
			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;
		}
	}
	.btn-box {
		margin: 46rpx auto 0;
		width: 460rpx;
		height: 70rpx;
		background: linear-gradient(0deg, #2e58ff, #32c6ff);
		border-radius: 10rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}
.close_icon {
	width: 60rpx;
	height: 60rpx;
	margin: 88rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>