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

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

@@ -1,12 +1,15 @@
<!-- 添加材料页面 -->
<template>
<view>
<view style="width: 750rpx;overflow: hidden;">
<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">
<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">
<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>
</u-input>
<view v-show="searchValue" class="ml-2 f-28" @click="closeSearch">
@@ -16,15 +19,18 @@
</view>
<view class="content-list flex">
<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}}
</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">
<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">
<image src="@/static/htz-image-upload/play.png" mode=""></image>
<image :src="item.image" mode="aspectFill"></image>
</view>
<view class="right flex-column justify-between">
<view class="item f-32 c111">
@@ -40,20 +46,24 @@
<view class="f-38 red fw-b">
￥{{item.price}}
</view>
<view class="price-num flex align-center" v-if="item.value > 0">
<u-icon @click="minus(item)" class="minus" name="minus-circle-fill" color="#13AFA8" size="20"></u-icon>
<view class="price-num flex align-center justify-between" v-if="item.value > 0">
<u-icon @click="minus(item,index)" class="minus" name="minus-circle-fill"
color="#13AFA8" size="20"></u-icon>
<view class="value-box">
{{item.value}}
</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>
<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 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">
<image src="@/static/htz-image-upload/play.png" mode=""></image>
<image :src="item.image" mode="aspectFill"></image>
</view>
<view class="right flex-column justify-between">
<view class="item f-32 c111">
@@ -69,14 +79,17 @@
<view class="f-38 red fw-b">
￥{{item.price}}
</view>
<view class="price-num flex align-center" v-if="item.value > 0">
<u-icon @click="minus(item)" class="minus" name="minus-circle-fill" color="#13AFA8" size="20"></u-icon>
<view class="price-num flex align-center justify-between" v-if="item.value > 0">
<u-icon @click="minus(item,index)" class="minus" name="minus-circle-fill"
color="#13AFA8" size="20"></u-icon>
<view class="value-box">
{{item.value}}
</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>
<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>
@@ -90,14 +103,18 @@
</view>
<u-button @click="submit" class="btn" color="#13AFA8" shape="circel">提交</u-button>
</view>
<view style="height: 64rpx;" />
</view>
</view>
</template>
<script>
import { accessoryList, categoryList } from '@/api/system/config'
import { mapGetters } from 'vuex'
import {
accessoryList,
categoryList
} from '@/api/system/config'
import {
mapGetters
} from 'vuex'
export default {
data() {
return {
@@ -175,6 +192,7 @@
arr.forEach(item => {
item.value = 0
})
console.log(arr);
this.$refs.paging.complete(arr)
}).catch(err => {
this.$refs.paging.complete(false)
@@ -197,16 +215,18 @@
procurePrice: item.price
})
},
minus(item) {
minus(item, index) {
let num = 0
item.value--
if(item.value == 0) {
this.materialList.forEach((t, index) => {
if (item.value == 0) {
if (t.accessoryId == item.id) this.materialList.splice(index, 1)
}
console.log(t);
num += t.num
})
console.log(num);
this.productNum = num
}
},
plus(item) {
let num = 0
@@ -291,12 +311,15 @@
page {
background-color: #f5f5f5;
}
.search-box {
padding: 24rpx;
}
.content-list {
.left {
width: 192rpx;
.left-item {
padding: 0 24rpx;
width: 192rpx;
@@ -304,73 +327,65 @@
text-align: center;
}
}
.right {
width: 100%;
.right_2 {
width: 750rpx;
.product-item {
margin: 24rpx;
width: 750rpx;
padding: 32rpx 24rpx;
.right {
margin-left: 16rpx;
width: 500rpx;
width: 540rpx;
height: 192rpx;
.item {
line-height: 1;
}
}
.price-num {
.value-box {
padding: 0 15rpx;
width: 142rpx;
height: 44rpx;
font-size: 32rpx;
padding: 4rpx;
background-color: #f5f5f5;
border-radius: 22rpx;
text-align: center;
}
.minus {
border-radius: 50%;
transform: translateX(100%);
}
.plus {
border-radius: 50%;
transform: translateX(-100%);
}
}
image {
width: 192rpx;
height: 192rpx;
border-radius: 8rpx;
}
}
.product-item_1 {
padding: 16rpx 24rpx 16rpx 0;
width: 558rpx;
}
.right {
padding:0 16rpx;
width: 558rpx;
.product-item_1 {
padding: 16rpx;
width: 558rpx;
.right {
padding: 0 0 0 16rpx;
width: 350rpx;
height: 192rpx;
.item {
line-height: 1;
}
}
.price-num {
width: 200rpx;
.value-box {
padding: 0 15rpx;
width: 142rpx;
height: 44rpx;
font-size: 32rpx;
padding: 4rpx;
background-color: #f5f5f5;
border-radius: 22rpx;
text-align: center;
}
.minus {
border-radius: 50%;
transform: translateX(100%);
}
.plus {
border-radius: 50%;
transform: translateX(-100%);
}
}
image {
width: 192rpx;
height: 192rpx;
@@ -384,6 +399,7 @@
padding: 18rpx 24rpx 0 24rpx;
width: 750rpx;
z-index: 1000;
.btn {
margin: 0;
width: 480rpx;