<template>
	<view class="">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="titleStat"></z-nav-bar>
		<!-- <view class="deliverCntent" v-if="orderType == 2">
			<view v-if="deliverDetails">
				<view v-for="(item, index) in deliverDetails[0].Traces">
					<view class="flexbox" v-if="index == 0">
						<view class="img_icon "><img width="20px" src="../../static/icon/icon-truck.svg" alt=""></view>
						<view class="wuliu">
							<view class="content">{{item.AcceptStation}}</view>
							<view class="time">{{item.AcceptTime}}</view>
						</view>
					</view>
				</view>
			</view>			
		</view> -->
		<view class="adDefault" v-if="orderContet.products!=''">
			<view class="defalTop">
				<text class="userName">
					{{orderContet.shippingUser}}
				</text>
				<text class="userTel">
					{{orderContet.userPhone}}
				</text>
			</view>
			<view class="defalBottom">
				<text class="userAddress">
					{{orderContet.province}} {{orderContet.city}} {{orderContet.district}} {{orderContet.address}}
				</text>
			</view>
			<u-icon name="map" color="#aaa" size="25" class="defalLeft"></u-icon>
		</view>

		<view class="orderList">
			<view class="orderItem">
				<view class="orderContent" v-for="(item,index) in orderContet.products" :key="index"
					@click="goDetail(item.productId)" v-if="orderContet.products!=''">
					<image :src="item.image" mode=""></image>
					<view class="itemJian">
						<view class="orderTitle">
							<text>{{item.productName}}</text>
						</view>
						<view class="orderPrice">
							￥<text style="font-weight: bold;">{{item.productPrice}}</text><br>
							<text style="color: #bbbbbb;font-size: 20rpx;margin-right: 10rpx;">X</text>
							<text style="color: #bbbbbb;">{{item.quantity}}</text>
						</view>
						<br clear="both">
					</view>
					<!-- <view class="orderOper" v-if="orderContet.orderStatus=='3'"> -->
					<view class="orderOper" v-if="item.orderStatus == 3">
						<view  style="width: 100%; text-align: right;">						
							<view v-if="userRecordid == null" @click.stop="pingji(item.productId)" class="opCan" >评价</view>
							<view v-else  @click.stop="showZhuiping(item.productId)" class="opCan" >追评</view>
						</view>
					</view>
										
					<br clear="both">
				</view>
				<view class="orderContent" v-if="orderContet.products==''">
					<image src="../../static/icon/oder_chong.png" mode="" style="height: 150rpx;"></image>
					<view class="itemJian">
						<view class="orderTitle">
							<text>充值</text>
						</view>
						<view class="orderPrice">
							￥<text style="font-weight: bold;">{{orderContet.realMoney}}</text>
						</view>
						<br clear="both">
					</view>
					<br clear="both">
				</view>
				<view class="orderallpri">
					<span style="color: #666;margin-right: 10rpx;float: left;">商品总价 : </span>
					<span>￥</span>{{orderContet.orderMoney}}
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">运费 : </span>
					<span>￥</span>{{orderContet.shippingMoney}}
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">优惠券 : </span>
					<b style="color: #dd3c0c;"><span>-￥</span>{{orderContet.districtMoney}}</b>
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">实付款 : </span>
					<b style="color: #dd3c0c;"><span>￥</span>{{orderContet.realMoney}}</b>
				</view>
				<view class="orderYunf">
					<span style="color: #666;margin-right: 10rpx;float: left;">订单编号 : </span>
					<text style="font-size: 24rpx;color: #666;">{{orderContet.orderSn}}</text>
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">创建时间 : </span>
					<text style="font-size: 24rpx;color: #666;">{{orderContet.createTime}}</text>
				</view>
				<view class="orderOper">
					<view  style="width: 100%; text-align: right;">
						<!-- <u-button text="" type="success" plain ></u-button>
						<u-button text="" type="primary" plain  >							
						
						</u-button> -->
						<view v-if="orderContet.orderStatus==2"  class="opFix" @click="onPageJump(orderID)">查看物流</view>
						<view v-if="orderContet.orderStatus==2"  class="opCan" @click="OverOrder" >确认收货</view>
					
						<view v-if="orderContet.orderStatus==0" class="opFix" @click="canceOrder">取消订单</view>
						<view v-if="orderContet.orderStatus==0" class="opCan" @click="goPay">去支付</view>
					
						
						<view class="opCan" @click="kefu">联系客服</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 对话框 -->
		<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
			<view class="tanchu">
				<view class="dp_title" v-if="pjType != 'zhuiping'">添加评价</view>
				<view class="dp_title" v-else>添加追评</view>
				
				<view style="max-height: 1000rpx;overflow-y: scroll;">
					<uni-forms :modelValue="Pform">
						<!-- 评价图片 -->						
						<!-- end -->
								<!-- <uni-forms-item name="comment" label-width="0">
									<uni-easyinput type="textarea" v-model="Pform.comment" placeholder="请输入您的商品评价"  />
								</uni-forms-item>		 -->														
					</uni-forms>
					<!-- <u-button type="success" @click="submitPJ">提交评价</u-button> -->
					<!-- 提交 -->
					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">	
																
						<view class="mb30" v-if="pjType != 'zhuiping'">
							<span :class="['star',Pform.star>=1 ? 'starLight': 'starGray']" @click="getStar(1)"></span>
							<span :class="['star',Pform.star>=2 ? 'starLight': 'starGray']" @click="getStar(2)"></span>
							<span :class="['star',Pform.star>=3 ? 'starLight': 'starGray']" @click="getStar(3)"></span>
							<span :class="['star',Pform.star>=4 ? 'starLight': 'starGray']" @click="getStar(4)"></span>
							<span :class="['star',Pform.star>=5 ? 'starLight': 'starGray']" @click="getStar(5)"></span>
						</view>
						<view class="mb30" v-if="pjType != 'zhuiping'">
							<!-- <uni-file-picker :auto-upload="false" ref="files" @delete="deleteImg" limit="5" @success="upSuccess" @select="select" v-model="Pform.img" fileMediatype="image" :image-styles="imageStyles"/> -->
							<u-upload :fileList="Pform.img" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="4"
								width="80" height="80" :previewFullImage="true">
							</u-upload>
						</view>
						<view class="flex-sub flexbox">							
							<i @click="showEmj()" :class="emojiIcon" ></i>
							<!-- <input type="text" @focus="InputFocus" @blur="InputBlur" v-model="message"  @input="textareaBInput"  placeholder-style="font-size:24rpx;color:#aaaaaa;"  placeholder="请输入您要发送的内容"></input> -->
							<textarea class="textarea"  v-model="Pform.comment" @focus="InputFocus" @blur="InputBlur" @input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;"  placeholder="请输入您要发送的内容"></textarea>
						</view>
						<view class="">
						<!-- <button class="cu-btn bg-gradual-blue shadow-blur">发送</button> -->
						<u-button type="success" @click="submitPJ" v-if="pjType != 'zhuiping'">提交评价</u-button>
						<u-button type="success" @click="zhuiping" v-else>提交追评</u-button>
						</view>
					</view>
							
					<view style="position: relative;">
						<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth"></emotion>
					</view>
				</view>				
			</view>
		</u-popup>
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
	import $http from '@/config/requestConfig.js';
	import {
		setPay,
		setPayAssign
	} from '@/config/utils';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userRecordid:null,     // 用户的评价状态
			playData:{},
			title: 'Hello',
			isShowEmj: false,
			emojiIcon:'cuIcon-emoji',
			message: '',			
			
				windowWidth:0,
				windowHeight:500,
				Pform:{ // 评价表单
					star:0,
					comment:'',
					img:[],
					html:''
				},
				pingID:null,
				productID:null, // 订单商品id
				imageStyles:{
								width:64,
								height:64,
								border:{
									color:"#89aa7d",
									width:2,
									style:'dashed',
									radius:'2px'
								}
							},
				pingjiaShow:false,
				logisticsData: [], // 快递信息列表
				titleStat: '',
				orderID: 0,
				orderSn:null,
				orderType: '',
				orderContet: {},
				deliverDetails: [{
					Traces: []
				}], // 物流详情信息全部
				deliverDetailsLength: null,
				emoji:[],
				Files:[],
				pjType:'',
				
			}
		},
		onLoad(e) {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.orderID = e.orderId
			this.orderType = e.orderType
			this.orderSn = e.orderSn
			console.log(this.orderID,'this.orderID')
		},
		
		onShow() {
			this.getOrderList()
		},
		components:{
			emotion,
			musicPlay
		},
		computed: {
			...mapState(['userInfo']),
		},
		
		methods: {		
			// 获得输入的表情数组
			handleEmj(i) {
			 console.log(i,'i---------'); 
				this.inputValue = i
				// console.log(this.inputValue);
				if(i.emotioni == '[em_98]') {
					//匹配最后一个表情符号并删除11。
					this.Pform.comment = this.Pform.comment.replace(/(\[[^\]]+\]|[\s\S])$/, '');
					if(this.emoji.length > 0){
						this.emoji = this.emoji.slice(0,-1)
					}
				} else {
					this.emoji.push({'tag' : i.emotion, 'name':i.emotioni})	
					// console.log(this.emoji,'this.emoji')
					this.Pform.comment += i.emotioni;
					/// this.Pform.html += i.emotion
				}
			},
			showZhuiping(val){
				this.pjType = 'zhuiping'
				this.pingjiaShow = true
				this.productID = val
				this.pingID = pingid
			},
			// 追加评论
			zhuiping(){					
				let data = {
					'oid': this.userRecordid,
					'userId': this.userInfo.id,
					'bookid': this.productID,
					'conTent': this.Pform.comment
				}
				console.log(data,'data')
				$http.request({
					url: "user/followUp/userFollowUp",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {												
						if (res.code == 0) {
							uni.showToast({
								title:'追评成功！',
								icon:'success'
							})							
							this.pingjiaShow = false
							this.pjType = ''
							this.productID = null,
							this.userRecordid = null
							this.Pform.comment = ''
							this.Pform.html = ''
							this.emoji = []
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						}
					})
			},
			textareaBInput(e) {
				console.log(e,'e')
				this.Pform.comment = e.detail.value
				/// this.Pform.html = e.detail.value
			},
			showEmj() {
				let bool = !this.isShowEmj;
				if(bool) {
					this.emojiIcon = 'cuIcon-keyboard';
				} else {
					this.emojiIcon = 'cuIcon-emoji';
				}
				
				this.isShowEmj = bool;
				this.$emit('show')
			},			
			InputBlur(e){
				
			},
			InputFocus(e){
				this.isShowEmj = false;
				this.emojiIcon = 'cuIcon-emoji';
				this.$emit('foc')
			},
			
			// end
			deleteImg(e){					
				// var arr = this.Pform.img.slice(0,-1)
				this.Pform.img.pop()	
			  //  console.log('删除文件',arr)
				console.log(this.Pform)
			},
			getStar(i){
				this.Pform.star = i
			},
			select(e){
				 console.log('选择文件：',e)
				let arr =  e.tempFiles.map(item => {
					  return {'url':item.url,'name':item.name}
				  })
				 this.Pform.img = this.Pform.img.concat(...arr)
				//this.Pform.img = arr
				 console.log(this.Pform,'img')				
			},
			upSuccess(e){
				console.log(e)
			},
			// 获取html格式的评论1
			getHtmlComment(){				
				 // 格式化html
				 var ss = this.Pform.comment
				 if(this.emoji.length> 0){
				 	for (var i = 0; i<this.emoji.length; i++){ 
				 		if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){						
				 			//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式						
				 			//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。						
				 			// ss = ss.replace(re, ); //第一个参数是正则表达式。
				 			ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
				 			// console.log(ss)					
				 		}
				 	}
				 	this.Pform.html =  ss
				 }else{
				 	this.Pform.html =  this.Pform.comment
				 }
				//console.log(this.Pform.html,'this.Pform.html')
			},
			deletePic() {
				let that = this
				that.Pform.img.splice(0, 1)
				//console.log(that.Pform.img)
			},
			afterRead(e) {
				//console.log(e)
				let that = this
				for (var i=0; i< e.file.length; i++) {
					//console.log(i,e.file[i].url)
					uni.uploadFile({
						url: this.$baseUrl + 'oss/fileoss',
						filePath: e.file[i].url,
						//files:e.file,
						 name: 'file',
						formData: {},
						success: (res) => {
							that.Pform.img.push({
								url: JSON.parse(res.data).url
							})
						}
					});
				}
			},
			closePingjia(){
				this.pingjiaShow = false
				this.Pform.comment = ''
				this.Pform.html = ''
				this.emoji = []
			},
			// 提交评价
			submitPJ(){
				if(this.Pform.comment != ''){					
					
					let data={
						'userid':this.userInfo.id,
						'orderSn': this.orderSn,
						'bookid': this.productID,
						// 'content': this.Pform.html,	
						'content': this.Pform.comment,						
						'starLevel':this.Pform.star,
						'images':this.Pform.img,
						// 'emoji':this.emoji  // 表情数组
					}
					// console.log(data,'data')
					$http.request({
						url: "buy/record/UserRecordcomment",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					}).then(res => {												
							if (res.code == 0) {
								uni.showToast({
									title:'评价成功！',
									icon:'success'
								})
								
								this.pingjiaShow = false
								this.Pform.comment = ''
								this.Pform.html = ''
								this.emoji = []
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
				}else{
					uni.showToast({
						title:'请先输入您的评价内容 ！',
						icon:'none'
					})
				}
			},
			// 添加评价
			pingji(id){
				console.log(id)
				this.pjType = ''
				this.productID = id
				this.pingjiaShow = true
			},
			// 联系客服
			kefu(){
				uni.showModal({
					title: '提示',
						content: '拨打客服热线：022-24142321',
						success: function (res) {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '022-24142321' //仅为示例
								});
							} else if (res.cancel) {
								
							}
						}
				})
			},
			onPageJump(item) {
				uni.navigateTo({
					url: "./deliverDetail?objId=" + item
				})
			},
			OverOrder() { // 确认收货
				uni.showModal({
					title: '提示',
					content: '确认收货？',
					success: res => {
						let data = {
							orderId: this.orderID,
							orderStatus: '3'
						}
						if (res.confirm) {
							uni.showLoading()
							$http.request({
								url: "book/buyorder/update",
								method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
								data,
								header: { //默认 无 说明：请求头
									'Content-Type': 'application/json'
								},
							}).then(res => {
								if (res.code == 0) {
									uni.hideLoading()
									uni.showToast({
										title: '收货成功',
										icon: 'success',
										duration: 1000
									})
									this.getOrderList()
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 切换订单状态
			orderTabCLi(e) {
				this.orderListTab = e
			},
			// 获取订单列表
			getOrderList() {
				console.log('this.orderType',this.orderType)
				this.$http
					.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
					.then(res => {
						console.log('res+++',res)
						this.orderContet = res.buyOrder
						this.userRecordid = res.userRecordid
						this.productIDs = res.buyOrder.products.map(item => {
							return item.productId
						})
						// console.log(this.orderContet,'this.orderContet')
						if (this.orderContet.orderStatus == 0) {
							this.titleStat = '待支付'
						} else if (this.orderContet.orderStatus == 1) {
							this.titleStat = '待发货'
						} else if (this.orderContet.orderStatus == 2) {
							this.titleStat = '待收货'
						} else if (this.orderContet.orderStatus == 3) {
							this.titleStat = '已完成'
						}
						// if (this.orderType == 2) {
						// 	this.getdeliverDetails()
						// }
					})
			},
			// 获取物流
			getdeliverDetails() {
				this.$http
					.post(`/book/buyorder/queryFMS?orderId=${this.orderID}`)
					.then(res => {
						if (res && res.code === 0) {
							console.log(res, '物流信息')	
							// if(res.msg.indexOf('暂未查到物流信息') == -1){
							// 	this.
							// }
							res.rntStr.forEach(item => {
								item.Traces = item.Traces.reverse()
							})
							this.deliverDetails = res.rntStr
							this.deliverDetailsLength = this.deliverDetails[0].Traces.length
						} else {

						}
					})
			},
			// 取消订单
			canceOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					confirmText: "取消订单",
					cancelText: "考虑一下",
					confirmColor: '#c96713',
					cancelColor: '#555',
					success: res => {
						if (res.confirm) {
							this.$http
								.post('book/buyorder/appDelete?orderId=' + this.orderContet.orderId)
								.then(res => {
									uni.showToast({
										icon: 'none',
										title: '取消订单成功'
									})
									uni.switchTab({
										url: './orderList'
									});
								})
						}
					}
				});
			},


			// 支付
			goPay() {
				setPay({
					typePay: 'alipay',
					subject: 'order',
					totalAmount: this.orderContet.realMoney,
					type: 2,
					relevanceoid: this.orderContet.orderSn,
					customerId: this.userInfo.id,
				}, res => {
					if (res.success) {
						uni.showToast({
							title: "支付成功"
						});
					} else {
						uni.showToast({
							title: "支付失败",
							icon: "none",
							image: '../../static/icon/ic_close.png'
						});
					}
					this.getOrderList()
				})
			},

			// 商品内容跳转
			goDetail(id) {
				uni.navigateTo({
					url: './commodityDetail?id=' + id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.star{display: inline-block; width: 20px; height: 20px;  margin-right: 10rpx;}
	.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
	.starLight{ background : url(../../static/icon/star_light.png) no-repeat;  background-size: contain;}
	.cuIcon-emoji {
		background : url(../../static/biaoqing.png) no-repeat; background-size: contain;  display: block; margin-right: 20rpx;
 width: 30px; 	}
 .cuIcon-keyboard{background : url(../../static/biaoqing.png) no-repeat; background-size: contain;  display: block;
 width: 30px; }
	.mb30{margin-bottom: 30rpx; overflow: hidden;}
	.tanchu {
		padding: 40rpx 30rpx 40rpx 30rpx;
		position: relative;
	
	
		.dp_title {
			font-size: 32rpx;
			margin-bottom: 50rpx;
			color: #555;
			text-align: center;
			font-weight: bold;
		}
	
		.dp_add {
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			font-size: 22rpx;
			background-color: #fd6004;
			color: #fff;
			border-radius: 10rpx;
			padding: 5rpx 10rpx;
	
			.u-icon {
				display: inline-block;
				margin-right: 5rpx;
			}
		}
	
		.addressItem {
			border: 2px dashed #d9d9d9;
			border-radius: 10rpx;
			width: 100%;
			display: flex;
			padding: 20rpx 10rpx;
			margin: 25rpx 0 0 0;
			align-items: center;
			background-color: #fff;
	
			.addrContent {
				margin-left: 40rpx;
				flex: 1;
	
				.addrContentTop {
					display: flex;
					align-items: flex-end;
					margin: 0 0 15rpx 0;
					position: relative;
	
					.userName {
						font-size: 35rpx;
						font-weight: bold;
						margin-right: 30rpx;
					}
	
					.userTel {
						font-size: 25rpx;
						color: #888;
					}
	
					.userMoren {
						border: 1px solid #fd6004;
						color: #fd6004;
						padding: 3rpx 10rpx;
						font-size: 22rpx;
						border-radius: 10rpx;
						margin: 0 0 0 20rpx;
					}
	
	
					.chooseCheck {
						position: absolute;
						top: 3rpx;
						right: 6rpx;
					}
				}
	
				.addrContentBottom {
					font-size: 32rpx;
				}
			}
		}
	
	
		.addressItem.addItem_style {
			border-color: #fd6004;
		}
	
		.youhuiItem {
			border: 1px solid #d9d9d9;
			border-radius: 10rpx;
			width: 100%;
			display: flex;
			padding: 20rpx 10rpx;
			margin: 25rpx 0 0 0;
			align-items: center;
			background-color: #fff;
			font-size: 30rpx;
		}
	
		.youhuiItem>view {
			float: left;
		}
	
		.youhuiItem.youItem_style {
			border-color: #fd6004;
		}
	}
	.opShou {
		border-color: $uni-color-success !important;
	}

	.adDefault {
		padding: 30rpx 50rpx 30rpx 100rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		border-bottom: 2px dashed #b2e9d7;
		margin: 0 0 5rpx 0;
		position: relative;

		.defalTop {
			.userName {
				font-size: 35rpx;
				font-weight: bold;
				margin-right: 30rpx;
			}

			.userTel {
				font-size: 25rpx;
				color: #888;
			}


		}

		.defalBottom {
			.userAddress {
				font-size: 32rpx;
				line-height: 40rpx;
			}
		}

		.defalLeft {
			position: absolute;
			left: 30rpx;
			top: 55rpx;
		}


	}

	.orderList {
		padding: 20rpx;

		.orderItem {
			padding: 30rpx 10rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 30rpx;

			.orderContent {
				margin-bottom: 20rpx;

				image {
					width: 150rpx;
					height: 180rpx;
					margin-right: 20rpx;
					float: left;
				}

				.itemJian {
					float: left;
					width: 470rpx;

					.orderTitle {
						font-weight: bold;
						font-size: 30rpx;
						margin: 0 0 20rpx 0;
						float: left;
						width: 410rpx;
					}

					.orderPrice {
						font-size: 28rpx;
						float: right;
						width: 60rpx;
						text-align: right;
						line-height: 40rpx;
					}
				}


			}

			.orderallpri {
				text-align: right;
				border-top: 1px solid #eee;
				margin: 40rpx 20rpx 0 0;
				padding: 30rpx 0 0 0;
				font-size: 28rpx;
			}

			.orderReal {
				text-align: right;
				font-size: 28rpx;
				margin: 5rpx 20rpx 0 0;
				padding: 28rpx 0 0 0;
			}

			.orderYunf {
				text-align: right;
				border-top: 1px solid #eee;
				margin: 35rpx 20rpx 0 0;
				padding: 30rpx 0 0 0;
				font-size: 28rpx;
			}

			.orderOper {
				text-align: right;
				margin: 40rpx 20rpx 0 0;

				view {
					margin-left: 20rpx;
					padding: 10rpx 0;
					display: inline-block;
					width: 160rpx;
					font-size: 25rpx;
					text-align: center;
				}

				.opFix {
					color: #555;
					border: 1px solid #ddd;
					border-radius: 30rpx;
				}

				.opCan {
					color: #c96713;
					border: 1px solid #eba00b;
					border-radius: 30rpx;
				}
			}
		}
	}

	.deliverCntent {
		padding: 32rpx;
		position: relative;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-top: 1px solid #eee;
		font-size: 28rpx;
	}

	.flexbox {
		display: flex;
	}

	.img_icon {
		padding-right: 5px;
	}

	.moreBtnF {
		align-items: center;
		padding: 30rpx;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		background-color: rgba(255, 255, 255, .9);
		// background: -webkit-linear-gradient(left, rgba(255,255,255,1)0%,rgba(255,255,255,0.5)66%, rgba(255,255,255,255)99%);/* Safari、Chrome */

		// background:linear-gradient(rgba(255,255,255,255),rgba(255,255,255,1));/* 默认渐变位置从上往下 */	
	}

	.wuliu {
		.time {
			color: #888;
		}

		.moreBtn {
			display: inline-block;
			width: 50px;
		}
	}
</style>
