food_wechat/components/orderItem/orderItem.vue
sszdot 65d8ebad40 【类 型】:feat
【原  因】:徽标组件  用于标识选项内列表记录总数
【过  程】:
【影  响】:

# 类型 包含:
# feat:新功能(feature)
# fix:修补bug
# docs:文档(documentation)
# style: 格式(不影响代码运行的变动)
# refactor:重构(即不是新增功能,也不是修改bug的代码变动)
# test:增加测试
# chore:构建过程或辅助工具的变动
2024-12-20 17:06:09 +08:00

86 lines
2.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-b-24 p-24 bg-w boxshadow">
<view class="flex">
<view class="flex3 ofh">
<view class="fz24 fcb m-t-12">订单号{{order.order_sn}}</view>
<view class="fz24 fcb">{{order.order_time | parseTime}}</view>
<view class="fz32 l-h-18 fb">取餐点{{order.receive_site_name}}</view>
<view class="spuGmap flex m-t-12 ofa">
<view class="m-r-12" v-for="(ps,index) in order.product_snapshot" :key="index">
<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
</view>
</view>
</view>
<view class="flex1 flex column md">
<view class="fz28 fb fcm l-h-18">{{order.shipment_status}}</view>
<view class="priceBox fz36 fb">
¥{{Number(order.transport_price) + Number(order.pack_price) + Number(order.total_price) | formatPrice}}
</view>
<view class="fz24 fcb">共{{order.total_num}}件</view>
</view>
</view>
<view class="m-t-24 flex mr">
<view class="numberBut bg-m fci rad8 fz28 fb flex mac mc" :key="foodSn">
{{ foodSn }}
</view>
<view class="nullBut border fcb rad8 fz28 flex mac mc m-l-24" style="">
申请售后
</view>
</view>
</view>
</template>
<script>
import {
parseTime,
formatPrice
} from '@/utils/index.js'
export default {
name: 'orderItem',
data() {
return {
foodSn: '取餐号', //取餐号 文字轮播
intervalId: null, // 存储定时器ID用于清除定时器
}
},
onReady() {
this.intervalId = setInterval(() => {
this.foodSn = this.foodSn === '取餐号' ? this.order.food_sn : '取餐号'
}, 1200)
},
destroyed() {
// 清除定时器,避免内存泄漏
clearInterval(this.intervalId);
},
props: {
order: {
type: Object,
deep: true
}
},
filters: {
parseTime, //日期 格式化
formatPrice //价格 格式化
},
}
</script>
<style lang="scss" scoped>
.spuGmap {
height: 110rpx;
}
.priceBox {
margin-top: 85rpx;
}
.numberBut {
width: 130rpx;
height: 48rpx;
}
.nullBut {
width: 159rpx;
height: 48rpx;
}
</style>