|
|
@@ -0,0 +1,191 @@
|
|
|
+<template>
|
|
|
+ <div id="list_2">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="8" class="list" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="imgUrl"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="title textOver">
|
|
|
+ <span>[{{ item.room_id }}]</span>
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <el-col :span="12" class="textOver"><i class="el-icon-location-outline"></i>{{ item.province }}-{{ item.place }} </el-col>
|
|
|
+ <el-col :span="12" class="textOver"><i class="el-icon-time"></i>{{ item.start_date }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="warning" size="mini" @click="toAdmin(item.room_id)">管理进入</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="inChannel(item)">进入频道</el-button>
|
|
|
+ <!-- <el-button type="primary" size="mini" @click="logout">退出登录</el-button> -->
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="登陆" width="40%" :visible.sync="adminDialog" @closed="handleClose" :destroy-on-close="true">
|
|
|
+ <data-form :data="loginForm" :fields="loginFields" :rules="rules" @save="toSave" submitText="登陆"> </data-form>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="用户登录" width="30%" :visible.sync="userDialog" @closed="handleClose" :destroy-on-close="true">
|
|
|
+ <data-form :data="userForm" :fields="userFields" :rules="{}" @save="userToSave"> </data-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const _ = require('lodash');
|
|
|
+import dataForm from '@common/src/components/frame/form.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: mapTrainLive } = createNamespacedHelpers('trainLive');
|
|
|
+const { mapActions: place } = createNamespacedHelpers('place');
|
|
|
+export default {
|
|
|
+ name: 'list_2',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ adminDialog: false,
|
|
|
+ imgUrl: require('@common/src/assets/train.jpg'),
|
|
|
+ list: [],
|
|
|
+ loginForm: {},
|
|
|
+ loginFields: [
|
|
|
+ { label: '房间号', model: 'room_id', type: 'text' },
|
|
|
+ { label: '登录密码', model: 'password', required: true, type: 'password' },
|
|
|
+ ],
|
|
|
+ rules: {
|
|
|
+ room_id: [{ required: true, trigger: 'blur', message: '请填写房间号' }],
|
|
|
+ password: [{ required: true, trigger: 'blur', message: '请填写密码' }],
|
|
|
+ },
|
|
|
+ // 用户登录
|
|
|
+ userDialog: false,
|
|
|
+ userForm: {},
|
|
|
+ userFields: [
|
|
|
+ { label: '账号', model: 'user_phone' },
|
|
|
+ { label: '密码', model: 'user_password', required: true, type: 'password' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ await this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapTrainLive(['query', 'login', 'userLogin', 'userLogout']),
|
|
|
+ ...place({ queryName: 'queryName' }),
|
|
|
+ // 查询列表
|
|
|
+ async search() {
|
|
|
+ let res = await this.query();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ for (const val of res.data) this.searchPlace(val);
|
|
|
+ this.$set(this, `list`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询省市
|
|
|
+ async searchPlace(data) {
|
|
|
+ let nameData = { code: [data.province, data.place] };
|
|
|
+ let res = await this.queryName(nameData);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ data.province = res.data.find(i => i.code == data.province).name;
|
|
|
+ data.place = res.data.find(i => i.code == data.place).name;
|
|
|
+ return data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 管理进入
|
|
|
+ toAdmin(room_id) {
|
|
|
+ if (_.isEqual(_.get(this.user, 'room_id'), room_id)) this.$router.push({ path: '/admin/live/train' });
|
|
|
+ this.adminDialog = true;
|
|
|
+ this.loginForm.room_id = room_id;
|
|
|
+ },
|
|
|
+ async toSave() {
|
|
|
+ const res = await this.login(_.cloneDeep(this.loginForm));
|
|
|
+ if (res.errcode != '0') {
|
|
|
+ this.$message.error(res.errmsg);
|
|
|
+ } else {
|
|
|
+ this.$router.push({ path: '/admin/live/train' });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 进入频道
|
|
|
+ inChannel(data) {
|
|
|
+ this.$set(this.userForm, `id`, data.id);
|
|
|
+ let user = this.user;
|
|
|
+ this.userDialog = true;
|
|
|
+ // if (user & user._id) {
|
|
|
+ // this.$router.push({ path: '/trainLive/index', query: { id: data.id } });
|
|
|
+ // } else {
|
|
|
+ // this.userDialog = true;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 用户登录提交
|
|
|
+ async userToSave({ data }) {
|
|
|
+ let res = await this.userLogin(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$router.push({ path: '/twoweb/trainLive/index', query: { id: data.id } });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 退出登录
|
|
|
+ async logout() {
|
|
|
+ let res = await this.userLogout('60054402531a84863c5b8622');
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleClose() {
|
|
|
+ this.loginForm = {};
|
|
|
+ this.adminDialog = false;
|
|
|
+ this.userForm = {};
|
|
|
+ this.userDialog = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ test: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ .list {
|
|
|
+ width: 379px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin: 0 15px 10px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ .image {
|
|
|
+ height: 260px;
|
|
|
+ .el-image {
|
|
|
+ height: 260px;
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ border-top-right-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ padding: 5px 10px 10px 10px;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0 0 5px 0;
|
|
|
+ span:nth-child(1) {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list:nth-child(3n) {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
