jiazhipeng
4 weeks ago
13 changed files with 1674 additions and 140 deletions
@ -0,0 +1,277 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="score-card"> |
|||
|
|||
<view>积分余额</view> |
|||
<view class="score-num"> |
|||
<text style="padding-right: 6rpx;">{{totalScore}}</text> |
|||
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image> |
|||
</view> |
|||
<view class="refresh-btn" @click="getScore()"> |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20250922/718a9f118e60af19c927d72335615121.png"></image> |
|||
刷新 |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 选项卡区域 --> |
|||
<view class="tab-bar"> |
|||
<view :class="['tab-item',activeType==0]" @click="changeType(0)">积分收支明细</view> |
|||
<view :class="['tab-item',activeType==1]" @click="changeType(1)">积分使用记录</view> |
|||
</view> |
|||
|
|||
<!-- 积分列表区域 --> |
|||
<view class="score-list" v-if="activeType==0"> |
|||
<view class="list-item" v-for="(item, index) in record" :key="index" @click="goOrder(item)"> |
|||
<image v-if="item.type=='score_pay'" class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/1288379124c94892f6ac7a461337da46.png" mode="aspectFit"></image> |
|||
<image v-else-if="item.type=='score_refund'" class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/191fb92720719ec2ce03256389480188.png" mode="aspectFit"></image> |
|||
<image v-else class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/0f95e2a13d6e6d947b9c8721f9d01017.png" mode="aspectFit"></image> |
|||
|
|||
<view class="item-left flex-between" > |
|||
<view class="item-info"> |
|||
<text class="item-name">{{ item.memo }}</text> |
|||
<text class="item-time" v-if="item.order">订单编号：{{ item.order.order_id }}</text> |
|||
<text class="item-time">{{ item.createtime }}</text> |
|||
</view> |
|||
<text class="item-score" :class="item.wallet > 0 ? 'plus' : 'minus'">{{ item.wallet > 0 ? '+' + item.wallet : item.wallet }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="score-list" v-if="activeType==1" > |
|||
<view class="list-item" v-for="(item, index) in useRecord" :key="index" @click="goOrder(item)"> |
|||
<!-- 积分下单 --> |
|||
<image class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/1288379124c94892f6ac7a461337da46.png" mode="aspectFit"></image> |
|||
<view class="item-left flex-between" > |
|||
<view class="item-info"> |
|||
<text class="item-name">{{ item.memo }}</text> |
|||
<text class="item-time" v-if="item.order">订单编号：{{ item.order.order_id }}</text> |
|||
<text class="item-time">{{ item.createtime }}</text> |
|||
</view> |
|||
<text class="item-score" :class="item.wallet > 0 ? 'plus' : 'minus'">{{ item.wallet > 0 ? '+' + item.wallet : item.wallet }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
activeType: 0, |
|||
totalScore: 0, |
|||
typeIndex: 0, |
|||
record: [], |
|||
useRecord: [], |
|||
finish: false, |
|||
page: 1, |
|||
} |
|||
}, |
|||
onReady () { |
|||
this.getScore() |
|||
this.getScoreRecord(true) |
|||
}, |
|||
methods: { |
|||
// 获取积分明细 取总积分 |
|||
getScore() { |
|||
this.Post({},"/api/uservice/user/getMyInfo").then(res=>{ |
|||
this.totalScore = res.data.score |
|||
}) |
|||
}, |
|||
getScoreRecord () { |
|||
this.Post({page:this.page},"/api/uservice/user/getScoreChangeLog").then(res=>{ |
|||
let wallet_logs = res.data.wallet_logs.data; |
|||
let expend_logs = res.data.expend_logs.data; |
|||
wallet_logs.forEach(v=>{ |
|||
if (v.ext) {v.order = JSON.parse(v.ext)} |
|||
}) |
|||
expend_logs.forEach(v=>{ |
|||
if (v.ext) {v.order = JSON.parse(v.ext)} |
|||
}) |
|||
this.record = [...this.record,...wallet_logs]; |
|||
this.useRecord = [...this.useRecord,...expend_logs] |
|||
this.page++ |
|||
|
|||
}) |
|||
}, |
|||
|
|||
|
|||
|
|||
changeType (index) { |
|||
if (index == this.activeType) { |
|||
return |
|||
} |
|||
this.activeType = index; |
|||
|
|||
}, |
|||
|
|||
goOrder (item) { |
|||
if (item.order) { |
|||
uni.navigateTo({ url: `/subPackages/order/orderDetail?id=${item.order.order_id}` }); |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
this.getScoreRecord() |
|||
},1000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::-webkit-scrollbar { |
|||
display: none; |
|||
width: 0; |
|||
height: 0; |
|||
} |
|||
.bg{ |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
} |
|||
.point-image{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
|
|||
.score-card { |
|||
width: 750rpx; |
|||
height: 200rpx; |
|||
background: linear-gradient(-90deg, #FCE2C1, #F0BD90); |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #6E3D1D; |
|||
padding: 26rpx; |
|||
position: relative; |
|||
.score-num { |
|||
font-weight: 500; |
|||
font-size: 53rpx; |
|||
color: #000000; |
|||
margin-top: 34rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.refresh-btn { |
|||
width: 134rpx; |
|||
height: 40rpx; |
|||
background: #F8D6B1; |
|||
border-radius: 20rpx 0rpx 0rpx 20rpx; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #6E3D1D; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 23rpx 0 20rpx; |
|||
position: absolute; |
|||
top: 26rpx; |
|||
right: 0; |
|||
image{ |
|||
width: 26.67rpx; |
|||
height: 26.67rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.tab-bar { |
|||
display: flex; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
height: 109rpx; |
|||
line-height: 109rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
.tab-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
position: relative; |
|||
&.true { |
|||
font-weight: bold; |
|||
} |
|||
&.true::after{ |
|||
content: "1"; |
|||
width: 67rpx; |
|||
height: 7rpx; |
|||
background: #FB2A54; |
|||
border-radius: 3rpx; |
|||
bottom: 19rpx; |
|||
left: calc(50% - 34rpx); |
|||
position: absolute; |
|||
font-size: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.score-list { |
|||
width: 100%; |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
padding-left: 26rpx; |
|||
} |
|||
|
|||
.list-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.item-left { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
width: 100rpx; |
|||
border-bottom: 2rpx solid #f5f5f5; |
|||
padding: 33rpx 30rpx 33rpx 0; |
|||
} |
|||
|
|||
.item-icon { |
|||
width: 33.33rpx; |
|||
height: 33.33rpx; |
|||
margin-right: 26rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.item-name { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.item-time { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-top: 5rpx; |
|||
} |
|||
|
|||
.item-score { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.plus { |
|||
color: #FB2A54; |
|||
} |
|||
|
|||
.minus { |
|||
color: #000000;; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view class="exchange-page"> |
|||
<view class="title">请输入兑换码</view> |
|||
<input |
|||
class="input" |
|||
type="text" |
|||
placeholder="请输入" |
|||
v-model.trim="exchangeCode" |
|||
/> |
|||
<view class="error-message" v-if="showError">{{ errorMessage }}</view> |
|||
<button :class="['submit-btn',exchangeCode.trim().length>0?'active':'']" @click="submit">提交</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
exchangeCode: '', // 兑换码输入值 |
|||
showError: false, // 是否显示错误信息 |
|||
errorMessage: '兑换码已使用/兑换码错误' // 错误提示信息 |
|||
}; |
|||
}, |
|||
methods: { |
|||
submit() { |
|||
// 这里是提交逻辑示例，实际需根据业务需求对接后端 |
|||
if (!this.exchangeCode) { |
|||
uni.showToast({ |
|||
title: '请输入兑换码', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
// 模拟兑换码验证失败 |
|||
this.showError = true; |
|||
|
|||
uni.showToast({ |
|||
title:"兑换成功", |
|||
icon:"success" |
|||
}) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.exchange-page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 40px; |
|||
|
|||
.title { |
|||
font-size: 18px; |
|||
color: #007AFF; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.input { |
|||
width: 100%; |
|||
height: 40px; |
|||
border: 1px solid #CCCCCC; |
|||
border-radius: 4px; |
|||
padding: 0 10px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.error-message { |
|||
font-size: 14px; |
|||
color: #FF0000; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.submit-btn { |
|||
width: 100px; |
|||
height: 36px; |
|||
background-color: #CCCCCC; |
|||
color: #FFFFFF; |
|||
border-radius: 4px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 14px; |
|||
margin-top: 20px; |
|||
&.active{ |
|||
background-color: #FF0000; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,199 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<!-- 标签栏 --> |
|||
<view class="tab-bar"> |
|||
<view v-for="(type,i) in coupons" :key="i" :class="['tab-item',activeType==i]" |
|||
@click="switchTab(i)">{{type.statusText}}</view> |
|||
</view> |
|||
|
|||
<div class="search-list"> |
|||
<view @click="goDetail(item)" v-for="(item, key) in list" :key="item.id" class="search-item"> |
|||
<view class="img" style="position: relative;"> |
|||
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="title text-overflowRows"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="subtitle text-overflowRows">{{item.title}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="no-data-zhanwei" v-if="list.length<=0"> |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image> |
|||
<view style="padding:50rpx 0 67rpx">暂无数据</view> |
|||
</view> |
|||
|
|||
<view style="width: 100%;height: 200rpx;"></view> |
|||
</div> |
|||
|
|||
|
|||
<!-- 前往兑换中心按钮 --> |
|||
<view class="exchange-btn-container"> |
|||
<view class="exchange-btn" @click="gotoPath('/subPackages/rewards/exchange')">前往兑换中心</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
activeType: 0, // 当前选中标签 |
|||
coupons: [ |
|||
{ status: 0, statusText: '待使用', }, |
|||
{ status: 1, statusText: '已使用', }, |
|||
{ status: 2, statusText: '已失效', } |
|||
], |
|||
|
|||
list: [], |
|||
finished: false, |
|||
}; |
|||
}, |
|||
onReady () { |
|||
this.getHotList() |
|||
}, |
|||
methods: { |
|||
switchTab(tab) { |
|||
this.finished = false; |
|||
this.list = [] |
|||
this.activeType = tab; |
|||
this.getHotList() |
|||
}, |
|||
getHotList() { |
|||
this.Post({ |
|||
offset: this.list.length, |
|||
limit: 10, |
|||
order: "sales_number" |
|||
},'/api/product/get_product_by_type').then(res => { |
|||
this.list = [...this.list, ...res.data.list] |
|||
if(res.data.list.length < 10) this.finished = true |
|||
}) |
|||
}, |
|||
goDetail (item) { |
|||
uni.navigateTo({ |
|||
url:`/subPackages/rewards/order?id=${item.id}` |
|||
}) |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if(!this.finished) this.getHotList() |
|||
},1000) |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg{ |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.tab-bar { |
|||
display: flex; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
height: 109rpx; |
|||
line-height: 109rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-shrink: 0; |
|||
.tab-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
position: relative; |
|||
&.true { |
|||
font-weight: bold; |
|||
} |
|||
&.true::after{ |
|||
content: "1"; |
|||
width: 67rpx; |
|||
height: 7rpx; |
|||
background: #FB2A54; |
|||
border-radius: 3rpx; |
|||
bottom: 19rpx; |
|||
left: calc(50% - 34rpx); |
|||
position: absolute; |
|||
font-size: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-list { |
|||
padding: 26rpx 30rpx; |
|||
flex: 1; |
|||
height: 100rpx; |
|||
} |
|||
|
|||
.search-item { |
|||
width: 100%; |
|||
height: 200rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
display: flex; |
|||
margin-bottom: 26rpx; |
|||
.img { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
background: #87CD93; |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.content { |
|||
padding:13rpx 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
} |
|||
.title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
width: 100%; |
|||
} |
|||
.subtitle{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
.list-common-empty{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
margin: 26rpx 0; |
|||
|
|||
} |
|||
.list-common-empty-tip{ |
|||
color:#999; |
|||
} |
|||
|
|||
|
|||
.exchange-btn-container { |
|||
position: fixed; |
|||
bottom: 20px; |
|||
left: 0; |
|||
right: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.exchange-btn { |
|||
padding: 8px 20px; |
|||
background-color: #ff0000; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
font-size: 15px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,844 @@ |
|||
<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> |
|||
Loading…
Reference in new issue