qichexitong/car-system-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8.1(优化

Browse Source
This commit is contained in:
Hong
2024-08-01 16:11:16 +08:00
parent a03267e764
commit 3092c6bc9c
1 changed files with 113 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
pages/repair/repair/reservation/auxiliary/material.vue
View File

@@ -1,12 +1,15 @@
<!-- 添加材料页面 --> <!-- 添加材料页面 -->
<template> <template>
<view> <view style="width: 750rpx;overflow: hidden;">
<view class="bg-white"> <view class="bg-white">
<u-tabs :current="current" :list="tabsList" lineWidth="29" @click="tabChange" lineColor="#111111" :fixed="false" :scrollable="false"></u-tabs> <u-tabs :current="current" :list="tabsList" lineWidth="29" @click="tabChange" lineColor="#111111"
:fixed="false" :scrollable="false"></u-tabs>
<view class="search-box flex align-center"> <view class="search-box flex align-center">
<u-input @change="searchChange" v-model="searchValue" shape="circle" placeholder="请输入材料名" :customStyle="{background: '#f5f5f5',height: '64rpx'}" border="none"> <u-input @change="searchChange" v-model="searchValue" shape="circle" placeholder="请输入材料名"
:customStyle="{background: '#f5f5f5',height: '64rpx'}" border="none">
<template slot="prefix"> <template slot="prefix">
<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/images/icon/search_primary.png" mode=""></image> <image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;"
src="@/static/images/icon/search_primary.png" mode=""></image>
</template> </template>
</u-input> </u-input>
<view v-show="searchValue" class="ml-2 f-28" @click="closeSearch"> <view v-show="searchValue" class="ml-2 f-28" @click="closeSearch">
@@ -16,15 +19,18 @@
</view> </view>
<view class="content-list flex"> <view class="content-list flex">
<view class="left" v-if="!searchValue"> <view class="left" v-if="!searchValue">
<view @click="checkLeftIndex(index)" :style="index == leftIndex && 'background: #fff'" class="left-item flex align-center justify-center f-30 c000" v-for="(item,index) in categoryList" :key="index"> <view @click="checkLeftIndex(index)" :style="index == leftIndex && 'background: #fff'"
class="left-item flex align-center justify-center f-30 c000" v-for="(item,index) in categoryList"
:key="index">
{{item.name}} {{item.name}}
</view> </view>
</view> </view>
<view class="right bg-white" style="padding: 24rpx;"> <view class=" " :class="['bg-white',searchValue?'right_2':'right']">
<z-paging :auto="false" use-page-scroll ref="paging" v-model="dataList" @query="queryList"> <z-paging :auto="false" use-page-scroll ref="paging" v-model="dataList" @query="queryList">
<view v-if="searchValue" class="product-item bg-white flex align-center" v-for="(item,index) in dataList" :key="item.id"> <view v-if="searchValue" class="product-item bg-white flex align-center"
v-for="(item,index) in dataList" :key="item.id">
<view class="left"> <view class="left">
<image src="@/static/htz-image-upload/play.png" mode=""></image> <image :src="item.image" mode="aspectFill"></image>
</view> </view>
<view class="right flex-column justify-between"> <view class="right flex-column justify-between">
<view class="item f-32 c111"> <view class="item f-32 c111">
@@ -40,20 +46,24 @@
<view class="f-38 red fw-b"> <view class="f-38 red fw-b">
￥{{item.price}} ￥{{item.price}}
</view> </view>
<view class="price-num flex align-center" v-if="item.value > 0"> <view class="price-num flex align-center justify-between" v-if="item.value > 0">
<u-icon @click="minus(item)" class="minus" name="minus-circle-fill" color="#13AFA8" size="20"></u-icon> <u-icon @click="minus(item,index)" class="minus" name="minus-circle-fill"
color="#13AFA8" size="20"></u-icon>
<view class="value-box"> <view class="value-box">
{{item.value}} {{item.value}}
</view> </view>
<u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8" size="20"></u-icon> <u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8"
size="20"></u-icon>
</view> </view>
<u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20" @click="add(item)"></u-icon> <u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20"
@click="add(item)"></u-icon>
</view> </view>
</view> </view>
</view> </view>
<view v-if="!searchValue" class="product-item_1 bg-white flex align-center" v-for="(item,index) in dataList" :key="item.id"> <view v-if="!searchValue" class="product-item_1 bg-white flex align-center"
v-for="(item,index) in dataList" :key="item.id">
<view class="left"> <view class="left">
<image src="@/static/htz-image-upload/play.png" mode=""></image> <image :src="item.image" mode="aspectFill"></image>
</view> </view>
<view class="right flex-column justify-between"> <view class="right flex-column justify-between">
<view class="item f-32 c111"> <view class="item f-32 c111">
@@ -69,14 +79,17 @@
<view class="f-38 red fw-b"> <view class="f-38 red fw-b">
￥{{item.price}} ￥{{item.price}}
</view> </view>
<view class="price-num flex align-center" v-if="item.value > 0"> <view class="price-num flex align-center justify-between" v-if="item.value > 0">
<u-icon @click="minus(item)" class="minus" name="minus-circle-fill" color="#13AFA8" size="20"></u-icon> <u-icon @click="minus(item,index)" class="minus" name="minus-circle-fill"
color="#13AFA8" size="20"></u-icon>
<view class="value-box"> <view class="value-box">
{{item.value}} {{item.value}}
</view> </view>
<u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8" size="20"></u-icon> <u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8"
size="20"></u-icon>
</view> </view>
<u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20" @click="add(item)"></u-icon> <u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20"
@click="add(item)"></u-icon>
</view> </view>
</view> </view>
</view> </view>
@@ -90,14 +103,18 @@
</view> </view>
<u-button @click="submit" class="btn" color="#13AFA8" shape="circel">提交</u-button> <u-button @click="submit" class="btn" color="#13AFA8" shape="circel">提交</u-button>
</view> </view>
<view style="height: 64rpx;" />
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { accessoryList, categoryList } from '@/api/system/config' import {
import { mapGetters } from 'vuex' accessoryList,
categoryList
} from '@/api/system/config'
import {
mapGetters
} from 'vuex'
export default { export default {
data() { data() {
return { return {
@@ -112,19 +129,19 @@
materialList: [], materialList: [],
tabsList: [{ tabsList: [{
name: '自供' name: '自供'
},{ }, {
name: '外采' name: '外采'
}], }],
dataList: [] dataList: []
}; };
}, },
onLoad(option) { onLoad(option) {
this.getCategoryList() this.getCategoryList()
if(option.type) { if (option.type) {
this.checkIndex = option.index this.checkIndex = option.index
this.type = option.type this.type = option.type
this.keyName = option.keyName this.keyName = option.keyName
} }
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: option.title title: option.title
}) })
@@ -138,7 +155,7 @@
this.$refs.paging.reload() this.$refs.paging.reload()
}, },
searchChange(e) { searchChange(e) {
this.$refs.paging.reload() this.$refs.paging.reload()
}, },
checkLeftIndex(index) { checkLeftIndex(index) {
@@ -155,18 +172,18 @@
queryList(pageNo, pageSize) { queryList(pageNo, pageSize) {
this.cateId = this.categoryList[this.leftIndex].id this.cateId = this.categoryList[this.leftIndex].id
let form = {} let form = {}
if(this.searchValue) { if (this.searchValue) {
form = { form = {
page: pageNo, page: pageNo,
limit: pageSize, limit: pageSize,
type: this.current + 1, type: this.current + 1,
keywords: this.searchValue keywords: this.searchValue
} }
} else { } else {
form = { form = {
page: pageNo, page: pageNo,
limit: pageSize, limit: pageSize,
type: this.current + 1, type: this.current + 1,
cateId: this.cateId cateId: this.cateId
} }
} }
@@ -175,44 +192,47 @@
arr.forEach(item => { arr.forEach(item => {
item.value = 0 item.value = 0
}) })
console.log(arr);
this.$refs.paging.complete(arr) this.$refs.paging.complete(arr)
}).catch(err => { }).catch(err => {
this.$refs.paging.complete(false) this.$refs.paging.complete(false)
}) })
}, },
tabChange(item){ tabChange(item) {
this.current = item.index this.current = item.index
this.leftIndex = 0 this.leftIndex = 0
this.$refs.paging.reload() this.$refs.paging.reload()
}, },
add(item) { add(item) {
item.value ++ item.value++
this.productNum ++ this.productNum++
this.materialList.push({ this.materialList.push({
accessoryId: item.id, accessoryId: item.id,
isInMerchant: true, isInMerchant: true,
name: item.name, name: item.name,
num: item.value, num: item.value,
price: item.price, price: item.price,
procurePrice: item.price procurePrice: item.price
}) })
}, },
minus(item) { minus(item, index) {
let num = 0 let num = 0
item.value -- item.value--
if(item.value == 0) { this.materialList.forEach((t, index) => {
this.materialList.forEach((t, index) => { if (item.value == 0) {
if(t.accessoryId == item.id) this.materialList.splice(index, 1) if (t.accessoryId == item.id) this.materialList.splice(index, 1)
num += t.num }
}) console.log(t);
this.productNum = num num += t.num
} })
console.log(num);
this.productNum = num
}, },
plus(item) { plus(item) {
let num = 0 let num = 0
item.value ++ item.value++
this.materialList.forEach((t, index) => { this.materialList.forEach((t, index) => {
if(t.accessoryId == item.id) t.num = item.value if (t.accessoryId == item.id) t.num = item.value
num += t.num num += t.num
}) })
this.productNum = num this.productNum = num
@@ -220,7 +240,7 @@
valChange(n) { valChange(n) {
let num = 0 let num = 0
this.materialList.forEach(item => { this.materialList.forEach(item => {
if(item.accessoryId == n.name) { if (item.accessoryId == n.name) {
item.num = n.value item.num = n.value
item.procurePrice = item.price * item.num item.procurePrice = item.price * item.num
} }
@@ -229,16 +249,16 @@
this.productNum = num this.productNum = num
}, },
submit() { submit() {
if(this.type) { if (this.type) {
let packageForm = this.packageForm let packageForm = this.packageForm
let accessoryList = packageForm[this.keyName][this.checkIndex].accessoryList let accessoryList = packageForm[this.keyName][this.checkIndex].accessoryList
accessoryList = [...accessoryList, ...this.materialList] accessoryList = [...accessoryList, ...this.materialList]
let newArr = [] let newArr = []
accessoryList.forEach(item => { accessoryList.forEach(item => {
let dataItem = item; let dataItem = item;
if (newArr.length > 0) { if (newArr.length > 0) {
let filterValue = newArr.filter(v => { let filterValue = newArr.filter(v => {
return v.accessoryId === dataItem.accessoryId return v.accessoryId === dataItem.accessoryId
}) })
if (filterValue.length > 0) { if (filterValue.length > 0) {
newArr.forEach(n => { newArr.forEach(n => {
@@ -261,9 +281,9 @@
let newArr = [] let newArr = []
accessoryList.forEach(item => { accessoryList.forEach(item => {
let dataItem = item; let dataItem = item;
if (newArr.length > 0) { if (newArr.length > 0) {
let filterValue = newArr.filter(v => { let filterValue = newArr.filter(v => {
return v.accessoryId === dataItem.accessoryId return v.accessoryId === dataItem.accessoryId
}) })
if (filterValue.length > 0) { if (filterValue.length > 0) {
newArr.forEach(n => { newArr.forEach(n => {
@@ -291,12 +311,15 @@
page { page {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.search-box { .search-box {
padding: 24rpx; padding: 24rpx;
} }
.content-list { .content-list {
.left { .left {
width: 192rpx; width: 192rpx;
.left-item { .left-item {
padding: 0 24rpx; padding: 0 24rpx;
width: 192rpx; width: 192rpx;
@@ -304,73 +327,65 @@
text-align: center; text-align: center;
} }
} }
.right {
width: 100%; .right_2 {
width: 750rpx;
.product-item { .product-item {
margin: 24rpx; width: 750rpx;
padding: 32rpx 24rpx; padding: 32rpx 24rpx;
.right { .right {
margin-left: 16rpx; margin-left: 16rpx;
width: 500rpx; width: 540rpx;
height: 192rpx; height: 192rpx;
.item { .item {
line-height: 1; line-height: 1;
} }
} }
.price-num { .price-num {
.value-box { width: 142rpx;
padding: 0 15rpx; font-size: 32rpx;
width: 142rpx; padding: 4rpx;
height: 44rpx; background-color: #f5f5f5;
background-color: #f5f5f5; border-radius: 22rpx;
border-radius: 22rpx;
text-align: center;
}
.minus {
border-radius: 50%;
transform: translateX(100%);
}
.plus {
border-radius: 50%;
transform: translateX(-100%);
}
} }
image { image {
width: 192rpx; width: 192rpx;
height: 192rpx; height: 192rpx;
border-radius: 8rpx; border-radius: 8rpx;
} }
} }
}
.right {
width: 558rpx;
.product-item_1 { .product-item_1 {
padding: 16rpx 24rpx 16rpx 0; padding: 16rpx;
width: 558rpx; width: 558rpx;
.right { .right {
padding:0 16rpx; padding: 0 0 0 16rpx;
width: 350rpx; width: 350rpx;
height: 192rpx; height: 192rpx;
.item { .item {
line-height: 1; line-height: 1;
} }
} }
.price-num { .price-num {
width: 200rpx; width: 142rpx;
.value-box { font-size: 32rpx;
padding: 0 15rpx; padding: 4rpx;
width: 142rpx; background-color: #f5f5f5;
height: 44rpx; border-radius: 22rpx;
background-color: #f5f5f5;
border-radius: 22rpx;
text-align: center;
}
.minus {
border-radius: 50%;
transform: translateX(100%);
}
.plus {
border-radius: 50%;
transform: translateX(-100%);
}
} }
image { image {
width: 192rpx; width: 192rpx;
height: 192rpx; height: 192rpx;
@@ -379,11 +394,12 @@
} }
} }
} }
.bot-box { .bot-box {
padding: 18rpx 24rpx 0 24rpx; padding: 18rpx 24rpx 0 24rpx;
width: 750rpx; width: 750rpx;
z-index: 1000; z-index: 1000;
.btn { .btn {
margin: 0; margin: 0;
width: 480rpx; width: 480rpx;
@@ -391,4 +407,4 @@
border-radius: 48rpx; border-radius: 48rpx;
} }
} }
</style> </style>