AiToyCXWx/pages/home.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<div class="top" :style="{'background-image':'url('+require('../static/top_bg.png')+')','margin-top':-mt+'px'}">
			<div class="t_box" :style="{'background-image':'url('+require('../static/top_boxbg.png')+')'}">
				<image src="@/static/ai_shape.png"></image>
				<div class="text adffcac">
					<text>Hi！我是甜心小兔</text>
					<p>
						支持语音唤醒 按键对话<br>
						回应每一个奇思妙想<br>
						好奇的孩子更聪明～
					</p>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="title adfacjb">
				<div class="t_l">我的设备</div>
			</div>
			<div class="device_boxs adfacjb">
				<div class="db_pre adffcjb" :style="{'background-image':'url('+require('../static/box_bg2.png')+')'}" @tap="addBindDevice">
					<div class="dp_top adfac">
						<image src="@/static/bind.png"></image>
						<span>绑定设备</span>
					</div>
					<div class="dp_tip">按照产品教程绑定设备，添加成功后选择角色</div>
				</div>
				<div class="db_pre adffcjb" :style="{'background-image':'url('+require('../static/box_bg1.png')+')'}" @tap="toTurn('/pages/wifi')">
					<div class="dp_top adfac">
						<image src="@/static/change.png"></image>
						<span>网络连接</span>
					</div>
					<div class="dp_tip">请先连接热点，然后选择要连接的网络</div>
				</div>
			</div>
			<template v-if="agentList.length">
				<div class="title adfacjb" style="margin-top: 70rpx;margin-bottom: 22rpx;">
					<div class="t_l">我的角色</div>
					<div class="t_r">查看全部</div>
				</div>
				<div class="a_item adfacjb" v-for="(item,index) in agentList" :key="index">
					<div class="ai_l">
						{{item.agentName}}
					</div>
					<div class="ai_r" @tap="toAgentDetail(item)">查看</div>
				</div>
			</template>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				deviceList:[],
				agentList:[]
			}
		},
		onLoad() {
			this.getAgentList();
		},
		methods:{
			getAgentList(){
				this.$api.get('/agent/list').then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.agentList = res.data.data.splice(0,5);
				})
			},
			addBindDevice(){
				uni.scanCode({
					success: (res) => {
						let result = JSON.parse(res.result);
						if(res.errMsg==='scanCode:ok'){
							this.$api.post('/device/bindAdd',{
								...result,
								"type": "",
								"userId": 0,
								"agentId": ""
							}).then(res=>{
								if(res.data.code!==0) return this.$showToast(res.data.msg)
								uni.navigateTo({
									url:'/pages/agentCreate'
								})
							})
						}
					}
				})
			},
			toTurn(url){
				uni.navigateTo({ url })
			},
			toAgentDetail(item){
				uni.navigateTo({
					url:'/pages/agentDetail?id='+item.id+'&vname='+item.ttsVoiceName
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: linear-gradient( 180deg, #E0EEFF 0%, #F6FCFF 100%);
		box-sizing: border-box;
		.top{
			width: 100%;
			height: 564rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.t_box{
				width: calc(100% - 60rpx);
				height: 296rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
				bottom: 30rpx;
				left: 30rpx;    
				image{
					width: 256rpx;
					height: 336rpx;
					position: absolute;
					left: 38rpx;
					bottom: 14rpx;
				}
				.text{
					padding: 66rpx 46rpx 0 332rpx;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 40rpx;
						color: #FFFFFF;
						line-height: 56rpx;
					}
					p{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 48rpx;
						margin-top: 12rpx;
					}
				}
				
			}
		}
		.card{
			padding: 0 30rpx 30rpx;
			.title{
				margin-top: 36rpx;
				.t_l{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #111111;
					line-height: 50rpx;
					text-align: left;
				}
				.t_r{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #0066FE;
					line-height: 40rpx;
					text-align: right;
				}
			}
			.device_empty{
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx #E5EDFF;
				border-radius: 24rpx;
				margin-top: 32rpx;
				padding: 48rpx 79rpx;
				background: #FFFFFF;
				p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #5C5C5C;
					line-height: 48rpx;
					text-align: center;
				}
				.de_btn{
					width: 320rpx;
					height: 72rpx;
					background: #0066FE;
					border-radius: 16rpx;
					margin-top: 40rpx;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					span{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						margin-left: 16rpx;
					}
				}
			}
			.device_boxs{
				margin-top: 31rpx;
				.db_pre{
					width: calc(50% - 15rpx);
					height: 138px;
					padding: 36rpx 30rpx;
					box-sizing: border-box;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					.dp_top{
						image{
							width: 40rpx;
							height: 40rpx;
						}
						span{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							line-height: 32rpx;
							text-align: left;
							margin-left: 40rpx;
						}
					}
					.dp_tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #6E696F;
						line-height: 40rpx;
					}
				}
			}
			.a_item{
				width: 100%;
				padding: 37rpx 20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				margin-top: 30rpx;
				.ai_l{
					width: calc(100% - 114rpx);
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					line-height: 32rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.ai_r{
					width: 94rpx;
					height: 56rpx;
					background: #0066FE;
					border-radius: 16rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
				}
			}
		}
	}
</style>