pxx-pc/src/views/user/setUserinfo.vue

<template>
	<div class="user">
		<div class="user-wrap">
			<div class="u-item flex">
				<div class="base">用户名</div>
				<div class="base">{{userInfo.username}}</div>
				<el-button type="text" @click="dlVisible= true">修改密码</el-button>
			</div>
			<div class="u-item flex">
				<div class="base">用户ID</div>
				<div class="base">{{userInfo.id}}</div>
			</div>
			<div class="u-item flex">
				<div class="base">用户编号</div>
				<div class="base">{{userInfo.user_code}}</div>
			</div>
			<!-- <div class="u-item flex">
				<div class="base">地址</div>
				<div>
					<span style="display: inline-block;margin-right: 20px;">{{userInfo.address}}</span>
					<el-button type="text" @click="adVisible = true">设置地址</el-button>
				</div>
			</div> -->
			<div class="u-item flex">
				<div class="base">余额</div>
				<div>
					<span style="display: inline-block;margin-right: 20px;">{{userInfo.money}}</span>
					<el-button type="text" @click="czVisible = true">充值</el-button>
					<el-button type="text" @click="txVisible = true">提现</el-button>
					<el-button type="text" @click="zzVisible = true">转账</el-button>
				</div>
			</div>
			<div class="u-item flex">
				<div class="base">交易密码</div>
				<div @click="jyVisible = true">
					<el-button type="text" v-if="!userInfo.transaction">设置交易密码</el-button>
					<el-button type="text" v-else>修改交易密码</el-button>
				</div>
			</div>
			<div class="u-item flex">
				<div>
					<div class="base">开通二次验证</div>
					<el-tag type="danger">开通二次验证可以保障你的资金安全 否则被盗号所产生的一切问题,自行负责</el-tag>
				</div>
				<div>
					<el-button type="text" v-if="userInfo.is_binding == 1">已开通</el-button>
					<el-button type="text" v-else @click="getga">立即开通</el-button>
				</div>
			</div>
			<div class="u-item flex" v-if="userInfo.agent_id != 1">
				<div class="base">自动下单</div>
				<div>
					<el-button type="text" v-if="!userInfo.auto_order == 1" @click="xdVisible = true">立即开通</el-button>
					<el-button type="text" v-else>已开通</el-button>
				</div>
			</div>
      <div class="u-item flex" v-if="userInfo.agent_id != 1">
      	<div class="base">账号有效时间</div>
      	<div style="display: flex;flex-direction: column;align-items: flex-end;">
      		<el-button type="text" @click="xfVisible = true">点击续费</el-button>
          <div>到期时间：{{showTime(userInfo.order_create_endtime) }}</div>
      	</div>
      </div>
		</div>
		<!-- 		<el-card>
			<div class="wrap">
				<el-form :model="form" style="width: 500px;">
					
					<el-form-item label="头像" :label-width="formLabelWidth">
						<el-upload
						  class="avatar-uploader"
						  action="http://www.pingguozhushou.shop/api/common/upload"
						  :show-file-list="false"
						  :headers="token"
						  :on-success="handleAvatarSuccess"
						  :before-upload="beforeAvatarUpload">
						  <img v-if="form.avatar" :src="form.avatar" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="ID" :label-width="formLabelWidth">
						<el-input v-model="form.id" type="text" disabled
							 width="300px"></el-input>
					</el-form-item>
					<el-form-item label="账号" :label-width="formLabelWidth">
						<el-input v-model="form.username" type="text" disabled
							 width="300px"></el-input>
					</el-form-item>
					<el-form-item label="昵称" :label-width="formLabelWidth">
						<el-input v-model="form.nickname" type="text" 
							placeholder="请输入昵称" width="300px"></el-input>
					</el-form-item>
				</el-form>
				<div class="dialog-footer">
					<el-button type="primary" @click="setInfo">确 定</el-button>
				</div>
			</div>
		</el-card> -->
    <!-- 账号续费 -->
    <el-dialog title="提示" :visible.sync="xfVisible" width="350px">
    	<span style="display: block; padding: 0 0 20px 20px;">账号续费需支付{{baseInfo.code_price}}元</span>
    
    	<el-form v-if="userInfo.is_binding == 1">
    		<el-form-item label="动态口令">
    			<el-input v-model="dtkl" type="number"></el-input>
    		</el-form-item>
    	</el-form>
    	<span slot="footer" class="dialog-footer" style="width: 300px;">
    		<el-button @click="xfVisible = false">取 消</el-button>
    		<el-button type="primary" @click="xfzh">确 定</el-button>
    	</span>
    </el-dialog>
		<!--  添加地址 -->
		<el-dialog title="设置地址" :visible.sync="adVisible" @close="closeAd" width="600px">
			<el-form :model="adForm" style="width: 500px;">
				<el-form-item label="地址" :label-width="formLabelWidth">
					<el-input v-model="adForm.address" type="text" placeholder="请输入地址"></el-input>
				</el-form-item>
				<el-form-item label="动态口令" :label-width="formLabelWidth" v-if="userInfo.is_binding == 1">
					<el-input v-model="adForm.code" type="text" placeholder="请输入动态口令" width="300px"></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer">
				<el-button @click="closeAd">取 消</el-button>
				<el-button type="primary" @click="goAd">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 登录密码 -->
		<el-dialog title="登录密码" :visible.sync="dlVisible" @close="closeDl" width="600px">
			<el-form :model="dlForm" style="width: 500px;">
				<el-form-item label="旧登录密码" :label-width="formLabelWidth">
					<el-input v-model="dlForm.oldpassword" type="password" placeholder="请输入旧登录密码"></el-input>
				</el-form-item>
				<el-form-item label="新登录密码" :label-width="formLabelWidth">
					<el-input v-model="dlForm.newpassword" type="password" placeholder="请输入新登录密码"
						width="300px"></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer">
				<el-button @click="closeDl">取 消</el-button>
				<el-button type="primary" @click="goDl">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 自动下单 -->
		<el-dialog title="提示" :visible.sync="xdVisible" width="350px">
			<span style="display: block; padding: 0 0 20px 20px;">开通自动下单需支付{{baseInfo.auto_order}}元</span>

			<el-form v-if="userInfo.is_binding == 1">
				<el-form-item label="动态口令">
					<el-input v-model="dtkl" type="number"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" style="width: 300px;">
				<el-button @click="xdVisible = false">取 消</el-button>
				<el-button type="primary" @click="ktAuto">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 谷歌校验 -->
		<el-dialog title="动态口令" :visible.sync="dtVisible" @close="closeDt" width="600px">
			<el-form :model="dtForm" style="width: 500px;">
				<el-form-item label="绑定二维码" :label-width="formLabelWidth">
					<img :src="images" alt="">
				</el-form-item>
				<el-form-item label="密钥" :label-width="formLabelWidth">
					<el-input v-model="dtForm.secret" type="text" placeholder="" width="300px"></el-input>
				</el-form-item>
				<el-form-item label="绑定口令" :label-width="formLabelWidth">
					<el-input v-model="dtForm.code" type="text" placeholder="请输入绑定口令" width="300px"></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer">
				<el-button type="primary" @click="goDt">确 定</el-button>
			</div>

		</el-dialog>
		<!-- 设置交易密码 -->
		<el-dialog title="交易密码" :visible.sync="jyVisible" @close="closeJy" width="600px">
			<el-form :model="jyForm" style="width: 500px;">
				<el-form-item label="新交易密码" :label-width="formLabelWidth">
					<el-input v-model="jyForm.newpassword" type="password" maxlength="30" minlength="6"
						placeholder="请输入新交易密码(6~30位任意字符)" width="300px"></el-input>
				</el-form-item>
				<el-form-item label="旧交易密码" :label-width="formLabelWidth" v-if="userInfo.transaction">
					<el-input v-model="jyForm.oldpassword" type="password" maxlength="30" minlength="6"
						placeholder="请输入旧交易密码"></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer">
				<el-button @click="closeJy">取 消</el-button>
				<el-button type="primary" @click="goJy">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 转账 -->
		<el-dialog title="转账" :visible.sync="zzVisible" @close="closeZz" width="600px">
			<el-form :model="zzForm">
				<el-form-item label="收款用户ID" :label-width="formLabelWidth">
					<el-input v-model="zzForm.to_user_id" type="number"></el-input>
				</el-form-item>
				<el-form-item label="转账金额" :label-width="formLabelWidth">
					<el-input v-model="zzForm.transfer_num" type="number"></el-input>
				</el-form-item>
				<el-form-item label="动态口令" :label-width="formLabelWidth" v-if="userInfo.is_binding == 1">
					<el-input v-model="zzForm.code" type="number"></el-input>
				</el-form-item>
			</el-form>
			<div class="t-r">
				当前余额： {{userInfo.money*1}}元
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeZz">取 消</el-button>
				<el-button type="primary" @click="goZz">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 提现 -->
		<el-dialog title="提现" :visible.sync="txVisible" @close="closeTx" width="600px">
			<el-form :model="txForm">
				<el-form-item label="提现地址" :label-width="formLabelWidth">
					<el-input v-model="txForm.address" type="text"></el-input>
				</el-form-item>
				<el-form-item label="提现金额" :label-width="formLabelWidth">
					<el-input v-model="txForm.withdraw_num" type="number"></el-input>
				</el-form-item>
				<el-form-item label="动态口令" :label-width="formLabelWidth" v-if="userInfo.is_binding == 1">
					<el-input v-model="txForm.code" type="number"></el-input>
				</el-form-item>
			</el-form>
			<div class="t-r">
				到账： {{((txForm.withdraw_num*1 || 0)/(baseInfo.to_rmb*1)).toFixed(2)}}U
			</div>
			<div class="t-r">
				当前余额： {{userInfo.money*1}}元
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeTx">取 消</el-button>
				<el-button type="primary" @click="goTx">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 充值 -->
		<el-dialog title="充值" :visible.sync="czVisible" @close="closeCz" width="600px">
			<el-form :model="czForm">
				<!-- payimg -->
				<el-form-item label="充值二维码" :label-width="formLabelWidth">
					<vueQrCode :size=qrCodeSize :text="qrCodeText"> </vueQrCode>
				</el-form-item>
				<el-form-item label="TRC20地址" :label-width="formLabelWidth">
					<div class="flex">
						<el-input v-model="qrCodeText" type="text" disabled></el-input>
						<el-button @click="onCopy(qrCodeText)" style="margin-left: 20px;">复制地址</el-button>
					</div>

				</el-form-item>
				<!-- <el-form-item label="充值凭证" :label-width="formLabelWidth">
					<el-upload class="avatar-uploader" action="http://www.pingguozhushou.shop/api/common/upload"
						:show-file-list="false" :headers="headers" :on-success="handleCzSuccess"
						:before-upload="beforeAvatarUpload">
						<img v-if="czForm.image" :src="czForm.image" class="czimg">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item> -->

			</el-form>
			<!-- <div class="t-r">
				到账： {{((form.recharge_num*1 || 0)*(baseInfo.to_rmb*1)).toFixed(2)}}元
			</div>
			<div class="t-r">
				当前余额： {{userInfo.money*1}}元
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeCz">取 消</el-button>
				<el-button type="primary" @click="goCz">确 定</el-button>
			</div> -->
		</el-dialog>
	</div>
</template>

<script>
	import vueQrCode from "@/components/vueQrCode.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		setTransaction,
		getIndex
	} from '@/request/agent.js'

	import {
		setUserInfo,
		getUserInfo,
		rechange,
		withdrawal,
		transfer,
		getga,
		checkCode,
		payAuto,
		repwd,
		address,
    xfZh
	} from '@/request/user.js'
  import { showTime } from '@/assets/js/tools.js'
	export default {
		name: 'Order',
		components: {
			vueQrCode,
		},
		data() {
			return {
        xfVisible: false,
        
				dtkl: '',
				xdVisible: false,
				images: '',
				qrCodeSize: 150,
				qrCodeText: '',
				headers: {},
				dtVisible: false,
				dtForm: {
					code: '',
					secret: ''
				},
				czVisible: false,
				czForm: {
					recharge_num: '',
					image: ''
				},
				txVisible: false,
				txForm: {
					withdraw_num: '',
					address: '',
					code: ''
				},
				zzVisible: false,
				zzForm: {
					to_user_id: '',
					transfer_num: '',
					code: ''
				},
				jyVisible: false,
				jyForm: {
					newpassword: '',
					oldpassword: ''
				},
				dlVisible: false,
				dlForm: {
					newpassword: '',
					oldpassword: ''
				},
				adVisible: false,
				adForm: {
					address: '',
					code: ''
				},
				token: {},
				formLabelWidth: '120px',
				form: {
					avatar: '',
					id: '',
					nickname: '',
					username: ''
				},
				dialogTableVisible: false,
				queryInfo: {
					keyword: '',
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				loading: false,
				czloading: false,
				txloading: false,
				zzloading: false,
				jyloading: false,
				dtloading: false,
				dlloading: false,
				adloading: false
			}
		},
		computed: {
			...mapState(['userInfo', 'baseInfo'])
		},
		created() {
			console.log(this.userInfo);
			if (this.userInfo.address) {
				this.txForm.address = this.userInfo.address
			}
			this.headers['token'] = window.localStorage.getItem('token')
			this.form = {
				avatar: this.userInfo.avatar,
				id: this.userInfo.id,
				nickname: this.userInfo.nickname,
				username: this.userInfo.username
			}
			this.getIndex()
			this.getUserInfo()
			// this.getga()
		},
		methods: {
      showTime,
			...mapMutations(['setUserInfo', 'setBaseInfo']),
      xfzh() {
        let that = this
        if(that.baseInfo.code_price*1 > that.userInfo.money*1) {
          return that.$msg.error('您的账号余额不足，请充值后操作')
        }
        xfZh().then(res => {
          that.$msg.success('续费成功')
          that.getUserInfo()
          that.xfVisible = false
        })
      },
			closeAd() {
				this.adVisible = false
				this.adForm.address = ''
				this.adForm.code = ''
				this.adloding = false
			},
			goAd() {
				let that = this
				if (!that.adForm.address) {
					return that.$msg.error('请输入地址')
				}
				address(that.adForm).then(res => {
					that.$msg.success('设置成功')
					that.closeAd()
					that.getUserInfo()
					that.adloding = false
				}).catch(err => {
					that.adloding = false
				})
			},
			ktAuto() {
				let that = this
				if (that.userInfo.money * 1 < that.baseInfo.auto_order * 1) {
					return that.$msg.error('您当前余额不足')
				}
				payAuto({
					code: that.dtkl
				}).then(res => {
					that.getUserInfo()
					that.xdVisible = false
					//自动下单启动
				})
			},
			getga() {
				getga().then(res => {
					console.log(res);
					this.dtForm.secret = res.data.secret
					this.images = res.data.qrCodeUrl
					this.dtVisible = true
				})
			},
			closeDt() {
				this.dtVisible = false
				this.dtForm.code = ''
			},
			goDt() {
				if (this.dtloading) {
					return
				}
				this.dtloading = true
				checkCode({
					code: this.dtForm.code
				}).then(res => {
					this.$msg.success('绑定成功')
					this.closeDt()
					this.dtloading = false
				}).then(err => {
					this.dtloading = false
				})
			},
			getIndex() {
				getIndex().then(res => {
					this.setBaseInfo(res.data)
					// this.qrCodeText = res.data.trc20
				})
			},
			//关闭设置交易密码
			closeJy() {
				this.jyVisible = false
				this.jyForm = {
					newpassword: '',
					oldpassword: ''
				}
			},

			goJy() {
				let that = this
				if (that.jyloading) {
					return
				}
				if (!that.jyForm.newpassword) {
					return that.$msg.error('请输入新交易密码')
				}
				setTransaction(that.jyForm).then(res => {
					that.$msg.success('交易密码设置成功')
					that.closeJy()
					that.jyloading = false
				}).catch(err => {
					that.jyloading = false
				})
			},
			//
			closeDl() {
				this.dlVisible = false
				this.dlForm = {
					newpassword: '',
					oldpassword: ''
				}
			},
			goDl() {
				let that = this
				if (that.dlloading) {
					return
				}
				if (!that.dlForm.newpassword) {
					return that.$msg.error('请输入旧登录密码')
				}
				if (!that.dlForm.newpassword) {
					return that.$msg.error('请输入新登录密码')
				}
				repwd(that.dlForm).then(res => {
					that.$msg.success('登录密码设置成功')
					that.closeDl()
					that.dlloading = false
				}).catch(err => {
					that.dlloading = false
				})
			},
			//关闭转账
			closeZz() {
				this.zzVisible = false
				this.zzForm = {
					to_user_id: '',
					transfer_num: '',
					code: ''
				}
			},
			goZz() {
				let that = this
				if (that.zzloading) {
					return
				}
				if (!that.zzForm.to_user_id) {
					return that.$msg.error('请输入收款人ID')
				}
				if (!that.zzForm.transfer_num) {
					return that.$msg.error('请输入转账金额')
				}
				if (that.userInfo.money < that.zzForm.transfer_num * 1) {
					return that.$msg.error('您的余额不足本次转账')
				}
				that.zzloading = true
				transfer(that.zzForm).then(res => {
					console.log(res);
					that.$msg.success('转账成功')
					that.zzloading = false
					that.closeZz()
					that.getUserInfo()
				}).catch(err => {
					that.zzloading = false
				})
			},
			//关闭提现
			closeTx() {
				this.txVisible = false
				this.txForm = {
					withdraw_num: '',
					address: '',
					code: ''
				}
			},
			goTx() {
				let that = this
				if (that.txloading) {
					return
				}
				if (!that.txForm.withdraw_num) {
					return that.$msg.error('请输入提现金额')
				}
				if (that.txForm.address == '') {
					return that.$msg.error('请输入提现地址')
				}
				if (that.userInfo.money * 1 < that.txForm.withdraw_num * 1) {
					return that.$msg.error('您当前账号的余额不足')
				}
				that.txloading = true
				withdrawal(that.txForm).then(res => {
					that.$msg.success('提交成功，请等待审核')
					that.txloading = false
					that.closeTx()
					that.getUserInfo()
				}).catch(err => {
					that.txloading = false
				})
			},
			//关闭充值
			closeCz() {
				this.czVisible = false
				this.czForm = {
					recharge_num: '',
					image: ''
				}
			},
			// 充值提交
			goCz() {
				let that = this
				if (that.czloading) {
					return
				}
				if (!that.czForm.recharge_num) {
					return that.$msg.error('请输入充值金额')
				}
				if (!that.czForm.image) {
					return that.$msg.error('请上传充值凭证')
				}
				that.czloading = true
				rechange(that.czForm).then(res => {

					that.$msg.success('提交成功，请等待审核')
					that.czVisible = false
					that.czloading = false
					that.closeCz()
				}).catch(err => {
					that.czloading = false
				})
			},
			handleAvatarSuccess(res, file) {
				this.form.avatar = res.data.fullurl;
			},
			handleCzSuccess(res, file) {
				this.czForm.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() {

			},
			openBuy() {
				this.dialogTableVisible = true
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.setUserInfo(res.data)
					this.qrCodeText = res.data.withdraw_trc_address
				})
			},
			setInfo() {
				let that = this
				if (that.form.avatar == '') {
					return that.$msg.error('请选择头像')
				}
				if (that.form.nickname == '') {
					return that.$msg.error('请选择输入昵称')
				}
				setUserInfo({
					avatar: that.form.avatar,
					nickname: that.form.nickname
				}).then(res => {
					that.$msg.success('修改成功')
					that.getUserInfo()
				})
			},
			handleSizeChange(newPageSize) {
				this.queryInfo.limit = newPageSize
				this.getList()
			},
			handleCurrentChange(newPageNum) {
				this.queryInfo.page = newPageNum
				this.getList()
			},
			onCopy(text) {
				this.$copyText(text).then(
					e => {
						console.log('复制成功：', e);
					},
					e => {
						console.log('复制失败：', e);
					}
				)
			}
		},

	}
</script>

<style scoped lang="scss">
	/* 

	/deep/ .el-card__body {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	} */
	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		width: 500px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 10px;
	}

	.user-wrap {
		width: 700px;
		background-color: #fff;
		margin: auto;

		.u-item {
			padding: 10px 15px;
			justify-content: space-between;
			align-items: flex-start;
			border-bottom: 1px solid #f0f0f0;

			.base {
				padding: 12px 0;
			}
		}
	}

	.t-r {
		text-align: right;
		padding-top: 10px;
	}

	.czimg {
		width: 178px;
		height: 178px;
	}
</style>