<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="header">
			<!-- 顶部导航栏 -->
			<z-nav-bar backState="2000" title="我的订单"></z-nav-bar>
            <view class="ordersTabs">
			    <view v-for="(item,index) in ordersTabs" @click="ordersTabCLi(item.value)" :key="index"
				:class="ordersListTab==item.value?'ordersdefine ordStyle':'ordersdefine'">
					{{item.name}}
					<view class="ordersnum" v-if="item.value == 0 && map[item.value] > 0">{{map[item.value]}}</view>
					<view class="ordersnum" v-if="item.value == 1 && map[item.value] > 0">{{map[item.value]}}</view>
					<view class="ordersnum" v-if="item.value == 2 && map[item.value] > 0">{{map[item.value]}}</view>
				</view>
		    </view>
		</view>
        <!-- 站位 -->
        <view class="ordersTabs" style="z-index:0;position:unset;">
            <view class="ordersdefine">1</view>
        </view>
        <!-- <view v-if="ordersListTab == 1"> -->
		<view>
            <view v-if="newList.length > 0">
                <view class="orderInfo" v-for="(item,index) in newList" :key="index">
                    <view class="mainContent">
                        <view class="item" @click.stop="toDetail(item)">
                            <view class="orderstatus" v-show="item.orderStatus == 0">未付款</view>
                            <view class="orderstatus" v-show="item.orderStatus == 1">待发货</view>
                            <view class="orderstatus" v-show="item.orderStatus == 2">已发货</view>
                            <view class="orderstatus" v-show="item.orderStatus == 3">交易成功</view>
                            <view class="orderstatus" v-show="item.orderStatus == 4">交易失败</view>
                            <view class="orderstatus" v-show="item.orderStatus == 5">过期</view>
							<template v-if="item.orderType == 'order'">
							<view v-for="(item1,index1) in item.productList" :key="index1" class="bookinfolist">
								<image class="feng" v-if="item1.product.productImages" :src="item1.product.productImages" mode="aspectFill"></image>
								<!-- <view class="description" v-html="item.content">
								</view> -->
								<view class="btns flexbox">
									<span class="booknameleft">{{item1.product.productName}}</span>
									<span class="right flexbox opbtns">
										¥{{item1.product.price}}
									</span>
								</view>
								<view class="btns flexbox" style="margin-top:10rpx;padding-bottom: 72rpx;">
									<view class="left" style="color: #C0C4CC;">										
										<view class="orderstatusbtn addcomment" v-if="item.orderStatus == 3 && item1.recordId == 0 && 
										item.come == 0" @click.stop="pingji(item1.productId,item)">评价</view>
									</view>
									<span class="right flexbox opbtns" style="color: #C0C4CC;">
										×{{item1.quantity}}
									</span>
								</view>
                            </view>
							</template>
							<template v-if="item.orderType == 'point'">
								<view class="flexbox" style="align-items: center;">								
								
								<view class="" style="height: 150rpx;">
									<image src="../../static/icon/oder_chong.png"  style="height: 150rpx; width: 150rpx;"></image>
								</view>
								<view class="">
									<text style="font-size: 28rpx;">充值订单</text>
								</view>
								</view>
							</template>
							<template v-if="item.orderType == 'vip'">
								<view class="flexbox" style="align-items: center;">	
								<view class="" style="height: 150rpx;">
									<image :src="'../../static/icon/oder_vip.png'"  style="height: 150rpx; width: 150rpx;"></image>
								</view>
								<view class="">
									<text style="font-size: 28rpx;">VIP开通</text>
								</view>
								</view>
							</template>
							<view class="btns flexbox" style="margin-top:10rpx;">
                                <span class="left" style="color: #C0C4CC;"></span>
                                <span class="right flexbox opbtns">
                                    <view style="color: #000;font-size:30rpx;font-weight:700;">实付款</view>
                                    <view style="color: #000;font-size:30rpx;font-weight:700;">{{'　¥' + item.realMoney}}</view>
                                </span>
                            </view>
							<view class="btns flexbox" style="margin-top:10rpx;">
                                <span class="left" style="color: #C0C4CC;" @click.stop="toDetail(item)">订单详情</span>
                                <span class="right flexbox opbtns">
                                    <view class="orderstatusbtn" v-if="item.orderStatus == 0" @click.stop="canceOrder(item)">取消订单</view>
                                    <view class="orderstatusbtn" v-if="item.orderStatus == 0" @click.stop="goPay(item)">付款</view>
                                    <!-- <view class="orderstatusbtn alertDeliver" v-if="item.orderStatus == 1">催发货</view> -->
                                    <view class="orderstatusbtn" v-if="item.orderStatus == 2" @click.stop="seeExpressDetail(item)">查看物流</view>
                                    <view class="orderstatusbtn" v-if="item.orderStatus == 2" @click.stop="OverOrder(item)">确认收货</view>
                                    <!-- <view class="orderstatusbtn" v-if="item.orderStatus == 3">申请售后</view> -->
									<!--  -->
                                    <!-- <view class="orderstatusbtn" v-if=" userRecordid == null && item.come == 0" @click.stop="pingji(item.id)">评价</view> -->
                                    <!-- <view class="orderstatusbtn" v-if="item.orderStatus == 3 && userRecordid != null" @click.stop="showZhuiping(item.productId)">追评</view> -->
                                </span>
                            </view>
                            <view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index<item.length-1"></view>
                        </view>	
                    </view>
                </view>
            </view>
        </view>
		<view v-if="status==0" style="text-align: center;">
			<u-loading-icon style="display: inline-block;"></u-loading-icon>
			<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
		</view>
		<view v-if="status==1" style="padding-bottom: 20rpx;">
			<u-divider v-if="newList.length > 0" text="全部加载完成"></u-divider>
			<u-divider v-else text="暂无订单"></u-divider>
		</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>
		<z-navigation></z-navigation>
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
import $http from '@/config/requestConfig.js';
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import musicPlay from '@/components/music.vue'
import {
		setPay,
		setPayAssign,setWXPay
	} from '@/config/utils';
import { data } from 'jquery';
   import {
   	mapState, mapMutations
   } from 'vuex';
	export default {
		data() {
			return {
				// loadingNow : false,
				playData:{},
				emojiIcon:'cuIcon-emoji',
				windowWidth:0,
				bookid:null,
				booklistpage: 1,
				productList:[],
				productInfo:{},
				emoji:[],
				Files:[],
				page:1,
				pageSize:10,
				total:0,
				status:3,
				shupingList:[],
				bfaid:null,
                ordersTabs: [{
					name: '全部',
					value: null
				}, {
					name: '待付款',
					value: 0
				}, {
					name: '待发货',
					value: 1
				}, {
					name: '待收货',
					value: 2
				}, {
					name: '已完成',
					value: 3
				}],
				ordersListTab: 1,
                newestpage: 1,
                // hotestpage: 1,
                // booksetpage: 1,
                newList:[],
                // hotList:[],
                // bookList:[],
				map: {},
				userRecordid:null,     // 用户的评价状态
				pingjiaShow:false, //添加评价 
				Pform:{ // 评价表单
					star:0,
					comment:'',
					img:[],
					html:''
				},
				isShowEmj: false,
				pjType:'',
			}
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
			uni.stopPullDownRefresh(); 
			  
            this.newestpage = 1
            // this.hotestpage = 1
            // this.booksetpage = 1
            this.newList = []
            // this.hotList = []
            // this.bookList = []
            this.getBookList(this.ordersListTab, false)
			   
		},
		onReachBottom() {
            this.newestpage++
            // this.hotestpage++
            // this.booksetpage++
            this.getBookList(this.ordersListTab, false)
		},
		onLoad(e) {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			console.log(e,'onload111')
			// this.bookid = e.bookid
			this.getBookList(1, false)
		},
		computed:{
			...mapState(['userInfo']),
		},
		methods: {
			...mapMutations(['setLoadingShow']),
            // 切换tab状态
			ordersTabCLi(e) {
				this.ordersListTab = e
                this.newestpage = 1
                // this.hotestpage = 1
                // this.booksetpage = 1
                this.newList = []
                // this.hotList = []
                // this.bookList = []
				this.getBookList(this.ordersListTab, false)
			},
			// 查看本书更多书评
			toMore(val){
				console.log(val,'val')
				uni.navigateTo({
					url: '../comments/comments?bookid='+val.id,
				});
			},
			// 订单详情
			toDetail(val){
				console.log(val,'val')
				// uni.navigateTo({
				// 	url:'../bookShop/commentsDetail?bookid='+val.bookid+'&bfa_id='+val.id
				// })
				uni.navigateTo({
					url: './orderLCont?orderId=' + val.orderId + '&orderType=' + val.orderStatus  + '&orderSn=' + val.orderSn
				});
			},
			getBookList(flag, refreshflag){
				// 根据tab不同，获取最新书评、最热书评、书集列表
				uni.showLoading({
					title: '加载中'
				});

				// 顶部红点数量
				$http.request({
					url: "book/buyOrder/getUserOrderStatusNum",
					method: "POST", 
					data: {
						"userId": this.userInfo.id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					this.map = res.map
				}).catch(e => {
					console.log(e)
				})
				
				var params = {
					"userId": this.userInfo.id,
					"orderStatus":flag,//传null为全部，订单状态  0-未付款 1-待发货 2-已发货 3-交易成功 4-交易失败 5-过期
					"limit": 10,
					"page": this.newestpage
				}
				$http.request({
					url: "book/buyOrder/getUserOrderList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: params,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					uni.hideLoading()
					console.log(res, '内容获取成功')
					if (res.code == 0 && res.page && res.page.records.length > 0) {
						this.newList = this.newList.concat(res.page.records)
					} else { // 
						
					}
					if(res.page.records.length != 10){
						this.status = 1
					} else {
						this.status = 0
					}
				}).catch(e => {
					uni.hideLoading()
					console.log(e)
				})
			},
			// 支付
			goPay(payItem) {
				console.log(payItem,'订单数据')		
					if(payItem.paymentMethod == 2){
						console.log('阿里支付')
					setPay({
						typePay: 'alipay',
						subject: 'order',
						totalAmount: payItem.realMoney,
						type: 2,
						relevanceoid: payItem.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()
					})
				} else if(payItem.paymentMethod == 1){
					console.log('微信支付')
					// console.log(this.isAndorid)				
					 if(this.isAndorid == false){
						 uni.showModal({
							 title: '提示',
							 content: '很抱歉，苹果系统暂不支持微信支付',
							 showCancel:false
						 })
						return false
					 }else{
						let data1={
							orderSn:payItem.orderSn,
							buyOrderId: null,	
							totalAmount: payItem.realMoney					
						}
						console.log(data1,'data1')
						setWXPay(data1,res => {
							if (res.success) {
								uni.showToast({
									title: "支付成功"
								});
							} else {	
								console.log(res)
								if(res.data.errMsg.indexOf('User canceled') != -1){
									uni.showToast({
										title: "用户取消支付",
										icon: "none",
										image: '../../static/icon/ic_close.png'
									});
								}else{
								uni.showToast({
									title: "支付失败",
									icon: "none",
									image: '../../static/icon/ic_close.png'
								});
								}
							}
						})
					}
				}else if(payItem.paymentMethod == 3){
					// 苹果充值
					console.log('苹果二次支付')
					uni.showModal({
						content:'apple内购订单不支持继续支付，请重新发起支付申请并完成支付',
						confirmText:'好的',
						showCancel:false
					})
					return
					// if(this.isAndorid){						
					// 	uni.showModal({
					// 		title:'提示',
					// 		showCancel:false,
					// 		content:'很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单'
					// 	})
					// }else{
					// 	this.iphonepay(payItem)
					// }
				}
			},
			// 取消订单
			canceOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					confirmText: "取消订单",
					cancelText: "考虑一下",
					confirmColor: '#c96713',
					cancelColor: '#555',
					success: res => {
						if (res.confirm) {
							this.$http
								.get('/book/buyOrder/cancelOrder?orderSn=' + item.orderSn)
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											icon: 'none',
											title: '取消订单成功'
										})
										// uni.switchTab({
										// 	url: './orderList'
										// });
										
										this.newestpage = 1
										this.newList = []
										this.getBookList(this.ordersListTab, false)
									}
								})
						}
					}
				});
			},
			// canceOrder(item) {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确定要取消订单吗？',
			// 		confirmText: "取消订单",
			// 		cancelText: "考虑一下",
			// 		confirmColor: '#c96713',
			// 		cancelColor: '#555',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				uni.showLoading()
			// 				$http.request({
			// 					url: "book/buyOrder/cancelOrder",
			// 					method: "GET", // 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.getBookList(this.ordersListTab, false)
			// 					}
			// 				})
			// 			} else if (res.cancel) {}
			// 		}
			// 	});
			// },
			// 查看物流
			seeExpressDetail(item){
				// console.log(item, this.sheetList.length)
				// if(this.sheetList.length > 1){
				// 	this.sheetListShow = true					
				// }else if(this.sheetList.length == 1){
					// 直接展示详情
					uni.navigateTo({						
						url: "./deliverDetail?orderSn=" + item.orderSn + "&expressOrderSn=" + item.expressList[0].expressOrderSn
					})
				// }
			},
			// 确认收货
			OverOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确认收货？',
					success: res => {
						let data = {
							orderId: item.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.newestpage = 1
									this.newList = []
									this.getBookList(this.ordersListTab, false)
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			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,
						'productId': 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,item){
				console.log('评价实例',id, item)
				this.pjType = ''
				this.productID = id
				this.orderSn = item.orderSn
				this.pingjiaShow = true
			},
			getStar(i){
				this.Pform.star = i
			},
			InputBlur(e){
				
			},
			InputFocus(e){
				this.isShowEmj = false;
				this.emojiIcon = 'cuIcon-emoji';
				this.$emit('foc')
			},
			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')
			},
			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
							})
						}
					});
				}
			},
			// 获得输入的表情数组
			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
				}
			},
		},
		components:{
			musicPlay,			
			emotion			
		}
	}
</script>

<style lang="scss" scoped>
// @import '@/style/mixin.scss';
.ordersTabs {
    // margin: 70rpx 0 0 0;
    width: 730rpx;
    // padding: 0 3% 3% 3%;
    position: fixed;
    // top: 80rpx;
    background-color: #f7faf9;
    z-index: 100;

    .ordersdefine {
        display: inline-block;
        padding: 20rpx 0 20rpx 0;
        // margin: 40rpx 0 15rpx 0;
        width:140rpx;
        text-align: center;
        font-size: 30rpx;
		position: relative;
		.ordersnum{
			position: absolute;
			top: 8rpx;
			right: 0rpx;
			background-color: red;
            // border:1rpx solid #a3a3a3;
			border-radius: 40rpx;
			width: 28rpx;
			height: 28rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: rgb(255, 255, 255);
		}
    }

    .ordStyle {
        // border-bottom: 4rpx solid #54a966;
        // color: #54a966;
        font-weight: bold;
    }
}
.orderstatusbtn{
	color: #000;
	border:1px solid #999;
	border-radius: 10rpx;
	padding: 0 10rpx;
	margin-left:20rpx;
	width:140rpx;
	text-align: center;
}
.addcomment{color: #ffaa00; border-color: #ffaa00; margin: 0 ;}
.alertDeliver{ color: #55aa00; border-color: #55aa00;}

	.flexbox{display: flex;}
	.container{padding: 0 10px;}
	.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; }
	.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;
			}
		}}
	
	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
	.gengduoshuping{text-align: right; color: #0044ff; padding-bottom: 20rpx; padding-top: 20rpx;}
	.orderInfo{
		justify-content: space-between;
		// margin-bottom: 15px;
		background-color: #fff;
		padding:20rpx;
		border: 1px splid #999;
		box-sizing: border-box;
		// padding-bottom: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.bookinfolist{
			height: 180rpx;
		}
	}
	.mainContent{
		background-color: #fff; 
		.item{
			// padding: 10px;
			// margin-bottom: 30rpx;
			// border: 1px solid #999;
			box-sizing: border-box;
			// padding-bottom: 20rpx;
			border-radius: 20rpx;
			// margin-bottom: 20rpx;
		}
		.feng{
            margin:0rpx 20rpx 0 0;
            height: 160rpx;
            width: 140rpx;
            float:left;
            border-radius: 20rpx;
            border:1rpx solid #e9e9e9;
        }
		.orderstatus{font-size: 30rpx; color: red; text-align: right;padding-bottom: 10rpx;}
		/deep/.description{
			overflow: hidden;
			color: #666;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 5;
			line-clamp: 5;
			-webkit-box-orient: vertical;
			font-size: 26rpx;
			margin-bottom: 20rpx;
			margin-top:10rpx;
			height: 172rpx;
			img{
				width: 100% !important;
			}
		}
		.btns{
			font-size: 28rpx;
			justify-content: space-between;
			align-items: center;
			.booknameleft{
                width: 372rpx;
                color: #000000;
			}
			.left{
                width: 300rpx;
                color: #a1a1a1;
            }
            .right{
                width: 350rpx;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
            .gzicon{
                margin:0 0 0 20rpx;
                height: 40rpx;
                width: 40rpx;
                // float:left;
                // border-radius: 20rpx;
                // border:1rpx solid #e9e9e9;
            }
			.opbtns{
				.pingjia{margin-left: 10px;}
			}
		}
	}
	.mb30{margin-bottom: 30rpx; overflow: hidden;}
		
	.mytabs {
		// background: url('@/static/icon/bgtushu.png') no-repeat left top;
		height: 80rpx;
		// margin-bottom: 30rpx;

		.item {
			border-radius: 10rpx;
			background-color: #c6ead0;
			width: 48%;
			// margin: 0 10rpx;
			text-align: center;
			color: #3c7f56;
			font-size: 36rpx;
			line-height: 80rpx;
		}

		.item.active {
			background-color: #3c7f56;
			color: #fff;
		}

		.item1 {
			margin-right: 20rpx;
		}
	}
</style>
