CBB3/pages/guild/order/hallpay.vue

<style lang="scss">
	.app-body{
		.top{
			margin-top: 5px;
			background-color: #fff;
			padding: 32px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.price{
				font-size: 16px;
				font-weight: 700;
				color: #787878;
			}
			.pay_money{
				font-size: 16px;
				font-weight: 700;
				color: #fd3b39;
				font-size: 28px;
			}
			.last_time{
				padding: 20rpx 0;
			}
			.out_time{
				font-size: 14px;
				margin-top: 12px;
			}
		}
		/**产品item**/
		.goods-item{
			margin-top: 11px;
			padding: 20px 20px 22px 20px;
			background-color: #fff;
			justify-content: flex-start;
			align-items: flex-start;
			.product-image{
				width: 120px;
				height: 120px;
				border-radius: 5px;
			}
			.info{
				margin-left: 14px;
				padding-top: 5px;
				line-height: 1;
				.title{
					font-size: 17px;
					font-weight: 700;
					color: #333;
				}
				.info-value{
					margin-top: 12px;
					font-size: 17px;
					color: #333;
					font-weight: 600;
					.label{color: #999;}
					.sb{font-size: 12px;background: #4076f6;color: #fff;padding: 4px 6px;border-radius: 4px;}
				}
			}
			
		}
		.main{
			margin-top: 11px;
			padding: 17px 0 22px;
			background: #fff;
			.main-tip{
				padding: 0 17px;
				font-size: 17px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999;
			}
			.main-items{
				margin-top: 19px;
				justify-content: flex-start;
				height: 40px;
				padding:0 40rpx;
				.item{
					width: calc(33% - 10px);
					margin-right: 10px;
					height: 34px;
					background: #f8f8f8;
					border-radius: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
					.icon{
						width: 21px;
						height: 18px;
					}
					.text{
						margin-left: 5px;
						font-size: 17px;
						font-weight: 700;
						color: #333;
					}
					&.active{
						background: linear-gradient(143.2747deg, #ff6a00, #ee0979) !important;
						color: #fff !important;
						.text{
							color: #fff;
						}
					}
				}
			}
			.swiper-box{
				padding: 8px 17px 0;
				height: 210px;
				swiper{height: 100%;}
				.pay-item{
						padding: 28px 1px 0;
						.label{
							width: 67px;
							font-size: 17px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999;
						}
						.value{
							width: calc(100% - 100px);
							font-size: 17px;
							font-weight: 500;
							color: #333;
						}
						.copy{
							image{width: 14px;height: 16px}
						}
					}
				
			}
		}

		.upload-item{
			margin-top: 11px;
			padding: 19px 17px 22px 17px;
			background: #fff;
			.upload-title{
			    font-size: 17px;
			    font-weight: 700;
			    color: #333;
			}
			.upload-image{
			    padding-top: 18px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    flex-direction: column;
				image{width: 90px;height: 90px;}
			}
			
			.upload-font{
			    margin-top: 13px;
			    font-size: 17px;
			    font-weight: 700;
			    color: #333;
			}
		}
		
		.foot86{
			height: 90px;
		}
		.foot-view{
			position: fixed;
			bottom: 0;
			background: #fff;
			width: calc(100% - 20px);
			height: 83px;
			justify-content: flex-start;
			padding: 0 10px;
			.lxitem{
				image{width: 21px;height: 19px;}
				.text{margin-top: 8px;font-size: 12px;font-weight: 700;color: #333;}
			}
			.sm{margin:0 12px;width: 1px;height: 42px; background: #c0bfc0;}
			.btn{
				margin-left: 11px;
				height: 45px;
				background: #fd3b39;
				border-radius: 11px;
				text-align: center;
				font-size: 19px;
				font-weight: 700;
				color: #fff;
				line-height: 45px;
			}
		}
}
.line{
	width: 100%;
	overflow:hidden;            //超出的文本隐藏 
	text-overflow:ellipsis;     //溢出用省略号显示
	white-space:nowrap;         //溢出不换行,只能显示一行
}
</style>
<template>
	<view class="app-body">
		<view class="top fx-h fx-bc fx-ac">
			<view class="price">挂售价格￥{{ data.price || '-' }}</view>
			<view class="pay_money">实际支付￥{{ data.price || '-' }}</view>
			
			<view class="last_time" v-if="data.status == 1">
				<view class=" fx-h fx-bc fx-ac" v-if="data.end_type == 1">
					<view class="label" style="padding: 10px 0;font-weight: bold;">离超时</view>
					<cz-countdown :fontSize="26" :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',data.end_time)"></cz-countdown>
				</view>
				
				<view class=" fx-h fx-bc fx-ac" v-if="data.end_type == 2">
					<view class="label" style="padding: 10px 0;font-weight: bold;">离过期</view>
					<cz-countdown :fontSize="26" :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',data.end_time)"></cz-countdown>
				</view>
				
			</view>
			<view class="out_time" v-if="data.status == 0">订单已过期</view>
			<view class="out_time" style="color: #f9ae3d;font-size: 18px;" v-if="data.status == 2">订单审核中</view>
			<view class="out_time" style="color: #5ac725;font-size: 18px;" v-if="data.status == 3">订单已完成</view>
		</view>
		
		<view class="goods-item fx-r">
			<image class="product-image" :src="data.image" mode="aspectFill"></image>
			<view class="info">
				<view class="title">{{ data.name || "" }}</view>
				<view class="info-value">
					<text class="label">卖家ID：</text>
					{{ data.collection_uid  || ""}}
				</view>
				
				<view class="info-value">
					<text class="label">卖家昵称：</text>
					{{ data.collection_nickname || "" }}
				</view>
				
				<view class="info-value">
					<text class="label">卖家手机号：</text>
					{{ data.collection_mobile || "" }}
				</view>
				
				<view class="info-value fx-r">
					<text class="label">聊天联系：</text>
					<view class="sb" @tap="tapChat">点击聊天</view>
				</view>
				
			</view>
		</view>
		
		<view class="main">
			<view class="main-tip">请向以下账号自行转账（任选一种方式）</view>
			<view class="main-items fx-r">
				<view class="item" @tap="tapCurrent(index)" :class="current == index ? 'active' : ''"  v-for="(item,index) in data.bank">
					<image class="icon" v-if="item.type == 3" :src=" current == index ? '/static/img/bank_active.png' : '/static/img/bank.png'"></image>
					<image class="icon" v-if="item.type == 1" :src=" current == index ? '/static/img/bank_active.png' : '/static/img/bank.png'"></image>
					<image class="icon" v-if="item.type == 2" :src=" current == index ? '/static/img/alipay_active.png' : '/static/img/alipay.png'"></image>
					<view class="text" v-if="item.type == 1">微信</view>
					<view class="text" v-if="item.type == 2">支付宝</view>
					<view class="text" v-if="item.type == 3">银行卡</view>
				</view>
			</view>
			<!--数据-->
			<view class="swiper-box">
				<swiper :current="current" :disable-touch="true">
					<swiper-item v-for="(item,index) in data.bank">
						<template v-if="item.type == 3">
							<view class="pay-item">
								<view class="tr fx-r">
									<view class="td label">姓名</view>
									<view class="td value line">{{ item.name }}</view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.name)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>
							
							<view class="pay-item">
								<view class="tr fx-r">
									<view class="td label">银行</view>
									<view class="td value line">{{item.bank }}</view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.bank)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>
							
							<view class="pay-item">
								<view class="tr fx-r">
									<view class="td label">支行</view>
									<view class="td value line">{{item.bank_name }}</view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.bank_name)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>
							
							<view class="pay-item">
								<view class="tr fx-r">
									<view class="td label">账号</view>
									<view class="td value line">{{ item.payment }} </view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.payment)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>
							
						</template>
						<template v-if="item.type == 2">
							<view class="pay-item">
								<view class="tr fx-r">
									<view class="td label">账号</view>
									<view class="td value">{{ item.payment }} </view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.payment)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>		
							<view class="pay-item">	
								<view class="tr fx-r">
									<view class="td label">姓名</view>
									<view class="td value">{{ item.name }}</view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.name)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>
							
						</template>
						
						<template v-if="item.type == 1">
							<view class="pay-item">
								<view class="tr fx-r">
									<view class="td label">账号</view>
									<view class="td value">{{ item.payment }} </view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.payment)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>		
							<view class="pay-item">	
								<view class="tr fx-r">
									<view class="td label">姓名</view>
									<view class="td value">{{ item.name }}</view>
									<view class="fx-g1"></view>
									<view class="td copy" @tap="tapCopy(item.name)"><image src="/static/img/ac_copy.png"></image></view>
								</view>
							</view>
							
							<view class="pay-item">
								<view class="tr fx-r">
									<view class="td label">微信二维码</view>
									<view class="td value">
										<image @tap="tapOpenImg(item.img)" :src="item.img" mode="aspectFill" style="width: 80px;height: 80px"></image>
									</view>
								</view>
							</view>
							
						</template>
						
						
					</swiper-item>
				</swiper>
			</view>
				
			
			
		</view>
		
		
		<view class="upload-item" @tap="upImg">
			<view class="upload-title">上传支付截图</view>
			<view class="fx-h fx-bc fx-ac">
				<view class="upload-image">
					<image :src=" upImgUrl || '/static/img/upimg.png'" mode="aspectFill"></image>
				</view>
				
				<view class="upload-font">点击上传支付截图</view>
			</view>			
		</view>
		
		<view class="foot86"></view>
		<view class="foot-view fx-r fx-bc ">
			<view class="lxitem fx-h fx-bc fx-ac">
				<image src="/static/img/ac-up-tel.png"></image>
				<view class="text">联系卖家</view>
			</view>
			<view class="sm"></view>
			<view class="lxitem  fx-h fx-bc fx-ac">
				<image src="/static/img/ac-up-kf.png"></image>
				<view class="text">联系客服</view>
			</view>
			<view class="btn fx-g1" v-if="data.status == 2" @tap="tapSubmit">修改凭证</view>
			<view class="btn fx-g1" v-if="data.status == 1" @tap="tapSubmit">完成上传</view>
			
		</view>
	</view>
</template>


<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
		    return {
				statusBarHeight : 20,
				current : 0,
				orderId : 0,
				data : {},
				upImgUrl : "",
				isSubumit : false
		    }
		}, 
		onLoad(options) {
			this.orderId = options.id || 0;
			this.initView();
		},
		methods: {
			/**
			 * 加载基础配置
			 */
			initView:function(){
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.id = this.orderId;
				this
					.request
					.post("auctionOrderItem",post)
					.then(res => {
						uni.hideLoading();
						if(res.code == 200) {
							this.data = res.data;
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(res=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			/**
			 * 切换
			 * @param {Object} index
			 */
			tapCurrent:function(index) {
				this.current = index;
				
			},
			/**
			 * 打开图片
			 */
			tapOpenImg:function(img){
				uni.previewImage({
					current:0,
					urls:[img]
				});
			},
			
			/**
			 * 复制
			 * @param {Object} item
			 */
			tapCopy:function(item) {
				uni.setClipboardData({
					data : item,
					showToast : true
				});
			},
			
			upImg(){
				// #ifdef APP-PLUS
					this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
						if(res !== 1) return;
						this.upImgS();
					});   
					return;
				// #endif
				this.upImgS();
			},
			
			upImgS() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let img = res.tempFilePaths[0];
						this.utils.loadIng();
						this
							.request
							.post("qiniu")
							.then(res=>{
								uni.uploadFile({
									url: 'https://up-z0.qiniup.com', 
									filePath: img,
									name: 'file',
									formData: {
										'key': res.data.mk_str,
										'token': res.data.token 
									},
									success: (uploadFileRes) => {
										uni.hideLoading();
										if(uploadFileRes.statusCode == 200) {
											this.upImgUrl = res.data.url;
										} else {
											this.utils.Tip("上传失败，请重新尝试");
										}
									},
									fail:()=>{
										uni.hideLoading();
										this.utils.Tip("上传失败，请重新尝试");
									}
								});
							})
							.catch(err=>{
								uni.hideLoading();
								this.utils.Tip("请重新上传图片");
							});	
					}
				});
			},
			/**
			 * 提交数据
			 */
			tapSubmit:function(){
				if(this.upImgUrl == '') {
					this.utils.Tip("请上传打款凭证");
					return;
				}
				if(this.isSubumit) return;
				this.isSubumit = true;
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.id = this.orderId;
				post.img = this.upImgUrl;
				this
					.request
					.post("auctionOrderSubProof",post)
					.then(res => {
						this.isSubumit = false;
						uni.hideLoading();
						if(res.code == 200) {
							uni.redirectTo({
								url:"hallpay_ok"
							})
						} else {
							this.utils.showAlert({title: '系统提示',content: res.msg});
						}
					})
					.catch(res=>{
						this.isSubumit = false;
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			/**
			 * 聊天chat
			 */
			tapChat:function(){
				uni.navigateTo({
					url:"/pages/chat/friend/info?usercode=" + this.data.collection_usercode
				})
			}
			
			
		}
			
}
</script>