diff --git a/canteen/components/lf-previewImage/lf-previewImage.vue b/canteen/components/lf-previewImage/lf-previewImage.vue
new file mode 100644
index 0000000..0143b20
--- /dev/null
+++ b/canteen/components/lf-previewImage/lf-previewImage.vue
@@ -0,0 +1,230 @@
+<template>
+	<view>
+		<swiper class="swiper" :animation="animationData"
+			:style="{ 'opacity': animation ? '0' : '1',
+				'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}" 
+			:current="swiper_current" :circular="circular"
+			v-if="show_assembly" @click="hideAssembly"
+			@touchmove.stop.prevent="touchmove" 
+			@change="e => switchItem(e.detail.current)">
+			<swiper-item v-for="(item, index) in images" :key="index"
+				class="swiper-item">
+				<!-- 可移动缩放操作的容器 -->
+				<movable-area class="movable-area" :scale-area="true">
+					<movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]">
+						<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel"></image>
+					</movable-view>
+				</movable-area>
+				<!-- 控制器 -->
+				<view class="controls" v-if="controls">
+					<view>
+						<view @click.stop="switchItem(swiper_current - 1)" v-if="swiper_current != 0">
+							<uni-icons type="arrowleft" size="36" color="#fff"></uni-icons>
+						</view>
+						<view v-else></view>
+					</view>
+					<view>
+						<view @click.stop="switchItem(swiper_current + 1)" v-if="swiper_current != images.length - 1">
+							<uni-icons type="arrowright" size="36" color="#fff"></uni-icons>
+						</view>
+						<view v-else></view>
+					</view>
+				</view>
+				<!-- 指示器 -->
+				<view class="indicators" v-if="indicators && images.length > 1">
+					<view class="number" v-if="indicatorType == 'number'">{{ swiper_current + 1 }} / {{ images.length }}</view>
+					<view class="square" v-else-if="indicatorType == 'square'">
+						<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
+					</view>
+					<view class="dot" v-else-if="indicatorType == 'dot'">
+						<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			controls: {
+				type: Boolean, // 是否显示左右箭头控制
+				default: true
+			},
+			indicators: {
+				type: Boolean,
+				default: true // 是否显示指示器
+			},
+			indicatorType: {
+				type: String, // 指示器类型，dot圆点，square方形，number数字
+				default: 'number'
+			},
+			perspective: {
+				type: Boolean, // 是否开启背景透视，遮罩透明可以看见底下其他元素
+				default: true
+			},
+			circular: {
+				type: Boolean, // 是否可以衔接滑动
+				default: false
+			},
+			themeColor: {
+				type: String, // 主题色
+				default: '#1833F2'
+			},
+			animation: {
+				type: Boolean, // 是否开启动画
+				default: false
+			}
+		},
+		data(){
+			return {
+				swiper_current: 0, // 当前显示的图片下标
+				images: [],
+				show_assembly: false, // 显示预览图片
+				duration: 500, // 动画持续时间
+				animationObj: {}, // 动画配置对象
+				animationData: {}, // 动画导出执行对象
+				scale_values: [], // 每张图的缩放比例
+				clientY: 0
+			}
+		},
+		created(){
+			// TODO PC端屏蔽遮罩滚动穿透
+			// TODO PC端滚轮放大缩小
+			// TODO 放大缩小百分比显示
+			// TODO 双击时会被关掉
+		},
+		methods: {
+			// 初始化加载动画
+			initAnimation(){
+				let animationObj = uni.createAnimation({
+					duration: this.duration
+				});
+				this.animationObj = animationObj;
+				animationObj.opacity(0).step();
+				animationObj.opacity(1).step();
+				this.animationData = animationObj.export();
+			},
+			// swiper touchmove事件
+			touchmove(){
+				return false;
+			},
+			// swiper被改变
+			switchItem(current){
+				this.swiper_current = current;
+				// this.clientY = 0; // 切换时需要复位
+			},
+			// movable 缩放事件
+			scale(event){
+				let scale = event.detail.scale;
+				this.$msg(scale); // TODO 轻提示层级不够，没有被显示出来
+			},
+			// 鼠标滚动缩放事件，目前会触发浏览器页面滚动事件，暂时先不要这个功能
+			mousewheel(event){
+				return;
+				let scale = this.scale_values[this.swiper_current];
+				if(this.clientY > event.clientY){
+					if(scale < 10){
+						scale += 0.5;
+					}
+				}else{
+					if(scale > 0.5){
+						scale -= 0.5;
+					}
+				}
+				this.clientY = event.clientY;
+				this.scale_values.splice(this.swiper_current, 1, scale);
+			},
+			// 显示图片
+			show(options){
+				this.images = options.images || [];
+				this.swiper_current = options.current || 0;
+				this.scale_values = this.images.map(item => 1);
+				this.show_assembly = true;
+				if(this.$props.animation){
+					this.initAnimation();
+				}
+			},
+			// 关闭隐藏图片
+			hideAssembly(){
+				if(this.$props.animation){
+					this.animationObj.opacity(0).step();
+					this.animationData = this.animationObj.export();
+					setTimeout(() => {
+						this.show_assembly = false;
+					}, this.duration);
+				}else{
+					this.show_assembly = false;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.swiper{
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1000;
+		.swiper-item{
+			position: relative;
+			.movable-area, .movable-view, .swiper-image{
+				width: 100%;
+				height: 100%;
+			}
+			.controls{
+				position: absolute;
+				padding: 0 16rpx;
+				box-sizing: border-box;
+				display: flex;
+				justify-content: space-between;
+				top: 47vh;
+				left: 0;
+				font-size: 40rpx;
+				width: 100%;
+				z-index: 1002;
+			}
+			.indicators{
+				width: 100%;
+				position: absolute;
+				left: 0;
+				bottom: 10vh;
+				z-index: 1002;
+				display: flex;
+				justify-content: center;
+				.number, .square, .dot{
+					width: max-content;
+					height: max-content;
+					background-color: #dfe4ea;
+				}
+				.number{
+					padding: 4rpx 26rpx;
+					border-radius: 40rpx;
+					color: #555555;
+				}
+				.square{
+					border-radius: 40rpx;
+					display: flex;
+					padding: 2rpx 4rpx;
+					view{
+						border-radius: 50%;
+					}
+				}
+				.dot{
+					display: flex;
+					padding: 4rpx 4rpx;
+				}
+				.indicators-icon{
+					width: 20rpx;
+					height: 20rpx;
+					background-color: #bdc5bd;
+					margin: 2rpx;
+				}
+			}
+		}
+	}
+</style>
diff --git a/canteen/main.js b/canteen/main.js
index 3733b29..7844d01 100644
--- a/canteen/main.js
+++ b/canteen/main.js
@@ -30,6 +30,9 @@ Vue.component('self-line', selfLine);
 // 将步骤条组件注入全局
 import lfStepbar from '@/components/lf-stepbar/lf-stepbar';
 Vue.component('lf-stepbar', lfStepbar);
+// 预览图片组件
+import lfPreviewImage from '@/components/lf-previewImage/lf-previewImage';
+Vue.component('lf-previewimage', lfPreviewImage);
 
 const app = new Vue({
     ...App
diff --git a/canteen/pages/purchase/detail.vue b/canteen/pages/purchase/detail.vue
index cd0d97f..5513399 100644
--- a/canteen/pages/purchase/detail.vue
+++ b/canteen/pages/purchase/detail.vue
@@ -1,521 +1,519 @@
-<template>
-	<view>
-		<block v-if="$isRight(order)">
-			<view class="head">
-				<view class="lf-row-between list">
-					<image :src="order.supplier.logo" class="image"></image>
-					<view class="info">
-						<view class="lf-font-32 lf-color-black lf-font-bold">{{ order.supplier.supplier_name }}</view>
-						<view class="lf-font-24 lf-color-555">{{ order.supplier.address }}</view>
-						<view class="lf-font-24 lf-color-555" @click="call(order.supplier.ctl_phone)">{{order.supplier.ctl_man}} {{ order.supplier.ctl_phone }}</view>
-					</view>
-				</view>
-			</view>
-			<self-line></self-line>
-			<view class="lf-bg-white">
-				<lf-stepbar :list="order.state_log" themeColor="#11D189" v-if="order.state_log"></lf-stepbar>
-			</view>
-			<self-line></self-line>
-			<view class="head">
-				<view class="lf-row-between list" v-if="order.car_license">
-					<view>车辆</view>
-					<view class="lf-font-bold">{{order.car_license}}</view>
-				</view>
-				<view class="lf-row-between list" v-if="order.deliver_man">
-					<view>司机</view>
-					<view class="lf-font-bold">{{order.deliver_man}}</view>
-				</view>
-				<view class="lf-row-between list" @click="call(order.deliver_phone)" v-if="order.deliver_phone">
-					<view>联系电话</view>
-					<view class="lf-font-bold" style="color: rgb(17, 209, 137);">{{order.deliver_phone}}</view>
-				</view>
-				<view class="lf-row-between list">
-					<view>采购单</view>
-					<view class="lf-font-bold">{{ order.p_sn }}</view>
-				</view>
-				<view class="lf-row-between list">
-					<view>批次号</view>
-					<view class="lf-font-bold">{{ order.batch_sn }}</view>
-				</view>
-				<view class="lf-row-between list">
-					<view>预计收货时间</view>
-					<view class="lf-font-bold">{{order.deadline_text}}</view>
-				</view>
-				<view class="list" v-if="supplier_voucher.length">
-					<view>证明材料-供应端</view>
-					<view class="lf-flex-wrap lf-m-t-10">
-						<image :src="item" @click="lookImage(index, 'supplier_voucher')" class="ms-img" v-for="(item, index) in supplier_voucher" :key="index"></image>
-					</view>
-				</view>
-				<view class="list" v-if="canteen_voucher.length">
-					<view>证明材料-食堂端</view>
-					<view class="lf-flex-wrap lf-m-t-10">
-						<image :src="item" @click="lookImage(index, 'canteen_voucher')" class="ms-img" v-for="(item, index) in canteen_voucher" :key="index"></image>
-					</view>
-				</view>
-			</view>
-			<self-line></self-line>
-			<view class="lf-m-t-30 lf-m-l-32 lf-m-r-32">
-				<view class="lf-font-32 lf-color-black lf-font-bold lf-m-b-20">物资明细</view>
-				<wyb-table :first-line-fixed="true" contentBgColor="#ecfaf5" :headers="headers" :contents="contents" width="max-content" height="80vh"></wyb-table>
-			</view>
-			<view style="height: 140rpx;"></view>
-			<!-- 操作按钮 -->
-			<view class="fixed-bottom" v-if="type && type != '备货中'">
-				<view v-if="type == '待发单'" class="lf-row-flex-end">
-					<button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=1')">编辑</button>
-					<button class="btn btn2" @click="orderStateChange('待接单')">立即发单</button>
-				</view>
-				<view v-else-if="type == '待接单'" class="lf-row-flex-end">
-					<button class="btn btn2" style="background-color: #FF0000;" @click="orderStateChange('已撤销')">撤销订单</button>
-				</view>
-				<view v-else-if="type == '已发货'" class="lf-row-flex-end">
-					<button class="btn btn1" @click="orderStateChange('已退单')">退单</button>
-					<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>
-					<button class="btn btn2" @click="$url('/pages/purchase/receipt?p_sn='+ order.p_sn)">清点物资</button>
-				</view>
-				<view v-else-if="type == '已收货' || type == '已入库'" class="lf-row-between">
-					<button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=2')">复用采购单</button>
-					<view class="lf-font-32" style="color: #11D189;">{{order.state}}</view>
-				</view>
-				<view v-else-if="type == '已撤销'" class="lf-row-between">
-					<button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=2')">复用采购单</button>
-					<view class="lf-font-32" style="color: #ff0000;">{{ type }}</view>
-				</view>
-				<view v-else class="lf-row-flex-end">
-					<view class="lf-font-32">{{ type }}</view>
-				</view>
-			</view>
-			
-			<!-- 弹出层-上传凭证 -->
-			<u-popup v-model="is_show_voucher" mode="center" border-radius="20">
-				<view class="voucher-popup-box">
-					<view class="popup-content">
-						<view class="popup-title">上传凭证信息</view>
-						<view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view>
-						<view class="popup-images">
-							<view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index, 'voucher_list')">
-								<image :src="item" mode="aspectFill"></image>
-								<view class="remove-image" @click.stop="removeInage(index)">
-									<u-icon name="close-circle"></u-icon>
-								</view>
-							</view>
-							<view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view>
-						</view>
-					</view>
-					<view class="foot-btn">
-						<u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button>
-						<u-button class="popup-btn" @click="submitImage">确定</u-button>
-					</view>
-				</view>
-			</u-popup>
-		</block>
-	</view>
-</template>
-
-<script>
-	import { uploadFile } from '@/common/uploadFile.js'
-	import wybTable from '@/components/wyb-table/wyb-table';
-	export default {
-		components: { wybTable },
-		data(){
-			return {
-				headers: [{
-						key: 'name',
-						label: '物资名称'
-					},{
-						key: 'spec',
-						label: '规格'
-					},{
-						label: '单位',
-						key: 'unit'
-					},{
-						label: '分类',
-						key: 'category'
-					},{
-						key: 'brand',
-						label: '品牌'
-					},{
-						key: 'quality_level',
-						label: '品级'
-					},{
-						label: '编号',
-						key: 'm_sn'
-					},{
-						label: '供应商',
-						key: 'supplier_name'
-					},{
-						key: 'pre_tax_price',
-						label: '含税价'
-					},{
-						key: 'total_tax_amount',
-						label: '含税价合计'
-					},{
-						key: 'after_tax_price',
-						label: '不含税价'
-					},{
-						key: 'total_non_tax_amount',
-						label: '不含税合计'
-					},{
-						key: 'purchase_limit',
-						label: '起购数'
-					},{
-						key: 'purchase_number',
-						label: '采购数量'
-					}],
-				contents: [],
-				order: {},
-				p_sn: '',
-				type: '',
-				is_show_voucher: false,
-				voucher_list: [],
-				voucher_count: 6,
-				show_count: 0,
-				canteen_voucher: [], // 食堂端凭证
-				supplier_voucher: [] // 供应端凭证
-			}
-		},
-		onLoad(options){
-			this.p_sn = options.p_sn || '';
-			this.getData();
-		},
-		onShow(){
-			this.show_count++;
-			if(this.show_count > 1){
-				this.getData();
-			}
-		},
-		methods: {
-			// 拨打电话
-			call(phone) {
-				uni.makePhoneCall({
-				    phoneNumber: String(phone)
-				});
-			},
-			getData(){
-				this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, {
-					p_sn: this.p_sn
-				}).then(res => {
-					let order = res.data.order;
-					order.state_log.forEach((item, index) => {
-						item.isFinished = false;
-						if(index == order.state_log.length - 1){
-							let actionState = [
-								'订单已完成',
-								'订单已退款',
-								'订单已撤销',
-								'订单已确认，物资入库'
-							];
-							if(actionState.includes(item.action)){
-								item.isFinished = true;
-							}
-						}
-					})
-					
-					let supplier_voucher = [];
-					let canteen_voucher = [];
-					order.voucher.map(item => {
-						if(item.client_type == '供应商'){
-							supplier_voucher.push(item.voucher_pic);
-						}else if(item.client_type == '食堂'){
-							canteen_voucher.push(item.voucher_pic);
-						}
-					})
-					this.supplier_voucher = supplier_voucher;
-					this.canteen_voucher = canteen_voucher;
-					
-					this.order = order;
-					let list = order.items || [];
-					let contents = list.map(item => {
-						return {
-							name: item?.material?.m_name,
-							spec: item?.spec?.name,
-							brand: item?.material?.brand,
-							quality_level: item?.material?.quality_level,
-							m_sn: item?.material?.m_sn,
-							supplier_name: order?.supplier?.supplier_name,
-							pre_tax_price: item.tax_price,
-							after_tax_price: item.non_tax_price,
-							purchase_limit: item?.p_order_item.purchase_limit,
-							purchase_number: item.purchase_number,
-							unit: item?.material?.unit?.unit_name || '',
-							category: item?.material?.category?.m_cate_name || '',
-							total_tax_amount: item.total_tax_amount,
-							total_non_tax_amount: item.total_non_tax_amount
-						}
-					})
-					this.contents = contents;
-					this.type = order.state;
-				}).catch(err => this.$toBack());
-			},
-			// 预览图片
-			lookImage(index, list){
-				if(this[list].length <= 0) return;
-				this.$u.throttle(() => {
-					uni.previewImage({
-						urls: this[list],
-						current: index
-					})
-				}, 500);
-			},
-			// 移除图片
-			removeInage(current){
-				this.voucher_list.splice(current, 1);
-			},
-			// 上传凭证图片
-			uploadImage(){
-				let current_count = this.voucher_count - this.voucher_list.length;
-				if(current_count == 0) return;
-				uni.chooseImage({
-					count: current_count,
-					complete: result => {
-						this.voucher_list.push(...result.tempFilePaths);
-						console.log(this.voucher_list)
-					}
-				})
-			},
-			// 用户点击确定，将图片上传至oss，并将url发送给后端
-			submitImage(){
-				let that = this;
-				let voucher_list = that.voucher_list;
-				if(voucher_list.length <= 0){
-					return that.$msg('您未上传图片哦');
-				};
-				that.is_show_voucher = false;
-				uni.showLoading({
-					title: '正在上传中...'
-				})
-				let http_list = [];
-				voucher_list.map(item => {
-					let itemP = new Promise((resolve, reject) => {
-						uploadFile(item, (res) => {
-							resolve(res);
-						}, (err) => {
-							reject(err);
-						}, this);
-					})
-					http_list.push(itemP);
-				})
-				
-				Promise.all(http_list).then(res => {
-					console.log("sssssss", res);
-					let images = res.map(item => item.path);
-					that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, {
-						p_sn: that.p_sn,
-						images: images,
-					}).then(result => {
-						uni.hideLoading();
-						that.voucher_list = [];
-						that.$msg('凭证已上传成功!');
-						that.getData();
-					}).catch(err => uni.hideLoading());
-					
-				}).catch(err => {
-					uni.hideLoading();
-					uni.showModal({
-						title: '',
-						content: JSON.stringify(err),
-						showCancel: false,
-						confirmColor: '#1833F2'
-					})
-				})
-			},
-			// 改变订单状态
-			orderStateChange(state){
-				let that = this;
-				if(state == '已退单'){
-					uni.showModal({
-						title: '温馨提示',
-						content: '退单前请与供应商协商，以免造成损失！确定继续退单操作吗？',
-						confirmColor: '#FF0000',
-						cancelColor: '#11D189',
-						success: result => {
-							if(result.confirm){
-								$change();
-							}
-						}
-					})
-				}else{
-					$change();
-				}
-				
-				function $change(){
-					that.$http(that.API.API_CANTEEN_PURCHASEUPDATE, {
-						p_sn: that.p_sn,
-						state: state
-					}).then(res => {
-						that.$msg('操作成功').then(()=> that.getData());
-					})
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped="scoped">
-	.head{
-		padding: 0 32rpx;
-		width: 750rpx;
-		box-sizing: border-box;
-		height: auto;
-		.list{
-			padding: 30rpx 0;
-			// border-bottom: 1rpx solid #e5e5e5;
-			font-size: 28rpx;
-			color: #555555;
-			&:last-child{
-				border-bottom: none;
-			}
-			.image{
-				width: 140rpx;
-				height: 140rpx;
-				border-radius: 10rpx;
-				background-color: #EEEEEE;
-			}
-			.info{
-				display: flex;
-				flex-direction: column;
-				justify-content: space-around;
-				width: 530rpx;
-				height: 140rpx;
-			}
-		}
-	}
-	.fixed-bottom{
-		position: fixed;
-		bottom: 0rpx;
-		left: 0rpx;
-		z-index: 99;
-		width: 750rpx;
-		height: 98rpx;
-		display: flex;
-		// justify-content: flex-end;
-		align-items: center;
-		border-top: 1rpx solid #E5E5E5;
-		background-color: #FFFFFF;
-		box-sizing: border-box;
-		padding: 0 32rpx;
-		.btn{
-			width: 212rpx;
-			height: 82rpx;
-			border-radius: 41rpx;
-			margin: 0;
-			padding: 0;
-			font-size: 32rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-		.btn1{
-			border: 2rpx solid #555555;
-			opacity: .5;
-		}
-		.btn2{
-			background: #11D189;
-			color: #FFFFFF;
-			margin-left: 20rpx;
-		}
-	}
-	.fixed-bottom>view{
-		width: 100%;
-	}
-	.ms-img{
-		width: 160rpx;
-		height: 160rpx;
-		margin-right: 15rpx;
-		margin-top: 15rpx;
-		background-color: #EEEEEE;
-		&:nth-of-type(4n){
-			margin-right: 0rpx;
-		}
-	}
-	
-	.voucher-popup-box{
-		width: 686rpx;
-		height: max-content;
-		display: flex;
-		justify-content: space-between;
-		flex-direction: column;
-		.popup-content{
-			.popup-title{
-				font-size: 32rpx;
-				font-weight: bold;
-				color: #222222;
-				text-align: center;
-				margin-top: 40rpx;
-			}
-			.popup-desc{
-				font-size: 28rpx;
-				color: #555555;
-				text-align: center;
-				margin-top: 20rpx;
-				margin-bottom: 18rpx;
-			}
-			.popup-images{
-				display: flex;
-				flex-wrap: wrap;
-				padding: 22rpx;
-				margin-bottom: 18rpx;
-				.popup-image-item{
-					width: 198rpx;
-					height: 198rpx;
-					margin: 8rpx;
-					background: #F5F5F5;
-					border-radius: 10rpx;
-					position: relative;
-					image{
-						width: 100%;
-						height: 100%;
-					}
-					.remove-image{
-						position: absolute;
-						right: -8rpx;
-						top: -16rpx;
-						color: #e74c3c;
-						font-size: 40rpx;
-						padding: 8rpx;
-					}
-				}
-				.popup-image-item-after::after{
-					content: '+';
-					position: absolute;
-					left: 30%;
-					top: 14%;
-					font-size: 100rpx;
-					color: #777777;
-				}
-			}
-			.popup-input{
-				padding: 0 60rpx;
-				box-sizing: border-box;
-				height: 90rpx;
-				font-size: 28rpx;
-				color: #555555;
-				input{
-					text-align: right;
-				}
-			}
-		}
-		.foot-btn{
-			height: 90rpx;
-			width: 100%;
-			border-top: 1rpx solid #E5E5E5;
-			display: flex;
-			box-sizing: border-box;
-			.popup-btn{
-				width: 50%;
-				height: 100%;
-				border: none;
-				border-radius: initial;
-				&:last-child{
-					border-left: 1rpx solid #E5E5E5;
-					color: #1833F2;
-				}
-			}
-		}
-	}
-	// 去掉u-button 外边框线
-	/deep/.u-hairline-border::after{
-		border: none;
-	}
-</style>
+<template>
+	<view>
+		<block v-if="$isRight(order)">
+			<view class="head">
+				<view class="lf-row-between list">
+					<image :src="order.supplier.logo" class="image"></image>
+					<view class="info">
+						<view class="lf-font-32 lf-color-black lf-font-bold">{{ order.supplier.supplier_name }}</view>
+						<view class="lf-font-24 lf-color-555">{{ order.supplier.address }}</view>
+						<view class="lf-font-24 lf-color-555" @click="call(order.supplier.ctl_phone)">{{order.supplier.ctl_man}} {{ order.supplier.ctl_phone }}</view>
+					</view>
+				</view>
+			</view>
+			<self-line></self-line>
+			<view class="lf-bg-white">
+				<lf-stepbar :list="order.state_log" themeColor="#11D189" v-if="order.state_log"></lf-stepbar>
+			</view>
+			<self-line></self-line>
+			<view class="head">
+				<view class="lf-row-between list" v-if="order.car_license">
+					<view>车辆</view>
+					<view class="lf-font-bold">{{order.car_license}}</view>
+				</view>
+				<view class="lf-row-between list" v-if="order.deliver_man">
+					<view>司机</view>
+					<view class="lf-font-bold">{{order.deliver_man}}</view>
+				</view>
+				<view class="lf-row-between list" @click="call(order.deliver_phone)" v-if="order.deliver_phone">
+					<view>联系电话</view>
+					<view class="lf-font-bold" style="color: rgb(17, 209, 137);">{{order.deliver_phone}}</view>
+				</view>
+				<view class="lf-row-between list">
+					<view>采购单</view>
+					<view class="lf-font-bold">{{ order.p_sn }}</view>
+				</view>
+				<view class="lf-row-between list">
+					<view>批次号</view>
+					<view class="lf-font-bold">{{ order.batch_sn }}</view>
+				</view>
+				<view class="lf-row-between list">
+					<view>预计收货时间</view>
+					<view class="lf-font-bold">{{order.deadline_text}}</view>
+				</view>
+				<view class="list" v-if="supplier_voucher.length">
+					<view>证明材料-供应端</view>
+					<view class="lf-flex-wrap lf-m-t-10">
+						<image :src="item" @click="lookImage(index, 'supplier_voucher')" class="ms-img" v-for="(item, index) in supplier_voucher" :key="index"></image>
+					</view>
+				</view>
+				<view class="list" v-if="canteen_voucher.length">
+					<view>证明材料-食堂端</view>
+					<view class="lf-flex-wrap lf-m-t-10">
+						<image :src="item" @click="lookImage(index, 'canteen_voucher')" class="ms-img" v-for="(item, index) in canteen_voucher" :key="index"></image>
+					</view>
+				</view>
+			</view>
+			<self-line></self-line>
+			<view class="lf-m-t-30 lf-m-l-32 lf-m-r-32">
+				<view class="lf-font-32 lf-color-black lf-font-bold lf-m-b-20">物资明细</view>
+				<wyb-table :first-line-fixed="true" contentBgColor="#ecfaf5" :headers="headers" :contents="contents" width="max-content" height="80vh"></wyb-table>
+			</view>
+			<view style="height: 140rpx;"></view>
+			<!-- 操作按钮 -->
+			<view class="fixed-bottom" v-if="type && type != '备货中'">
+				<view v-if="type == '待发单'" class="lf-row-flex-end">
+					<button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=1')">编辑</button>
+					<button class="btn btn2" @click="orderStateChange('待接单')">立即发单</button>
+				</view>
+				<view v-else-if="type == '待接单'" class="lf-row-flex-end">
+					<button class="btn btn2" style="background-color: #FF0000;" @click="orderStateChange('已撤销')">撤销订单</button>
+				</view>
+				<view v-else-if="type == '已发货'" class="lf-row-flex-end">
+					<button class="btn btn1" @click="orderStateChange('已退单')">退单</button>
+					<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>
+					<button class="btn btn2" @click="$url('/pages/purchase/receipt?p_sn='+ order.p_sn)">清点物资</button>
+				</view>
+				<view v-else-if="type == '已收货' || type == '已入库'" class="lf-row-between">
+					<button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=2')">复用采购单</button>
+					<view class="lf-font-32" style="color: #11D189;">{{order.state}}</view>
+				</view>
+				<view v-else-if="type == '已撤销'" class="lf-row-between">
+					<button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=2')">复用采购单</button>
+					<view class="lf-font-32" style="color: #ff0000;">{{ type }}</view>
+				</view>
+				<view v-else class="lf-row-flex-end">
+					<view class="lf-font-32">{{ type }}</view>
+				</view>
+			</view>
+			
+			<!-- 弹出层-上传凭证 -->
+			<u-popup v-model="is_show_voucher" mode="center" border-radius="20">
+				<view class="voucher-popup-box">
+					<view class="popup-content">
+						<view class="popup-title">上传凭证信息</view>
+						<view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view>
+						<view class="popup-images">
+							<view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index, 'voucher_list')">
+								<image :src="item" mode="aspectFill"></image>
+								<view class="remove-image" @click.stop="removeInage(index)">
+									<u-icon name="close-circle"></u-icon>
+								</view>
+							</view>
+							<view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view>
+						</view>
+					</view>
+					<view class="foot-btn">
+						<u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button>
+						<u-button class="popup-btn" @click="submitImage">确定</u-button>
+					</view>
+				</view>
+			</u-popup>
+			<!-- 预览图片组件 -->
			<lf-previewimage ref="previewimage" />
+		</block>
+	</view>
+</template>
+
+<script>
+	import { uploadFile } from '@/common/uploadFile.js'
+	import wybTable from '@/components/wyb-table/wyb-table';
+	export default {
+		components: { wybTable },
+		data(){
+			return {
+				headers: [{
+						key: 'name',
+						label: '物资名称'
+					},{
+						key: 'spec',
+						label: '规格'
+					},{
+						label: '单位',
+						key: 'unit'
+					},{
+						label: '分类',
+						key: 'category'
+					},{
+						key: 'brand',
+						label: '品牌'
+					},{
+						key: 'quality_level',
+						label: '品级'
+					},{
+						label: '编号',
+						key: 'm_sn'
+					},{
+						label: '供应商',
+						key: 'supplier_name'
+					},{
+						key: 'pre_tax_price',
+						label: '含税价'
+					},{
+						key: 'total_tax_amount',
+						label: '含税价合计'
+					},{
+						key: 'after_tax_price',
+						label: '不含税价'
+					},{
+						key: 'total_non_tax_amount',
+						label: '不含税合计'
+					},{
+						key: 'purchase_limit',
+						label: '起购数'
+					},{
+						key: 'purchase_number',
+						label: '采购数量'
+					}],
+				contents: [],
+				order: {},
+				p_sn: '',
+				type: '',
+				is_show_voucher: false,
+				voucher_list: [],
+				voucher_count: 6,
+				show_count: 0,
+				canteen_voucher: [], // 食堂端凭证
+				supplier_voucher: [] // 供应端凭证
+			}
+		},
+		onLoad(options){
+			this.p_sn = options.p_sn || '';
+			this.getData();
+		},
+		onShow(){
+			this.show_count++;
+			if(this.show_count > 1){
+				this.getData();
+			}
+		},
+		methods: {
+			// 拨打电话
+			call(phone) {
+				uni.makePhoneCall({
+				    phoneNumber: String(phone)
+				});
+			},
+			getData(){
+				this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, {
+					p_sn: this.p_sn
+				}).then(res => {
+					let order = res.data.order;
+					order.state_log.forEach((item, index) => {
+						item.isFinished = false;
+						if(index == order.state_log.length - 1){
+							let actionState = [
+								'订单已完成',
+								'订单已退款',
+								'订单已撤销',
+								'订单已确认，物资入库'
+							];
+							if(actionState.includes(item.action)){
+								item.isFinished = true;
+							}
+						}
+					})
+					
+					let supplier_voucher = [];
+					let canteen_voucher = [];
+					order.voucher.map(item => {
+						if(item.client_type == '供应商'){
+							supplier_voucher.push(item.voucher_pic);
+						}else if(item.client_type == '食堂'){
+							canteen_voucher.push(item.voucher_pic);
+						}
+					})
+					this.supplier_voucher = supplier_voucher;
+					this.canteen_voucher = canteen_voucher;
+					
+					this.order = order;
+					let list = order.items || [];
+					let contents = list.map(item => {
+						return {
+							name: item?.material?.m_name,
+							spec: item?.spec?.name,
+							brand: item?.material?.brand,
+							quality_level: item?.material?.quality_level,
+							m_sn: item?.material?.m_sn,
+							supplier_name: order?.supplier?.supplier_name,
+							pre_tax_price: item.tax_price,
+							after_tax_price: item.non_tax_price,
+							purchase_limit: item?.p_order_item.purchase_limit,
+							purchase_number: item.purchase_number,
+							unit: item?.material?.unit?.unit_name || '',
+							category: item?.material?.category?.m_cate_name || '',
+							total_tax_amount: item.total_tax_amount,
+							total_non_tax_amount: item.total_non_tax_amount
+						}
+					})
+					this.contents = contents;
+					this.type = order.state;
+				}).catch(err => this.$toBack());
+			},
+			// 预览图片
+			lookImage(current, list){
+				if(this[list].length <= 0) return;
+				this.$u.throttle(() => {
+					this.$refs.previewimage.show({
						images: this[list],
						current: current
					});
+				}, 500);
+			},
+			// 移除图片
+			removeInage(current){
+				this.voucher_list.splice(current, 1);
+			},
+			// 上传凭证图片
+			uploadImage(){
+				let current_count = this.voucher_count - this.voucher_list.length;
+				if(current_count == 0) return;
+				uni.chooseImage({
+					count: current_count,
+					complete: result => {
+						this.voucher_list.push(...result.tempFilePaths);
+						console.log(this.voucher_list)
+					}
+				})
+			},
+			// 用户点击确定，将图片上传至oss，并将url发送给后端
+			submitImage(){
+				let that = this;
+				let voucher_list = that.voucher_list;
+				if(voucher_list.length <= 0){
+					return that.$msg('您未上传图片哦');
+				};
+				that.is_show_voucher = false;
+				uni.showLoading({
+					title: '正在上传中...'
+				})
+				let http_list = [];
+				voucher_list.map(item => {
+					let itemP = new Promise((resolve, reject) => {
+						uploadFile(item, (res) => {
+							resolve(res);
+						}, (err) => {
+							reject(err);
+						}, this);
+					})
+					http_list.push(itemP);
+				})
+				
+				Promise.all(http_list).then(res => {
+					console.log("sssssss", res);
+					let images = res.map(item => item.path);
+					that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, {
+						p_sn: that.p_sn,
+						images: images,
+					}).then(result => {
+						uni.hideLoading();
+						that.voucher_list = [];
+						that.$msg('凭证已上传成功!');
+						that.getData();
+					}).catch(err => uni.hideLoading());
+					
+				}).catch(err => {
+					uni.hideLoading();
+					uni.showModal({
+						title: '',
+						content: JSON.stringify(err),
+						showCancel: false,
+						confirmColor: '#1833F2'
+					})
+				})
+			},
+			// 改变订单状态
+			orderStateChange(state){
+				let that = this;
+				if(state == '已退单'){
+					uni.showModal({
+						title: '温馨提示',
+						content: '退单前请与供应商协商，以免造成损失！确定继续退单操作吗？',
+						confirmColor: '#FF0000',
+						cancelColor: '#11D189',
+						success: result => {
+							if(result.confirm){
+								$change();
+							}
+						}
+					})
+				}else{
+					$change();
+				}
+				
+				function $change(){
+					that.$http(that.API.API_CANTEEN_PURCHASEUPDATE, {
+						p_sn: that.p_sn,
+						state: state
+					}).then(res => {
+						that.$msg('操作成功').then(()=> that.getData());
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.head{
+		padding: 0 32rpx;
+		width: 750rpx;
+		box-sizing: border-box;
+		height: auto;
+		.list{
+			padding: 30rpx 0;
+			// border-bottom: 1rpx solid #e5e5e5;
+			font-size: 28rpx;
+			color: #555555;
+			&:last-child{
+				border-bottom: none;
+			}
+			.image{
+				width: 140rpx;
+				height: 140rpx;
+				border-radius: 10rpx;
+				background-color: #EEEEEE;
+			}
+			.info{
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				width: 530rpx;
+				height: 140rpx;
+			}
+		}
+	}
+	.fixed-bottom{
+		position: fixed;
+		bottom: 0rpx;
+		left: 0rpx;
+		z-index: 99;
+		width: 750rpx;
+		height: 98rpx;
+		display: flex;
+		// justify-content: flex-end;
+		align-items: center;
+		border-top: 1rpx solid #E5E5E5;
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+		padding: 0 32rpx;
+		.btn{
+			width: 212rpx;
+			height: 82rpx;
+			border-radius: 41rpx;
+			margin: 0;
+			padding: 0;
+			font-size: 32rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		.btn1{
+			border: 2rpx solid #555555;
+			opacity: .5;
+		}
+		.btn2{
+			background: #11D189;
+			color: #FFFFFF;
+			margin-left: 20rpx;
+		}
+	}
+	.fixed-bottom>view{
+		width: 100%;
+	}
+	.ms-img{
+		width: 160rpx;
+		height: 160rpx;
+		margin-right: 15rpx;
+		margin-top: 15rpx;
+		background-color: #EEEEEE;
+		&:nth-of-type(4n){
+			margin-right: 0rpx;
+		}
+	}
+	
+	.voucher-popup-box{
+		width: 686rpx;
+		height: max-content;
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		.popup-content{
+			.popup-title{
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #222222;
+				text-align: center;
+				margin-top: 40rpx;
+			}
+			.popup-desc{
+				font-size: 28rpx;
+				color: #555555;
+				text-align: center;
+				margin-top: 20rpx;
+				margin-bottom: 18rpx;
+			}
+			.popup-images{
+				display: flex;
+				flex-wrap: wrap;
+				padding: 22rpx;
+				margin-bottom: 18rpx;
+				.popup-image-item{
+					width: 198rpx;
+					height: 198rpx;
+					margin: 8rpx;
+					background: #F5F5F5;
+					border-radius: 10rpx;
+					position: relative;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+					.remove-image{
+						position: absolute;
+						right: -8rpx;
+						top: -16rpx;
+						color: #e74c3c;
+						font-size: 40rpx;
+						padding: 8rpx;
+					}
+				}
+				.popup-image-item-after::after{
+					content: '+';
+					position: absolute;
+					left: 30%;
+					top: 14%;
+					font-size: 100rpx;
+					color: #777777;
+				}
+			}
+			.popup-input{
+				padding: 0 60rpx;
+				box-sizing: border-box;
+				height: 90rpx;
+				font-size: 28rpx;
+				color: #555555;
+				input{
+					text-align: right;
+				}
+			}
+		}
+		.foot-btn{
+			height: 90rpx;
+			width: 100%;
+			border-top: 1rpx solid #E5E5E5;
+			display: flex;
+			box-sizing: border-box;
+			.popup-btn{
+				width: 50%;
+				height: 100%;
+				border: none;
+				border-radius: initial;
+				&:last-child{
+					border-left: 1rpx solid #E5E5E5;
+					color: #1833F2;
+				}
+			}
+		}
+	}
+	// 去掉u-button 外边框线
+	/deep/.u-hairline-border::after{
+		border: none;
+	}
+</style>
diff --git a/canteen/pages/purchase/receipt.vue b/canteen/pages/purchase/receipt.vue
index 65d3df9..0a744ff 100644
--- a/canteen/pages/purchase/receipt.vue
+++ b/canteen/pages/purchase/receipt.vue
@@ -1,533 +1,534 @@
-<template>
-	<view class="content">
-		<view class="card" v-for="(item, index) in list" :key="index">
-			<view class="lf-row-between">
-				<view class="flex lf-row-center justify-center text-center">
-					<view class="lf-color-black lf-font-bold" v-if="item.material && item.material.m_name">{{ item.material.m_name }}</view>
-					<view class="lf-m-l-10">{{item.spec.name}}</view>
-				</view>
-				<view>单位: {{item.material.unit.unit_name}}</view>
-				<!-- 修改功能先隐藏 -->
-				<!-- <view style="color: #11D189;" @click="showEdit">修改</view> -->
-			</view>
-			<view class="lf-row-between lf-m-t-30">
-				<view>订购数</view>
-				<view class="lf-flex">
-					<input class="input" placeholder="0" type="number" :disabled="true" v-if="item.material && item.purchase_number" v-model="item.purchase_number"/>
-					<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
-				</view>
-			</view>
-			<view class="lf-row-between lf-m-t-30">
-				<view>实到数</view>
-				<view class="lf-flex">
-					<input class="input" placeholder="0" type="number" v-model="item.reachNum" @blur="inputBlur(index, 'real_reach_number', $event)" />
-					<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
-				</view>
-			</view>
-			<view class="lf-row-between lf-m-t-30">
-				<view>实收数</view>
-				<view class="lf-flex">
-					<input class="input" placeholder="0" type="number" v-model="item.receiveNum" @blur="inputBlur(index, 'real_receive_number', $event)" />
-					<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
-				</view>
-			</view>
-		</view>
-		<!-- 修饰底部 -->
-		<view :style="upload_list.length ? 'height: 260rpx' : 'height: 140rpx'"></view>
-		<!-- 凭证图 -->
-		<view class="fixed-images" v-if="upload_list.length">
-			<image class="ms-img" :src="item" @click="lookImage(index)" v-for="(item, index) in upload_list" :key="index" v-if="index < 6"></image>
-		</view>
-		<view class="fixed-bottom" v-if="list.length">
-			<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>
-			<button class="btn" @click="comfirm">确认收货</button>
-		</view>
-		<!-- 弹出层-确认收货修改 TODO每个都应该是动态 -->
-		<u-popup v-model="is_show_edit" mode="bottom" border-radius="20">
-			<view class="edit-popup-box">
-				<view class="popup-content">
-					<view>
-						<view class="popup-item" hover-class="lf-opacity" :style="currentObj(1)?'border-bottom:none':''" @click="switchItem(1)">
-							<text class="lf-font-bold">选择供应商</text>
-							<u-icon name="arrow-up" color="#777777" v-if="currentObj(1)"></u-icon>
-							<u-icon name="arrow-down" color="#777777" v-else></u-icon>
-						</view>
-						<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(1)?'max-height:360rpx':'max-height:0rpx'">
-							<view class="lf-row-between scroll-item" v-for="(item, index) in supplier_list" :key="index" @click="checkItem(index, 'supplier_list')">
-								<view>{{ item.name }}</view>
-								<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
-							</view>
-						</scroll-view>
-					</view>
-					
-					<view>
-						<view class="popup-item" hover-class="lf-opacity" :style="currentObj(2)?'border-bottom:none':''" @click="switchItem(2)">
-							<text class="lf-font-bold">选择物资</text>
-							<u-icon name="arrow-up" color="#777777" v-if="currentObj(2)"></u-icon>
-							<u-icon name="arrow-down" color="#777777" v-else></u-icon>
-						</view>
-						<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(2)?'max-height:360rpx':'max-height:0rpx'">
-							<view class="lf-row-between scroll-item" v-for="(item, index) in material_list" :key="index" @click="checkItem(index, 'material_list')">
-								<view>{{ item.name }}</view>
-								<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
-							</view>
-						</scroll-view>
-					</view>
-				</view>
-				<u-button class="popup-btn" @click="comfirmEdit">确认修改</u-button>
-			</view>
-		</u-popup>
-		<!-- 弹出层-上传凭证 -->
-		<u-popup v-model="is_show_voucher" mode="center" border-radius="20">
-			<view class="voucher-popup-box">
-				<view class="popup-content">
-					<view class="popup-title">上传凭证信息</view>
-					<view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view>
-					<view class="popup-images">
-						<view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index, 'voucher_list')">
-							<image :src="item" mode="aspectFill"></image>
-							<view class="remove-image" @click.stop="removeInage(index)">
-								<u-icon name="close-circle"></u-icon>
-							</view>
-						</view>
-						<view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view>
-					</view>
-				</view>
-				<view class="foot-btn">
-					<u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button>
-					<u-button class="popup-btn" @click="submitImage">确定</u-button>
-				</view>
-			</view>
-		</u-popup>
-	</view>
-</template>
-
-<script>
-	import { uploadFile } from '@/common/uploadFile.js'
-	export default {
-		data(){
-			return {
-				list: [],
-				is_show_edit: false,
-				current_show: {
-					type: 1,
-					open: false
-				},
-				supplier_list: [{
-					name: '南开大学',
-					checked: false
-				},{
-					name: '华侨大学',
-					checked: false
-				}],
-				material_list: [{
-					name: '哈哈哈哈',
-					checked: false
-				},{
-					name: '嘿嘿嘿',
-					checked: false
-				}],
-				p_sn: '',
-				contents: [],
-				order: {},
-				type: 4,
-				reachNum: 0,
-				receiveNum: 0,
-				is_show_voucher: false,
-				voucher_count: 6,
-				voucher_list: [],
-				is_upload: false, // 是否上传了凭证
-				upload_list: []
-			}
-		},
-		computed: {
-			currentObj(){
-				let current_show = this.current_show;
-				return function(num){
-					return current_show.type == num && current_show.open
-				}
-			}
-		},
-		onLoad(options){
-			// http://localhost:8081/pages/purchase/receipt?p_sn=P16281395178122
-			this.p_sn = options.p_sn || '';
-			this.getData();
-		},
-		methods: {
-			// 预览图片
-			lookImage(index){
-				this.$u.throttle(() => {
-					uni.previewImage({
-						urls: this.upload_list,
-						current: index
-					})
-				}, 500);
-			},
-			// 移除图片
-			removeInage(current){
-				this.voucher_list.splice(current, 1);
-			},
-			// 上传凭证图片
-			uploadImage(){
-				let current_count = this.voucher_count - this.voucher_list.length;
-				if(current_count == 0) return;
-				uni.chooseImage({
-					count: current_count,
-					complete: result => {
-						this.voucher_list.push(...result.tempFilePaths);
-						console.log(this.voucher_list)
-					}
-				})
-			},
-			// 用户点击确定，将图片上传至oss，并将url发送给后端
-			submitImage(){
-				let that = this;
-				let voucher_list = that.voucher_list;
-				if(voucher_list.length <= 0){
-					return that.$msg('您未上传图片哦');
-				};
-				that.is_show_voucher = false;
-				uni.showLoading({
-					title: '正在上传中...'
-				})
-				let http_list = [];
-				voucher_list.map(item => {
-					let itemP = new Promise((resolve, reject) => {
-						uploadFile(item, (res) => {
-							resolve(res);
-						}, (err) => {
-							reject(err);
-						}, this);
-					})
-					http_list.push(itemP);
-				})
-				
-				Promise.all(http_list).then(res => {
-					let images = [];
-					let show_images = [];
-					res.map(item => {
-						if(item.path){
-							images.push(item.path);
-						}
-						if(item.url){
-							show_images.push(item.url);
-						}
-					});
-					that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, {
-						p_sn: that.p_sn,
-						images: images,
-					}).then(result => {
-						uni.hideLoading();
-						that.voucher_list = [];
-						that.is_upload = true;
-						that.upload_list.push(...show_images);
-						that.$msg('凭证已上传成功!')
-					}).catch(err => uni.hideLoading());
-					
-				}).catch(err => {
-					uni.hideLoading();
-					uni.showModal({
-						title: '',
-						content: JSON.stringify(err),
-						showCancel: false,
-						confirmColor: '#1833F2'
-					})
-				})
-			},
-			getData(){
-				this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, {
-					p_sn: this.p_sn
-				}).then(res => {
-					this.order = res.data.order;
-					this.list = res.data.order.items || [];
-					this.list.forEach(item => {
-						item.reachNum = item.purchase_number
-						item.receiveNum = item.purchase_number
-					})
-					let voucher = res.data?.order?.voucher || [];
-					voucher = voucher.filter(item => item.client_type == '食堂');
-					this.is_upload = voucher.length > 0;
-					this.upload_list = voucher.map(item => item.voucher_pic);
-				})
-			},
-			inputBlur(current, key, event){
-				this.list[current][key] = event.detail.value;
-			},
-			comfirm(){
-				let is_empty = false;
-				let real_count_item = []
-				this.list.forEach(item => {
-					if(!item.receiveNum || !item.reachNum){
-						is_empty = true;
-					}
-					real_count_item.push({
-						id:item.id,
-						real_receive_number: item.receiveNum,
-						real_reach_number: item.reachNum
-					})
-				})
-				if(is_empty){
-					return this.$msg('请将收货数量填写完整');
-				}
-				if(!this.is_upload){
-					return this.$msg('请上传凭证后再确认收货');
-				}
-				this.$http(this.API.API_CONFIRM, {
-					p_sn: this.p_sn,
-					state: '已入库',
-					real_count_item
-				}).then(res => {
-					this.$msg('确认收货成功').then(()=>{this.$toBack()});
-				})
-			},
-			switchItem(current){
-				let current_show = this.current_show;
-				if(current_show.type != current){
-					current_show.open = false;
-				}
-				current_show.type = current;
-				current_show.open = !current_show.open;
-				this.current_show = current_show;
-			},
-			checkItem(index, name){
-				this[name].forEach(item => item.checked = false);
-				this[name][index].checked = true;
-			},
-			// 确认修改
-			comfirmEdit(){
-				this.$msg('修改成功！');
-				this.is_show_edit = false;
-			},
-			// 显示修改弹出层
-			showEdit(){
-				this.current_show = {
-					type: 1,
-					open: false
-				};
-				this.is_show_edit = true;
-			}
-		}
-	}
-</script>
-
-<style>
-	page{
-		background-color: #F6F6F6;
-		overflow-x: hidden;
-	}
-</style>
-<style lang="scss" scoped="scoped">
-	.content{
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		flex-direction: column;
-	}
-	.card{
-		width: 686rpx;
-		height: auto;
-		background-color: #FFFFFF;
-		border-radius: 20rpx;
-		margin-top: 30rpx;
-		font-size: 28rpx;
-		box-sizing: border-box;
-		padding: 30rpx;
-		color: #777777;
-		.input{
-			width: 112rpx;
-			border-bottom: 1rpx solid #e5e5e5;
-			margin-right: 14rpx;
-			text-align: center;
-			color: #222222;
-		}
-	}
-	.fixed-images{
-		position: fixed;
-		bottom: 98rpx;
-		left: 0rpx;
-		z-index: 99;
-		width: 750rpx;
-		height: 126rpx;
-		background-color: #FFFFFF;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		.ms-img{
-			// 六张一行
-			width: 102rpx;
-			height: 102rpx;
-			// width: 146rpx;
-			// height: 146rpx;
-			margin-right: 14rpx;
-			background-color: #EEEEEE;
-			&:nth-of-type(6n){
-				margin-right: 0rpx;
-			}
-		}
-	}
-	.fixed-bottom{
-		position: fixed;
-		bottom: 0rpx;
-		left: 0rpx;
-		z-index: 99;
-		width: 750rpx;
-		height: 98rpx;
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		border-top: 1rpx solid #E5E5E5;
-		background-color: #FFFFFF;
-		box-sizing: border-box;
-		padding: 0 32rpx;
-		.btn{
-			width: 212rpx;
-			background-color: #11D189;
-			font-size: 32rpx;
-			line-height: 82rpx;
-			margin: 0;
-			height: 82rpx;
-			border-radius: 40rpx;
-			color: #FFFFFF;
-		}
-		.btn1{
-			border: 2rpx solid #555555;
-			background-color: #FFFFFF;
-			color: #555555;
-			line-height: 80rpx;
-			margin-right: 20rpx;
-		}
-	}
-	
-	/deep/.placeholder-class{
-		color: #777777;
-	}
-	// 去掉u-button 外边框线
-	/deep/.u-hairline-border::after{
-		border: none;
-	}
-	// 修改收货信息弹出层
-	.edit-popup-box{
-		width: 100%;
-		min-height: 484rpx;
-		max-height: 64vh;
-		padding: 10rpx 32rpx;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		.popup-content{
-			min-height: 332rpx;
-			// max-height: 54vh;
-			margin-bottom: 40rpx;
-			.popup-item{
-				padding: 30rpx 0;
-				box-sizing: border-box;
-				border-bottom: 1rpx solid #E5E5E5;
-				display: flex;
-				justify-content: space-between;
-				font-size: 28rpx;
-				color: #222222;
-			}
-			.scroll-box{
-				transition: all .5s;
-				.scroll-item{
-					padding: 30rpx 0;
-				}
-			}
-		}
-		.popup-btn{
-			width: 100%;
-			height: 82rpx;
-			background: #11D189;
-			border-radius: 10rpx;
-			font-size: 32rpx;
-			color: #FFFFFF;
-			margin-bottom: 30rpx;
-		}
-	}
-	
-	// 上传凭证弹出层
-	.voucher-popup-box{
-		width: 686rpx;
-		height: max-content;
-		display: flex;
-		justify-content: space-between;
-		flex-direction: column;
-		.popup-content{
-			.popup-title{
-				font-size: 32rpx;
-				font-weight: bold;
-				color: #222222;
-				text-align: center;
-				margin-top: 40rpx;
-			}
-			.popup-desc{
-				font-size: 28rpx;
-				color: #555555;
-				text-align: center;
-				margin-top: 20rpx;
-				margin-bottom: 18rpx;
-			}
-			.popup-images{
-				display: flex;
-				flex-wrap: wrap;
-				padding: 22rpx;
-				margin-bottom: 18rpx;
-				.popup-image-item{
-					width: 198rpx;
-					height: 198rpx;
-					margin: 8rpx;
-					background: #F5F5F5;
-					border-radius: 10rpx;
-					position: relative;
-					image{
-						width: 100%;
-						height: 100%;
-					}
-					.remove-image{
-						position: absolute;
-						right: -8rpx;
-						top: -16rpx;
-						color: #e74c3c;
-						font-size: 40rpx;
-						padding: 8rpx;
-					}
-				}
-				.popup-image-item-after::after{
-					content: '+';
-					position: absolute;
-					left: 30%;
-					top: 14%;
-					font-size: 100rpx;
-					color: #777777;
-				}
-			}
-			.popup-input{
-				padding: 0 60rpx;
-				box-sizing: border-box;
-				height: 90rpx;
-				font-size: 28rpx;
-				color: #555555;
-				input{
-					text-align: right;
-				}
-			}
-		}
-		.foot-btn{
-			height: 90rpx;
-			width: 100%;
-			border-top: 1rpx solid #E5E5E5;
-			display: flex;
-			box-sizing: border-box;
-			.popup-btn{
-				width: 50%;
-				height: 100%;
-				border: none;
-				border-radius: initial;
-				&:last-child{
-					border-left: 1rpx solid #E5E5E5;
-					color: #1833F2;
-				}
-			}
-		}
-	}
-</style>
+<template>
+	<view class="content">
+		<view class="card" v-for="(item, index) in list" :key="index">
+			<view class="lf-row-between">
+				<view class="flex lf-row-center justify-center text-center">
+					<view class="lf-color-black lf-font-bold" v-if="item.material && item.material.m_name">{{ item.material.m_name }}</view>
+					<view class="lf-m-l-10">{{item.spec.name}}</view>
+				</view>
+				<view>单位: {{item.material.unit.unit_name}}</view>
+				<!-- 修改功能先隐藏 -->
+				<!-- <view style="color: #11D189;" @click="showEdit">修改</view> -->
+			</view>
+			<view class="lf-row-between lf-m-t-30">
+				<view>订购数</view>
+				<view class="lf-flex">
+					<input class="input" placeholder="0" type="number" :disabled="true" v-if="item.material && item.purchase_number" v-model="item.purchase_number"/>
+					<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
+				</view>
+			</view>
+			<view class="lf-row-between lf-m-t-30">
+				<view>实到数</view>
+				<view class="lf-flex">
+					<input class="input" placeholder="0" type="number" v-model="item.reachNum" @blur="inputBlur(index, 'real_reach_number', $event)" />
+					<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
+				</view>
+			</view>
+			<view class="lf-row-between lf-m-t-30">
+				<view>实收数</view>
+				<view class="lf-flex">
+					<input class="input" placeholder="0" type="number" v-model="item.receiveNum" @blur="inputBlur(index, 'real_receive_number', $event)" />
+					<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
+				</view>
+			</view>
+		</view>
+		<!-- 修饰底部 -->
+		<view :style="upload_list.length ? 'height: 260rpx' : 'height: 140rpx'"></view>
+		<!-- 凭证图 -->
+		<view class="fixed-images" v-if="upload_list.length">
+			<image class="ms-img" :src="item" @click="lookImage(index)" v-for="(item, index) in upload_list" :key="index" v-if="index < 6"></image>
+		</view>
+		<view class="fixed-bottom" v-if="list.length">
+			<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>
+			<button class="btn" @click="comfirm">确认收货</button>
+		</view>
+		<!-- 弹出层-确认收货修改 TODO每个都应该是动态 -->
+		<u-popup v-model="is_show_edit" mode="bottom" border-radius="20">
+			<view class="edit-popup-box">
+				<view class="popup-content">
+					<view>
+						<view class="popup-item" hover-class="lf-opacity" :style="currentObj(1)?'border-bottom:none':''" @click="switchItem(1)">
+							<text class="lf-font-bold">选择供应商</text>
+							<u-icon name="arrow-up" color="#777777" v-if="currentObj(1)"></u-icon>
+							<u-icon name="arrow-down" color="#777777" v-else></u-icon>
+						</view>
+						<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(1)?'max-height:360rpx':'max-height:0rpx'">
+							<view class="lf-row-between scroll-item" v-for="(item, index) in supplier_list" :key="index" @click="checkItem(index, 'supplier_list')">
+								<view>{{ item.name }}</view>
+								<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
+							</view>
+						</scroll-view>
+					</view>
+					
+					<view>
+						<view class="popup-item" hover-class="lf-opacity" :style="currentObj(2)?'border-bottom:none':''" @click="switchItem(2)">
+							<text class="lf-font-bold">选择物资</text>
+							<u-icon name="arrow-up" color="#777777" v-if="currentObj(2)"></u-icon>
+							<u-icon name="arrow-down" color="#777777" v-else></u-icon>
+						</view>
+						<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(2)?'max-height:360rpx':'max-height:0rpx'">
+							<view class="lf-row-between scroll-item" v-for="(item, index) in material_list" :key="index" @click="checkItem(index, 'material_list')">
+								<view>{{ item.name }}</view>
+								<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+				<u-button class="popup-btn" @click="comfirmEdit">确认修改</u-button>
+			</view>
+		</u-popup>
+		<!-- 弹出层-上传凭证 -->
+		<u-popup v-model="is_show_voucher" mode="center" border-radius="20">
+			<view class="voucher-popup-box">
+				<view class="popup-content">
+					<view class="popup-title">上传凭证信息</view>
+					<view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view>
+					<view class="popup-images">
+						<view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index, 'voucher_list')">
+							<image :src="item" mode="aspectFill"></image>
+							<view class="remove-image" @click.stop="removeInage(index)">
+								<u-icon name="close-circle"></u-icon>
+							</view>
+						</view>
+						<view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view>
+					</view>
+				</view>
+				<view class="foot-btn">
+					<u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button>
+					<u-button class="popup-btn" @click="submitImage">确定</u-button>
+				</view>
+			</view>
+		</u-popup>
+		<!-- 预览图片组件 -->
		<lf-previewimage ref="previewimage" />
+	</view>
+</template>
+
+<script>
+	import { uploadFile } from '@/common/uploadFile.js'
+	export default {
+		data(){
+			return {
+				list: [],
+				is_show_edit: false,
+				current_show: {
+					type: 1,
+					open: false
+				},
+				supplier_list: [{
+					name: '南开大学',
+					checked: false
+				},{
+					name: '华侨大学',
+					checked: false
+				}],
+				material_list: [{
+					name: '哈哈哈哈',
+					checked: false
+				},{
+					name: '嘿嘿嘿',
+					checked: false
+				}],
+				p_sn: '',
+				contents: [],
+				order: {},
+				type: 4,
+				reachNum: 0,
+				receiveNum: 0,
+				is_show_voucher: false,
+				voucher_count: 6,
+				voucher_list: [],
+				is_upload: false, // 是否上传了凭证
+				upload_list: []
+			}
+		},
+		computed: {
+			currentObj(){
+				let current_show = this.current_show;
+				return function(num){
+					return current_show.type == num && current_show.open
+				}
+			}
+		},
+		onLoad(options){
+			// http://localhost:8081/pages/purchase/receipt?p_sn=P16281395178122
+			this.p_sn = options.p_sn || '';
+			this.getData();
+		},
+		methods: {
+			// 预览图片
+			lookImage(current){
+				this.$u.throttle(() => {
+					this.$refs.previewimage.show({
+						images: this.upload_list,
+						current: current
+					});
+				}, 500);
+			},
+			// 移除图片
+			removeInage(current){
+				this.voucher_list.splice(current, 1);
+			},
+			// 上传凭证图片
+			uploadImage(){
+				let current_count = this.voucher_count - this.voucher_list.length;
+				if(current_count == 0) return;
+				uni.chooseImage({
+					count: current_count,
+					complete: result => {
+						this.voucher_list.push(...result.tempFilePaths);
+						console.log(this.voucher_list)
+					}
+				})
+			},
+			// 用户点击确定，将图片上传至oss，并将url发送给后端
+			submitImage(){
+				let that = this;
+				let voucher_list = that.voucher_list;
+				if(voucher_list.length <= 0){
+					return that.$msg('您未上传图片哦');
+				};
+				that.is_show_voucher = false;
+				uni.showLoading({
+					title: '正在上传中...'
+				})
+				let http_list = [];
+				voucher_list.map(item => {
+					let itemP = new Promise((resolve, reject) => {
+						uploadFile(item, (res) => {
+							resolve(res);
+						}, (err) => {
+							reject(err);
+						}, this);
+					})
+					http_list.push(itemP);
+				})
+				
+				Promise.all(http_list).then(res => {
+					let images = [];
+					let show_images = [];
+					res.map(item => {
+						if(item.path){
+							images.push(item.path);
+						}
+						if(item.url){
+							show_images.push(item.url);
+						}
+					});
+					that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, {
+						p_sn: that.p_sn,
+						images: images,
+					}).then(result => {
+						uni.hideLoading();
+						that.voucher_list = [];
+						that.is_upload = true;
+						that.upload_list.push(...show_images);
+						that.$msg('凭证已上传成功!')
+					}).catch(err => uni.hideLoading());
+					
+				}).catch(err => {
+					uni.hideLoading();
+					uni.showModal({
+						title: '',
+						content: JSON.stringify(err),
+						showCancel: false,
+						confirmColor: '#1833F2'
+					})
+				})
+			},
+			getData(){
+				this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, {
+					p_sn: this.p_sn
+				}).then(res => {
+					this.order = res.data.order;
+					this.list = res.data.order.items || [];
+					this.list.forEach(item => {
+						item.reachNum = item.purchase_number
+						item.receiveNum = item.purchase_number
+					})
+					let voucher = res.data?.order?.voucher || [];
+					voucher = voucher.filter(item => item.client_type == '食堂');
+					this.is_upload = voucher.length > 0;
+					this.upload_list = voucher.map(item => item.voucher_pic);
+				})
+			},
+			inputBlur(current, key, event){
+				this.list[current][key] = event.detail.value;
+			},
+			comfirm(){
+				let is_empty = false;
+				let real_count_item = []
+				this.list.forEach(item => {
+					if(!item.receiveNum || !item.reachNum){
+						is_empty = true;
+					}
+					real_count_item.push({
+						id:item.id,
+						real_receive_number: item.receiveNum,
+						real_reach_number: item.reachNum
+					})
+				})
+				if(is_empty){
+					return this.$msg('请将收货数量填写完整');
+				}
+				if(!this.is_upload){
+					return this.$msg('请上传凭证后再确认收货');
+				}
+				this.$http(this.API.API_CONFIRM, {
+					p_sn: this.p_sn,
+					state: '已入库',
+					real_count_item
+				}).then(res => {
+					this.$msg('确认收货成功').then(()=>{this.$toBack()});
+				})
+			},
+			switchItem(current){
+				let current_show = this.current_show;
+				if(current_show.type != current){
+					current_show.open = false;
+				}
+				current_show.type = current;
+				current_show.open = !current_show.open;
+				this.current_show = current_show;
+			},
+			checkItem(index, name){
+				this[name].forEach(item => item.checked = false);
+				this[name][index].checked = true;
+			},
+			// 确认修改
+			comfirmEdit(){
+				this.$msg('修改成功！');
+				this.is_show_edit = false;
+			},
+			// 显示修改弹出层
+			showEdit(){
+				this.current_show = {
+					type: 1,
+					open: false
+				};
+				this.is_show_edit = true;
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #F6F6F6;
+		overflow-x: hidden;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.content{
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		flex-direction: column;
+	}
+	.card{
+		width: 686rpx;
+		height: auto;
+		background-color: #FFFFFF;
+		border-radius: 20rpx;
+		margin-top: 30rpx;
+		font-size: 28rpx;
+		box-sizing: border-box;
+		padding: 30rpx;
+		color: #777777;
+		.input{
+			width: 112rpx;
+			border-bottom: 1rpx solid #e5e5e5;
+			margin-right: 14rpx;
+			text-align: center;
+			color: #222222;
+		}
+	}
+	.fixed-images{
+		position: fixed;
+		bottom: 98rpx;
+		left: 0rpx;
+		z-index: 99;
+		width: 750rpx;
+		height: 126rpx;
+		background-color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.ms-img{
+			// 六张一行
+			width: 102rpx;
+			height: 102rpx;
+			// width: 146rpx;
+			// height: 146rpx;
+			margin-right: 14rpx;
+			background-color: #EEEEEE;
+			&:nth-of-type(6n){
+				margin-right: 0rpx;
+			}
+		}
+	}
+	.fixed-bottom{
+		position: fixed;
+		bottom: 0rpx;
+		left: 0rpx;
+		z-index: 99;
+		width: 750rpx;
+		height: 98rpx;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		border-top: 1rpx solid #E5E5E5;
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+		padding: 0 32rpx;
+		.btn{
+			width: 212rpx;
+			background-color: #11D189;
+			font-size: 32rpx;
+			line-height: 82rpx;
+			margin: 0;
+			height: 82rpx;
+			border-radius: 40rpx;
+			color: #FFFFFF;
+		}
+		.btn1{
+			border: 2rpx solid #555555;
+			background-color: #FFFFFF;
+			color: #555555;
+			line-height: 80rpx;
+			margin-right: 20rpx;
+		}
+	}
+	
+	/deep/.placeholder-class{
+		color: #777777;
+	}
+	// 去掉u-button 外边框线
+	/deep/.u-hairline-border::after{
+		border: none;
+	}
+	// 修改收货信息弹出层
+	.edit-popup-box{
+		width: 100%;
+		min-height: 484rpx;
+		max-height: 64vh;
+		padding: 10rpx 32rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		.popup-content{
+			min-height: 332rpx;
+			// max-height: 54vh;
+			margin-bottom: 40rpx;
+			.popup-item{
+				padding: 30rpx 0;
+				box-sizing: border-box;
+				border-bottom: 1rpx solid #E5E5E5;
+				display: flex;
+				justify-content: space-between;
+				font-size: 28rpx;
+				color: #222222;
+			}
+			.scroll-box{
+				transition: all .5s;
+				.scroll-item{
+					padding: 30rpx 0;
+				}
+			}
+		}
+		.popup-btn{
+			width: 100%;
+			height: 82rpx;
+			background: #11D189;
+			border-radius: 10rpx;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			margin-bottom: 30rpx;
+		}
+	}
+	
+	// 上传凭证弹出层
+	.voucher-popup-box{
+		width: 686rpx;
+		height: max-content;
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		.popup-content{
+			.popup-title{
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #222222;
+				text-align: center;
+				margin-top: 40rpx;
+			}
+			.popup-desc{
+				font-size: 28rpx;
+				color: #555555;
+				text-align: center;
+				margin-top: 20rpx;
+				margin-bottom: 18rpx;
+			}
+			.popup-images{
+				display: flex;
+				flex-wrap: wrap;
+				padding: 22rpx;
+				margin-bottom: 18rpx;
+				.popup-image-item{
+					width: 198rpx;
+					height: 198rpx;
+					margin: 8rpx;
+					background: #F5F5F5;
+					border-radius: 10rpx;
+					position: relative;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+					.remove-image{
+						position: absolute;
+						right: -8rpx;
+						top: -16rpx;
+						color: #e74c3c;
+						font-size: 40rpx;
+						padding: 8rpx;
+					}
+				}
+				.popup-image-item-after::after{
+					content: '+';
+					position: absolute;
+					left: 30%;
+					top: 14%;
+					font-size: 100rpx;
+					color: #777777;
+				}
+			}
+			.popup-input{
+				padding: 0 60rpx;
+				box-sizing: border-box;
+				height: 90rpx;
+				font-size: 28rpx;
+				color: #555555;
+				input{
+					text-align: right;
+				}
+			}
+		}
+		.foot-btn{
+			height: 90rpx;
+			width: 100%;
+			border-top: 1rpx solid #E5E5E5;
+			display: flex;
+			box-sizing: border-box;
+			.popup-btn{
+				width: 50%;
+				height: 100%;
+				border: none;
+				border-radius: initial;
+				&:last-child{
+					border-left: 1rpx solid #E5E5E5;
+					color: #1833F2;
+				}
+			}
+		}
+	}
+</style>
diff --git a/supplier/components/lf-previewImage/lf-previewImage.vue b/supplier/components/lf-previewImage/lf-previewImage.vue
index 9bb782d..0143b20 100644
--- a/supplier/components/lf-previewImage/lf-previewImage.vue
+++ b/supplier/components/lf-previewImage/lf-previewImage.vue
@@ -1,7 +1,8 @@
 <template>
 	<view>
 		<swiper class="swiper" :animation="animationData"
-			:style="{'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}" 
+			:style="{ 'opacity': animation ? '0' : '1',
+				'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}" 
 			:current="swiper_current" :circular="circular"
 			v-if="show_assembly" @click="hideAssembly"
 			@touchmove.stop.prevent="touchmove" 
@@ -70,6 +71,10 @@
 			themeColor: {
 				type: String, // 主题色
 				default: '#1833F2'
+			},
+			animation: {
+				type: Boolean, // 是否开启动画
+				default: false
 			}
 		},
 		data(){
@@ -78,7 +83,7 @@
 				images: [],
 				show_assembly: false, // 显示预览图片
 				duration: 500, // 动画持续时间
-				animation: {}, // 动画配置对象
+				animationObj: {}, // 动画配置对象
 				animationData: {}, // 动画导出执行对象
 				scale_values: [], // 每张图的缩放比例
 				clientY: 0
@@ -93,13 +98,13 @@
 		methods: {
 			// 初始化加载动画
 			initAnimation(){
-				let animation = uni.createAnimation({
+				let animationObj = uni.createAnimation({
 					duration: this.duration
 				});
-				this.animation = animation;
-				animation.opacity(0).step();
-				animation.opacity(1).step();
-				this.animationData = animation.export();
+				this.animationObj = animationObj;
+				animationObj.opacity(0).step();
+				animationObj.opacity(1).step();
+				this.animationData = animationObj.export();
 			},
 			// swiper touchmove事件
 			touchmove(){
@@ -137,15 +142,21 @@
 				this.swiper_current = options.current || 0;
 				this.scale_values = this.images.map(item => 1);
 				this.show_assembly = true;
-				this.initAnimation();
+				if(this.$props.animation){
+					this.initAnimation();
+				}
 			},
 			// 关闭隐藏图片
 			hideAssembly(){
-				this.animation.opacity(0).step();
-				this.animationData = this.animation.export();
-				setTimeout(() => {
+				if(this.$props.animation){
+					this.animationObj.opacity(0).step();
+					this.animationData = this.animationObj.export();
+					setTimeout(() => {
+						this.show_assembly = false;
+					}, this.duration);
+				}else{
 					this.show_assembly = false;
-				}, this.duration);
+				}
 			}
 		}
 	}
@@ -159,7 +170,6 @@
 		top: 0;
 		left: 0;
 		z-index: 1000;
-		opacity: 0;
 		.swiper-item{
 			position: relative;
 			.movable-area, .movable-view, .swiper-image{
@@ -172,7 +182,7 @@
 				box-sizing: border-box;
 				display: flex;
 				justify-content: space-between;
-				top: 42vh;
+				top: 47vh;
 				left: 0;
 				font-size: 40rpx;
 				width: 100%;