canvasScreen/pages/bind/bind.vue

<template>
	<view class="main_container">
		<Header></Header>
		<view class="login-bind">
			<view class="bind">
				<text class="bind-title">设备信息</text>
				<form @submit="bindSubmit">
					<view class="uni-form-item uni-column">
						<view class="title">设备账号：</view>
						<input class="uni-input" v-model="account" name="account" type="text" placeholder="设备账号" disabled />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">设备名称：</view>
						<input class="uni-input" name="name" placeholder="设备名称" />
					</view>
					<view class="uni-form-item uni-column" @click.native.stop="radioDirection = !radioDirection">
						<view class="bind-radio-label"  >
							<view class="title" >选择设备方向</view>
							<image class="select_img" src="../../static/images/bind-select.png"></image>
						</view>
						<view v-show="radioDirection" class="device_radio">
							<radio-group name="device_direction">
								<label class="radio"><radio value="0" checked="true" />竖屏</label>
								<label class="radio"><radio value="1" />横屏</label>
							</radio-group>
						</view>
					</view>
					<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">授权绑定</button></view>
				</form>
			</view>
		</view>
		<view class="login_bg"></view>
	</view>
</template>

<script>
import Header from '@/pages/header.vue'
export default {
	components: {
		Header
	},
	data() {
		return {
			account: '1234568736',
			radioDirection: false
		};
	},
	mounted(){
		// this.account = this.account.slice(-8)
	},
	methods: {
		bindSubmit: function(e){
			console.log(this.account.substring(this.account.length-8, this.account.length))
			console.log(this.account.slice(-8))
			console.log('bindform发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
		}
	}
};
</script>

<style scoped>
.bind-title{
	display: block;
	margin-bottom: 37.5rpx;
	font-size: 37.5rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
}
.bind .uni-form-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 409.72rpx;
	height: 86.11rpx;
	padding: 0 55.55rpx;
	line-height: 86.11rpx;
	margin-bottom: 27.77rpx;
	font-size: 27.77rpx;
	background-color: #f6f6f6;
	border-radius: 86.11rpx;
}
.bind .uni-form-item .title{
	min-width: 138.88rpx;
}
.bind-radio-label{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.bind .uni-input{
	width: auto;
	height: 86.11rpx;
	font-size: 27.77rpx;
}
.select_img{
	display: block;
	width: 21.52rpx;
	height: 13.88rpx;
	margin-top: 36.8rpx;
}

.device_radio{
	position: absolute;
	bottom: -145.83rpx;
	left: 0;
	z-index: 99;
}
.device_radio uni-radio-group{
	width: 520.83rpx;
	height: 145.83rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25rpx;
	background-color: #FFFFFF;
	border-radius: 13.88rpx;
	box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
}
.device_radio .radio {
	width: 50%;
	text-align: center;
}
.device_radio /deep/ uni-radio .uni-radio-input{
	width: 27.77rpx;
	height: 27.77rpx;
	background: url(../../static/images/an-wx.png) no-repeat left top;
	background-size: 100% 100%;
	border: none;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked{
	background: none !important;
	border: none !important;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before{
	content: "";
	width: 27.77rpx;
	height: 27.77rpx;
	background: url(../../static/images/an-xz.png) no-repeat left top;
	background-size: 100% 100%;
	transform: translate(-50%,-50%) scale(1);
}
</style>