sx/pages/index/zngs.vue

<template>
	<view class="content">
		<view class="jg"></view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="" style="position: absolute;backgroun: black;"
			:style="{'height':info.height+ 'px','top':info.top+ 'px'}">
			<view class="tit" :style="{'height': info.height + 'px'}">
				<view class="black" @click="goBlack">
					<image src="../../static/icon/fanhui.png" mode=""></image>
				</view>
				<view class="title">
					智能估算
				</view>
				<view class="black"></view>

			</view>
		</view>

		<view class="gs-top">
			<view class="bw" :style="{'height': (info.height + info.top) + 'px'}"></view>
			<view class="flex info">
				<view class="">
					基本信息
				</view>
				<view class="">
					零件厚度
				</view>
				<view class="">
					价格预估
				</view>
			</view>
			<image :src="`../../static/img/js0${tabcurrent}.png`" mode=""></image>
		</view>
		<!-- #endif -->
		<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrap">
			<template v-if="tabcurrent == 0">

				<view class="list-item flex">
					<view class="item-name">
						长(米)
					</view>
					<input type="digit" placeholder="请填写长度(米)" class="item-val" v-model="chang">
				</view>
				<view class="list-item flex">
					<view class="item-name">
						宽(米)
					</view>
					<input type="digit" placeholder="请填写宽度(米)" class="item-val" v-model="kuan">
				</view>
				<view class="list-item flex">
					<view class="item-name">
						高(米)
					</view>
					<picker @change="bindGaodu" :range="gaoduList">
						<input type="text" placeholder="请选择" class="item-val" v-model="gao" disabled>
					</picker>
				</view>
				<view class="list-item flex">
					<view class="item-name">
						是否保温
					</view>
					<picker @change="bindBaowen" :range="son">
						<input type="text" placeholder="请选择" class="item-val" v-model="isBaowen" disabled>
					</picker>
				</view>
				<view class="list-item flex" v-if="isBaowen == '是'">
					<view class="item-name">
						保温材料
					</view>
					<picker @change="bindBaowenCl" :range="warmList" range-key="name">
						<input type="text" placeholder="请选择" class="item-val" v-model="baowenCl" disabled>
					</picker>
				</view>
				<view class="list-item flex">
					<view class="item-name">
						是否需要钢槽
					</view>
					<picker @change="bindGangc" :range="son">
						<input type="text" placeholder="请选择" class="item-val" v-model="isGangC" disabled>
					</picker>
				</view>
				<view class="list-item flex" v-if="isGangC == '是'">
					<view class="item-name">
						钢槽材料
					</view>
					<picker @change="bindGangcCl" :range="channelList" range-key="name">
						<input type="text" placeholder="请选择" class="item-val" v-model="gangcCl" disabled>
					</picker>
				</view>
				<view class="list-item flex">
					<view class="item-name">
						是否需要人梯
					</view>
					<picker @change="bindRent" :range="son">
						<input type="text" placeholder="请选择" class="item-val" v-model="isRent" disabled>
					</picker>
				</view>
				<!-- <view class="list-item flex">
						<view class="item-name">
							是否需要隔板
						</view>
						<picker @change="bindValue" :range="geban" range-key="name" ref="geban">
							<input type="text" placeholder="请选择" class="item-val" v-model="gebanname" disabled>
						</picker>
					</view> -->
				<view class="xyb" @click="tot">
					下一步
				</view>
				<view class="wxtip">
					价格仅供参考 不作投资依据
				</view>
			</template>
			<template v-if="tabcurrent == 1">
				<view class="list-item flex">
					<view class="item-name">
						顶板厚度
					</view>
					<picker @change="bindFoof" :range="roofList" range-key="name">
						<input type="text" placeholder="请选择" class="item-val" v-model="roof" disabled>
					</picker>
				</view>
				<view class="list-item flex">
					<view class="item-name">
						底板厚度
					</view>
					<picker @change="bindFloor" :range="floorList" range-key="name">
						<input type="text" placeholder="请选择" class="item-val" v-model="floor" disabled>
					</picker>
				</view>
				<view class="list-item flex" v-for="(item,index) in (Math.ceil(gao))" :key="'sideplate'+index">
					<view class="item-name">
						侧板厚度{{index + 1}}
					</view>
					<picker @change="bindValue" :range="sideplateList" range-key="name" :id="`sideplate${index}`">
						<view class="item-val" :class="{'noact': showValue(index,'sideplate') == '请选择'}">
							{{showValue(index,'sideplate')}}
						</view>
					</picker>
				</view>
				<view class="list-item flex">
					<view class="item-name">
						立柱厚度
					</view>
					<picker @change="bindColumn" :range="columnList" range-key="name">
						<input type="text" placeholder="请选择" class="item-val" v-model="column" disabled>
					</picker>
				</view>
				<view class="list-item flex" v-for="(item,index) in (Math.ceil(gao)-1)" :key="'lacing' + index">
					<view class="item-name">
						主拉厚度{{index + 1}}
					</view>
					<picker @change="bindValue" :range="lacingList" range-key="name" :id="`lacing${index}`">
						<view class="item-val" :class="{'noact': showValue(index,'lacing') == '请选择'}">
							{{showValue(index,'lacing')}}
						</view>
					</picker>
				</view>
				<view class="list-item flex" v-for="(item,index) in (Math.ceil(gao)-1)" :key="'fula' + index">
					<view class="item-name">
						辅拉厚度{{index + 1}}
					</view>
					<picker @change="bindValue" :range="fulaList" range-key="name" :id="`fula${index}`">
						<view class="item-val" :class="{'noact': showValue(index,'fula') == '请选择'}">
							{{showValue(index,'fula')}}
						</view>
					</picker>
				</view>
				<view class="btn-wrap flex">
					<view class="xyb syb" @click="too">
						上一步
					</view>
					<view class="xyb ksjs" @click="toth">
						开始计算
					</view>
				</view>
				<view class="wxtip" style="padding: 0 20rpx 20rpx 0;">
					价格仅供参考 不作投资依据
				</view>
			</template>
			<template v-if="tabcurrent == 2">
				<view class="flex jg-jz">
					<view class="">
						规格
					</view>
					<view class="zj">
						{{chang}}m*{{kuan}}m*{{gao}}m={{chang*kuan*gao}}吨{{isBaowen == '是'?'保温水箱': '冷水箱'}},
						{{2*(chang*kuan + chang*gao + kuan*gao)}}平方
					</view>
				</view>
				<view class="new-bg">
					<view class="bg-line flex">
						<view class="title">
							名称
						</view>
						<view class="name">
							材质/厚度
						</view>
						<view class="specifications">
							规格
						</view>
						<view class="number">
							数量
						</view>
						<view class="unit_price">
							单价
						</view>
						<view class="ot-price">
							总价格
						</view>
					</view>
					<view class="bg-line flex" v-for="item in jsjg.table">
						<view class="title clamp2">
							{{item.title}}
						</view>
						<view class="name">
							{{item.name}}
						</view>
						<view class="specifications">
							{{item.specifications}}
						</view>
						<view class="number">
							{{item.number}}
						</view>
						<view class="unit_price">
							{{item.unit_price*1}}
						</view>
						<view class="ot-price">
							{{item.ot_price*1}}
						</view>
					</view>
				</view>
				<view class="flex jg-jz">
					<view class="">
						总重量：{{(jsjg.zzl*1).toFixed(2)}}kg
					</view>
					<view class="zj">
						含税总价：{{jsjg.zj*1}}元
					</view>
				</view>
				<!-- <view class="jg-wrap">
					<view class="jsjg-wrap flex" v-for="jitem in jsjg.table">
						<view class="jg-left">
							<view class="left-top">
								<text
									class="item-tit">{{jitem.title}}</text><text>单价:{{jitem.unit_price}}数量:{{jitem.number}}</text>
							</view>
							<view class="left-btm">
								规格：{{jitem.specifications}} {{jitem.name}}
							</view>
						</view>
						<view class="jg-right">
							￥{{jitem.ot_price}}元
						</view>
					</view>
					<view class="flex jg-zj">
						<view class="">
							总计(元):
						</view>
						<view class="price">
							{{jsjg.zj}}
						</view>
					</view>
					<view class="jg-tip">
						*此结果为预估价格 详细请联系我们
					</view>
				</view> -->

				<view class="btn-wrap flex">
					<view class="xyb syb" @click="endjs">
						结束计算
					</view>
					<button open-type="contact" plain="true" class="xyb ksjs" style="color: #fff;border: none;">
						联系我们
					</button>
					<!-- <view class="xyb ksjs" @click="openKf">
						
					</view> -->
				</view>
			</template>
		</scroll-view>

		<!-- 客服 start -->
		<uni-popup ref="popupkf" type="center">
			<view class="popup-box">
				<view class="img">
					<image src="../../static/img/img009.png" mode=""></image>
				</view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image src="../../static/img/img010.png" mode=""></image>
					</view>
					<view class="nocancel">客服VX:{{ text }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="comfirm(text)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 客服 end -->
	</view>
</template>

<script>
	let info = ''
	import {
		getZyList,
		calculation,
		getDefault
	} from '@/api/index.js'
	// #ifdef MP-WEIXIN
	info = wx.getMenuButtonBoundingClientRect()
	// #endif

	export default {
		data() {
			return {
				gaoduList: [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5],
				son: ['是', '否'],
				isBaowen: '否', //是否保温
				warmList: [], //保温材料
				baowenCl: '', //选择的保温材料
				baowenClId: '', //保温材料id
				isGangC: '否', //是否钢槽
				channelList: [], //钢槽材料
				gangcCl: '', //选择的钢槽材料
				gangcClId: '', //钢槽材料id
				isRent: '否', //是否人梯
				roofList: [], //顶板厚度
				roof: '', ///选择的顶板厚度
				roofId: '', //顶板厚度idfloor
				floorList: [], //底板厚度
				floor: '', ///选择的底板厚度
				floorId: '', //底板厚度id
				sideplateList: [], //侧板厚度
				sideplate: [], //选择的侧板
				columnList: [], //立柱厚度
				column: '', //选择的立柱厚度
				columnId: '', //立柱厚度id
				lacingList: [], //主拉厚度
				lacing: [], //选择的主拉
				fulaList: [], //辅拉厚度
				fula: [], //选择的辅拉厚度
				tabcurrent: 0,
				height: '',
				info: info,
				chang: '',
				kuan: '',
				gao: '',
				loading: false,
				type: 0,
				jsjg: {},
				text: ''
			}
		},
		onLoad(opt) {
			if (opt.type) {
				this.type = opt.type
			}
		},
		onShow() {
			console.log(this.info)
			this.getZyList()
		},
		onReachBottom() {

		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrap').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			// 获取默认方案
			getMr() {

			},
			// 选择高度
			bindGaodu(e) {
				console.log(e.detail.value)
				this.gao = this.gaoduList[e.detail.value]
			},
			// 选择是否保温
			bindBaowen(e) {
				this.isBaowen = this.son[e.detail.value]
			},
			//选择保温材料
			bindBaowenCl(e) {
				// this.isBaowen = this.son[e.detail.value]
				this.baowenCl = this.warmList[e.detail.value].name
				this.baowenClId = this.warmList[e.detail.value].id
			},
			//选择是否钢槽
			bindGangc(e) {
				this.isGangC = this.son[e.detail.value]
			},
			//选择钢槽材料
			bindGangcCl(e) {
				this.gangcCl = this.channelList[e.detail.value].name
				this.gangcClId = this.channelList[e.detail.value].id
			},
			//是否人梯
			bindRent(e) {
				this.isRent = this.son[e.detail.value]
			},
			//选择顶板厚度
			bindFoof(e) {
				this.roof = this.roofList[e.detail.value].name
				this.roofId = this.roofList[e.detail.value].id
			},
			//选择底板厚度
			bindFloor(e) {
				this.floor = this.floorList[e.detail.value].name
				this.floorId = this.floorList[e.detail.value].id
			},
			// 显示侧板、主拉、辅拉
			showValue(index, tip) {
				if (this[tip][index * 1]) {
					return this[tip][index * 1].name
				} else {
					return '请选择'
				}
			},
			//选择立柱厚度
			bindColumn(e) {
				this.column = this.columnList[e.detail.value].name
				this.columnId = this.columnList[e.detail.value].id
			},
			//选择侧板、主拉、辅拉
			bindValue(e) {
				let obj = this
				console.log(e)
				let name = e.currentTarget.id
				let index = name.replace(/[^\d]/g, '')
				let path = name.replace(/[0-9]/g, '')
				console.log(index, 'index')

				obj.$set(obj[path], index * 1, {})
				obj.$set(obj[path][index * 1], 'name', obj[path + 'List'][e.detail.value].name)
				obj.$set(obj[path][index * 1], 'id', obj[path + 'List'][e.detail.value].id)
				// obj.$set(obj[path],name,{'name': '','id': ''})
				// obj.$set(obj[path][name],'name',obj[path+'List'][e.detail.value].name)
				// obj.$set(obj[path][name],'id',obj[path+'List'][e.detail.value].id)
				console.log(obj[path], path)
			},
			goBlack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// bindValue(e) {
			// 	let obj = this
			// 	console.log(e,arguments)
			// 	// let name = e.currentTarget.dataset.ref
			// 	// obj[name + 'name'] = obj[name][e.detail.value].name
			// 	// obj[name + 'id'] = obj[name][e.detail.value].id
			// },
			tot() {
				let obj = this
				if (obj.chang == '') {
					return obj.$api.msg('请输入长度')
				}
				if (obj.kuan == '') {
					return obj.$api.msg('请输入宽度')
				}
				if (obj.gao == '') {
					return obj.$api.msg('请选择高度')
				}
				if (obj.isBaowen == '') {
					return obj.$api.msg('请选择是否保温')
				}
				if (obj.isBaowen == '是') {
					if (obj.baowenCl == '') {
						return obj.$api.msg('请选择保温材料')
					}
				}
				if (obj.isGangC == '') {
					return obj.$api.msg('请选择是否需要钢槽')
				}
				if (obj.isGangC == '是') {
					if (obj.gangcCl == '') {
						return obj.$api.msg('请选择钢槽材料')
					}
				}
				if (obj.isRent == '') {
					return obj.$api.msg('请选择是否需要人梯')
				}

				if (obj.gebanname == '') {
					return obj.$api.msg('请选择是否需要隔板')
				}
				getDefault({
					high: obj.gao,
					is_gc: obj.type
				}).then(res => {
					console.log(res, '999999', res.data)
					// 处理默认值
					if (res.data.roof) {
						console.log('处理默认值')
						console.log(res.data.roof)
						obj.roof = res.data.roof.name
						obj.roofId = res.data.roof.id
					} else {
						console.log('清除默认')
						obj.roof = ''
						obj.roofId = ''
					}
					if (res.data.floor) {
						obj.floor = res.data.floor.name
						obj.floorId = res.data.floor.id
					} else {
						obj.floor = ''
						obj.floorId = ''
					}
					if (res.data.side_plate) {
						obj.sideplate = res.data.side_plate
					} else {
						obj.sideplate = []
					}
					if (res.data.column) {
						obj.column = res.data.column.name
						obj.columnId = res.data.column.id
					} else {
						obj.column = ''
						obj.columnId = ''
					}
					if (res.data.lacing) {
						obj.lacing = res.data.lacing
					} else {
						obj.lacing = []
					}
					if (res.data.fula) {
						obj.fula = res.data.fula
					} else {
						obj.fula = []
					}
					obj.tabcurrent = 1
				})
			},
			too() {
				let obj = this
				obj.tabcurrent = 0
			},
			toth() {
				let obj = this
				if (obj.loading) {
					return
				}
				let lacing = obj.lacing.map(item => {
					return item.id
				})
				let fula = obj.fula.map(item => {
					return item.id
				})
				let side_plate = obj.sideplate.map(item => {
					return item.id
				})
				if (obj.roof == '') {
					return obj.$api.msg('请选择顶板厚度')
				}
				if (obj.floor == '') {
					return obj.$api.msg('请选择底板厚度')
				}
				// 判断侧板是否完整
				let cblen = Math.ceil(obj.gao)
				if (side_plate.length < cblen) {
					return obj.$api.msg('请选择侧板厚度')
				}
				if (obj.column == '') {
					return obj.$api.msg('请选择立柱厚度')
				}
				//判断辅拉，主拉是否完整
				let lalen = Math.ceil(obj.gao) - 1
				console.log(lalen, 'lalen')
				if (lacing.length < lalen) {
					return obj.$api.msg('请选择主拉厚度')
				}
				if (fula.length < lalen) {
					return obj.$api.msg('请选择辅拉厚度')
				}
				console.log(lacing, 'lacing++++')
				obj.loading = true
				uni.showLoading({
					title: '计算中...'
				})
				calculation({

					long: obj.chang, //长
					wide: obj.kuan,
					high: obj.gao,
					is_warm: obj.isBaowen == '是' ? 1 : 0,
					warm: obj.baowenClId,
					is_channel: obj.isGangC == '是' ? 1 : 0,
					channel: obj.gangcClId,
					is_human_ladder: obj.isRent == '是' ? 1 : 0,
					is_gc: obj.type,
					floor: obj.floorId,
					roof: obj.roofId,
					column: obj.columnId,
					lacing: lacing,
					fula: fula,
					side_plate: side_plate,
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					
					obj.jsjg = res.data
					if(res.data.remind) {
						uni.showModal({
							title: '温馨提醒',
							content:res.data.remind,
							showCancel: false,
							complete() {
								obj.tabcurrent = 2
							}
						})
					}else {
						obj.tabcurrent = 2
					}
					
				}).catch(err => {
					uni.hideLoading()
					obj.loading = false
				})


			},
			endjs() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			openKf() {

			},
			getZyList() {
				let obj = this
				getZyList({
					is_gc: obj.type
				}).then(res => {
					console.log(res)
					obj.warmList = res.data.warm //保温材料
					obj.channelList = res.data.channel //钢槽材料
					obj.roofList = res.data.roof //顶板厚度
					obj.floorList = res.data.floor //底板厚度
					obj.sideplateList = res.data.side_plate //侧板厚度
					obj.columnList = res.data.column //立柱厚度
					obj.lacingList = res.data.lacing //主拉厚度
					obj.fulaList = res.data.fula
				})
			},
			// 打开客服
			openKf() {
				this.$refs.popupkf.open();
			},
			// 关闭客服
			cancel() {
				this.$refs.popupkf.close();
			},
			// 复制客服微信
			comfirm(text) {
				console.log(text);
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
				this.$refs.popupkf.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
						return true;
					}
				});
				//#endif

				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement('textarea');
				textarea.value = content;
				textarea.readOnly = 'readOnly';
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand('copy'); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.jg {
		height: var(--status-bar-height);
		width: 100%;
		background: linear-gradient(-43deg, #3455e3, #0328c7);
	}

	.gs-top {
		width: 750rpx;
		// height: 240rpx;
		padding-bottom: 40rpx;
		background: linear-gradient(-43deg, #4464ED, #0328C7);

		// position: relative;
		image {
			width: 560rpx;
			height: 37rpx;
			margin: auto;
			display: block;
		}

		.info {
			padding-top: 20rpx;
			padding-bottom: 15rpx;

			view {
				width: 33%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #cad0f4;
			}

		}

	}

	.tit {
		display: flex;
		width: 750rpx;
		// height: 44px;
		align-items: center;

		.black {
			width: 80rpx;
			padding-left: 30rpx;

			image {
				width: 19rpx;
				height: 33rpx;
			}
		}

		.title {
			flex-grow: 1;
			text-align: center;
			font-size: 35rpx;
			font-weight: 500;
			color: #fff;
		}
	}

	.list-item {
		height: 105rpx;
		border-bottom: 1px solid #ECECEC;
		width: 700rpx;
		margin: auto;
		align-items: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;

		.item-name {
			width: 250rpx;

		}

		.item-val {
			// width: 400rpx;
			min-width: 400rpx;
			// background-color:red;
			flex-grow: 1;
			text-align: right;
		}

		.noact {
			color: #999;
		}
	}

	.xyb {
		width: 520rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(270deg, #4464ED, #0328C7);
		border-radius: 44rpx;
		margin: 60rpx auto 0;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}


	.syb {
		width: 318rpx;
		height: 88rpx;
		background: #ECEFFC;
		border: 1px solid #4261E3;
		border-radius: 44px;
		color: #4261E3;
	}

	.ksjs {
		width: 318rpx;
		height: 88rpx;
		background: linear-gradient(270deg, #4464ED, #0328C7);
		border-radius: 44rpx;
	}

	.btn-wrap {
		padding-bottom: 74rpx;
	}

	.jg-wrap {
		width: 710rpx;
		margin: auto;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 18rpx 0px rgba(114, 136, 231, 0.27);
		border-radius: 0px 0px 14rpx 14rpx;
	}

	.jsjg-wrap {
		height: 110rpx;
		border-top: 1px solid #EDEDED;
		border-bottom: 1px solid #EDEDED;
		width: 646rpx;
		margin: auto;
		font-size: 22rpx;
		padding: 0 15rpx;

		.jg-left {
			.left-top {

				.item-tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #0C0C0C;
					padding-right: 10rpx;
				}
			}
		}

		.jg-right {
			flex-shrink: 0;
			font-size: 32rpx;
			font-weight: 500;
			color: #282828;
		}
	}

	.jg-zj {
		padding: 35rpx 43rpx 20rpx 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #444444;

		.price {
			font-size: 60rpx;
			font-weight: bold;
			color: #444444;

			&::before {
				content: '￥';
				font-size: 32rpx;
				padding-right: 10rpx;
			}
		}
	}

	.jg-tip {
		font-size: 25rpx;
		font-weight: 500;
		color: #A0A0A0;
		text-align: right;
		padding-right: 44rpx;
		padding-bottom: 50rpx;
	}

	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: relative;

		.img {
			position: relative;
			top: -56rpx;
			left: 0;
			width: 522rpx;
			height: 132rpx;
			display: flex;
			justify-content: center;

			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 450rpx;
				height: 132rpx;
			}
		}

		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}

			.nocancel {
				font-size: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}

			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;

				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;

					font-size: 32rpx;
					color: #605128;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}

	.new-bg {
		width: 750rpx;
		background-color: #fff;
		padding: 0 10rpx;

		.bg-line {
			height: 100rpx;
			font-size: 26rpx;
			justify-content: flex-start;
			border-bottom: 1px solid #eeeeee;

			&:nth-child(odd) {
				background-color: #f6f7fb;
			}

			view {
				text-align: center;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1px solid #eee;
				border-top: 1px solid #eee;
			}

			.title {
				width: 128rpx;

				text-align: left;

			}

			.name {

				width: 160rpx;
			}

			.specifications {
				width: 150rpx;
			}

			.number {
				width: 85rpx;
			}

			.unit_price {
				width: 120rpx;
			}

			.ot-price {
				width: 110rpx;

				border-right: none;
			}
		}
	}

	.jg-jz {
		padding: 0 20rpx;
		font-size: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.wxtip {
		font-style:italic;
		font-size: 28rpx;
		text-align: right;
		padding: 40rpx 20rpx 0 0;
	}
</style>