| @ -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> | |||