uniapp_lianxi/pages/middle/middle.vue

<template>
	<view>
		<view class="title">自定义样式</view>
		<view class="photo">大家好</view>
		<t-table border="2" border-color="#95b99e" :is-check="true" @change="change">
			<t-tr font-size="14" color="#95b99e" align="left">
				<t-th align="left">姓名</t-th>
				<t-th align="left">年龄</t-th>
				<t-th align="left">爱好</t-th>
				<t-th align="center">操作</t-th>
			</t-tr>
			<t-tr font-size="12" color="#5d6f61" align="right" v-for="item in tableList" :key="item.id">
				<t-td align="left">{{ item.name }}</t-td>
				<t-td align="left">{{ item.age }}</t-td>
				<t-td align="left">{{ item.hobby }}</t-td>
				<t-td align="left"><button @click="edit(item)">编辑</button></t-td>
			</t-tr>
		</t-table>
		<button @click="add">添加</button>
		<view>{{obj.name}}</view>
		<view>{{obj.age}}</view>
		<view class="form-box">
			<u-form :model="form" ref="uForm" :border-bottom='false'>
				<u-form-item label="账号">
					<u-input v-model="form.name" border />
				</u-form-item>
				<u-form-item label="密码">
					<u-input v-model="form.password" border type='password' password-icon />
				</u-form-item>
			</u-form>
			<u-button :ripple="true" type="primary" @click="goLogin">登录</u-button>
		</view>
		<view>{{uerInfo.name}}</view>
		<view>{{uerInfo.password}}</view>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				borderBottom: false,
				labelPosition: "top",
				tableList: [{
						id: 11,
						name: '张三',
						age: '19',
						hobby: '游泳'
					},
					{
						id: 1,
						name: '李四',
						age: '21',
						hobby: '绘画'
					},
					{
						id: 2,
						name: '王二',
						age: '29',
						hobby: '滑板'
					},
					{
						id: 3,
						name: '码字',
						age: '20',
						hobby: '蹦极'
					}
				],
				obj: {
					name: '查娜',
				},
				form: {
					user: '',
					password: '',
				},

			};
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			change(e) {
				console.log(e.detail);
			},
			edit(item) {
				uni.showToast({
					title: item.name,
					icon: 'none'
				});
			},
			add() {
				this.$set(this.obj, `age`, 50);
				console.log(this.obj)
			},
			toUser(data) {
				this.login(data);
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goLogin() {
				this.$u.toast('验证码已发送');
				setTimeout(() => {
					this.toUser(this.form)
					
				}, 2000);

			},

		},
		computed: {
			...mapState(['hasLogin', 'uerInfo']),
		},

	}
</script>

<style scoped>
	.photo {
		background: url(../../static/logo.png) no-repeat;
		background-size: contain;
		border: 1rpx solid red;
		height: 100rpx;
		line-height: 100rpx;
		width: 500rpx;
		text-align: center;
	}

	.form-box {
		width: 90%;
		margin: 0 auto;
	}

	.form-box /deep/.u-btn--primary {
		background-color: #19BE6B;
	}
</style>