|
|
<template>
|
|
|
<view>
|
|
|
<view class="orderBoxList">
|
|
|
<view class="orderBox">
|
|
|
<view class="orderBoxTitle flex-row">
|
|
|
<text class="orderBoxTitleTxt">{{info.isteam?"团队预约信息":"个人预约信息"}}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="orderBoxInfo flex-col">
|
|
|
<view class="orderBoxInfoRow flex-row" style="margin-bottom: 20rpx;">
|
|
|
<text class="iconfont icon-youkexuzhi"></text>
|
|
|
<text class="orderBoxInfoRowTxt">订单信息：5月06日 09:00-10:00 丨 3位观众</text>
|
|
|
</view>
|
|
|
<view class="orderBoxInfoRow flex-row">
|
|
|
<text class="iconfont icon-iconfontgerenzhongxin"></text>
|
|
|
<text class="orderBoxInfoRowTxt">联系人：王小华 丨 13355634563</text>
|
|
|
</view>
|
|
|
<view class="orderBoxInfoRow flex-row" v-if="info.isteam" style="margin-top: 20rpx;">
|
|
|
<text class="iconfont icon-danwei"></text>
|
|
|
<text class="orderBoxInfoRowTxt">单位名称：王小华 丨 13355634563</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBoxTime">
|
|
|
<text>下单时间：5月03日 09:30</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBoxList p0">
|
|
|
<view class="orderBox">
|
|
|
<view class="orderBoxTitle flex-row">
|
|
|
<text class="orderBoxTitleTxt">二维码</text>
|
|
|
</view>
|
|
|
<view class="orderBoxInfo flex-col ewmcode">
|
|
|
<text>0871 3355 6345</text>
|
|
|
<view>
|
|
|
<view :class="isuse?'imgs isuse':'imgs'">
|
|
|
<image :src="imgsrc" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<text class="ewminfo">{{isuse?'已使用':'请前往现场核销订单二维码'}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBoxList p0">
|
|
|
<view class="orderBox">
|
|
|
<view class="orderBoxTitle flex-row" style="justify-content: space-between;">
|
|
|
<text class="orderBoxTitleTxt">观众信息</text>
|
|
|
<text :class="isuse?'share shareuse orderBoxInfoRowTxt':'share orderBoxInfoRowTxt'">
|
|
|
分享二维码
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="orderBoxInfo flex-col">
|
|
|
<view class="orderBoxInfoRow flex-row">
|
|
|
<view>
|
|
|
<text class="iconfont icon-iconfontgerenzhongxin iconinfo"></text>
|
|
|
</view>
|
|
|
<view class="usercard">
|
|
|
<text class="orderBoxInfoRowTxt">王小华</text>
|
|
|
<text class="orderBoxInfoRowTxt">370820201004052234</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBoxInfo flex-col">
|
|
|
<view class="orderBoxInfoRow flex-row">
|
|
|
<view>
|
|
|
<text class="iconfont icon-iconfontgerenzhongxin iconinfo"></text>
|
|
|
</view>
|
|
|
<view class="usercard">
|
|
|
<text class="orderBoxInfoRowTxt">王小华</text>
|
|
|
<text class="orderBoxInfoRowTxt">370820201004052234</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBoxList p0">
|
|
|
<view class="orderBoxTitle flex-row">
|
|
|
<text class="stars orderBoxTitleTxt">*</text>
|
|
|
<text class="orderBoxTitleTxt">参观须知</text>
|
|
|
</view>
|
|
|
<view class="orderBoxTitle flex-row">
|
|
|
<text class="orderBoxInfoRowTxt">预约时需要个人姓名、联系方式和参观时间等信息，预约成功后生成预约二维码，可于个人中心查看。当天凭有效身份证件或预约二维码核销入场。</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
info: {
|
|
|
isteam: true
|
|
|
},
|
|
|
isuse:false,
|
|
|
imgsrc:'https://cdn.uviewui.com/uview/album/1.jpg'
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
.orderBoxFooter {
|
|
|
padding: 20rpx 0 0 0;
|
|
|
}
|
|
|
|
|
|
.fbtn {
|
|
|
background: #EF9525;
|
|
|
border-radius: 8rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
|
padding: 7rpx 17rpx;
|
|
|
}
|
|
|
|
|
|
.cancel {
|
|
|
background: #F7F6F4;
|
|
|
color: #828282;
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
color: #6EAC97;
|
|
|
margin-right: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.infotop {
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 2rpx 3rpx 10rpx 0px rgba(107, 94, 77, 0.3);
|
|
|
}
|
|
|
|
|
|
page {
|
|
|
background-color: #f7f6f4;
|
|
|
}
|
|
|
|
|
|
.orderBoxList {
|
|
|
padding: 26rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.orderBox {
|
|
|
min-height: 393rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 16rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 29rpx 18rpx;
|
|
|
position: relative;
|
|
|
margin-bottom: 17rpx;
|
|
|
}
|
|
|
|
|
|
.orderBoxTitle {
|
|
|
padding: 0rpx 0rpx 25rpx 0rpx;
|
|
|
border-bottom: 2rpx solid #F7F6F4;
|
|
|
}
|
|
|
|
|
|
.orderBoxInfoRow {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.orderBoxTitleTxt {
|
|
|
font-size: 32rpx;
|
|
|
color: #351C1B;
|
|
|
}
|
|
|
|
|
|
.orderBoxStatus {
|
|
|
background: #EF9525;
|
|
|
border-top-right-radius: 16rpx;
|
|
|
border-bottom-left-radius: 16rpx;
|
|
|
font-size: 24rpx;
|
|
|
padding: 19rpx 23rpx 17rpx 23rpx;
|
|
|
color: #FFFFFF;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
.orderBoxInfo {
|
|
|
padding: 29rpx 0rpx;
|
|
|
border-bottom: 2rpx solid #F7F6F4;
|
|
|
}
|
|
|
|
|
|
|
|
|
.orderBoxInfoRowTxt {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
color: #828282;
|
|
|
}
|
|
|
|
|
|
.orderBoxTime {
|
|
|
color: #CFCFCF;
|
|
|
padding: 23rpx 0;
|
|
|
border-bottom: 2rpx solid #F7F6F4;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
.p0{
|
|
|
padding-top:0
|
|
|
}
|
|
|
.ewmcode{
|
|
|
text-align: center;
|
|
|
font-size:28rpx
|
|
|
}
|
|
|
.imgs{
|
|
|
width: 273rpx;
|
|
|
height: 273rpx;
|
|
|
margin: 30rpx 0 50rpx 0;
|
|
|
font-size: 0;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
.imgs image{
|
|
|
width:273rpx;
|
|
|
height:273rpx;
|
|
|
}
|
|
|
.imgs.isuse{
|
|
|
background: url(../../static/img/used.png);
|
|
|
background-position: bottom right;
|
|
|
background-size: 161rpx;
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
.imgs.isuse image{
|
|
|
opacity: .4;
|
|
|
}
|
|
|
.ewminfo{
|
|
|
color:#828282;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
.iconinfo{
|
|
|
font-size: 35rpx;
|
|
|
}
|
|
|
.usercard text{
|
|
|
display: block;
|
|
|
}
|
|
|
.share{
|
|
|
background: url(../../static/img/share.png) no-repeat left center;
|
|
|
background-size: 21rpx;
|
|
|
background-color: #EF9525;
|
|
|
background-position: 18rpx;
|
|
|
padding: 7rpx 20rpx;
|
|
|
padding-left: 46rpx;
|
|
|
border-radius: 10px;
|
|
|
color:#fff;
|
|
|
}
|
|
|
.shareuse{
|
|
|
background: url(../../static/img/share_used.png) no-repeat left center;
|
|
|
background-color: #F7F6F4;
|
|
|
color:#828282;
|
|
|
background-position: 18rpx;
|
|
|
background-size: 21rpx;
|
|
|
}
|
|
|
.stars{
|
|
|
color: #EF9525;
|
|
|
margin-right:12rpx
|
|
|
}
|
|
|
</style>
|
