mo-bai
4 years ago
35 changed files with 1830 additions and 464 deletions
Unified 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