sadjv3_admin/src/views/riderTop/riderTop.vue

<template>
	<div>
		<div style="display: inline-block;">
			<div style="position: relative;display: inline-block;margin: 5px;">
				<span>排序类型：</span>
				<el-select v-model="px" style="width:150px;margin-left: 10px;">
					<el-option value="1" label="正序"></el-option>
					<el-option value="2" label="倒叙"></el-option>
				</el-select>&nbsp;&nbsp;
			</div>
			<div style="position: relative;display: inline-block;">
				<span>排序字段：</span>
				<el-select v-model="type" style="width:150px;margin-left: 10px;">
					<el-option value="1" label="订单数量"></el-option>
					<el-option value="2" label="总收益"></el-option>
					<el-option value="3" label="业绩"></el-option>
					<el-option value="4" label="在线时长"></el-option>
					<el-option value="5" label="加钟金额"></el-option>
					<el-option value="6" label="充值金额"></el-option>
					<el-option value="7" label="积分"></el-option>
					<el-option value="8" label="信用分"></el-option>
				</el-select>&nbsp;&nbsp;
			</div>
			<div style="position: relative;display: inline-block;">
				<span>技师状态：</span>
				<el-select v-model="status" style="width:150px;margin-left: 10px;">
					<el-option value="1" label="正常"></el-option>
					<el-option value="2" label="停牌"></el-option>
				</el-select>&nbsp;&nbsp;
			</div>
			<div style="margin:5px;display: inline-block;">
				<span>开始时间：</span>
				<el-date-picker style="width: 160px;margin-left: 10px;" v-model="startTime" align="right"
					type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间">
				</el-date-picker>&nbsp;&nbsp;&nbsp;
			</div>
			<div style="margin:5px;display: inline-block;">
				<span>截止时间：</span>
				<el-date-picker style="width: 160px;margin-left: 10px;" v-model="endTime" align="right"
					type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择截止时间">
				</el-date-picker>
			</div>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
			</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
			</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="homeData.records">
			<el-table-column label="编号" width="80">
				<template slot-scope="scope">
					<div>{{scope.$index+1}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="artificerName" label="师傅昵称">
				<template slot-scope="scope">
					<div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.userId)">
						{{scope.row.artificerName?scope.row.artificerName:'未绑定'}}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="ddsl" label="订单数量">
			</el-table-column>
			<el-table-column prop="sy" label="总收益">
			</el-table-column>
			<el-table-column prop="yj" label="业绩">
			</el-table-column>
			<el-table-column prop="zxsc" label="在线时长(分钟)">
			</el-table-column>
			<el-table-column prop="jzl" label="加钟金额">
			</el-table-column>
			<el-table-column prop="czl" label="充值金额">
			</el-table-column>
			<el-table-column prop="xyf" label="信用分">
			</el-table-column>
			<el-table-column prop="jf" label="积分">
				<template slot-scope="scope">
					<span style="color: #4f9dec;cursor: pointer;" @click="showJfDetails(scope.row)">
						{{scope.row.jf}}
					</span>
					<el-button size="mini" style="color: #4f9dec;background: #fff;border: none;"
							   @click="showInsertJfDetail(scope.row)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
			<el-pagination
				@size-change="handleSizeChange1"
				@current-change="handleCurrentChange1"
				:page-size="limit"
				:current-page="page"
				layout="total,prev,pager,next,jumper"
				:total="homeData.total">
			</el-pagination>
		</div>

		<!--技师积分详情列表-->
		<el-dialog title="技师积分详情列表" :visible.sync="dialogJfDetailListFormVisible" width="80%" center>
			<div style="display: inline-block">
				<span>类型：</span>
				<el-select
					clearable
					v-model="jfDetailClassify"
					style="width: 150px; margin-left: 10px">
					<el-option
						v-for="item in dictData"
						:key="item.id"
						:label="item.value"
						:value="item.id">
					</el-option>
				</el-select>&nbsp;&nbsp;
			</div>
			<div style="margin-left:10px;display: inline-block;">
				<span>开始时间：</span>
				<el-date-picker style="width: 160px;" v-model="jfDetailStartTime" align="right"
								type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间">
				</el-date-picker>&nbsp;&nbsp;&nbsp;
			</div>
			<div style="margin-left:10px;display: inline-block;">
				<span>结束时间：</span>
				<el-date-picker style="width: 160px;" v-model="jfDetailEndTime" align="right" type="datetime"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择结束时间">
				</el-date-picker>
			</div>
			<el-button
				style="margin-left: 10px;"
				size="mini"
				type="primary"
				icon="document"
				@click="selectJfDetails">查询
			</el-button>
			<el-button
				style="margin-left: 10px"
				size="mini"
				type="primary"
				icon="document"
				@click="cleanJfDetails">重置
			</el-button>
			<el-table :data="jfDetailData.records" style="width: 100%">
				<el-table-column prop="artificerName" label="技师名称" align="center"></el-table-column>
				<el-table-column prop="createTime" label="时间" align="center"></el-table-column>
				<el-table-column prop="classify" label="类型" align="center">
					<template slot-scope="scope">
						{{ showDictValue(scope.row.classify, dictData) }}
					</template>
				</el-table-column>
				<el-table-column prop="integral" label="积分" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.type==2">-</span>
						{{scope.row.integral}}
					</template>
				</el-table-column>
				<el-table-column prop="achievement" label="业绩" align="center"></el-table-column>
				<el-table-column prop="ordersNo" label="订单号" align="center"></el-table-column>
				<el-table-column prop="remarks" label="备注" align="center"></el-table-column>
			</el-table>
			<div style="text-align: center; margin-top: 10px">
				<el-pagination
					@size-change="handleJfSizeChange"
					@current-change="handleJfCurrentChange"
					:page-size="jfDetailLimit"
					:current-page="jfDetailPage"
					layout="total, prev, pager, next,jumper"
					:total="jfDetailData.totalCount"
				></el-pagination>
			</div>
		</el-dialog>

		<!-- 修改积分 -->
		<el-dialog title="修改积分" :visible.sync="dialogJfDetail" center>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">修改类型：</span>
				<el-radio-group v-model="jfDetailType">
					<el-radio :label="1">增加</el-radio>
					<el-radio :label="2">减少</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">积分：</span>
				<el-input style="width:50%;" v-model="jfDetailIntegral" type="number" :min="0" :max="100" :controls="false"
						  placeholder="请输入积分"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">备注：</span>
				<el-input style="width:50%;"
						  v-model="jfDetailRemarks"
						  type="textarea"
						  :rows="4"
						  placeholder="请输入备注">
				</el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogJfDetail = false">取 消</el-button>
				<el-button type="primary" @click="insertJfDetail()">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				method: 'false',
				tableDataLoading: true,
				homeData: {},
				info: {
					stockDate: this.getNowTime(), //日期
				},
				info1: {
					stockDate1: this.getNowTime1(), //日期
				},
				startTime: '',
				endTime: '',
				px: '',
				type: '',
				status: '',

				jfDetailArtificerId: '',
				jfDetailArtificerName: '',
				jfDetailClassify: '',
				jfDetailType: '',
				jfDetailIntegral: 0,
				jfDetailRemarks: '',
				jfDetailStartTime: '',
				jfDetailEndTime: '',
				jfDetailPage: 1,
				jfDetailLimit: 10,
				jfDetailData: {},
				jfDetailTableDataLoading: false,
				dialogJfDetailListFormVisible: false,
				dialogJfDetail: false,
				dictData:[{id:1,value:'在线时长'},{id:2,value:'充值'},{id:3,value:'业绩'},{id:4,value:'系统调整'}],
			}
		},
		methods: {
			//处理默认选中当前日期
			getNowTime() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() //得到月份
				var date = now.getDate() //得到日期
				var hh = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
				var mm = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
				var ss = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			//处理默认选中当前日期
			getNowTime1() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期
				var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
				var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
				var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
				month = month + 1;
				month = month.toString().padStart(2, "0");
				date = date.toString().padStart(2, "0");
				var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
				return defaultDate;
				this.$set(this.info, "stockDate", defaultDate);
			},
			handleSizeChange1(val) {
				this.limit = val
				this.homeSelect()
			},
			handleCurrentChange1(val) {
				this.page = val
				this.homeSelect()
			},

			// 获取社区数据列表
			homeSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('artificer/selectArtificerMoneyList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'startTime': this.startTime,
						'endTime': this.endTime,
						'px':this.px,
						'type':this.type,
						'status':this.status,
					})
				}).then(({ data }) => {
					console.log("------>",data)
					this.tableDataLoading = false
					this.homeData = data.data
					console.log(this.homeData)
				})
			},
			// 详情跳转
			updatesvideo(userId) {
				if (userId) {
					this.$router.push({
						path: '/userDetail',
						query: {
							userId: userId
						}
					})
				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '未绑定用户',
						type: 'warning'
					})
					return
				}

			},
			// 查询
			select() {
				this.page = 1
				this.limit = 10
				this.homeSelect()
			},
			// 重置
			cleans() {
				this.px = ''
				this.type = ''
				this.status = ''
				this.startTime = ''
				this.endTime = ''
				this.info.stockDate = this.getNowTime()
				this.homeSelect()
			},
			// 订单分析选择日期
			animeOrder() {
				console.log('info', this.info)
				this.homeSelect()
				// this.colonel()
			},
			// 订单分析年月日
			orderfenxi(value) {
				this.page = 1
				let vanumber = value
				// if (vanumber === 1) {
				this.flag = value
				this.homeSelect()
				// this.colonel()
				// }
				// if (vanumber === 2) {
				// 	this.flag = 2
				// 	this.taskData()
				// 	this.colonel()
				// }
				// if (vanumber === 3) {
				// 	this.flag = 3
				// 	this.taskData()
				// 	this.colonel()
				// }
			},
			// 项目类型
			fwSelect() {
				this.$http({
					url: this.$http.adornUrl('sys/dict/selectDictList'),
					method: 'get',
					params: this.$http.adornParams({
						'type': '服务类型'
					})
				}).then(({
					data
				}) => {
					let returnData = data.data
					this.fwData = returnData
				})
			},
			showDictValue(data, datas){
				const dictItem = datas.find(item => data === item.id);
				return dictItem ? dictItem.value : '';
			},
			showJfDetails(row){
				this.jfDetailArtificerId=row.artificerId;
				this.dialogJfDetailListFormVisible = true;
				this.selectJfDetails();
			},
			selectJfDetails(){
				this.jfDetailTableDataLoading = true;
				this.$http({
					url: this.$http.adornUrl('artificer/getJfDetailList'),
					method: 'get',
					params: this.$http.adornParams({
						'artificerId' : this.jfDetailArtificerId,
						'classify': this.jfDetailClassify,
						'startTime': this.jfDetailStartTime,
						'endTime': this.jfDetailEndTime,
						'page': this.jfDetailPage,
						'limit': this.jfDetailLimit,
					})
				}).then(({ data }) => {
					this.jfDetailTableDataLoading = false
					this.jfDetailData = data.data
				})
			},
			cleanJfDetails(){
				this.jfDetailClassify='';
				this.jfDetailStartTime='';
				this.jfDetailEndTime='';
				this.jfDetailPage=1;
				this.jfDetailLimit=10;
				this.selectJfDetails();
			},
			//分页
			handleJfSizeChange(val) {
				this.jfDetailLimit = val;
				this.selectJfDetails();
			},

			//翻页
			handleJfCurrentChange(val) {
				this.jfDetailPage = val;
				this.selectJfDetails();
			},
			showInsertJfDetail(row){
				this.jfDetailArtificerId=row.artificerId;
				this.jfDetailArtificerName=row.artificerName;
				this.jfDetailType='';
				this.jfDetailIntegral=0;
				this.jfDetailRemarks='';
				this.dialogJfDetail = true;
			},
			insertJfDetail(){
				if (this.jfDetailType == "") {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: "请选择型",
						type: "warning",
					});
					return;
				}
				if (this.jfDetailIntegral == "") {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: "请填写积分",
						type: "warning",
					});
					return;
				}
				this.$http({
					url: this.$http.adornUrl("artificer/insertJfDetail"),
					method: "post",
					params: this.$http.adornParams({
						artificerId: this.jfDetailArtificerId,
						artificerName: this.jfDetailArtificerName,
						type: this.jfDetailType,
						integral: this.jfDetailIntegral,
						remarks : "系统调整积分："+this.jfDetailRemarks,
					}),
				}).then(({data}) => {
					if (data.code == 0) {
						this.$message({
							message: "修改成功",
							type: "success",
							duration: 1500,
							onClose: () => {
								this.homeSelect();
							},
						});
						this.dialogJfDetail = false;
					} else {
						this.$message({
							message: data.msg,
							type: "warning",
							duration: 1500,
							onClose: () => {
							},
						});
					}
				});
			},
		},
		mounted() {
			this.homeSelect()
			this.fwSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}

	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}

	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}

	.bqList {
		padding: 4px 14px;
		margin: 4px;
		border: 1px solid #efefef;
		font-size: 12px;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}

	.delss {
		display: none;
		position: relative;
	}

	.delss .el-icon-delete {
		position: absolute;
		top: 0;
	}

	.bqList:hover .delss {
		display: initial;
		opacity: 0.5;

	}

	.tj {
		padding: 6px !important;
		margin: 4px;
		font-size: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
</style>