<template> <view class="order-item"> <view class="order-top"> <view> <text class="bold-size">配送费:¥ {{orderInfo.cost}}</text> </view> <view> <text class="onBold-size">期望时间:{{orderInfo.time}} 前送达</text> </view> </view> <view class="order-content"> <view class="order-info" v-if="statusId !== 1"> <text class="store-name">{{orderInfo.merName}}</text> <view class="scroll-container"> <view class="item" v-for="(item, index) in orderInfo.orderInfoList" :key="index"> <image :src="item.image" /> <text>{{item.productName}}x{{item.payNum}}</text> </view> </view> <view class="container2"> <view style="border-right: 2rpx solid #D5D6DC"> <image src="/static/img/ic-iphone1.png" class="image2" /> <text style="margin: 0 19rpx 0 15rpx;">联系商家</text> </view> <view> <text>客户姓名:{{orderInfo.name}}</text> </view> <view> <image src="/static/img/phone.png" class="image2" /> <text style="margin-left: 15rpx">联系客户</text> </view> </view> </view> <view class="bold-size flex-y-center" style="padding: 19rpx 0;"> <view class="icon-info"></view> <text>配送详情</text> </view> <view style="padding-bottom: 39rpx;position: relative;" id="myLineRef"> <view class="line"></view> <view class="box-item"> <view class="bold-size"> <text class="order-icon">取</text>{{orderInfo.merName}} </view> <!-- <view class="order-dis">{{orderInfo.shopDistance}} m</view> --> </view> <text class="onBold-size"><text class="order-icon" style="opacity: 0">取</text>{{orderInfo.merAddress}}</text> </view> <view> <view class="box-item"> <view class="bold-size"> <text class="order-icon">送</text>{{orderInfo.userAddress}} </view> <!-- <view class="order-dis">{{orderInfo.userDistance}} m</view> --> </view> <text class="onBold-size"><text class="order-icon" style="opacity: 0">送</text>备注:{{orderInfo.userRemarks}}</text> </view> </view> <view class="order-bottom" v-if="isButton"> <view class="bottom-but"> <button class="sub" @tap="formSubmit">接单</button> </view> </view> </view> </template> <script> export default { props: { orderInfo: { type: Object, default: {} }, isButton: { type: Boolean, default: true }, statusId: { type: Number, default: null } }, data() { return { lineHeight: 0, } }, mounted() { const that = this; this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query.select('#myLineRef').boundingClientRect(data => { that.lineHeight = data.height; }).exec(); }); }, methods: { formSubmit() { this.$emit('orderCilck', this.orderInfo.id); } } } </script> <style scoped lang="scss"> .order-item { background-color: #fff; border-radius: 23rpx; padding: 19rpx 38rpx; } .order-top { display: flex; align-items: center; justify-content: space-between; padding: 17rpx; border-bottom: 2rpx dashed #D6D7DC; } .bold-size { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: 27rpx; color: #141414; z-index: 9999; } .onBold-size { font-weight: 400; font-size: 23rpx; color: #999999; } .order-content { padding: 17rpx 0 38rpx 0; .box-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx; } .order-info { width: 100%; background: #F8F9FB; padding: 19rpx 38rpx 45rpx 19rpx; .store-name { font-weight: 600; font-size: 27rpx; color: #141414; } .scroll-container { display: flex; flex-wrap: nowrap; margin: 20rpx 0; overflow-x: auto; /* 允许水平滚动 */ white-space: nowrap; /* 防止项目换行 */ -webkit-overflow-scrolling: touch; /* 在iOS上平滑滚动 */ .item { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 19rpx; image { width: 115rpx; height: 115rpx; } text { font-weight: 400; font-size: 21rpx; color: #141414; margin-top: 9rpx; } } } .container2 { display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 21rpx; color: #141414; view { display: flex; align-items: center; } .image2 { width: 42rpx; height: 42rpx; } } } } .order-dis { font-weight: 400; font-size: 23rpx; color: #141414; } .order-icon { display: inline-block; margin-left: 10rpx; margin-right: 20rpx; padding: 5rpx 10rpx; font-weight: 400; font-size: 23rpx; color: #FFFFFF; border-radius: 50%; background-color: $bg-color-primary; } .order-bottom { border-top: 2rpx dashed #D6D7DC; .bottom-but { padding: 39rpx 67rpx; .sub { width: 100%; background-color: $bg-color-primary; font-weight: 500; font-size: 31rpx; color: #FFFFFF; padding: 17rpx 0; } } } .icon-info { width: 8rpx; height: 31rpx; background: $bg-color-primary; margin-right: 15rpx; } .line { z-index: 1; position: absolute; left: 28rpx; width: 1rpx; height: 100%; border-left: 1rpx dashed $bg-color-primary; } </style>