h5-uniapp/pages/index/lockUp.vue

<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<!-- 头部 -->
		<view class="width-750 relative flex align-center justify-center bj-8EBEFF"
			:style="{height: `calc(${statusBar}px + 110rpx)`}">
			<view class="width-750 fixed1"
				:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 110rpx)`}">
				<view class="width-750 height-110 padding-w-30 bgimg1 flex align-center justify-center">
					<view @click="_goback" class="cuIcon-back font-40 color-white"
						style="position: absolute;left: 30rpx;"></view>
					<text class="font-36 color-white weight-bold">{{i18n.lockUp.title1}}</text>
					<image @click="router.push('/pages/index/lockUpRecord')" class="width-54 height-54 absolute"
						style="right: 30rpx;" src="/static/imgs/index/jilu@2x.png"></image>
				</view>
			</view>
		</view>
		<!-- 身体 -->
		<view class="width-750">
			<view class="headbox">
				<view class="inputbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<view class="height-192">
						<view class="height-96 flex align-center">
							<text class="font-28 weight-bold">{{i18n.lockUp.text1}}</text>
						</view>
						<view class="height-96 flex align-center">
							<input class="flex-1 padding-r-30 font-28 nummedium-font" type="number"
								v-model="number" :placeholder="i18n.lockUp.tos1" />
							<text class="font-28 nummedium-font">APT</text>
						</view>
					</view>
					<view @click="show=true" class="height-96 flex align-center justify-between">
						<text class="font-28 weight-bold">{{i18n.lockUp.text2}}</text>
						<view class="flex align-center">
							<text class="font-28 weight-bold">{{zhouqi==''?i18n.lockUp.text3:zhouqi.day+i18n.lockUp.text4}}</text>
							<u-icon name="arrow-right" size="24"></u-icon>
						</view>
					</view>
					<view class="height-76 flex align-center">
						<text class="font-26 margin-r-20">{{i18n.lockUp.text5}}</text>
						<text class="font-26 color-0165EE nummedium-font">{{zhouqi==''?'0':zhouqi.yield}}%</text>
					</view>
					<view class="height-192">
						<view class="height-96 flex align-center">
							<text class="font-28 weight-bold">{{i18n.lockUp.text6}}</text>
						</view>
						<view class="height-96 flex align-center">
							<input class="flex-1 font-28 nummedium-font" type="number" v-model="paypwd"
								:placeholder="i18n.lockUp.tos3" password />
						</view>
					</view>
				</view>
			</view>
			<view class="height-500"></view>
			<view @click="getzhiya_sub" class="tijiao">{{i18n.lockUp.text7}}</view>
			<view v-html="text" class="padding-w-30 margin-t-200">
				
			</view>
		</view>

		<!-- 锁仓周期弹窗 -->
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="padding-b-80 padding-w-30"
			 :style="'background-color: '+theme.bg+';color: '+theme.text">
				<view class="height-110 flex align-center justify-center">
					<text class="font-30 weight-bold">{{i18n.lockUp.text2}}</text>
					<view @click.stop="show=false" style="position: absolute;right: 30rpx;"
						class="font-26 color-C3C3C3">
						{{i18n.lockUp.text8}}</view>
				</view>
				<view class="height-400">
					<scroll-view class="height-400" scroll-y="true">
						<view @click="setzhouqi(item)" v-for="(item,index) in list"
							:style="'background-color: '+theme.fu_bg"
							class="height-72 margin-b-16 flex align-center padding-w-30 radiu-10">
							<text class="font-28">{{item.day}}{{i18n.lockUp.text4}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				show: false,
				number: '',
				paypwd: '',
				list: [],
				text: '',
				zhouqi: '',
				flag: true,
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getzhiya_con()
		},
		methods: {
			// 提交
			getzhiya_sub() {
				if (this.number == '') return this.tos(this.i18n.lockUp.tos1)
				if (this.zhouqi == '') return this.tos(this.i18n.lockUp.tos2)
				if (this.paypwd == '') return this.tos(this.i18n.lockUp.tos3)
				if (!this.flag) {
					return
				} else {
					this.flag = false
					let obj = {
						id: this.zhouqi.id,
						num: this.number,
						pay_pwd: this.paypwd,
					}
					this.post('/index/zhiya_sub', obj, true).then(res => {
						console.log(res)
						this.flag = true
						if (res.code == 1) {
							this.tos(res.msg)
							this.number = ''
							this.zhouqi = ''
							this.paypwd = ''
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/index/lockUpRecord'
								})
							}, 500)
						}
					})
				}
			},
			// 选择周期
			setzhouqi(item) {
				this.zhouqi = item
				this.show = false
			},
			// 获取锁仓返回
			getzhiya_con() {
				this.post('/index/zhiya_con', {}, true).then(res => {
					console.log('锁仓返回', res)
					if (res.code == 1) {
						this.list = res.data.cycle
						this.text = res.data.zhiya_text
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.fixed1 {
		position: fixed;
		top: 0;
		z-index: 1000;
		background: #0165EE;
	}

	.headbox {
		width: 750rpx;
		height: 506rpx;
		background: #0165EE;
		border-radius: 0rpx 0rpx 120rpx 120rpx;
		padding-top: 206rpx;
	}

	.inputbox {
		width: 690rpx;
		height: 636rpx;
		// background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 0 16rpx;
	}

	.tijiao {
		width: 600rpx;
		height: 86rpx;
		background: #0165EE;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
</style>