4.18新增

package.json

@@ -10,6 +10,7 @@
     "axios": "^0.21.1",
     "core-js": "^2.6.5",
     "element-ui": "^2.15.3",
+    "swiper": "^5.4.5",
     "vue": "^2.6.10",
     "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.5.2"

src/App.vue

@@ -7,7 +7,7 @@
 		name: 'app',
 		components: {},
 		mounted() {
-			this.$router.push('/my/set-up');
+			// this.$router.push('/my/set-up');
 		},
 	}
 </script>
@@ -162,4 +162,4 @@
 		flex-shrink: 0;
 
 	}
-</style>
+</style>

src/service/request.js

@@ -1,69 +1,66 @@
-// import axios from 'axios';
-// import { Message } from 'element-ui';
-// import router from '../router';
+import axios from 'axios';
+import { Message } from 'element-ui';
+import router from '../router';
 
-// // 正式打包时使用
-// export const baseURL = 'http://101.132.165.120:8090';
+// 正式打包时使用
+// export const baseURL = 'http://127.0.0.1:8090';
 
-// // 局域网（同一wifi）预览使用
-// // export const baseURL = 'http://192.168.0.17:8080/api';
+// 局域网（同一wifi）预览使用
+// export const baseURL = 'http://192.168.0.17:8080/api';
 
-// // 开发时使用
-// // export const baseURL = 'http://127.0.0.1:8080/api';
+// 开发时使用
+export const baseURL = 'http://127.0.0.1:8080/api';
 
-// export const baseURLImg = baseURL + '/userfile/show/pictureContentWithUUID?fileUuid=';
+const instance = axios.create({
+	baseURL,
+});
 
+instance.interceptors.request.use(
+	(config) => {
+		config.withCredentials = true;
+		return config;
+	},
+	(error) => {
+		throw Promise.reject(error);
+	},
+);
 
-// const instance = axios.create({
-// 	baseURL,
-// });
+instance.interceptors.response.use(
+	(res) => {
+		switch(res.status){
+			case 200:
+				return res.data;
+		}
+		Message({message: '系统错误', type: 'error'});
+		throw Promise.reject(res.data);
+	},
+	(error) => {
+		let message = error.response ? ((error.response.data || {}).message || '系统错误') : '系统错误';
+		switch((error.response || {}).status || -1){
+			case 403:
+				message = '无权限';
+				router.push('/login');
+				break;
+		}
+		Message({message, type: 'error'});
+		throw Promise.reject(error)
+	},
+);
 
-// instance.interceptors.request.use(
-// 	(config) => {
-// 		config.withCredentials = true;
-// 		return config;
-// 	},
-// 	(error) => {
-// 		throw Promise.reject(error);
-// 	},
-// );
-
-// instance.interceptors.response.use(
-// 	(res) => {
-// 		switch(res.status){
-// 			case 200:
-// 				return res.data;
-// 		}
-// 		Message({message: '系统错误', type: 'error'});
-// 		throw Promise.reject(res.data);
-// 	},
-// 	(error) => {
-// 		let message = error.response ? ((error.response.data || {}).message || '系统错误') : '系统错误';
-// 		switch((error.response || {}).status || -1){
-// 			case 403:
-// 				message = '无权限';
-// 				router.push('/login');
-// 				break;
-// 		}
-// 		Message({message, type: 'error'});
-// 		throw Promise.reject(error)
-// 	},
-// );
-
-// export const request = {
-// 	get: (url, params) => instance.get(url, { params }),
-// 	post: (url, params, config) => instance.post(url, params, config),
-// 	postQS: (url, params) => instance.post(url, {}, {params}),
-// 	postForm: (url, params) => instance.post(url, params, {
-// 		transformRequest: [function(data) {
-// 			let ret = ''
-// 			for (let it in data) {
-// 				ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
-// 			}
-// 			return ret
-// 		}],
-// 		headers: {
-// 			'Content-Type': 'application/x-www-form-urlencoded'
-// 		},
-// 	}),
-// };
+export const request = {
+	get: (url, params) => instance.get(url, { params }),
+	post: (url, params, config) => instance.post(url, params, config),
+	postQS: (url, params) => instance.post(url, {}, {params}),
+	postForm: (url, params) => instance.post(url, params, {
+		transformRequest: [function(data) {
+			let ret = ''
+			for (let it in data) {
+				ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+			}
+			return ret
+		}],
+		headers: {
+			'Content-Type': 'application/x-www-form-urlencoded'
+		},
+	}),
+};

src/service/service.js

@@ -1,22 +1,117 @@
-// import {
-// 	request
-// } from './request';
-
-// export const login = (data) => {
-// 	return request.postForm('/login', data).then(res => {
-// 		if (res.code !== '0') {
-// 			throw Promise.reject(res);
-// 		}
-// 	});
-// };
-
-// export const selfInfo = () => {
-// 	return request.get('/common/self/info');
-// };
-
-// export const uploadFile = (file) => {
-// 	const formData = new FormData();
-// 	formData.append('file', file);
-// 	return request.post('/userfile/uploadFile', formData);
-// };
+import { request } from './request';
 
+/**
+ * 上传文件
+ */
+export const uploadFile = (file) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    return request.post('/api/Upload/upload', formData);
+};
+
+// Login 用户登录
+
+/**
+ * 手机密码登录
+ */
+ export function loginPasswordLogin(data) {
+	return request.post('/api/Login/passwordLogin', data);
+}
+
+/**
+ * 手机验正码注册
+ */
+export function loginPhoneCodeRegister(data) {
+	return request.post('/api/Login/phoneCodeRegister', data);
+}
+
+/**
+ * 手机验证码登录
+ */
+export function loginPhoneCodeLogin(data) {
+	return request.post('/api/Login/phoneCodeLogin', data);
+}
+
+/**
+ * 获取验证码
+ */
+export function loginGetCaptcha(data) {
+	return request.get('/api/Login/getCaptcha', data);
+}
+
+/**
+ * 重置密码
+ */
+export function loginResetPassword(data) {
+	return request.post('/api/Login/resetPassword', data);
+}
+
+// General 其他接口
+
+/**
+ * 发送短信验证码
+ */
+export function generalSendSms(data) {
+	return request.post('/api/General/sendSms', data);
+}
+
+
+// Area 地址库
+
+/**
+ * 获取地址库ID获取下一级
+ */
+export const areaGetAreaChildrenByID = (data) => {
+    return request.get('/api/area/getAreaChildrenByID', data);
+};
+
+// UserManage 会员管理
+
+/**
+ * 用户反馈
+ */
+export function userManageLeaveFeedback(data) {
+    return request.post('/api/User_manage/leaveFeedback', data);
+}
+
+/**
+ * 设置收货地址（新增或修改）
+ */
+export function userManageSetDeliveryAddress(data) {
+    return request.post('/api/User_manage/setDeliveryAddress', data);
+}
+
+/**
+ * 修改默认收货地址
+ */
+export function userManageChangeApproveDelivery(data) {
+    return request.post('/api/User_manage/changeApproveDelivery', data);
+}
+
+/**
+ * 删除收货地址
+ */
+export function userManageDelDeliveryAddress(data) {
+    return request.post('/api/User_manage/delDeliveryAddress', data);
+}
+
+/**
+ * 获取收货地址列表
+ */
+export function userManageGetDeliveryAddressList(data) {
+    return request.get('/api/User_manage/getDeliveryAddressList', data);
+}
+
+/**
+ * 获取收货地址详情
+ */
+export function userManageGetDeliveryAddressDetail(data) {
+    return request.get('/api/User_manage/getDeliveryAddressDetail', data);
+}
+
+/**
+ * 注销会员
+ */
+ export function userCenterCancelUserInfo(data) {
+	return request.post('/api/User_center/cancelUserInfo', data);
+}

src/utils/util.js

@@ -0,0 +1,125 @@
+// import { usersGetaddress } from "../service";
+
+/**
+ * 参数校验器
+ * 
+ * @param {*} data 
+ * @param {*} validatorList 
+ */
+export const validatorFun = (data, validatorList = []) => {
+	// 默认校验器列表
+	const validatorDefault = {
+		// 是否不为空
+		['notNull']: val => !((typeof val) == "undefined" || val == null || val === ''),
+		// 是否是手机号
+		['isMobile']: val => /^1[3456789]\d{9}$/.test(val),
+	};
+	const errList = [];
+	validatorList.forEach(([key, ...list]) => {
+		// 字段值
+		const val = data[key];
+		list.some(([validator, errMsg]) => {
+			const validatorType = typeof validator;
+			// 如果校验器类型为string，查找默认验证器，默认验证器不存在则不校验
+			const stringResult = validatorType == 'string' && !(validatorDefault[validator] ?
+				validatorDefault[validator](val) : true);
+			// 如果校验器类型为function，调用该方法
+			const funResult = validatorType == 'function' && !validator(val, data);
+			// 判断校验结果，true = 不通过，false = 通过，不通过则收集错误信息
+			if (stringResult || funResult) {
+				errList.push({
+					key,
+					val,
+					errMsg,
+					validator,
+				})
+			}
+			return stringResult || funResult;
+		});
+	});
+	return errList;
+};
+
+/**
+ * 数字转中文数字
+ * @param {Object} num
+ */
+export function numToChinese(num) {
+	if (!/^\d*(\.\d*)?$/.test(num)) {
+		alert("Number is wrong!");
+		return "Number is wrong!";
+	}
+	var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
+	var BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
+	var a = ("" + num).replace(/(^0*)/g, "").split("."),
+		k = 0,
+		re = "";
+	for (var i = a[0].length - 1; i >= 0; i--) {
+		switch (k) {
+			case 0:
+				re = BB[7] + re;
+				break;
+			case 4:
+				if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
+					re = BB[4] + re;
+				break;
+			case 8:
+				re = BB[5] + re;
+				BB[7] = BB[5];
+				k = 0;
+				break;
+		}
+		if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re;
+		if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
+		k++;
+	}
+	if (a.length > 1) //加上小数部分(如果有小数部分) 
+	{
+		re += BB[6];
+		for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
+	}
+	return re;
+};
+
+// /**
+//  * 获取地址坐标
+//  * @param {*} address 
+//  * @returns 
+//  */
+// export const addressToLocation = (address, success, fail, complete) => {
+// 	usersGetaddress({
+// 		data: {
+// 			address,
+// 		},
+// 		success: ({code, data, msg}) => {
+// 			console.log(data)
+// 			if (code == 1) {
+// 				success && success(data);
+// 			} else {
+//                 fail && fail({code, data, msg});
+// 				uni.showToast({
+// 					icon: 'none',
+// 					title: msg,
+// 				});
+// 			}
+// 		},
+//         fail,
+//         complete,
+// 	});
+// }
+
+// /**
+//  * 导航
+//  * @param {*} address 
+//  */
+// export const goAddress = (address) => {
+//     addressToLocation(address, (result) => {
+//         uni.openLocation({
+//             latitude: result.lat,
+//             longitude: result.lng,
+//             success: function () {
+//                 console.log('success');
+//             }
+//         });
+//     });
+// }

src/views/login.vue

@@ -7,17 +7,18 @@
 			<p class="login-title">登录</p>
 			<div class="form-box">
 				<div class="form-row">
-					<input type="" class="input" placeholder="请输入电话号码" name="" id="" value="" />
+					<input v-model="params.phone" class="input" placeholder="请输入电话号码" />
 				</div>
 				<div class="form-row">
-					<input type="" class="input" placeholder="请输入验证码" name="" id="" value="" />
-					<button type="button" class="btn">获取验证码</button>
+					<input v-model="params.code" class="input" placeholder="请输入验证码" />
+					<button v-if="countDown <= 0" @click="sendSms()" type="button" class="btn">获取验证码</button>
+					<button v-else type="button" class="btn">{{countDown}}秒后重发</button>
 				</div>
 				<div class="form-row" v-if="accountLogin">
-					<input type="" class="input" placeholder="请输入8-12位数字加字母的密码" name="" id="" value="" />
+					<input type="password" class="input" placeholder="请输入8-12位数字加字母的密码" />
 				</div>
 				<div class="btn-box">
-					<button type="button" class="active">立即登录</button>
+					<button type="button" class="active" @click="phoneCodeLogin()">立即登录</button>
 				</div>
 			</div>
 			<div class="bottom">
@@ -51,17 +52,71 @@
 
 <script>
 	import Header from '../components/header.vue';
+	import { generalSendSms, loginPhoneCodeLogin } from '../service/service';
+	import { validatorFun } from '../utils/util';
+
 	export default {
 		components: {
 			Header,
 		},
 		data() {
 			return {
-				accountLogin: false
+				accountLogin: false,
+
+				params: {
+					phone: '',
+					code: '',
+				},
+				countDown: 0,
 			};
 		},
 		methods: {
-
+			phoneCodeLogin () {
+				const params = this.params;
+				const errList = validatorFun(params, [
+					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
+					['code', ['notNull', '请输入验证码']],
+				]);
+				if (errList.length > 0) {
+					return this.$message.error(errList[0].errMsg);
+				}
+				loginPhoneCodeLogin(params).then(({code, msg, data}) => {
+					if (code == 1) {
+						localStorage.setItem('session_key', data.token);
+						this.$router.push('/');
+					} else {
+						this.$message.error(msg);
+					}
+				});
+			},
+			sendSms() {
+				const params = this.params;
+				const errList = validatorFun(params, [
+					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
+				]);
+				if (errList.length > 0) {
+					return this.$message.error(errList[0].errMsg);
+				}
+				generalSendSms({
+					phone: params.phone,
+				}).then(({code, msg, data}) => {
+					if (code == 1) {
+						this.countDownFn();
+						this.$message.success(msg);
+					} else {
+						this.$message.error(msg);
+					}
+				});
+			},
+			countDownFn() {
+				let num = 60;
+				const fn = () => {
+					if (num == 0) return;
+					this.countDown = --num;
+					setTimeout(() => fn(), 1000);
+				};
+				fn();
+			},
 		}
 	}
 </script>
@@ -269,4 +324,4 @@
 		background-color: #F2501A;
 		color: #fff;
 	}
-</style>
+</style>

src/views/my/set-up.vue

@@ -100,43 +100,27 @@
 							<span class="manage-all-addresses">管理全部地址</span>
 						</div>
 						<ul class="select-address-list">
-							<li class="active">
+							<li :class="{active: item.is_mr == 1}" v-for="(item, index) in addressList" :key="index">
 								<div class="select-address-sidebar">
-									<p class="people-name">胡海峰</p>
+									<p class="people-name" @click="changeApproveDelivery(item.id)">{{item.name}}</p>
 									<p class="addrss-box">
-										<span class="addrss-msg">中国安徽省宣城市宁国市黄河路764号环球中心501 </span>
-										<span class="people-phone-num">188****2323</span>
+										<span class="addrss-msg">
+											{{item.pro_name}}
+											{{item.city_name}}
+											{{item.county_name}}
+											{{item.street_name}}
+											{{item.detail}}
+										</span>
+										<span class="people-phone-num">{{item.phone}}</span>
 									</p>
 								</div>
 								<div class="select-address-btn-box">
-									<button type="button">删除</button>
+									<button type="button" @click="delAddress(item.id)">删除</button>
 									<button type="button">修改</button>
 								</div>
 							</li>
-							<li>
-								<p class="people-name">胡海峰</p>
-								<p class="addrss-box">
-									<span class="addrss-msg">中国天津天津市静海县文化路657号</span>
-									<span class="people-phone-num">188****2323</span>
-								</p>
-								<div class="select-address-btn-box">
-									<button type="button">删除</button>
-									<button type="button">修改</button>
-								</div>
-							</li>
-							<li>
-								<p class="people-name">胡海峰</p>
-								<p class="addrss-box">
-									<span class="addrss-msg">中国天津天津市静海县文化路657号</span>
-									<span class="people-phone-num">188****2323</span>
-								</p>
-								<div class="select-address-btn-box">
-									<button type="button">删除</button>
-									<button type="button">修改</button>
-								</div>
-							</li>
 							<!-- 无内容时显示 -->
-							<div class="normal-box">
+							<div class="normal-box" v-if="addressList.length == 0">
 								<img src="../../assets/normal-3.png">
 								暂无收货地址
 							</div>
@@ -152,7 +136,7 @@
 							<label class="row-start-label"><span class="red-color">*</span>收货人</label>
 							<div class="row-sidebar" style="flex-direction: column;align-items: flex-start;">
 								<div style="min-width: 234px;display: flex;align-items: center;">
-									<el-input v-model="input" placeholder="收货人姓名"></el-input>
+									<el-input v-model="addressParams.name" placeholder="收货人姓名"></el-input>
 								</div>
 							</div>
 						</div>
@@ -160,7 +144,7 @@
 							<label class="row-start-label"><span class="red-color">*</span>手机号</label>
 							<div class="row-sidebar" style="flex-direction: column;align-items: flex-start;">
 								<div style="min-width: 234px;display: flex;align-items: center;">
-									<el-input v-model="input" placeholder="手机号"></el-input>
+									<el-input v-model="addressParams.phone" placeholder="手机号"></el-input>
 								</div>
 							</div>
 						</div>
@@ -170,21 +154,43 @@
 								<div
 									style="width: 548px;display: flex;align-items: center;justify-content: space-between;">
 									<div class="select-item">
-										<el-select v-model="region" placeholder="请选择省份">
-											<el-option label="山东省" value="shanghai"></el-option>
-											<el-option label="区域二" value="beijing"></el-option>
+										<el-select v-model="addressPickerValue[0]" @change="bindColumnchange(0, $event)" placeholder="请选择省份">
+											<el-option
+												v-for="(item, index) in addressPickerData[0]"
+												:key="index"
+												:label="item.name"
+												:value="index">
+											</el-option>
 										</el-select>
 									</div>
 									<div class="select-item">
-										<el-select v-model="region2" placeholder="请选择城市">
-											<el-option label="临沂市" value="shanghai"></el-option>
-											<el-option label="区域二" value="beijing"></el-option>
+										<el-select v-model="addressPickerValue[1]" @change="bindColumnchange(1, $event)" placeholder="请选择城市">
+											<el-option
+												v-for="(item, index) in addressPickerData[1]"
+												:key="index"
+												:label="item.name"
+												:value="index">
+											</el-option>
 										</el-select>
 									</div>
 									<div class="select-item">
-										<el-select v-model="region3" placeholder="区/县/街道">
-											<el-option label="河东区" value="shanghai"></el-option>
-											<el-option label="兰山区" value="beijing"></el-option>
+										<el-select v-model="addressPickerValue[2]" @change="bindColumnchange(2, $event)" placeholder="请选择区/县">
+											<el-option
+												v-for="(item, index) in addressPickerData[2]"
+												:key="index"
+												:label="item.name"
+												:value="index">
+											</el-option>
+										</el-select>
+									</div>
+									<div class="select-item">
+										<el-select v-model="addressPickerValue[3]" @change="bindColumnchange(3, $event)" placeholder="请选择街道">
+											<el-option
+												v-for="(item, index) in addressPickerData[3]"
+												:key="index"
+												:label="item.name"
+												:value="index">
+											</el-option>
 										</el-select>
 									</div>
 								</div>
@@ -194,7 +200,7 @@
 							<div class="flex-end-box">
 								<div
 									style="width: 548px;display: flex;align-items: center;justify-content: space-between;">
-									<el-input type="textarea" placeholder="请填写详细地址~" class="textarea" v-model="desc">
+									<el-input type="textarea" placeholder="请填写详细地址~" class="textarea" v-model="addressParams.detail">
 									</el-input>
 								</div>
 							</div>
@@ -203,8 +209,8 @@
 							<div class="flex-end-box">
 								<div
 									style="width: 548px;display: flex;align-items: center;justify-content: space-between;">
-									<label for="c1" class="form-bottom">
-										<input id="c1" name="pass" type="checkbox" checked />
+									<label for="c12" class="form-bottom">
+										<input id="c12" name="pass" type="checkbox" checked ref="is_mr" @change="addressParams.is_mr = ($refs['is_mr'].checked ? 1 : 0)"/>
 										<span>设为默认地址</span>
 									</label>
 								</div>
@@ -215,8 +221,8 @@
 								<div
 									style="width: 548px;display: flex;align-items: center;justify-content: space-between;">
 									<div class="form-btn-box">
-										<button type="button" class="active">保存</button>
-										<button type="button" class="active">取消</button>
+										<button type="button" class="active" @click="setDeliveryAddress()">保存</button>
+										<button type="button" class="active" @click="initAddress()">取消</button>
 									</div>
 								</div>
 							</div>
@@ -252,11 +258,11 @@
 						<li>将解除与其它网站、其他APP的授权或绑定关系</li>
 					</ul>
 					<label for="c1" class="logout-bottom">
-						<input id="c1" name="pass" type="checkbox" checked />
+						<input id="c1" name="pass" type="checkbox" checked ref="CancelUserInfo"/>
 						<span style="flex: 1;">申请提交即表示您自愿放弃账户内所有虚拟财产并同意<span class="red-color">《注销须知》</span></span>
 					</label>
 					<div class="logout-btn-box">
-						<button type="button">申请注销用户</button>
+						<button type="button" @click="cancelUserInfo()">申请注销用户</button>
 					</div>
 				</div>
 
@@ -272,6 +278,17 @@
 <script>
 	import Header from '../../components/header.vue';
 	import Footer from '../../components/footer.vue';
+	import {
+		areaGetAreaChildrenByID,
+		userManageGetDeliveryAddressDetail,
+		userManageSetDeliveryAddress,
+		userManageChangeApproveDelivery,
+		userManageDelDeliveryAddress,
+		userManageGetDeliveryAddressList,
+		userCenterCancelUserInfo,
+	} from '../../service/service';
+	import { validatorFun } from '../../utils/util';
+
 	export default {
 		components: {
 			Header,
@@ -308,14 +325,261 @@
 				region: '',
 				region2: '',
 				region3: '',
-				desc: ''
+				desc: '',
+
+
+				addressList: [],
+				addressParams: {
+					id: 0,  // 收货地址记录id（不传值是添加）
+					pro_name: '',  // 省名
+					city_name: '',  // 市名
+					county_name: '',  // 县区名
+					street_name: '',  // 街道
+					detail: '',  // 详细地址
+					phone: '',  // 联系电话
+					name: '',  // 联系人
+					is_mr: 0,  // 是否是默认（0不默认，1默认）
+				},
+
+				// 地址
+				addressPickerData: [[], [], [], []],
+				addressPickerDataNames: [[], [], [], []],
+				addressPickerValue: [0, 0, 0, 0],
+				addressPickerValueStr: '',
 			};
 		},
+		mounted() {
+			this.getAddressList();
+			this.initAddress();
+		},
 		methods: {
+			initAddress() {
+				this.addressParams = {
+					id: 0,  // 收货地址记录id（不传值是添加）
+					pro_name: '',  // 省名
+					city_name: '',  // 市名
+					county_name: '',  // 县区名
+					street_name: '',  // 街道
+					detail: '',  // 详细地址
+					phone: '',  // 联系电话
+					name: '',  // 联系人
+					is_mr: 0,  // 是否是默认（0不默认，1默认）
+				};
+				// 地址
+				this.addressPickerData = [[], [], [], []];
+				this.addressPickerDataNames = [[], [], [], []];
+				this.addressPickerValue = [0, 0, 0, 0];
+				this.addressPickerValueStr = '';
+				this.getAreaChildrenByID();
+			},
+			// 获取列表
+			getAddressList() {
+				userManageGetDeliveryAddressList({
+					page: 1,
+					page_num: 999999,
+				}).then(res => {
+					if (res.code === 1) {
+						const list = res.data.list.map(item => {
+							const [first_name, ...last_name] = item.name.split('');
+							item['first_name'] = first_name;
+							item['last_name'] = last_name.join('');
+							return item;
+						});
+						this.addressList = list;
+						// this.addressList = page > 1 ? [...this.list, ...list] : list;
+						// if (list.length === 0) {
+						// 	this.$message.warning(msg);
+						// } else {
+						// 	this.page = this.page + 1;
+						// }
+					} else {
+						this.$message.error(msg);
+					}
+				});
+			},
+			// 新增地址
+			setDeliveryAddress() {
+				const params = this.addressParams;
+				console.log(params);
+				const errList = validatorFun(params, [
+					['name', ['notNull', '请输入收货人']],
+					['phone', ['notNull', '请输入手机号码'], ['isMobile', '请输入正确手机号']],
+					['pro_name', ['notNull', '请输入选择所在地区']],
+					['city_name', ['notNull', '请输入选择所在地区']],
+					['county_name', ['notNull', '请输入选择所在地区']],
+					['street_name', ['notNull', '请输入选择所在地区']],
+					['detail', ['notNull', '请输入详细地址']],
+				]);
+				if (errList.length > 0) {
+					return this.$message.warning(errList[0].errMsg);
+				}
+				userManageSetDeliveryAddress(params).then(({code, msg, data}) => {
+					if (code == 1) {
+						this.getAddressList();
+						this.initAddress();
+						this.$message.success(msg);
+					} else {
+						this.$message.error(msg);
+					}
+					
+				});
+			},
+			// 获取地址详情
+			getAddressDetail() {
+				userManageGetDeliveryAddressDetail({ id: this.addressParams.id }).then(({code, msg, data})=> {
+					if (code == 1) {
+						const {
+							id,
+							pro_id,
+							city_id,
+							county_id,
+							pro_name,
+							city_name,
+							county_name,
+							street_name,
+							detail,
+							phone,
+							name,
+							is_mr,
+						} = data;
+						this.addressParams = {
+							id,
+							pro_name,
+							city_name,
+							county_name,
+							street_name,
+							detail,
+							phone,
+							name,
+							is_mr,
+						};
+						const arr = [
+							pro_name,
+							city_name,
+							county_name,
+							street_name,
+						];
+						this.select = is_mr == 1;
+						this.addressPickerValueStr = arr.join(' ');
+						const fn = (id2 = 0, idx2, level = 1) => {
+							const name = arr.splice(0, 1)[0];
+							this.getAreaChildrenByID(id2, idx2, level, level, () => {
+								const idx = this.addressPickerDataNames[level - 1].indexOf(name);
+								if ( arr.length > 0 ) {
+									let id3 = this.addressPickerData[level - 1][idx].id;
+									fn(id3, idx, level + 1);
+								} else {
+									this.getAreaChildrenByID(0, idx, level + 1, level);
+								}
+							});
+						}
+						fn();
+					} else {
+						this.$message.error(msg);
+					}
+				});
+			},
+			getAreaChildrenByID(id = 0, idx = 0, level = 1, maxLevel = 4, callback) {
+				const list = [...this.addressPickerData];
+				const listIds = [...this.addressPickerDataNames];
+				const vals = [...this.addressPickerValue];
+				vals[level - 2] = idx;
+				const fn = (id = 0, level2 = 1) => {
+					if (level2 > maxLevel) {
+						this.addressPickerData = list;
+						this.addressPickerDataNames = listIds;
+						this.addressPickerValue = vals;
+						this.bindPickerChange();
+						callback && callback();
+						return;
+					}
+					areaGetAreaChildrenByID({id}).then(({code, msg, data}) => {
+						if (code == 1) {
+							list[level2 - 1] = data.list;
+							listIds[level2 - 1] = data.list.map(item => item.name);
+							vals[level2 - 1] = 0;
+							fn(data.list[0].id, level2 + 1);
+						} else {
+							this.$message.error(msg);
+						}
+					});
+				};
+				fn(id, level);
+			},
+
+
+			// 设置默认地址
+			changeApproveDelivery(id) {
+				this.$confirm('确认设为默认地址?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning',
+				}).then(() => {
+					userManageChangeApproveDelivery({ id }).then(({code, msg, data}) => {
+						if (code == 1) {
+							this.getAddressList();
+							this.$message.success(msg);
+						} else {
+							this.$message.error(msg);
+						}
+					});
+				});
+			},
+			// 删除地址
+			delAddress(id) {
+				this.$confirm('确认删除地址?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning',
+				}).then(() => {
+					userManageDelDeliveryAddress({ id }).then(({code, msg, data}) => {
+						if (code == 1) {
+							this.getAddressList();
+							this.$message.success(msg);
+						} else {
+							this.$message.error(msg);
+						}
+					});
+				});
+			},
+			bindPickerChange() {
+				const [pIdx, cIdx, aIdx, sIdx] = this.addressPickerValue;
+				const [province, city, area, street] = this.addressPickerData;
+				this.addressPickerValueStr = `${province[pIdx].name} ${city[cIdx].name} ${area[aIdx].name} ${street[sIdx].name}`;
+				this.addressParams.pro_name = province[pIdx].name;
+				this.addressParams.city_name = city[cIdx].name;
+				this.addressParams.county_name = area[aIdx].name;
+				this.addressParams.street_name= street[sIdx].name;
+				console.log(this.addressParams);
+			},
+			bindColumnchange(column, value) {
+				this.getAreaChildrenByID(this.addressPickerData[column][value].id, value, column + 2);
+			},
 			//选项卡
 			active(index) {
 				this.active = index
 			},
+			
+			// 注销账户
+			cancelUserInfo() {
+				if (!this.$refs['CancelUserInfo'].checked) {
+					return this.$message.warning('请阅读并同意《注销须知》');
+				}
+				
+				this.$confirm('确定注销账户吗?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning',
+				}).then(() => {
+					userCenterCancelUserInfo().then(({code, msg}) => {
+						if (code == 1) {
+							this.$message.success(msg);
+						} else {
+							this.$message.error(msg);
+						}
+					});
+				});
+			},
 
 		}
 	}
@@ -506,7 +770,7 @@
 		align-items: center;
 	}
 
-	>>>.el-input__inner {
+	>>> .el-input__inner {
 		height: 30px !important;
 		line-height: 30px !important;
 		border: 1px solid #BBBBBB !important;
@@ -514,7 +778,7 @@
 		font-size: 16px !important;
 	}
 
-	>>>.el-input__icon {
+	>>> .el-input__icon {
 		line-height: 30px !important;
 	}
 
@@ -972,4 +1236,4 @@
 		width: 280px;
 		margin-bottom: 7px;
 	}
-</style>
+</style>

src/views/register.vue

@@ -2,13 +2,13 @@
 <template>
 	<div class="wrap">
 
-		<Header></Header>
+		<Header></Header>
 		
 		<div class="top">
 			<img src="../assets/title-3.png">
-		</div>
+		</div>
 		
-		<p class="top-link">已有账号，去<a href="javascript:void(0)">登录</a></p>
+		<p class="top-link">已有账号，去<a href="javascript:void(0)">登录</a></p>
 		
 		<div class="box">
 			<p class="box-title">用户注册</p>
@@ -17,7 +17,7 @@
 					<span class="label">手机号码</span>
 					<div class="form-right-sidebar">
 						<div class="form-right-row">
-							<input type="" placeholder="请输入手机号" class="input" name="" id="" value="" />
+							<input v-model="params.phone" placeholder="请输入手机号" class="input" name="" id="" value="" />
 						</div>
 					</div>
 				</div>
@@ -25,8 +25,9 @@
 					<span class="label">验证码</span>
 					<div class="form-right-sidebar">
 						<div class="form-right-row">
-							<input type="" placeholder="请输入验证码" class="input" name="" id="" value="" />
-							<button type="button" class="btn">获取验证码</button>
+							<input v-model="params.code" class="input" placeholder="请输入验证码" />
+							<button v-if="countDown <= 0" @click="sendSms()" type="button" class="btn">获取验证码</button>
+							<button v-else type="button" class="btn">{{countDown}}秒后重发</button>
 						</div>
 					</div>
 				</div>
@@ -34,8 +35,10 @@
 					<span class="label">图形验证码</span>
 					<div class="form-right-sidebar">
 						<div class="form-right-row">
-							<input type="" placeholder="请输入图形验证码" class="input" name="" id="" value="" />
-							<button type="button" class="num-code">42342</button>
+							<input v-model="params.verify" placeholder="请输入图形验证码" class="input" name="" id="" value="" />
+							<button type="button" class="num-code">
+								<img style="width: 100%" :src="captcha.image" @click="getCaptcha()" alt="">
+							</button>
 						</div>
 					</div>
 				</div>
@@ -43,7 +46,7 @@
 					<span class="label">设置密码</span>
 					<div class="form-right-sidebar">
 						<div class="form-right-row">
-							<input type="" placeholder="请输入8-12位数字加字母的密码" class="input" name="" id="" value="" />
+							<input type="password" v-model="params.password" placeholder="请输入8-12位数字加字母的密码" class="input" name="" id="" value="" />
 						</div>
 					</div>
 				</div>
@@ -51,7 +54,7 @@
 					<span class="label">确认密码</span>
 					<div class="form-right-sidebar">
 						<div class="form-right-row">
-							<input type="" placeholder="请输入确认密码" class="input" name="" id="" value="" />
+							<input type="password" v-model="params.con_password" placeholder="请输入确认密码" class="input" name="" id="" value="" />
 						</div>
 					</div>
 				</div>
@@ -60,7 +63,7 @@
 					<span style="flex: 1;">登录即同意《中国移动认证服务条款》和<span class="red-color">《携手熊猫用户协议》</span></span>
 				</label>
 				<div class="btn-box">
-					<button type="button" class="active">注册</button>
+					<button type="button" class="active" @click="resetPassword()">注册</button>
 				</div>
 			</div>
 		</div>
@@ -73,6 +76,8 @@
 <script>
 	import Header from '../components/header.vue';
 	import Footer from '../components/footer.vue';
+import { validatorFun } from '../utils/util';
+import { loginGetCaptcha, loginResetPassword } from '../service/service';
 	export default {
 		components: {
 			Header,
@@ -80,11 +85,87 @@
 		},
 		data() {
 			return {
-
+ 
+				captcha: {
+					image: '',
+					uniqid: '',
+				},
+				params: {
+					phone: '',  // 手机号
+					code: '',  // 手机验证码
+					verify: '',  // 图形验证码
+					uniqid: '',  // 生成验证码图形时返回的uniqid
+					password: '',  // 密码
+					con_password: '',  // 确认密码
+				},
+				countDown: 0,
 			};
 		},
+		mounted() {
+			this.getCaptcha();
+		},
 		methods: {
-
+			resetPassword() {
+				const params = this.params;
+				const errList = validatorFun(params, [
+					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
+					['verify', ['notNull', '请输入图形验证码']],
+					['code', ['notNull', '请输入验证码']],
+					['password', ['notNull', '请输入密码']],
+					['con_password', ['notNull', '请输入确认密码'], [(val, data) => val == data.password, '确认密码错误']],
+				]);
+				if (errList.length > 0) {
+					return this.$message.error(errList[0].errMsg);
+				}
+				loginResetPassword(params).then(({code, msg, data}) => {
+					if (code == 1) {
+						setTimeout(() => {
+							this.$router.push('/login');
+						}, 1000);
+						this.$message.success(errList[0].errMsg);
+					} else {
+						this.$message.error(errList[0].errMsg);
+					}
+				});
+			},
+			getCaptcha() {
+				loginGetCaptcha().then(({code, msg, data}) => {
+					if (code == 1) {
+						this.captcha = data;
+						this.params.uniqid = data.uniqid;
+					} else {
+						this.$message.error(errList[0].errMsg);
+					}
+				});
+			},
+			sendSms() {
+				const params = this.params;
+				const errList = validatorFun(params, [
+					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
+				]);
+				if (errList.length > 0) {
+					return this.$message.error(errList[0].errMsg);
+				}
+				generalSendSms({
+					phone: params.phone,
+				}).then(({code, msg, data}) => {
+					if (code == 1) {
+						this.countDownFn();
+						this.$message.success(msg);
+					} else {
+						this.$message.error(msg);
+					}
+				});
+			},
+			countDownFn() {
+				let num = 60;
+				const fn = () => {
+					if (num == 0) return;
+					this.countDown = --num;
+					setTimeout(() => fn(), 1000);
+				};
+				fn();
+			},
 		}
 	}
 </script>
@@ -271,4 +352,4 @@
 	.top>img {
 		width: 200px;
 	}
-</style>
+</style>

vue.config.js

@@ -1,10 +1,10 @@
 module.exports = {
-    //相当于webpack-dev-server,  对本地服务器进行配置
-    devServer: {
+    //相当于webpack-dev-server,  对本地服务器进行配置
+    devServer: {
 		port: 8080, // 自定义修改8080端口
          proxy: {
             "/api" : {
-                 target: "http://101.132.165.120:8090",   //需要跨域的目标url ,我这里是自己本地起的一个服务端口
+                 target: "http://ddsc.hdlkeji.com",   //需要跨域的目标url ,我这里是自己本地起的一个服务端口
                  changeOrigin: true,           // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404
                  ws:  true,
                  pathRewrite: {