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