时味苏州
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.
 
 
 
 

844 lines
17 KiB

<template>
<view class="bg">
<view class="box">
<!-- 循环子订单 -->
<view v-for="(item,index) in orderChildList" :key="index">
<!-- 核销码 景点自提 -->
<view class="product-box" v-if="item.isQrcode && item.qrcode.length > 0">
<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>
<!-- 景点商品详情 -->
<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>
</view>
<view class="product-box" v-if="item.product_model == 'ticket'">
<view class="title" >使用说明</view>
<view class="content" v-html="formateRichText(item.sku_model.book_info)"></view>
</view>
<!-- 邮寄、自提商品详情 -->
<view class="product-box" v-if="item.product_model == 'post'&&item.is_bsamecity!=1">
<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-title"></span>
<span class="good-subtitle">x{{item.product_num}}</span>
</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>
</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: [],
lineQrcodeList: [],
lineNum: 0,
current: 0,
postInfo: {}
}
},
onLoad(option) {
this.orderId = option.id
this.orderId = "28182509221509291873"
this.getDetail()
},
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) {
let groups = {};
orderList.forEach(item => {
// 判断是否展示核销码
if (['ticket'].includes(item.product_model)) {
item.isQrcode = true;
// 未核销数量
item.remainNum = 0;
// 轮播图滚动index
item.current = 0;
// 生成二维码
item.qrcode = [{use_code: 123}]
item.qrcode.forEach((qrItem, qrIndex) => {
if (qrItem.state === 0) {
item.remainNum += 1;
}
this.getCodeImg(qrItem, qrIndex);
});
}
});
this.deliveryList = Object.values(groups);
if (this.deliveryList.length>0 && this.deliveryList[0].goods[0]) {
let goods0 = this.deliveryList[0].goods[0]
this.deliveryInfo = this.deliveryList[0].goods[0]
}
console.log(this.deliveryList, this.deliveryInfo)
},
// 生成二维码
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'
});
}
});
},
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
}
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');
}
});
},
}
}
</script>
<style lang="scss" scoped>
.bg {
width: 750rpx;
overflow-x: hidden;
min-height: 100vh;
background-color: #F7F7F7;
padding-bottom: 100rpx;
}
.box {
position: relative;
padding: 0 26rpx;
.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;
}
</style>