pxx-user/src/views/home/statistics.vue

<template>
	<div class="order-wrapper">
		<!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
		<el-card>
			<div class="tj flex">
				<div class="tj-item">
					<div class="tit">手续费</div>
					<div class="val">{{tj.commission||0}}</div>
				</div>
				<div class="tj-item">
					<div class="tit">赔付金</div>
					<div class="val">{{tj.compensation|| 0}}</div>
				</div>
				<div class="tj-item">
					<div class="tit">订单数</div>
					<div class="val">{{tj.order|| 0}}</div>
				</div>
				<div class="tj-item">
					<div class="tit">异常订单</div>
					<div class="val">{{tj.order_error||0}}</div>
				</div>
				<div class="tj-item">
					<div class="tit">token数</div>
					<div class="val">{{tj.tokon||0}}</div>
				</div>
				<div class="tj-item">
					<div class="tit">转账金额</div>
					<div class="val">{{tj.transfer|| 0}}</div>
				</div>
				<div class="tj-item">
					<div class="tit">提现到账</div>
					<div class="val">{{tj.withdraw||0}}</div>
				</div>
				<div class="tj-item">
					<div class="tit">提现审核中</div>
					<div class="val">{{tj.withdraw_0 || 0}}</div>
				</div>
			</div>
			
		</el-card>
		
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	import {
		createCode,
		getUserList,
		getIndex,

	} from '@/request/agent.js'
	import {
		getRechangeList,
		rechange,
		getTokenList,
		createOrder,
		getUserInfo,
		payAuto,
		dataCount
	} from '@/request/user.js'
	import {
		showTime,
		sj
	} from '@/assets/js/tools.js'
	import {
		imgs
	} from '@/assets/js/admun.js'
	import {
		set
	} from 'core-js/library/core/dict';
	export default {
		components: {
			// SlideVerify
		},
		name: 'Order',
		data() {
			return {
				showStop:false,
				dialogVisible: false,
				xdForm: {
					phone: '',
					address: '',
					minPrice: '',
					maxPrice: ''
				},
				imgs: imgs,
				msg: '888',
				loading: false,
				formLabelWidth: '100px',
				form: {
					recharge_num: '',
					image: ''
				},
				dialogTableVisible: false,
				xiadanDia: false, //下单弹窗
				queryInfo: {
					keyword: '',
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				dataloading: false,
				headers: {},
				tokenList: [],
				token: {},
				ybToken: {},
				minPriceList: [],
				maxPriceList: [],
				tipList: [],
				auto_order: false,//是否启动自动下单
				tj: {}
			}
		},
		computed: {
			...mapState(['baseInfo', 'userInfo'])
		},
		created() {
			// this.getUserInfo()
			// this.getIndex()
			// this.getList()
			// this.getTokenList()
			this.dataCount()
			this.headers['token'] = window.sessionStorage.getItem('token')
			// console.log(this.imgs, 'imgs');
		},
		methods: {
			...mapMutations(['setBaseInfo', 'setUserInfo','jUserMoney']),
			dataCount() {
				dataCount().then(res => {
					console.log(res);
					this.tj = res.data
				})
			},
			stopAuto() {
				this.auto_order = false
				this.showStop =false
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.setUserInfo(res.data)
				})
			},
			pd(arr, i = 0) {
				let that = this
				let len = arr.length - 1
				if (i <= len) {
					if (i == 0) {
						that.tipList.unshift(arr[i])
						that.pd(arr, ++i)
					} else {
						setTimeout(() => {
							that.tipList.unshift(arr[i])
							if(arr[i].title.indexOf('支付金额：') != -1) {
								// let price = zfInfo.title.replace(/支付金额：/,'')*1
								that.jUserMoney(-1*arr[i].title.replace(/支付金额：/,''))
							}
							that.pd(arr, ++i)
						}, arr[i - 1].time * 1000)
					}
				}else {
					that.xdForm.phone = ''
					that.xdForm.address = ''
					that.loading = false
					if(that.auto_order) {
						that.chooseNext()
					}else {
						that.xdForm.minPrice = ''
						that.xdForm.maxPrice = ''
					}
				}
			},
			ktAuto() {
				let that = this
				if (that.userInfo.money * 1 < that.baseInfo.auto_order * 1) {
					return that.$msg.error('您当前余额不足')
				}
				payAuto().then(res => {
					that.getUserInfo()
						that.dialogVisible = false
						that.auto_order = true
						that.chooseNext()
					//自动下单启动
				})
			},
			openZd() {
				let that = this
				if(that.loading) {
					return that.$msg.error('当前处于下单状态，请等待下单完成')
				}
				if (that.userInfo.auto_order == 0) {
					that.dialogVisible = true
				} else {
					//自动下单启动
					if(that.xdForm.minPrice == '') {
						return that.$msg.error('请选择最低价格')
					}
					if(that.xdForm.maxPrice == '') {
						return that.$msg.error('请选择最高价格')
					}
					that.auto_order = true
					that.chooseNext()
					
					
				}
			},
			//选择下一个可用token
			chooseNext() {
				let that = this
				that.token = that.tokenList.find(item => item.bl == false ) 
				if(that.auto_order) {
					if(that.token) {
						if(that.xdForm.minPrice == '') {
							return that.$msg.error('请选择最低价格')
						}
						if(that.xdForm.maxPrice == '') {
							return that.$msg.error('请选择最高价格')
						}
						that.sjAddress()
						that.sjPhone()
						// that.$msg.success('开启自动下单，请勿进行操作')
						// 启动
						that.createOrder()
					}else {
						//停止
						that.auto_order = false
					}
					
				}
			},
			createOrder() {
				let that = this
				if(that.loading ) {
					return
				}
				if ( that.token.bl) {
					if(that.auto_order) {
						
					}else {
						return this.$msg.error('该TOKEN，当天使用次数已满!')
					}
				}
				if(that.xdForm.minPrice == '') {
					return that.$msg.error('请选择最低价格')
				}
				if(that.xdForm.maxPrice == '') {
					return that.$msg.error('请选择最高价格')
				}
				if(that.xdForm.minPrice*1 > that.xdForm.maxPrice*1) {
					return that.$msg.error('最高价格需大于最低价格')
				}
				if(that.xdForm.phone == '') {
					return that.$msg.error('请输入手机号码')
				}
				if (!/(^1[2|3|4|5|6|7|8|9][0-9]{9}$)/.test(that.xdForm.phone)) {
					return that.$msg.error('请输入正确的手机号码')
				}
				if(that.xdForm.address == '') {
					return that.$msg.error('请输入收货地址')
				}
				that.loading = true
				createOrder({
					min_price: that.xdForm.minPrice,
					max_price: that.xdForm.maxPrice,
					address: that.xdForm.address,
					phone: that.xdForm.phone,
					token: that.token.token
				}).then(res => {
					
					//更新token
					that.token.count++
					if(that.token.count == 2) {
						that.token.bl = true
					}
					// 加载tip
					
					that.pd(res.data, 0)

				}).catch(err => {
					console.log(err);
					that.loading = false
				})
			},
			getIndex() {
				getIndex().then(res => {
					this.setBaseInfo(res.data)
					let arr = [],
						arr2 = []
					res.data.price_min.forEach(item => {
						let a = {
							value: item * 1,
							label: item
						}
						arr.push(a)
					})
					res.data.price_max.forEach(item => {
						let a = {
							value: item * 1,
							label: item
						}
						arr2.push(a)
					})
					this.minPriceList = arr
					this.maxPriceList = arr2
				})
			},
			showTime,
			sjPhone() {
				if(this.loading) {
					return
				}
				this.xdForm.phone = sj(this.baseInfo.sys_phone)
			},
			sjAddress() {
				if(this.loading) {
					return
				}
				this.xdForm.address = sj(this.baseInfo.system_address)
			},
			closeXd() {
				this.xiadanDia = false
				this.xdForm.phone = ''
				this.xdForm.address = ''
			},
			onSuccess() {
				console.log('success');
				this.token = this.ybToken
				this.xdForm.minPrice = ''
				this.xdForm.maxPrice = ''
				this.dialogTableVisible = false
			},
			onFail() {
				console.log('fail');
			},
			onRefresh() {
				console.log('refresh');
			},
			getTokenList() {
				getTokenList().then(res => {
					this.tokenList = res.data.map(item => {
						item.count = item.count*1
						return item
					})
					// 获取第一次选择的token
					this.chooseNext()
					console.log(this.token, 'this.token');
				})
			},
			chooseToken(item) {
				// console.log(item,'ddddd');
				if(this.loading) {
					return
				}
				if (item.bl) {
					return this.$msg.error('该TOKEN，当天使用次数已满!')
				}
				this.ybToken = item
				this.dialogTableVisible = true
			},
			handleAvatarSuccess(res, file) {
				this.form.image = res.data.fullurl;
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg/png';
				// const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				// return isJPG && isLt2M;
				return true
			},
			handleAvatarError() {

			},
			getList(type) {
				let that = this
				if (type == 'reload') {
					that.queryInfo.page = 1
					that.dataloading = false
				}
				if (that.dataloading) {
					return
				}

				that.dataloading = true
				getRechangeList(that.queryInfo).then(res => {
					that.total = res.data.count
					that.list = res.data.data
					that.dataloading = false
				}).catch(err => {
					that.dataloading = false
				})
			},
			handleSizeChange(newPageSize) {
				this.queryInfo.limit = newPageSize
				this.getList()
			},
			handleCurrentChange(newPageNum) {
				this.queryInfo.page = newPageNum
				this.getList()
			},
		},

	}
</script>

<style lang="scss" scoped>
	.tj {
		width: 500px;
		flex-wrap: wrap;
		.tj-item {
			width: 120px;
			height: 120px;
			border-radius: 20px;
			box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 20px;
			.val {
				margin-top: 20px;
				color: rgb(15, 131, 254);
			}
		}
	}
</style>