You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1608 lines
37 KiB
1608 lines
37 KiB
<template>
|
|
<view class="bg">
|
|
<view class="title-box">
|
|
<span class="iconfont" @click="goBack"></span>
|
|
<view>订单状态</view>
|
|
</view>
|
|
<view class="top-box">
|
|
<view>{{info.status_text}}</view>
|
|
|
|
<!-- 待支付时会显示自动取消时间 -->
|
|
<view v-if="info.status=='WAIT_PAYMENT'" class="close-time">订单将在{{info.close_time.slice(-8)}}自动取消</view>
|
|
|
|
<!-- 待退款 -->
|
|
<view v-if="info.status=='WAIT_REFUND'" class="close-time">系统将在1-7个工作日内原路退回您的原支付账户</view>
|
|
|
|
<!-- 退款完成 -->
|
|
<view v-if="info.status=='REFUND_SUCCESS'" class="close-time">您的退款金额已退还到您的原支付账户</view>
|
|
</view>
|
|
|
|
<!-- 景点、美食二维码 -->
|
|
<view v-if="isQrcode" style="margin-top: -66rpx;">
|
|
<view class="qrcode-remain" v-if="!info.order_child[0].extract_id">还剩<span>{{remainNum}}</span>张未核销</view>
|
|
|
|
<swiper class="qrcode-box" :circular="false" previous-margin="120rpx" next-margin="120rpx" :duration="800"
|
|
:current="current" @change="swiperChange">
|
|
<swiper-item v-for="(item, index) in info.order_child" :key="index" class="flex-center">
|
|
<view class="qrcode-item flex-column">
|
|
<view class="qrcode-title">{{item.specifications_name}}</view>
|
|
<image :src="item.qrcodeimg" style="width: 300rpx;height: 300rpx;" mode="aspectFill"></image>
|
|
<canvas :id="'qrcodeT'+index" :canvas-id="'qrcodeT'+index"
|
|
style="width:150px;height:150px;z-index: -20;bottom: -500px;position: absolute;"></canvas>
|
|
<view class="qrcode-subtitle">核销码:{{item.child_id}}</view>
|
|
|
|
<view class="complete-text flex-center"
|
|
v-if="['WAIT_REFUND','REFUND_SUCCESS','WAIT_COMMENT','COMPLETE'].includes(item.status)">
|
|
<view class="flex-center" v-if="item.status == 'WAIT_COMMENT'">
|
|
已核销
|
|
</view>
|
|
<view class="flex-center" v-else>
|
|
已失效
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 指示点 -->
|
|
<view class="swiper-point flex-center">
|
|
<view v-for="(item,index) in info.order_child" :key="index"
|
|
:class="[{'swiper-points': index == current}]"></view>
|
|
</view>
|
|
|
|
<!-- 提示语 -->
|
|
<view class="swiper-prompt">左右滑动核销其他二维码</view>
|
|
</view>
|
|
|
|
<!-- 子订单里info.order_child[0].goods_genre：景点ticket、酒店hotel、美食food、邮寄自提pgoods、线路line -->
|
|
|
|
<view :style="{margin: isQrcode ? '0' : '-66rpx auto 0'}" v-if="info.order_child">
|
|
<!-- 景点订单 -->
|
|
<view v-if="['ticket', 'line'].includes(info.order_child[0].goods_genre)">
|
|
<!-- 景点详情 -->
|
|
<view class="scenic-detail">
|
|
<view>
|
|
<view class="scenic-title" @click="gotoDetail">
|
|
{{info.order_child[0].goods_title}}
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/rightIcon.png"></image>
|
|
</view>
|
|
<view class="scenic-subtitle">
|
|
出行时间：<span>{{info.order_child[0].use_date}}</span>
|
|
</view>
|
|
<view class="scenic-subtitle" v-if="info.order_child[0].scenic_data.open_description">
|
|
开放时间：<span>{{info.order_child[0].scenic_data.open_description}}</span>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 子订单规格 -->
|
|
<view>
|
|
<view v-for="(item,index) in info.order_child" :key="index"
|
|
class="specifications-item flex-between">
|
|
<view>{{item.specifications_name}}</view>
|
|
<view class="flex-between" style="width: 150rpx;">
|
|
<view>￥{{item.money / 100}}</view>
|
|
<view>x{{item.num}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品价格 -->
|
|
<view class="public-price">
|
|
<view class="flex-between">
|
|
商品总额：<span>￥{{info.money / 100}}</span>
|
|
</view>
|
|
<view class="flex-between" v-if="info.discounts">
|
|
优惠券：<span>-￥{{info.discounts / 100}}</span>
|
|
</view>
|
|
<view class="flex-between">
|
|
实付金额：<span style="font-size: 35rpx;color: #C3282E;">￥{{info.pay_money / 100}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 景点出行人 -->
|
|
<view class="novice-box"
|
|
v-if="info.order_child[0].contact_name && info.order_child[0].goods_genre == 'ticket'">
|
|
出行人
|
|
<view v-for="(item,index) in info.order_child" :key="index" class="novice-item">
|
|
<view class="novice-title">{{item.specifications_name}}</view>
|
|
<view class="novice-subtitle" v-if="item.contact_name">
|
|
<span>姓名：</span>{{item.contact_name}}
|
|
</view>
|
|
<view class="novice-subtitle" v-if="item.id_number">
|
|
<span>身份证：</span>{{item.id_number}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 线路出行人 -->
|
|
<view class="novice-box" v-if="info.reserve_name && info.order_child[0].goods_genre == 'line'">
|
|
出行人
|
|
<view class="novice-item">
|
|
<view class="novice-subtitle" v-if="info.reserve_name">
|
|
<span>姓名：</span>{{info.reserve_name}}
|
|
</view>
|
|
<view class="novice-subtitle" v-if="info.reserve_phone">
|
|
<span>手机号：</span>{{info.reserve_phone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 邮寄、自提订单 -->
|
|
<view v-if="info.order_child[0].goods_genre == 'pgoods'">
|
|
<view class="shipping-address" v-if="info.order_child[0].consignee_id">
|
|
收货地址
|
|
<view>{{info.order_child[0].consignee.name}} {{info.order_child[0].consignee.tel}}</view>
|
|
<view class="text-overflowRows">{{info.order_child[0].consignee.address}}</view>
|
|
</view>
|
|
|
|
<!-- 产品详情 -->
|
|
<view class="pgoods-detail">
|
|
商家名称
|
|
<view class="pgoods-product" v-for="(item,index) in info.order_child" :key="index">
|
|
<image :src="showImg(item.specifications_image)" mode="aspectFill" class="product-img"></image>
|
|
<view class="product-content flex-column">
|
|
<view class="product-title">{{item.goods_title}}</view>
|
|
<view class="product-subtitle flex-between">
|
|
{{item.specifications_name}}
|
|
<span>x{{item.num}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品价格 -->
|
|
<view class="public-price">
|
|
<view class="flex-between">
|
|
商品总额：<span>￥{{info.money / 100}}</span>
|
|
</view>
|
|
<view class="flex-between" v-if="info.discounts">
|
|
优惠券：<span>-￥{{info.discounts / 100}}</span>
|
|
</view>
|
|
<view class="flex-between">
|
|
实付金额：<span style="font-size: 35rpx;color: #C3282E;">￥{{info.pay_money / 100}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 自提信息 -->
|
|
<view class="pickup-box" v-if="info.order_child[0].contact_id && info.order_child[0].extract_id">
|
|
自提信息
|
|
<view class="pickup-user">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/user.png" class="picker-img">
|
|
</image>
|
|
<view>{{info.order_child[0].contact.name}}</view>
|
|
<view>{{info.order_child[0].contact.tel}}</view>
|
|
</view>
|
|
<view class="pickup-address">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/location.png" class="picker-img"
|
|
style="margin-top: 6rpx;"></image>
|
|
|
|
<view>
|
|
<view class="picker-shopName">{{info.order_child[0].extract.extract_name}}</view>
|
|
<view class="picker-shopAddress">{{info.order_child[0].extract.detail_addr}}</view>
|
|
</view>
|
|
|
|
<view class="pickup-icon flex-center">
|
|
<view @click="clickPhone(info.order_child[0].extract.mobile)">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/phone.png" mode="">
|
|
</image>
|
|
电话
|
|
</view>
|
|
<view @click="openLocation(info.order_child[0].extract.lat,info.order_child[0].extract.lon)">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/navigations.png" mode="">
|
|
</image>
|
|
导航
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 美食 -->
|
|
<view v-if="info.order_child[0].goods_genre == 'food'">
|
|
<view class="pgoods-detail">
|
|
购买信息
|
|
<view class="pgoods-product" style="border-bottom: none;">
|
|
<image :src="showImg(foodInfo.image)" mode="aspectFill" class="product-img"></image>
|
|
<view class="product-content flex-column">
|
|
<view class="product-title">{{foodInfo.title}}</view>
|
|
<view class="product-subtitle flex-between">
|
|
<view class="product-tags" v-if="foodInfo.specifications_new_tag">
|
|
<view v-for="(item,index) in foodInfo.specifications_new_tag.split(',').slice(0,3)"
|
|
:key="index">{{item}}</view>
|
|
</view>
|
|
<span>x{{info.order_child[0].num}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="food-name flex-between">
|
|
{{info.order_child[0].contact_name}}
|
|
<span>{{info.order_child[0].phone}}</span>
|
|
</view>
|
|
|
|
<!-- 商品价格 -->
|
|
<view class="public-price">
|
|
<view class="flex-between">
|
|
商品总额：<span>￥{{info.money / 100}}</span>
|
|
</view>
|
|
<view class="flex-between" v-if="info.discounts">
|
|
优惠券：<span>-￥{{info.discounts / 100}}</span>
|
|
</view>
|
|
<view class="flex-between">
|
|
实付金额：<span style="font-size: 35rpx;color: #C3282E;">￥{{info.pay_money / 100}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="shop-detail">
|
|
商家信息
|
|
<view class="shop-name">店铺名称</view>
|
|
<view class="shop-info">
|
|
<view>
|
|
<view style="margin-top: 23rpx; display: flex;"
|
|
v-if="info.order_child[0].goods_data.open_description">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/time.png"
|
|
class="shop-time"></image>
|
|
<view>
|
|
<view class="shop-title">营业时间</view>
|
|
<view class="shop-subtitle">{{info.order_child[0].goods_data.open_description}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="flex-center" style="margin-top: 23rpx;">
|
|
<view style="display: flex;">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/location.png"
|
|
class="shop-time"></image>
|
|
<view style="width: 420rpx;">
|
|
<view class="shop-title text-overflow">
|
|
{{info.order_child[0].goods_data.address}}
|
|
</view>
|
|
<view class="shop-subtitle" v-if="info.order_child[0].goods_data.distance">
|
|
距您约{{info.order_child[0].goods_data.distance > 1000 ? (info.order_child[0].goods_data.distance / 1000).toFixed(2) + 'km' : info.order_child[0].goods_data.distance + 'm'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="shop-icon">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/phone.png"
|
|
@click="clickPhone(info.order_child[0].goods_data.tel)"></image>
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/navigations.png"
|
|
@click="openLocation(info.order_child[0].goods_data.tengxun_map.lat,info.order_child[0].goods_data.tengxun_map.lon)">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 酒店 -->
|
|
<view v-if="info.order_child[0].goods_genre == 'hotel'">
|
|
<view class="hotel-detail">
|
|
入住信息
|
|
<view class="hotel-title">{{info.order_child[0].goods_title}}</view>
|
|
|
|
<view class="hotel-date">
|
|
<view>
|
|
{{(info.order_child[0].start_date).slice(5)}}
|
|
<span>{{ShowDateDay(new Date(info.order_child[0].start_date).getDay())}}入住</span>
|
|
</view>
|
|
<view class="hotel-days">共{{calDate(info.order_child[0].start_date, info.order_child[0].end_date)}}晚
|
|
</view>
|
|
<view class="use-date">
|
|
{{info.order_child[0].end_date.slice(5)}}
|
|
<span>{{ShowDateDay(new Date(info.order_child[0].end_date).getDay())}}离店</span>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex-between" style="margin-top: 30rpx;">
|
|
<view class="hotel-address flex-between">
|
|
<view class="address text-overflowRows">{{info.order_child[0].scenic_data.address}}</view>
|
|
<view class="address-image"
|
|
@click="openLocation(info.order_child[0].scenic_data.tengxun_map.lat,info.order_child[0].scenic_data.tengxun_map.lon)">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/navigation.png"></image>
|
|
<view>地图</view>
|
|
</view>
|
|
</view>
|
|
<view class="hotel-phone flex-center" @click="clickPhone(info.order_child[0].scenic_data.tel)">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/hotelPhone.png"></image>
|
|
<view>电话</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hotel-skuName flex-between">
|
|
<view class="text-overflow">{{info.order_child[0].specifications_name}}</view>
|
|
<view class="flex-between">
|
|
<view>￥{{info.order_child[0].money / 100}}</view>
|
|
<view>x{{info.order_child[0].num}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品价格 -->
|
|
<view class="public-price">
|
|
<view class="flex-between">
|
|
商品总额：<span>￥{{info.money / 100}}</span>
|
|
</view>
|
|
<view class="flex-between" v-if="info.discounts">
|
|
优惠券：<span>-￥{{info.discounts / 100}}</span>
|
|
</view>
|
|
<view class="flex-between">
|
|
实付金额：<span style="font-size: 35rpx;color: #C3282E;">￥{{info.pay_money / 100}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hotel-information">
|
|
预订信息
|
|
<view><span>房间数：</span>{{info.order_child[0].num}}间</view>
|
|
<view><span>入住姓名：</span>{{info.reserve_name}}</view>
|
|
<view><span>联系电话：</span>{{info.reserve_phone}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息 -->
|
|
<view class="order-info">
|
|
订单信息
|
|
<view class="order-subtitle" style="display: flex;align-items: center;">
|
|
<span>订单账号：</span>{{info.order_id}}
|
|
<view class="copy flex-around" @click="clickCopy">
|
|
<image src="https://static.ticket.sz-trip.com/tongli/images/order/copys.png" class="copy-img"></image>
|
|
复制
|
|
</view>
|
|
</view>
|
|
<view class="order-subtitle">
|
|
<span>下单时间：</span>{{info.create_time}}
|
|
</view>
|
|
<view class="order-subtitle" v-if="info.pay_time">
|
|
<span>支付时间：</span>{{info.pay_time}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系客服 -->
|
|
<view class="kefu-box" @click="openKf(1)">
|
|
<image src="https://static.ticket.sz-trip.com/tongli/images/order/kefus.png" mode="" class="kefu-img"></image>
|
|
联系客服
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<footer>
|
|
<view class="bottom-price" v-if="info.status == 'WAIT_PAYMENT'">
|
|
合计：
|
|
<span class="price">{{info.pay_money/100}}</span>
|
|
</view>
|
|
<view class="btn-box">
|
|
<view class="btn" v-if="info.status == 'PAYMENT_SUCCESSFULLY'" @click="refund(info.order_id)">
|
|
取消订单
|
|
</view>
|
|
|
|
<view class="btn" v-if="info.status == 'WAIT_PAYMENT'" @click="closeOrder(info.order_id)">
|
|
关闭订单
|
|
</view>
|
|
|
|
<view class="btn"
|
|
v-if="['WAIT_REFUND','REFUND_SUCCESS','WAIT_COMMENT','COMPLETE','CLOSED'].includes(info.status)"
|
|
@click="gotoDetail">
|
|
再次购买
|
|
</view>
|
|
|
|
<view class="btn pay-btn" v-if="info.status == 'WAIT_PAYMENT'" @click="setOrderId(info.order_id)">
|
|
立即支付
|
|
</view>
|
|
|
|
<view class="btn" v-if="info.status == 'POST' && info.order_child[0].goods_genre == 'pgoods'"
|
|
@click="openMask()">
|
|
快递查询
|
|
</view>
|
|
|
|
<view class="btn" v-if="info.status == 'POST' && info.order_child[0].goods_genre == 'pgoods'"
|
|
@click="confirmGoods()">
|
|
确认收货
|
|
</view>
|
|
</view>
|
|
</footer>
|
|
|
|
<!-- 快递详情 -->
|
|
<view class="mask" v-if="maskShow">
|
|
<view class="mask-bg" @click="maskShow = false"></view>
|
|
<view class="mask-content">
|
|
<p class="mask-title">物流信息</p>
|
|
<view class="iconfont" @click="maskShow = false">x</view>
|
|
<view class="express-all">
|
|
<view class="express-item" v-for="item,index in postInfo" :key="index">
|
|
<view class="line" v-if="index != postInfo.length - 1"></view>
|
|
<view class="express-item-icon" v-if="index!=0">·</view>
|
|
<view class="express-item-icon express-item-icons" v-else>·</view>
|
|
<view :class="['express-info',index==0?'active':'']">
|
|
<p>{{item.AcceptStation}}</p>
|
|
<p class="express-time">{{item.AcceptTime}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 客服弹框 -->
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="consult-popup">
|
|
即将拨打客服电话
|
|
<view class="consult-subtitle">服务时间：周一至周五<br>8:30-11:30，14:30-18:00</view>
|
|
<view class="consult-btns">
|
|
<view @click="openKf(0)">取消</view>
|
|
<view @click="clickPhone('0515-69186109')">确定</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QRCode from '@/static/js/weapp-qrcode.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
order_id: '',
|
|
info: {},
|
|
foodInfo: {},
|
|
current: 0,
|
|
isQrcode: false,
|
|
remainNum: 0,
|
|
maskShow: false,
|
|
postInfo: []
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.order_id = option.id
|
|
this.getDetail()
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
// 客服
|
|
openKf(flag) {
|
|
if(flag) {
|
|
this.$refs.popup.open()
|
|
}else {
|
|
this.$refs.popup.close()
|
|
}
|
|
},
|
|
// 计算两个日期间的天数
|
|
calDate(startDate, endDate) {
|
|
var start = new Date(startDate);
|
|
var end = new Date(endDate);
|
|
var diff = end - start;
|
|
var days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 计算天数差
|
|
return days;
|
|
},
|
|
// 获取订单详情
|
|
getDetail() {
|
|
this.Post({
|
|
order_id: this.order_id,
|
|
lon: uni.getStorageSync('location').lon || '110.43785794300781',
|
|
lat: uni.getStorageSync('location').lat || '36.95286642085422'
|
|
}, '/api/order/orderDetail').then(res => {
|
|
this.info = res.data;
|
|
|
|
if (this.info.order_child[0].goods_genre == 'food') {
|
|
// 美食类的需要调取规格详情
|
|
this.Post({
|
|
goods_id: this.info.order_child[0].goods_id
|
|
}, '/api/goods/getSpecificationsByGoodsId').then(res => {
|
|
res.data.forEach(item => {
|
|
if (item.id == this.info.order_child[0].specifications_id) this
|
|
.foodInfo = item
|
|
})
|
|
})
|
|
}
|
|
|
|
// 景点、美食、线路二维码
|
|
if (['ticket', 'food', 'line'].includes(this.info.order_child[0].goods_genre) || (this.info
|
|
.order_child[0].contact_id && this.info.order_child[0].extract_id)) {
|
|
if (['PAYMENT_SUCCESSFULLY', 'WAIT_REFUND', 'REFUND_SUCCESS', 'WAIT_COMMENT', 'COMPLETED']
|
|
.includes(this.info.status)) {
|
|
this.isQrcode = true
|
|
for (let i = 0; i < this.info.order_child.length; i++) {
|
|
this.getCodeImg(this.info.order_child[i].child_id, i);
|
|
|
|
// 未核销数量
|
|
if (this.info.order_child[i].status == 'SUCCESS') this.remainNum += 1
|
|
}
|
|
} else if (!['WAIT_PAYMENT', 'CLOSED'].includes(this.info.status)) {
|
|
for (let i = 0; i < this.info.order_child.length; i++) {
|
|
if (this.info.order_child[i].is_display_order_qrcode) {
|
|
this.isQrcode = true
|
|
this.getCodeImg(this.info.order_child[i].child_id, i);
|
|
|
|
// 未核销数量
|
|
if (this.info.order_child[i].status == 'SUCCESS') this.remainNum += 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
setTimeout(() => {
|
|
console.log(this.info.order_child)
|
|
}, 1000)
|
|
})
|
|
},
|
|
// 生成二维码
|
|
getCodeImg(code, index) {
|
|
new QRCode('qrcodeT' + index, {
|
|
text: code,
|
|
width: 150,
|
|
height: 150,
|
|
padding: 2,
|
|
colorDark: 'rgb(0,0,0)',
|
|
colorLight: 'rgb(255,255,255)',
|
|
correctLevel: QRCode.CorrectLevel.M, // 二维码可辨识度
|
|
callback: res => {
|
|
this.$set(this.info.order_child[index], 'qrcodeimg', res.path);
|
|
this.$forceUpdate();
|
|
}
|
|
});
|
|
},
|
|
//轮播图左右滑动
|
|
swiperChange(e) {
|
|
let {
|
|
current,
|
|
source
|
|
} = e.detail;
|
|
//在自动或手动的时候才赋予current值
|
|
if (source === 'autoplay' || source === 'touch') {
|
|
this.current = current;
|
|
}
|
|
},
|
|
// 复制订单号
|
|
clickCopy() {
|
|
uni.setClipboardData({
|
|
data: this.info.order_id, //要被复制的内容
|
|
success: () => {
|
|
//复制成功的回调函数
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 再次购买：跳转产品详情
|
|
gotoDetail() {
|
|
// 子订单里info.order_child[0].goods_genre：景点ticket、酒店hotel、美食food、邮寄自提pgoods、线路line
|
|
let url = ''
|
|
switch (this.info.order_child[0].goods_genre) {
|
|
case 'ticket':
|
|
url = '/subPackages/ticketBooking/detail?id=' + this.info.order_child[0].scenic_data.id
|
|
break;
|
|
case 'hotel':
|
|
url = '/subPackages/hotelHomestay/detail?id=' + this.info.order_child[0].scenic_data.id
|
|
break;
|
|
case 'food':
|
|
url = '/subPackages/food/foodDetail?id=' + this.info.order_child[0].goods_id
|
|
break;
|
|
case 'pgoods':
|
|
url = '/subPackages/techan/detail?id=' + this.info.order_child[0].goods_id
|
|
break;
|
|
case 'line':
|
|
url = '/subPackages/line/detail?id=' + this.info.order_child[0].goods_id
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
// 申请退款
|
|
refund(id) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否申请退款？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
that.Post({
|
|
order_id: id
|
|
},
|
|
'/api/order/applyRefund'
|
|
).then(res => {
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '申请成功',
|
|
icon: 'success'
|
|
});
|
|
this.getDetail()
|
|
uni.$emit("updateDataByConnect", {
|
|
msgType: 'updateOrderTrades',
|
|
data: {}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 关闭订单
|
|
closeOrder(id, index) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认关闭订单？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
that.Post({
|
|
order_id: id
|
|
}, '/api/order/closeOrder').then(res => {
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '关闭成功',
|
|
icon: 'success'
|
|
});
|
|
that.getDetail();
|
|
uni.$emit("updateDataByConnect", {
|
|
msgType: 'updateOrderTrades',
|
|
data: {}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 立即支付
|
|
setOrderId(id) {
|
|
let that = this;
|
|
that.orderId = id;
|
|
that.Post({
|
|
order_id: id,
|
|
type: "miniprogram",
|
|
platform: 'miniprogram'
|
|
}, '/api/pay/unify').then(res => {
|
|
if (res.code == 1) {
|
|
uni.requestPayment({
|
|
nonceStr: res.data.nonceStr,
|
|
package: res.data.package,
|
|
paySign: res.data.paySign,
|
|
signType: res.data.signType,
|
|
timeStamp: res.data.timeStamp,
|
|
success: () => {
|
|
that.getDetail();
|
|
uni.$emit("updateDataByConnect", {
|
|
msgType: 'updateOrderTrades',
|
|
data: {}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 快递查询
|
|
openMask() {
|
|
this.Post({
|
|
child_order_id: this.info.order_child[0].child_id
|
|
}, '/api/order/getExpress').then(res => {
|
|
if (res.data.length > 0) {
|
|
this.postInfo = res.data.reverse()
|
|
this.maskShow = true
|
|
} else {
|
|
uni.showToast({
|
|
title: '暂未查询到物流信息，请联系客服',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
})
|
|
},
|
|
// 确认收货
|
|
confirmGoods() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否确认收货？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
this.Post({
|
|
order_id: this.info.order_id
|
|
}, '/api/order/confirmPost').then(res => {
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '确认收货成功',
|
|
icon: 'none'
|
|
});
|
|
this.getDetail();
|
|
uni.$emit("updateDataByConnect", {
|
|
msgType: 'updateOrderTrades',
|
|
data: {}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
background-color: #F7F7F7;
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
.title-box {
|
|
position: absolute;
|
|
left: 5rpx;
|
|
top: 101rpx;
|
|
font-size: 40rpx;
|
|
padding: 0 26.67rpx;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
view {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
margin-left: 245rpx;
|
|
}
|
|
}
|
|
|
|
.top-box {
|
|
width: 750rpx;
|
|
height: 414rpx;
|
|
background: linear-gradient(180deg, #E6DED2, #E6DED2, #E6DED2, #E6DED2, #E6DED2, #E6DED2, #F7F7F7);
|
|
padding: 200rpx 0 0 50rpx;
|
|
font-weight: bold;
|
|
font-size: 43rpx;
|
|
color: #000000;
|
|
|
|
.close-time {
|
|
font-weight: 400;
|
|
font-size: 27rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
// 景点、美食 二维码
|
|
.qrcode-remain {
|
|
font-weight: bold;
|
|
font-size: 29rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
|
|
span {
|
|
width: 60rpx;
|
|
text-align: center;
|
|
color: #C3282E;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.qrcode-box {
|
|
height: 456rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 32rpx;
|
|
|
|
.qrcode-item {
|
|
width: 467rpx !important;
|
|
height: 456rpx !important;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 33rpx 0rpx rgba(102, 102, 102, 0.2);
|
|
border-radius: 20rpx;
|
|
padding: 25rpx 0;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.qrcode-title {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.qrcode-subtitle {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #888888;
|
|
}
|
|
|
|
.complete-text {
|
|
position: absolute;
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
background: rgba(0, 0, 0, .5);
|
|
|
|
view {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 100rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-point {
|
|
height: 63rpx;
|
|
|
|
view {
|
|
width: 11rpx;
|
|
height: 11rpx;
|
|
background: #CCCCCC;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
view:not(:first-child) {
|
|
margin-left: 13rpx;
|
|
}
|
|
|
|
.swiper-points {
|
|
background: #248BAA;
|
|
}
|
|
}
|
|
|
|
.swiper-prompt {
|
|
font-weight: 500;
|
|
font-size: 29rpx;
|
|
color: #C3282E;
|
|
text-align: center;
|
|
margin-bottom: 45rpx;
|
|
}
|
|
|
|
// 景点订单详情
|
|
.scenic-detail {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 26rpx;
|
|
margin: auto;
|
|
|
|
&>view:nth-child(2) {
|
|
margin: 30rpx 0;
|
|
border-top: 1rpx solid #D8D8D8;
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
}
|
|
|
|
.scenic-title {
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
|
|
image {
|
|
width: 17.33rpx;
|
|
height: 29.33rpx;
|
|
margin-left: 20rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.scenic-subtitle {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #666666;
|
|
margin-top: 20rpx;
|
|
|
|
span {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.specifications-item {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
margin: 25rpx 0;
|
|
}
|
|
}
|
|
|
|
.novice-box {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 26rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #010101;
|
|
margin: 20rpx auto;
|
|
|
|
.novice-item {
|
|
view {
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.novice-title {
|
|
font-weight: 800;
|
|
font-size: 27rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.novice-subtitle {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 130rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.novice-item:nth-child(n+2) {
|
|
border-top: 1rpx solid #D8D8D8;
|
|
}
|
|
}
|
|
|
|
// 邮寄订单详情
|
|
.shipping-address {
|
|
width: 697rpx;
|
|
height: 235rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 26rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
margin: auto;
|
|
|
|
&>view {
|
|
margin-top: 25rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&>view:first-child {
|
|
font-size: 31rpx;
|
|
color: #222222;
|
|
}
|
|
|
|
&>view:last-child {
|
|
font-size: 31rpx;
|
|
color: #222222;
|
|
font-size: 27rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.pgoods-detail {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 26rpx;
|
|
margin: 20rpx auto;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
|
|
.pgoods-product {
|
|
display: flex;
|
|
margin-top: 24rpx;
|
|
padding-bottom: 33rpx;
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
|
|
.product-img {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 13rpx;
|
|
}
|
|
|
|
.product-content {
|
|
width: 485rpx;
|
|
height: 140rpx;
|
|
margin-left: 18rpx;
|
|
padding: 5rpx 0 12rpx;
|
|
justify-content: space-between;
|
|
|
|
.product-title {
|
|
font-weight: bold;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.product-subtitle {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
|
|
.product-tags {
|
|
display: flex;
|
|
|
|
&>view:not(:last-child)::after {
|
|
content: '丨';
|
|
width: 1rpx;
|
|
height: 26rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 自提点信息
|
|
.pickup-box {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx auto;
|
|
padding: 33rpx 26rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
|
|
&>view {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.picker-img {
|
|
width: 33.33rpx;
|
|
height: 33.33rpx;
|
|
}
|
|
|
|
.pickup-user {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
|
|
&>view:first-of-type {
|
|
margin: 0 63rpx 0 19rpx;
|
|
}
|
|
}
|
|
|
|
.pickup-address {
|
|
display: flex;
|
|
|
|
.pickup-addressImg {
|
|
width: 33.33rpx;
|
|
height: 33.33rpx;
|
|
}
|
|
|
|
&>view:first-of-type {
|
|
width: 305rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
|
|
.picker-shopName {
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #222222;
|
|
}
|
|
|
|
.picker-shopAddress {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.pickup-icon {
|
|
margin-left: auto;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
|
|
&>view {
|
|
text-align: center;
|
|
}
|
|
|
|
&>view:last-child {
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
image {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
display: block;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 美食
|
|
.food-name {
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.shop-detail {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx auto 0;
|
|
padding: 33rpx 26rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
|
|
.shop-name {
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.shop-info {
|
|
.shop-time {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin: 5rpx 8rpx 0 0;
|
|
}
|
|
|
|
.shop-title {
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.shop-subtitle {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-top: 23rpx;
|
|
}
|
|
|
|
.shop-icon {
|
|
margin-left: auto;
|
|
|
|
image {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
|
|
image:first-child {
|
|
margin-right: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 酒店
|
|
.hotel-detail {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 33rpx 26rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
margin: auto;
|
|
|
|
.hotel-title {
|
|
font-size: 31rpx;
|
|
color: #222222;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.hotel-date {
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
margin-top: 30rpx;
|
|
|
|
span {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.hotel-days {
|
|
width: 113rpx;
|
|
line-height: 37rpx;
|
|
background: #E8F6EB;
|
|
border-radius: 18rpx;
|
|
text-align: center;
|
|
margin: 0 20rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.hotel-address {
|
|
width: 533rpx;
|
|
height: 107rpx;
|
|
background: url('https://static.ticket.sz-trip.com/yandu/images/order/addreeBg.png') no-repeat right;
|
|
background-size: auto 100%;
|
|
background-color: #E8F6EB;
|
|
border-radius: 20rpx;
|
|
padding: 22rpx 18rpx;
|
|
|
|
.address {
|
|
width: 398rpx;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.address-image {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 30.67rpx;
|
|
height: 30.67rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hotel-phone {
|
|
width: 93rpx;
|
|
height: 107rpx;
|
|
background: #E8F6EB;
|
|
border-radius: 20rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
flex-direction: column;
|
|
|
|
image {
|
|
width: 30.67rpx;
|
|
height: 30.67rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
}
|
|
|
|
.hotel-skuName {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
height: 94rpx;
|
|
border-top: 1rpx solid #D8D8D8;
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
margin-top: 34rpx;
|
|
|
|
&>view:first-child {
|
|
width: 400rpx;
|
|
}
|
|
|
|
&>view:last-child {
|
|
width: 140rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hotel-information {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 26rpx;
|
|
margin: 20rpx auto;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
|
|
view {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 140rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
// 商品价格
|
|
.public-price {
|
|
|
|
view {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #666666;
|
|
margin-top: 25rpx;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
font-size: 27rpx;
|
|
color: #111111;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 订单信息
|
|
.order-info {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx auto;
|
|
padding: 33rpx 26rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
|
|
.order-subtitle {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000;
|
|
margin: 30rpx 0;
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 130rpx;
|
|
color: #666666;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.copy {
|
|
width: 93rpx;
|
|
height: 37rpx;
|
|
border-radius: 11rpx;
|
|
border: 1rpx solid #515150;
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #515150;
|
|
margin-left: 30rpx;
|
|
|
|
.copy-img {
|
|
width: 22rpx;
|
|
height: 23.33rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 客服
|
|
.kefu-box {
|
|
width: 697rpx;
|
|
height: 96rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
padding-left: 27rpx;
|
|
|
|
.kefu-img {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
|
|
// 底部按钮
|
|
footer {
|
|
width: 750rpx;
|
|
height: 167rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-top: 10rpx solid #F7F7F7;
|
|
padding: 0 26rpx;
|
|
|
|
.bottom-price {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #C3282E;
|
|
}
|
|
|
|
span::before {
|
|
content: '￥';
|
|
font-size: 27rpx;
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
margin-left: auto;
|
|
display: flex;
|
|
|
|
.btn {
|
|
width: 213rpx;
|
|
line-height: 71rpx;
|
|
border-radius: 37rpx;
|
|
border: 1rpx solid #999999;
|
|
text-align: center;
|
|
margin-right: 14rpx;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.btn:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.pay-btn {
|
|
height: 73rpx;
|
|
background: #C3282E;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 快递查询
|
|
.mask {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mask-bg {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.mask-content {
|
|
width: 100%;
|
|
padding: 28rpx 0;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
background: white;
|
|
height: 70%;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mask-content .icon-close {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 20rpx;
|
|
}
|
|
|
|
.mask-content .close-btn {
|
|
background-image: url("https://static.ticket.sz-trip.com/taizhou/images/close.png");
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
bottom: -100rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.mask-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
padding-left: 37rpx;
|
|
}
|
|
|
|
.mask-content .iconfont {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 20rpx;
|
|
}
|
|
|
|
.express-all {
|
|
margin: 40rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.express-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 60rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.line {
|
|
width: 1rpx;
|
|
height: 100%;
|
|
background: #CCCCCC;
|
|
position: absolute;
|
|
left: 13rpx;
|
|
}
|
|
|
|
.express-info {
|
|
width: 600rpx;
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.express-info.active {
|
|
color: #000;
|
|
}
|
|
|
|
.express-time {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.express-item-icon {
|
|
width: 27rpx;
|
|
height: 27rpx;
|
|
background: #CCCCCC;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.express-item-icons {
|
|
background: #248BAA;
|
|
}
|
|
|
|
.consult-popup {
|
|
width: 487rpx;
|
|
height: 367rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 20rpx;
|
|
padding: 65rpx 0 23rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
|
|
.consult-subtitle {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #333333;
|
|
margin-top: 43rpx;
|
|
}
|
|
|
|
.consult-btns {
|
|
display: flex;
|
|
margin-top: 75rpx;
|
|
|
|
view {
|
|
width: 50%;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
line-height: 54rpx;
|
|
}
|
|
|
|
view:first-child {
|
|
border-right: 1rpx solid #D8D8D8;
|
|
}
|
|
}
|
|
}
|
|
</style>
|