chat-base

src/components/system/chat/index.vue

@@ -1,251 +1,289 @@
-<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 class="export" icon="ios-share-outline" @click="exports">导出</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">
-					<img v-if="row.imgs.length>0" v-lazy="row.imgs[0]" :src="row.imgs[0]" v-image-preview style="width: 60px;cursor: pointer"/>
-				</template>
-				
-				<template slot-scope="{ row, index }" slot="is_default">
-					<el-tag type="success" size="mini" v-if="row.is_default == 1">默认模板</el-tag>
-				</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>
-       
-    </div>
-</template>
-<script>
-    import IPageHeader from "../../../layouts/system/page-header/index";
-    import {SystemShowTemplateList} from "../../../api/system/user";
-	import { getRecordList } from '../../../api/system/chat'
-
-    export default {
-        name: "chatList",
-        components: {SystemShowTemplateList,IPageHeader},
-        computed: {},
-        data() {
-            return {
-				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: '接收人',
-						slot: 'to_uid',
-					    align:'center'
-					},
-					{
-					    title: '聊天图片',
-					    align: 'center',
-					    slot: 'imgs',
-					    align:'center'
-					},
-					{
-					    title: '内容',
-					    align: 'center',
-					    key: 'content',
-					    align:'left'
-					},
-					{
-					    title: '时间',
-					    align: 'center',
-					    key: 'add_time',
-					    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 () {
-                this.getData();
-            },
-			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
-                };
-                getRecordList(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>
-
-</style>
+<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="发送人：" label-for="user_id">
+					        <Input placeholder="发送人" v-model="orderData.user_id"/>
+					    </FormItem>
+					</Col>
+					<Col>
+					    <FormItem label="接收人：" label-for="to_user_id">
+					        <Input placeholder="接收人" v-model="orderData.to_user_id"/>
+					    </FormItem>
+					</Col>
+					<Col>
+					    <FormItem label="类型：" label-for="type">
+					        <el-select  v-model="orderData.type" placeholder="请选择">
+					        <el-option value="1" label="文本"></el-option>
+					        <el-option value="3" label="图片"></el-option>
+					        </el-select >
+					    </FormItem>
+					</Col>
+					<Col>
+					    <FormItem label="是否已读：" label-for="is_read">
+					        <el-select  v-model="orderData.is_read" placeholder="请选择">
+					        <el-option value="1" label="已读"></el-option>
+					        <el-option value="0" label="未读"></el-option>
+					        </el-select >
+					    </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 class="export" icon="ios-share-outline" @click="exports">导出</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="user_id">
+					<div>{{row.nickname || '微信用户'}}( UID:{{row.uid}} )</div>
+				</template>
+				<template slot-scope="{ row, index }" slot="to_user_id">
+					<div>{{row.nickname || '微信用户'}}( UID:{{row.to_user_id}} )</div>
+				</template>
+				<template slot-scope="{ row, index }" slot="type">
+					<!-- 1 文本 2语音 3图片 -->
+					<el-tag v-if="row.type==1" type="success">文本</el-tag>
+					<el-tag v-if="row.type==2" type="success">语音</el-tag>
+					<el-tag v-if="row.type==3" type="success">图片</el-tag>
+				</template>
+				<template slot-scope="{ row, index }" slot="is_read">
+					<el-tag v-if="row.is_read == 1" type="success">已读</el-tag>
+					<el-tag v-if="row.is_read == 0" type="danger">未读</el-tag>
+				</template>
+				<template slot-scope="{ row, index }" slot="content">
+
+				</template>
+
+				<template slot-scope="{ row, index }" slot="is_default">
+					<el-tag type="success" size="mini" v-if="row.is_default == 1">默认模板</el-tag>
+				</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>
+
+	</div>
+</template>
+<script>
+	import IPageHeader from "../../../layouts/system/page-header/index";
+	import {
+		SystemShowTemplateList
+	} from "../../../api/system/user";
+	import {
+		getRecordList
+	} from '../../../api/system/chat'
+
+	export default {
+		name: "chatList",
+		components: {
+			SystemShowTemplateList,
+			IPageHeader
+		},
+		computed: {},
+		data() {
+			return {
+				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: "",
+					is_read: '1',
+					type: '1'
+				},
+				columns: [{
+						title: 'ID',
+						align: 'center',
+						key: 'id',
+						align: 'center'
+					},
+					{
+						title: '发送人',
+						slot: 'user_id',
+						align: 'center'
+					},
+					{
+						title: '接收人',
+						slot: 'to_user_id',
+						align: 'center'
+					},
+					{
+						title: '类型',
+						slot: 'type',
+						align: 'center'
+					},
+					{
+						title: '内容',
+						slot: 'content',
+						align: 'center'
+					},
+					{
+						title: '是否已读',
+						slot: 'is_read',
+						align: 'center'
+					},
+					{
+						title: '时间',
+						key: 'add_time',
+						align: 'center'
+					},
+				],
+				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() {
+				this.getData();
+			},
+			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,
+					limit: that.page.pageSize,
+					...that.orderData
+				};
+				getRecordList(data)
+					.then(res => {
+						that.loading = false;
+						if (res.code == 200) {
+							that.orderList = res.data.list;
+							that.page.count = res.data.total;
+						} else {
+							that.$alert(res.msg);
+						}
+					})
+					.catch(err => {
+						that.loading = false;
+						that.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
+					});
+			},
+
+		}
+	}
+</script>
+<style scoped>
+
+</style>

src/components/system/chat/log.vue

@@ -1,257 +1,281 @@
-<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 class="export" icon="ios-share-outline" @click="exports">导出</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">
-					<img v-if="row.imgs.length>0" v-lazy="row.imgs[0]" :src="row.imgs[0]" v-image-preview style="width: 60px;cursor: pointer"/>
-				</template>
-				
-				<template slot-scope="{ row, index }" slot="status">
-					
-				</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>
-       
-    </div>
-</template>
-<script>
-    import IPageHeader from "../../../layouts/system/page-header/index";
-    import {SystemShowTemplateList} from "../../../api/system/user";
-	import { getBalanceList } from "../../../api/system/chat";
-
-    export default {
-        name: "chatList",
-        components: {SystemShowTemplateList,IPageHeader},
-        computed: {},
-        data() {
-            return {
-				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',
-					    key: 'id',
-					    align:'center'
-					},
-                    {
-                        title: '用户ID',
-						key: 'user_id',
-                        align:'center'
-                    },
-					{
-					    title: '类型',
-						slot: 'type',
-					    align:'center'
-					},
-					{
-					    title: '变动数量',
-					    key: 'num',
-					    align:'center'
-					},
-					{
-					    title: "变动后余额",
-					    key: 'balance',
-					    align:'left'
-					},
-					{
-					    title: '备注',
-					    key: 'remark',
-					    align:'left'
-					},
-					// {
-					//     title: '关联id',
-					//     key: 'relate_id',
-					//     align:'left'
-					// },
-					{
-					    title: '时间',
-					    key: 'create_time',
-					    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 () {
-                this.getData();
-            },
-			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
-                };
-                getBalanceList(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>
-
-</style>
+<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="user_id">
+						<Input placeholder="用户UID" v-model="orderData.user_id" />
+					</FormItem>
+					</Col>
+					<Col>
+					<FormItem label="类型：" label-for="type">
+						<el-select v-model="orderData.type" placeholder="请选择">
+							<el-option value="1" label="新用户赠送"></el-option>
+							<el-option value="2" label="积分购买"></el-option>
+							<el-option value="3" label="首次聊天消耗"></el-option>
+						</el-select>
+					</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 class="export" icon="ios-share-outline" @click="exports">导出</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="user_id">
+					<div>{{row.user_nickname || '微信用户'}}( UID:{{row.user_id}} )</div>
+				</template>
+				<template slot-scope="{ row, index }" slot="imgs">
+					<img v-if="row.imgs.length>0" v-lazy="row.imgs[0]" :src="row.imgs[0]" v-image-preview
+						style="width: 60px;cursor: pointer" />
+				</template>
+
+				<template slot-scope="{ row, index }" slot="type">
+					<el-tag v-if="row.type==1" type="success">新用户赠送</el-tag>
+					<el-tag v-if="row.type==2" type="success">积分购买</el-tag>
+					<el-tag v-if="row.type==3" type="success">首次聊天消耗</el-tag>
+				</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>
+
+	</div>
+</template>
+<script>
+	import IPageHeader from "../../../layouts/system/page-header/index";
+	import {
+		SystemShowTemplateList
+	} from "../../../api/system/user";
+	import {
+		getBalanceList
+	} from "../../../api/system/chat";
+
+	export default {
+		name: "chatList",
+		components: {
+			SystemShowTemplateList,
+			IPageHeader
+		},
+		computed: {},
+		data() {
+			return {
+				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: "",
+					type: "2",
+					time: [],
+					mobile: "",
+					show_template_id: "",
+				},
+				columns: [{
+						title: 'ID',
+						key: 'id',
+						align: 'center'
+					},
+					{
+						title: '用户ID',
+						slot: 'user_id',
+						align: 'center'
+					},
+					{
+						title: '类型',
+						slot: 'type',
+						align: 'center'
+					},
+					{
+						title: '变动数量',
+						key: 'num',
+						align: 'center'
+					},
+					{
+						title: "变动后余额",
+						key: 'balance',
+						align: 'left'
+					},
+					{
+						title: '备注',
+						key: 'remark',
+						align: 'left'
+					},
+					// {
+					//     title: '关联id',
+					//     key: 'relate_id',
+					//     align:'left'
+					// },
+					{
+						title: '时间',
+						key: 'create_time',
+						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() {
+				this.getData();
+			},
+			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,
+					limit: that.page.pageSize,
+					...that.orderData
+				};
+				getBalanceList(data)
+					.then(res => {
+						that.loading = false;
+						if (res.code == 200) {
+							that.orderList = res.data.list;
+							that.page.count = res.data.total;
+						} else {
+							that.$alert(res.msg);
+						}
+					})
+					.catch(err => {
+						that.loading = false;
+						that.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
+					});
+			},
+
+		}
+	}
+</script>
+<style scoped>
+
+</style>

src/components/system/chat/order.vue

@@ -4,19 +4,24 @@
 		<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"/>
+					<Col >
+					    <FormItem label="UID：" label-for="user_id">
+					        <el-input clearable placeholder="用户UID" v-model="orderData.user_id"/>
 					    </FormItem>
 					</Col>
-					<Col>
-					    <FormItem label="绑定手机：" label-for="mobile">
-					        <Input placeholder="绑定手机号码" v-model="orderData.mobile"/>
+					
+					<Col >
+					    <FormItem label="订单编号：" label-for="order_no">
+					        <el-input clearable placeholder="订单编号" v-model="orderData.order_no"/>
 					    </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 label="支付状态：" label-for="status">
+					        <el-select  v-model="orderData.status" placeholder="请选择">
+					        <el-option value="1" label="已支付"></el-option>
+					        <el-option value="0" label="未支付"></el-option>
+					        <el-option value="-1" label="已取消"></el-option>
+					        </el-select >
 					    </FormItem>
 					</Col>
 					<Col>
@@ -34,9 +39,8 @@
 				<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 slot-scope="{ row, index }" slot="user_id">
+					<div>{{row.user_nickname || '微信用户'}}( UID:{{row.user_id}} )</div>
 				</template>
 				<template slot-scope="{ row, index }" slot="imgs">
 					<img v-if="row.imgs.length>0" v-lazy="row.imgs[0]" :src="row.imgs[0]" v-image-preview
@@ -44,8 +48,13 @@
 				</template>
 
 				<template slot-scope="{ row, index }" slot="status">
-
+					<el-tag v-if="row.status==1" type="success">已支付</el-tag>
+					<el-tag v-if="row.status==0" type="danger">未支付</el-tag>
+					<el-tag v-if="row.status==-1" type="info">已取消</el-tag>
 				</template>
+				<template slot-scope="{ row, index }" slot="pay_time">
+					{{row.pay_time || ''}}
+							</template>
 
 
 
@@ -76,73 +85,9 @@
 		data() {
 			return {
 				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: {
 					user_id: "",
-					status: "all",
+					status: "1",
 					order_no: '',
 					time: [],
 					mobile: "",
@@ -153,9 +98,14 @@
 						key: 'id',
 						align: 'center'
 					},
+					{
+							title: '订单编号',
+							key: 'order_no',
+							align: 'center'
+						},
 					{
 						title: '用户ID',
-						key: 'user_id',
+						slot: 'user_id',
 						align: 'center'
 					},
 					{
@@ -175,7 +125,7 @@
 					},
 					{
 						title: '支付时间',
-						key: 'pay_time',
+						slot: 'pay_time',
 						align: 'left'
 					},
 					{
@@ -238,6 +188,7 @@
 				// this.loading = true;
 				var data = {
 					page: that.page.page,
+					limit: that.page.pageSize,
 					...that.orderData
 				};
 				getOrderList(data)
@@ -245,8 +196,7 @@
 						that.loading = false;
 						if (res.code == 200) {
 							that.orderList = res.data.list;
-							that.page.pageSize = res.data.pageSize;
-							that.page.count = res.data.pageCount;
+							that.page.count = res.data.total;
 						} else {
 							that.$alert(res.msg);
 						}