Feat(用户&登录):增加性别和出生日期

This commit is contained in:
lifizer
2024-06-24 16:10:54 +08:00
parent 3e25bf9759
commit d95b57d523
2 changed files with 178 additions and 145 deletions
+109 -127
View File
@@ -37,7 +37,51 @@
<image :src="webUrl+'/20220925102920713727.png'" style="width: 40rpx;height: 40rpx"/>
</view>
</view>
<view class="cell flex jc-between ai-center">
<view class="flex ai-center">
<view class="title">性别</view>
<view class="value">
<u-radio-group
v-model="form.gender"
placement="row"
>
<u-radio
:name="1"
:customStyle="{marginRight: '16px'}"
active-color="#C41617"
label="男"
/>
<u-radio
:name="2"
active-color="#C41617"
label="女"
/>
</u-radio-group>
</view>
</view>
<view class="icon">
<image :src="webUrl+'/20220903145836941399.png'"/>
</view>
</view>
<view class="cell flex jc-between ai-center">
<view class="flex ai-center">
<view class="title">出生日期</view>
<view class="value">
<picker
:value="form.birthday"
mode="date"
class="picker"
@change="birthdayChange"
>
<u--text v-if="form.birthday" :text="form.birthday"></u--text>
<u--text v-else text="请选择" color="#c0c4cc"></u--text>
</picker>
</view>
</view>
<view class="icon">
<image :src="webUrl+'/20220903145836941399.png'"/>
</view>
</view>
<view class="cell flex jc-between ai-center" @click="bindPhone">
<view class="flex ai-center">
<view class="title">手机号</view>
@@ -47,7 +91,6 @@
<image :src="webUrl+'/20220903145836941399.png'"/>
</view>
</view>
<view class="cell flex jc-between ai-center" @click="payPwdClick">
<view class="flex ai-center">
<view class="title">支付密码</view>
@@ -57,29 +100,20 @@
<image :src="webUrl+'/20220903145836941399.png'"/>
</view>
</view>
</view>
<button class="btn-save" @click="submit">保存修改</button>
<!-- <view-->
<!-- class="logOut cart-color acea-row row-center-wrapper"-->
<!-- @click="logout"-->
<!-- v-if="$deviceType=='app'"-->
<!-- >退出登录-->
<!-- </view>-->
</view>
</template>
<script>
import {mapGetters} from "vuex";
import {isWeixin, trim, uploadImage} from "@/utils";
import {postUserEdit} from "@/api/user";
import ImageCropper from "@/pkg_user/components/invinbg-image-cropper/invinbg-image-cropper.vue";
import {mapGetters} from 'vuex'
import {isWeixin, trim, uploadImage} from '@/utils'
import {postUserEdit} from '@/api/user'
import ImageCropper from '@/pkg_user/components/invinbg-image-cropper/invinbg-image-cropper.vue'
import { pageListenMixins } from '@/mixins/pageListenMixins'
export default {
name: "PersonalData",
name: 'PersonalData',
components: {
ImageCropper
},
@@ -87,155 +121,101 @@ export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
avatar: "",
avatar: '',
isWeixin: false,
currentAccounts: 0,
switchUserInfo: [],
userIndex: 0,
tempFilePath: '',
cropFilePath: '',
pageKeyId: Object.freeze('userConfig')
};
pageKeyId: Object.freeze('userConfig'),
form: {
gender: '',
birthday: ''
}
}
},
computed: mapGetters(["userInfo"]),
computed: mapGetters(['userInfo']),
mounted: function () {
this.avatar = this.userInfo.avatar;
this.isWeixin = isWeixin();
this.avatar = this.userInfo.avatar
this.form.gender = this.userInfo.gender
this.form.birthday = this.userInfo.birthday || ''
this.isWeixin = isWeixin()
},
onShow: function () {
//获取用户信息
this.$store.dispatch("getUser", true);
// 获取用户信息
this.$store.dispatch('getUser', true)
},
methods: {
confirm(e) {
this.tempFilePath = '';
this.cropFilePath = e.detail.tempFilePath;
this.tempFilePath = ''
this.cropFilePath = e.detail.tempFilePath
uploadImage(this.cropFilePath, img => {
console.log(img)
this.avatar = img;
this.cropFilePath = '';
this.avatar = img
this.cropFilePath = ''
})
},
cancel() {
console.log('canceled')
},
bindPhone: function () {
this.$yrouter.push("/pkg_user/views/bindPhone");
this.$yrouter.push('/pkg_user/views/bindPhone')
},
payPwdClick: function () {
//先判断用户是否绑定过手机
// 先判断用户是否绑定过手机
if (this.userInfo.phone) {
//再判断用户是否设置过支付密码
// 再判断用户是否设置过支付密码
if (this.userInfo.hasPwdPay) {
//修改支付密码
this.$yrouter.push("/pkg_user/views/payPassword");
// 修改支付密码
this.$yrouter.push('/pkg_user/views/payPassword');
} else {
//设置支付密码
this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true");
// 设置支付密码
this.$yrouter.push('/pkg_user/views/payPassword?isSetMode=true');
}
} else {
//跳转到绑定手机
this.$yrouter.push("/pkg_user/views/bindPhone");
// 跳转到绑定手机
this.$yrouter.push('/pkg_user/views/bindPhone');
}
},
// switchAccounts: function (index) {
// let that = this;
// this.userIndex = index;
// let userInfo = this.switchUserInfo[this.userIndex];
// if (this.switchUserInfo.length <= 1) return true;
// if (userInfo === undefined) {
// uni.showToast({
// title: "切换的账号不存在",
// icon: "none",
// duration: 2000
// });
// return;
// }
// if (userInfo.user_type === "h5") {
// switchH5Login()
// .then(({data}) => {
// uni.hideLoading();
// const expires_time = dayjs(data.expires_time);
// store.commit("login", data.token, expires_time);
// that.$emit("changeswitch", false);
// location.reload();
// })
// .catch(err => {
// uni.hideLoading();
// uni.showToast({
// title:
// err.msg || err.response.data.msg || err.response.data.message,
// icon: "none",
// duration: 2000
// });
// });
// } else {
// cookie.set("loginType", "wechat", 60);
// uni.hideLoading();
// this.$store.commit("logout");
// this.$emit("changeswitch", false);
// }
// },
chooseImage() {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: (res) => {
this.tempFilePath = res.tempFilePaths.shift()
}
});
})
},
birthdayChange(e) {
this.form.birthday = e.detail.value
},
submit: function () {
let userInfo = this.userInfo;
let that = this;
const that = this
postUserEdit({
nickname: trim(this.userInfo.nickname),
avatar: this.avatar
}).then(
res => {
that.$store.dispatch("userInfo", true);
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000
});
setTimeout(function () {
that.$yrouter.back();
}, 2000)
},
err => {
uni.showToast({
title:
err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
}
);
},
// logout: function () {
// uni.showModal({
// title: "提示",
// content: "确认退出登录?",
// success: function (res) {
// if (res.confirm) {
// getLogout()
// .then(res => {
// this.$store.commit("logout");
// this.$yrouter.replace({
// path: "/pages/user/Login/index",
// query: {}
// });
// })
// .catch(() => {
// })
// }
// }
// });
// }
avatar: this.avatar,
gender: this.form.gender,
birthday: this.form.birthday
}).then(res => {
that.$store.dispatch('userInfo', true)
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
setTimeout(function () {
that.$yrouter.back()
}, 2000)
}, err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000
})
})
}
}
}
</script>
@@ -290,7 +270,6 @@ export default {
.cell-box {
width: 686rpx;
height: 406rpx;
margin: -130rpx 32rpx 0;
padding: 0 40rpx 20rpx;
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
@@ -317,6 +296,9 @@ export default {
color: #999999;
font-size: 32rpx;
line-height: 48rpx;
.picker {
width: 400rpx;
}
}
.icon {