``uni-app```个人中心页开发

1.拍照，选择图片

user.vue：

<template>
	<view>
		<view class="takephoto" @click="takephoto">拍照</view>
		<image v-for="(item,index) of imglist" :src="item" :key="index"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imglist: []
			}
		},
		methods: {
			takephoto () {
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res) => {
				        console.log(JSON.stringify(res.tempFilePaths));
						this.imglist = res.tempFilePaths
				    }
				});
			}
		}
	}
</script>

<style>

</style>

注意，在success执行成功的回调函数中不能写成function的形式否则就会导致this指向错误。

2.登录

新建一个登录页面login.vue：

<template>
	<view>
		<input type="text" value="" v-model="tel"/>
		<!-- 手机号的格式简单验证 -->
		<text :class=" tel.length !== 11 ? 'error' : 'success'">{{teltip}}</text>
		<input type="text" value="" :password="true" v-model="password"/>
		<!-- 密码的格式简单验证 -->
		<text :class=" password.length < 6 ? 'error' : 'success'">{{passwordtip}}</text>
		<!-- disabled在当手机号和密码格式不正确时使按钮失效 -->
		<button 
		:disabled=" tel.length !== 11 || password.length < 6 "
		:type=" tel.length === 11 && password.length >= 6 ? 'primary' : 'default' "
		@click="login"
		>登录</button>
	</view>
</template>

<script>
	import { request,toast } from '../../utils/index.js'
	export default {
		data() {
			return {
				tel: '18888888888',
				password: '123456'
			}
		},
		// 检验手机号和密码的格式是否正确并返回提示信息
		computed: {
			teltip() { // 对手机号的检验
				if(this.tel.length !== 11) { //手机号的长度为11位才正确
					return '手机号码长度有误'
				} else {
					return '手机号码长度正确'
				}
			},
			passwordtip() { //对密码的检验
				if(this.password.length < 6) { // 密码长度必须大于6位才正确
					return '密码长度不正确'
				} else {
					return '密码长度正确'
				}
			}
		},
		methods: {
			// 点击登录按钮，发送请求
			login() {
				request({
					url: '/user/domlogin',
					method: 'POST',
					data: { //将手机号密码作为请求的参数传过去
						tel: this.tel,
						password: this.password
					}
				}).them(res => {
					console.log(res.data)
					// 根据状态码判断登陆情况
					const { code } = res.data
					if(code === '10006') {
						// toast方法封装在utils包下作为提示信息的显示
						toast({title: '该用户还未注册'})
					} else if (code === '10007') {
						toast({title: '对不起密码错误'})
					} else {
						toast({title: '登陆成功'})
						/**
						 * 进入登录界面的途径
						 * 1.用户在个人中心点击登录按钮，登录成功后返回个人中心页面
						 * 2.用户在详情页点击加入购物车按钮，登录成功后返回返回详情页
						 * 3.用户点击购物车分栏，登录成功后返回我的购物车
						 * 4.注册进入登录，使用的是重定向
						 * 
						 * token来验证用户的登录状态
						 * 将token存储在本地，当以后需要token的时候先从本地查找获取并提交
						 * 也可以将用户的id存储在本地
						 * 
						 * uni-app 使用本地存储
						 */
						try { 
							// 将获取到的信息保存在本地
						    // uni.setStorageSync('token', 'res.data.data.token');
							// uni.setStorageSync('userid', 'res.data.data.userid');
							// uni.navigateBack()
						} catch (e) {
						    console.log(e)
						}
					}
				})
			}
		}
	}
</script>

<style>
.success {
	color: #4CD964;
}
.error {
	color: red;
}
</style>

utils下封装的toast方法：

// 显示信息
export function toast(options) {
	const { title,icon,duration } = options
	uni.showToast({
		title: title,
		icon: icon || 'none',
		duration: duration || 5000
	})
}