From fad44dd3c5d3ba1a0be83e08aafcb3cc7b41ead4 Mon Sep 17 00:00:00 2001
From: GaoHao <1210693421@qq.com>
Date: Mon, 23 Sep 2024 15:16:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E6=8D=9F=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/my-components/my-reportDamage.vue | 306 +++++++++++++++++++
 pageInvoicing/index/index.vue                |  32 +-
 2 files changed, 336 insertions(+), 2 deletions(-)
 create mode 100644 components/my-components/my-reportDamage.vue

diff --git a/components/my-components/my-reportDamage.vue b/components/my-components/my-reportDamage.vue
new file mode 100644
index 0000000..9c70e87
--- /dev/null
+++ b/components/my-components/my-reportDamage.vue
@@ -0,0 +1,306 @@
+<template>
+	<up-popup customStyle="overflow: hidden;" :show="show" round="20" mode="bottom" @close="close" @open="open">
+	    <view class="reportDamage">
+			<view class="reportDamage_head">
+				<view class="reportDamage_title">{{item.title}}</view>
+				<up-icon name="close-circle-fill" color="#333" size="25" @tap="show=false"></up-icon>
+			</view>
+			<view class="reportDamage_content">
+				<view class="reportDamage_cell">
+					<view class="cell_lable">
+						<up-image class="thumbnail" radius="10" :show-loading="true" :src="item.thumbnail"></up-image>
+						<view>{{item.name}}</view>
+					</view>
+					<view class="cell_value">
+						<up-icon name="minus-circle" color="#999" size="25" @tap="minus"></up-icon>
+						<view class="text">{{vdata.num}}</view>
+						<up-icon name="plus-circle-fill" color="#318AFE" size="25" @tap="plus"></up-icon>
+					</view>
+				</view>
+				<view class="reportDamage_cell">
+					<view class="cell_lable">商品单位</view>
+					<view class="cell_value"><view>杯</view> <up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
+				</view>
+				<view class="reportDamage_cell">
+					<view class="cell_lable">报损图片</view>
+					<view class="cell_value file">
+						
+						<view class="file_img" v-for="(item,index) in vdata.imgUrlList">
+							<up-image class="file_img_item" :show-loading="true" :src="item"></up-image>
+							<view class="del" @tap="del(index)">
+								<up-icon name="trash" color="#fff" size="25" @tap="plus"></up-icon>
+							</view>
+						</view>
+						<view class="file" @tap="chooseAndUploadAvatar()">
+							<up-icon name="camera-fill" color="#E5E5E5" size="35"></up-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="reportDamage_footer">
+				<view class="reportDamage_btn" @tap="affirm">确认</view>
+			</view>
+		</view>
+	</up-popup>
+</template>
+
+<script setup>
+	import {
+		computed,
+		ref,
+		reactive,
+		watch
+	} from 'vue';
+	import { $uploadFile } from '@/http/yskApi/file.js'
+	const props = defineProps({
+		show:{
+			type: Boolean,
+			default: false
+		},
+		item:{
+			type: Object,
+		},
+			
+	})
+	const emits = defineEmits(['close','open',"affirm"])
+	const vdata = reactive({
+		num: 1,
+		imgUrlList: [],
+	})
+	watch(()=>props.show,(newval)=>{
+		show.value=newval
+	})
+	let show = ref(props.show)
+
+	function close() {
+		show.value = false
+		emits('close')
+	}
+	
+	/**
+	 * 打开报损弹窗
+	 */
+	function open() {
+		show.value = true
+		emits('open')
+	}
+
+	/**
+	 * 报损数量减少
+	 */
+	function minus() {
+		if ( vdata.num <= 1) {
+			return;
+		}
+		vdata.num--;
+	}
+	
+	/**
+	 * 报损数量增加
+	 */
+	function plus() {
+		vdata.num++;		
+	}
+	
+	
+	/**
+	 * 删除报损图片
+	 */
+	function del ( index ) {
+		vdata.imgUrlList.splice(index,1)
+	}
+	
+	/**
+	 * 上传报损图片
+	 */
+	function chooseAndUploadAvatar () {
+		if ( vdata.imgUrlList.length >= 6 ) {
+			uni.showToast({
+				title:'最多只可以上传六张',
+				icon:'none'
+			})
+			return;
+		}
+		// 选择图片
+		uni.chooseImage({
+		    count: 1, // 默认为1，只选择一张图片
+			sizeType: ['original', 'compressed'], // 图片质量，原图或压缩
+			sourceType: ['album', 'camera'], // 图片来源，相册或相机
+		    success: (res) => {
+		      let file = res.tempFiles[0];
+			  console.log(res)
+			 $uploadFile(file).then(res => {
+			 	console.log(res);
+				vdata.imgUrlList.push(res.data[0])
+				
+			 }).catch(res=>{
+			 	console.log(res);
+			 	if(res.errMsg){
+			 		uni.showToast({
+			 			title:'图片大小超出限制',
+			 			icon:'error'
+			 		})
+			 	}
+			 	
+			 })
+		    },
+		    fail: chooseImageError => {
+		      // 选择图片失败处理逻辑
+		      console.log('choose image fail:', chooseImageError);
+		    }
+		});
+	}
+	
+	/**
+	 * 确认
+	 */
+	function affirm () {
+		emits('affirm')
+	}
+	
+	defineExpose({
+		close,
+		open,
+		affirm
+	})
+</script>
+
+<style lang="scss">
+	.mask {
+		background-color: rgba(51, 51, 51, .5);
+	}
+	::v-deep .u-popup__content{
+		// background-color: transparent;
+		
+	}
+	.reportDamage{
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		.reportDamage_head{
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 32rpx;
+			box-sizing: border-box;
+			background: #F4F4F4;
+			.reportDamage_title{
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #333333;
+			}
+		}
+	
+		.reportDamage_content{
+			display: flex;
+			flex-direction: column;
+			background-color: #fff;
+			
+			.reportDamage_cell{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 32rpx;
+				box-sizing: border-box;
+				font-family: Source Han Sans CN, Source Han Sans CN;
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #333333;
+				border-bottom: 2rpx solid #E5E5E5;
+				.cell_lable{
+					display: flex;
+					align-items: center;
+					flex-shrink: 0;
+					.thumbnail{
+						width: 112rpx;
+						height: 112rpx;
+						margin-right: 24rpx;
+					}
+					::v-deep .u-image,.u-image__loading,.u-image__image{
+						width: 100%!important;
+						height: 100%!important;
+					}
+					::v-deep uni-image{
+						width: 112rpx!important;
+						height: 112rpx!important;
+					}
+				}
+				.cell_value{
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					flex-wrap: wrap;
+					.text{
+						margin-left: 20rpx;
+						margin-right: 20rpx;
+					}
+					.file{
+						padding: 30rpx;
+						border-radius: 8rpx 8rpx 8rpx 8rpx;
+						border: 2rpx solid #E5E5E5;
+						box-sizing: border-box;
+						margin-left: 20rpx;
+					}
+					.file_img{
+						width: 120rpx;
+						height: 120rpx;
+						margin-left: 20rpx;
+						margin-bottom: 20rpx;
+						position: relative;
+						border-radius: 10rpx;
+						overflow: hidden;
+						.del{
+							width: 100%;
+							height: 100%;
+							position: absolute;
+							top: 0;
+							left: 0;
+							background-color: rgba(0, 0, 0, 0.2);
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						}
+						.file_img_item{
+							width: 120rpx;
+							height: 120rpx;
+							
+						}
+						::v-deep .u-image,.u-image__loading,.u-image__image{
+							width: 100%!important;
+							height: 100%!important;
+						}
+						::v-deep uni-image{
+							width: 120rpx!important;
+							height: 120rpx!important;
+						}
+					}
+				}
+				.cell_value.file{
+					// flex-direction: row-reverse;
+					// justify-content: flex-start;
+				}
+			}
+			.reportDamage_cell:last-child{
+				border-bottom: none;
+			}
+		}
+		.reportDamage_footer{
+			background-color: #fff;
+			padding: 32rpx;
+			padding-bottom: 68rpx;
+			box-sizing: border-box;
+		}
+		.reportDamage_btn{
+			width: 100%;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			background: #318AFE;
+			border-radius: 40rpx 40rpx 40rpx 40rpx;
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #FFFFFF;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pageInvoicing/index/index.vue b/pageInvoicing/index/index.vue
index 3576166..4638b51 100644
--- a/pageInvoicing/index/index.vue
+++ b/pageInvoicing/index/index.vue
@@ -71,12 +71,14 @@
 	</view>
 
 	<my-action-sheet @itemClick="sheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
+	<my-reportDamage ref="reportDamage" :item="report.data" @affirm="affirm"></my-reportDamage>
 </template>
 
 <script setup>
 	import color from '@/commons/color.js';
 	import myEmpty from '../components/empty.vue';
 	import productItem from './components/product-item.vue';
+	import myReportDamage from '@/components/my-components/my-reportDamage';
 	import myButton from '@/components/my-components/my-button';
 	import myActionSheet from '@/components/my-components/my-action-sheet';
 	import {$getStockOperate} from '@/http/yskApi/invoicing.js'
@@ -85,7 +87,7 @@
 		onReady,
 		onShow,
 		onPageScroll,
-		onPullDownRefresh
+		onPullDownRefresh,
 	} from '@dcloudio/uni-app';
 	import go from '@/commons/utils/go.js'
 	import {
@@ -101,8 +103,25 @@
 	}
 	let refMoreSheet = ref(null)
 	const actionSheet = reactive({
-		list: ['编辑', '清点', '入库', '出库', '删除']
+		list: ['报损', '编辑', '清点', '入库', '出库', '删除'],
 	})
+	
+	let reportDamage = ref(null)
+	const report = reactive({
+		data: {
+			thumbnail: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240918/a17a62b7b55a4b65a2a2542050672b34.png',
+			name: "美式咖啡",
+			title: "商品报损",
+			unit: "杯",
+		},
+	})
+	/**
+	 * 报损确认
+	 */
+	function affirm () {
+		console.log(2)
+	}
+	
 
 	function moreShow() {
 		console.log(refMoreSheet.value);
@@ -110,6 +129,15 @@
 	}
 	function sheetClick(index){
 		console.log(index);
+		// 报损
+		switch (index){
+			case 0:
+				//打开报损弹窗
+				reportDamage.value.open();
+				break;
+			default:
+				break;
+		}
 	}
 	const product = reactive({
 		list: new Array(1).fill(1)