cbz/page_index/pages/purchase/orderDetail.vue

`<template>
	<view class="content">
		<view class="box">
			<view class="hflex acenter jbetween top">
				<view class="order_no">订单编号：{{pageData.order_no}}</view>
				<view class="type type1" v-if="tab == 0">采购订单</view>
				<view class="type type2" v-if="tab == 1">生产订单</view>
				<view class="type type3" v-if="tab == 2">外协订单</view>
				<view class="type type4" v-if="tab == 3">海运订单</view>
			</view>	
			<view class="title">{{pageData.merchant.company}}</view>
			<view class="hflex acenter jbetween padT-16">
				<view class="hflex astart">
					<view class="text_style2" style="width: 96rpx;">地址：</view>	
					<view class="text_style2 black">
						{{pageData.merchant.address	}}
					</view>
				</view>	
				<u-icon name="map-fill" color="#506DFF" size="14"></u-icon>
			</view>	
			<view class="hflex astart padT-16">
				<view class="text_style2" style="width: 96rpx;">联系人：</view>	
				<view class="text_style2 black">
					{{pageData.real_name}}
				</view>
			</view>
			<view class="hflex acenter jbetween padT-16">
				<view class="hflex astart">
					<view class="text_style2" style="width: 96rpx;">手机号：</view>	
					<view class="text_style2 black">
						{{pageData.mobile}}
					</view>
				</view>	
				<u-icon name="phone-fill" color="#506DFF" size="14"></u-icon>
			</view>	
		</view>	
		<view class="box">
			<view class="title">商品明细</view>
			<view class="list">
				<block v-for="(item,index) in pageData.items" :key="index">
					<view class="list_item" v-if="tab == 0">
						<view class="item_title cell">{{item.name}}</view>
						<view class="hflex acenter cell">
							<view class="text_style2 padR-20">规格：{{item.spec}}</view>
							<view class="text_style2">数量：{{item.number}}</view>
						</view>
						<view class="hflex acenter cell">
							<view class="text_style2 padR-20">原购买价：{{item.price}}</view>
						</view>
						<view class="hflex acenter fwrap text_style2 cell">质量标准：{{item.standard}}</view>
						<view class="cell" style="width: 100%;">
							<view class="item_btn btn1" v-if="item.status == 2" @click="see(index)">已接单，立即查看</view>
							<view class="item_btn btn1" v-if="item.status == 1" @click="start(item.id)">立即接单</view>
							<view class="item_btn btn2" v-if="item.status == 3">不用报价，已匹配接单人</view>
						</view>
					</view>
					<view class="list_item" v-if="tab == 1 || tab == 2">
						<view class="item_title">{{item.name}}</view>
						<view class="hflex acenter cell">
							<view class="text_style2 padR-20" v-if="item.spec">规格型号：{{item.spec}}</view>
							<view class="text_style2" v-if="item.number">生产数量：{{item.number}}</view>
						</view>
						<view class="vflex">
							<block v-for="(item2,index2) in item.enclosure" :key="index2">
								<view class="hflex acenter jbetween" style="margin-top: 20rpx;">
									<view class="hflex acenter" v-if="item2.filename">
										<image :src="item2.icon" class="item_img"></image>
										<view class="text_style1">{{item2.filename}}</view>
									</view>
									<view class="hflex acenter jcenter item_btn1" v-if="item2.fileurl">
										<u-icon name="download" color="#506DFF" size="10"></u-icon>
										<view @click.stop="download(index,index2)">下载附件</view>
									</view>
								</view>
							</block>
						</view>
					</view>
					<view class="list_item" v-if="tab == 3">
						<view class="item_title cell">{{item.name}}</view>
						<view class="hflex acenter cell">
							<view class="text_style2 padR-20">数量/吨位：{{item.weight}}</view>
						</view>
					</view>
				</block>
			</view>
			<view class="" v-if="tab == 1 || tab == 2">
				<view class="hflex acenter fwrap text_style2 cell">生产技术标准：{{pageData.standard_tech}}</view>
				<view class="hflex acenter fwrap text_style2 cell">生产验收标准：{{pageData.standard_check}}</view>
			</view>
			<view v-if="pageData.images">
				<view v-if="pageData.images.length > 0">
					<view class="title">图片/视频</view>
					<view>
						<block v-for="(item,index) in pageData.images" :key="index">
							<image v-if="item.type == 'image'" :src="item.src" class="img" mode="aspectFill"></image>
							<video class="img" v-else :src="item.src"></video>
						</block>
					</view>
				</view>
			</view>
			
			<view v-if="tab == 3">
				<view class="hflex acenter padT-16">
					<view class="text_style2">包装形式：</view>
					<view class="text_style2 black">{{pageData.form}}</view>
				</view>
				<view class="hflex acenter padT-16"> 
					<view class="text_style2">装货码头：</view>
					<view class="text_style2 black">{{pageData.wharf_to}}</view>
				</view>
				<view class="hflex acenter padT-16">
					<view class="text_style2">到港码头：</view>
					<view class="text_style2 black">{{pageData.wharf_for}}</view>
				</view>
			</view>
		</view>
		<view class="box" style="margin-bottom: 186rpx;" v-if="tab != 3">
			<view class="hflex acenter padT-16">
				<view class="text_style2">交货地址：</view>
				<view class="text_style2 black">{{pageData.post_address}}</view>
			</view>
			<view class="hflex acenter padT-16">
				<view class="text_style2">交货日期：</view>
				<view class="text_style2 black">{{pageData.post_time}}</view>
			</view>
			<view class="hflex acenter padT-16">
				<view class="text_style2">发布日期：</view>
				<view class="text_style2 black">{{pageData.create_time}}</view>
			</view>
		</view>
		<view style="margin-bottom: 186rpx;" v-else></view>
		<view class="bottom hflex acenter jbetween">
			<view class="hflex acenter">
				<view class="vflex acenter" style="margin-right: 42rpx;" @click="collect">
					<u-icon name="star" color="#444444" size="20" v-if="!pageData.is_fav"></u-icon>
					<u-icon name="star-fill" color="#506DFF" size="20" v-else></u-icon>
					<view class="text_style1">收藏</view>	
				</view>	
				<view class="vflex acenter" @click="share('Poster1')">
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/share.png" mode="" class="bottom_img"></image>	
					<view class="text_style1">分享</view>	
				</view>	
			</view>
			<view v-if="tab == 0">
				<view class="bottom_btn" v-if="pageData.type == 2" @click="chat">私信聊聊</view>
			</view>
			<view class="hflex acenter" v-if="tab != 0">
				<view class="bottom_btn1" @click="chat" v-if="pageData.type == 2">私信聊聊</view>
				<view class="bottom_btn2" @click="start(pageData.id)" v-if="pageData.status == 1">开始接单</view>
				<view class="bottom_btn2 bottom_btn2_alear" @click="see(index)" v-if="pageData.status == 2">已接单，立即查看</view>
				<view class="bottom_btn2" v-if="pageData.status == 3">已匹配</view>
			</view>
		</view>
		<u-popup :show="quotation_show" mode="center" :round="10" :closeable="true" :safeAreaInsetBottom="false" @close="close">
			<view class="popup">
				<view class="popup_title">填写报价信息</view>
				<view class="input_bg hflex acenter">
					<view class="price">￥</view>
					<u-input v-model="offer" placeholder="填写你的报价" border="none"></u-input>
				</view>
				<view class="hflex acenter">
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/icon_tips.png" style="width: 24rpx;height: 24rpx;padding-right: 6rpx"></image>
					<view class="popup_info">报价可先不填，可等评估后再填写</view>
				</view>
				<view class="input_bg hflex acenter" v-if="tab == 2 || tab == 3">
					<view class="price">报价说明</view>
					<u-input v-model="description" placeholder="例如:税前/税后" border="none"></u-input>
				</view>
				<view class="input_bg hflex acenter" v-else>
					<view class="price">货期</view>
					<u-input v-model="lead_time" placeholder="例如: 1个月" border="none"></u-input>
				</view>
				<view class="input_bg" v-if="tab == 0 || tab == 1">
					<view class="price">产品介绍以及报价说明</view>
					<u--textarea v-model="description" placeholder="例如:税前/税后" border="none"></u--textarea>
				</view>
				<view class="hflex acenter jbetween" v-if="tab == 0">
					<view class="price">是否现货</view>
					<u-switch v-model="is_stock" activeColor="#506dff" @change="change"></u-switch>
				</view>
				<view class="hflex acenter" style="padding-bottom: 20rpx;">
					<view class="price">上传图片及资质证明图片</view>
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/icon_tips.png" style="width: 24rpx;height: 24rpx;padding-right: 6rpx"></image>
					<view class="popup_info">最多上传9张图片</view>
				</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"></u-upload>
				<view class="popup_btn" @click="receiving">立即接单</view>
				<view class="price">友情提醒：</view>
				<view class="popup_info">请认真核算报价，报价后不可修改和删除，报价时间约需x天内报价，逾期影响信用等级。</view>
			</view>
		</u-popup>
		<u-popup :show="detail_show" mode="center" :round="10" :closeable="true" :safeAreaInsetBottom="false" @close="close">
			<view class="popup">
				<view class="popup_title">报价信息</view>
				<view class="popup_name">报价说明</view>
				<view class="input_bg" v-if="tab == 0">{{pageData.items[index].user_order.desc}}</view>
				<view class="input_bg" v-else>{{pageData.user_order.desc}}</view>
				<view class="popup_name">当前报价</view>
				<block v-if="tab==0">
					<block v-for="(item,index) in pageData.items[index].user_order.amounts" :key="index">
						<view class="hflex acenter input_bg">
							<view class="popup_text">第{{index+1}}次报价</view>
							<view class="red">{{item.amount}}</view>
						</view>
					</block>
				</block>
				<block v-else>
					<block v-for="(item,index) in pageData.user_order.amounts" :key="index">
						<view class="hflex acenter input_bg">
							<view class="popup_text">第{{index+1}}次报价</view>
							<view class="red">{{item.amount}}</view>
						</view>
					</block>
				</block>
				<view class="popup_name">图片及资质证明图片</view>
				<block v-if="pageData.tab == 1">
					<block v-for="(item,index1) in pageData.items[index].user_order.images" :key="index1">
						<image :src="item" mode="aspectFill" style="width: 188rpx;height: 188rpx;margin: 0 14rpx 20rpx 0;border-radius: 16rpx;"></image>
					</block>
				</block>
				<block v-else>
					<block v-for="(item,index1) in pageData.user_order.images" :key="index1">
						<image :src="item" mode="aspectFill" style="width: 188rpx;height: 188rpx;margin: 0 14rpx 20rpx 0;border-radius: 16rpx;"></image>
					</block>
				</block>
				<view class="popup_btn" @click="toDetail(index)">查看详情</view>
			</view>
		</u-popup>
		<view class="share_content" :class="share_show?'':'share_content1'">
			<!-- <view style="width: 100%;height: 168rpx;"></view> -->
			<view class="share_box vflex">
				<text class="share_name Poster1" style="margin: 40rpx 0 28rpx;" :data-enode="pageData.merchant.company">{{pageData.merchant.company}}</text>
				<view class="share_boxbg Poster1">
					<view class="Poster1 share_cell" data-enode="商品明细">商品明细</view>
					<block v-if="tab !== 4">
						<!-- <block v-for="(item,index) in pageData.items" :key="index"> -->
						<view class="item_title Poster1" :data-enode="pageData.items[0].name">{{pageData.items[0].name}}</view>
						<view class="hflex acenter">
							<view class="text_style2 padR-20 Poster1" :data-enode="'规格：'+pageData.items[0].spec">规格：{{pageData.items[0].spec}}</view>
							<view class="text_style2 Poster1" :data-enode="'数量：'+pageData.items[0].number">数量：{{pageData.items[0].number}}</view>
						</view>
						<!-- </block> -->
					</block>
					<block v-if="tab == 4">
						<!-- <block v-for="(item,index) in pageData.items" :key="index"> -->
						<view class="item_title Poster1" :data-enode="pageData.items[0].name">{{pageData.items[0].name}}</view>
						<view class="hflex acenter cell">
							<view class="text_style2 padR-20 Poster1" :data-enode="'数量/吨位：'+pageData.items[0].weight">数量/吨位：{{pageData.items[0].weight}}</view>
						</view>
						<!-- </block> -->
					</block>
				</view>
				<view class="share_label Poster1" :data-enode="'交货日期' + pageData.post_time" v-if="tab !== 3">交货日期：{{pageData.post_time}}</view>
				<view class="Poster1 share_label" :data-enode="'包装形式' + pageData.form" v-else>包装形式：{{pageData.form}}</view>
				<view class="hflex acenter share_text jcenter Poster1" style=" margin: 0 190rpx 12rpx;" data-enode="扫码查看订单详情">扫码查看订单详情</view>
				<view style="width: 100%;" class="vflex acenter jcenter">
					<image class="Poster1" style="width: 25rpx;height: 20rpx;" :data-enode="style.img1" data-etype="image" :src="style.img1"></image>
					<image class="Poster1" style="width: 100%;height: 2rpx;margin: 30rpx 0;" :data-enode="style.img2" data-etype="image" :src="style.img2"></image>
				</view>
				<view class="hflex acenter jbetween">
					<view class="vflex">
						<view class="share_name Poster1" style="margin: 54rpx 0 20rpx;" data-enode="船百知">船百知</view>
						<view class="share_text Poster1" style="margin: 0 0 36rpx;" data-enode="船百知伴你一起杨帆启航,驶向成功彼岸">船百知伴你一起杨帆启航,驶向成功彼岸</view>
					</view>
					<image class="Poster1" data-etype="image" :data-enode="style.code" :src="style.code" style="width: 136rpx;height: 136rpx;" shape="10"></image>
					<!-- <image class="Poster1" data-etype="image" :data-enode="share_img" :src="share_img" style="width: 136rpx;height: 136rpx;"></image> -->
				</view>
			</view>
			<evils-el-poster width="325" height="467" @on-error="onError" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" ref="Eposter"></evils-el-poster>
			<view class="share_bottom">
				<view class="hflex acenter jcenter">
					<button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/wx.png" class="item_icon"></image>
						<view class="item_text">微信好友</view>
					</button>
					<!-- <button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/moments.png" class="item_icon"></image>
						<view class="item_text">朋友圈</view>
					</button> -->
					<view class="vflex acenter jcenter bottom_item" @click="saveImg">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/download.png" class="item_icon"></image>
						<view class="item_text">保存图片</view>
					</view>
				</view>
				<view class="share_cancel" @click="close">取消</view>
			</view>
		</view>
		<u-popup :show="down_show" mode="center" @close="close">
			<view class="popu">
				<view class="popu_top hflex acenter jbetween">
					<view></view>
					<view class="popu_title">下载文件</view>
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/close.png" style="width: 32rpx;height: 32rpx;" @click="close"></image>
				</view>
				<view class="file_bg hflex acenter">
					<image :src="pageData.items[index1].enclosure[index2].icon" class="file_icon"></image>
					<view class="file_name text_hide" style="max-width: 400rpx;">{{pageData.items[index1].enclosure[index2].filename}}</view>
				</view>
				<view class="btn_group hflex acenter jbetween">
					<view class="left_btn hflex acenter jcenter" @click="copy(pageData.items[index1].enclosure[index2].fileurl)">复制链接</view>
					<view class="right_btn hflex acenter jcenter" @click="privince(pageData.items[index1].enclosure[index2].fileurl)">预览文件</view>
				</view>
				<!-- <view class="hflex acenter jcenter text_blue" @click="privince(pageData.items[index1].enclosure[index2].fileurl)">预览文件></view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				id: '',
				pageData: {
				},
				quotation_show: false,
				detail_show: false,
				offer: '',
				lead_time: '',
				description: '',
				is_stock: false,
				fileList1: [],
				index: -1,
				share_show: false,
				tab: '',
				id2: '',
				list: [],
				style: {
					img1: 'https://ship-expert.zhousi.hdlkeji.com/common/down2.png',
					img2: 'https://ship-expert.zhousi.hdlkeji.com/common/line.png',
					code: 'https://ship-expert.zhousi.hdlkeji.com/common/code.jpg'
				},
				tempImage:'',
				down_show:false,
				index1: 0,
				index2: 0,
				share_img: '',
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.tab = options.tab
			that.getData()
			that.getShareimg()
		},
		onShareAppMessage(res) {
			console.log(res);
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: '船百知', //分享的名称
		    }
		},
		onShareTimeline(res) {
			console.log(res);
		    return {
		        title: '船百知',
		        type: 0,
		        summary: "",
		    }
		},
		methods: {
			getData() {
				console.log(that.tab);
				var url = ''
				switch(that.tab) {
					case '0' : 
						url = '/data/api.auth.Purchase/show';
						break;
					case '1' :
						url = '/data/api.auth.Purchase/production_show';
						break;
					case '2' :
						url = '/data/api.auth.Purchase/coor_show';
						break;
					case '3' :
						url = '/data/api.auth.Purchase/ocean_show';
						break;
				}
				$api.req({
					url: url,
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
					}
				})
			},
			getShareimg() {
				$api.req({
					url: '/data/api.auth.Center/getrule',
					method: 'POST',
					
				}, function(res) {
					if(res.code == 1) {
						that.share_img = res.data.download_url_code
					}
				})
			},
			// 收藏
			collect() {
				if(that.pageData.is_fav) {
					that.pageData.is_fav = false
					
				} else {
					that.pageData.is_fav = true
				}
				$api.req({
					url: '/data/api.auth.Purchase/favourite',
					method: 'POST',
					data: {
						id: that.id,
						tab: Number(that.tab) + 1,
						action: that.pageData.is_fav?1:0
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
			},
			chat() {
				var my = uni.getStorageSync("myUsername");
				var nameList = {
				  myName: my,
				  your: that.pageData.huanxinID,
				};
				uni.navigateTo({
				  url: "/pages/chatroom/chatroom?username=" + JSON.stringify(nameList),
				});
				/* var tab = Number(that.tab) + 1
				$api.jump('/page_index/pages/purchase/chat?id=' + that.id + '&tab=' + tab) */
			},
			// 打开填写报价信息
			start(id) {
				that.id2 = id
				that.quotation_show = true
			},
			// 打开报价信息
			see(index) {
				that.index = index
				that.detail_show = true
			},
			download(index1,index2) {
				that.index1 = index1
				that.index2 = index2
				that.down_show = true
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function () {
						$api.info('复制成功')
					}
				});
			},
			down(url) {
				wx.downloadFile({
				  url: url, //仅为示例，并非真实的资源
				  success (res) {
				    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				    if (res.statusCode === 200) {
						const filePath = res.tempFilePath
						uni.saveFile({
							tempFilePath: filePath,
							success: function(res) {
								console.log(res);
								that.close()
								// $api.info("下载成功")
								uni.setClipboardData({
									data: res.savedFilePath,
									success: function () {
										$api.info('下载成功，路径已复制到剪贴板中')
									}
								});
								// that.privince(res.savedFilePath)
							}
						})
				    }
				  }
				})
			},
			privince(url) {
				that.close()
				wx.downloadFile({
				  // 示例 url，并非真实存在
				  url: url,
				  showMenu: true,
				  success: function (res) {
				    const filePath = res.tempFilePath
				    wx.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功')
				      }
				    })
				  }
				})
			},
			// 关闭弹窗
			close() {
				that.quotation_show = false
				that.detail_show = false
				that.share_show = false
				that.down_show = false
			},
			// 是否现货
			change(e) {
				console.log(e);
				that.is_stock = e
			},
			toDetail(index) {
				var tab = Number(that.tab) + 1
				$api.jump('/page_shop/pages/order/offer?id=' + that.id + '&tab=' + tab + '&index=' + index)
				that.close()
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						// status: 'success',
						// message: '',
						type: result.type,
						url: result.url
					}))
					fileListLen++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + '/data/api.auth.Center/upload',  
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'api-token': uni.getStorageSync('token').token?uni.getStorageSync('token').token:'',
							'api-name': 'wxapp'
						},
						// formData: {
						// 	user: 'test'
						// },
						success: (res) => {
							setTimeout(() => {
								var data = JSON.parse(res.data)
								console.log('data:',data);
								var type = data.data.key.split('.')
								if(type[1] == 'mp4') {
									that.$set(data.data,'type','video')
								} else {
									that.$set(data.data,'type','image')
								}
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			receiving() {
				var imgsList = []
				for(var i=0;i<that.fileList1.length;i++) {
					imgsList.push(that.fileList1[i].url)
				}
				var url = ""
				var data = ""
				if(that.description == "") {
					$api.info('请填写报价说明')
					return
				}
				if(imgsList == "") {
					$api.info('请上传图片资质')
					return
				}
				switch(that.tab) {
					case '0': 
						url = '/data/api.auth.Purchase/purchase_create';
						data = {
							id: that.id2,
							amount: that.offer,
							date: that.lead_time,
							desc: that.description,
							is_have: that.is_stock?1:0,
							images: imgsList,
						};
						break;
					case '1':
						url = '/data/api.auth.Purchase/production_create';
						data = {
							id: that.id2,
							amount: that.offer,
							date: that.lead_time,
							desc: that.description,
							images: imgsList,
						};
						break;
					case '2':
						url = '/data/api.auth.Purchase/coor_create';
						data = {
							id: that.id2,
							amount: that.offer,
							desc: that.description,
							images: imgsList,
						};
						break;
					case '3':
						url = '/data/api.auth.Purchase/ocean_create';
						data = {
							id: that.id2,
							amount: that.offer,
							desc: that.description,
							images: imgsList,
						};
						break;
				}
				$api.req({
					url: url,
					method: 'POST',
					data: data
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.close()
						that.getData()
					}
				})
			},
			share(elClass) {
				let view = uni.createSelectorQuery().in(this).select(".Poster1");
				
				view.fields({
				  size: true,
				  rect: true,
				  scrollOffset: true
				}, data => {
				}).exec();
				that.share_show = true
				that.$refs.Eposter.createForElRect(elClass,false)
			},
			onSuccess(e) {
				console.log(e);
				that.tempImage = e
			},
			onError(err) {
				console.log('发生错误');
				console.log(err);
			},
			saveImg() {
				console.log(that.tempImage);
				uni.authorize({
				    scope: 'scope.writePhotosAlbum',
				    success() {
				        uni.saveImageToPhotosAlbum({
				        	filePath: that.tempImage,
				        	success: function () {
				        		console.log('save success');
								$api.info('保存成功')
								that.close()
				        	}
				        });
				    }
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: url('https://ship-expert.zhousi.hdlkeji.com/common/background.png') #f4f4f4 no-repeat;
		background-size: 100%;
		.box {
			margin: 20rpx auto 0;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			
			.top {
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #F4F4F4;
				.order_no {
					font-size: 24rpx;
					font-weight: 400;
					color: #222222;
				}
				.type {
					width: 100rpx;
					height: 36rpx;
					background: #506DFF;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 36rpx;
				}
				.type1 {
					background: #506DFF;
				}
				.type2 {
					background: #FEA227;
				}
				.type3 {
					background: #54D2C5;
				}
				.type4 {
					background: #60CE8A;
				}
			}
			
			
			.title {
				margin: 20rpx 0 24rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
			}
			.img {
				width: 208rpx;
				height: 208rpx;
				border-radius: 16rpx;
				margin: 0 14rpx 20rpx 0;
			}
			.img:nth-child(3n) {
				margin: 0 0 20rpx;
			}
			.padT-16{
				padding-top: 16rpx;
			}
			.padR-20 {
				padding-right: 20rpx;
			}
			.cell {
				padding: 10rpx 0;
			}
			.list {
				width: 100%;
				.list_item {
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					background: #F4F4F4;
					border-radius: 8px;
					margin-top: 20rpx;
					.item_title {
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
					}
					
					.item_btn {
						width: 570rpx;
						margin: 0 auto;
						height: 76rpx;
						text-align: center;
						line-height: 76rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #506DFF;
					}
					.item_btn1 {
						width: 120rpx;
						height: 44rpx;
						border-radius: 22rpx;
						border: 1px solid #506DFF;
						padding: 0 8rpx;
						box-sizing: border-box;
						font-size: 16rpx;
						font-weight: 400;
						color: #506DFF;
					}
					.btn1 {
						background: #EAF4FF;
						border-radius: 12rpx;
						border: 1px solid #536FFE;
					}
					.btn2 {
						background: #C5C5C5;
						border-radius: 6px;
						color: #FFFFFF;
					}
					.item_img {
						width: 36rpx;
						height: 44rpx;
						margin-right: 8rpx;
					}
				}
			}
			
		}
		
		.text_style1 {
			font-size: 20rpx;
			font-weight: 400;
			color: #444444;
		}
		.text_style2 {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
		}
		.black {
			color: #222222;
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 74rpx;
			
			.bottom_btn {
				width: 530rpx;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 84rpx;
			}
			.bottom_btn1 {
				width: 204rpx;
				height: 84rpx;
				border-radius: 21px;
				border: 1px solid #506DFF;
				font-size: 36rpx;
				font-weight: 500;
				color: #506DFF;
				text-align: center;
				line-height: 84rpx;
			}
			.bottom_btn2 {
				// width: 300rpx;
				height: 84rpx;
				border-radius: 21px;
				background: #506DFF;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 500;
				text-align: center;
				line-height: 84rpx;
				padding: 0 54rpx;
				margin:0 20rpx;
			}
			.bottom_btn2_alear {
				background: rgba(80,109,255,0.5);
				padding: 0 10rpx;
				margin-left: 10rpx;
			}
			.bottom_img {
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		.popup {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 36rpx 30rpx 24rpx;
			.popup_title {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				margin-bottom: 24rpx;
			}
			.popup_name {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				padding: 28rpx 0 20rpx;
			}
			.popup_text {
				font-size: 22rpx;
				font-weight: 500;
				color: #777777;
				padding-right: 60rpx;
			}
			.input_bg {
				background: #F4F4F4;
				border-radius: 8px;
				box-sizing: border-box;
				padding: 16rpx 20rpx;
				margin: 20rpx 0;
				.price {
					font-size: 32rpx;
					font-weight: 500;
					color: #222222;
					padding-right: 20rpx;
				}
				.u-textarea {
					background-color: #F4F4F4 !important;
				}
				.red {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF3636;
				}
			}
			.popup_info {
				font-size: 20rpx;
				font-weight: 400;
				color: #C0C0C0;
				line-height: 28rpx;
			}
			.popup_btn {
				width: 610rpx;
				height: 80rpx;
				background: #506DFF;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin: 20rpx 0;
			}
		}
		.share_content {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,0.5);
			backdrop-filter: blur(5px);
			padding: 0 0 0;
			.share_box {
				margin: 100rpx auto 0;
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 48rpx 35rpx 0;
				.share_name {
					width: 100%;
					font-size: 32rpx;
					font-weight: 500;
					color: #222222;
					line-height: 44rpx;
				}
				.share_boxbg {
					background: #F4F4F4;
					border-radius: 8px;
					box-sizing: border-box;
					padding: 0 20rpx;
					.share_cell {
						padding: 20rpx 0;
						border-bottom: 1rpx solid #EFEFEF;
					}
					.item_title {
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						line-height: 40rpx;
						padding: 20rpx 0 16rpx;
					}
					.text_style2 {
						font-size: 24rpx;
						font-weight: 400;
						color: #888888;
						line-height: 34rpx;
					}
					.padR-20 {
						padding-right: 20rpx;
					}
				}
				.share_label {
					font-size: 26rpx;
					font-weight: 400;
					color: #444444;
					line-height: 36rpx;
					margin: 20rpx 0 54rpx;
				}
				.share_text {
					font-size: 20rpx;
					font-weight: 400;
					color: #BEBEBE;
					line-height: 28rpx;
					margin: 20rpx 136rpx 18rpx;
				}
				.box_bottom {
					width: 100%;
					padding: 34rpx 0 16rpx;
					border-top: 1rpx dashed #C3C3C3;
					
					.bottom_left1 {
						font-size: 32rpx;
						font-weight: 500;
						color: #222222;
						line-height: 44rpx;
						padding-bottom: 20rpx;
						
					}
					.bottom_left2 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
					}
					.bottom_right {
						width: 136rpx;
						height: 136rpx;
					}
				}
			}
			/* .canvas {
				position: absolute;
				top: 128rpx;
				left: 50rpx;
				width: 650rpx;
				min-height: 494rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
			} */
			.share_bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 388rpx;
				background: #F5F7FF;
				border-radius: 40rpx 40rpx 0px 0px;
				.bottom_item {
					width: 33%;
					margin: 50rpx 0 90rpx;
					border: none !important;
					background-color: #F5F7FF !important;
					.item_icon {
						width: 76rpx;
						height: 76rpx;
					}
					.item_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
				}
				button::after {
					border: none !important;
				}
				.share_cancel {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
		.share_content1 {
			z-index: -99 !important;
		}
		.popu {
			width: 630rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 0 40rpx;
			.popu_top {
				padding: 32rpx 0 40rpx;
				.popu_title {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
				}
			}
			.file_bg {
				width: 550rpx;
				height: 100rpx;
				background: #F4F4F4;
				border-radius: 16rpx;
				margin: 0 0 42rpx;
			}
			.file_icon {
				width: 48rpx;
				height: 60rpx;
			}
			.file_name {
				padding-left: 14rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			.btn_group {
				width: 100%;
				padding: 30rpx 0;
				.left_btn {
					width: 260rpx;
					height: 76rpx;
					background: #ECEFFE;
					border-radius: 40rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #506DFF;
					line-height: 42rpx;
				}
				.right_btn {
					width: 260rpx;
					height: 76rpx;
					background: #506DFF;
					border-radius: 40rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 42rpx;
				}
			}
			.text_blue {
				font-size: 30rpx;
				font-weight: 400;
				color: #506DFF;
				line-height: 42rpx;
				padding: 28rpx 0 46rpx;
			}
		}
	}
</style>