<template>
	<view class="page">
		
		<view class="hcon">
			<view class="h-header">
				<image :src="avatar"></image>
				<view class="tit-box">
					<text v-if="nickName" class="tit">{{nickName}}</text>
					<text v-if="signature" class="titm">{{signature}}</text>
					<text v-if="!userid" class="tit" @click="logindo">点击登录</text>
				</view>
				<view class="ebtn" v-if="userid" @click="gotoEdit">编辑资料</view>
			</view>
		</view>
		
		<!-- 菜单1 -->
		<view class="s-list">
			<view class="s-header">
				<view class="tit-box">
					<text class="tit">我的订单</text>
					<view class="tit2" @click="gotoOrder(0)">
						查看全部订单<uni-icons type="right" size="15" color="#666"></uni-icons>
					</view>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation scroll-left="0">
				<view v-for="(item, index) in menus" :key="index"
					class="product-item" @click="gotoOrder(item.key)">
					<view class="image-wrapper1">
						<image :src="item.img" mode="aspectFit" lazy-load></image>
					</view>
					<view v-if="item.num&&item.num>0" class="num">{{item.num}}</view>
					<view class="title">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 菜单2 -->
		<view class="s-list">
			<view class="s-header">
				<view class="tit-box">
					<text class="tit">其它服务</text>
					<view class="tit2">
					</view>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation scroll-left="0">
				<!-- <view class="product-item" v-for="(item, index) in servers" :key="index" @click="gotoServe(index)">
					<view class="image-wrapper">
						<image class="imgicon" :src="item.img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{item.name}}</view>
				</view> -->
				<view class="product-item" @tap="gotoServe(5)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[5].img" mode="aspectFill" lazy-load></image>
					</view>
					<view v-if="favoritesnum>0" class="num">{{favoritesnum}}</view>
					<view class="title">{{servers[5].name}}</view>
				</view>
				<!-- 设置 -->
				<view class="product-item" @click="gotoServe(0)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[0].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[0].name}}</view>
				</view>
				<!-- 收货地址 -->
				<view class="product-item" @click="gotoServe(1)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[1].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[1].name}}</view>
				</view>
				<!-- 我的课程 -->
				<view class="product-item" @click="gotoServe(2)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[2].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[2].name}}</view>
				</view>
				<!-- 我的预约 -->
				<view class="product-item" @click="gotoServe(3)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[3].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[3].name}}</view>
				</view>
				<!-- 预约学员 教练-->
				<view v-if="ifview('104')" class="product-item" @click="gotoServe(12)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[12].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[12].name}}</view>
				</view>
				<!-- 预约学员 店长 -->
				<view v-if="ifview('105')" class="product-item" @click="gotoServe(13)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[13].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[13].name}}</view>
				</view>
				<!-- 学员签到 教练/顾问 -->
				<view v-if="ifview('103,104')" class="product-item" @click="gotoServe(14)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[14].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[14].name}}</view>
				</view>
				<!-- 我的客户 -->
				<view v-if="ifview('103')" class="product-item" @click="gotoServe(4)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[4].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[4].name}}</view>
				</view>
				<!-- 提成统计 -->
				<view v-if="ifview('103')" class="product-item" @click="gotoServe(6)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[6].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[6].name}}</view>
				</view>
				<!-- 我的排课 -->
				<view v-if="ifview('104')" class="product-item" @click="gotoServe(7)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[7].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[7].name}}</view>
				</view>
				<!-- 课时统计 -->
				<view v-if="ifview('104')" class="product-item" @click="gotoServe(8)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[8].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[8].name}}</view>
				</view>
				<!-- 销售信息 -->
				<view v-if="ifview('105')" class="product-item" @click="gotoServe(9)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[9].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[9].name}}</view>
				</view>
				<!-- 场地费用 -->
				<view v-if="ifview('105')" class="product-item" @click="gotoServe(10)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[10].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[10].name}}</view>
				</view>
				<!-- 教练费用 -->
				<view v-if="ifview('105')" class="product-item" @click="gotoServe(11)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[11].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[11].name}}</view>
				</view>
				<view v-if="userid" class="product-item" @click="gotoServe(99)">
					<view class="image-wrapper">
						<image class="imgicon" :src="servers[15].img" mode="aspectFill" lazy-load></image>
					</view>
					<view class="title">{{servers[15].name}}</view>
				</view>
			</scroll-view>
		</view>
		
		<u-toast ref="uToast" />
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
	</view>
</template>

<script>
	import { myCache,getcartNum,getRemoteFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	export default {
		components: {
		  openlogin,top,service
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				nickName:"",
				signature:"",
				avatar:"../../static/image/logo.png",
				roleId:[],
				favoritesnum:0,//我的收藏数量
				menus: [
					{
						key:1,
						img:'../../static/image/dfk.png',
						name:'待付款',
						num:0,
					},
					{
						key:2,
						img:'../../static/image/dfh.png',
						name:'待发货',
						num:0,
					},
					{
						key:3,
						img:'../../static/image/dsh.png',
						name:'待收货',
						num:0,
					},
					{
						key:4,
						img:'../../static/image/ywc.png',
						name:'退款/售后',
						num:0,
					}
				],
				servers: [
					{
						key:0,
						img:'../../static/image/sz.png',
						name:'设置',
					},
					{
						key:1,
						img:'../../static/image/shdz.png',
						name:'收货地址',
					},
					{
						key:2,
						img:'../../static/image/kc.png',
						name:'我的课程',
					},
					{
						key:3,
						img:'../../static/image/yy.png',
						name:'我的预约',
					},
					{
						key:4,
						img:'../../static/image/kh.png',
						name:'我的客户',
					},
					{
						key:5,
						img:'../../static/image/sc.png',
						name:'我的收藏',
					},
					{
						key:6,
						img:'../../static/image/tj.png',
						name:'提成统计',
					},
					{
						key:7,
						img:'../../static/image/pk.png',
						name:'我的排课',
					},
					{
						key:8,
						img:'../../static/image/tj.png',
						name:'课时统计',
					},
					{
						key:9,
						img:'../../static/image/xs.png',
						name:'销售信息',
					},
					{
						key:10,
						img:'../../static/image/cdfy.png',
						name:'场地费用',
					},
					{
						key:11,
						img:'../../static/image/jlfy.png',
						name:'教练费用',
					},
					{
						key:12,
						img:'../../static/image/yyjl.png',
						name:'预约学员',// 教练
					},
					{
						key:13,
						img:'../../static/image/yyjl.png',
						name:'预约学员',// 店长
					},
					{
						key:14,
						img:'../../static/image/qd.png',
						name:'学员签到',// 教练/顾问
					},
					{
						key:99,
						img:'../../static/image/tc.png',
						name:'退出登录',
					},
				],
			};
		},
		onLoad() {
			this.getmember();
		},
		onShow() {
			if(myCache("ifuserEdit"))
			{
				myCache("ifuserEdit",false)
				this.getmember();
			}
			else{
				this.openId = myCache('openId');
				var user = myCache('userInfo');
				this.userid = user.userId? user.userId:'';
				this.avatar = user.avatar?user.avatar:'../../static/image/logo.png';
				this.nickName= user.nickName? user.nickName:'';
				this.phone = user.phonenumber;
				this.signature = user.signature;
				this.roleId=user.roleId?user.roleId:[];
			}
			
			// 购物车数量
			var cartnum=getcartNum();
			if(cartnum>0){
				// 底部菜单消息角标
				uni.setTabBarBadge({
					//显示未读消息条数
				    index: 4,
				    text: cartnum+''
				});
			}
			else{
				uni.removeTabBarBadge({
					index: 4
				})
			}
			
			if(this.userid){
				// 获取订单数、收藏数等
				this.getnum();
			}
			else{
				this.menus[0].num=0;
				this.menus[1].num=0;
				this.menus[2].num=0;
				this.menus[3].num=0;
				this.favoritesnum=0;// 我的收藏
				this.$forceUpdate();
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		// onTabItemTap(){
		// 	console.log('界面关闭socket，onTabItemTap');
		// 	// 在组件销毁前，确保关闭 WebSocket 连接
		// 	uni.closeSocket();
		// },
		methods: {
			ifview(value){
				// 描述：角色ID；顾问：103 ；教练：104 ；店长：105 ；普通用户：107；
				var str=false;
				var arrs= value.split(',');
				this.roleId.forEach(item=>{
					arrs.forEach(cell=>{
						if(item==cell)
						{
							str=true;
							return true;
						}
					});
				});
				return str;
			},
			gotoHome(){
				// 跳转 首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goservice(val){
				console.log(val);
			},
			async getnum(){
				
				const {data: res} = await uni.$http.get('/api/order/countOrder');
				if(res){
					this.menus[0].num=res.unpaid?res.unpaid:0;//待付款订单数量
					this.menus[1].num=res.nosend?res.nosend:0;//待发货订单数量
					this.menus[2].num=res.noget?res.noget:0;//待收货订单数量
					this.menus[3].num=res.aftersale?res.aftersale:0;// 售后订单数量
					this.$forceUpdate();
				}
				
				const {data: res1} = await uni.$http.get('/api/userFavorite/getUserFavoriteCount');
				if(res1&&res1.data){
					this.favoritesnum=res1.data?res1.data:0;
					this.$forceUpdate();
				}
			},
			// 获取用户基本信息
			async getmember() {
				const { data: res } = await uni.$http.get("/api/my/myInformation");
				if (res&&res.data) {
					var data=res.data;
					this.avatar = (data.avatar ? data.avatar: '../../static/image/logo.png');
					this.nickName = data.nickName ? data.nickName :'默认昵称';
					this.signature = data.signature ? data.signature :'';
					this.$forceUpdate();
				}
			},
			async gotoServe(ii){
				var that =this;
				console.log(ii)
				if(ii==0){
					// 设置
					uni.navigateTo({
						url: `/pages/user/set`
					});
				}
				else if(ii==1){
					// 收货地址
					uni.navigateTo({
						url: `/pages/address/alist`
					});
				}
				else if(ii==2){
					// 我的课程
					uni.navigateTo({
						url: '/pages/user/courselist'
					});
				}
				else if(ii==3){
					// 我的预约
					uni.navigateTo({
						url: '/pages/book/booklist'
					});
				}
				else if(ii==4){
					// 我的客户
					if(this.userid==""||this.userid=="0"){
						this.$refs.loginId.open();
					}
					else{
						uni.navigateTo({
							url: `/pages/user/mycustom`
						});
					}
				}
				else if(ii==5){
					// 我的收藏
					if(this.userid==""||this.userid=="0"){
						this.$refs.loginId.open();
					}
					else{
						uni.navigateTo({
							url: `/pages/user/mycollect`
						});
					}
				}
				else if(ii==6){
					// 提成统计
					uni.navigateTo({
						url: `/pages/user/tclist`
					});
				}
				else if(ii==7){
					// 我的排课
					uni.navigateTo({
						url: `/pages/user/mycourse`
					});
				}
				else if(ii==8){
					// 课时统计
					uni.navigateTo({
						url: `/pages/user/kslist`
					});
				}
				else if(ii==9){
					// 销售信息
					uni.navigateTo({
						url: `/pages/user/xslist`
					});
				}
				else if(ii==10){
					// 场地销售
					uni.navigateTo({
						url: `/pages/user/cdlist`
					});
				}
				else if(ii==11){
					// 教练费用
					uni.navigateTo({
						url: `/pages/user/jslist`
					});
				}
				else if(ii==12){
					// 预约学员-教练
					uni.navigateTo({
						url: `/pages/book/bookteacher`
					});
				}
				else if(ii==13){
					// 预约学员-店长
					uni.navigateTo({
						url: `/pages/book/bookshop`
					});
				}
				else if(ii==14){
					// 学员签到
					this.scando();
				}
				else if(ii==99){
					// 退出登录
					uni.showModal({
						title: '提示',
						content: '确定要退出登录吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
								
								// 清除登录缓存
								this.openId = "";
								this.phone = "";
								this.avatar = "../../static/image/logo.png";
								this.userid = "";
								this.nickName = "";
								this.signature = "";
								this.userInfo={
									id:'',
									avatar: "../../static/image/logo.png",
									nickName: "",
									phone: "",
									isauth:0,
								};
								this.$forceUpdate();
								
								// 清除缓存
								myCache('token','');
								myCache('user','');
								myCache('userInfo','');
								myCache('phone','');
								myCache('openId','');
								myCache('userid',''); 
								// 门店信息退出
								myCache('shop',''); 
								myCache('myshop',''); 
								myCache('myshopid',''); 
								myCache('shoplist',''); 
								
								// 订单信息数字清除
								this.menus[0].num=0;
								this.menus[1].num=0;
								this.menus[2].num=0;
								this.menus[3].num=0;
								this.favoritesnum=0;// 我的收藏
								
								// 清空购物车
								var cartnum=getcartNum();
								if(cartnum>0){
									// 底部菜单消息角标
									uni.setTabBarBadge({
										//显示未读消息条数
									    index: 4,
									    text: cartnum+''
									});
								}
								else{
									uni.removeTabBarBadge({
										index: 4
									})
								}
								
								this.$refs.uToast.show({
									title: '已退出登录！',
									type: 'warning',
									duration: 2000
								});
							}
						}
					});
				}
				else if(ii==13){
					// 注销账号
					uni.showModal({
						title: '提示',
						content: '确定要注销账号吗？账号注销后,您的账号将无法恢复！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
								that.logoff();
							}
						}
					});
				}
			},
			// 学员签到扫码
			scando(){
				var _this=this;
				// 允许从相机和相册扫码
				//qrCode,barCode
				// #ifdef APP-PLUS
				uni.scanCode({
					scanType: ['qrCode', 'barCode'],
					success: function(res) {
						console.log(res);
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// 入库扫码内容确认
						var rmbm=res.result;
						console.log(rmbm);
						if(rmbm){
							// 预约详情
							uni.navigateTo({
								url: `/pages/book/bookinfo?id=${rmbm}&type=qd`
							});
						}
						else{
							uni.showModal({
								title: '提示',
								content: '扫码异常，请正确扫码绑定推广员！',
								cancelText: '取消',
								confirmText: '确定',
								success: ress => {
									if (ress.confirm) {
									}
								}
							});
						}
					}
				});
				// #endif
			},
			
			async logoff(){
				uni.showLoading({
					title: '账号注销中...'
				});
				var params = {
					phone: this.phone
				};
				const {data: res} = await uni.$http.post('/appiso/deleteBuyer',params);
				console.log("账号注销返回",res)
				if (res) {
					// 清除登录缓存
					this.openId = "";
					this.phone = "";
					this.avatar = "";
					this.userid = "";
					this.nickName = "";
					this.userInfo={
						id:'',
						avatar: "../../static/image/logo.png",
						nickName: "",
						phone: "",
						isauth:0,
					};
					myCache('user','');
					myCache('userInfo','');
					myCache('phone','');
					myCache('openId','');
					myCache('userid',''); 
					
					uni.showModal({
						title: '提示',
						content: '账号已注销！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
							}
						}
					});
				}
				else{
					uni.showModal({
						title: '提示',
						content: '账号注销失败！请稍后再试！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
							}
						}
					});
				}
			},
			getPhoneNumber(e){
				if(e.userid){
					this.userid = e.userid
				}
			},
			logindo(){
				if(this.userid==""||this.userid=="0"){
					// this.$refs.loginId.open();
					uni.navigateTo({
						url: `/pages/login/login`
					});
				}
				else{
					// 已经登录
				}
			},
			gotoEdit(){
				uni.navigateTo({
					url: `/pages/user/userEdit`
				});
			},
			gotoPwd(){
				if(this.userid==""||this.userid=="0"){
					this.$refs.loginId.open();
				}
				else{
					uni.navigateTo({
						url: `/pages/user/pwdset`
					});
				}
			},
			navToList(id){
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
			gotoOrder(key){
				if(this.userid==""||this.userid=="0"){
					this.$refs.loginId.open();
				}
				else{
					uni.navigateTo({
						url: `/pages/order/orderlist?id=${key}`
					});
				}
			},
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight'];
			},
			// 获取导航栏高度
			getNavBarHeight(){
				return 45+uni.getSystemInfoSync()['statusBarHeight'];
			},
		}
	}
</script>

<style lang="less" 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));
	}
	.fixhead{ 
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 105rpx;
		line-height: 100rpx;
		align-items: center;
		background-color: #00a89b;
		padding-left: 20rpx;
		.tx1{
			font-size: 32rpx;
			font-weight: 600;
			color:#fff;
		}
		.tline{
			width: 1rpx;
			background-color: #fff;
			height: 30rpx;
			margin: auto 20rpx;
		}
	}
	.hcon{
		margin: 0;
		padding: 20rpx 20rpx 20rpx 20rpx;
		display:flex;
		flex-direction: column;
		/* 猜你喜欢 */
		.h-header{
			position: relative;
			display:flex;
			align-items:center;
			padding: 10rpx 0;
			image{
				flex-shrink: 0;
				width: 120rpx;
				height: 120rpx;
				margin-left: 15rpx;
				border-radius: 50% 50%;
			}
			.tit-box{
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				justify-content: center;
			}
			.tit{
				font-size: 28rpx;
				font-weight: 600;
				color: #000;
				line-height: 1.8;
			}
			.titm{
				font-size: 26rpx;
				color: #59595b;
				line-height: 1.8;
			}
			.btn{
				width: 150rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #FFF;
				font-size: 24rpx;
				background: #619af7;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text-align: center;
			}
			.ebtn{
				padding: 6rpx 18rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: #888;
				background: #e4f9f7;
			}
			
			.scan{
				position: absolute;
				height: 50rpx;
				line-height: 50rpx;
				top:56rpx;
				right: 56rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.simg{
					width: 50rpx;
					height: 50rpx;
				}
				.sname{
					color: #000;
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}
			
		}
		.h-bocon{
			display:flex;
			flex-direction: column;
			padding: 45rpx 40rpx 20rpx 36rpx;
			.barcon{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 10rpx;
				.sign{
					display: flex;
					flex-direction: row;
					align-items: center;
					.simg{
						width: 32rpx;
						height: 30rpx;
					}
					.stxt{
						color: #fff;
						font-size: 28rpx;
						margin-left: 12rpx;
					}
				}
				.gosign{
					display: flex;
					flex-direction: row;
					align-items: center;
					.simg{
						width: 40rpx;
						height: 40rpx;
					}
					.stxt{
						color: #fff;
						font-size: 28rpx;
						margin-left: 12rpx;
					}
				}
			}
			.scan{
				display: flex;
				flex-direction: row;
				align-items: center;
				.simg{
					width: 40rpx;
					height: 40rpx;
				}
				.sname{
					color: #fff;
					font-size: 26rpx;
					margin-left: 12rpx;
				}
			}
		}
		 
		.mcon{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			margin-top: 20rpx;
			.mcell{
				width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.mnum{
					color: #fff;
					font-weight: 600;
					font-size: 30rpx;
				}
				.mtxt{
					color: #fff;
					font-size: 26rpx;
					margin-top: 15rpx;
				}
			}
		}
	}
	.s-list{
		margin: 10rpx 20rpx 25rpx 20rpx;
		padding: 20rpx 0 8rpx 0;
		background: #FFF;
		background-image: radial-gradient(#f5f5f5, #ffffff, #f0f0f0);
		border-radius: 20rpx;
		// box-shadow:1px 3px 5px 2px rgba(0, 0, 0, 0.08),0 5px 5px rgba(0, 0, 0, 0.06),-5px 0 6px #f7f7f7,inset 0 0 5px #f7f7f7,inset 5px 0 5px #f7f7f7;
		box-shadow:0 1px 3px 2px rgba(0, 0, 0, 0.03),inset 0 30px 15px #f5f5f5;
		border-radius: 20rpx;
		.scroll-view_H{
			width: 100%;
			padding: 16rpx 20rpx 0 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			text-align: left;
			.product-item{
				position: relative;
				display: inline-block;
				overflow: hidden;
				width: 25%;
				margin: 0 0 20rpx 0;
				text-align: center;
			}
			.image-wrapper1{
				width: 84rpx;
				height: 84rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
				.imgicon{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
				margin: 0 auto;
			}
			.image-wrapper{
				width: 64rpx;
				height: 64rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				margin: 0 auto;
				image{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
				.imgicon{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}
			.num{
				position: absolute;
				top:0;
				right: 36rpx;
				min-width: 30rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding: 0 2rpx;
				border-radius: 32rpx;
				background-color: #ff0000;
				color: #FFF;
				font-size: 22rpx;
			}
			.title{
				line-height: 60rpx;
				color: #666;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 0 auto;
			}
		}
	}
	.s-header{
		display:flex;
		flex-direction: row;
		align-items:center;
		height: 80rpx;
		line-height: 80rpx;
		padding: 10rpx 0;
		margin: 0 36rpx 20rpx;
		border-bottom: 1rpx solid #eeeeee;
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.tit{
			font-size: 28rpx;
			color: #000;
			line-height: 1.3;
			font-weight: 600;
		}
		.tit2{
			font-size: 23rpx;
			color: #666;
			margin-left: 30rpx;
			display: flex;
			flex: 1;
			justify-content: flex-end;
			align-items: center;
		}
	}
	
</style>
