增加修改头像昵称

components/u-header.vue

@@ -261,6 +261,10 @@
 					uni.navigateTo({
 						url: '../login/login'
 					})
+				}else{
+					uni.navigateTo({
+						url:"/pages/mine/editMine"
+					})
 				}
 				this.show = false
 			},
@@ -277,7 +281,11 @@
 				});
 			},
 			side() {
-				this.show = !this.show
+				this.show = !this.show
+				var token = getToken();
+				if(token){
+					this.GetUser()
+				}
 			},
 		}
 	}

components/uni-popup-dialog/keypress.js

@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif

components/uni-popup-dialog/uni-popup-dialog.vue

@@ -0,0 +1,250 @@
+<template>
+	<view class="uni-popup-dialog">
+		<view class="uni-dialog-title">
+			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
+		</view>
+		<view v-if="mode === 'base'" class="uni-dialog-content">
+			<slot>
+				<text class="uni-dialog-content-text">{{content}}</text>
+			</slot>
+		</view>
+		<view v-else class="uni-dialog-content">
+			<slot>
+				<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus">
+			</slot>
+		</view>
+		<view class="uni-dialog-button-group">
+			<view class="uni-dialog-button" @click="closeDialog">
+				<text class="uni-dialog-button-text">取消</text>
+			</view>
+			<view class="uni-dialog-button uni-border-left" @click="onOk">
+				<text class="uni-dialog-button-text uni-button-color">保存</text>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import popup from '../uni-popup/popup.js'
+	/**
+	 * PopUp 弹出层-对话框样式
+	 * @description 弹出层-对话框样式
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} value input 模式下的默认值
+	 * @property {String} placeholder input 模式下输入提示
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} mode = [base|input] 模式、
+	 * 	@value base 基础对话框
+	 * 	@value input 可输入对话框
+	 * @property {String} content 对话框内容
+	 * @property {Boolean} beforeClose 是否拦截取消事件
+	 * @event {Function} confirm 点击确认按钮触发
+	 * @event {Function} close 点击取消按钮触发
+	 */
+
+	export default {
+		name: "uniPopupDialog",
+		mixins: [popup],
+		props: {
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			placeholder: {
+				type: [String, Number],
+				default: '请输入内容'
+			},
+			type: {
+				type: String,
+				default: 'error'
+			},
+			mode: {
+				type: String,
+				default: 'base'
+			},
+			title: {
+				type: String,
+				default: '提示'
+			},
+			content: {
+				type: String,
+				default: ''
+			},
+			beforeClose: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				dialogType: 'error',
+				focus: false,
+				val: ""
+			}
+		},
+		watch: {
+			type(val) {
+				this.dialogType = val
+			},
+			mode(val) {
+				if (val === 'input') {
+					this.dialogType = 'info'
+				}
+			},
+			value(val) {
+				this.val = val
+			}
+		},
+		created() {
+			// 对话框遮罩不可点击
+			this.popup.disableMask()
+			// this.popup.closeMask()
+			if (this.mode === 'input') {
+				this.dialogType = 'info'
+				this.val = this.value
+			} else {
+				this.dialogType = this.type
+			}
+		},
+		mounted() {
+			this.focus = true
+		},
+		methods: {
+			/**
+			 * 点击确认按钮
+			 */
+			onOk() {
+				if (this.mode === 'input') {
+					this.$emit('confirm', this.val)
+				} else {
+					this.$emit('confirm')
+				}
+				if (this.beforeClose) return
+				this.popup.close()
+			},
+			/**
+			 * 点击取消按钮
+			 */
+			closeDialog() {
+				this.$emit('close')
+				if (this.beforeClose) return
+				this.popup.close()
+			},
+			close() {
+				this.popup.close()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-popup-dialog {
+		width: 300px;
+		border-radius: 15px;
+		background-color: #fff;
+		position: absolute;
+		left: 50%;
+		top: 400rpx;
+		transform: translateX(-50%);
+	}
+
+	.uni-dialog-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		padding-top: 15px;
+		padding-bottom: 5px;
+	}
+
+	.uni-dialog-title-text {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #000000!important;
+		opacity: 1;
+	}
+
+	.uni-dialog-content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 5px 15px 15px 15px;
+	}
+
+	.uni-dialog-content-text {
+		font-size: 14px;
+		color: #6e6e6e;
+	}
+
+	.uni-dialog-button-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		border-top-color: #f5f5f5;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-dialog-button {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 45px;
+	}
+
+	.uni-border-left {
+		border-left-color: #f0f0f0;
+		border-left-style: solid;
+		border-left-width: 1px;
+	}
+
+	.uni-dialog-button-text {
+		font-size: 14px;
+	}
+
+	.uni-button-color {
+		color: #FAB309;
+	}
+
+	.uni-dialog-input {
+		flex: 1;
+		font-size: 14px;
+		border-bottom: 1px #eee solid;
+		height: 40px;
+		padding: 0 10px;
+		border-radius: 5px;
+		color: #555;
+		text-align: left;
+	}
+
+	.uni-popup__success {
+		color: #4cd964;
+	}
+
+	.uni-popup__warn {
+		color: #f0ad4e;
+	}
+
+	.uni-popup__error {
+		color: #dd524d;
+	}
+
+	.uni-popup__info {
+		color: #909399;
+	}
+</style>

components/uni-popup/keypress.js

@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif

components/uni-popup/popup.js

@@ -0,0 +1,26 @@
+
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	created(){
+		this.popup = this.getParent()
+	},
+	methods:{
+		/**
+		 * 获取父元素实例
+		 */
+		getParent(name = 'uniPopup') {
+			let parent = this.$parent;
+			let parentName = parent.$options.name;
+			while (parentName !== name) {
+				parent = parent.$parent;
+				if (!parent) return false
+				parentName = parent.$options.name;
+			}
+			return parent;
+		},
+	}
+}

components/uni-popup/uni-popup.vue

@@ -0,0 +1,406 @@
+<template>
+	<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
+		<view @touchstart="touchstart" >
+				<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
+		</view>
+	
+		<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
+			<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view>
+		</uni-transition>
+		<!-- #ifdef H5 -->
+		<keypress v-if="maskShow" @esc="onTap" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+// #ifdef H5
+import keypress from './keypress.js'
+// #endif
+
+/**
+ * PopUp 弹出层
+ * @description 弹出层组件，为了解决遮罩弹层的问题
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+ * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
+ * 	@value top 顶部弹出
+ * 	@value center 中间弹出
+ * 	@value bottom 底部弹出
+ * 	@value left		左侧弹出
+ * 	@value right  右侧弹出
+ * 	@value message 消息提示
+ * 	@value dialog 对话框
+ * 	@value share 底部分享示例
+ * @property {Boolean} animation = [ture|false] 是否开启动画
+ * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
+ * @property {String}  backgroundColor 					主窗口背景色
+ * @property {Boolean} safeArea									是否适配底部安全区
+ * @event {Function} change 打开关闭弹窗触发，e={show: false}
+ */
+
+export default {
+	name: 'uniPopup',
+	components: {
+		// #ifdef H5
+		keypress
+		// #endif
+	},
+	props: {
+		// 开启动画
+		animation: {
+			type: Boolean,
+			default: true
+		},
+		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+		// message: 消息提示 ; dialog : 对话框
+		type: {
+			type: String,
+			default: 'center'
+		},
+		// maskClick
+		maskClick: {
+			type: Boolean,
+			default: true
+		},
+		backgroundColor: {
+			type: String,
+			default: 'none'
+		},
+		safeArea:{
+			type: Boolean,
+			default: true
+		}
+	},
+
+	watch: {
+		/**
+		 * 监听type类型
+		 */
+		type: {
+			handler: function(type) {
+				if (!this.config[type]) return
+				this[this.config[type]](true)
+			},
+			immediate: true
+		},
+		isDesktop: {
+			handler: function(newVal) {
+				if (!this.config[newVal]) return
+				this[this.config[this.type]](true)
+			},
+			immediate: true
+		},
+		/**
+		 * 监听遮罩是否可点击
+		 * @param {Object} val
+		 */
+		maskClick: {
+			handler: function(val) {
+				this.mkclick = val
+			},
+			immediate: true
+		},
+		safeArea: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			duration: 300,
+			ani: [],
+			showPopup: false,
+			showTrans: false,
+			popupWidth: 0,
+			popupHeight: 0,
+			config: {
+				top: 'top',
+				bottom: 'bottom',
+				center: 'center',
+				left: 'left',
+				right: 'right',
+				message: 'top',
+				dialog: 'center',
+				share: 'bottom'
+			},
+			maskClass: {
+				position: 'fixed',
+				bottom: 0,
+				top: 0,
+				left: 0,
+				right: 0,
+				backgroundColor: 'rgba(0, 0, 0, 0.4)'
+			},
+			transClass: {
+				position: 'fixed',
+				left: 0,
+				right: 0
+			},
+			maskShow: true,
+			mkclick: true,
+			popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
+		}
+	},
+	computed: {
+		isDesktop() {
+			return this.popupWidth >= 500 && this.popupHeight >= 500
+		},
+		bg() {
+			if (this.backgroundColor === '' || this.backgroundColor === 'none') {
+				return 'transparent'
+			}
+			return this.backgroundColor
+		}
+	},
+	mounted() {
+		const fixSize = () => {
+			const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync()
+			this.popupWidth = windowWidth
+			this.popupHeight = windowHeight + windowTop
+			// 是否适配底部安全区
+			if(this.safeArea){
+				this.safeAreaInsets = safeAreaInsets
+			}else{
+				this.safeAreaInsets = 0
+			}
+		}
+		fixSize()
+		// #ifdef H5
+		window.addEventListener('resize', fixSize)
+		this.$once('hook:beforeDestroy', () => {
+			window.removeEventListener('resize', fixSize)
+		})
+		// #endif
+	},
+	created() {
+		this.mkclick = this.maskClick
+		if (this.animation) {
+			this.duration = 300
+		} else {
+			this.duration = 0
+		}
+		// TODO 处理 message 组件生命周期异常的问题
+		this.messageChild = null
+		// TODO 解决头条冒泡的问题
+		this.clearPropagation = false
+	},
+	methods: {
+		/**
+		 * 公用方法，不显示遮罩层
+		 */
+		closeMask() {
+			this.maskShow = false
+		},
+		/**
+		 * 公用方法，遮罩层禁止点击
+		 */
+		disableMask() {
+			this.mkclick = false
+		},
+		// TODO nvue 取消冒泡
+		clear(e) {
+			// #ifndef APP-NVUE
+			e.stopPropagation()
+			// #endif
+			this.clearPropagation = true
+		},
+		
+		open(direction) {
+			let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
+			if (!(direction && innerType.indexOf(direction) !== -1)) {
+				direction = this.type
+			}
+			if (!this.config[direction]) {
+				console.error('缺少类型：', direction)
+				return
+			}
+			this[this.config[direction]]()
+			this.$emit('change', {
+				show: true,
+				type: direction
+			})
+		},
+		close(type) {
+			this.showTrans = false
+			this.$emit('change', {
+				show: false,
+				type: this.type
+			})
+			clearTimeout(this.timer)
+			// // 自定义关闭事件
+			// this.customOpen && this.customClose()
+			this.timer = setTimeout(() => {
+				this.showPopup = false
+			}, 300)
+		},
+		// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
+		touchstart(){
+			this.clearPropagation = false
+		},
+		
+		onTap() {
+			if(this.clearPropagation) return
+			if (!this.mkclick) return
+			this.close()
+		},
+		/**
+		 * 顶部弹出样式处理
+		 */
+		top(type) {
+			this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
+			this.ani = ['slide-top']
+			this.transClass = {
+				position: 'fixed',
+				left: 0,
+				right: 0,
+				backgroundColor: this.bg
+			}
+			// TODO 兼容 type 属性 ，后续会废弃
+			if (type) return
+			this.showPopup = true
+			this.showTrans = true
+			this.$nextTick(() => {
+				if (this.messageChild && this.type === 'message') {
+					this.messageChild.timerClose()
+				}
+			})
+		},
+		/**
+		 * 底部弹出样式处理
+		 */
+		bottom(type) {
+			this.popupstyle = 'bottom'
+			this.ani = ['slide-bottom']
+
+			this.transClass = {
+				position: 'fixed',
+				left: 0,
+				right: 0,
+				bottom: 0,
+				paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0,
+				backgroundColor: this.bg
+			}
+			// TODO 兼容 type 属性 ，后续会废弃
+			if (type) return
+			this.showPopup = true
+			this.showTrans = true
+		},
+		/**
+		 * 中间弹出样式处理
+		 */
+		center(type) {
+			this.popupstyle = 'center'
+			this.ani = ['zoom-out', 'fade']
+			this.transClass = {
+				position: 'fixed',
+				/* #ifndef APP-NVUE */
+				display: 'flex',
+				flexDirection: 'column',
+				/* #endif */
+				bottom: 0,
+				left: 0,
+				right: 0,
+				top: 0,
+				justifyContent: 'center',
+				alignItems: 'center'
+			}
+			// TODO 兼容 type 属性 ，后续会废弃
+			if (type) return
+			this.showPopup = true
+			this.showTrans = true
+		},
+		left(type) {
+			this.popupstyle = 'left'
+			this.ani = ['slide-left']
+			this.transClass = {
+				position: 'fixed',
+				left: 0,
+				bottom: 0,
+				top: 0,
+				backgroundColor: this.bg,
+				/* #ifndef APP-NVUE */
+				display: 'flex',
+				flexDirection: 'column'
+				/* #endif */
+			}
+			// TODO 兼容 type 属性 ，后续会废弃
+			if (type) return
+			this.showPopup = true
+			this.showTrans = true
+		},
+		right(type) {
+			this.popupstyle = 'right'
+			this.ani = ['slide-right']
+			this.transClass = {
+				position: 'fixed',
+				bottom: 0,
+				right: 0,
+				top: 0,
+				backgroundColor: this.bg,
+				/* #ifndef APP-NVUE */
+				display: 'flex',
+				flexDirection: 'column'
+				/* #endif */
+			}
+			// TODO 兼容 type 属性 ，后续会废弃
+			if (type) return
+			this.showPopup = true
+			this.showTrans = true
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.uni-popup {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.45);
+	top: 0;
+	left: 0;
+	/* #ifndef APP-NVUE */
+	z-index: 99;
+	/* #endif */
+	&.top,
+	&.left,
+	&.right {
+		/* #ifdef H5 */
+		top: var(--window-top);
+		/* #endif */
+		/* #ifndef H5 */
+		top: 0;
+		/* #endif */
+	}
+	.uni-popup__wrapper {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: relative;
+		/* iphonex 等安全区设置，底部安全区适配 */
+		/* #ifndef APP-NVUE */
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		/* #endif */
+		&.left,
+		&.right {
+			/* #ifdef H5 */
+			padding-top: var(--window-top);
+			/* #endif */
+			/* #ifndef H5 */
+			padding-top: 0;
+			/* #endif */
+			flex: 1;
+		}
+	}
+}
+
+.fixforpc-z-index {
+	/* #ifndef APP-NVUE */
+	z-index: 999;
+	/* #endif */
+}
+
+.fixforpc-top {
+	top: 0;
+}
+</style>

pages.json

@@ -50,6 +50,12 @@
 			}
 
 		}, {
+			"path": "pages/mine/editMine",
+			"style": {
+				"navigationBarTextStyle": "black",
+				"navigationBarTitleText": "修改信息"
+			}
+		}, {
 			"path": "pages/order/info",
 			"style": {
 				"navigationBarTitleText": "订单详情",

pages/Marketing/vipers.vue

@@ -67,58 +67,77 @@
 						cateName: '钻石会员',
 						id: 20
 					},
-				],
-				dataList:[],
-				name:"",
-				userId:'',
+				],
+				dataList: [],
+				name: "",
+				userId: '',
+				page:1,
+				total:0
 			}
+		},
+		onLoad() {
+			this.getData()
 		},
-		onLoad(){
-			this.getData()
+		onReachBottom() {
+			if(this.total != this.dataList.length){
+				this.page++
+				this.getData()
+			}
 		},
-		methods: {
-			// 设置会员等级
-			set(e){
-				console.log(e,1111)
-				let level = 0;
-				if(e[0]=== 0){
-					level = 0;
-				}
-				if(e[0]=== 1){
-					level = 1;
-				}
-				if(e[0]=== 2){
-					level = 10;
-				}
-				if(e[0]=== 3){
-					level = 20;
-				}
-				this.request("/admin_user/setLevel",{user_id:this.userId,level:level},"GET").then(res=>{
-					console.log(res)
-					if(res.code === 1){
-						this.$u.toast('操作成功')
-						this.getData()
-					}else{
-						this.$u.toast(res.msg)
-					}
-				})
-			},
-			// 取消设置会员等级
-			cancel(){
-				this.userId = ""
-			},
-			// 获取数据列表
-			getData(){
-				this.request("/admin_user/list",{keyword:this.name},"GET").then(res=>{
-					if(res.code === 1){
-						this.dataList = res.data.data
-					}
-				})
+		methods: {
+			// 设置会员等级
+			set(e) {
+				console.log(e, 1111)
+				let level = 0;
+				if (e[0] === 0) {
+					level = 0;
+				}
+				if (e[0] === 1) {
+					level = 1;
+				}
+				if (e[0] === 2) {
+					level = 10;
+				}
+				if (e[0] === 3) {
+					level = 20;
+				}
+				this.request("/admin_user/setLevel", {
+					user_id: this.userId,
+					level: level
+				}, "GET").then(res => {
+					console.log(res)
+					if (res.code === 1) {
+						this.$u.toast('操作成功')
+						this.getData()
+					} else {
+						this.$u.toast(res.msg)
+					}
+				})
+			},
+			// 取消设置会员等级
+			cancel() {
+				this.userId = ""
+			},
+			// 获取数据列表
+			getData() {
+				this.request("/admin_user/list", {
+					keyword: this.name,
+					page:this.page
+				}, "GET").then(res => {
+					if (res.code === 1) {
+						this.total = res.data.total
+						if(this.page == 1){
+							this.dataList = res.data.data
+						}else{
+							this.dataList = this.dataList.concat(res.data.data) 
+						}
+					}
+				})
 			},
 			// 点击编辑
 			eidt(id) {
-				this.show = true
-				this .userId = id;
+				this.show = true
+				this.userId = id;
 			}
 		}
 	}

pages/mine/editMine.vue

@@ -0,0 +1,245 @@
+<template>
+	<view class="content">
+		<view class="edit">
+			<view class="edit_p">修改资料</view>
+			<view class="edit_a">
+				<image :src="images ? images :'http://pet.hdlkeji.com/assets/static/moren.png'" class="edit_img" mode=""></image>
+				<view class="edit_p1" @click="chooseImg">修改头像</view>
+				<view class="edit_b">
+					<view class="edit_p2">手机号</view>
+					<view class="edit_p3">{{userinfo.mobile}}</view>
+				</view>
+				<view class="edit_b">
+					<view class="edit_p2">昵称</view>
+					<view class="edit_c" @click="inputDialogToggle">
+						<input class="edit_p4" v-model="nickname"></input>
+						<view class="edit_d">修改</view>
+					</view>
+				</view>
+				<!-- 输入框示例 -->
+				<uni-popup ref="nickname" type="dialog">
+					<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" value="" :beforeClose="true" placeholder="请输入昵称" @confirm="dialogInputConfirm" @close="dialogClose"></uni-popup-dialog>
+				</uni-popup>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniPopup from "@/components/uni-popup/uni-popup.vue"
+	import uniPopupDialog from "@/components/uni-popup-dialog/uni-popup-dialog.vue"
+	export default {
+		data() {
+			return {
+				images: '',
+				userinfo: {},
+				nickname: ''
+			}
+		},
+		onLoad() {
+			this.GetUser()
+		},
+		components: {
+			uniPopup,
+			uniPopupDialog
+		},
+		methods: {
+			open() {
+				this.$refs.popup.open('top')
+			},
+			close() {
+				this.$refs.popup.close()
+			},
+			dialogInputConfirm(val) {
+				uni.hideLoading()
+				this.nickname = val
+				// 关闭窗口后，恢复默认内容 
+				this.$refs.nickname.close()
+				if (!this.nickname) {
+					uni.showToast({
+						title: '请输入昵称',
+						icon: "none"
+					});
+					return
+				}
+				this.request('/user/profile', {
+					nickname: this.nickname
+				}, 'post').then(res => {
+					uni.showToast({
+						title: '修改成功',
+						icon: "none"
+					});
+				});
+			},
+			inputDialogToggle() {
+				this.$refs.nickname.open()
+			},
+			dialogClose() {
+				this.$refs.nickname.close()
+			},
+			//获取用户信息
+			GetUser() {
+				this.request('/user/index', '', 'post').then(res => {
+					this.userinfo = res.data
+					this.images = res.data.avatar
+					this.nickname = res.data.nickname
+				});
+			},
+			//选择图片
+			chooseImg() {
+				var _this = this;
+				uni.chooseImage({
+					sourceType: ["camera", "album"], //拍摄照片或者相册中选取
+					sizeType: "compressed", //照片类型(这里选择进行压缩)
+					count: 1, //可以选中的最大数量为8张
+					success: (res) => {
+						res.tempFilePaths.forEach(items => {
+							uni.showLoading({
+								title: '正在上传中...'
+							});
+
+							uni.uploadFile({
+								url: this.url + '/common/upload', //图片上传接口
+								filePath: items,
+								fileType: 'image',
+								name: 'file',
+								header: {
+									"token": uni.getStorageSync('token')
+								},
+
+								success: (res) => {
+									uni.hideLoading();
+									_this.images = JSON.parse(res.data).data.url
+									_this.request('/user/profile', {
+										avatar: _this.images
+									}, 'post').then(res => {
+										uni.showToast({
+											title: '上传成功',
+											icon: "none"
+										});
+									});
+								},
+								fail: (err) => {
+									uni.hideLoading();
+									console.error(err);
+									uni.showToast({
+										title: '上传失败'
+									});
+								}
+							});
+						})
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page,
+	.content {
+		background-color: #F2F2F2;
+	}
+
+	.edit {
+		width: 702rpx;
+		margin: 30rpx auto;
+
+		.edit_p {
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: 600;
+			line-height: 42rpx;
+			color: #000000;
+			opacity: 1;
+		}
+
+		.edit_a {
+			width: 100%;
+			background: #FFFFFF;
+			opacity: 1;
+			border-radius: 10rpx;
+			padding: 32rpx 22rpx;
+			box-sizing: border-box;
+			margin-top: 30rpx;
+			text-align: center;
+			padding-bottom: 15rpx;
+
+			.edit_img {
+				width: 118rpx;
+				height: 118rpx;
+				background: rgba(0, 0, 0, 0);
+				border-radius: 50%;
+				opacity: 1;
+			}
+
+			.edit_p1 {
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				line-height: 36rpx;
+				color: #FF0000;
+				opacity: 1;
+				margin-top: 15rpx;
+				margin-bottom: 80rpx;
+			}
+
+			.edit_b {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				margin: 35rpx auto;
+
+				.edit_p2 {
+					width: 100rpx;
+					font-size: 30rpx;
+					font-family: PingFang SC;
+					font-weight: 400;
+					color: #B5B5B5;
+					opacity: 1;
+					margin-right: 30rpx;
+					text-align: left;
+				}
+
+				.edit_p3 {
+					font-size: 30rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #000000;
+					opacity: 1;
+					text-align: left;
+					width: 580rpx;
+				}
+
+				.edit_c {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					width: 580rpx;
+
+					.edit_p4 {
+						font-size: 30rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #000000;
+						opacity: 1;
+						text-align: left;
+					}
+
+					.edit_d {
+						background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAaCAYAAABozQZiAAAAAXNSR0IArs4c6QAAAt5JREFUOE+NlE1oXFUYhp/33pnMOAabJlAUNT9QRyi4cuPGRVy4FFp14iJkMiHD0J1boYurlNKiRJqCEk2ZOyMaydqFCxfiTkRFUBRsGKMitKLItM2d8c69XznTTG3M77c8nOf5znk551MYNlcQr4B96nveqxsbG9eDIEg5QilsNG8CDwKpwWeW9KrDw8N/lEql5DBeYaPxEehFYAiIwb7wpGo+n//1MIFWV1dH/ezQFcEZSTkz6wFf+p4quVyudZBAZqZmszlqpsuI05IeMLPY4FvSZH5zc/NaEAROuKvkVpxgbW1trBv3ljzptMvACYAfLE3Kk5OTP05PT+8S9GFXQRB44+PjY/L9N4XcFYbvCuwnwXyn0/m+Vqs54b26B98v8Hz/EnhnwB7aDvFnT5qPoui7+wU74J0nyFx0IQLHAHfka6moxFH0zUCwCx4IisXiaDeOL4l+BiNOYGa/eKLcarW+DoLg3z3hgWBqauq4mS4gXgKOAwlmm2DlQqHw1b7wQPDYqVMjmU7nvKU2I8kJUrDfBDMHwgPBxMTECclbAmaQPBei0PuHwsvLy7nCyMgTGWMdeBJwTIRx7kC4Xq/nfd8/mRofA0UgY2YOvOL7WtoXdqCXyxUt7jnwpAOBLYzlOO5erlarN/aEHUg2+xS95ENJk9vgLSx9O47jd6rV6nWXxy7YgZKeRl4IONAHblpqb/m+Vubm5m4M3ucOuN8xk3mGxK5KjA9ALL0YRd7Vs2f/A3d0dqkeGxt71nrJe5IeNzMf1MY4n6ZxY2Fh4c///8l+5/X19aHb3e5zSm0FeBTwzKwt7HVJzXK5/Nee/9mBURQ9b+hd4BEHgrUN3kjiOFxcXPx7v1mmMPzgBdTveOJugNY2KSBJwkql8s9BQ1Bh2GghuXDcFVyq57JZvzE7O9s+wvRs/g48vP0AXisU8o1SqXTrMLCfdr3efFk+00ifd7e2PqnValtHAd2eO0rLRREIfTTIAAAAAElFTkSuQmCC')no-repeat center right;
+						background-size: 13rpx 21rpx;
+						font-size: 26rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #B5B5B5;
+						opacity: 1;
+						padding-right: 30rpx;
+						line-height: 45rpx;
+						min-width: 5em;
+					}
+				}
+			}
+		}
+	}
+</style>