123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
- <mobile-frame>
- <view class="info">
- <view class="one">
- <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
- <uni-forms-item label="头像" name="icon">
- <upload :list="icon" name="icon" :count="1" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
- </uni-forms-item>
- <uni-forms-item label="用户名" name="name">
- <uni-easyinput type="text" v-model="form.name" placeholder="请输入用户名" />
- </uni-forms-item>
- <!-- <uni-forms-item label="手机号" name="phone">
- <uni-easyinput type="text" v-model="form.phone" placeholder="请输入手机号" disabled />
- </uni-forms-item>
- <uni-forms-item label="电子邮箱" name="email">
- <uni-easyinput type="text" v-model="form.email" placeholder="请输入电子邮箱" disabled />
- </uni-forms-item> -->
- <uni-forms-item label="性别" name="gender">
- <picker @change="genderChange" name="gender" :value="form.gender" :range="genderList" range-key="label">
- <view class="uni-input">{{form.zhGender||'请选择性别'}}</view>
- </picker>
- </uni-forms-item>
- <uni-forms-item label="生日" name="birth">
- <picker mode="date" :value="form.birth" name="birth" @change="bindDateChange">
- <view class="uni-input">{{form.birth||'请选择日期'}}</view>
- </picker>
- </uni-forms-item>
- </uni-forms>
- <view class="btn">
- <button type="primary" @click="onSubmit('form')" size="small">提交</button>
- </view>
- </view>
- </view>
- </mobile-frame>
- </template>
- <script>
- import upload from '@/components/upload/index.vue';
- export default {
- components: {
- upload
- },
- data() {
- return {
- frameStyle: {
- useBar: false
- },
- form: {},
- rules: {
- name: {
- rules: [{
- required: true,
- errorMessage: '请输入用户名',
- }]
- },
- phone: {
- rules: [{
- required: true,
- errorMessage: '请输入手机号',
- }]
- },
- },
- genderList: [{
- label: '保密',
- value: '0'
- },
- {
- label: '男',
- value: '1'
- },
- {
- label: '女',
- value: '2'
- },
- ],
- icon: []
- };
- },
- onLoad: function(e) {
- const that = this;
- that.watchLogin();
- },
- methods: {
- watchLogin() {
- const that = this;
- uni.getStorage({
- key: 'token',
- success: async (res) => {
- let user = that.$jwt(res.data);
- if (user) {
- const arr = await that.$api(`/user/${user.id}`, 'GET');
- if (arr.errcode == '0') {
- let gender = that.genderList.find(i => i.value == arr.data
- .gender)
- if (gender) arr.data.zhGender = gender.label;
- that.$set(that, `form`, arr.data)
- that.$set(that, `icon`, arr.data.icon)
- } else {
- uni.showToast({
- title: arr.errmsg,
- icon: 'error',
- duration: 2000
- });
- }
- }
- },
- fail: (err) => {}
- })
- },
- toPath(e) {
- if (e && e.route) uni.redirectTo({
- url: `/${e.route}`
- })
- },
- // 图片上传
- uplSuc(e) {
- const that = this;
- that.$set(that, `${e.name}`, [...that[e.name], e.data]);
- },
- // 图片删除
- uplDel(e) {
- const that = this;
- let data = that[e.name];
- let arr = data.filter((i, index) => index != e.data.index);
- that.$set(that, `${e.name}`, arr)
- },
- // 选择性别
- genderChange(e) {
- const that = this;
- let data = that.genderList[e.detail.value];
- if (data) {
- that.$set(that.form, `gender`, data.value);
- that.$set(that.form, `zhGender`, data.label);
- }
- },
- // 选择日期
- bindDateChange(e) {
- const that = this;
- that.$set(that.form, `birth`, e.detail.value);
- },
- // 返回
- back() {
- uni.navigateBack({
- delta: 1
- })
- },
- // 提交保存
- onSubmit(ref) {
- const that = this;
- that.$refs[ref].validate().then(async params => {
- params.icon = that.icon
- const arr = await that.$api(`/user/${that.form.id}`, 'POST', params);
- if (arr.errcode == '0') {
- uni.showToast({
- title: `维护信息成功`,
- icon: 'success',
- });
- that.back();
- } else {
- uni.showToast({
- title: arr.errmsg,
- })
- }
- })
- },
- }
- }
- </script>
- <style lang="scss">
- .info {
- display: flex;
- flex-direction: column;
- width: 100vw;
- height: 100vh;
- .one {
- padding: 2vw;
- .uni-input {
- border: #f1f1ff 1px solid;
- padding: 2vw 2vw;
- border-radius: 1vw;
- }
- .btn {
- text-align: center;
- button {
- margin: 0 2vw 2vw 2vw;
- background-color: var(--ff0Color);
- color: var(--fffColor);
- }
- .name {
- color: var(--f85Color);
- font-size: var(--font14Size);
- }
- }
- }
- }
- .uni-forms-item {
- margin-bottom: 6vw !important;
- display: flex;
- flex-direction: row;
- }
- </style>
|