From 3092c6bc9caef4b342785937e3efeaa408ceb072 Mon Sep 17 00:00:00 2001
From: Hong <1470048117@qq.com>
Date: Thu, 1 Aug 2024 16:11:16 +0800
Subject: [PATCH] =?UTF-8?q?8.1(=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../repair/reservation/auxiliary/material.vue | 210 ++++++++++--------
 1 file changed, 113 insertions(+), 97 deletions(-)

diff --git a/pages/repair/repair/reservation/auxiliary/material.vue b/pages/repair/repair/reservation/auxiliary/material.vue
index ec185bb..850f9de 100644
--- a/pages/repair/repair/reservation/auxiliary/material.vue
+++ b/pages/repair/repair/reservation/auxiliary/material.vue
@@ -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 {
@@ -112,19 +129,19 @@
 				materialList: [],
 				tabsList: [{
 					name: '自供'
-				},{
+				}, {
 					name: '外采'
 				}],
 				dataList: []
 			};
 		},
 		onLoad(option) {
-				this.getCategoryList()
-				if(option.type) {
-					this.checkIndex = option.index
-					this.type = option.type
-					this.keyName = option.keyName
-				}
+			this.getCategoryList()
+			if (option.type) {
+				this.checkIndex = option.index
+				this.type = option.type
+				this.keyName = option.keyName
+			}
 			uni.setNavigationBarTitle({
 				title: option.title
 			})
@@ -138,7 +155,7 @@
 				this.$refs.paging.reload()
 			},
 			searchChange(e) {
-				
+
 				this.$refs.paging.reload()
 			},
 			checkLeftIndex(index) {
@@ -155,18 +172,18 @@
 			queryList(pageNo, pageSize) {
 				this.cateId = this.categoryList[this.leftIndex].id
 				let form = {}
-				if(this.searchValue) {
+				if (this.searchValue) {
 					form = {
 						page: pageNo,
-						limit: pageSize, 
+						limit: pageSize,
 						type: this.current + 1,
 						keywords: this.searchValue
 					}
 				} else {
 					form = {
 						page: pageNo,
-						limit: pageSize, 
-						type: this.current + 1, 
+						limit: pageSize,
+						type: this.current + 1,
 						cateId: this.cateId
 					}
 				}
@@ -175,44 +192,47 @@
 					arr.forEach(item => {
 						item.value = 0
 					})
+					console.log(arr);
 					this.$refs.paging.complete(arr)
 				}).catch(err => {
 					this.$refs.paging.complete(false)
 				})
 			},
-			tabChange(item){
+			tabChange(item) {
 				this.current = item.index
 				this.leftIndex = 0
 				this.$refs.paging.reload()
 			},
 			add(item) {
-				item.value ++
-				this.productNum ++
+				item.value++
+				this.productNum++
 				this.materialList.push({
-					accessoryId: item.id, 
+					accessoryId: item.id,
 					isInMerchant: true,
-					name: item.name, 
-					num: item.value, 
+					name: item.name,
+					num: item.value,
 					price: item.price,
 					procurePrice: item.price
 				})
 			},
-			minus(item) {
+			minus(item, index) {
 				let num = 0
-				item.value --
-				if(item.value == 0) {
-					this.materialList.forEach((t, index) => {
-						if(t.accessoryId == item.id) this.materialList.splice(index, 1)
-						num += t.num
-					})
-					this.productNum = num
-				}
+				item.value--
+				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
-				item.value ++
+				item.value++
 				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
 				})
 				this.productNum = num
@@ -220,7 +240,7 @@
 			valChange(n) {
 				let num = 0
 				this.materialList.forEach(item => {
-					if(item.accessoryId == n.name) {
+					if (item.accessoryId == n.name) {
 						item.num = n.value
 						item.procurePrice = item.price * item.num
 					}
@@ -229,16 +249,16 @@
 				this.productNum = num
 			},
 			submit() {
-				if(this.type) {
+				if (this.type) {
 					let packageForm = this.packageForm
 					let accessoryList = packageForm[this.keyName][this.checkIndex].accessoryList
 					accessoryList = [...accessoryList, ...this.materialList]
 					let newArr = []
 					accessoryList.forEach(item => {
 						let dataItem = item;
-					  if (newArr.length > 0) {
+						if (newArr.length > 0) {
 							let filterValue = newArr.filter(v => {
-					      return v.accessoryId === dataItem.accessoryId
+								return v.accessoryId === dataItem.accessoryId
 							})
 							if (filterValue.length > 0) {
 								newArr.forEach(n => {
@@ -261,9 +281,9 @@
 					let newArr = []
 					accessoryList.forEach(item => {
 						let dataItem = item;
-					  if (newArr.length > 0) {
+						if (newArr.length > 0) {
 							let filterValue = newArr.filter(v => {
-					      return v.accessoryId === dataItem.accessoryId
+								return v.accessoryId === dataItem.accessoryId
 							})
 							if (filterValue.length > 0) {
 								newArr.forEach(n => {
@@ -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;
-						background-color: #f5f5f5;
-						border-radius: 22rpx;
-						text-align: center;
-					}
-					.minus {
-						border-radius: 50%;
-						transform: translateX(100%);
-					}
-					.plus {
-						border-radius: 50%;
-						transform: translateX(-100%);
-					}
+					width: 142rpx;
+					font-size: 32rpx;
+					padding: 4rpx;
+					background-color: #f5f5f5;
+					border-radius: 22rpx;
 				}
+
 				image {
 					width: 192rpx;
 					height: 192rpx;
 					border-radius: 8rpx;
 				}
 			}
+		}
+
+		.right {
+			width: 558rpx;
+
 			.product-item_1 {
-				padding: 16rpx 24rpx 16rpx 0;
+				padding: 16rpx;
 				width: 558rpx;
+
 				.right {
-					padding:0 16rpx;
+					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;
-						background-color: #f5f5f5;
-						border-radius: 22rpx;
-						text-align: center;
-					}
-					.minus {
-						border-radius: 50%;
-						transform: translateX(100%);
-					}
-					.plus {
-						border-radius: 50%;
-						transform: translateX(-100%);
-					}
+					width: 142rpx;
+					font-size: 32rpx;
+					padding: 4rpx;
+					background-color: #f5f5f5;
+					border-radius: 22rpx;
 				}
+
 				image {
 					width: 192rpx;
 					height: 192rpx;
@@ -379,11 +394,12 @@
 			}
 		}
 	}
-	
+
 	.bot-box {
 		padding: 18rpx 24rpx 0 24rpx;
 		width: 750rpx;
 		z-index: 1000;
+
 		.btn {
 			margin: 0;
 			width: 480rpx;
@@ -391,4 +407,4 @@
 			border-radius: 48rpx;
 		}
 	}
-</style>
+</style>
\ No newline at end of file