CBB3/pages/guild/order/orderItem.vue

<style lang="scss">
	.panel{
		margin: 10px 0;
		background: #fff;
		padding: 20rpx;
		.top-title {
			font-size: 16px;
			color: #303133;
			.i{
				height: 19px;
				width: 4px;
				background-image: linear-gradient(#5dbc7c, #71d094);
				margin-right: 5px;
				border-radius: 5px;
			}
		}
		
		
	}
	.goods-item{
		.img{
			width: 68px;
			height: 68px;
		}
		.info {
			margin-left: 10px;
			.title{
				font-size: 16px;
				color: #303133;
			}
			.price{
				color: #ef4034;
				font-weight: bold;
				text{font-size: 12px;}
			}
			
		}
		.count{
			color: #787878;
			font-size: 14px;
		}
	}
	.goods-total{
		margin-top: 10px;
		border-top: 1px solid #f1f1f1;
		padding: 10px 0;
		.label{
			font-size: 16px;
			color: #606266;
		}
		.rpice{
			color: #ef4034;
			text{font-size: 12px;}
		}
	}
	.order{
		padding: 20px 0;
		padding-bottom: 0;
		.item{
			display: flex;
			height: 40px;
			.label{
				font-size: 14px;
				color: #606266;
			}
			.value {
				padding-left: 5px;
				font-size: 14px;
				color: #606266;
			}
			.btn{
				border-radius: 56px;
				padding: 5px 10px;
				text-align: center;
				border: 1px solid #ebeef5;
				font-size: 12px;
				line-height: 20px;
				height: 20px;
			}
		}
	}
	
	.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: 280px;
			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}
					}
				}
			
		}
	}
	
	.upimg{
		padding: 20px;
		image{width: 100%;}
	}
	
	.chat-tip{
		position: fixed;
		height: 120rpx;
		width: 100%;
		bottom: 0;
		background: #fff;
		left: 0;
		.chat-btn{
			border-radius: 6px;
			border:1px solid red;
			margin: 0px 40rpx;
			width: 100%;
			font-size: 16px;
			height: 40px;
			color: red;
			image{width: 20px;height: 20px; margin-right: 10px;}
			
		}
		
	}
</style>


<template>
	<view class="app">
		
		<view class="panel">
			<view class="top-title fx-r fx-bc"><view class="i"></view>产品信息</view>
			<view class="goods-item fx-r fx-bc">
				<image class="img" mode="aspectFill" :src="data.image"></image>
				<view class="info fx-h fx-bc">
					<view class="title">{{ data.name || "" }}</view>
					<view class="price"><text>￥</text>{{ data.price || 0 }}</view>
				</view>
				<view class="fx-g1"></view>
				<view class="count">x1</view>
			</view>
			<view class="goods-total fx-r">
				<view class="label">订单总价</view>
				<view class="rpice"><text>￥</text>{{ data.price || 0 }}</view>
			</view>
		</view>
		<!--订单信息-->
		<view class="panel">
			<view class="top-title fx-r fx-bc"><view class="i"></view>订单信息</view>
			<view class="order">
				
				<view class="item">
					<view class="label">场次:</view>
					<view class="value">{{ data.auction_name }} - {{ data.week }}</view>
					<view class="fx-g1"></view>
				</view>
				
				<view class="item">
					<view class="label">订单编号:</view>
					<view class="value">{{ data.order_id || '' }}</view>
					<view class="fx-g1"></view>
					<view class="btn" @tap="tapCopy(data.order_id || '')">复制单号</view>
				</view>
				
				<view class="item">
					<view class="label">下单时间:</view>
					<view class="value">{{ data.create_time }}</view>
				</view>
				
				<view class="item">
					<view class="label">订单状态:</view>
					<view class="value" v-if="data.status == 0" style="color: red;">已过期</view>
					<view class="value" v-if="data.status == 1" style="color: red;">待支付</view>
					<view class="value" v-if="data.status == 2" style="color: #f9ae3d;">待审核</view>
					<view class="value" v-if="data.status == 3" style="color: #5ac725;">已完成</view>
				</view>
				
				<view class="item">
					<view class="label">完成时间:</view>
					<view class="value">{{ data.voucher_time || '-' }}</view>
				</view>
				
				<view class="item">
					<view class="label">卖家昵称:</view>
					<view class="value">{{ data.collection_nickname || '' }}</view>
				</view>
				
				<view class="item">
					<view class="label">卖家UID:</view>
					<view class="value">{{ data.collection_uid || '' }}</view>
				</view>
				
				<view class="item">
					<view class="label">卖家电话:</view>
					<view class="value">{{ data.collection_mobile || '' }}</view>
					<view class="fx-g1"></view>
					<view class="btn" @tap="tapCopy(data.collection_mobile || '')">复制电话</view>
				</view>
				
				
			</view>	
		</view>
		
		<view class="panel">
			<view class="top-title fx-r fx-bc"><view class="i"></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">{{ 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">{{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">{{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">{{ 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>
		
		<view class="panel">
			<view class="top-title fx-r fx-bc"><view class="i"></view>支付凭证</view>
			<view class="upimg" v-if="data.upload_image != ''">
				<image @tap="tapOpenImg(data.upload_image)" :src="data.upload_image" mode="widthFix"></image>
			</view>
		</view>
		
		
		<view style="height: 120rpx;"></view>
		
		<view class="fx-r chat-tip">
			<view class="chat-btn fx-r fx-bc fx-ac" @tap="tapOpenChat">
				<image src="/static/img/msg.png"></image>
				聊天联系
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
		    return {
				statusBarHeight : 20,
				current : 0,
				orderId : 0,
				data : {
					upload_image : ""
				}
		    }
		}, 
		onLoad(options) {
			this.orderId = options.id || 0;
			this.initView();
		},
		methods: {
			/**
			 * 加载基础配置
			 */
			initView:function(){
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.id = this.orderId;
				this
					.request
					.post("auctionOrderDetail",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
				});
			},
			
			tapOpenChat:function(){
				uni.navigateTo({
					url:"/pages/chat/friend/info?usercode=" + this.data.collection_usercode
				})
			}
			
		}
			
}
</script>

<style>
</style>