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.
1323 lines
33 KiB
1323 lines
33 KiB
<template>
|
|
<view class="bg">
|
|
<view class="title-box">
|
|
<uni-icons type="left" size="30" @click="goBack"></uni-icons>
|
|
<view>订单状态</view>
|
|
</view>
|
|
|
|
<view class="state-box">
|
|
<view>{{info.state_text}}</view>
|
|
|
|
<!-- 待支付时会显示自动取消时间 -->
|
|
<view v-if="info.state=='UNPAID'" class="close-time">
|
|
订单将在<span>{{info.close_time.slice(-8)}}</span>自动取消</view>
|
|
|
|
<!-- 待退款 -->
|
|
<view v-if="info.state=='REFUNDING' || info.state=='WAIT_REFUND'" class="close-time">系统将在1-7个工作日内原路退回您的原支付账户</view>
|
|
|
|
<!-- 退款完成 -->
|
|
<view v-if="info.state=='REFUND'" class="close-time">您的退款金额已退还到您的原支付账户</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<!-- 循环子订单 -->
|
|
<view v-for="(item,index) in orderChildList" :key="index">
|
|
<!-- 核销码 景点、自提 -->
|
|
<view class="" v-if="item.isQrcode && item.qrcode.length > 0 && item.product_model != 'line'">
|
|
<view class="qrcode-remain">
|
|
还剩<span>{{item.remainNum}}</span>张未核销
|
|
</view>
|
|
|
|
<swiper class="qrcode-box" :circular="false" previous-margin="100rpx" next-margin="100rpx"
|
|
:duration="800" :current="item.current" @change="swiperChange($event,item)">
|
|
<swiper-item v-for="(qrItem, qrIndex) in item.qrcode" :key="qrIndex" class="flex-center">
|
|
<view class="qrcode-item flex-column">
|
|
<view class="qrcode-title">{{item.sku_name}}</view>
|
|
<image :src="qrItem.qrcodeimg" style="width: 300rpx;height: 300rpx;" mode="aspectFill">
|
|
</image>
|
|
<canvas :id="'qrcodeT'+qrItem.use_code+qrIndex"
|
|
:canvas-id="'qrcodeT'+qrItem.use_code+qrIndex"
|
|
style="width:150px;height:150px;z-index: -20;bottom: -500px;position: absolute;"></canvas>
|
|
<view class="qrcode-subtitle">
|
|
核销码:{{qrItem.use_code}}</view>
|
|
|
|
<view class="complete-text flex-center" v-if="qrItem.state > 0">
|
|
<view class="flex-center" v-if="qrItem.state == 1">
|
|
已核销
|
|
</view>
|
|
<view class="flex-center" v-else>
|
|
已失效
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 指示点 -->
|
|
<view class="swiper-point flex-center">
|
|
<view v-for="(qrItem,qrIndex) in item.qrcode" :key="qrIndex"
|
|
:class="[{'swiper-points': qrIndex == item.current}]"></view>
|
|
</view>
|
|
|
|
<!-- 提示语 -->
|
|
<view class="swiper-prompt">左右滑动核销其他二维码</view>
|
|
</view>
|
|
|
|
<!-- 景点商品详情 -->
|
|
<view class="product-box" v-if="item.product_model == 'ticket'">
|
|
<view class="title" @click="item.type=item.product_model;gotoDetailByType(item)">
|
|
{{item.product_title}}
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/rightIcon.png"
|
|
class="rightIcon"></image>
|
|
</view>
|
|
<view class="subtitle" v-if="item.use_date && item.is_package != 1"><span>出行时间：</span>{{item.use_date}}</view>
|
|
<view class="subtitle" v-if="item.scene_detail.open_time">
|
|
<span>开放时间：</span>{{item.scene_detail.open_time}}
|
|
</view>
|
|
<view class="lines"></view>
|
|
<view class="skutitle flex-between">
|
|
<view>{{item.sku_name}}</view>
|
|
<view>
|
|
<span>￥{{item.product_price / 100}}</span>
|
|
x{{item.product_num}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="childStatus">{{item.state_text}}</view>
|
|
|
|
<!-- 景点出行人 -->
|
|
<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'ticket' && item.phone">
|
|
<view class="title">出行人</view>
|
|
<view class="subtitle">
|
|
<span>手机号：</span>{{item.phone}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
|
|
<view class="com-comment-btn">去评价</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 邮寄、自提商品详情 -->
|
|
<view class="product-box" v-if="item.product_model == 'post'">
|
|
<view class="good-box">
|
|
<image :src="item.product_img" mode="aspectFill"
|
|
@click="item.type=item.product_model;gotoDetailByType(item)"></image>
|
|
<view class="flex-column">
|
|
<span class="good-title text-overflowRows">{{item.product_title}}</span>
|
|
<span class="good-subtitle">{{item.sku_name}}</span>
|
|
</view>
|
|
<view class="flex-column">
|
|
<span class="good-title">￥{{item.product_price / 100}}</span>
|
|
<span class="good-subtitle">x{{item.product_num}}</span>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="childStatus">{{item.state_text}}</view>
|
|
|
|
<!-- 收货地址 -->
|
|
<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'post' && !Array.isArray(item.consignee_info)">
|
|
<view class="title">收货信息</view>
|
|
<view class="subtitle" style="font-weight: bold;font-size: 31rpx;">{{item.consignee_info.name}}
|
|
{{item.consignee_info.tel}}
|
|
</view>
|
|
<view class="subtitle"><span>{{item.consignee_info.address}}</span></view>
|
|
|
|
<view class="mask-btn" @click="openMask(item)" v-if="item.state == 'WAIT_DELIVERY'">快递查询</view>
|
|
</view>
|
|
|
|
<!-- 自提信息 -->
|
|
<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'post' && item.pickup_shop_id > 0">
|
|
<view class="title">自提信息</view>
|
|
<view class="pick-box flex-between">
|
|
<view class="pick-title">
|
|
<view style="display: flex;align-items: center;">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/location.png"
|
|
mode=""></image>
|
|
{{item.pickup_shop_info.title}}
|
|
</view>
|
|
<view class="pick-subtitle" style="padding: 20rpx 0 0 50rpx;">
|
|
{{item.pickup_shop_info.address}}
|
|
</view>
|
|
</view>
|
|
<view class="pick-subtitle flex-center">
|
|
<view v-if="item.pickup_shop_info.tel" @click="clickPhone(item.pickup_shop_info.tel)">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/phone.png"
|
|
mode=""></image>
|
|
电话
|
|
</view>
|
|
<view style="margin-left: 35rpx;"
|
|
v-if="item.pickup_shop_info.lon && item.pickup_shop_info.lat"
|
|
@click="openLocation(item.pickup_shop_info.lat,item.pickup_shop_info.lon)">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/navigation.png"
|
|
mode=""></image>
|
|
导航
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
|
|
<view class="com-comment-btn">去评价</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 酒店信息 -->
|
|
<view class="product-box" v-if="item.product_model == 'hotel'">
|
|
<view class="title">入住信息</view>
|
|
<view class="hotel-title">
|
|
{{item.product_title}}
|
|
</view>
|
|
<view class="order-time flex-between" style="padding-right: 30rpx;">
|
|
<view class="time">
|
|
<view style="font-size: 35rpx;font-weight: bold;">
|
|
{{new Date(item.order_product_extend.start_date).Format('MM-dd')}}
|
|
</view>
|
|
<view style="padding:0 14rpx">
|
|
{{ ShowDateDay(new Date(item.order_product_extend.start_date).getDay()) }}
|
|
</view>
|
|
<view style="color: #999999;">入住</view>
|
|
</view>
|
|
<view class="cal-day">
|
|
共{{calDate(item.order_product_extend.start_date,item.order_product_extend.end_date)}}晚
|
|
</view>
|
|
<view class="time">
|
|
<view style="font-size: 35rpx;font-weight: bold;">
|
|
{{new Date(item.order_product_extend.end_date).Format('MM-dd')}}
|
|
</view>
|
|
<view style="padding:0 14rpx">
|
|
{{ShowDateDay(new Date(item.order_product_extend.end_date).getDay()) }}
|
|
</view>
|
|
<view style="color: #999999;">离店</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex-between">
|
|
<view class="address-container flex flex-shrink-0 flex-between" @click="goMap(item)">
|
|
<view class="address-title text-overflowRows">
|
|
{{item.scene_detail.address}}
|
|
</view>
|
|
<view class="flex-column flex-center">
|
|
<image
|
|
src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/location.png">
|
|
<view class="tip" style="padding-top: 11rpx;">地图</view>
|
|
</view>
|
|
</view>
|
|
<view class="phone-container flex-column flex-center" @click="callPhone(item.scene_detail.tel)">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/phone.png">
|
|
<view class="tip" style="padding-top: 11rpx;">电话</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="skutitle flex-between"
|
|
style="padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;margin-top: 30rpx;">
|
|
<view>{{item.sku_name}}</view>
|
|
<view>
|
|
<span>￥{{item.product_price / 100}}</span>
|
|
x{{item.product_num}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="childStatus">{{item.state_text}}</view>
|
|
|
|
<!-- 酒店预订信息 -->
|
|
<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'hotel'">
|
|
<view class="title">预订信息</view>
|
|
<view class="subtitle">
|
|
<span>房间数：</span>{{item.product_num}}
|
|
</view>
|
|
<view class="subtitle">
|
|
<span>入住姓名：</span>{{item.order_product_extend.customer_name}}
|
|
</view>
|
|
<view class="subtitle">
|
|
<span>联系电话：</span>{{item.order_product_extend.reserve_mobile}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
|
|
<view class="com-comment-btn">去评价</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 线路下单 -->
|
|
<view v-if="info.order_product_list && info.order_product_list[0].product_model == 'line'">
|
|
<view class="" v-if="lineQrcodeList && lineQrcodeList.length > 0">
|
|
<view class="qrcode-remain">
|
|
还剩<span>{{lineNum}}</span>张未核销
|
|
</view>
|
|
|
|
<swiper class="qrcode-box" :circular="false" previous-margin="100rpx" next-margin="100rpx"
|
|
:duration="800" :current="current" @change="swiperChanges">
|
|
<swiper-item v-for="(qrItem, qrIndex) in lineQrcodeList" :key="qrIndex" class="flex-center">
|
|
<view class="qrcode-item flex-column">
|
|
<view class="qrcode-title">{{qrItem.sku_name}}</view>
|
|
<image :src="qrItem.qrcodeimg" style="width: 300rpx;height: 300rpx;" mode="aspectFill">
|
|
</image>
|
|
<canvas :id="'qrcodeT'+qrItem.use_code+qrIndex"
|
|
:canvas-id="'qrcodeT'+qrItem.use_code+qrIndex"
|
|
style="width:150px;height:150px;z-index: -20;bottom: -500px;position: absolute;"></canvas>
|
|
<view class="qrcode-subtitle">
|
|
核销码:{{qrItem.use_code}}</view>
|
|
|
|
<view class="complete-text flex-center" v-if="qrItem.state > 0">
|
|
<view class="flex-center" v-if="qrItem.state == 1">
|
|
已核销
|
|
</view>
|
|
<view class="flex-center" v-else>
|
|
已失效
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 指示点 -->
|
|
<view class="swiper-point flex-center">
|
|
<view v-for="(qrItem,qrIndex) in item.qrcode" :key="qrIndex"
|
|
:class="[{'swiper-points': qrIndex == item.current}]"></view>
|
|
</view>
|
|
|
|
<!-- 提示语 -->
|
|
<view class="swiper-prompt">左右滑动核销其他二维码</view>
|
|
</view>
|
|
<!-- 线路下单多个规格、多个子订单 -->
|
|
<view>
|
|
<view class="product-box">
|
|
<view class="title" @click="info.order_product_list[0].type=info.order_product_list[0].product_model;gotoDetailByType(info.order_product_list[0])">
|
|
{{info.order_product_list[0].product_title}}
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/rightIcon.png"
|
|
class="rightIcon"></image>
|
|
</view>
|
|
<view class="subtitle" v-if="info.order_product_list[0].use_date">
|
|
<span>出行时间：</span>{{info.order_product_list[0].use_date}}
|
|
</view>
|
|
|
|
<!-- 规格信息 -->
|
|
<view style="margin-top: 30rpx;border-top: 1rpx solid #D8D8D8;">
|
|
<view class="skutitle flex-between" v-for="(item,index) in info.order_product_list" :key="index" style="margin-top: 20rpx;">
|
|
<view>{{item.sku_name}}</view>
|
|
<view>
|
|
<span>￥{{item.product_price / 100}}</span>
|
|
x{{item.product_num}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 线路出行人信息 -->
|
|
<view class="product-box">
|
|
<view class="title">出行人</view>
|
|
<view v-for="(item,index) in info.order_product_list" :key="index" style="margin-top: 25rpx;padding-top: 25rpx;border-top: 1rpx solid #D8D8D8;">
|
|
出行人{{index + 1}}
|
|
<view class="subtitle">
|
|
<span>姓名：</span>{{item.contacts_info[0].name}}
|
|
</view>
|
|
<view class="subtitle">
|
|
<span>{{item.contacts_info[0].title}}：</span>{{item.contacts_info[0].id_number}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
|
|
<view class="com-comment-btn">去评价</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="product-box">
|
|
<view class="subtitle flex-between">
|
|
<span>商品总额：</span>￥{{info.total_money / 100}}
|
|
</view>
|
|
<view class="subtitle flex-between" v-if="info.total_post_fee">
|
|
<span>邮费：</span>￥{{info.total_post_fee / 100}}
|
|
</view>
|
|
<view class="subtitle flex-between">
|
|
<span>优惠券：</span>-￥{{info.preference_money / 100}}
|
|
</view>
|
|
<view class="subtitle flex-between">
|
|
<span>实付金额：</span>
|
|
<view class="price">{{info.paid_money / 100}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="product-box">
|
|
<view class="title">订单信息</view>
|
|
<view class="subtitle" style="display: flex;">
|
|
<span>订单账号：</span>{{info.order_id}}
|
|
<view class="copy flex-around" @click="clickCopy">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/copy.png"></image>
|
|
复制
|
|
</view>
|
|
</view>
|
|
<view class="subtitle">
|
|
<span>下单时间：</span>{{info.close_time}}
|
|
</view>
|
|
</view>
|
|
|
|
<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
|
|
<view class="kefu-box">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/kefu.png"></image>
|
|
联系客服
|
|
</view>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<footer>
|
|
<view class="bottom-price" v-if="info.state == 'UNPAID'">
|
|
合计：
|
|
<span class="price">{{info.paid_money/100}}</span>
|
|
</view>
|
|
<view class="btn-box">
|
|
<view class="btn" v-if="['WAIT_POST','WAIT_USE','PAID'].includes(info.state)" @click="refund()">
|
|
取消订单
|
|
</view>
|
|
|
|
<view class="btn" v-if="info.state === 'UNPAID'" @click="closeOrder()">
|
|
关闭订单
|
|
</view>
|
|
|
|
<view class="btn pay-btn" v-if="info.state === 'UNPAID'" @click="setOrderId()">
|
|
立即支付
|
|
</view>
|
|
|
|
<view class="btn" v-if="info.state=='WAIT_COMMENT'&& info&&info.order_product_list.length==1"
|
|
@click="goComment(info.order_product_list[0])">
|
|
去评价
|
|
</view>
|
|
|
|
<!-- <view class="btn" v-if="info.state == 'POST' && info.order_child[0].goods_genre == 'pgoods'"
|
|
@click="openMask()">
|
|
快递查询
|
|
</view>
|
|
|
|
<view class="btn" v-if="info.state == '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.context}}</p>
|
|
<p class="express-time">{{item.time}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QRCode from '@/static/js/weapp-qrcode.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderId: '',
|
|
info: {},
|
|
orderChildList: [],
|
|
lineQrcodeList: [],
|
|
lineNum: 0,
|
|
current: 0,
|
|
maskShow: false,
|
|
postInfo: {},
|
|
showReload: false,
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.orderId = option.id
|
|
this.getDetail()
|
|
},
|
|
onShow () {
|
|
if (this.showReload) {
|
|
this.getDetail()
|
|
this.showReload = false;
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取订单详情
|
|
async getDetail() {
|
|
try {
|
|
const res = await this.Post({
|
|
order_id: this.orderId
|
|
}, '/api/order/query');
|
|
this.info = res.data;
|
|
this.orderChildList = res.data.order_product_list;
|
|
this.processOrderData(this.orderChildList);
|
|
} catch (error) {
|
|
console.error('获取订单详情失败:', error);
|
|
}
|
|
},
|
|
// 处理订单数据
|
|
processOrderData(orderList) {
|
|
orderList.forEach(item => {
|
|
// 处理收货地址
|
|
if (item.product_model === 'post' && item.consignee_info) {
|
|
item.consignee_info = JSON.parse(item.consignee_info);
|
|
}
|
|
// 处理自提信息
|
|
if (item.product_model === 'post' && item.pickup_shop_id > 0) {
|
|
item.pickup_shop_info = JSON.parse(item.pickup_shop_info);
|
|
}
|
|
// 处理线路出行人信息
|
|
if (item.product_model === 'line' && item.contacts_info) {
|
|
item.contacts_info = JSON.parse(item.contacts_info);
|
|
}
|
|
// 处理线路核销码
|
|
if (item.product_model === 'line') {
|
|
item.qrcode.forEach(qrItem => {
|
|
qrItem.sku_name = item.sku_name;
|
|
});
|
|
|
|
this.lineQrcodeList = [...this.lineQrcodeList, ...item.qrcode];
|
|
let lineNum = 0;
|
|
if (this.lineQrcodeList.length > 0) {
|
|
this.lineQrcodeList.forEach((qrItem, index) => {
|
|
if (qrItem.state === 0) {
|
|
lineNum += 1;
|
|
}
|
|
this.getCodeImg(qrItem, index);
|
|
});
|
|
this.lineNum = lineNum;
|
|
}
|
|
}
|
|
// 判断是否展示核销码
|
|
if (['ticket', 'post'].includes(item.product_model)) {
|
|
item.isQrcode = true;
|
|
if (item.product_model === 'post' && !item.pickup_shop_id) {
|
|
item.isQrcode = false;
|
|
}
|
|
// 未核销数量
|
|
item.remainNum = 0;
|
|
// 轮播图滚动index
|
|
item.current = 0;
|
|
// 生成二维码
|
|
item.qrcode.forEach((qrItem, qrIndex) => {
|
|
if (qrItem.state === 0) {
|
|
item.remainNum += 1;
|
|
}
|
|
this.getCodeImg(qrItem, qrIndex);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 生成二维码
|
|
getCodeImg(item, index) {
|
|
new QRCode('qrcodeT' + item.use_code + index, {
|
|
text: item.use_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(item, 'qrcodeimg', res.path);
|
|
this.$forceUpdate();
|
|
}
|
|
});
|
|
},
|
|
//轮播图左右滑动
|
|
swiperChange(e, item) {
|
|
let {
|
|
current,
|
|
source
|
|
} = e.detail;
|
|
//在自动或手动的时候才赋予current值
|
|
if (source === 'autoplay' || source === 'touch') {
|
|
item.current = current;
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
//线路轮播图左右滑动
|
|
swiperChanges(e) {
|
|
let {
|
|
current,
|
|
source
|
|
} = e.detail;
|
|
//在自动或手动的时候才赋予current值
|
|
if (source === 'autoplay' || source === 'touch') {
|
|
this.current = current;
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
// 复制订单号
|
|
clickCopy() {
|
|
uni.setClipboardData({
|
|
data: this.info.order_id, //要被复制的内容
|
|
success: () => {
|
|
//复制成功的回调函数
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
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;
|
|
},
|
|
callPhone(tel) {
|
|
let _this = this
|
|
uni.showActionSheet({
|
|
itemList: [tel, '呼叫'],
|
|
success: function(res) {
|
|
_this.clickPhone(tel)
|
|
}
|
|
});
|
|
},
|
|
goMap(item) {
|
|
if (!item.scene_detail.lon && !item.scene_detail.lat) {
|
|
uni.showToast({
|
|
title: '暂未配置地理位置',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
debugger
|
|
uni.openLocation({
|
|
latitude: Number(item.scene_detail.lat),
|
|
longitude: Number(item.scene_detail.lon),
|
|
name: item.scene_detail.title,
|
|
address: item.scene_detail.address,
|
|
success: function() {
|
|
console.log('success');
|
|
}
|
|
});
|
|
},
|
|
// 申请退款
|
|
refund() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否申请退款？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
this.Post({ order_id: this.info.order_id }, '/api/order/refund')
|
|
.then(res => {
|
|
if (res.code === 1) {
|
|
uni.showToast({ title: '申请成功', icon: 'success' });
|
|
this.getDetail();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 关闭订单
|
|
closeOrder(id, index) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否关闭订单？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
this.Post({ order_id: this.info.order_id }, '/api/order/close')
|
|
.then(res => {
|
|
if (res.code === 1) {
|
|
uni.showToast({ title: '关闭成功', icon: 'success' });
|
|
this.getDetail();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 支付
|
|
setOrderId(id) {
|
|
this.Post({
|
|
order_id: this.info.order_id,
|
|
pay_platform: "MINI",
|
|
pay_method: 'WEIXIN',
|
|
}, '/api/order/pay')
|
|
.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: () => {
|
|
this.getDetail();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 快递查询
|
|
openMask(item) {
|
|
this.Post({
|
|
child_order_id: item.child_order_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'
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
// 去评价
|
|
goComment (item) {
|
|
if (item) {
|
|
uni.setStorageSync("commentProd", item)
|
|
uni.navigateTo({
|
|
url:`/subPackages/user/comment`
|
|
})
|
|
this.showReload = true
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
background-color: #F7F7F7;
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
.title-box {
|
|
font-size: 40rpx;
|
|
padding: 0 26.67rpx;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
background: #D3E8A7;
|
|
height: 176rpx;
|
|
padding: 90rpx 26rpx 0;
|
|
|
|
view {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
margin-left: 230rpx;
|
|
}
|
|
}
|
|
|
|
.state-box {
|
|
width: 750rpx;
|
|
height: 240rpx;
|
|
background: linear-gradient(180deg, #D3E8A7, #D3E8A7, #D3E8A7, #F7F7F7);
|
|
padding: 42rpx 0 0 53rpx;
|
|
font-weight: bold;
|
|
font-size: 43rpx;
|
|
color: #000000;
|
|
|
|
.close-time {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
margin-top: 10rpx;
|
|
|
|
span {
|
|
color: #C3282E;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
padding: 0 26rpx;
|
|
margin-top: -66rpx;
|
|
|
|
.product-box {
|
|
padding: 28rpx 28rpx 46rpx;
|
|
margin-bottom: 22rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.rightIcon {
|
|
width: 17.33rpx;
|
|
height: 29.33rpx;
|
|
margin-left: 25rpx;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
margin-top: 18rpx;
|
|
|
|
span {
|
|
color: #666666;
|
|
min-width: 125rpx;
|
|
}
|
|
}
|
|
|
|
.mask-btn {
|
|
width: fit-content;
|
|
line-height: 53rpx;
|
|
background: #F8F9FA;
|
|
border-radius: 11rpx;
|
|
border: 1px solid #999999;
|
|
padding: 0 15rpx;
|
|
margin: 10rpx 0 0 auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lines {
|
|
width: 643rpx;
|
|
height: 1rpx;
|
|
background: #D8D8D8;
|
|
margin: 33rpx 0;
|
|
}
|
|
|
|
.skutitle {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
|
|
span {
|
|
margin-right: 60rpx;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
color: #C3282E;
|
|
}
|
|
|
|
.price::before {
|
|
font-size: 24rpx;
|
|
content: '￥';
|
|
}
|
|
|
|
.copy {
|
|
width: 93rpx;
|
|
height: 37rpx;
|
|
border-radius: 11rpx;
|
|
border: 1rpx solid #515150;
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #515150;
|
|
margin-left: 30rpx;
|
|
|
|
image {
|
|
width: 22rpx;
|
|
height: 23.33rpx;
|
|
}
|
|
}
|
|
|
|
.pick-box {
|
|
margin-top: 50rpx;
|
|
|
|
.pick-title {
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #222222;
|
|
width: 500rpx;
|
|
|
|
image {
|
|
width: 33.33rpx;
|
|
height: 33.33rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
}
|
|
|
|
.pick-subtitle {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
|
|
image {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-bottom: 10rpx;
|
|
display: block;
|
|
}
|
|
|
|
&>view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hotel-title {
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
color: #222222;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.order-time {
|
|
height: 107rpx;
|
|
|
|
.time {
|
|
display: flex;
|
|
font-family: PingFang SC;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.cal-day {
|
|
background: #F2F2F2;
|
|
border-radius: 17rpx;
|
|
padding: 5rpx 16rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.address-container {
|
|
width: 525rpx;
|
|
height: 107rpx;
|
|
border-radius: 20rpx;
|
|
padding: 25rpx 20rpx 25rpx 33rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
background-color: #F2F2F2;
|
|
background-image: url('https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/mapBg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.tip {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.address-title {
|
|
width: 400rpx;
|
|
}
|
|
}
|
|
|
|
.phone-container {
|
|
width: 93rpx;
|
|
height: 107rpx;
|
|
background: #F2F2F2;
|
|
border-radius: 20rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.tip {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.kefu-box {
|
|
height: 96rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding-left: 27rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
|
|
.good-box {
|
|
display: flex;
|
|
|
|
image {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 13rpx;
|
|
}
|
|
|
|
&>view {
|
|
height: 140rpx;
|
|
justify-content: space-between;
|
|
padding-bottom: 14rpx;
|
|
margin-left: 18rpx;
|
|
width: 371rpx;
|
|
}
|
|
|
|
&>view:last-child {
|
|
margin-left: auto;
|
|
width: fit-content;
|
|
text-align: right;
|
|
}
|
|
|
|
.good-title {
|
|
font-weight: bold;
|
|
font-size: 27rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.good-subtitle {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
}
|
|
|
|
button::after {
|
|
border: none;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 二维码
|
|
.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: #D3E8A7;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
view:not(:first-child) {
|
|
margin-left: 13rpx;
|
|
}
|
|
|
|
.swiper-points {
|
|
background: #6A8A2D;
|
|
}
|
|
}
|
|
|
|
.swiper-prompt {
|
|
font-weight: 500;
|
|
font-size: 29rpx;
|
|
color: #C3282E;
|
|
text-align: center;
|
|
margin-bottom: 45rpx;
|
|
}
|
|
|
|
// 底部按钮
|
|
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: 24rpx;
|
|
color: #000000;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #DC2525;
|
|
}
|
|
|
|
span::before {
|
|
content: '￥';
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
margin-left: auto;
|
|
display: flex;
|
|
|
|
.btn {
|
|
width: 213rpx;
|
|
line-height: 71rpx;
|
|
background: #F8F9FA;
|
|
border-radius: 11rpx;
|
|
border: 1rpx solid #999999;
|
|
text-align: center;
|
|
margin-right: 14rpx;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #111111;
|
|
}
|
|
|
|
.btn:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.pay-btn {
|
|
height: 73rpx;
|
|
background: #6A8A2D;
|
|
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: #D3E8A7;
|
|
}
|
|
|
|
.childStatus {
|
|
text-align: right;
|
|
font-size: 27rpx;
|
|
color: #6A8A27;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.com-comment-box{
|
|
border-top: 1px solid #D8D8D8;
|
|
margin-top: 30rpx;
|
|
padding-top: 30rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.com-comment-btn{
|
|
width: 173rpx;
|
|
height: 60rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 11rpx;
|
|
border: 1px solid #999999;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #111111;
|
|
|
|
}
|
|
</style>
|