mo-bai
4 years ago
35 changed files with 1830 additions and 464 deletions
Split View
Diff Options
-
45apis/addressManageApi.js
-
51enums/index.js
-
32pages.json
-
270pages/add-address-manage/index.vue
-
272pages/address-manage/index.vue
-
3pages/cart/index.vue
-
7pages/cart/no-data.vue
-
2pages/mall/index.vue
-
597pages/mine/index.vue
-
572pages/order-detail/index.vue
-
271pages/order-list/index.vue
-
130pages/order-make/index.vue
-
BINstatic/imgs/.DS_Store
-
BINstatic/imgs/digital-workshops/个人中心.sketch
-
BINstatic/imgs/mine/.DS_Store
-
BINstatic/imgs/mine/address-icon.png
-
BINstatic/imgs/mine/certification-icon.png
-
BINstatic/imgs/mine/certified-icon.png
-
BINstatic/imgs/mine/client-default.png
-
BINstatic/imgs/mine/contract-icon.png
-
BINstatic/imgs/mine/default-avatar.png
-
BINstatic/imgs/mine/enquiry-icon.png
-
BINstatic/imgs/mine/enterprise-icon.png
-
BINstatic/imgs/mine/logout-icon.png
-
BINstatic/imgs/mine/mine-top-bg.png
-
BINstatic/imgs/mine/non-certified-icon.png
-
BINstatic/imgs/mine/order-all-icon.png
-
BINstatic/imgs/mine/order-done-icon.png
-
BINstatic/imgs/mine/order-icon.png
-
BINstatic/imgs/mine/order-ing-icon.png
-
BINstatic/imgs/mine/order-ready-icon.png
-
BINstatic/imgs/mine/order-supplier-ready-icon.png
-
BINstatic/imgs/mine/user-avatar.png
-
15store/index.js
-
27utils/hook.js
@ -0,0 +1,45 @@ |
|||
import http from '../utils/http/index.js' |
|||
/** |
|||
* 查询收货地址 |
|||
* swagger: http://api-ops-uec-test.qniao.cn/uec/swagger-ui/index.html?urls.primaryName=CustomerApi#/%E4%BC%81%E4%B8%9A%E6%9F%A5%E8%AF%A2%E6%8E%A5%E5%8F%A3/getEnterpriseShippingAddressListByEnterpriseIdUsingGET
|
|||
*/ |
|||
export const getAddress = (data = {}) => { |
|||
return http.get({ |
|||
url: '/uec/get/enterprise-shipping-address-list/by-enterpriseId', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 保存收货地址 |
|||
* swagger: http://api-ops-uec-test.qniao.cn/uec/swagger-ui/index.html?urls.primaryName=CustomerApi#/%E4%BC%81%E4%B8%9A/saveEnterpriseShippingAddressByEnterpriseIdUsingPOST
|
|||
*/ |
|||
export const createAddress = (data = {}) => { |
|||
return http.post({ |
|||
url: '/uec/save/enterprise-shipping-address/by/enterprise-id', |
|||
data |
|||
}) |
|||
} |
|||
// 删除收货地址
|
|||
export const delAddress = (data = {}) => { |
|||
return http.post({ |
|||
url: '/uec/delete/enterprise-shipping-address', |
|||
data |
|||
}) |
|||
} |
|||
// 设置默认地址
|
|||
export const setDefaultAddress = (data = {}) => { |
|||
return http.post({ |
|||
url: '/uec/set/enterprise-shipping-address/as/default', |
|||
data |
|||
}) |
|||
} |
|||
// 通过id查询企业收货地址 /uec/get/enterprise-shipping-address-detail
|
|||
|
|||
export const getAddressDetail = (data = {}) => { |
|||
return http.get({ |
|||
url: '/uec/get/enterprise-shipping-address-detail', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,270 @@ |
|||
<template> |
|||
<view class="wrapper"> |
|||
<view> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed :title="titleText"></uni-nav-bar> |
|||
</view> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">收货人</text></view> |
|||
<view class="value"> |
|||
<qn-easyinput |
|||
:maxlength="20" |
|||
@blur="showCompany" |
|||
v-model="form.receiver" |
|||
:inputBorder="false" |
|||
text="left" |
|||
placeholder="请填写收货人姓名" |
|||
></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">手机号</text></view> |
|||
<view class="value"> |
|||
<qn-easyinput |
|||
:maxlength="11" |
|||
type="number" |
|||
v-model="form.receiverMobile" |
|||
:inputBorder="false" |
|||
text="left" |
|||
placeholder="请填写收货人手机号" |
|||
></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">所在地区</text></view> |
|||
<view class="value"> |
|||
<qn-data-picker |
|||
:readonly="hasSelected" |
|||
text="left" |
|||
:border="false" |
|||
class="qn-picker" |
|||
placeholder="点击选择" |
|||
popup-title="请选择城市" |
|||
:map="{ text: 'name', value: 'id' }" |
|||
@change="onAreaChange" |
|||
:clear-icon="true" |
|||
:localdata="items" |
|||
> |
|||
<text v-if="form.districtId">{{ `${form.provinceName || ''}/${form.cityName || ''}/${form.districtName || ''}/${form.streetName || ''}` }}</text> |
|||
</qn-data-picker> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">详细地址</text></view> |
|||
<view class="value"> |
|||
<qn-easyinput |
|||
:maxlength="120" |
|||
@blur="showCompany" |
|||
v-model="form.detail" |
|||
:inputBorder="false" |
|||
text="left" |
|||
placeholder="街道/门牌号/小区/乡镇/村等" |
|||
></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
<view class="default-address"> |
|||
<view> |
|||
<view class="title">设置为默认地址</view> |
|||
<view class="tip">提醒：每次下单会默认使用该地址</view> |
|||
</view> |
|||
<view><switch :checked="form.isDefault == 1" @change="switchChange" style="transform: scale(0.8)" /></view> |
|||
</view> |
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="button-area"> |
|||
<view class="button button__submit" @click="addTap"><text class="text" style="color: white">保存</text></view> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getArea } from '@/apis/commonApi.js' |
|||
import { back } from '@/utils/hook.js' |
|||
import { createAddress, getAddressDetail } from '@/apis/addressManageApi.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
form: { |
|||
cityId: '', |
|||
cityName: '', |
|||
detail: '', |
|||
districtId: '', |
|||
districtName: '', |
|||
enterpriseId: this.$store.state.companyInfo.id, |
|||
id: '', |
|||
isDefault: '0', |
|||
provinceId: '', |
|||
provinceName: '', |
|||
receiver: '', |
|||
receiverMobile: '', |
|||
streetId: '', |
|||
streetName: '' |
|||
}, |
|||
hasSelected: false, |
|||
items: [], |
|||
id: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
getArea().then((res) => { |
|||
if (res) { |
|||
this.items = res |
|||
} |
|||
}) |
|||
}, |
|||
onLoad(option) { |
|||
this.titleText = option.type |
|||
if (option.id) { |
|||
this.id = option.id |
|||
this.getAddressDetail() |
|||
} |
|||
}, |
|||
methods: { |
|||
back, |
|||
// 通过id查询收货地址 |
|||
getAddressDetail() { |
|||
getAddressDetail({ id: this.id }).then((res) => { |
|||
// console.log('收货地址详情', res) |
|||
if (res) { |
|||
this.form = Object.assign({}, res) |
|||
} |
|||
}) |
|||
}, |
|||
onAreaChange(e) { |
|||
if (e.detail.value && e.detail.value.length > 0) { |
|||
const [province, city, district, street] = e.detail.value |
|||
this.form.provinceId = province.value |
|||
this.form.provinceName = province.text |
|||
this.form.cityId = city.value |
|||
this.form.cityName = city.text |
|||
this.form.districtId = district.value |
|||
this.form.districtName = district.text |
|||
this.form.streetId = street.value |
|||
this.form.streetName = street.text |
|||
} else { |
|||
this.form.provinceId = null |
|||
this.form.provinceName = null |
|||
this.form.cityId = null |
|||
this.form.cityName = null |
|||
this.form.districtId = null |
|||
this.form.districtName = null |
|||
this.form.streetId = null |
|||
this.form.streetName = null |
|||
} |
|||
}, |
|||
// 设置默认地址 |
|||
switchChange(e) { |
|||
this.form.isDefault = e.target.value ? '1' : '0' |
|||
}, |
|||
// 保存 |
|||
addTap() { |
|||
createAddress(this.form).then((res) => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '保存成功', |
|||
icon: 'success' |
|||
}) |
|||
setTimeout(() => { |
|||
back() |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrapper { |
|||
.wrapper-title { |
|||
width: 100%; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
} |
|||
.qn-form-item { |
|||
width: 750rpx; |
|||
padding: 0rpx 32rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
// justify-content: space-between; |
|||
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5); |
|||
min-height: 88rpx; |
|||
.label { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin-right: 20rpx; |
|||
.label__text { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
.value { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.default-address { |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0rpx 32rpx; |
|||
height: 133rpx; |
|||
background: #ffffff; |
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.tip { |
|||
padding-top: 10rpx; |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.button-area { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
// justify-content: space-between; |
|||
.button { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
.text { |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.button__cancel { |
|||
width: 270rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #979797; |
|||
} |
|||
.button__submit { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background: #007aff; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,272 @@ |
|||
<template> |
|||
<view class="wrapper"> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="收货地址"></uni-nav-bar> |
|||
<view class="content" v-for="(item, index) in list" :key="index"> |
|||
<view class="info-box" @tap="selectAddress(item)"> |
|||
<view class="name">{{ item.receiver }} {{ item.receiverMobile }}</view> |
|||
<view class="address">{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.streetName }}{{ item.detail }}</view> |
|||
</view> |
|||
<view class="other"> |
|||
<view class="left"> |
|||
<label @tap="radioTap(item)"> |
|||
<radio :checked="item.isDefault == 1" style="transform: scale(0.8)" /> |
|||
<text :class="item.isDefault == 1 ? 'radioText' : 'not-radioText'">{{ item.isDefault == 1 ? '已设为默认' : '设为默认' }}</text> |
|||
</label> |
|||
</view> |
|||
<view class="right"> |
|||
<view @tap="delTap(item, index)">删除</view> |
|||
<view class="edit" @tap="editTap(item, index)">编辑</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="button-area"> |
|||
<view class="button button__submit" @click="addTap"><text class="text" style="color: white">添加地址</text></view> |
|||
</view> |
|||
</qn-footer> |
|||
<uni-popup ref="popup" type="center" :mask-click="false"> |
|||
<view class="popup-box"> |
|||
<view class="tip-title">确定要删除改地址吗？</view> |
|||
<view class="operation-row"> |
|||
<view class="cancel-text" @tap="cancelTap">取消</view> |
|||
<view class="line"></view> |
|||
<view class="confirm-text" @tap="confirmTap">确定</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back, setCache } from '@/utils/hook.js' |
|||
import { getAddress, delAddress, setDefaultAddress } from '@/apis/addressManageApi.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
/** |
|||
* 页面操作类型 none: 无操作, select: 选择 |
|||
*/ |
|||
operation: 'none', |
|||
list: [], |
|||
id: null |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.queryData() |
|||
}, |
|||
|
|||
methods: { |
|||
go2, |
|||
back, |
|||
// 查询收货地址 |
|||
queryData() { |
|||
const params = { |
|||
enterpriseId: this.$store.state.companyInfo.id |
|||
} |
|||
getAddress(params).then((res) => { |
|||
if (res) { |
|||
this.list = res |
|||
} |
|||
}) |
|||
}, |
|||
// 设置默认地址 |
|||
radioTap(item) { |
|||
setDefaultAddress({ id: item.id }).then((res) => { |
|||
if (res) { |
|||
this.queryData() |
|||
} |
|||
}) |
|||
}, |
|||
// 选择地址 |
|||
selectAddress(item) { |
|||
if (this.operation === 'select') { |
|||
setCache('address', item) |
|||
back() |
|||
} |
|||
}, |
|||
|
|||
// 新增收货地址 |
|||
addTap() { |
|||
go2('add-address-manage', { type: '新增地址' }) |
|||
}, |
|||
// 删除 |
|||
delTap(item, index) { |
|||
this.id = item.id |
|||
this.$refs.popup.open('center') |
|||
// this.$refs.popup.close() |
|||
}, |
|||
// 编辑 |
|||
editTap(item, index) { |
|||
go2('add-address-manage', { id: item.id, type: '编辑地址' }) |
|||
}, |
|||
confirmTap() { |
|||
delAddress({ id: this.id }).then((res) => { |
|||
this.$refs.popup.close() |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '删除成功', |
|||
icon: 'success' |
|||
}) |
|||
this.queryData() |
|||
} |
|||
}) |
|||
}, |
|||
cancelTap() { |
|||
this.$refs.popup.close() |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if (option) { |
|||
this.operation = option.operation |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrapper { |
|||
.content { |
|||
padding-bottom: 16rpx; |
|||
.info-box { |
|||
max-height: 197rpx; |
|||
background: #ffffff; |
|||
padding: 27rpx 32rpx; |
|||
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5); |
|||
.name { |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.address { |
|||
padding-top: 16rpx; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.other { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0rpx 32rpx; |
|||
height: 80rpx; |
|||
background: #ffffff; |
|||
.radioText { |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.not-radioText { |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.left { |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.right { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
.edit { |
|||
padding-left: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.button-area { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
.button { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
.text { |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.button__cancel { |
|||
width: 270rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #979797; |
|||
} |
|||
.button__submit { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background: #007aff; |
|||
} |
|||
} |
|||
.popup-box { |
|||
width: 540rpx; |
|||
height: 226rpx; |
|||
background: #ffffff; |
|||
border-radius: 14rpx; |
|||
.tip-title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 126rpx; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
} |
|||
.operation-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
height: 100rpx; |
|||
background: #ffffff; |
|||
border-top: 2rpx solid rgba(221, 221, 221, 0.5); |
|||
.cancel-text { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
} |
|||
.line { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
width: 2rpx; |
|||
height: 100rpx; |
|||
border-left: 2rpx solid #dcdee3; |
|||
} |
|||
.confirm-text { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
font-size: 36rpx; |
|||
color: #108ee9; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,572 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单详情"></uni-nav-bar> |
|||
<view class="status-area flex-row-center-start"> |
|||
<image class="flex-base" style="width: 40rpx; height: 40rpx; margin-right: 16rpx" src="/static/imgs/order/status-icon.png"></image> |
|||
<text style="font-size: 30rpx; color: #ffffff">{{ statusImg[orderInfo.status] }}</text> |
|||
</view> |
|||
<view class="address-area"> |
|||
<view class="flex-row-start-start" style="padding: 24rpx 0 40rpx"> |
|||
<image class="flex-base" style="width: 100rpx; height: 100rpx; margin-right: 20rpx" src="/static/imgs/order/customer-default.png"></image> |
|||
<view class="flex-col-start-start"> |
|||
<text style="font-size: 30rpx; color: #333333; font-weight: 600">{{ orderInfo.customerEnterpriseName }}</text> |
|||
<text style="font-size: 26rpx; color: #333333; margin-top: 26rpx"> |
|||
联系人: {{ `${orderInfo.deliveryAddress.receiver || '-'} ${orderInfo.deliveryAddress.receiverMobile || '-'}` }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<view class="flex-row-start-start footer"> |
|||
<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx" src="/static/imgs/order/location-icon.png"></image> |
|||
<text style="font-size: 26rpx; color: #333333; word-break: break-all">{{ transformAddress(orderInfo.deliveryAddress) }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="order-area" v-for="(supplierOrder, index) in orderInfo.supplierOrder" :key="supplierOrder.supplierOrderId"> |
|||
<view class="flex-row-center-space header"> |
|||
<text style="font-size: 32rpx; font-weight: 600">{{ supplierOrder.supplierEnterpriseName }}</text> |
|||
<view> |
|||
<!-- 微信支付待付款 --> |
|||
<view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_PAY" class="button-item" @click="confirmWxPay(supplierOrder.mallSupplierId)"> |
|||
去付款 |
|||
</view> |
|||
<!-- 待收货展示 --> |
|||
<view v-else-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_RECEIVE" class="button-item" @click="confirmReceive(supplierOrder)"> |
|||
确认收货 |
|||
</view> |
|||
<!-- 待借款展示 --> |
|||
<view v-else-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_LOAN" class="button-item" @click="goFsPage()">去借款</view> |
|||
<!-- 飞算支付且待还款状态 --> |
|||
<view |
|||
v-else-if="orderInfo.paymentMethod == paymentMethodEnum.FLY_PAY && supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_REPAY" |
|||
class="button-item" |
|||
@click="goFsPage()" |
|||
> |
|||
去还款 |
|||
</view> |
|||
<text v-else style="font-size: 30rpx; color: #ff5368; font-weight: 600">{{ supplierOrderStatusMap[supplierOrder.status] }}</text> |
|||
</view> |
|||
</view> |
|||
<view v-for="order in supplierOrder.orderItems" :key="order.productId"> |
|||
<view style="background-color: #fff; padding-bottom: 20rpx"> |
|||
<view class="order-header flex-row-start-space"> |
|||
<text style="font-size: 30rpx; font-weight: 600"> |
|||
{{ `${order.brandName}${order.productName} | ${order.gramWeight}g | ${order.width}*${order.length} | ${order.pieceQuantity}张` }} |
|||
</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space"> |
|||
<text>重量(吨):</text> |
|||
<text>{{ order.buyTon }}</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space"> |
|||
<text>单价(元/吨):</text> |
|||
<text>{{ order.unitPrice }}</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space"> |
|||
<text>小计(元):</text> |
|||
<text>{{ order.subtotal }}</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space" style="margin: 0"> |
|||
<text>备注信息:{{ order.remark }}</text> |
|||
</view> |
|||
</view> |
|||
<view style="padding: 24rpx 10rpx"> |
|||
<uni-steps |
|||
:options="transformStep(order.outboundProcessList, order.pieceQuantity)" |
|||
active-color="#1890FF" |
|||
:active="order.outboundProcessList.length > 0 ? order.outboundProcessList.length - 1 : -1" |
|||
></uni-steps> |
|||
</view> |
|||
</view> |
|||
<!-- 送货凭证 --> |
|||
<view v-if="showSendImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_send`) ? '' : 'height:88rpx;'"> |
|||
<view class="header flex-row-center-space"> |
|||
<text style="font-size: 28rpx; font-weight: 600">送货凭证</text> |
|||
<view class="flex-row-center-end" @click="changeShowIndex(`${index}_send`)"> |
|||
<text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_send`) ? '收起' : '展开' }}</text> |
|||
<uni-icons :type="showList.includes(`${index}_send`) ? 'top' : 'bottom'" size="16"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="imgs flex-row-start-start"> |
|||
<view v-for="item in supplierOrder.proofDelivery" :key="item.id" class="upload_img"> |
|||
<image style="width: 120rpx; height: 120rpx" :src="item.imgUrl"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 收货凭证 --> |
|||
<view v-if="showReceiveImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_receive`) ? '' : 'height:88rpx;'"> |
|||
<view class="header flex-row-center-space"> |
|||
<text style="font-size: 28rpx; font-weight: 600">收货凭证</text> |
|||
<view class="flex-row-center-end" @click="changeShowIndex(`${index}_receive`)"> |
|||
<text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_receive`) ? '收起' : '展开' }}</text> |
|||
<uni-icons :type="showList.includes(`${index}_receive`) ? 'top' : 'bottom'" size="16"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="imgs flex-row-start-start"> |
|||
<view v-for="item in supplierOrder.proofReceipt" :key="item.id" class="upload_img"> |
|||
<uni-icons type="clear" size="16" class="close-icon" @click="deleteVoucher(item.id)"></uni-icons> |
|||
<image style="width: 120rpx; height: 120rpx" :src="item.imgUrl"></image> |
|||
</view> |
|||
<view class="default-upload" @click="uploadVoucher(supplierOrder.supplierOrderId)"> |
|||
<image src="/static/imgs/order/camera.png" class="icon"></image> |
|||
<text style="font-size: 26rpx; color: #4c4a58">上传凭证</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="fee flex-row-center-space"> |
|||
<text style="font-size: 28rpx; color: #555555">其他费用: ￥{{ orderInfo.otherFee || 0 }}</text> |
|||
<view class="flex-row-center-end"> |
|||
<text style="font-size: 28rpx; color: #555555">合计:</text> |
|||
<text style="font-size: 40rpx; color: #f5222d; font-weight: 600">￥{{ orderInfo.totalOfferPrice || 0 }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="order-footer"> |
|||
<view class="flex-row-center-space order-row"> |
|||
<text class="label">订单编号</text> |
|||
<view class="flex-row-center-end value"> |
|||
<text>{{ orderInfo.orderId }}</text> |
|||
<text style="color: #007aff; margin-left: 8rpx" @click="clip(orderInfo.orderId)">复制</text> |
|||
</view> |
|||
</view> |
|||
<view class="flex-row-center-space order-row"> |
|||
<text class="label">下单时间</text> |
|||
<text class="value">{{ orderInfo.createTime }}</text> |
|||
</view> |
|||
<view class="flex-row-center-space order-row"> |
|||
<text class="label">交货时间</text> |
|||
<text class="value">{{ orderInfo.receivedTime }}</text> |
|||
</view> |
|||
<view class="flex-row-center-space order-row" style="border: none"> |
|||
<text class="label">支付方式</text> |
|||
<text class="value">{{ paymentMethodMap[orderInfo.paymentMethod] || '-' }}</text> |
|||
</view> |
|||
<view class="flex-row-center-space order-row" style="border: none"> |
|||
<text class="label">是否开票</text> |
|||
<text class="value">{{ invoiceStatusMap[orderInfo.invoiceOrNot] || '-' }}</text> |
|||
</view> |
|||
</view> |
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="flex-row-center-end" style="padding: 0 32rpx"> |
|||
<view class="button" @click="viewContract">查看合同</view> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back, uploadImage } from '@/utils/hook.js' |
|||
import { getClientOrderInfo, clientUploadVoucher, clientDeleteVoucher, clientConfirmOrder, getReciptCode } from '@/apis/orderApi.js' |
|||
import { transformFileToImg, getFeisuanUrl } from '@/apis/commonApi.js' |
|||
import { orderStatusEnum, supplierOrderStatusMap, supplierOrderStatusEnum, paymentMethodMap, paymentMethodEnum, invoiceStatusMap } from '@/enums/index.js' |
|||
const statusImg = { |
|||
[orderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待供应商确认', |
|||
[orderStatusEnum.ORDERED]: '已下单', |
|||
[orderStatusEnum.FINISHED]: '已完成', |
|||
[orderStatusEnum.CANCELED]: '已取消' |
|||
} |
|||
const showVoucherStatus = [ |
|||
supplierOrderStatusEnum.WAIT_RECEIVE, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_LOAN, |
|||
supplierOrderStatusEnum.PAYING, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_PAY, |
|||
supplierOrderStatusEnum.PAY_FAIL, |
|||
supplierOrderStatusEnum.FINISHED, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_REPAY, |
|||
supplierOrderStatusEnum.REPAYING, |
|||
supplierOrderStatusEnum.CANCELED |
|||
] |
|||
export default { |
|||
data() { |
|||
return { |
|||
orderInfo: { |
|||
deliveryAddress: {}, |
|||
supplierOrder: [] |
|||
}, |
|||
statusImg, |
|||
supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap), |
|||
paymentMethodMap: Object.freeze(paymentMethodMap), |
|||
supplierOrderStatusEnum: Object.freeze(supplierOrderStatusEnum), |
|||
paymentMethodEnum: Object.freeze(paymentMethodEnum), |
|||
invoiceStatusMap: Object.freeze(invoiceStatusMap), |
|||
showList: [] |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if (option.orderId) { |
|||
this.init(option.orderId) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '订单信息错误', |
|||
icon: 'error', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
back() |
|||
}, 2000) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
go2, |
|||
back, |
|||
init(orderId) { |
|||
getClientOrderInfo({ |
|||
customerOrderId: orderId |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.orderInfo = res |
|||
} |
|||
}) |
|||
}, |
|||
transformAddress(address) { |
|||
let res = '' |
|||
if (address.provinceName) { |
|||
res = `${address.provinceName}${address.cityName}${address.districtName}${address.detail}` |
|||
} |
|||
return res |
|||
}, |
|||
// 生成步骤条 |
|||
transformStep(list, quantity) { |
|||
// 分切 出库 完成 |
|||
let step1 = [], |
|||
step2 = [], |
|||
step3 = [] |
|||
// 出库数量 |
|||
let outboundQuantity = 0 |
|||
if (list && list.length > 0) { |
|||
list.forEach((item) => { |
|||
if (item.userName && item.userName.length > 3) { |
|||
item.userName = item.userName.substr(0, 2) + '...' |
|||
} |
|||
if (item.status == '30301') { |
|||
step1.push({ |
|||
title: '分切', |
|||
desc: item.userName + '\n\r' + item.createTime |
|||
}) |
|||
} else if (item.status == '30302') { |
|||
step2.push({ |
|||
title: '出库', |
|||
desc: item.userName + ' ' + item.quantity + '\n\r' + item.createTime |
|||
}) |
|||
outboundQuantity += item.quantity |
|||
} else if (item.status == '30303') { |
|||
step3.push({ |
|||
title: '完成', |
|||
desc: '已完成' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
if (step1.length == 0) { |
|||
step1.push({ |
|||
title: '分切', |
|||
desc: '未完成' |
|||
}) |
|||
} |
|||
if (step2.length == 0) { |
|||
step2.push({ |
|||
title: '出库', |
|||
desc: '未完成' |
|||
}) |
|||
} else if (outboundQuantity < quantity) { |
|||
// 判断是否出库完成 |
|||
step2.push({ |
|||
title: '出库', |
|||
desc: '未完成' |
|||
}) |
|||
} |
|||
if (step3.length == 0) { |
|||
step3.push({ |
|||
title: '完成', |
|||
desc: '未完成' |
|||
}) |
|||
} |
|||
return [...step1, ...step2, ...step3] |
|||
}, |
|||
changeShowIndex(index) { |
|||
let target = this.showList.indexOf(index) |
|||
if (target > -1) { |
|||
this.showList.splice(target, 1) |
|||
} else { |
|||
this.showList.push(index) |
|||
} |
|||
}, |
|||
// 根据状态是否展示送货凭证 |
|||
showSendImgs(status) { |
|||
return showVoucherStatus.includes(status) |
|||
}, |
|||
// 根据状态是否展示收货凭证 |
|||
showReceiveImgs(status) { |
|||
return showVoucherStatus.includes(status) |
|||
}, |
|||
// 去借款 |
|||
goFsPage() { |
|||
getFeisuanUrl().then((res) => { |
|||
if (res) { |
|||
// #ifdef APP-PLUS |
|||
go2('page-view', { |
|||
title: '飞算申请', |
|||
url: encodeURIComponent(res) |
|||
}) |
|||
// #endif |
|||
// #ifdef H5 |
|||
window ? (window.location.href = res) : '' |
|||
// #endif |
|||
} |
|||
}) |
|||
}, |
|||
// 确认收货 |
|||
confirmReceive(order) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确认收货后，将不能修改，确认收货吗？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
clientConfirmOrder({ |
|||
supplierOrderId: order.supplierOrderId |
|||
}).then((success) => { |
|||
if (success) { |
|||
uni.showToast({ |
|||
title: '确认收货成功', |
|||
icon: 'success', |
|||
success: () => { |
|||
this.init(this.orderInfo.orderId) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 调起供应商二维码微信支付 |
|||
confirmWxPay(mallSupplierId) { |
|||
getReciptCode({ mallSupplierId }).then((res) => { |
|||
if (res.payeeCodeUrl) { |
|||
uni.previewImage({ |
|||
urls: [res.payeeCodeUrl], |
|||
current: res.payeeCodeUrl |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '暂无二维码,请联系供应商', |
|||
icon: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
clip(content) { |
|||
uni.setClipboardData({ |
|||
data: content, |
|||
success: function () { |
|||
uni.showToast({ |
|||
title: '复制成功', |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 删除收货凭证 |
|||
deleteVoucher(id) { |
|||
clientDeleteVoucher({ id }).then((res) => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '删除成功', |
|||
icon: 'success', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
this.init(this.orderInfo.orderId) |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 上传收货凭证 |
|||
uploadVoucher(supplierOrderId) { |
|||
uploadImage(['album'], 5) |
|||
.then((urls) => { |
|||
if (urls) { |
|||
clientUploadVoucher({ |
|||
supplierOrderId, |
|||
proofDeliveryUrl: urls |
|||
}).then((res) => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '上传成功', |
|||
icon: 'success', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
this.init(this.orderInfo.orderId) |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
.catch((e) => { |
|||
console.log('上传失败:', e) |
|||
uni.showToast({ |
|||
title: '上传失败', |
|||
icon: 'fail' |
|||
}) |
|||
}) |
|||
}, |
|||
// 查看合同 |
|||
viewContract() { |
|||
let urls = this.orderInfo.contractUrls |
|||
if (urls && urls.length > 0) { |
|||
let promises = [] |
|||
urls.forEach((item) => { |
|||
promises.push(transformFileToImg({ fileUrl: item })) |
|||
}) |
|||
Promise.all(promises).then((res) => { |
|||
let list = [] |
|||
res.forEach((item) => { |
|||
list.push(item.imgUrl) |
|||
}) |
|||
uni.previewImage({ |
|||
urls: list, |
|||
current: list[0] |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.status-area { |
|||
padding: 24rpx 32rpx; |
|||
width: 750rpx; |
|||
background-image: linear-gradient(90deg, #ff4d2e 6%, #ff952f 100%); |
|||
} |
|||
.address-area { |
|||
padding: 0 32rpx; |
|||
width: 750rpx; |
|||
background-color: #ffffff; |
|||
.footer { |
|||
padding: 24rpx 0; |
|||
background-color: #ffffff; |
|||
border-top: 1px solid #e5e5e5; |
|||
} |
|||
} |
|||
.order-area { |
|||
.header { |
|||
padding: 24rpx 32rpx; |
|||
word-break: break-all; |
|||
background: #e5f1ff; |
|||
width: 750rpx; |
|||
} |
|||
.order-header { |
|||
padding: 24rpx 32rpx; |
|||
word-break: break-all; |
|||
background: #fff; |
|||
width: 750rpx; |
|||
border-bottom: 2rpx dashed #d8d8d8; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.order-row { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
margin-bottom: 18rpx; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
} |
|||
.footer { |
|||
background-color: #ffffff; |
|||
width: 750rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 20rpx; |
|||
.header { |
|||
padding: 24rpx 32rpx; |
|||
background-color: #fff; |
|||
} |
|||
.imgs { |
|||
padding: 16rpx 32rpx 32rpx; |
|||
min-height: 120rpx; |
|||
} |
|||
} |
|||
} |
|||
.fee { |
|||
padding: 24rpx 32rpx; |
|||
width: 750rpx; |
|||
background-color: #ffffff; |
|||
margin: 20rpx 0; |
|||
} |
|||
.order-footer { |
|||
padding: 0rpx 32rpx; |
|||
width: 750rpx; |
|||
background-color: #ffffff; |
|||
.order-row { |
|||
padding: 24rpx 0; |
|||
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5); |
|||
.label { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
.value { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
.button { |
|||
height: 88rpx; |
|||
width: 220rpx; |
|||
background-color: #fff; |
|||
line-height: 84rpx; |
|||
border: 1px solid #007aff; |
|||
border-radius: 10rpx; |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
color: #007aff; |
|||
} |
|||
.button-item { |
|||
padding: 0rpx 24rpx; |
|||
height: 46rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #007aff; |
|||
border-radius: 20rpx; |
|||
font-size: 26rpx; |
|||
color: #ffffff; |
|||
} |
|||
.default-upload { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #dcdee0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.icon { |
|||
width: 56rpx; |
|||
height: 56rpx; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
} |
|||
.upload_img { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #dcdee0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
margin-right: 12rpx; |
|||
overflow: hidden; |
|||
.close-icon { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 5; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,271 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单列表"></uni-nav-bar> |
|||
<view class="status-bar"> |
|||
<view |
|||
v-for="item in statusBarArray" |
|||
:key="item.value" |
|||
:class="{ box: true, 'box--selected': condition.status == item.value }" |
|||
@click="selectStatus(item.value)" |
|||
> |
|||
{{ item.label }} |
|||
</view> |
|||
</view> |
|||
<view class="list-area"> |
|||
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback"> |
|||
<view v-for="item in list" :key="item.orderId" class="order-area" @click="goDetail(item)"> |
|||
<view class="order-header"> |
|||
<view class="left"> |
|||
<text style="font-size: 30rpx; color: #000000; font-weight: 600">{{ item.orderId }}</text> |
|||
<text style="font-size: 26rpx; color: #888888; margin-top: 16rpx">{{ dateTimeFormat(item.createTime, 'yyyy/mm/dd') }}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<text style="font-size: 30rpx; color: #ff5368; font-weight: 500">{{ orderStatusMap[item.status] }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="order-content" v-for="order in item.supplierOrderList" :key="order.supplierOrderId"> |
|||
<view class="header"> |
|||
<text style="font-size: 30rpx; color: #000000">{{ order.supplierEnterpriseName }}</text> |
|||
<text style="font-size: 30rpx; color: #888888; font-weight: 500">{{ supplierOrderStatusMap[order.status] }}</text> |
|||
</view> |
|||
<view v-for="(target, index) in order.orderItems" :key="target.productId" :class="{ 'order-item': true, border: index > 0 }"> |
|||
<image class="img" :src="target.productImg || '/static/imgs/order/paper-default-icon.png'"></image> |
|||
<view class="right"> |
|||
<text style="font-size: 30rpx; color: #000000">{{ target.productName }}</text> |
|||
<text style="font-size: 26rpx; color: #888888; margin-top: 26rpx; word-break: break-all">{{ transformTarget(target) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="order-footer"> |
|||
<view class="left"> |
|||
<text style="font-size: 26rpx; color: #888888; margin-right: 8rpx">交货时间:</text> |
|||
<text style="font-size: 26rpx; color: #333333">{{ item.deliveryLeadtime || '-' }}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<text style="font-size: 30rpx; color: #ff5368">￥ {{ item.totalOfferPrice }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-list> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back } from '@/utils/hook.js' |
|||
import { dateTimeFormat } from '@/utils/index.js' |
|||
import { orderStatusArray, orderStatusEnum, orderStatusMap, supplierOrderStatusMap } from '@/enums/index.js' |
|||
import { getOrderList } from '@/apis/orderApi.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
condition: { |
|||
status: orderStatusEnum.ALL, |
|||
pageNum: 0, // 初始会执行一次下拉加载 |
|||
pageSize: 10 |
|||
}, |
|||
option: { |
|||
size: 10, |
|||
auto: true, |
|||
emptyText: '暂无订单~', |
|||
background: '#F7F8FA', |
|||
emptyImage: '/static/imgs/order/order-empty.png' |
|||
}, |
|||
list: [], |
|||
statusBarArray: Object.freeze(orderStatusArray.filter((item) => item.value !== orderStatusEnum.CANCELED)), |
|||
orderStatusMap: Object.freeze(orderStatusMap), |
|||
supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap) |
|||
} |
|||
}, |
|||
methods: { |
|||
go2, |
|||
back, |
|||
dateTimeFormat, |
|||
getList() { |
|||
return new Promise((resolve, reject) => { |
|||
getOrderList({ ...this.condition }) |
|||
.then((res) => { |
|||
if (res) { |
|||
if (this.condition.pageNum == 1) { |
|||
this.list = res.records |
|||
} else { |
|||
this.list = this.list.concat(res.records) |
|||
} |
|||
resolve({ list: this.list, total: res.total }) |
|||
} else { |
|||
reject() |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
reject(err) |
|||
}) |
|||
}) |
|||
}, |
|||
downCallback() { |
|||
this.condition.pageNum = 1 |
|||
this.getList() |
|||
.then(({ list, total }) => { |
|||
this.$refs.list.refreshSuccess({ list, total }) |
|||
}) |
|||
.catch(() => { |
|||
this.$refs.list.refreshFail() |
|||
}) |
|||
}, |
|||
upCallback(page) { |
|||
this.condition.pageNum++ |
|||
this.getList() |
|||
.then(({ list, total }) => { |
|||
this.$refs.list.loadSuccess({ list, total }) |
|||
}) |
|||
.catch(() => { |
|||
this.$refs.list.loadFail() |
|||
}) |
|||
}, |
|||
selectStatus(status) { |
|||
this.condition.status = status |
|||
this.downCallback() |
|||
}, |
|||
transformTarget(target) { |
|||
let result = '' |
|||
if (target.categoryName) { |
|||
result += `${target.categoryName}` |
|||
} |
|||
if (target.brandName) { |
|||
result += `/${target.brandName}` |
|||
} |
|||
if (target.gramWeight) { |
|||
result += `/${target.gramWeight}g` |
|||
} |
|||
if (target.length && target.width) { |
|||
result += `/${target.width}*${target.length}` |
|||
} |
|||
if (target.pieceQuantity) { |
|||
result += `/${target.pieceQuantity}张` |
|||
} |
|||
return result |
|||
}, |
|||
// 根据状态跳转到不同页面 |
|||
goDetail(order) { |
|||
if (order.status === orderStatusEnum.WAIT_CONFIRM) { |
|||
go2('order-make', { orderId: order.orderId }) |
|||
} else { |
|||
go2('order-detail', { orderId: order.orderId }) |
|||
} |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if (option.status) { |
|||
this.condition.status = option.status |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
height: 100vh; |
|||
.status-bar { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 32rpx; |
|||
border-bottom: 2rpx solid #f8f8f8; |
|||
background-color: #fff; |
|||
height: 90rpx; |
|||
.box { |
|||
height: 86rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
color: #000000; |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-bottom: 4rpx solid #f8f8f8; |
|||
} |
|||
.box--selected { |
|||
border-bottom: 4rpx solid #007aff; |
|||
color: #007aff; |
|||
} |
|||
} |
|||
.list-area { |
|||
flex-grow: 1; |
|||
overflow: hidden; |
|||
.order-area { |
|||
width: 750rpx; |
|||
margin-bottom: 20rpx; |
|||
background-color: #fff; |
|||
.order-header { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
padding: 18rpx 32rpx; |
|||
border-bottom: 2rpx solid #f8f8f8; |
|||
.left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
justify-content: flex-start; |
|||
} |
|||
} |
|||
.order-content { |
|||
border-bottom: 2rpx solid #f8f8f8; |
|||
.header { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
padding: 24rpx 32rpx; |
|||
border-bottom: 2rpx solid #f8f8f8; |
|||
} |
|||
.order-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 686rpx; |
|||
margin: 24rpx 32rpx; |
|||
.img { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
margin-right: 20rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
justify-content: flex-start; |
|||
} |
|||
} |
|||
.border { |
|||
border-top: 2rpx solid #f8f8f8; |
|||
} |
|||
} |
|||
.order-footer { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 24rpx 32rpx; |
|||
border-bottom: 2rpx solid #f8f8f8; |
|||
.left { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 7.1 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 73 | Size: 5.9 KiB |
| Before | After |
|---|---|
|
|
| Width: 100 | Height: 32 | Size: 4.9 KiB |
| Before | After |
|---|---|
|
|
| Width: 140 | Height: 140 | Size: 13 KiB |
| Before | After |
|---|---|
|
|
| Width: 74 | Height: 74 | Size: 8.6 KiB |
| Before | After |
|---|---|
|
|
| Width: 156 | Height: 156 | Size: 17 KiB |
| Before | After |
|---|---|
|
|
| Width: 74 | Height: 73 | Size: 8.4 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 7.2 KiB |
| Before | After |
|---|---|
|
|
| Width: 24 | Height: 25 | Size: 541 B |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 377 | Size: 336 KiB |
| Before | After |
|---|---|
|
|
| Width: 100 | Height: 32 | Size: 4.5 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 3.9 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 3.9 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 5.2 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 4.4 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 3.6 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 3.3 KiB |
| Before | After |
|---|---|
|
|
| Width: 156 | Height: 156 | Size: 5.1 KiB |
Write
Preview
Loading…
Cancel
Save