live-mobile/src/views/user/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <van-row>
            <van-col class="title" span="24"></van-col>
            <van-form @submit="onSubmit" v-model="form" :show-error-message="false">
              <van-field
                required
                v-model="form.name"
                left-icon="manager-o"
                name="name"
                label="用户名"
                placeholder="请填写用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field required left-icon="eye-o" v-model="form.age" name="age" label="年龄" type="digit" placeholder="请填写年龄" />
              <van-field name="gender" left-icon="friends-o" label="性别">
                <template #input>
                  <van-radio-group v-model="form.gender" direction="horizontal">
                    <van-radio name="男">男</van-radio>
                    <van-radio name="女">女</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field
                required
                v-model="form.idnumber"
                name="idnumber"
                label="身份证号"
                left-icon="vip-card-o"
                placeholder="请填写身份证号"
                :rules="[{ required: true, message: '请填写身份证号' }]"
              />
              <van-field
                required
                v-model="form.phone"
                name="phone"
                label="手机号"
                left-icon="phone-o"
                placeholder="请填写手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
              />
              <van-field v-model="form.hosname" left-icon="wap-home-o" name="hosname" label="单位" placeholder="请填写单位标准全称" />
              <van-field v-model="form.deptname" left-icon="apps-o" name="deptname" label="科室" placeholder="请填写学员所在科室" />
              <van-field v-model="form.level" left-icon="gem-o" name="level" label="职称" placeholder="请填写职称" />
              <van-field v-model="form.major" left-icon="user-o" name="major" label="专业" placeholder="请填写所属专业名称" />
              <van-field v-model="form.isxf" name="isxf" left-icon="star-o" label="学分" placeholder="请填写需要授予学分" />
              <van-field name="isjc" left-icon="points" label="是否来自基层">
                <template #input>
                  <van-switch v-model="form.isjc" size="20" />
                </template>
              </van-field>
              <van-field
                left-icon="location-o"
                readonly
                clickable
                name="address"
                :value="form.address"
                label="地址"
                placeholder="点击选择单位所在地"
                @click="showPicker = true"
              />
              <van-popup round v-model="showPicker" position="bottom">
                <van-picker show-toolbar :columns="addresslist" @confirm="onConfirm" @cancel="showPicker = false" />
              </van-popup>
              <!-- <van-field
                v-model="form.title"
                name="title"
                label="简介"
                left-icon="like-o"
                placeholder="请填写个人简介"
                type="textarea"
                rows="2"
                autosize
                maxlength="500"
                show-word-limit
              /> -->
              <!-- <van-field
                v-model="form.remark"
                name="remark"
                left-icon="description"
                label="备注"
                placeholder="请填写备注"
                type="textarea"
                rows="2"
                autosize
                maxlength="500"
                show-word-limit
              /> -->
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                  提交
                </van-button>
              </div>
            </van-form>
          </van-row>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue';
import { mapState, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
const { mapActions: onliveUser } = createNamespacedHelpers('onliveUser');

export default {
  name: 'index',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      addresslist: ['省直', '黄石', '鄂州', '孝感', '黄冈', '咸宁'],
      showPicker: false,
      imgUrl: require('@/assets/test.jpg'),
      form: {},
    };
  },
  created() {
    this.searchInfo();
  },
  methods: {
    ...onliveUser(['roomuserfetch', 'roomuserupdate']),
    onConfirm(value) {
      this.form.address = value;
      this.showPicker = false;
    },
    async searchInfo() {
      // this.user.uid = '5ee84acb778c700c98d8bf35';
      const res = await this.roomuserfetch(this.user.uid);
      if (this.$checkRes(res)) {
        console.log(res.data);
        this.$set(this, `form`, res.data);
      }
    },
    async onSubmit() {
      const res = await this.roomuserupdate(this.form);
      if (this.$checkRes(res)) {
        this.$message({
          message: '修改信息成功',
          type: 'success',
        });
        this.back();
      }
    },
    // 返回
    back() {
      this.$router.push({ path: '/live/index' });
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
  position: relative;
  z-index: 999;
}
.main {
  min-height: 570px;
  .newsList {
    margin: 10px;
    border-bottom: 1px dashed #ccc;
    width: 95%;
    .image {
      .el-image {
        border-radius: 10px;
      }
    }
    .text {
      padding: 0 10px;
      .title {
        padding: 10px 0;
      }
      .type {
        font-size: 14px;
        color: #ccc;
        padding: 5px 0;
      }
      .time {
        font-size: 14px;
        color: #ccc;
        padding: 5px 0;
      }
    }
  }
}
/deep/.van-field__control {
  margin: 5px 10px;
}
</style>