hwnc/pagesB/pages/activorderdails/activorderdails.vue

<template>
	<view class="all_box">
		<image class="live_thumbnails" lazy-load="true" mode="scaleToFill" :src="activitydetails.activity_img"></image>
		<view class="basic_information">
			<u-form :model="activitydetails" ref="uForm">
				<u-form-item label-width="150" label="活动名称:">
					<view style="text-align: right;width: 100%;">{{activitydetails.activity_title}}</view>
				</u-form-item>
				<u-form-item label-width="150" label="开始日期:">
					<view style="text-align: right;width: 100%;">{{activitydetails.start_time}}</view>
				</u-form-item>
				<u-form-item label-width="150" label="结束日期:">
					<view style="text-align: right;width: 100%;">{{activitydetails.end_time}}</view>
				</u-form-item>
				<u-form-item label-width="150" label="总金额:">
					<view style="text-align: right;width: 100%;">{{activitydetails.order_money}}</view>
				</u-form-item>
				<u-form-item label-width="150" label="订单号:">
					<view style="text-align: right;width: 100%;">{{activitydetails.order_sn}}</view>
				</u-form-item>
				<u-form-item label-width="150" label="下单时间:">
					<view style="text-align: right;width: 100%;">{{activitydetails.create_time}}</view>
				</u-form-item>
				<u-form-item label-width="150" label="付款时间:">
					<view v-if="activitydetails.status_pay=='未支付'" style="text-align: right;width: 100%;color: red;">未付款</view>
					<view v-else style="text-align: right;width: 100%;">{{activitydetails.pay_time}}</view>
				</u-form-item>
				<u-form-item label-width="150" label="备注:">
					<view style="text-align: right;width: 100%;">{{activitydetails.remark}}</view>
				</u-form-item>
				<view class="table">
					<view class="row">
						<view class="bg">票种</view>
						<view>单价</view>
						<view>数量</view>
						<view>总价</view>
					</view>
					<view class="row">
						<view class="bg">成人票</view>
						<view>{{activitydetails.adult_fares}}</view>
						<view>{{activitydetails.adult_num}}</view>
						<view>{{activitydetails.adult_fares*activitydetails.adult_num}}</view>
					</view>
					<view class="row">
						<view class="bg">儿童票</view>
						<view>{{activitydetails.child_fares}}</view>
						<view>{{activitydetails.child_num}}</view>
						<view>{{activitydetails.child_fares*activitydetails.child_num}}</view>
					</view>
				</view>
				<u-form-item v-if="activitydetails.status_pay=='已支付'" label-position="top" labelWidth="80" label="核销码:">

				</u-form-item>
				<view class="write_code">
					<view v-for="(item,index) in activitydetails.qrcode" :key="index" class="writeinfo">
						<image @click="preview(item.writeoffcode)" style="width: 100px;height: 100px;"
							class="write_off_code" :src="item.writeoffcode" mode=""></image>
						<view class="write_off_hxsn">
							{{item.hx_sn}}
						</view>
					</view>
				</view>
			</u-form>
		</view>
	</view>
</template>
<script>
	import mallApi from '@/api/mall/index.js';
	import untiljs from '@/common/until.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				//详细信息
				activitydetails: {},
				// 坐标地址
				latitude: 39.909,
				longitude: 116.39742
			};
		},
		onLoad(options) {
			let id = options.itemid;
			if (id !== undefined || id !== null) {
				this.vueinit(id);
			}
		},
		methods: {
			//核销码预览
			preview(imgurl) {
				let imgArray = []
				imgArray[0] = imgurl
				// console.log(imgArray, "imgArray")
				uni.previewImage({
					current: 0,
					urls: imgArray,
					success: function(res) {
						// console.log(res)
					},
					fail: function(res) {
						// console.log(res)
					}
				})
			},
			//切换地图
			casemap() {
				uni.openLocation({
					latitude: Number(this.latitude), //要去的纬度-地址---请注意这里的Number，如果不加Number，就会出错
					longitude: Number(this.longitude), //要去的经度-地址---请注意这里的Number，如果不加Number，就会出错
					name: '天安门',
					address: '我们在这里欢迎你的到来'
				});
			},
			// 返回指定格式时间
			retushorttime(time) {
				if (time !== undefined && time !== null) {
					let data = time.substr(0, 10)
					return data
				}
			},
			vueinit(id) {
				let that = this;
				let params = {
					id: id
				};
				mallApi.orderindex(params).then(res => {
					if (res.status == 1) {
						that.activitydetails = res.data;
						that.activitydetails.create_time = that.activitydetails.create_time
						that.activitydetails.end_time = that.retushorttime(that.activitydetails.end_time)
						that.activitydetails.pay_time = that.activitydetails.pay_time
						that.activitydetails.use_time = that.activitydetails.use_time
						that.activitydetails.start_time = that.retushorttime(that.activitydetails.start_time)
					} else {
						that.activitydetails = res.data;
						that.$api.msg(res.msg);
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	/deep/.u-input {
		background-color: #ffffff;
	}

	.table {
		width: 100%;
		color: #303133;
		justify-content: space-evenly;
		display: flex;
		border-left: 1rpx solid #999;
		border-top: 1rpx solid #999;
		.row{
		
			width: 100%;
			.bg{
				background-color: #eaeaea;
			}
			view{
				border-bottom: 1rpx solid #999;
				border-right: 1rpx solid #999;
				text-align: center;
				padding: 10rpx 0rpx 10rpx 0rpx;
			}
		}
	}

	.all_box {
		background-color: #ffffff;
		min-height: 100vh;

		.live_thumbnails {
			width: 100%;
			height: 420rpx;
		}

		.basic_information {
			border-radius: 40rpx 40rpx 0 0;
			padding:30rpx;

			.write_code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 20rpx;

				.writeinfo {
					text-align: center;
					margin: 0 10rpx;
					padding-bottom: 20rpx;
					.write_off_code {
						width: 200rpx;
						height: 200rpx;
					}

					.write_off_hxsn {
						font-size: 25rpx;
						line-height: 25rpx;
					}
				}
			}

			.u-border-bottom:after,
			.u-border-left:after,
			.u-border-right:after,
			.u-border-top-bottom:after,
			.u-border-top:after,
			.u-border:after {
				border-bottom-color: #666;
			}

			.information_line {
				font-size: 31rpx;
				line-height: 70rpx;
				color: #111;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.information_line_p1 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 34rpx;
					color: #333;

					.information_line_p1_ti1 {
						font-size: 32rpx;
						color: #000;
						font-weight: 900;
					}

					.activity_typeid {
						font-size: 28rpx;
						color: #ffffff;
						background-color: #56ab2f;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 10rpx;
						border-radius: 10rpx;
						margin-left: 25rpx;
					}
				}

				.address_p1 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 28rpx;
					font-weight: 900;
					color: #000;
				}

				.address_p2 {
					font-size: 26.5rpx;
					color: #111;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					text {
						display: block;
					}
				}

				.cost {
					color: #56ab2f;
				}

				u-icon {
					margin-right: 15rpx;
				}
			}
		}

		.padd_bottom {
			height: calc(env(safe-area-inset-bottom) + 130rpx);
			width: 100%;
		}
	}
</style>