Sprinkler-app/page_user/upload.vue

<template>
	<view>
		<u-navbar :is-back="true" title='设置' title-color="#000" :border-bottom="false" :background="true" id="navbar">
		</u-navbar>
		<!-- 背景 -->
		<view class="img">
			<image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uVKucPVDjxjaCDCpFKvw" mode=""></image>
		</view>
		<view class="name" @click="nameflag = true">
			<view class="">小发财树1号</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uL6FHnMGWFrdptmDokDI" mode=""></image>
		</view>
		<view class="model">
			<text class="one">型号</text> <text>G-1232161</text>
		</view>
		<view class="model" style="margin-top: 24rpx;">
			<text class="one" style="margin-right: 124rpx;">MAC</text> <text>2131897412</text>
		</view>
		<view class="wifi">
			<view class="">WIFI</view>
			<view class="flex">ChangteA-5G <image
					src="https://api.ccttiot.com/smartmeter/img/static/uiTIUYnR3ClrmqOTyF8F" mode=""></image>
			</view>
		</view>
		<view class="wifi" style="margin-top: 78rpx;" @click="xpshow = true">
			<view class="">息屏</view>
			<view class="flex">{{xptxt}} <image src="https://api.ccttiot.com/smartmeter/img/static/uiTIUYnR3ClrmqOTyF8F"
					mode=""></image>
			</view>
		</view>
		<view class="wifi" style="margin-top: 24rpx;" @click="gjshow = true">
			<view class="">固件更新</view>
			<view class="flex">{{gjtxt}}<image src="https://api.ccttiot.com/smartmeter/img/static/uiTIUYnR3ClrmqOTyF8F"
					mode=""></image>
			</view>
		</view>
		<!-- 息屏选择器 -->
		<u-select v-model="xpshow" :list="xplist" @confirm="xpconfirm"></u-select>
		<!-- 固件更新选择器 -->
		<u-select v-model="gjshow" :list="gjlist" @confirm="gjconfirm"></u-select>
		<!-- 修改设备名称弹框 -->
		<view class="editname" v-if="nameflag">
	        <view class="top">
	        	修改名称
	        </view>	
			 <input type="text" placeholder="请输入您想要修改的名字" />
			 <view class="anniu">
			 	<view class="qx" @click="btnqx">
			 		取消
			 	</view>
				<view class="qd" @click="btnqd">
					确定
				</view>
			 </view>
		</view>
		<!-- 修改名称蒙层 -->
		<view class="mask" v-if="nameflag"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				xpshow: false,
				gjshow: false,
				xptxt:'永不',
				gjtxt:'v2.1.2',
				nameflag:false,
				xplist: [{
						value: '1',
						label: '永不'
					},
					{
						value: '2',
						label: '一分钟'
					},
					{
						value: '2',
						label: '三分钟'
					},
					{
						value: '2',
						label: '五分钟'
					}],
				gjlist: [{
						value: '1',
						label: 'v2.1.2'
					},
					{
						value: '2',
						label: 'v2.1.3'
					}],
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '绿小能',
				path: '/pages/index/index'
			}
		},
		
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '绿小能',
				query: '',
				path: '/pages/index/index'
			}
		},
		onLoad() {

		},
		methods: {
			// 选择息屏时间
			xpconfirm(e){
				this.xptxt = e[0].label
			},
            // 选择固件版本
			gjconfirm(e){
				this.gjtxt = e[0].label
			},
			// 点击取消修改设备名称
			btnqx(){
				this.nameflag = false
			},
			// 点击确定修改设备名称
			btnqd(){
				this.nameflag = false
			}
			
		}
	}
</script>

<style lang="less">
	/deep/ .u-title {
		margin-bottom: 22rpx;
	}

	/deep/ .uicon-nav-back {
		margin-bottom: 22rpx;
	}
    .editname{
		width: 440rpx;
		height: 320rpx;
		background-color: #fff;
		position: fixed;
		top: 600rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 20rpx;
		z-index: 1;
		padding: 20rpx;
		box-sizing: border-box;
		.top{
			font-size: 32rpx;
			color: #3D3D3D;
			text-align: center;
			width: 100%;
			margin-top: 20rpx;
			font-weight: 600;
		}
		input{
			width: 360rpx;
			height: 80rpx;
			background-color: #eee;
			border-radius: 10rpx;
			margin: auto;
			margin-top: 20rpx;
			padding-left: 10rpx;
		}
		.anniu{
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			view{
				width: 48%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
			}
			.qx{
				border: 1px solid #7FAD76;
				border-radius: 20rpx;
				color: #7FAD76;
			}
			.qd{ 
				background-color: #7FAD76;
				color: #fff;
				border-radius: 20rpx;
			}
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .5;
		position: fixed;
		top: 0;
		left: 0;
	}
	.img {
		width: 304rpx;
		height: 332rpx;
		margin: auto;
	}

	.name {
		width: 100%;
		font-weight: 600;
		font-size: 36rpx;
		color: #3D3D3D;
		display: flex;
		margin-top: 64rpx;
		justify-content: center;
		align-items: center;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-left: 26rpx;
		}
	}

	.model {
		width: 100%;
		display: flex;
		font-weight: 600;
		font-size: 32rpx;
		color: #3D3D3D;
		margin-top: 48rpx;

		.one {
			margin-left: 74rpx;
			margin-right: 144rpx;
		}
	}

	.wifi {
		width: 678rpx;
		height: 104rpx;
		font-size: 32rpx;
		color: #3D3D3D;
		line-height: 104rpx;
		background: rgba(255, 255, 255, 0.2);
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
		margin: auto;
		margin-top: 60rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 42rpx;
		box-sizing: border-box;

		.flex {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 18rpx;
			}
		}
	}
</style>