myjadmin/src/components/system/forum/list.vue

<template>
	<div style="padding-top: 10px;">
		<i-page-header :title="pageTitle"></i-page-header>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- <Form ref="orderData" :model="orderData">
                <Row :gutter="24" type="flex">
					<Col>
					    <FormItem label="UID：" label-for="uid">
					        <Input placeholder="用户UID" v-model="orderData.uid"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem label="绑定手机：" label-for="mobile">
					        <Input placeholder="绑定手机号码" v-model="orderData.mobile"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem label="购买时间：">
					        <DatePicker v-model="orderData.time" format="yyyy/MM/dd HH:mm:ss" type="datetimerange" placement="bottom-start" placeholder="自定义时间" style="width: 300px;" class="mr20" :options="options"></DatePicker>
					    </FormItem>
					</Col>
					<Col>
					    <Button label="default" type="primary" icon="ios-search"  class="mr15" style="margin-top: 32px;" @click="orderSearch()">搜索</Button>
					</Col>
                </Row>
            </Form> -->
			<Col>
			<Button type="primary" class="export" icon="ios-share-outline" @click="sendOpen">发布贴子</Button>
			</Col>
			<Table :columns="columns" :data="orderList" ref="table" :loading="loading" highlight-row no-data-text="暂无数据"
				no-filtered-data-text="暂无筛选结果" class="orderData mt25">
				<template slot-scope="{ row, index }" slot="order_id">
					<span v-text="row.order_id" style="display: block;"></span>
				</template>
				<template slot-scope="{ row, index }" slot="uid">
					<div>{{row.nickname || '微信用户'}}[UID:{{row.uid}}]</div>
					<div>{{row.mobile || '未绑定手机号'}}</div>
				</template>
				<template slot-scope="{ row, index }" slot="imgs">
					<div v-if="row.imgs.length>0" style="display: flex;">
						<img v-for="item in row.imgs" v-lazy="item" :src="item" v-image-preview
							style="width: 60px;cursor: pointer" />
					</div>
				</template>

				<template slot-scope="{ row, index }" slot="handle">
					<div><el-button plain size="mini" @click="">查看评论</el-button></div>
					<br />
					<div><el-button plain size="mini" @click="">删除</el-button></div>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="page.count" show-elevator show-total @on-change="tapPage" :page-size="page.pageSize" />
			</div>
		</Card>

		<Modal v-model="sendModel" title="发布贴子" @on-ok="sendOk('sendFormValidate')" @on-cancel="sendCancel" width="800">
			<Form :model="sendData" :label-width="labelWidth" :rules="ruleValidate" ref="sendFormValidate">
				<FormItem label="贴子文本" prop="content">
					<Input v-model="sendData.content" type="textarea" :autosize="{minRows: 5,maxRows: 5}"
						placeholder="请输入贴子内容"></Input>
				</FormItem>
				<FormItem label="图片">
					<div class="clearfix">
						<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item,index) in sendData.imgs"
							:key="index">
							<img v-lazy="item" :src="item" v-image-preview />
							<i class="el-icon-error img-remove-btn" @click="removeImgs(index)"></i>
						</div>
						<ui-upload style="float: left;" :upUrl="upUrl" fileName="上传图片" :headers="upHeaders"
							:updata="{isz:0,code:'goods'}" @onUpload="onUpload"
							v-if="sendData.imgs.length<6"></ui-upload>
					</div>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button  size="large"  :loading="modal_loading" @click="sendCancel">取消</Button>
			            <Button type="primary" size="large"  :loading="modal_loading" @click="sendOk('sendFormValidate')">提交</Button>
			        </div>
		</Modal>
	</div>
</template>
<script>
	import IPageHeader from "../../../layouts/system/page-header/index";
	import {
		SystemShowTemplateList
	} from "../../../api/system/user";
	import Setting from '@/setting';
	import UiUpload from "@/ui/upload/index";

	export default {
		name: "forumList",
		components: {
			SystemShowTemplateList,
			IPageHeader,
			UiUpload
		},
		computed: {},
		data() {
			return {
				modal_loading: false,
				ruleValidate: {
					content: [{
						required: true,
						message: '请输入贴子内容',
						trigger: 'blur'
					}],

				},
				labelWidth: 120,
				upHeaders: {},
				upUrl: '',
				sendData: {
					content: '',
					imgs: []
				},
				sendModel: false,
				pageTitle: "贴子记录",
				options: {
					shortcuts: [{
							text: '今天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date()
									.getDate()));
								return [start, end];
							}
						},
						{
							text: '昨天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 1)));
								end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate())));
								return [start, end];
							}
						},
						{
							text: '最近7天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 6)));
								return [start, end];
							}
						},
						{
							text: '最近30天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 29)));
								return [start, end];
							}
						},
						{
							text: '本月',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									1)));
								return [start, end];
							}
						},
						{
							text: '本年',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
								return [start, end];
							}
						}
					]
				},

				orderData: {
					uid: "",
					status: "all",
					time: [],
					mobile: "",
					show_template_id: "",
				},
				columns: [{
						title: 'ID',
						align: 'center',
						key: 'id',
						align: 'center'
					},
					{
						title: '发布者',
						slot: 'uid',
						align: 'center'
					},
					{
						title: '帖子内容',
						align: 'center',
						key: 'content',
						align: 'left'
					},
					{
						title: '帖子图片',
						align: 'center',
						slot: 'imgs',
						align: 'center'
					},
					{
						title: '时间',
						align: 'center',
						key: 'add_time',
						align: 'left'
					},
					{
						title: '操作',
						align: 'center',
						slot: 'handle',
						align: 'left'
					},
				],
				loading: false,
				orderList: [],
				orderDatalist: {},
				orderId: 0,
				page: {
					total: 0, // 总条数
					page: 1, // 当前页
					pageSize: 10 // 每页显示条数
				},
			}
		},

		created() {
			if (this.$route.query.title) {
				this.pageTitle = this.$route.query.title;
			}
			if (this.$route.query.uid) {
				this.orderData.uid = parseInt(this.$route.query.uid);
			}
			if (this.$route.query.show_template_id) {
				this.orderData.show_template_id = parseInt(this.$route.query.show_template_id);
			}
			this.initView();
		},
		methods: {
			initView: function() {
				var upHeaders = {};
				this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
				const token = this.$utils.util.cookies.get('system_token');
				if (token) {
					upHeaders['SYSTEM-ACC-TOKEN'] = token;
				}
				this.upHeaders = upHeaders;
			},
			onUpload: function(res) {
				if (res.code == -1) {
					Notice.error({
						title: "系统提示",
						content: res.msg
					});
				} else {
					this.sendData.imgs.push(res.data.img);
				}
			},
			removeImgs: function(index) {
				this.$delete(this.sendData.imgs, index);
			},
			sendOpen() {
				this.sendModel = true
			},
			sendCancel() {
				this.sendModel = false
				this.sendData = {
					content: '',
					imgs: []
				}
				console.log('sendCancel');
			},
			sendOk(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.sendCancel()
						this.$Message.success('发布成功!');
					} else {
					}
				})
			},
			tabsHandleClick: function(tab, event) {
				this.page.page = 1;
				this.getData();
			},
			orderSearch: function() {
				this.page.page = 1;
				this.getData();
			},
			/**
			 * 分页
			 */
			tapPage: function(index) {
				this.page.page = index;
				this.getData();
			},
			/**
			 * 获取数据
			 */
			getData: function() {
				var that = this;
				// this.loading = true;
				var data = {
					page: that.page.page,
					...that.orderData
				};
				// SystemShowTemplateList(data)
				//     .then(res=>{
				//         that.loading = false;
				//         if(res.code == 200) {
				//             that.orderList = res.data.list;
				//             that.page.pageSize = res.data.pageSize;
				//             that.page.count = res.data.pageCount;
				//         } else {
				//             that.$alert(res.msg);
				//         }
				//     })
				//     .catch(err=>{
				//         that.loading = false;
				//         that.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
				//     });
			},

		}
	}
</script>
<style scoped>
	.upimg-item {
		width: 82px;
		height: 82px;
		margin-right: 5px;
		overflow: hidden;
		float: left;
		margin-bottom: 5px;
		position: relative;
	}

	.upimg-item img {
		width: 82px;
		cursor: pointer;
	}

	.img-remove-btn {
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: 24px;
	}
</style>