Buy_soap_tape/pages/orderDetail/detail.vue

<template>
	<view style="background-color: #fff;height: 100vh;">
		<view style="border-bottom: 2rpx solid #EEEEEE;" class="address flexB" @click="goorderPlacer">
			<view class="flexV">
				<view class="address_tip green">
					下单人
				</view>
				<view style="line-height: 50rpx;">
					<text>{{ form.buy_name }}</text>
					<text style="margin-left: 24rpx;">{{ form.buy_phone }}</text>
				</view>
			</view>
		</view>
		<view class="address flexB " @click="goaddress">
			<view class="flexV">
				<view class="address_tip red">
					收货人
				</view>
				<view>
					<view>
						<text>{{ form.user_name }}</text>
						<text style="margin-left: 24rpx;">{{ form.mobile }}</text>
					</view>
					<view class="gray">
						{{ form.province + form.city + form.area + form.address }}
					</view>
				</view>
			</view>
		</view>
		<view class="soapBox">
			<view class="soapBox_middle">
				<view class="flexB">
					<image :src="type ? image[0] : image[1]" mode="widthFix" style="width: 200rpx;margin-right: 20rpx;"></image>
					<view class="middleFlex">
						<view class="middleFlex_title">
							{{ type ? '【大卫博士健康内裤】专用洗涤皂' : '【大卫博士健康内裤】专用打包胶带' }}
						</view>
						<view class="middleFlex_dan">
							<view style="font-weight: bold;">
								￥{{ form.price }}
							</view>
							<view class="num">
								x{{ form.num }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="soapBox_bottom">
				<text class="text1">共{{ `${form.num + (type ? '块' : '卷')}` }}，</text>
				<text>合计；</text>
				<text class="text2">￥</text>
				<text class="text3">{{ form.cost }}</text>
			</view>
		</view>
		<view class="botFlex">
			<view class="flexB botFlex_flex">
				<view class="title">
					订单编号：
					<text style="font-weight: 400;">{{ form.order_no }}</text>
				</view>
				<view class="anniu" @click="copy(form.order_no)">
					复制
				</view>
			</view>
			<view class="flexB botFlex_flex">
				<view class="title">
					下单时间：
					<text style="font-weight: 400;">{{ form.created_at }}</text>
				</view>
			</view>
			<view class="flexB botFlex_flex">
				<view class="title">
					商品总额：
				</view>
				<view class="right">
					￥{{ form.cost }}
				</view>
			</view>
			<view class="flexB botFlex_flex">
				<view class="title">
					商品数量：
				</view>
				<view class="right">
					{{ `${form.num + (type ? '块' : '卷')}` }}
				</view>
			</view>
			<view v-if="form.remark" class="flexT botFlex_flex">
				<view class="title">
					订单备注：
				</view>
				<view class="remark">
					{{ form.remark }}
				</view>
			</view>
		</view>
		<view class="submitPay">
			<view class="anniu red" @click="again">
				继续下单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		handleClipboard
	} from '../../common/util/utils.js'
	// import { _API_get_express } from '@/apis/good.js'
	export default {
		data() {
			return {
				type: '',
				image: [
					require('../../static/img/soap-s.png'),
					require('../../static/img/tape-s.png')
				],
				form: {},
			}
		},
		onLoad(opt){
			this.form = JSON.parse(decodeURIComponent(opt.data))
			this.type = this.form.goods_type == 1 ? 1 : 0
		},
		methods: {
			// 再次下单
			again() {
				const type = this.type == 1 ? 'soap' : 'tape'
				uni.reLaunch({
					url: '../index/index?type=' + type
				})
			},
			/*复制单号*/
			copy(order_num) {
				try {
					uni.setClipboardData({
						data: order_num,
						success: () => {
							uni.toast('订单号已复制');
						}
					})
				} catch (e) {
					uni.showModal({
						content: '您的手机暂不支持复制',
						showCancel: false
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		padding: 40rpx 0;
		margin: 0 24rpx;
		background-color: #fff;
		&_tip {
			width: 92rpx;
			color: #fff;
			font-size: 24rpx;
			font-weight: bold;
			line-height: 50rpx;
			text-align: center;
			
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 20rpx;
		}
		.green {
			background: linear-gradient(180deg, #46DBA1 0%, #19D16E 100%);
		}
		.red {
			background: linear-gradient(180deg, #FF232C 0%, #FF571B 100%);
		}
		&_title {
			font-size: 28rpx;
			font-weight: 400;
			color: $uni-text-color;
		}
		text {
			font-size: 34rpx;
			font-weight: bold;
		}
	
		.gray {
			width: 570rpx;
			font-size: 28rpx;
			color: #999999;
			margin-top: 8rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden; //溢出内容隐藏
			text-overflow: ellipsis; //文本溢出部分用省略号表示
			display: -webkit-box; //特别显示模式
			line-clamp: 2;
			-webkit-line-clamp: 2; //行数
			-webkit-box-orient: vertical;
		}
	}
	.soapBox {
		border-top: 24rpx solid #F5F5F5;
		border-bottom: 24rpx solid #F5F5F5;
		padding: 24rpx 24rpx 48rpx 24rpx;
		background: #FFFFFF;
		position: relative;
		&_statusImg {
			width: 148rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		&_middle {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-top: 24rpx;
			.num {
				font-size: 28rpx;
				color: #999999;
			}
			.middleFlex {
				height: 130rpx;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;
				&_title {
					font-size: 30rpx;
					font-weight: bold;
				}
				&_dan {
					margin-top: 24rpx;
					font-size: 28rpx;
					width: 472rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
		&_bottom {
			text-align: right;
			// margin-top: 34rpx;
			font-weight: bold;
			font-size: 28rpx;
			.text1 {
				color: #999;
			}
			.text2 {
				color:  #FB231F;
			}
			.text3 {
				font-size: 44rpx;
				color:  #FB231F;
			}
		}
	}
	.botFlex {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 20rpx 30rpx;
	
		.botzuofei {
			align-items: flex-start;
	
			.red {
				padding-top: 10rpx;
				width: 500rpx;
				font-size: 28rpx;
				line-height: 35rpx;
				color: #FB231F;
				// text-align: ri;
				display: flex;
				justify-content: flex-end;
			}
		}
	
		&_flex {
			.title {
				line-height: 56rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.anniu {
				width: 72rpx;
				height: 42rpx;
				background: #FFF4F3;
				border-radius: 8rpx;
				text-align: center;
				line-height: 42rpx;
				font-size: 24rpx;
				color: #FB231F;
			}
	
			.right {
				font-size: 28rpx;
				font-weight: bold;
				color: #FB231F;
			}
			.remark {
				text-align: right;
				width: 60%;
				font-size: 28rpx;
			}
		}
	}
	.submitPay {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 102rpx;
		background-color: #fff;
		box-shadow: 0px -4px 24px 2px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border-top: 2rpx solid #EEEEEE;
		.anniu {
			width: 160rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			border-radius: 34rpx;
			margin-left: 20rpx;
			font-size: 28rpx;
			margin-right: 30rpx;
		}
		.grays {
			border: 2rpx solid #CCCCCC;
			color: 333;
		}
		.red {
			background: linear-gradient(84deg, #F30000 0%, #FE4815 100%);
			color: #fff;
		}
	}
</style>