Commit db4526e4 authored by 高铭波's avatar 高铭波

Merge branch 'dev' of https://git.banshouhui.com/lijundan/self-support into dev

parents a9691522 67248afc
...@@ -188,6 +188,8 @@ let orderApiFun = function(vm){ ...@@ -188,6 +188,8 @@ let orderApiFun = function(vm){
let returnedParts = async (params = {}) => await vm.$u.get(prefix + 'parts/' + vm.vuex_token + '/return', params); let returnedParts = async (params = {}) => await vm.$u.get(prefix + 'parts/' + vm.vuex_token + '/return', params);
// 备件仓列表 // 备件仓列表
let reserveList = async (params = {}) => await vm.$u.get(prefix + 'parts/' + vm.vuex_token + '/items/reserve', params); let reserveList = async (params = {}) => await vm.$u.get(prefix + 'parts/' + vm.vuex_token + '/items/reserve', params);
// 配件物流
let getLogistics = async (orderId) => await vm.$u.get(prefix + 'parts/' + vm.vuex_token+ '/orders/'+ orderId +'/express',{}, formType);
const orderApi = { const orderApi = {
listByRecommendOrder, listByRecommendOrder,
...@@ -235,7 +237,8 @@ let orderApiFun = function(vm){ ...@@ -235,7 +237,8 @@ let orderApiFun = function(vm){
completeNextStep, completeNextStep,
applyList, applyList,
returnedParts, returnedParts,
reserveList reserveList,
getLogistics
} }
return orderApi return orderApi
} }
......
let partsApiFun = function(vm){ let partsApiFun = function(vm){
// 接口公共前缀 // 接口公共前缀
const prefix = '/wxh-worker-rest/rest/' const prefix = '/wxh-worker-rest/rest/'
let coverage = '/wxh-worker-rest/rest/coverage/' const coverage = '/wxh-worker-rest/rest/coverage/'
let parts = '/wxh-worker-rest/rest/parts/' const parts = '/wxh-worker-rest/rest/parts/'
const base = '/wxh-worker-rest/rest/base/'
/** /**
* 配件申请单-查询网点地址信息 * 配件申请单-查询网点地址信息
*/ */
let getSiteAddress = async () => await vm.$u.get(coverage + vm.vuex_token + '/getSiteAddress'); let getSiteAddress = async () => await vm.$u.get(coverage + vm.vuex_token + '/getSiteAddress');
/**
* 配件过滤-品类列表
*/
let getCategoryList = async () => await vm.$u.get(base + vm.vuex_token + '/allow/category/list');
/**
* 配件过滤-品牌列表
*/
let getBrandList = async (params = {}) => await vm.$u.get(base + vm.vuex_token + '/allow/brand/list', params);
/**
* 查询配件列表
*/
let getPartsList = async (params = {}) => await vm.$u.get(parts + vm.vuex_token + '/parts', params);
const partsApi = { const partsApi = {
getSiteAddress getSiteAddress,
getCategoryList,
getBrandList,
getPartsList
} }
return partsApi return partsApi
} }
......
...@@ -12,22 +12,18 @@ ...@@ -12,22 +12,18 @@
type: String, type: String,
default: 'background-color: #FFFFFF' default: 'background-color: #FFFFFF'
}, },
type: { // 图片 imageName: { // 图片
type: String, type: String,
default: 'white', default: 'wudingdan.png'
},
text: { // 提示文字
type: String,
default: '当前暂无订单'
} }
}, },
computed: { computed: {
wudingdanImage() { wudingdanImage() {
var name = 'wudingdan.png' return process.uniEnv.qn_base_url + this.imageName
switch(this.type) {
case 'black':
name = "zwdd.png"
break
default:
break
}
return process.uniEnv.qn_base_url + name
} }
} }
} }
......
<template> <template>
<!-- 已申请配件cell --> <!-- 已申请配件cell -->
<view class="applied-cell"> <view class="applied-cell" @click="handleClick">
<view class="title-view"> <view class="title-view">
<view v-for="(item, key) in labels" :key="key"> <text class="title-text" :style="{'color': titleColor}">{{title}}</text>
<text>{{item}}:</text> <view>
<text>{{info[key]}}</text> <text>工单编号:</text>
<text>{{info.orderNumber}}</text>
</view> </view>
</view> </view>
<view class="line-view"></view>
<view class="list-content"> <view class="list-content">
<view v-for="(item, index) in info.items" :key="index"> <view class="image-list">
<!-- <PartsCell @operate="handleOperate" :info="item"></PartsCell> --> <image class="image-view" v-for="(item, index) in images" :key="index" :src="item"></image>
<view class="info-view" v-if="info.items.length == 1">
<view class="name-text">{{info.items[0].name}}</view>
<view>{{info.categoryName + '-' + info.brandName}}</view>
</view>
</view>
<view class="count-view">{{info.items.length}}</view>
</view> </view>
<view class="bottom-view">
<view class="total-view">
<text>合计:</text>
<text class="amount-view">{{total}}</text>
<text></text>
</view>
<u-button v-if="buttonText" :custom-style="customStyle" shape="circle" @click.stop="handleOperate" type="primary">{{buttonText}}</u-button>
</view> </view>
</view> </view>
</template> </template>
...@@ -23,7 +37,7 @@ ...@@ -23,7 +37,7 @@
type: Object, type: Object,
default() { default() {
return { return {
status: 0, // -1 已驳回,-1 已取消,0 新申请,1 待审核,10 待发货,11 配货中,12 采购中,15 已发货,20 已签收,21 待返件,22 返件中,90 已转备件,100 已完成 status: 0, // 待签收 15;待发货 10;待审核 1;已取消 -1;已驳回 -2;已签收 20
} }
} }
} }
...@@ -35,7 +49,12 @@ ...@@ -35,7 +49,12 @@
}, },
computed: { computed: {
texts() { texts() {
return {} return {
'1': '取消申请',
'10': '',
'15': '签收',
'20': '',
}
}, },
buttonText() { buttonText() {
return this.texts[this.info.status] return this.texts[this.info.status]
...@@ -46,14 +65,62 @@ ...@@ -46,14 +65,62 @@
'width': '100%', 'width': '100%',
} }
}, },
labels() { // 待签收 15;待发货 10;待审核 1;已取消 -1;已驳回 -2;已签收 20
title() {
return this.titles[String(this.info.status)]
},
titles() {
return {
'1': '待审核',
'10': '待发货',
'15': '代签收',
'20': '已签收',
'-1': '审核未通过',
'1': '已取消'
}
},
titleColor() {
switch (String(this.info.status)) {
case '-1': // 审核未通过
return '#FA5A49'
case '1': // 已取消
return '#666666'
default:
return '#2272FF'
}
},
total() { // 合计
var i = 0
for (var item of this.info.items) {
i += item.quantity
}
return i
},
images() {
var array = []
for (var item of this.info.items) {
if (item.images) {
array.push(process.uniEnv.systemUrl.apiUrl + item.images.split(',').shift())
} else {
array.push(this.placeholderImage)
}
}
return array
},
placeholderImage() {
return process.uniEnv.qn_base_url + 'logo.png'
},
customStyle() {
return { return {
'id': '申请单号', 'height': '80rpx',
'statusText': '状态' 'width': '200rpx',
} }
} }
}, },
methods: { methods: {
handleClick() {
this.$emit('action', this.info)
},
handleOperate() { handleOperate() {
this.$emit('operate', this.info) this.$emit('operate', this.info)
} }
...@@ -63,12 +130,75 @@ ...@@ -63,12 +130,75 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.applied-cell { .applied-cell {
padding: 30rpx;
background-color: #FFFFFF;
border-radius: 12rpx;
margin-bottom: 20rpx;
.title-view{ .title-view{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 26rpx;
color: #333333;
.title-text {
font-size: 36rpx;
font-weight: bold;
}
}
.line-view {
background-color: #F4F5F7;
height: 2rpx;
width: 100%;
margin-top: 20rpx;
} }
.list-content { .list-content {
display: flex;
width: 100%;
margin-top: 40rpx;
margin-bottom: 40rpx;
.image-list {
overflow-x: auto;
display: flex;
width: 100%;
border-right: 2rpx solid #F4F5F7;
margin-right: 30rpx;
.image-view {
width: 120rpx;
height: 120rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.info-view {
font-size: 24rpx;
color: #333333;
.name-text {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 30rpx;
}
}
}
.count-view {
width: 30rpx;
text-align: center;
font-size: 26rpx;
color: #666666;
}
}
.bottom-view {
display: flex;
justify-content: space-between;
align-items: center;
.total-view {
font-size: 32rpx;
font-weight: bold;
color: #333333;
.amount-view {
color: #2272FF;
padding-right: 10rpx;
}
}
} }
} }
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
```json ```json
{ {
"name": "正泰漏保", // 配件名称 "name": "正泰漏保", // 配件名称
"num": 1, // 配件数量 "quantity": 1, // 配件数量
"min": 1, // 数量最小值 "min": 1, // 数量最小值
"max": 100 // 数量最大值 "max": 100 // 数量最大值
} }
...@@ -56,14 +56,14 @@ export default { ...@@ -56,14 +56,14 @@ export default {
{ {
id: 1, id: 1,
name: "正泰漏保", name: "正泰漏保",
num: 1, quantity: 1,
min: 1, min: 1,
max: 100, max: 100,
}, },
{ {
id: 1, id: 1,
name: "挚达广汽充电桩", name: "挚达广汽充电桩",
num: 3, quantity: 3,
min: 1, min: 1,
max: 5, max: 5,
}, },
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
{{info.name}} {{info.name}}
</view> </view>
<view class="num"> <view class="num">
<u-number-box v-if="!disabled" v-model="info.num" :min="info.min || 0" :max="info.max || info.num" @change="numChange"></u-number-box> <u-number-box v-if="!disabled" v-model="info.quantity" :min="info.min || 0" :max="info.max || info.quantity" @change="numChange"></u-number-box>
<text class="nums" v-else>x{{ info.num || 1 }}</text> <text class="nums" v-else>x{{ info.num || 1 }}</text>
</view> </view>
</view> </view>
......
...@@ -19,12 +19,12 @@ ...@@ -19,12 +19,12 @@
{ {
id: 1, id: 1,
name: "正泰漏保", // 名称 name: "正泰漏保", // 名称
no: 'NO.202006170015', // 编号 code: 'NO.202006170015', // 编号
desc: '这个空开盒子和其他的空开有什么不一样,这里可以写一下', // 描述 remark: '这个空开盒子和其他的空开有什么不一样,这里可以写一下', // 描述
num: 1, // 默认数量 quantity: 1, // 默认数量
min: 1, // 数量最小值 min: 1, // 数量最小值
max: 100, // 数量最大值 max: 100, // 数量最大值
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片 images: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片
checked: false, // 是否勾选 checked: false, // 是否勾选
disabled: true // 是否禁用数量调整,如果禁用则会显示添加申请按钮 disabled: true // 是否禁用数量调整,如果禁用则会显示添加申请按钮
} }
...@@ -66,24 +66,24 @@ export default { ...@@ -66,24 +66,24 @@ export default {
{ {
id: 1, id: 1,
name: "正泰漏保", name: "正泰漏保",
no: 'NO.202006170015', code: 'NO.202006170015',
desc: '这个空开盒子和其他的空开有什么不一样,这里可以写一下', remark: '这个空开盒子和其他的空开有什么不一样,这里可以写一下',
num: 1, quantity: 1,
min: 1, min: 1,
max: 100, max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", image: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false, checked: false,
disabled: true disabled: true
}, },
{ {
id: 1, id: 1,
name: "挚达广汽充电桩", name: "挚达广汽充电桩",
no: 'NO.202006170014', code: 'NO.202006170014',
desc: '这个空开盒子和其他的空开有什么不一样,这里可以写一下', remark: '这个空开盒子和其他的空开有什么不一样,这里可以写一下',
num: 3, quantity: 3,
min: 1, min: 1,
max: 5, max: 5,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", image: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false, checked: false,
disabled: true disabled: true
}, },
......
...@@ -5,17 +5,17 @@ ...@@ -5,17 +5,17 @@
</view> </view>
<view class="u-flex right"> <view class="u-flex right">
<view class="right-img"> <view class="right-img">
<u-image :src="info.img" width="200rpx" height="200rpx" /> <u-image :src="info.images" width="200rpx" height="200rpx" />
</view> </view>
<view class="u-flex right-content"> <view class="u-flex right-content">
<view class="right-content-name">{{ info.name }}</view> <view class="right-content-name">{{ info.name }}</view>
<view class="right-content-desc">{{ info.desc }}</view> <view class="right-content-desc">{{ info.remark }}</view>
<view class="u-flex right-content-opera"> <view class="u-flex right-content-opera">
<view class="no"> <view class="no">
{{ info.no }} {{ info.code }}
</view> </view>
<view class="num"> <view class="num">
<u-number-box v-if="!info.disabled" v-model="info.num" :min="info.min || 0" :max="info.max || info.num" @change="numChange"></u-number-box> <u-number-box v-if="!info.disabled" v-model="info.quantity" :min="info.min || 0" :max="info.max || info.quantity" @change="numChange"></u-number-box>
<u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button> <u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button>
</view> </view>
</view> </view>
......
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
| showChecked | Boolean | true | true/false | 是否显示勾选 | | showChecked | Boolean | true | true/false | 是否显示勾选 |
| allChecked | Boolean | true | true/false | 是否全选 | | allChecked | Boolean | true | true/false | 是否全选 |
| btnStatus | Boolean | true | true/false | 确定按钮是否可点击 | | btnStatus | Boolean | true | true/false | 确定按钮是否可点击 |
| btnStatus | Boolean | true | true/false | 确定按钮是否可点击 |
| partNum | Number | 0 | | 配件数量 | | partNum | Number | 0 | | 配件数量 |
| num | Number | 0 | | 合计总件数 | | num | Number | 0 | | 合计总件数 |
| submitTxt | String | 确定 | | 确定按钮文字 | | submitTxt | String | 确定 | | 确定按钮文字 |
......
...@@ -270,6 +270,15 @@ ...@@ -270,6 +270,15 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{
"path": "warehouse/partsDetail",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "", // 配件详情
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{ {
"path": "superLogin/index", "path": "superLogin/index",
"style": { "style": {
...@@ -352,13 +361,8 @@ ...@@ -352,13 +361,8 @@
{ {
"path": "parts", "path": "parts",
"style": { "style": {
"navigationBarTitleText": "可用备件" "navigationBarTitleText": "可用备件",
} "disableScroll": true
},
{
"path": "partsList",
"style": {
"navigationBarTitleText": "配件选择"
} }
} }
] ]
...@@ -490,6 +494,12 @@ ...@@ -490,6 +494,12 @@
"navigationStyle": "custom", "navigationStyle": "custom",
"disableScroll": true "disableScroll": true
} }
},
{
"path": "addParts",
"style": {
"navigationBarTitleText": "配件选择"
}
} }
] ]
} }
......
...@@ -23,7 +23,10 @@ ...@@ -23,7 +23,10 @@
refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" :scroll-top="scrollTop" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" :scroll-top="scrollTop"
refresher-background="#F4F5F7" @refresherpulling="triggered = true" @refresherrefresh="onRefresh" refresher-background="#F4F5F7" @refresherpulling="triggered = true" @refresherrefresh="onRefresh"
@refresherrestore="onRestore" @scroll="scroll" enable-back-to-top> @refresherrestore="onRestore" @scroll="scroll" enable-back-to-top>
<NoOrder v-if="noMore" type="black" :customStyle="noOrderCustomStyle" /> <view class="loading-view" v-if="!loaded">
<u-loading mode="flower"></u-loading>
</view>
<NoOrder v-else-if="noMore" imageName="zwdd.png" :customStyle="noOrderCustomStyle" />
<template v-else> <template v-else>
<view v-for="(item, index) in orderList" :key="item.orderId"> <view v-for="(item, index) in orderList" :key="item.orderId">
<OrderCell :orderData="item" :type="orderType" :location="dataValue" @click="handleClick" <OrderCell :orderData="item" :type="orderType" :location="dataValue" @click="handleClick"
...@@ -298,6 +301,14 @@ ...@@ -298,6 +301,14 @@
.load-more-view { .load-more-view {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.loading-view {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 300rpx;
position: absolute;
}
} }
.tools-box { .tools-box {
......
This diff is collapsed.
<template>
<view class="parts-detail">
<u-navbar back-icon-color="#333333" background="#F4F5F7" titleColor="#333333" :border-bottom="false" title-bold>
</u-navbar>
<view class="title-text" :style="{'color': titleColor}">{{title}}</view>
<view class="content-view">
<view class="title-view">
<view>
<text>工单编号:</text>
<text>{{info.orderNumber}}</text>
</view>
</view>
<view class="line-view"></view>
<view class="list-content">
<view class="list-item" v-for="(item, index) in info.items" :key="index">
<view class="left-view">
<image class="image-view" :src="imageUrl(item)"></image>
<view class="info-view">
<view class="name-text">{{item.name}}</view>
<view>{{noteText}}</view>
</view>
</view>
<view class="count-view">x{{item.quantity}}</view>
</view>
</view>
<view class="line-view"></view>
<view class="detail-info-view">
<view v-for="(value, key) in detailKey" :key="key" class="info-item">
<text>{{ value }}:</text>
<text>{{ detail[key] }}</text>
</view>
</view>
<view class="logistics-view"></view>
</view>
<view class="bottom-view">
<view class="total-view">
<text>合计:</text>
<text class="amount-view">{{total}}</text>
<text></text>
</view>
<u-button v-if="buttonText" :custom-style="customStyle" shape="circle" @click="handleClick" type="primary">
{{buttonText}}
</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
info: {items:[], express: []},
logisticsRecords: [], // 物流
};
},
computed: {
texts() {
return {
'1': '取消申请',
'10': '',
'15': '签收',
'20': '',
}
},
buttonText() {
return this.texts[this.info.status]
},
buttonStyle() {
return {
'height': '104rpx',
'width': '100%',
}
},
// 待签收 15;待发货 10;待审核 1;已取消 -1;已驳回 -2;已签收 20
title() {
return this.titles[String(this.info.status)]
},
titles() {
return {
'1': '待审核',
'10': '待发货',
'15': '代签收',
'20': '已签收',
'-1': '审核未通过',
'1': '已取消'
}
},
titleColor() {
switch (String(this.info.status)) {
case '-1': // 审核未通过
return '#FA5A49'
case '1': // 已取消
return '#666666'
default:
return '#2272FF'
}
},
total() { // 合计
var i = 0
for (var item of this.info.items) {
i += item.quantity
}
return i
},
placeholderImage() {
return process.uniEnv.qn_base_url + 'logo.png'
},
customStyle() {
return {
'height': '80rpx',
'width': '200rpx',
}
},
noteText() {
return this.info.categoryName + '-' + this.info.brandName
},
detail() { // 详情
return {
'orderNumber': this.info.orderNumber,
'createTime': this.info.createTime,
'name': this.info.express.com,
'number': this.info.express.number
}
},
detailKey() { // 详情
return {
'orderNumber': '申请单号',
'createTime': '申请时间',
'name': '物流公司',
'number': '物流单号'
}
}
},
onLoad() {
getApp().trackPage('仓库配件详情')
var pages = getCurrentPages();
if (pages.length >= 2) {
var page = pages[pages.length - 2];
this.info = page.info
}
this.getLogistics()
},
methods: {
getLogistics() {
this.$u.api.getLogistics(this.info.id).then((res) => {
res = {
"code": 200,
"message": "",
"data": {
"orderId": 1883,
"status": 15,
"com": "sf",
"number": "SF1314164238675",
"name": "周明杨",
"phoneNumber": "17630408443",
"areaCode": 0,
"province": "44",
"city": "4401",
"district": "440106",
"street": "440106001",
"address": "广东省 广州市 天河区 长兴街道 芩村北街四巷16号菜鸟驿站",
"fullAddress": null,
"remark": "",
"createTime": 1624104976000,
"deliveryTime": 1624256100000,
"receiveTime": null,
"updateTime": 1624256100000,
"expressInfo": {
"state": "1",
"state_name": "transporting",
"state_orig": "0",
"records": [{
"datetime": "2021-06-22 04:09:08",
"context": "[杭州市]快件在【杭州萧山铁路站点】完成分拣,准备发往 【广州棠溪铁路站点】"
}, {
"datetime": "2021-06-22 04:09:08",
"context": "[杭州市]快件到达 【杭州萧山铁路站点】"
}, {
"datetime": "2021-06-21 23:46:32",
"context": "[金华市]快件已发车"
}, {
"datetime": "2021-06-21 23:46:26",
"context": "[金华市]快件在【金华金东中转场】完成分拣,准备发往 【杭州萧山铁路站点】"
}, {
"datetime": "2021-06-21 19:33:17",
"context": "[金华市]快件到达 【金华金东中转场】"
}, {
"datetime": "2021-06-21 18:41:02",
"context": "[金华市]快件已发车"
}, {
"datetime": "2021-06-21 18:40:53",
"context": "[金华市]快件在【金华永康滨江速运营业点】完成分拣,准备发往 【金华金东中转场】"
}, {
"datetime": "2021-06-21 17:17:54",
"context": "[金华市]顺丰速运 已收取快件"
}]
}
}
}
if (res.code == 200) {
if (res.data && res.data.records) {
this.logisticsRecords = res.data.records
}
} else {
console.log(res.message)
}
});
},
handleClick() {
},
imageUrl(item) {
return item.images ? item.images.split(',').shift() : this.placeholderImage
},
}
};
</script>
<style lang="scss" scoped>
.parts-detail {
background-color: #FFFFFF;
border-radius: 12rpx;
margin-bottom: 20rpx;
background-color: #F4F5F7;
height: 100vh;
display: flex;
flex-direction: column;
.title-text {
font-size: 48rpx;
font-weight: bold;
padding: 0 30rpx 30rpx 30rpx;
;
}
.content-view {
margin: 0 30rpx 30rpx 30rpx;
padding: 30rpx;
background-color: #FFFFFF;
border-radius: 12rpx;
height: 100%;
overflow: auto;
.title-view {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 26rpx;
color: #333333;
}
.line-view {
background-color: #F4F5F7;
height: 2rpx;
width: 100%;
margin-top: 20rpx;
}
.list-content {
margin-top: 40rpx;
margin-bottom: 40rpx;
.list-item {
display: flex;
width: 100%;
margin-right: 30rpx;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40rpx;
.left-view {
display: flex;
align-items: center;
.image-view {
width: 120rpx;
height: 120rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.info-view {
font-size: 24rpx;
color: #333333;
.name-text {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 30rpx;
}
}
}
.count-view {
font-size: 28rpx;
color: #333333;
}
}
}
.detail-info-view {
padding: 30rpx 0;
.info-item {
margin-bottom: 20rpx;
color: #333333;
font-size: 26rpx;
}
}
.ogistics-view {}
}
.bottom-view {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10rpx 30rpx 44rpx 30rpx;
.total-view {
font-size: 32rpx;
font-weight: bold;
color: #333333;
.amount-view {
color: #2272FF;
}
}
}
}
</style>
<template> <template>
<view class="u-flex det-wrap"> <view class="u-flex det-wrap">
<view class="content"> <view class="content" v-if="lists.length > 0">
<scroll-view v-if="lists.length > 0" style="height: 100%;" scroll-y="true"> <scroll-view style="height: 100%;" scroll-y="true">
<select-parts <select-parts
v-for="(item, index) in lists" v-for="(item, index) in lists"
:key="index" :key="index"
...@@ -12,10 +12,18 @@ ...@@ -12,10 +12,18 @@
@apply="apply(index)" @apply="apply(index)"
></select-parts> ></select-parts>
</scroll-view> </scroll-view>
<view v-else class="empty">暂无可用备件</view>
</view> </view>
<view class="bar"> <view v-else class="u-flex-col u-col-center empty">
<view class="sold-out">
<u-image :src="qnFile('SoldOut.png')" width="374" mode="widthFix">
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u-image>
</view>
<view class="message">当前无可用备件</view>
</view>
<view class="bar" v-if="lists.length > 0">
<submit-bar <submit-bar
:partNum="partNum" :partNum="partNum"
:num="num" :num="num"
...@@ -62,18 +70,6 @@ ...@@ -62,18 +70,6 @@
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false, checked: false,
disabled: true disabled: true
},
{
id: 1,
name: "正泰漏保",
no: 'NO.202006170015NO.202006170015',
desc: '这个充电桩的简介可以写的长一点',
num: 1,
min: 1,
max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: false
} }
], ],
val: [] val: []
...@@ -117,6 +113,9 @@ ...@@ -117,6 +113,9 @@
}, },
submit() { submit() {
console.log('submit') console.log('submit')
},
qnFile(src) {
return process.uniEnv.qn_base_url + src
} }
} }
} }
...@@ -129,18 +128,20 @@ ...@@ -129,18 +128,20 @@
height: 100vh; height: 100vh;
.content { .content {
border-radius: 12rpx; border-radius: 12rpx;
padding: 10rpx; padding: 10rpx 10rpx 0 10rpx;
width: 100%; width: 100%;
.empty {
text-align: center;
font-size: 26rpx;
color: #aaa;
}
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.bar { .bar {
width: 100%; width: 100%;
border-top: 1px solid #F4F5F7;
}
.empty {
flex: 1;
justify-content: center;
font-size: 26rpx;
color: #aaa;
} }
} }
</style> </style>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
:clearabled="true" :clearabled="true"
:action-style="searchStyle" :action-style="searchStyle"
bg-color="#fff" bg-color="#fff"
v-model="keyword"
@custom="searchParts" @custom="searchParts"
@search="searchParts" @search="searchParts"
></u-search> ></u-search>
...@@ -13,7 +14,7 @@ ...@@ -13,7 +14,7 @@
<view class="categary"> <view class="categary">
<view class="u-flex u-col-center"> <view class="u-flex u-col-center">
<picker mode="selector" :value="categaryIndex" range-key="label" :range="categary" @click="show = true" @change="changeCategary"> <picker mode="selector" :value="categaryIndex" range-key="label" :range="categary" @click="show = true" @change="changeCategary">
<view class="txt">{{categrayName || '请选择'}}</view> <view class="txt">{{categary[categaryIndex].label || '请选择'}}</view>
</picker> </picker>
<u-icon class="input-icon" color="#2272FF" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon> <u-icon class="input-icon" color="#2272FF" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon>
</view> </view>
...@@ -28,7 +29,7 @@ ...@@ -28,7 +29,7 @@
class="u-flex" class="u-flex"
:scroll-into-view="scrollId" :scroll-into-view="scrollId"
> >
<view :id="`brand${item.id}`" :class="['label-title', { selected: item.id === brandId }]" v-for="(item, index) in brand" :key="index" @click="selectBrand(item)">{{ item.label }}</view> <view :id="`brand${item.brandId}`" :class="['label-title', { selected: item.brandId === brandId }]" v-for="(item, index) in brand" :key="index" @click="selectBrand(item, index)">{{ item.label }}</view>
</scroll-view> </scroll-view>
</view> </view>
<view class="more u-flex"> <view class="more u-flex">
...@@ -66,7 +67,7 @@ ...@@ -66,7 +67,7 @@
<submit-bar <submit-bar
:partNum="partNum" :partNum="partNum"
:num="num" :num="num"
:btnStatus="btnStatus" :btnStatus="partNum > 0"
:show-checked="false" :show-checked="false"
submit-txt="去提交" submit-txt="去提交"
@submit="submit" @submit="submit"
...@@ -76,132 +77,6 @@ ...@@ -76,132 +77,6 @@
</template> </template>
<script> <script>
const categary = [
{
id: 1,
label: "充电桩",
value: 1,
children: [
{
id: 1,
parentId: 1,
label: "沃尔沃",
},
{
id: 2,
parentId: 1,
label: "宝马",
},
{
id: 3,
parentId: 1,
label: "奔驰",
},
{
id: 4,
parentId: 1,
label: "奥迪",
},
{
id: 5,
parentId: 1,
label: "保时捷",
},
],
},
{
id: 2,
label: "空调",
value: 2,
children: [
{
id: 3,
parentId: 2,
label: "美的",
},
{
id: 4,
parentId: 2,
label: "格力",
},
],
},
];
const lists = [
{
id: 1,
name: "正泰漏保",
no: 'NO.202006170015',
desc: '这个空开盒子和其他的空开有什么不一样,这里可以写一下',
num: 1,
min: 1,
max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: true
},
{
id: 1,
name: "挚达广汽充电桩",
no: 'NO.202006170014',
desc: '这个空开盒子和其他的空开有什么不一样,这里可以写一下',
num: 3,
min: 1,
max: 5,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: true
},
{
id: 1,
name: "正泰漏保",
no: 'NO.202006170015NO.202006170015',
desc: '这个充电桩的简介可以写的长一点',
num: 1,
min: 1,
max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: false
},
{
id: 1,
name: "正泰漏保",
no: 'NO.202006170015NO.202006170015',
desc: '这个充电桩的简介可以写的长一点',
num: 1,
min: 1,
max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: false
},
{
id: 1,
name: "正泰漏保",
no: 'NO.202006170015NO.202006170015',
desc: '这个充电桩的简介可以写的长一点',
num: 1,
min: 1,
max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: false
},
{
id: 1,
name: "正泰漏保",
no: 'NO.202006170015NO.202006170015',
desc: '这个充电桩的简介可以写的长一点',
num: 1,
min: 1,
max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: false
}
];
import selectParts from "@/components/select-parts/index" import selectParts from "@/components/select-parts/index"
import submitBar from "@/components/submit-bar/index" import submitBar from "@/components/submit-bar/index"
...@@ -212,18 +87,19 @@ export default { ...@@ -212,18 +87,19 @@ export default {
}, },
data() { data() {
return { return {
keyword: '',
show: false, show: false,
categary: categary, categary: [],
brand: [], brand: [],
categaryIndex: 0, categaryIndex: 0,
categaryId: '',
brandIndex: 0, brandIndex: 0,
brandId: '', brandId: '',
scrollId: '', scrollId: '',
loadStatus: "loadmore", loadStatus: "loadmore",
lists: lists, lists: [],
size: 5, pageSize: 20,
page: 1, pageNumber: 1
count: 1
}; };
}, },
computed: { computed: {
...@@ -232,73 +108,133 @@ export default { ...@@ -232,73 +108,133 @@ export default {
color: "#2272FF" color: "#2272FF"
}; };
}, },
categrayName() {
return this.categary[this.categaryIndex].label
},
// 配件数 // 配件数
partNum() { partNum() {
return this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0) return this.lists.reduce((counter, item) => !item.disabled && item.quantity > 0 ? counter += 1 : counter, 0)
}, },
// 总数 // 总数
num() { num() {
return this.lists.reduce((counter, { checked, num }) => checked ? counter += num : counter, 0) return this.lists.reduce((counter, { disabled, quantity }) => !disabled ? counter += quantity : counter, 0)
},
// 按钮状态
btnStatus() {
const count = this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
return count > 0 || false
} }
}, },
created() { created() {
this.brand = this.categary[0].children this.getCategaryList()
}, },
methods: { methods: {
// 获取品类
getCategaryList() {
this.$u.api.getCategoryList().then(res => {
if (res.code === 200) {
const data = res.data
this.categary = data.list ? data.list.map(v => {
v.label = v.categoryName
return v
}) : []
this.categaryId = this.categary[0].categoryId
this.getBrandList()
}
})
},
// 获取品牌
getBrandList() {
this.$u.api.getBrandList({categoryId: this.categaryId}).then(res => {
if (res.code === 200) {
const data = res.data
this.brand = data.list ? data.list.map(v => {
v.label = v.brandName
return v
}) : []
this.brandId = this.brand[0].brandId
this.lists = []
this.getPartsList()
}
})
},
// 获取配件列表
getPartsList() { getPartsList() {
this.page++; this.page++;
this.loadStatus = "loading"; this.loadStatus = "loading";
const data = [] const params = {
// 模拟加载更多效果 pageNumber: this.pageNumber,
setTimeout(() => { pageSize: this.pageSize,
if (lists.length < this.size || this.count === 3) { categoryId: this.categaryId,
this.loadStatus = "nomore"; brandId: this.brandId,
} else { keyword: this.keyword
this.lists = this.lists.concat(lists); }
this.count++ this.$u.api.getPartsList(params).then(res => {
if (res.code === 200) {
const data = res.data
if (data.length > 0) {
const lists = data.map(v => {
v.quantity = 0
v.disabled = true
v.max = 999
return v
})
this.lists = this.lists.concat(lists)
this.pageNumber++
this.loadStatus = "loadmore" this.loadStatus = "loadmore"
} else {
this.loadStatus = "nomore"
}
} }
}, 1000) })
}, },
// 搜索配件
searchParts(val) { searchParts(val) {
console.log("val", val); this.keyword = val
this.lists = []
this.getPartsList()
}, },
// 选择品类
changeCategary(data) { changeCategary(data) {
this.categaryIndex = data.detail.value this.categaryIndex = data.detail.value
this.brand = this.categary[this.categaryIndex].children || [] this.categaryId = this.categary[this.categaryIndex || 0].categoryId
this.brandIndex = '' this.brandIndex = ''
this.show = false this.show = false
this.getBrandList()
this.getPartsList()
}, },
// 下拉选择品牌
changeBrand(data) { changeBrand(data) {
this.brandIndex = data.detail.value this.brandIndex = data.detail.value
this.brandId = this.brand[this.brandIndex].id this.brandId = this.brand[this.brandIndex].brandId
this.scrollId = `brand${this.brandId}` this.scrollId = `brand${this.brandId}`
this.lists = []
this.getPartsList()
}, },
selectBrand(item) { // 点击选择品牌
selectBrand(item, index) {
this.scrollId = '' this.scrollId = ''
this.brandIndex = '' this.brandIndex = index
this.brandId = item.id this.brandId = item.brandId
this.lists = []
this.getPartsList()
}, },
// 加载更多
loadMore() { loadMore() {
if (this.loadStatus !== "nomore") { if (this.loadStatus !== "nomore") {
this.getPartsList(); this.getPartsList();
} }
}, },
// 加入申请
apply(index) { apply(index) {
this.$set(this.lists[index], 'disabled', false) this.$set(this.lists[index], 'disabled', false)
}, },
// 改变数量
numChange(val, index) { numChange(val, index) {
this.$set(this.lists[index], 'num', val) this.$set(this.lists[index], 'quantity', val)
}, },
// 提交
submit() { submit() {
const lists = this.lists.filter(v => !v.disabled).map(v => {
return {
part_id: v.id,
quantity: v.quantity
}
})
console.log("lists", lists)
console.log('submit') console.log('submit')
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment