knowledge-payment-uniapp-240823/pages/index/index.vue

<template>
	<view class="content">
		<!-- <img src="/static/logo.png" style="position: absolute;right: 10px;top: 10px;" height="25rpx" /> -->
		<img :src="item" width="100%" v-for="(item, index) in list" />

		<view class="bottom">
			<view class="shang" style="padding-bottom: 200rpx;">

				<!-- <view style="margin-bottom: 20rpx;margin-top: 10rpx;text-align: center;">
					<text style="color: #eee;font-size: 30rpx;
					margin-right: 10rpx;">单价{{ price }}￥</text>
				</view> -->
				<!-- <view class="info" style="color: #fff;margin: 20rpx 0;
				display: flex;align-items: center;">
					<view style="padding: 0 10rpx;">
						购买数量
					</view>
					<u-number-box v-model="registerForm.num" @change="valChange"></u-number-box>
				</view> -->
				<!-- <div class="register-username">
					<u--input placeholder="请输入学生姓名" type="number" border="surround"
						v-model="registerForm.name"></u--input>
				</div> -->


				<!-- <view style="margin-bottom: 20rpx;margin-top: 10rpx;text-align: center;">
					<text style="color: #fff;font-size: 40rpx;
					margin-right: 10rpx;">总金额 {{ price * registerForm.num }}￥</text>
				</view> -->



				<!-- <u-button type="primary" @click="Register()" style="border-radius: 20rpx;color: #000;width: 200rpx;"
				color="#fff">立即支付</u-button> -->


				<view style="
				color: #fff;margin-top: 60rpx;
				border: 1px solid #fff;
				padding: 10rpx 20rpx;">
					联系客服
				</view>

			</view>

		</view>


		<div class="abtn">
			<!-- <u-number-box 
			v-model="registerForm.num" 
			@change="valChange"></u-number-box> -->

			<view style="padding: 10px;">
				<text style="color: #000;font-size: 25rpx;">
					单价{{ price }}￥</text>
			</view>

			<u-number-box 
			style="margin: 0 auto;"
			v-model="registerForm.num"
			:min="1">
				<view slot="minus" class="minus">
					<u-icon name="minus" size="12"></u-icon>
				</view>
				<view slot="plus" class="plus">
					<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
				</view>
			</u-number-box>



			<view class="zhif">
				立即支付
				<text style="padding-left: 10rpx;">{{ price * registerForm.num }}￥</text>
			</view>
		</div>
	</view>
</template>

<script>
	import api from '@/plugins/api.js'
	export default {
		data() {
			return {
				code: '',
				price: 10,
				registerForm: {
					num: 1
				},
				type: 1, //0是money，1是price
				phone: '400-026-7262',
				list: [
					// '/static/0240718173256.jpg',
					// '/static/24.png',
					// '/static/123.png',


					"https://img.alicdn.com/imgextra/i2/2263306098/O1CN01bDUHBB1uuwAxlahWT_!!2263306098.jpg",
					"https://img.alicdn.com/imgextra/i3/2263306098/O1CN01SNLRO41uuwAuR6xLb_!!2263306098.jpg",
				]
			}
		},
		onLoad() {
			// if(this.GetQueryString('code')){		//路径上面有code说明微信已授权
			// 	this.code = this.GetQueryString('code');
			// 	//直接去登录发起请求
			// 	this.toWxLogin(this.code)
			// }else{
			// 	this.getwx_authorize()
			// }
		},
		methods: {
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 100%;
		// --color : #890404;
		--color: #dc2808;

		.shang {
			width: 100%;
			box-sizing: border-box;
			// background: linear-gradient(to right, rgb(239, 118, 66), rgb(220, 38, 7));
			background: #000;
			overflow: hidden;
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.register-username {
		display: flex;
		border: 1px solid #ED762F;
		height: 35px;
		align-items: center;
		margin-bottom: 20px;
		padding: 0 10px;
		border-radius: 5px;
		box-sizing: border-box;
		background-color: #fff;
		color: #000;

		image {
			width: 20px;
			height: 20px;
		}
	}

	.abtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: #fff;
		display: flex;
		align-items: center;

		.zhif {
			width: 45%;
			height: 100%;
			margin-left: auto;
			background-color: #f60;
			color: #fff;
			text-align: center;
			line-height: 60px;
		}
	}


	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>