<template>
	<view class="page">
		<scroll-view class="scrolllist" scroll-x="true" scroll-with-animation  :scroll-left="scrollLeft">
			<view class="tabicl" v-for="(item, index) in list" :key="index" :class="index==tabCurrentIndex?'cur':''" @tap="tabSelect" :data-id="index">
				<view class="ptext">{{item.name}}</view>
				<view class="pline"></view>
			</view>
		</scroll-view>
		<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex"  @animationfinish="animationfinish" @change="handleChange">
			<swiper-item class="swiper-item" v-for="tabItem in list" :key="tabItem.id">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="scell" v-if="tabItem.slist.length>0">
						<view v-for="(item, index) in tabItem.slist" :key="index" class="oitem">

							<view class="otop" @click="gotoInfo(item.bookId)">
								<view class="hleft">
									<text>{{item.storeName?item.storeName:'门店'}}</text>
								</view>
								<view class="hright">
									<!-- 1：待上课，2：预约中，3：待评价 ，4：已完成 ，5：已取消 -->
									<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
									<view v-if="item.bookStatus==1" class="ztip">教练确认</view>
									<view v-else-if="item.bookStatus==0" class="jtip">预约中</view>
									<view v-else-if="item.bookStatus==2" class="htip">待上课</view>
									<view v-else-if="item.bookStatus==4" class="wtip">已完成</view>
									<view v-else-if="item.bookStatus==3" class="ctip">已取消</view>
								</view>
							</view>

							<view class="oscon" @click="gotoInfo(item.bookId)">
								<view class="osimg imgload">
									<image class="osimg" v-if="item.pic" :src="getimgRemoteFile(item.pic)" mode="aspectFill"></image>
								</view>
								<view class="osname">
									<text class="ntxt">{{item.courseName}} {{item.claName}} </text>
									<text class="txt"> 教练：{{item.teacherName || '-'}}</text>
									<text class="txt"> 上课时间：{{ item.claDate+' '+item.startTime+'-'+item.endTime}}</text>
									<text class="txt"> 教室：{{item.roomName}}</text>
								</view>
							</view>

							<view class="obtn">
								<view class="qr">
									<view class="qrimg" v-if="item.qrCode" @click="openQR(item.qrCode)">
										<image class="qrimg" :src="'data:image/png;base64,'+item.qrCode" mode="aspectFill"></image>
									</view>
								</view>
								<!--  1：待上课，2：预约中，3：待评价 ，4：已完成  5：已取消-->
								<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
								<button  class="conbtn" @click="gototeacher(item)">联系教练</button>
<!--								<button v-if="item.bookStatus==2||item.bookStatus==1" type="primary" class="cancelbtn" :data-id="item.courseTimeId" @click="cancelkcdo">取消课程</button>-->
								<button v-if="'0,1,2'.includes(item.bookStatus)"  class="cancelbtn" :data-id="item.courseTimeId" @click="cancelyydo">取消预约</button>
<!--								<button v-if="item.bookStatus==0" type="primary" class="paybtn" :data-id="item.courseTimeId" @click="checkdo($event,item)">确认上课</button>-->
								<button v-if="item.bookStatus==4"  class="viewbtn" :data-id="item.courseTimeId" @click="orderdo($event,item)">再次预约</button>
<!--								<button v-if="item.bookStatus==4" type="primary" class="gzbtn" :data-id="item.courseTimeId" @click="gotoevaluate($event,item)">评价</button>-->
							</view>

						</view>
					</view>

					<view v-if="tabItem.slist.length==0 && tabItem.loadStatus=='noMore'" class="nodata"></view>
					<uni-load-more v-if="tabItem.slist.length>0" iconType="circle" :status="tabItem.loadStatus" />

				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 二维码 -->
		<uni-popup ref="pfDialog" :mask-click="false">
			<view class="pcon">
				<view class="phtxt">预约二维码</view>
				<view class="ptxt">
					<image class="qrimg" :src="qr" mode="aspectFill"></image>
				</view>
				<view class="btn" @click="closeDialog">
					关闭
				</view>
			</view>
		</uni-popup>

		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>

	</view>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';
	import { myCache,getRemoteFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	export default {
		components: {
			openlogin
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				tabCurrentIndex: 1,
				scrollLeft: 0,//tabs
				qr:'', // 预约二维码
				//  1：待上课，2：预约中，3：待评价
				list:[
					{
						id:0,
						order_state:null,
						loadStatus:'more', // 'more', // 'noMore',
						name:'全部',
						sort:'all',
						slist:[
							{
								id:1,
								orderid:"ord0001",
								business:"商家1",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:1,
								productunit:"个",
								orderstate:'1',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP1"
							},
							{
								id:"ord0002",
								orderid:"ord0002",
								business:"商家2",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p3.jpg',
								productspecs:"团课",
								productnum:2,
								productunit:"个",
								orderstate:'2',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP2"
							},
							{
								id:"ord0003",
								orderid:"ord0003",
								business:"商家3",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"L 白",
								productnum:1,
								productunit:"个",
								orderstate:'3',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP3"
							},
							{
								id:"ord0004",
								orderid:"ord0004",
								business:"商家4",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:1,
								productunit:"个",
								orderstate:'4',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP4"
							},
							{
								id:"ord0005",
								orderid:"ord0005",
								business:"商家5",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:2,
								productunit:"个",
								orderstate:'3',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP2"
							},
							{
								id:"ord0006",
								orderid:"ord0006",
								business:"商家6",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:3,
								productunit:"个",
								orderstate:'1',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP2"
							},
							{
								id:"ord0007",
								orderid:"ord0007",
								business:"商家7",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:1,
								productunit:"个",
								orderstate:'1',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP2"
							}
						]
					},
					{
						id:1,
						order_state:1,
						loadStatus:'more', // 'more',
						name:'待上课',
						sort:'waitingForClass',
						slist:[
							{
								id:1,
								orderid:"ord0001",
								business:"商家1",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:1,
								productunit:"个",
								orderstate:'1',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP1"
							},
							{
								id:"ord0006",
								orderid:"ord0006",
								business:"商家6",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:3,
								productunit:"个",
								orderstate:'1',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP2"
							},
						]
					},
					{
						id:2,
						order_state:2,
						loadStatus:'more', // 'more',
						name:'预约中',
						sort:'booking',
						slist:[
							{
								id:"ord0002",
								orderid:"ord0002",
								business:"商家2",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p3.jpg',
								productspecs:"团课",
								productnum:2,
								productunit:"个",
								orderstate:'2',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP2"
							},
						]
					},
					// {
					// 	id:3,
					// 	order_state:3,
					// 	loadStatus:'more', // 'more',
					// 	name:'待评价',
					// 	sort:'all',
					// 	slist:[
					// 		{
					// 			id:"ord0005",
					// 			orderid:"ord0005",
					// 			business:"商家5",
					// 			productid:"1",
					// 			productprice:39.9,
					// 			productname:"减脂|减重|垫子上瑜伽",
					// 			img:'../../static/image/theme/p1.jpg',
					// 			productspecs:"团课",
					// 			productnum:2,
					// 			productunit:"个",
					// 			orderstate:'3',
					// 			orderdate:"2025-06-23 10:26:09",
					// 			room:"VIP2"
					// 		},
					// 	]
					// },
					{
						id:4,
						order_state:4,
						loadStatus:'more', // 'more',noMore
						name:'已完成',
						sort:'completed',
						slist:[
							{
								id:"ord0004",
								orderid:"ord0004",
								business:"商家4",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:1,
								productunit:"个",
								orderstate:'4',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP4"
							},
						]
					},
					{
						id:5,
						order_state:5,
						loadStatus:'more', // 'more',
						name:'已取消',
						sort:'canceled',
						slist:[
							{
								id:"ord0005",
								orderid:"ord0005",
								business:"商家5",
								productid:"1",
								productprice:39.9,
								productname:"减脂|减重|垫子上瑜伽",
								img:'../../static/image/theme/p1.jpg',
								productspecs:"团课",
								productnum:1,
								productunit:"个",
								orderstate:'5',
								orderdate:"2025-06-23 10:26:09",
								room:"VIP4"
							},
						]
					},
				],
			};
		},
    computed: {
      ...mapGetters('chatStore', ['findChatIdx']),   // 正确
    },
		onLoad(option) {
			if(option.id||option.id==0){
				if(parseInt(option.id)==0){
					this.tabCurrentIndex=0;
				}
				else{
					this.tabCurrentIndex=parseInt(option.id);
				}
				this.scrollLeft = (this.tabCurrentIndex - 1) * 60;
			}
			myCache('courserefresh',0);
			this.reset();
		},
		onShow(option){
			// 预约后重新刷新课程表
			if(myCache('courserefresh')){
				this.reset();
				myCache('courserefresh',0);
			}
		},
		onReady(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(this.userid==""||this.userid=="0"){
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},100);
		},
		methods: {
      ...mapActions('chatStore', ['openChat']),
			openQR(qr){
				console.log("openQR")
				this.qr='data:image/png;base64,'+qr;
				this.$forceUpdate();
				this.openDialog();
			},
			closeDialog(){
				this.$refs.pfDialog.close();
			},
			openDialog(){
				this.$refs.pfDialog.open();
			},
			getimgRemoteFile(img){
				if(img){
					img=img.split(',')[0];
					return getRemoteFile(img)
				}
				else{
					return require("@/static/image/theme/p1.jpg")
				}
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			async getOrderList() {
				if(this.list[this.tabCurrentIndex].loadStatus!=="noMore")
				{
					uni.showLoading({
						title: '数据加载中...'
					});
					const {data: res} = await uni.$http.get('/api/course/bookCourseList');
					var data = res.data;
					if(data){
						console.log(res)
						// 全部
						this.list[0].loadStatus="noMore";
						this.list[0].slist=data.all;
						console.log(this.list[0].slist)
						this.$forceUpdate();

						// 已取消
						this.list[4].loadStatus="noMore";
						this.list[4].slist=data.canceled;
						this.$forceUpdate();

						// 待上课
						this.list[1].loadStatus="noMore";
						this.list[1].slist=data.waitingForClass;
						this.$forceUpdate();

						// 预约中
						this.list[2].loadStatus="noMore";
						this.list[2].slist=data.booking;
						this.$forceUpdate();

						// 已完成
						this.list[3].loadStatus="noMore";
						this.list[3].slist=data.completed;
						this.$forceUpdate();
					}
					else{
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						this.$forceUpdate();
					}
				}
			},
			loadData(){
				console.log('loadData');
				// 加载
				if(this.list[this.tabCurrentIndex].loadStatus=="more") {
					this.list[this.tabCurrentIndex].loadStatus="loading";
					setTimeout(() => {
						this.getOrderList();
					}, 300);
				}
			},
			tabSelect(e) {
				console.log(e)
				this.tabCurrentIndex = e.currentTarget.dataset.id;
				this.$forceUpdate();
				// 重新加载 暂不需要加载
				// this.list[this.tabCurrentIndex].loadStatus="more";
				// this.list[this.tabCurrentIndex].slist=[];
				// this.loadData();
			},
			animationfinish({ detail: { current } }) {
				// this.tabCurrentIndex = current;
				// this.loadData();
			},
			handleChange(e) {
				//原在animationfinish中的操作转移到这里
				console.log("handleChange");
				this.tabCurrentIndex = e.detail.current;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.$forceUpdate();
				this.loadData();
			},
			gotoInfo(id){
				id=id+"";
				// 预约详情
				uni.navigateTo({
					url: `/pages/book/bookinfo?id=${id}`
				});
			},
			// 联系教练
			gototeacher(item){
				console.log(item);
				if(item.teacherAppId){
					uni.showLoading({
						title: '会话创建中...'
					});
					// 直接跳转到聊天框
          let chat = {
            type: 'PRIVATE',
            targetId: item.teacherAppId,
            showName: item.teacherName,
            headImage: item.pic?item.pic:'/static/image/kf.png',
          };
          this.openChat(chat);
          let chatIdx = this.findChatIdx(chat);
          uni.navigateTo({ url: `/pages/chatbox/chat-box?chatIdx=${chatIdx}` });
					// var chatid="privatechat-" + this.userid +"-"+ item.teacherAppId;
					// var timestamp = new Date().getTime();
					// var info={
					// 	chatId: "privatechat-" + this.userid +"-"+ item.teacherAppId,
					// 	chatType: "coach",
					// 	chatName: item.teacherName,
					// 	chatAvatar: item.pic?item.pic:'/static/image/kf.png',
					// 	chatTime: timestamp,
					// 	userid: this.userid,
					// 	friendId: item.teacherAppId, // 会话教练userid
					// 	minId: "", // 已读消息的最大id
					// 	sort:"privatechat", // privatechat 私聊  groupchat 群聊
					// 	from:"yh" // yh 用户咨询进入聊天框，message 从消息进入聊天框
					// }
					// var data=encodeURIComponent(JSON.stringify(info));
					// uni.navigateTo({
					// 	url: `/pages/chat/chat?data=${data}`
					// });
				}
				else{
					uni.showModal({
						title: '提示',
						content: '抱歉！当前预约尚未配置教练在线服务..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
						}
					});
				}
			},
			// 去评价
			gotoevaluate(item){
				var data=encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/book/bookpj?data=${data}`
				});
			},
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"||this.phone==""){
					uni.navigateTo({
						url: `/pages/login/login`
					});
					return false;
				}
				else{
					return true;
				}
			},
			// 再次预约
			orderdo(e,item){
				console.log(e,item);
				var that = this;
        uni.navigateTo({
          url: `/pages/user/courselist`
        });
				// 再次预约
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定再次预约吗？',
				// 	cancelText: '取消',
				// 	confirmText: '确定',
				// 	success: ress => {
				// 		if (ress.confirm) {
				// 			that.orderdodo(item);
				// 		}
				// 	}
				// });
			},
			// 再次预约
			async orderdodo(item){
				var param={
					"courseTimeId": item.courseTimeId
				};
				uni.showToast({
					title: '再次预约中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/course/bookCourse', param);
				if(res.success){
					uni.showToast({
						title: '上课已预约！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.reset();
				}
				else{
					uni.showModal({
						title: '提示',
						content: res.message? res.message:'课程预约失败！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
							}
						}
					});
				}
			},
			// 确认上课
			checkdo(e,item){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				// 确认上课
				uni.showModal({
					title: '提示',
					content: '确定上课吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.checkdodo(id,item);
						}
					}
				});
			},
			// 确认上课
			async checkdodo(id,item){
				var param={
					"courseTimeId": item.courseTimeId,
					"startTime": item.startTime,
					"endTime":  item.endTime
				};
				uni.showToast({
					title: '确定上课中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/my/confirmClass', param);
				if(res.msg=="successed"){
					uni.showToast({
						title: '上课已确认！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.reset();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'上课确认失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			// 取消预约
			cancelyydo(e){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				//取消预约
				uni.showModal({
					title: '提示',
					content: '确定要取消预约吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.delyydo(id);
						}
					}
				});
			},
			// 取消预约
			async delyydo(id){
				var param={
					"courseTimeId":id
				};
				uni.showToast({
					title: '取消中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
				if(res.success){
					uni.showToast({
						title: '预约已取消！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.reset();
				}
				else{
					uni.showToast({
						title: res.message? res.message:'预约取消失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			// 取消课程
			cancelkcdo(e){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				//取消课程
				uni.showModal({
					title: '提示',
					content: '确定要取消课程吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.delkcdo(id);
						}
					}
				});
			},
			// 取消课程
			async delkcdo(id){
				var param={
					"courseTimeId":id
				};
				uni.showToast({
					title: '取消中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
				if(res.msg=="success"){
					uni.showToast({
						title: '课程已取消！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.reset();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'课程取消失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			reset(){
				// 重新加载数据
				this.list.forEach((cell,idx)=>{
					this.list[idx].loadStatus='more';
					this.list[idx].slist=[];
				});
				this.$forceUpdate();
				this.loadData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.olistcon{
		padding: 0 20rpx 20rpx 20rpx;
		.olist{
			display: flex;
			flex-direction: column;
			.ocell{
				font-size: 26rpx;
				color:#747474;
				padding: 10rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.red{
					color:#ff3d0e;
				}
				.green{
					color:#00cd00;
				}
			}
		}
	}
	.swiper-box {
		flex: 1;
		height: calc(100vh - var(--window-top) - 130rpx) !important;
	}
	.swiper-item {
		height: 100%;
	}
	.scrolllist{
		height: 110rpx;
		background: #FFF;
		white-space: nowrap;
		width: 100%;
	}
	.tabicl{
		min-width: 130rpx;
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin-right: 20rpx;
	}
	.ptext{
		font-size: 30rpx;
		text-align: center;
		color: #000;
		font-weight: 600;
		height: 90rpx;
	}
	.cur .ptext{
		color: #00a89b;
		font-size: 33rpx;
		font-weight: 600;
	}
	.cur .pline{
		width: 40%;
		height: 9rpx;
		background: #00a89b;
		border-radius: 6rpx;
		opacity: 1;
		margin-left: 30%;
	}
	.nodata{
		width: 100%;
		height:  calc(100vh - 400rpx) !important;
		line-height: calc(100vh) !important;
		background-image: url('/static/image/no.png');
		background-size: 52% auto;
		background-repeat: no-repeat;
		background-position: center;
		font-size: 28rpx;
		text-align: center;
		color: #00a89b;
		overflow: hidden;
	}
	.scell{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 20rpx;
		.oitem{
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 6rpx;
			padding: 20rpx;
			width: 100%;
			margin-bottom: 20rpx;
			.otop{
				display: flex;
				flex-direction: row;
				padding: 10rpx 0 0;
				height: 60rpx;
				line-height: 60rpx;
				width: 100%;
				.hleft{
					display: flex;
					flex-direction: row;
					flex:1;
					align-items: center;
					font-size: 30rpx;
					color: #000;
				}
				.hright{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// <!--1：待付款，2：待发货，3：待收货 ，4：待评价 ，5：已完成，6：订单取消-->
					.ztip{
						border-radius: 12rpx;
						color:#1296db;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.jtip{
						border-radius: 12rpx;
						color:#feb467;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.htip{
						border-radius: 12rpx;
						color:#fc6900;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.hwtip{
						border-radius: 12rpx;
						color:#FF0000;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.wtip{
						border-radius: 12rpx;
						color:#43cca4;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.gtip{
						border-radius: 12rpx;
						color:#0036D6;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.ftip{
						border-radius: 12rpx;
						color:#6A81F1;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.ctip{
						border-radius: 12rpx;
						color:#888;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
			}
			.obtn{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				border-top: 1rpx solid #eee;
				padding: 20rpx 0 0;
				width: 100%;
				.qr{
					display: flex;
					flex:1;
					color:#333;
					align-items: center;
					.qrimg{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.cancelbtn{
					background-color: #FFFFFF !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					color:#888;
					border:1rpx solid #888;
				}
				.cancelbtn::after{
					border:0 !important;
				}
				.viewbtn{
					background-color: #FFFFFF !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					color:#6A81F1;
					border:1rpx solid #6A81F1;
				}
				.viewbtn::after{
					border:0 !important;
				}
				.pjbtn{
					background-color: #FFFFFF !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid rgb(252, 105, 0);
					color:rgb(252, 105, 0);
				}
				.pjbtn::after{
					border:0 !important;
				}
				.conbtn{
					background-color: #f3f4ef !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #00a89b;
					color:#595d4d;
				}
				.conbtn::after{
					border:0 !important;
				}
				.paybtn{
					background-color: #00a89b !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #00a89b;
				}
				.paybtn::after{
					border:0 !important;
				}
				.gzbtn{
					background-color: #f5aa00 !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #f5aa00;
				}
				.gzbtn::after{
					border:0 !important;
				}
			}
			.oscon{
				margin:20rpx 0;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				.osimg{
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
				.osname{
					display: flex;
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					.ntxt{
						font-size: 28rpx;
						color:#000;
						line-height: 36rpx;
						margin-bottom: 8rpx;
					}
					.txt{
						font-size: 24rpx;
						color:#666;
					}
				}
				.osprice{
					display: flex;
					justify-content: flex-end;
					margin-right: 10rpx;
					font-size: 30rpx;
					color:#666;
				}
			}
		}
		.sitem {
			display: flex;
			flex-direction: column;
			flex: 1;
			background-color: #FFFFFF;
		    /*设置最小宽度，才会让元素排不下，导致换行排列*/
		    min-width: calc((100% - 20rpx) / 2);
			max-width: calc((100% - 20rpx) / 2);
			margin-right:5rpx;
			margin-left:5rpx;
			margin-bottom: 10rpx;
			border-radius: 16rpx;
			.simg{
				width: 100%;
				height: 360rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 16rpx 16rpx 0 0;
				}
			}
			.sname{
				font-size: 30rpx;
				font-weight: 600;
				color: rgb(29, 29, 29);
				padding: 16rpx;
			}
			.sinfo{
				font-size: 26rpx;
				color:rgb(116, 116, 116);
				padding: 0 16rpx;
				height: 60rpx;
				line-height: 30rpx;
				overflow: hidden;
				position: relative;
				text-overflow: ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
			}
			.sprices{
				padding: 0 16rpx 20rpx 16rpx;
				font-size: 36rpx;
				color:rgb(252, 105, 0);
				border-radius: 0 0 16rpx 16rpx;
				.cx{
					font-size: 28rpx;
					color:rgb(116, 116, 116);
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}
		}
	}



	.pcon{
		width: 690rpx;
		padding-top:30rpx;
		padding-bottom:50rpx;
		background: #FCFCFD;
		box-shadow: 0rpx 128rpx 128rpx 2rpx rgba(31,47,70,0.12);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.phtxt{
			width: 600rpx;
			margin: 20rpx auto 10rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 600;
			color: #23262F;
		}
		.ptxt
		{
			width: 620rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx auto;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 2rpx solid #F7F8FA;
			padding: 30rpx;
			.qrimg{
				width: 400rpx;
				height: 400rpx;
			}
		}
		.btn{
			width: 520rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #00A99A;
			box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(0,169,154,0.4);
			border-radius: 254rpx 254rpx 254rpx 254rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FCFCFD;
		}
	}

</style>
