qidian/pages/orderdetails/orderdetails.vue

<template>
	<view class="logo">
		<image v-if="detils.list.orderState==2||detils.list.orderState==1" src="../../static/dfk.png"></image>
		<image v-if="detils.list.orderState==3||detils.list.orderState==8||detils.list.orderState==9||detils.list.orderState==10||detils.list.orderState==14" src="../../static/ffz.png"></image>
		<image v-if="detils.list.orderState==4||detils.list.orderState==5" src="../../static/ytk.png"></image>
		<image v-if="detils.list.orderState==6||detils.list.orderState==113" src="../../static/cg.png"></image>
		<image v-if="detils.list.orderState==7||detils.list.orderState==15" src="../../static/yqx.png"></image>
		<view v-if="detils.list.orderState==1">待付款</view>
		<!-- <view v-if="detils.list.orderState==14">已空投</view> -->
		<view v-if="detils.list.orderState==2&&detils.list.transactionType!='14'">已付款</view>
		<view v-if="detils.list.orderState==2&&detils.list.transactionType=='14'">已空投</view>
		<view v-if="detils.list.orderState==3&&detils.list.transactionType!='14'">发放中</view>
		<view v-if="detils.list.orderState==3&&detils.list.transactionType=='14'">已空投</view>
		<view v-if="detils.list.orderState==4">退款中</view>
		<view v-if="detils.list.orderState==5">已取消</view>
		<view v-if="detils.list.orderState==6&&detils.list.transactionType!='14'">已完成</view>
		<view v-if="detils.list.orderState==113">已卖出</view>
		<view v-if="detils.list.orderState==6&&detils.list.transactionType=='14'">已空投</view>
		<view v-if="detils.list.orderState==7||detils.list.orderState==15">已关闭</view>
		<view v-if="detils.list.orderState==8&&detils.list.transactionType!='14'">待铸造</view>
		<view v-if="detils.list.orderState==8&&detils.list.transactionType=='14'">已空投</view>
		<view v-if="detils.list.orderState==9&&detils.list.transactionType!='14'">已铸造</view>
		<!-- <view v-if="detils.list.orderState==9&&detils.list.transactionType!='14'">已铸造</view> -->
		<view v-if="detils.list.orderState==9&&detils.list.transactionType=='14'">已空投</view>
		<view v-if="detils.list.orderState==10&&detils.list.transactionType!='14'">链上已确认</view>
		<view v-if="detils.list.orderState==10&&detils.list.transactionType=='14'">已空投</view>
	</view>
	<view class="order_content">
		<view>
			<view>
				<view>
					<image :src="detils.list.writerAvatar"></image>
					<view>{{detils.list.artistName}}</view>
				</view>
				<view v-if="detils.list.orderState==2||detils.list.orderState==6||detils.list.orderState==113" style="color:#0CE4BE ;" >{{detils.list.orderState==2?'已付款':detils.list.orderState==6?'已完成':detils.list.orderState==113?'已卖出':''}}</view>
				<view v-if="detils.list.orderState==4||detils.list.orderState==5||detils.list.orderState==7||detils.list.orderState==15" style="color:#8D8C9F ;" >{{detils.list.orderState==4?'退款中':detils.list.orderState==5?'已取消':detils.list.orderState==7||detils.list.orderState==15?'已关闭':''}}</view>
				<view v-if="detils.list.orderState==3&&detils.list.transactionType!='14'" style="color:#FFA337 ;" >发放中</view>
				<view v-if="detils.list.orderState==3&&detils.list.transactionType=='14'" style="color:#0CE4BE ;" >已空投</view>
				<view v-if="detils.list.orderState==8&&detils.list.transactionType!='14'" style="color:#FFA337 ;" >待铸造</view>
				<view v-if="detils.list.orderState==8&&detils.list.transactionType=='14'" style="color:#0CE4BE ;" >已空投</view>
				<view v-if="detils.list.orderState==9&&detils.list.transactionType!='14'" style="color:#FFA337 ;" >已铸造</view>
				<view v-if="detils.list.orderState==9&&detils.list.transactionType=='14'" style="color:#0CE4BE ;" >已空投</view>
				<view v-if="detils.list.orderState==10&&detils.list.transactionType!='14'" style="color:#FFA337 ;" >链上已确认</view>
				<view v-if="detils.list.orderState==10&&detils.list.transactionType=='14'" style="color:#0CE4BE ;" >已空投</view>
				<view v-if="detils.list.orderState==1" style="color:#ff0000 ;" >待付款</view>
			</view>
			<view>
				<image :src="detils.list.surfacePlot"></image>
				<view>
					<view>{{detils.list.collectionName}}</view>
					<view>下单时间:{{detils.list.createdTime}}</view>
					<view>￥{{detils.list.orderAmount}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="xiangqin">
		<view>
			<view>订单金额</view>
			<view>{{detils.list.orderAmount}}</view>
		</view>
		<view>
			<view>交易数量</view>
			<view>{{detils.list.numberDeals}}</view>
		</view>
		<view>
			<view>创建时间</view>
			<view>{{detils.list.createdTime}}</view>
		</view>
		<view>
			<view>合约地址</view>
			<view>{{detils.list.contractAddress}}</view>
		</view>
		<view v-if="detils.list.paymentTime">
			<view>{{detils.list.transactionType=='14'?"空投时间":"付款时间"}}</view>
			<view>{{detils.list.paymentTime}}</view>
		</view>
		<view>
			<view>订单编号</view>
			<view>{{detils.list.orderNumber}}</view>
		</view>
		<view v-if="detils.list.orderState==2||detils.list.orderState==3||detils.list.orderState==4||detils.list.orderState==6">
			<view>交易号</view>
			<view>{{detils.list.transactionNo}}</view>
		</view>
		<view v-if="detils.list.orderState==2||detils.list.orderState==3||detils.list.orderState==4||detils.list.orderState==6">
			<view>支付方式</view>
			<view v-if="detils.list.methodPayment=='1'">微信支付</view>
			<view v-if="detils.list.methodPayment=='2'">支付宝支付</view>
			<view v-if="detils.list.methodPayment=='10'">汇付宝支付</view>
			<view v-if="detils.list.methodPayment=='9'">衫德支付</view>
		</view>
	</view>
	<view class="bontt" v-if="detils.list.orderState==1">
		<view @click="zhifu">继续支付</view>
		<view @click="quxiao" >取消订单</view>
	</view>
</template>

<script>
	import {criticismdetails,paypayreload,paypayResult} from '@/api/user.js'
	import { reactive } from 'vue'
	export default {
		props:['id'],
		setup(props) {
			let detils=reactive({
				list:{}
			})
			function init(){
				criticismdetails({
					id:props.id
				}).then(res=>{
					console.log(res);
					detils.list=res.data
					detils.list.orderAmount=res.data.orderAmount.split('.')[0]+'.'+res.data.orderAmount.split('.')[1].substring(0,2) 
				})
			}
			init()
			function zhifu(){
				paypayreload({id:detils.list.id}).then(res=>{
					uni.navigateTo({
						url:'../payorder/payorder?id='+res.msg
					})
				})
			}
			function quxiao(){
				paypayResult({id:detils.list.id,orderStatus:5}).then(res=>{
					console.log(res);
					if(res.code==200){
						init()
					}
				})
			}
			return {
				detils,
				zhifu,
				quxiao
			}
		}
	}
</script>

<style lang="scss">
	.bontt {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 108upx;

		>view {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		>view:nth-of-type(1) {
			width: 668upx;
			height: 84upx;
			background: #3772FF;
			border-radius: 12upx;
			font-size: 28upx;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 48upx;
		}

		>view:nth-of-type(2) {
			width: 668upx;
			height: 84upx;
			border-radius: 12upx;
			opacity: 1;
			border: 1upx solid #8D8C9F;
			font-size: 28upx;
			font-weight: 500;
			color: #8D8C9F;
			margin-bottom: 48upx;
		}
	}

	.xiangqin {
		width: 686upx;
		display: flex;
		flex-direction: column;
		border-radius: 12upx;
		background-color: #23262F;
		margin: auto;
		box-sizing: border-box;
		padding: 0 32upx;
		margin-bottom: 50upx;
		>view {
			display: flex;
			border-bottom: 1upx solid #373737;

			&:nth-last-child(1) {
				border-bottom: none;
			}

			>view:nth-of-type(1) {
				width: 104upx;
				// height: 32upx;
				margin: 30upx 0;
				font-size: 26upx;
				font-weight: 500;
				color: #8D8C9F;
				margin-right: 40upx;
				
			}

			>view:nth-of-type(2) {
				width: 460upx;
				font-size: 26upx;
				font-weight: 500;
				margin: 30upx 0;
				color: #FFFFFF;
				overflow-wrap: anywhere;
			}
		}
	}

	.order_content {
		margin-top: 90upx;
		width: 100%;
		display: flex;
		flex-direction: column;
		// margin-top: 30upx;
		padding: 32upx;
		box-sizing: border-box;

		>view {
			width: 686upx;
			// height: 348upx;
			background: #23262F;
			border-radius: 12upx;
			opacity: 1;
			display: flex;
			flex-direction: column;

			// margin-bottom: 24upx;
			>view:nth-of-type(1) {
				padding: 16upx 28upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #373737;

				>view {
					display: flex;
					font-size: 28upx;
					font-weight: 400;
					align-items: center;

					>image {
						width: 56upx;
						height: 56upx;
						margin-right: 22upx;
						border-radius: 50%;
					}

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			>view:nth-of-type(2) {
				display: flex;
				padding: 36upx 28upx;
				width: 100%;
				box-sizing: border-box;

				>image {
					width: 190upx;
					height: 190upx;
					margin-right: 26upx;
				}

				>view {
					display: flex;
					flex-direction: column;
					box-sizing: border-box;

					>view:nth-of-type(1) {
						font-size: 32upx;
						font-weight: bold;
						color: #FFFFFF;
					}

					>view:nth-of-type(2) {
						font-size: 24upx;
						font-weight: bold;
						color: #8D8C9F;
						margin-top: 24upx;
						margin-bottom: 40upx;
					}

					>view:nth-of-type(3) {
						font-size: 32upx;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;

		>image {
			width: 116upx;
			height: 116upx;
		}

		>view {
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 30upx;
		}
	}

	page {
		padding-top: 80upx;
	}
</style>