mobile-official/src/views/adminCenter/duijiehui/add.vue

<template>
  <div id="add">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="onClickLeft"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <van-form>
            <van-field v-model="form.title" name="标题" label="标题" placeholder="标题" />
            <van-field readonly clickable name="datetimePicker" :value="form.start_time" label="开始时间" placeholder="点击选择时间" @click="onepic = true" />
            <van-popup v-model="onepic" position="bottom">
              <van-datetime-picker type="datetime" @confirm="oneSubmit" @cancel="onepic = false" />
            </van-popup>
            <van-field readonly clickable name="datetimePicker" :value="form.end_time" label="结束时间" placeholder="点击选择时间" @click="twopic = true" />
            <van-popup v-model="twopic" position="bottom">
              <van-datetime-picker type="datetime" @confirm="twoSubmit" @cancel="twopic = false" />
            </van-popup>
            <van-field readonly clickable name="datetimePicker" :value="form.join_end" label="报名截止" placeholder="点击选择时间" @click="threepic = true" />
            <van-popup v-model="threepic" position="bottom">
              <van-datetime-picker type="datetime" @confirm="threeSubmit" @cancel="threepic = false" />
            </van-popup>
            <van-field readonly clickable name="picker" :value="form.province" label="省份" placeholder="点击选择省份" @click="provincepic = true" />
            <van-popup v-model="provincepic" position="bottom">
              <van-picker show-toolbar :columns="prodata" @confirm="proSubmit" @cancel="provincepic = false" />
            </van-popup>
            <van-field readonly clickable name="picker" :value="form.place" label="市区" placeholder="点击选择市区" @click="placepic = true" />
            <van-popup v-model="placepic" position="bottom">
              <van-picker show-toolbar :columns="placedate" @confirm="plaSubmit" @cancel="placepic = false" />
            </van-popup>
            <van-field v-model="form.desc" rows="1" autosize label="简介" type="textarea" placeholder="企业简介" />
            <van-field v-model="form.adminuser" name="负责人" label="负责人" placeholder="负责人" />
            <van-field v-model="form.phone" name="手机号" label="手机号" placeholder="手机号" />
            <van-field v-model="form.sponsor" name="主办方" label="主办方" placeholder="主办方" />
            <van-field v-model="form.organizer" name="承办方" label="承办方" placeholder="承办方" />
            <van-field v-model="form.videointro" name="文件标题" label="文件标题" placeholder="文件标题" />
            <van-field name="radio" label="展会状态">
              <template #input>
                <van-radio-group v-model="form.status" direction="horizontal">
                  <van-radio name="0">准备中</van-radio>
                  <van-radio name="1">开始</van-radio>
                  <van-radio name="2">结束</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <!-- <van-field v-model="form.file_path" name="视频" label="视频" placeholder="视频" /> -->
            <div style="margin: 16px;">
              <van-button round block type="info" @click="onSubmit">
                提交
              </van-button>
            </div>
          </van-form>
        </el-col>
      </el-col>
    </el-row>
    <van-dialog v-model="show" title="展会信息" @confirm="closedia">
      <p style="padding: 10px 15px;">房间号：{{ dockinfo.room_id }}</p>
      <p style="padding: 10px 15px;">手机号：{{ dockinfo.phone }}</p>
      <p style="padding: 10px 15px;">密码：{{ dockinfo.passwd }}</p>
    </van-dialog>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: place } = createNamespacedHelpers('place');
const { mapActions: dock } = createNamespacedHelpers('dock');
var moment = require('moment');
// import { Dialog } from 'vant';
const jwt = require('jsonwebtoken');
export default {
  name: 'add',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      form: {},
      onepic: false,
      twopic: false,
      threepic: false,
      // 字典表
      // 省份
      // 原数组
      province: [],
      // 重组
      prodata: [],
      // 市区
      // 原数组
      place: [],
      // 重组
      placedate: [],
      // 省份选择
      provincepic: false,
      // 市区选择
      placepic: false,
      // 展会成功信息
      dockinfo: {},
      show: false,
    };
  },
  async created() {
    await this.searchother();
    if (this.id) {
      await this.searchinfo();
    }
  },
  methods: {
    ...place({ placequery: 'query' }),
    ...dock(['create', 'fetch', 'update']),
    // 提交
    async onSubmit() {
      let data = this.form;
      let province = this.province.find(i => i.name == data.province);
      if (province) data.province = province.code;
      let place = this.place.find(i => i.name == data.place);
      if (place) data.place = place.code;
      if (data.id) {
        let res = await this.update(data);
        if (this.$checkRes(res)) {
          this.$notify({
            message: '修改成功',
            type: 'success',
          });
          this.closedia();
        }
      } else {
        data.user_id = this.user.uid;
        let res = await this.create(data);
        if (this.$checkRes(res)) {
          res.data.passwd = jwt.decode(res.data.password);
          this.$set(this, `dockinfo`, res.data);
          this.show = true;
        }
      }
    },
    // 关闭
    closedia() {
      this.show = false;
      this.$router.push({ path: '/adminCenter/duijiehui/index' });
    },
    // 查询其他信息
    async searchother() {
      let res = await this.placequery({ level: 1 });
      let arr = await this.placequery({ level: 2 });
      if (res || arr) {
        this.$set(this, `province`, res.data);
        var prodata = res.data.map(item => item.name);
        this.$set(this, `prodata`, prodata);
        this.$set(this, `place`, arr.data);
        var placedate = arr.data.map(item => item.name);
        this.$set(this, `placedate`, placedate);
      }
    },
    // 省份选择
    async proSubmit(value) {
      this.$set(this.form, `province`, value);
      let parentdata = this.province.find(i => i.name == value);
      if (parentdata) {
        let arr = await this.placequery({ level: 2, parent: parentdata.code });
        this.$set(this, `place`, arr.data);
        var placedate = arr.data.map(item => item.name);
        this.$set(this, `placedate`, placedate);
      }
      this.provincepic = false;
    },
    // 市区选择
    plaSubmit(value) {
      this.$set(this.form, `place`, value);
      this.placepic = false;
    },
    // 开始时间
    oneSubmit(time) {
      let date = moment(time).format('YYYY-MM-DD HH:mm:ss');
      if (date) this.$set(this.form, `start_time`, date);
      this.onepic = false;
    },
    // 结束时间
    twoSubmit(time) {
      let date = moment(time).format('YYYY-MM-DD HH:mm:ss');
      if (date) this.$set(this.form, `end_time`, date);
      this.twopic = false;
    },
    // 报名截止
    threeSubmit(time) {
      let date = moment(time).format('YYYY-MM-DD HH:mm:ss');
      if (date) this.$set(this.form, `join_end`, date);
      this.threepic = false;
    },
    // 查询详情
    async searchinfo() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        let data = res.data;
        let province = this.province.find(i => i.code == res.data.province);
        if (province) data.province = province.name;
        let place = this.place.find(i => i.code == res.data.place);
        if (place) data.place = place.name;
        this.$set(this, `form`, data);
      }
    },
    // 返回
    onClickLeft() {
      this.$router.push({ path: '/adminCenter/duijiehui/index' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
</style>