|
|
@@ -2,29 +2,39 @@
|
|
|
<view class="user-info">
|
|
|
<view class="info-item">
|
|
|
<text class="tit">头像</text>
|
|
|
- <view class="avater">
|
|
|
- <image src="../../../static/logo.png" mode="aspectFill"></image>
|
|
|
+ <view class="avater" @click="gainimg">
|
|
|
+ <image :src="userinfos.image" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="tit">用户名</text>
|
|
|
- <text class="val">小王</text>
|
|
|
+ <input type="text" v-model="userinfos.username" :class="compileTF?'valinput valinput2':'valinput'" :disabled="!compileTF"
|
|
|
+ maxlength='8' />
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
- <text class="tit">用户给身份</text>
|
|
|
+ <text class="tit">用户身份</text>
|
|
|
<text class="val">管理员</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="tit">用户电话</text>
|
|
|
- <text class="val">18869487515</text>
|
|
|
+ <input type="text" v-model="userinfos.mobile" :class="compileTF?'valinput valinput2':'valinput'" :disabled="!compileTF"
|
|
|
+ @blur="verifyphone" />
|
|
|
+ <p class="hint" v-if="phonehint">手机号格式不正确</p>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="tit">E-mail</text>
|
|
|
- <text class="val">1457846@qq.com</text>
|
|
|
+ <input type="text" v-model="userinfos.email" :class="compileTF?'valinput valinput2':'valinput'" :disabled="!compileTF"
|
|
|
+ @blur="verifyemail" />
|
|
|
+ <p class="hint" v-if="emailhint">邮箱格式不正确</p>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="tit">我的地址</text>
|
|
|
- <text class="val">河南省郑州市</text>
|
|
|
+ <input type="text" v-model="location" :class="compileTF?'valinput valinput2':'valinput'"
|
|
|
+ :disabled="!compileTF" />
|
|
|
+ </view>
|
|
|
+ <view class="compile">
|
|
|
+ <p @click="compile" v-if="!compileTF">编辑</p>
|
|
|
+ <p @click="submit" v-else>提交</p>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -33,45 +43,156 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ userinfos: {},
|
|
|
+ location:'',
|
|
|
+ imageList: '',
|
|
|
+ compileTF: false,
|
|
|
+ phonehint: false,
|
|
|
+ emailhint: false
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ gainimg() { //添加图片
|
|
|
+ if (this.compileTF) {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1, //默认9
|
|
|
+ sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
+ sourceType: ['album', 'camera'], //从相册选择
|
|
|
+ success: (res) => {
|
|
|
+ uni.uploadFile({
|
|
|
+ url: 'http://182.92.193.64:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例,非真实的接口地址
|
|
|
+ filePath: res.tempFilePaths[0],
|
|
|
+ name: 'img_file',
|
|
|
+ formData: {
|
|
|
+ 'user': 'test'
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ this.userinfos.image = JSON.parse(uploadFileRes.data).data.src
|
|
|
+ this.$forceUpdate() //强制刷新视图
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, //
|
|
|
+ async postusers() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=home.homes.personal_center',
|
|
|
+ data: {
|
|
|
+ ret: 'change',
|
|
|
+ username: this.userinfos.username,
|
|
|
+ mobile: this.userinfos.mobile,
|
|
|
+ province: this.userinfos.province,
|
|
|
+ city: this.userinfos.city,
|
|
|
+ district: this.userinfos.district,
|
|
|
+ image: this.userinfos.image,
|
|
|
+ email: this.userinfos.email
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ compile() { //编辑按钮
|
|
|
+ this.compileTF = true
|
|
|
+ },
|
|
|
+ submit() {//提交按钮
|
|
|
+ this.userinfos.province = this.location.slice(0,this.location.indexOf("省")+1)
|
|
|
+ this.userinfos.city = this.location.slice(this.location.indexOf("省")+1,this.location.indexOf("市")+1)
|
|
|
+ this.userinfos.district = this.location.slice(this.location.indexOf("市")+1)
|
|
|
+ this.postusers()
|
|
|
+ this.compileTF = false
|
|
|
+ },
|
|
|
+ verifyphone() { //手机号验证
|
|
|
+ var reg = /^1[23456789]\d{9}$/;
|
|
|
+ if (!reg.test(this.userinfos.mobile)) {
|
|
|
+ this.phonehint = true
|
|
|
+ } else {
|
|
|
+ this.phonehint = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ verifyemail() { //邮箱验证
|
|
|
+ var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
|
|
|
+ if (!reg.test(this.userinfos.email)) {
|
|
|
+ this.emailhint = true
|
|
|
+ } else {
|
|
|
+ this.emailhint = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.userinfos = JSON.parse(option.data)
|
|
|
+ this.location = this.userinfos.province+this.userinfos.city+this.userinfos.district
|
|
|
+ console.log(this.userinfos)
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-page{
|
|
|
- background:$uni-bg-color-grey;
|
|
|
- .user-info{
|
|
|
- background:#fff;
|
|
|
- padding:0 40rpx;
|
|
|
- .info-item{
|
|
|
- display:flex;
|
|
|
- justify-content: space-between;
|
|
|
- line-height:100rpx;
|
|
|
- .avater{
|
|
|
- width:100rpx;
|
|
|
- height:100rpx;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- image{
|
|
|
- width:100%;
|
|
|
- height:100%;
|
|
|
+ page {
|
|
|
+ background: $uni-bg-color-grey;
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 40rpx;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 100rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .avater {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ font-size: 14px
|
|
|
+ }
|
|
|
+
|
|
|
+ .val {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valinput {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ width: 360rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valinput2 {
|
|
|
+ background-color: #e1e5ee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ position: absolute;
|
|
|
+ top: 40rpx;
|
|
|
+ right: 220rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ff0000;
|
|
|
}
|
|
|
}
|
|
|
- .tit{font-size:14px}
|
|
|
- .val{
|
|
|
- font-size:12px;
|
|
|
- color:#666;
|
|
|
+
|
|
|
+ .compile {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #58C77A;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</style>
|