|
|
- <template>
- <view class='updateUserInfo'>
- <!--顶部导航栏-->
- <navbar leftClick @leftClick="$utils.navigateBack" title="修改个人信息" />
-
- <!--主页面-->
- <view class="frame">
- <view class="item">
- <view>头像</view>
- <view>11</view>
- </view>
- <view class="item">
- <view class="label">昵称</view>
- <view class="value">
- <uv-input v-model="form.nickName" placeholder="昵称" border="bottom" clearable
- @change="keyWordChange"></uv-input>
- </view>
- </view>
- <view class="item" @click="sexChange">
- <view class="label">性别</view>
- <view>{{form.sex}}<span style="color: #8b8f97;"> ></span></view>
- </view>
- <view class="item">
- <view class="label">联系方式</view>
- <view class="value">
- <uv-input v-model="form.phone" placeholder="联系方式" border="bottom" clearable
- @change="keyWordChange"></uv-input>
- </view>
- </view>
- </view>
-
- <!-- ActionSheet 操作菜单 -->
- <uv-action-sheet ref="actionSheet" :actions="sexList" title="性别" @select="select" @close="close">
- </uv-action-sheet>
-
- <!--确认修改个人信息按钮-->
- <button @click="confirmEditUserInfo" class="bottomBtn">
- 确认修改
- </button>
- </view>
- </template>
-
- <script>
- import '../../common.css'; // 引入公共 CSS 文件
- export default {
- data() {
- return {
- form: {
- sex: '男',
- nickName: '库里yyds',
- phone: '15346993500',
- },
- sexList: [{
- name: '男',
- value: 1
- },
- {
- name: '女',
- value: 0
- },
- ]
- }
- },
- methods: {
-
- confirmEditUserInfo() {
- this.$api('infoUpdateInfo', {}, res => {
- if (res.code == 200) {
- // 修改VueX中的信息,是否有密码啥的
- uni.showToast({
- title: '修改成功',
- icon: 'success'
- })
- setTimeout(() => {
- uni.navigateTo({
- url: '/pages/index/index'
- })
- }, 300)
- }
- })
- },
-
- sexChange() {
- this.$refs.actionSheet.open() //打开ActionSheet 操作菜单
- },
-
- // ActionSheet 操作菜单选中
- select(e) {
- console.log('选中该项:', e);
- this.form.sex = e.name
- this.$refs.actionSheet.close() //关闭操作菜单
-
- },
-
- // ActionSheet 操作菜单关闭
- close() {
- this.$refs.actionSheet.close() //关闭操作菜单
-
- },
- }
- }
- </script>
-
-
- <style lang="scss" scoped>
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
-
- .updateUserInfo {
- .frame {
- padding: 28rpx 28rpx 0 28rpx;
-
- .item {
- display: flex;
- justify-content: space-between;
- // border-bottom: 1px solid #c9c9c9;
- margin-top: 20rpx;
- padding: 20rpx;
-
- .label {
- width: 60%;
- }
-
- .value {
- width: 40%;
- text-align: right;
- }
- }
- }
- }
- </style>
|