fengpingle/pages/order/hallorderDetail.vue

<template>
	<view class="content">
		<view class="order-item">
			<view class="goods-box-single">
				<image class="goods-img" :src="item.image" mode="aspectFill"></image>
				<view class="right position-relative">
					<view class="flex">
						<text class="title">{{ item.name }}</text>
						<view class="title-right">
							<view class="price">{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row b-b flex">
			<text class="tit">订单总价</text>
			<view class="input">￥{{ item.price }}</view>
		</view>

		<view class="orderDetialBox">
			<view class="f-header m-t">
				<view class="f-left-icon"></view>
				<view class="tit-box"><text class="tit">订单信息</text></view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单编号:</text>
					<view class="text">{{ item.order_id }}</view>
				</view>
				<view class="buttom-right" @click="copyOrderId(item.order_id)">复制单号</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">下单时间:</text>
					<view class="text">{{ item.create_time }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">完成时间:</text>
					<view class="text">{{ item.update_time }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">卖家昵称:</text>
					<view class="text">{{ item.c_nickname }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">卖家电话:</text>
					<view class="text">{{ item.phone }}</view>
				</view>
			</view>
			<view class="main">
				<view class="main-tip">卖家收款方式</view>
				<view class="main-title flex">
					<view class="main-item">
						<view class="mt-item" @click="change('0')" :class="{ current: tabCurrentIndex === 0 }" v-if="zfb != ''">
							<image class="mt-image" :src="tabCurrentIndex == 0 ? '../../static/img/aliD.png' : '../../static/img/ali.png'" mode=""></image>
							<view class="mt-font" :class="{ current: tabCurrentIndex === 0 }">支付宝</view>
						</view>
					</view>
					<view class="main-item">
						<view class="mt-item" @click="change('1')" :class="{ current: tabCurrentIndex === 1 }" v-if="bank != ''">
							<image class="mt-image1" :src="tabCurrentIndex == 1 ? '../../static/img/bankD.png' : '../../static/img/bank.png'" mode=""></image>
							<view class="mt-font" :class="{ current: tabCurrentIndex === 1 }">银行卡</view>
						</view>
					</view>
					<view class="main-item">
						<view class="mt-item" @click="change('2')" :class="{ current: tabCurrentIndex === 2 }" v-if="wx != ''">
							<image class="mt-image2" :src="tabCurrentIndex == 2 ? '../../static/img/yueD.png' : '../../static/img/yue.png'" mode=""></image>
							<view class="mt-font" :class="{ current: tabCurrentIndex === 2 }">微信</view>
						</view>
					</view>
				</view>
				<swiper
					class="swiper-box"
					:duration="500"
					@change="changeTab"
					:style="{ height: tabCurrentIndex == 2 ? '450rpx' : tabCurrentIndex == 1 ? '340rpx' : '280rpx' }"
					:current="tabCurrentIndex"
					disable-touch
				>
					<swiper-item class="tab-content" v-if="zfb != ''">
						<scroll-view scroll-y="true" style="height: 100%;">
							<view class="tc-item flex">
								<view class="tcitem-name">账号</view>
								<view class="ali-name">{{ zfb.payment }}</view>
								<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(zfb.payment)"></image>
							</view>
							<view class="tc-item flex">
								<view class="tcitem-name">姓名</view>
								<view class="ali-name">{{ zfb.name }}</view>
								<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(zfb.name)"></image>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="tab-content" v-else></swiper-item>
					<swiper-item class="tab-content" v-if="bank != ''">
						<scroll-view scroll-y="true" style="height: 100%;">
							<view class="tc-item flex">
								<view class="tcitem-name">姓名</view>
								<view class="ali-name">{{ bank.name }}</view>
								<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.name)"></image>
							</view>
							<view class="tc-item flex">
								<view class="tcitem-name">银行</view>
								<view class="ali-name">{{ bank.bank }}</view>
								<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.bank)"></image>
							</view>
							<view class="tc-item flex">
								<view class="tcitem-name">支行</view>
								<view class="ali-name">{{ bank.bank_name }}</view>
								<image @click="copy(bank.bank_name)" class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
							</view>
							<view class="tc-item flex">
								<view class="tcitem-name">账号</view>
								<view class="ali-name">{{ bank.payment }}</view>
								<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.payment)"></image>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="tab-content" v-else></swiper-item>
					<swiper-item class="tab-content" v-if="wx != ''">
						<scroll-view scroll-y="true" style="height: 100%;">
							<view class="tc-item flex">
								<view class="tcitem-name">账号</view>
								<view class="ali-name">{{ wx.payment }}</view>
								<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(wx.payment)"></image>
							</view>
							<view class="tc-item flex">
								<view class="tcitem-name">姓名</view>
								<view class="ali-name">{{ wx.name }}</view>
								<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(wx.name)"></image>
							</view>
							<view class="tc-item">
								<view class="upload-title" style="color: #9d9d9d;">微信二维码</view>
								<view class="upload-main" @click="lookimg(wx.image)"><image class="upload-image" :src="wx.image" mode="aspectFit"></image></view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="tab-content" v-else></swiper-item>
				</swiper>
			</view>
			<view class="zf flex">
				<view class="title-left"><text class="title">支付凭证(点击右边图片查看大图):</text></view>
				<image class="zfpz" @click="lookimg(item.upload_image)" :src="item.upload_image" mode=""></image>
			</view>
		</view>

		<view class="btHeight"></view>
	</view>
</template>

<script>
import { user_auction_order } from '@/api/order.js';
import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
export default {
	data() {
		return {
			id: '',
			item: '',
			tabCurrentIndex: 0,
			info: '',
			bank: '',
			wx: '',
			zfb: ''
		};
	},
	onLoad(opt) {
		this.id = opt.id;
		this.loadData();
	},
	methods: {
		loadData() {
			uni.showLoading({
				title: '加载中'
			});
			user_auction_order({ order_id: this.id }).then(({ data }) => {
				console.log(data);
				this.item = data;
				this.bank = data.bank;
				this.wx = data.wx;
				this.zfb = data.zfb;
				uni.hideLoading();
			});
		},
		// 查看大图
		lookimg(src) {
			console.log(src);
			let arr = [src];
			uni.previewImage({
				current: src,
				urls: arr
			});
		},
		copy(value) {
			let obj = this;
			let content = value; //需要复制的内容
			console.log('复制的内容:', content);
			// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
			const result = uniCopy(content);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		change(num) {
			this.tabCurrentIndex = num * 1;
		},
		// 复制订单编号
		copyOrderId(text) {
			// #ifndef H5
			uni.setClipboardData({
				data: text,
				success: e => {
					uni.showToast({
						title: '复制成功',
						duration: 1500
					});
				}
			});
			// #endif
			// #ifdef H5
			// 获取需要复制的文字
			const copyStr = text;
			// 创建input标签存放需要复制的文字
			const oInput = document.createElement('input');
			// 把文字放进input中，供复制
			oInput.value = copyStr;
			// 添加文
			document.body.appendChild(oInput);
			// 选中创建的input
			oInput.select();
			// 执行复制方法， 该方法返回bool类型的结果，告诉我们是否复制成功
			const copyResult = document.execCommand('copy');
			// 操作中完成后 从Dom中删除创建的input
			document.body.removeChild(oInput);
			// 根据返回的复制结果 给用户不同的提示
			if (copyResult) {
				uni.showToast({
					title: '已复制到粘贴板',
					duration: 2000
				});
			} else {
				this.$api.msg('复制失败');
			}
			// #endif
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}

// 订单详细
.orderDetialBox {
	margin-top: 20rpx;
	padding: 0 30rpx;
	background-color: #ffffff;
	font-size: $font-base;
	color: $font-color-base;
	.item {
		height: 80rpx;
		.text {
			padding-left: 10rpx;
		}
		.buttom-right {
			width: 180rpx;
			border-radius: 99rpx;
			padding: 10rpx;
			text-align: center;
			border: 1px solid $border-color-light;
		}
	}
	.zf {
		.zfpz {
			width: 160rpx;
			height: 160rpx;
		}
	}
}
.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 80rpx;
	background: #fff;
	.order-status {
		font-size: $font-lg;
		color: $color-red;
		font-weight: 500;
	}
	.refund {
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.noRefund {
		font-size: 30rpx;
		color: $font-color-light;
	}
	.tit {
		flex-shrink: 0;
		width: 120rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		text-align: right;
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
		&.payColor {
			color: $color-red;
		}
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}

/* 多条商品 */
.order-item {
	display: flex;
	flex-direction: column;
	padding-left: 30rpx;
	background: #fff;
	margin-top: 20rpx;
	/* 单条商品 */
	.goods-box-single {
		display: flex;
		padding: 20rpx 0;
		.goods-img {
			display: block;
			width: 120rpx;
			height: 120rpx;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx 0 24rpx;
			overflow: hidden;
			height: 100%;
			.title {
				align-self: flex-start;
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
			}
			.title-right {
				flex-shrink: 0;
				text-align: right;
				align-self: flex-start;
			}
			.attr-box {
				font-size: $font-sm + 2rpx;
				color: $font-color-light;
			}
			.evaluate {
				color: #ffffff;
				font-size: 24rpx;
				display: inline-block;
				text-align: right;
				text {
					background: #fa2740;
					padding: 5rpx 15rpx;
				}
			}
			.yesevaluate {
				color: #333333;
				font-size: 24rpx;
				display: inline-block;
				text-align: right;
				text {
					border: 2rpx solid #333333;
					padding: 5rpx 15rpx;
				}
			}
			.price {
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}
	}
}
// 标题头
.f-header {
	display: flex;
	align-items: center;
	height: 80rpx;
	.tit-box {
		@extend %font-title-box;
	}
	.tit {
		@extend %font-title;
	}
	.f-left-icon {
		@extend %f-left-icon;
	}
}
// 共有底部高度
$btHeight: 100rpx;
.btHeight {
	height: $btHeight;
}
// 拼团按钮
.group-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	height: $btHeight;
	width: 100%;
	justify-content: flex-end;
	padding-right: 30rpx;
	.bottom {
	}
}
.main {
	margin-top: 20rpx;
	padding: 30rpx 0 40rpx;
	background: #ffffff;
	.main-tip {
		padding: 0 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.main-title {
		margin-top: 34rpx;
		justify-content: flex-start;
		.current {
			background: linear-gradient(143.2747deg, #ff6a00, #ee0979) !important;
			color: #ffffff !important;
		}
		.main-item {
			width: 33%;
		}
		.mt-item {
			margin: 0 auto;
			width: 160rpx;
			height: 60rpx;
			background: #f8f8f8;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.mt-image {
				width: 32rpx;
				height: 32rpx;
			}
			.mt-image1 {
				width: 38rpx;
				height: 32rpx;
			}
			.mt-image2 {
				width: 36rpx;
				height: 32rpx;
			}
			.mt-font {
				margin-left: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
	.swiper-box {
		width: 100%;
		padding: 14rpx 30rpx 0;
		.tc-item {
			padding: 50rpx 2rpx 0;
			line-height: 1;
			.tcitem-name {
				width: 118rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
			.ali-name {
				width: 380rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.tcitem-image {
				width: 26rpx;
				height: 28rpx;
			}
		}
	}
}
</style>