cbz/page_shop/pages/order/detail.vue

<template>
	<view class="content">
		<view class="box" v-if="pageData.tab == 1">
			<order-top :merchant="pageData.merchant" :name="pageData.real_name" :phone="pageData.mobile" :type="pageData.status" :amount="amount"></order-top>
		</view>
		<view class="box" v-if="pageData.tab != 1">
			<order-top :merchant="pageData.merchant" :name="pageData.real_name" :phone="pageData.mobile" :type="pageData.status" :amount="pageData.user_order.amount"></order-top>
		</view>
		<view class="box" style="margin-bottom: 186rpx;">
			<view class="box1">
				<view class="title">商品明细</view>
				<view class="list">
					<block v-for="(item,index) in pageData.items" :key="index">
						<view class="list_item">
							<view class="item_title">{{item.name}}</view>
							<view class="hflex acenter item_cell" v-if="pageData.tab!==4">
								<view class="item_text" v-if="item.spec">规格：{{item.spec}}</view>
								<view class="item_text" v-if="item.number">数量：{{item.number}}</view>
							</view>
							<view class="hflex acenter item_cell" v-if="pageData.tab==4">
								<view class="item_text" v-if="item.weight">数量/吨位：{{item.weight}}</view>
							</view>
							<view class="hflex acenter item_cell" v-if="item.price">
								<view class="item_text">原采购价：<span class="price">￥{{item.price}}</span></view>
							</view>
							<view class="hflex acenter item_cell" v-if="item.standard">
								<view class="item_text">质量标准：{{item.standard}}</view>
							</view>
							<view class="vflex" style="margin-top: 20rpx;" v-if="item.enclosure">
								<view v-for="(item2,index2) in item.enclosure" :key="index2" class="hflex acenter jbetween">
									<view class="hflex acenter">
										<image :src="item2.icon" class="item_img"></image>
										<view class="text_style1">{{item2.filename}}</view>
									</view>
									<view class="hflex acenter jcenter item_btn" @click="open(index,index2)">
										<u-icon name="download" color="#506DFF" size="10"></u-icon>
										<view>下载附件</view>
									</view>
								</view>
							</view>
						</view>
						<view class="hflex acenter jbetween offer" v-if="item.status == 1 && pageData.tab == 1">
							<view class="hflex acenter">
								<view class="offer_title">订单报价：</view>
								<view class="offer_text2">未接单</view>
							</view>
							<view class="offer_btn" v-if="!item.user_order && item.status == 1" @click="receiv(index)">立即接单</view>
						</view>
						<view class="hflex acenter jbetween offer" v-if="pageData.tab == 1 && item.status == 2">
							<view class="hflex acenter">
								<view class="offer_title">订单报价：</view>
								<view class="offer_text" v-if="item.user_order.amount">{{item.user_order.amount}}</view>
								<view class="offer_text2" v-else>暂未报价</view>
							</view>
							<view class="hflex acenter">
								<view class="offer_btn" v-if="item.user_order.amount" @click="toOffer(index)">查看详情</view>
								<view class="offer_btn" v-else-if="!item.user_order.amount" @click="toOffer(index)">立即报价</view>
							</view>
						</view>
						<view class="hflex acenter jbetween offer" v-if="item.status == 3 && pageData.tab == 1 && item.offer_id == item.user_order.id">
							<view class="hflex acenter">
								<view class="offer_title">订单报价：</view>
								<view class="offer_text2" style="color: #999999;" v-if="item.offer_id != item.user_order.id">不可报价</view>
								<view class="offer_text2" v-if="item.offer_id == item.user_order.id">{{item.user_order.amount}}</view>
							</view>
							<view class="hflex acenter">
								<view class="offer_btn" v-if="item.offer_id == item.user_order.id" @click="toOffer(index)">查看详情</view>
								<view class="offer_btn" v-if="item.offer_id == item.user_order.id" @click="open(index,-1)">下载订单</view>
							</view>
						</view>
						<view class="hflex acenter jbetween offer" v-if="item.offer_id != item.user_order.id && pageData.tab == 1 && item.user_order &&item.status == 3">
							<view class="hflex acenter">
								<view class="offer_title">订单报价：</view>
								<view class="offer_text" v-if="item.user_order.amount">{{item.user_order.amount}}</view>
								<view class="offer_text2" v-else>暂未报价</view>
							</view>
							<view class="hflex acenter">
								<view class="offer_btn" @click="toOffer(index)">查看详情</view>
								<view class="offer_btn offer_btn1" v-if="item.offer_id != item.user_order.id">已匹配</view>
							</view>
						</view>
						<view class="hflex acenter jbetween offer" v-if="item.status == 3 && pageData.tab == 1 && !item.user_order">
							<view class="hflex acenter">
								<view class="offer_title">订单报价：</view>
								<view class="offer_text" v-if="item.user_order">{{item.user_order.amount}}</view>
								<view class="offer_text2" v-else>暂未报价</view>
							</view>
							<view class="hflex acenter">
								<view class="offer_btn offer_btn1" v-if="item.offer_id != item.user_order.id">已匹配</view>
							</view>
								<!-- <view class="offer_btn offer_btn1" v-if="item.offer_id != item.user_order.id">已匹配</view>
								<view class="offer_btn" v-if="item.offer_id == item.user_order.id" @click="open(index,-1)">下载订单</view>
							</view>
						</view>
						<!-- <view class="hflex acenter jend offer" v-if="!item.user_order && item.status==3">
							<view class="offer_btn" v-if="item.status==3" @click="open(index,-1)">下载订单</view>
						</view> -->
						</view>
					</block>
				</view>
				<view class="text_style1 cell" v-if="pageData.standard_tech"><span class="label">生产技术标准：</span>{{pageData.standard_tech}}</view>
				<view class="text_style1 cell" v-if="pageData.standard_check"><span class="label">生产验收标准：</span>{{pageData.standard_check}}</view>
				<view class="hflex acenter jbetween offer" v-if="pageData.tab !== 1">
					<view class="hflex acenter">
						<view class="offer_title">订单报价：</view>
						<view class="offer_text" v-if="pageData.user_order.amount">{{pageData.user_order.amount}}</view>
						<view class="offer_text2" v-else>暂未报价</view>
					</view>
					<view class="offer_btn" v-if="pageData.user_order.amount || pageData.offer_id == pageData.user_order.id" @click="toOffer(-1)">查看详情</view>
					<view class="offer_btn offer_btn1" v-else-if="pageData.status == 3 && pageData.offer_id != pageData.user_order.id" @click="toOffer(-1)">查看详情</view>
					<view class="offer_btn offer_btn1" v-else-if="pageData.status == 3 && !pageData.user_order.amount">已匹配</view>
					<view class="offer_btn" v-else-if="!pageData.user_order.amount" @click="toOffer(-1)">立即报价</view>
				</view>
				<view class="text_style2" v-if="pageData.post_address">交货地址：{{pageData.post_address}}</view>
				<view class="text_style2" v-if="pageData.post_time">交货日期：{{pageData.post_time}}</view>
				<view class="text_style2" v-if="pageData.tab !== 4">发布日期：{{pageData.create_time}}</view>
				<view class="text_style2" v-if="pageData.form">包装形式：{{pageData.form}}</view>
				<view class="text_style2" v-if="pageData.wharf_to">装货码头：{{pageData.wharf_to}}</view>
				<view class="text_style2" v-if="pageData.wharf_for">到港码头：{{pageData.wharf_for}}</view>
			</view>
			<view class="box1">
				<view class="title">订单信息</view>
				<view class="text_style2">订单编号：{{pageData.order_no}} <span style="color: #506DFF" @click="copy(pageData.order_no)">| 复制</span></view>
				<view class="text_style2">下单时间：{{pageData.create_time}}</view>
			</view>
		</view>
		<view v-if="pageData.type == 2">
			<view class="bottom" v-if="pageData.status != 3||pageData.tab == 1">
				<view class="btn" @click="chat">查看回复</view>
			</view>
		</view>
		<view class="" v-if="pageData.type == 2">
			<view class="bottom hflex acenter jbetween" v-if="pageData.tab != 1 && pageData.status == 3">
				<view class="left_btn hflex acenter jcenter" @click="open(index1,-1)">
					<image src="https://ship.shipcc.cn/common/down-blue.png" style="width: 44rpx;height: 44rpx;margin-right: 8rpx;"></image>
					<view>下载订单</view>
				</view>
				<view class="right_btn hflex acenter jcenter" @click="chat">查看回复</view>
			</view>
		</view>
		<view v-else>
			<view class="bottom hflex acenter jbetween" v-if="pageData.tab != 1 && pageData.status == 3">
				<view class="left_btn hflex acenter jcenter" style="width: 100%;" @click="open(index1,-1)">
					<image src="https://ship.shipcc.cn/common/down-blue.png" style="width: 44rpx;height: 44rpx;margin-right: 8rpx;"></image>
					<view>下载订单</view>
				</view>
			</view>
		</view>
		<u-popup :show="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.shipcc.cn/common/close.png" style="width: 32rpx;height: 32rpx;" @click="close"></image>
				</view>
				<view class="file_bg hflex acenter" v-if="index2 != -1">
					<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="file_bg hflex acenter" v-else>
					<view class="file_name text_hide">{{pageData.down_word?pageData.down_word:pageData.items[index1].down_word}}</view>
				</view>
				<view class="btn_group hflex acenter jcenter" v-if="index2 != -1">
					<view class="left_btn hflex acenter jcenter" @click="copy(pageData.items[index1].enclosure[index2].fileurl)">复制链接</view>
					<!-- <view class="right_btn hflex acenter jcenter" @click="see(pageData.items[index1].enclosure[index2].fileurl)">预览文件</view> -->
				</view>
				<view class="btn_group hflex acenter jcenter" v-else>
					<view class="left_btn hflex acenter jcenter" @click="copy(pageData.down_word?pageData.down_word:pageData.items[index1].down_word)">复制链接</view>
					<!-- <view class="right_btn hflex acenter jcenter" @click="see(pageData.down_word?pageData.down_word:pageData.items[index1].down_word)">预览文件</view> -->
				</view>
				<!-- <view class="hflex acenter jcenter text_blue" @click="see(pageData.items[index1].enclosure[index2].fileurl)">预览文件></view> -->
			</view>
		</u-popup>
		<u-popup :show="receiv_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.shipcc.cn/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" inactiveColor="rgb(230, 230, 230)" @change="change"></u-switch>
				</view>
				<view class="hflex acenter" style="padding-bottom: 20rpx;">
					<view class="price">上传图片及资质证明图片</view>
					<image src="https://ship.shipcc.cn/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>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				id: '',
				id2: '',
				user_id: '',
				tab: '',
				pageData: {},
				index1: 0,
				index2: 0,
				show: false,
				amount: '',
				quotation_show: false,
				receiv_show: false,
				offer: '',
				lead_time: '',
				description: '',
				is_stock: false,
				fileList1: [],
			}
		},
		onLoad(options) {
			that = this
			that.user_id = uni.getStorageSync('id')
			that.id = options.id
			that.tab = options.tab
			that.getData()
		},
		methods: {
			getData() {
				var url = ""
				switch(that.tab) {
					case '1': 
						url = '/data/api.auth.Purchase/show';
						break;
					case '2':
						url = '/data/api.auth.Purchase/production_show';
						break;
					case '3':
						url = '/data/api.auth.Purchase/coor_show';
						break;
					case '4':
						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
						if(that.tab == '1') {
							for(var i=0;i<that.pageData.items.length;i++) {
								if(that.pageData.items[i].user_order) {
									if(that.pageData.items[i].user_order.amount) {
										that.amount = that.pageData.items[i].user_order.amount
									}
								}
								
							}
						}
					}
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function () {
						$api.info('复制成功')
					}
				});
			},
			toOffer(index) {
				$api.jump('/page_shop/pages/order/offer?id=' + that.id + '&tab=' + that.tab + '&index=' + index)
			},
			receiv(index) {
				that.id2 = that.pageData.items[index].id
				that.receiv_show = true
			},
			chat() {
				$api.jump('/page_shop/pages/order/chat3?id=' + that.id + '&tab=' + that.tab)
			},
			open(index1,index2) {
				that.index1 = index1
				that.index2 = index2
				that.show = true
			},
			close() {
				that.show = false
				that.receiv_show = false
			},
			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()
								that.see(res.savedFilePath)
							}
						})
				    }
				  }
				})
			},
			see(url) {
				uni.downloadFile({
				  // 示例 url，并非真实存在
				  url: url,
				  success: function (res) {
				    const filePath = res.tempFilePath
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功')
				      }
				    })
				  }
				})
			},
			// 是否现货
			change(e) {
				console.log(e);
				that.is_stock = e
			},
			// 删除图片
			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.pageData.tab) {
					case 1: 
						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 2:
						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 3:
						url = '/data/api.auth.Purchase/coor_create';
						data = {
							id: that.id2,
							amount: that.offer,
							desc: that.description,
							images: imgsList,
						};
						break;
					case 4:
						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()
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F4F4F4;
		// padding: 0 30rpx;
		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin: 20rpx 0 0;
			
			.box1 {
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx;
				box-sizing: border-box;
				padding: 24rpx 20rpx;
				margin-bottom: 20rpx;
				
				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
				}
				.list {
					
					.list_item {
						width: 100%;
						background: #F4F4F4;
						border-radius: 16rpx;
						box-sizing: border-box;
						padding: 20rpx;
						margin: 24rpx 0 20rpx;
						
						.item_title {
							font-size: 28rpx;
							font-weight: 400;
							color: #222222;
						}
						
						.item_cell {
							width: 100%;
							padding: 22rpx 0;
							border-bottom: 1rpx solid #ECECEC;
							
							.item_text {
								font-size: 24rpx;
								margin-right: 50rpx;
								font-weight: 400;
								color: #888888;
							}
							.price {
								font-size: 28rpx;
								font-weight: 400;
								color: #555555;
								line-height: 30rpx;
							}
						}
						.item_img {
							width: 36rpx;
							height: 44rpx;
							margin-right: 8rpx;
						}
						.text_style1 {
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
						}
						
						.item_btn {
							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;
						}
					}
				}
			
				.text_style1 {
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
				}
				.cell {
					padding: 0 0 24rpx;
				}
				.label {
					color: #444444;
				}
				.offer {
					width: 100%;
					height: 72rpx;
					background: #EAF4FF;
					border-radius: 16rpx;
					box-sizing: border-box;
					padding: 0 20rpx;
					.offer_title {
						font-size: 24rpx;
						font-weight: 400;
						color: #506DFF;
					}
					.offer_text {
						font-size: 32rpx;
						font-weight: 400;
						color: #222222;
					}
					.offer_text2 {
						font-size: 26rpx;
						font-weight: 400;
						color: #FF3434;
					}
					.offer_btn {
						width: 124rpx;
						height: 44rpx;
						background: #EAF4FF;
						border-radius: 22rpx;
						border: 1rpx solid #506DFF;
						font-size: 22rpx;
						font-weight: 400;
						color: #506DFF;
						text-align: center;
						line-height: 44rpx;
						margin-left: 10rpx;
					}
					.offer_btn1 {
						border: 1rpx solid #777777;
						color: #222222;
					}
				}
				.text_style2 {
					font-size: 26rpx;
					font-weight: 400;
					color: #444444;
					margin: 12rpx 0;
				}
			}
		}
		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 0 30rpx;
			.btn {
				margin: 10rpx auto;
				width: 690rpx;
				height: 88rpx;
				background: #506DFF;
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.left_btn {
				width: 350rpx;
				height: 88rpx;
				background: #ECEFFE;
				border-radius: 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #506DFF;
				line-height: 50rpx;
			}
			.right_btn {
				width: 370rpx;
				height: 88rpx;
				background: #506DFF;
				border-radius: 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
			}
		}
		.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;
			}
		}
		.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;
			}
		}
	}
</style>