jiazhipeng
4 months ago
13 changed files with 1488 additions and 714 deletions
@ -0,0 +1,671 @@ |
|||
<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=='WAIT_PAYMENT'" class="close-time"> |
|||
订单将在<span>{{info.close_time.slice(-8)}}</span>自动取消</view> |
|||
|
|||
<!-- 待退款 --> |
|||
<view v-if="info.state=='REFUNDING'" 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"> |
|||
<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 == '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> |
|||
|
|||
<!-- 景点商品详情 --> |
|||
<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"><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="line"></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> |
|||
|
|||
<!-- 自提信息 --> |
|||
<view class="product-box" 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="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> |
|||
|
|||
<!-- 酒店信息 --> |
|||
<view class="product-box" v-if="item.product_model == 'hotel'"> |
|||
<view class="title">入住信息</view> |
|||
<view class="hotel-title"> |
|||
{{item.product_title}} |
|||
</view> |
|||
</view> |
|||
<!-- <view class="product-box" v-if="item.product_model == 'hotel'"> |
|||
<view class="title">{{入住信息}}</view> |
|||
<view class="good-title"> |
|||
{{item.product_title}} |
|||
</view> |
|||
|
|||
<view class="order-time flex-between" style="justify-content: space-around;"> |
|||
<view class="time"> |
|||
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.startDay).Format('MM-dd')}}</view> |
|||
<view style="padding:0 14rpx">{{ ShowDateDay(new Date(selectDate.startDay).getDay()) }}</view> |
|||
<view style="color: #999999;">入住</view> |
|||
</view> |
|||
<view class="cal-day"> |
|||
共{{selectDate.differDays}}晚 |
|||
</view> |
|||
<view class="time"> |
|||
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.endDay).Format('MM-dd')}}</view> |
|||
<view style="padding:0 14rpx">{{ShowDateDay(new Date(selectDate.endDay).getDay()) }}</view> |
|||
<view style="color: #999999;">离店</view> |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- 景点出行人 --> |
|||
<view class="product-box" v-if="item.product_model == 'ticket' && item.phone"> |
|||
<view class="title">出行人</view> |
|||
<view class="subtitle"> |
|||
<span>手机号：</span>{{item.phone}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="product-box"> |
|||
<view class="subtitle flex-between"> |
|||
<span>商品总额：</span>￥{{info.total_money / 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> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import QRCode from '@/static/js/weapp-qrcode.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
orderId: '', |
|||
info: {}, |
|||
orderChildList: [], |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.orderId = option.id |
|||
this.getDetail() |
|||
}, |
|||
methods: { |
|||
getDetail() { |
|||
this.Post({ |
|||
order_id: this.orderId |
|||
}, '/api/order/query').then(res => { |
|||
console.log(res.data) |
|||
this.info = res.data |
|||
this.orderChildList = res.data.order_product_list |
|||
// 景点ticket、线路line、自提需展示二维码 |
|||
this.info.order_product_list.forEach(item => { |
|||
// 收货地址 |
|||
if(item.product_model == 'post' && item.consignee_info) item.consignee_info = JSON.parse(item.consignee_info) |
|||
console.log(item.consignee_info) |
|||
// 自提信息 |
|||
if(item.product_model == 'post' && item.pickup_shop_id > 0) item.pickup_shop_info = JSON.parse(item.pickup_shop_info) |
|||
|
|||
// 判断是否展示核销码 |
|||
if (['ticket', 'line', '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() |
|||
}, |
|||
// 复制订单号 |
|||
clickCopy() { |
|||
uni.setClipboardData({ |
|||
data: this.info.order_id, //要被复制的内容 |
|||
success: () => { |
|||
//复制成功的回调函数 |
|||
uni.showToast({ |
|||
title: '复制成功', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</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; |
|||
|
|||
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; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
width: 643rpx; |
|||
height: 1rpx; |
|||
background: #d8d8d83b; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.order-time{ |
|||
height: 107rpx; |
|||
background: linear-gradient(180deg, #FFFFFF, #F7F7F7); |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
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; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue