@ -0,0 +1,133 @@ | |||
<template> | |||
<view class="page"> | |||
<view v-for="(item, index) in list" v-if="list.length>0" :key="index" class="content" | |||
@click="lookDetail(item, index)"> | |||
<view class="left"> | |||
<image :src="item.pic" mode="aspectFill"></image> | |||
</view> | |||
<view class="right"> | |||
<view class="text-hidden-1"> | |||
订单状态:{{ orderStatusText(item.orderFlag) }} | |||
</view> | |||
<view class="text-hidden-1"> | |||
公司名称:{{ item.companyName }} | |||
</view> | |||
<view class="text-hidden-1"> | |||
单价:{{ item.price }} | |||
</view> | |||
<!--<view class="text-hidden-1">--> | |||
<!-- 数量:{{ item.num }}--> | |||
<!--</view>--> | |||
<view class="text-hidden-1"> | |||
提货地址:{{ item.address }} | |||
</view> | |||
<!--<view class="text-hidden-1">--> | |||
<!-- 定金:{{ item.deposit }}--> | |||
<!--</view>--> | |||
<view class="text-hidden-1"> | |||
提货时间:{{ item.takeTime }} | |||
</view> | |||
<!--审核状态 0审核中 1 审核通过 2审核未通过--> | |||
<!--<view class="text-hidden-1">--> | |||
<!-- 审核状态:{{ item.auditStatus == 0? '审核中' : (item.auditStatus == 1? '审核通过' : '审核未通过') }}--> | |||
<!--</view>--> | |||
</view> | |||
</view> | |||
<!--无历史记录--> | |||
<view | |||
v-else | |||
style="padding: 100rpx 0;"> | |||
<uv-empty | |||
iconSize="100rpx" | |||
mode="history" | |||
textSize="28rpx"/> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
name: "myOrderList", | |||
props: { | |||
list: { | |||
type: Array, | |||
default: false | |||
}, | |||
}, | |||
data() { | |||
return {} | |||
}, | |||
methods: { | |||
// 订单状态 0 未确认 1已确认 2已取消 3已付保证金 4 已退款 5已提货 | |||
orderStatusText(flag) { | |||
const statusMap = { | |||
0: '未确认', | |||
1: '已确认', | |||
2: '已取消', | |||
3: '已付保证金', | |||
4: '已退款', | |||
5: '已提货' | |||
}; | |||
return statusMap[flag] || '未知状态'; | |||
}, | |||
// 查看详情 | |||
lookDetail(item, index) { | |||
uni.navigateTo({ | |||
url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}` | |||
}); | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 20rpx; | |||
height: calc(90vh - 180rpx); | |||
.content { | |||
display: flex; | |||
margin: 10rpx 0; | |||
.left { | |||
width: 200rpx; | |||
height: 100%; | |||
//height: 130rpx; | |||
border-radius: 10rpx; | |||
image { | |||
//width: 130rpx; | |||
//height: 130rpx; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 10rpx; | |||
} | |||
} | |||
.right { | |||
width: calc(100% - 160rpx); | |||
color: #777; | |||
font-size: 24rpx; | |||
padding-left: 20rpx; | |||
line-height: 40rpx; | |||
background-color: #F8F8F8; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,418 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar :title="$t('other.OrderInfo')" leftClick @leftClick="$utils.navigateBack"/> | |||
<view class="info"> | |||
<view class="flex"> | |||
<!--订单基本信息--> | |||
<view class="server-item"> | |||
<view class="img-box"> | |||
<img :src="orderInfo.pic" style="width: 100%;height: 100%;"/> | |||
</view> | |||
<view class="server-info"> | |||
<view class="server-title"> | |||
{{ $t('other.aluminumProducts') }} | |||
</view> | |||
<view class="current-price"> | |||
<text class="unit">{{ $t('components.productSpecification') }}:</text> | |||
<text class="text"> {{ $t('other.specification') }}</text> | |||
</view> | |||
<view class="sales-volume" style="margin-top: 5px;"> | |||
<view class="desc"> {{ $t('other.pickupDate') }}:{{ orderInfo.takeTime }}</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!--收货地址--> | |||
<view class="line address"> | |||
<view class="address-top"> | |||
<view class=""> | |||
{{ $t('components.shippingAddress') }} | |||
</view> | |||
<view class="copy"> | |||
<img src="../static/order/copy.png" | |||
style="width:40rpx;height:40rpx;" | |||
@click="$utils.copyText('1')"> | |||
</view> | |||
</view> | |||
<view class="addressDetail"> | |||
<view class="">{{ orderInfo.userName }} {{ orderInfo.phone }}</view> | |||
<view class=""> | |||
{{ orderInfo.address }} | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 订单信息 --> | |||
<view class="line"> | |||
<view class="t min_tips"> | |||
<view class=""> | |||
{{ $t('components.orderInfo') }} | |||
</view> | |||
</view> | |||
<view class="min_tips"> | |||
<view class=""> | |||
{{ $t('components.orderNumber') }} | |||
</view> | |||
<view class=""> | |||
{{ orderInfo.id }} | |||
</view> | |||
</view> | |||
<view class="min_tips"> | |||
<view class=""> | |||
{{ $t('components.orderTime') }} | |||
</view> | |||
<view class=""> | |||
{{ orderInfo.createTime }} | |||
</view> | |||
</view> | |||
</view> | |||
<!--<!– 下单须知 –>--> | |||
<!--<view class="line">--> | |||
<!-- <view class="t min_tips">--> | |||
<!-- <view class="">--> | |||
<!-- {{ $t('components.orderNotice') }}--> | |||
<!-- </view>--> | |||
<!-- </view>--> | |||
<!-- <view class="xdxz" style="line-height: 40rpx;">--> | |||
<!-- <!–<uv-parse :content="content"></uv-parse>–>--> | |||
<!-- <view>1. 请您在收货时间前15分钟内到货,否则将视为放弃挂单。</view>--> | |||
<!-- <view>2. 请您在收货地址提供的手机号码收到货物</view>--> | |||
<!-- </view>--> | |||
<!--</view>--> | |||
</view> | |||
</view> | |||
<!-- 联系客服弹框 --> | |||
<customerServicePopup ref="customerServicePopup"/> | |||
</view> | |||
</template> | |||
<script> | |||
import customerServicePopup from "@/components/config/customerServicePopup.vue"; | |||
export default { | |||
name: "orderDetail2", | |||
components: {customerServicePopup}, | |||
onLoad(options) { | |||
if (options.orderInfo) { | |||
this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo)); | |||
console.log(this.orderInfo, "解析后的订单数据"); // 解析后的订单数据 | |||
} | |||
}, | |||
data() { | |||
return { | |||
orderInfo: {}, | |||
} | |||
}, | |||
onShow() { | |||
// this.queryOrderInfo() | |||
}, | |||
methods: { | |||
// 采购商根据订单id查询订单信息 | |||
queryOrderInfo() { | |||
this.$api('getMyOrderInfo', this.orderId, res => { | |||
console.log(res, "订单信息") | |||
this.orderInfo = res.result | |||
}) | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
.info { | |||
margin: 10px; | |||
padding: 20rpx; | |||
background-color: #fff; | |||
width: calc(100% - 40px); | |||
border-radius: 10px; | |||
.head-title { | |||
font-family: PingFang SC, PingFang SC-Bold; | |||
color: #2f2e2e; | |||
line-height: 30rpx; | |||
margin-left: 10rpx; | |||
} | |||
.server-item { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: space-between; | |||
background: white; | |||
border-radius: 15rpx; | |||
box-sizing: border-box; | |||
margin: 20rpx 0rpx; | |||
width: 100%; | |||
.img-box { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
overflow: hidden; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.server-info { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-around; | |||
width: calc(100% - 180rpx); | |||
box-sizing: border-box; | |||
padding: 10rpx 15rpx; | |||
.server-title { | |||
display: flex; | |||
margin-bottom: 10rpx; | |||
} | |||
.coupon { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
background: #F29E45; | |||
color: white; | |||
width: 120rpx; | |||
height: 40rpx; | |||
border-radius: 10rpx; | |||
margin-left: 10rpx; | |||
font-size: 22rpx; | |||
} | |||
.time-coupon, | |||
.price { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
} | |||
.time-coupon { | |||
margin: 10rpx 0rpx; | |||
font-size: 26rpx; | |||
justify-content: space-between; | |||
width: 100%; | |||
.flex { | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
image { | |||
width: 25rpx; | |||
height: 25rpx; | |||
} | |||
.time { | |||
color: #B8B8B8; | |||
margin-left: 6rpx; | |||
} | |||
} | |||
.sales-volume { | |||
display: flex; | |||
align-items: center; | |||
color: #B8B8B8; | |||
font-size: 24rpx; | |||
image { | |||
width: 25rpx; | |||
height: 25rpx; | |||
} | |||
} | |||
} | |||
} | |||
.address { | |||
.address-top { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
image { | |||
width: 30rpx; | |||
height: 30rpx; | |||
} | |||
} | |||
.addressDetail { | |||
color: #777; | |||
font-size: 26rpx; | |||
padding: 5px 0; | |||
} | |||
text { | |||
background-color: #F29E45; | |||
padding: 8rpx 10rpx; | |||
color: #fff; | |||
font-size: 20rpx; | |||
margin-left: 10px; | |||
border-radius: 5px; | |||
} | |||
} | |||
.min_tips { | |||
font-size: 22rpx; | |||
color: #777; | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 5px 0; | |||
align-items: center; | |||
} | |||
.btns { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 40rpx; | |||
.oneBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40%; | |||
height: 70rpx; | |||
padding: 10rpx; | |||
border-radius: 40rpx; | |||
color: white; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #293143; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
.twoBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40%; | |||
height: 70rpx; | |||
padding: 10rpx; | |||
border-radius: 40rpx; | |||
color: #000000; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #f2f2f2; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
.xdxz { | |||
font-size: 24rpx; | |||
color: #777; | |||
line-height: 30rpx; | |||
} | |||
.current-price { | |||
font-size: 24rpx; | |||
color: #8c8888; | |||
.unit { | |||
} | |||
.text { | |||
} | |||
} | |||
.line { | |||
border-top: 2px dotted #00000011; | |||
padding: 20rpx 0; | |||
.t { | |||
padding: 5px 0; | |||
color: #000; | |||
font-size: 26rpx; | |||
} | |||
} | |||
.head-div { | |||
.nickname { | |||
font-size: 30rpx; | |||
font-weight: 600; | |||
text-align: left; | |||
line-height: 42rpx; | |||
display: flex; | |||
align-items: center; | |||
.tag { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
image { | |||
height: 45rpx; | |||
width: 90rpx; | |||
vertical-align: middle; | |||
} | |||
.auth { | |||
position: absolute; | |||
white-space: nowrap; | |||
color: $uni-color; | |||
left: 23rpx; | |||
font-size: 17rpx; | |||
} | |||
} | |||
} | |||
.days { | |||
font-size: 20rpx; | |||
font-weight: 400; | |||
text-align: left; | |||
line-height: 56rpx; | |||
display: flex; | |||
align-items: center; | |||
view { | |||
padding-left: 5px; | |||
} | |||
} | |||
} | |||
.btn-x { | |||
color: $uni-color; | |||
border: 1px solid $uni-color; | |||
padding: 10rpx 20rpx; | |||
border-radius: 30rpx; | |||
} | |||
.btns { | |||
display: flex; | |||
justify-content: center; | |||
.btn { | |||
color: $uni-color; | |||
border: 1px solid $uni-color; | |||
padding: 10rpx 20rpx; | |||
border-radius: 30rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,49 @@ | |||
<template> | |||
<!--我的订单--> | |||
<view class="page"> | |||
<navbar :title="$t('other.Myorder')" leftClick @leftClick="$utils.navigateBack"/> | |||
<view class="frame"> | |||
<view class="content"> | |||
<myOrderList :list="list"></myOrderList> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import myOrderList from "../components/order/myOrderList.vue"; | |||
import topbar from "@/components/base/topbar.vue"; | |||
import tabber from "@/components/base/tabbar.vue"; | |||
import mixinsList from '@/mixins/list.js' | |||
export default { | |||
name: "pendingOrder", | |||
components: {tabber, topbar, myOrderList}, | |||
mixins: [mixinsList], | |||
data() { | |||
return { | |||
mixinsListApi: 'myOrderlist', | |||
} | |||
}, | |||
methods: {}, | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
.frame { | |||
padding: 30rpx; | |||
background-color: #f5f5f5; | |||
.content { | |||
//height: calc(100vh - 120rpx); | |||
} | |||
} | |||
} | |||
</style> |