<template>
	<view class="guidecarOrderdetails" :style="{'height':contentHeight}" >
		<view class="u-skeleton" v-if="isExsitGoods">
			<view style="width: 100%;background: #FFFFFF;padding-bottom:5px ;">
				<view class="g_top">
					<view class="row">
						<u-icon name="location" :size="32" color="#EE4454"></u-icon>
						<span>{{Pickcar}}</span>
						<view style="width: 2px;color: #E7E7E7;height: 20px;margin:0 10px;"></view>
					</view>
					<view class='row' style="justify-content: space-between;width: 220px;">
						<view class="topB" @click="">
							<span class='ztext'>{{STime.month}}月{{STime.day}}日</span>
							<span class='titext'>{{STime.week+' '+STime.hour+':'+STime.minute}}</span>
						</view>
						<view class="topB" style="height: 20px;align-items: center;">
							<span style='font-size: 11px;color: #1C1E1F;'>{{intervalDay}}</span>
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/sanjiao.png" mode="aspectFill" style="width: 55px;height: 4px;"></image>
						</view>
						<view class="topB" @click="">
							<span class='ztext'>{{ETime.month}}月{{ETime.day}}日</span>
							<span class='titext'>{{ETime.week+' '+ETime.hour+':'+ETime.minute}}</span>
						</view>				
					</view>
				</view>
			</view>
			
	
			<view class="u-skeleton-rect">
				<swiper
				  indicator-dots
				  :autoplay="false"
				  :interval="1000"
				  style="height:200px;"
				>
				  <block v-for="(item, index) in g.pic_url" :key="index">
					<swiper-item>
					  <video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
					   :autoplay="false" loop muted show-play-btn :enable-progress-gesture="true" 
					   :controls="true" :show-progress="true" :show-mute-btn="true" objectFit="cover"></video>
					   <image @click="previewImage(index)" style="width:100%;height:100%;" v-else :src="item.pic_url" mode=""></image>
					</swiper-item>
				  </block>
				</swiper>
			</view>
			<view class="g-info">
			  <view class="g-name u-skeleton-rect">
			    <view
			      v-if="g.marketingLogo.iswords&&g.marketingLogo.iswords==1 && g.marketingLogo.words!=''"
			      class="Logo"
			      :style="{color: g.marketingLogo.wordsColor,
											background:g.marketingLogo.wordsBack ,}"
			    >{{g.marketingLogo.words}}</view>
			    <image
			      v-if="g.marketingLogo.iswords&&g.marketingLogo.iswords==2&& g.marketingLogo.ico!=''"
			      mode="heightFix"
			      :src="g.marketingLogo.ico"
			      style=" height: 12px;margin-right: 5px"
			    />
			    {{ g.name }}
			  </view>
			  <view class="g-price-box">
			    <view class="left">
			      <view class="price u-skeleton-rect" :style="{ color: mc }">
			        <text class="small">￥</text>
			        <text
			          class="numfont"
			        >{{ g.price}}</text>
					
			      </view>
				  <view class="sell u-skeleton-rect">
				    <text class="oprice" v-if="setting.is_underline_price == 1">{{ g.original_price }}</text>
				  </view>
			    </view>
			   <view class="right u-skeleton-rect" @click="openShare" v-if="isAllowShare == 1">
			      <image src="@/static/images/icon/icon-share.png" class="share-icon" />
			      <text>分享</text>
			    </view>
			  </view>
			</view>
			<view class="sku-box" style="justify-content: space-between;" @click="goguide(1)">
				<view class="row">
					<span class='skub_text'>导游信息</span>
					<view class="row" style="margin-left: 20px;">
						<u-avatar :src="g.guide_photo" :size="68" style='margin-right: 5px;'></u-avatar>
						<view class="column" style="height: 36px;justify-content: space-between;">
							<view class="row">
								<span>{{g.guide_name}}</span>
								<view class="guiyears">工龄{{g.guide_workyears}}年</view>
							</view>
							<view class="row">
								<u-rate
								  :current="g.guide_score"
								  active-color="#FF8C10"
								  inactive-color="#b2b2b2"
								  active-icon="star"
								  inactive-icon="star-o"
								  size="20"
									:disabled="true"
								></u-rate>
							</view>
							
						</view>
					</view>
				</view>
				<u-icon name="arrow" :size="32" color="#111"></u-icon>
				
			</view>
			<view class="sku-box u-skeleton-rect" style="align-items: flex-start;">
			  <view class="label" style="margin-top: 5px;">活动</view>
			  <view class="content" style="display: flex;flex-direction: column">
			    <view
			      style="display: flex;flex-direction: row;align-items: center;margin-bottom: 5px;"
			      v-if="g.goods_marketing_award.integral.title != ''"
			    >
			      <u-tag text="送积分" type="error" />
			      <text
			        style="margin-left: 5px; font-size: 12px;"
			      >{{ g.goods_marketing_award.integral.title }}</text>
			    </view>
			   <!-- <view
			      style="display: flex;flex-direction: row;align-items: center"
			      v-if="g.goods_marketing_award.PresentFXGradeMsg != ''"
			      @click="goVIP"
			    >
			      <u-tag text="送会员" type="error" />
			      <text
			        style="margin-left: 5px; font-size: 12px;"
			      >{{ g.goods_marketing_award.PresentFXGradeMsg }}</text>
			    </view> -->
			
	
			  </view>
			</view>
			<view class="sku-box" style="justify-content: space-between;" @click="goguide(2)">
				<view class="row">
					<span class='skub_text'>车辆信息</span>
					<view class="row" style="margin-left: 20px;">
						{{g.car_name}}
						<view class="carxinx" v-if="g.car_model!=''">{{g.car_model}}</view>
					</view>
				</view>
				<u-icon name="arrow" :size="32" color="#111"></u-icon>
				
			</view>
			
			<view class="sku-box" style="justify-content: space-between;">
				<view class="row">
					<span class='skub_text'>服务类型</span>
					<view class="row" style="margin-left: 20px;">
						{{g.car_type_name}}
					</view>
				</view>
			</view>
			<view class="sku-box" style="justify-content: space-between;">
				<view class="row">
					<span class='skub_text'>是否拼坐</span>
					<view class="row" style="margin-left: 20px;">
						{{g.is_spell==1?'是':'否'}}
					</view>
				</view>
				
			</view>
		</view>
		<view style="width: 100%;height: 10px;background: #f5f5f5;"></view>
		<view class="sku-box u-skeleton-rect" v-if="comments.length == 0 && setting.is_comment == 1">
		  <view class="label">暂无评论信息</view>
		</view>
		<view v-if="comments.length > 0">
		  <view class="chead" style="padding: 10px;">
		    <u-section
		      :bold="false"
		      :sub-color="secondary"
		      :show-split="false"
		      :title="`商品评价(${comments.length})`"
		      sub-title="查看更多"
		      @click="clickCommentHandler"
		      font-size="24"
		    ></u-section>
		  </view>
		  <view class="comment">
			  <view class="comment-dao" style="justify-content: space-between;">
			  	<view style="display: flex;flex-direction: row;align-items: center;">
			  		<u-avatar :src="comments[0].UserPhotoPath" :size="50"></u-avatar>
			  		<span style='font-size: 14px;color: #000000;width: 200rpx; margin-left: 10px;
			  			overflow: hidden;
			  			white-space: nowrap;
			  			text-overflow: ellipsis;
			  			font-weight: bold;'>
			  			{{comments[0].UserName}}
			  		</span>
			  	</view>
			  	<span style='font-size: 12px;color: #AAAAAA;'>{{comments[0].CommentList[0].CreateDate}}</span>
			  </view>
			<view class="comment-dao" >
				<u-rate
				  :current="comments[0].CommentList[0].CommentScore"
				  active-color="#FF4442"
				  inactive-color="#b2b2b2"
				  active-icon="star"
				  inactive-icon="star-o"
				  size="20"
					:disabled="true"
				></u-rate>
				<span style='font-size: 11px;color: #565656;margin-left: 15px;'>导游:{{comments[0].CommentList[1].GuideName}}</span>
			</view>
			<view class="comment-dao" style="padding: 10px 0;">
				<span>{{comments[0].CommentList[1].Content}}</span>
			</view>
			<view class="comment-dao" style="flex-wrap: wrap;">
				<image
				v-for="(item, index) in comments[0].CommentList[1].CommentImgList" :key="index"
				  mode="aspectFill"
				  :src="item"
				  @click="previewImage2(index,comments[0].CommentList[1].CommentImgList)"
				  :style="{'width':san,'height':san}"
				/>
			</view>
			<view style="width: 100%;height: 1px;background: rgba(0, 0, 0, 0.1);margin: 10px 0;"></view>
		      
		      <view class="comment-dao" >
		      	<u-rate
		      	  :current="comments[0].CommentList[0].CommentScore"
		      	  active-color="#FF4442"
		      	  inactive-color="#b2b2b2"
		      	  active-icon="star"
		      	  inactive-icon="star-o"
		      	  size="20"
		      		:disabled="true"
		      	></u-rate>
		      	<span style='font-size: 11px;color: #565656;margin-left: 15px;'>{{comments[0].CommentList[0].CarBrandName}},{{comments[0].CommentList[0].CarColorName}}</span>
		      </view>
		      <view class="comment-dao" style="padding: 10px 0;">
		      	<span>{{comments[0].CommentList[0].Content}}</span>
		      </view>
		      <view class="comment-dao" style="flex-wrap: wrap;">
		      	<image
		      	v-for="(item, index) in comments[0].CommentList[0].CommentImgList" :key="index"
		      	  mode="aspectFill"
		      	  :src="item"
				  @click="previewImage2(index,comments[0].CommentList[0].CommentImgList)"
		      	  :style="{'width':san,'height':san}"
		      	/>
		      </view>
		  </view>
		</view>
		<view class="actionsheet" :style="{ 'padding-bottom': bian ? '28px' : '0px' }">
			<view class="actionsheet-item" style="height: 100%;">
				<view style="width: 22px; margin: auto;margin-left: 15px;"><u-icon name="service-o" size="44" color="#4578FF"></u-icon></view>
				<text style="color: #727272;font-size: 12px;margin-left: 3px;">客服</text>
				<button style='position: absolute;left: 10px;top:0;opacity: 0;width: 50px;' open-type="contact" :send-message-title="g.name" :send-message-path="path" :send-message-img="g.pic_url[0].pic_url" :show-message-card="true">0</button>
				<view style="width: 2px;height: 70%;background: #FAF8F9;margin: 0 10px;"></view>
				<span style='font-size: 12px;'>总价</span>
				<view style='display: flex;flex-direction: row;align-items: flex-end;'>
					<text class="btnsmall" :style="{ color: mc }">￥</text>
					<text
					  class="btnnumfont" :style="{ color: mc }"
					>{{ g.price*RideNum}}</text>
				</view>
				
				<text style='font-size: 12px;margin-left: 5px;'>({{g.price}}*{{RideNum}})</text>
			</view>
			<view class='btnstyle' @click="goUrl()">
				预订
			</view>
		</view> 
		<u-skeleton v-if="loading" :loading="true" :animation="true" bgcolor="#FFF"></u-skeleton>
		<view style="width: 100%;height: 10px;background: #f5f5f5;"></view>
		<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">商品详情</u-divider>
		<view class="details">
		  <h-parse :content="detailContent" @navigate="clickDescription"></h-parse>
		</view>
		<share
		  :good-id="GoodsId"
		  :address='address'
		  :pickcar='Pickcar'
		  :startTime='StartTime'
		  :endTime='EndTime'
		  v-if="showShare"
		  :good-name="g.name"
		  :images="g.pic_url"
		  :advertising="g.advertising"
		  @close="closeShare"
		></share>
		<coupon
		  v-if="showCoupons"
		  :coupon-message="couponMessage"
		  @goLook="goLook"
		  @closeBtn="closeBtn"
		></coupon>
	</view>
</template>

<script>
	import hParse from "@/components/u-parse/parse.vue";
	import share from "./components/guidecarShare.vue";
	import coupon from "@/components/coupons/coupons";
	export default {
		components: {
		  hParse,
		  share,
		  coupon
		},
		data() {
			return {
				loading: true,
				pageTitle: "详情",
				GoodsId:367468,
				g:{},
				imgs:[],
				isExsitGoods: true,
				mc:{},
				setting: {},
				detailContent:'',
				isAllowShare:1,
				showShare: false,
				comments: [],
				bian: false,
				path:'',
				STime:{},
				ETime:{},
				intervalDay:'',
				address:'',
				Pickcar:'',
				StartTime:"",
				EndTime:'',
				couponMessage: "",//弹出优惠券的内容
				showCoupons: false,
				SmallShopId:0,//分享微店id
				uid:0,//分享的上级id
				RideNum:1,//出行人数
				contentHeight:0,
				san:'100px',
			}
		},
		onLoad(option){
			console.log(option,'option')
			
			if(option && option.GoodsId){
				this.GoodsId = option.GoodsId
			}
			if (option && option.custom_params) {
			  let custom_params = JSON.parse(decodeURIComponent(option.custom_params));
			  console.log(custom_params);
			  if (custom_params.user_id) {
			    uni.setStorageSync("pid", { pid: custom_params.user_id });
			  }
			}
			if (option && option.user_id) {
			  uni.setStorageSync("pid", { pid: option.user_id });
			}
			if (option && option.SmallShopId) {
			  uni.setStorageSync("SmallShopId", { SmallShopId: option.SmallShopId });
			}
			if(option && option.address){
				this.address = option.address
			}
			if(option && option.Pickcar){
				this.Pickcar = option.Pickcar
			}
			if(option && option.RideNum){//出行人数
				this.RideNum = option.RideNum
			}
			if(option && option.StartTime){
				this.STime = this.getTime(option.StartTime)
				this.StartTime= option.StartTime
			}
			if(option && option.EndTime){
				this.ETime = this.getTime(option.EndTime)
				this.EndTime= option.EndTime
			}
			
			if(option&& option.StartTime && option.EndTime){
				let startTime = new Date(option.StartTime); // 开始时间
				let endTime = new Date(option.EndTime); // 结束时间
				let usedTime = endTime - startTime; // 相差的毫秒数
				let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
				let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
				let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
				
				if(days>0){
					if(leavel>0){
						this.intervalDay=days+1+'天'
					}else{
						this.intervalDay=days+'天'
					}
				}else{
					if(hours>=6){
						this.intervalDay='1天'
					}else{
						this.intervalDay='半天'
					}
				}
			}
			
			this.init()//商品详情
			this.getAppletGoodsCommentPageList()//获取商品评论数
			
			let u = uni.getStorageSync("mall_UserInfo");
			this.uid = u.UserId ? u.UserId : 0;
			this.SmallShopId = uni.getStorageSync("mall_UserInfo")? uni.getStorageSync("mall_UserInfo").SmallShopId: 0;
					if(this.SmallShopId == 0){//如果微店id为0 去找所属微店id
						this.SmallShopId = uni.getStorageSync("mall_UserInfo")? uni.getStorageSync("mall_UserInfo").UserSmallShopId: 0;
					}
			this.path = "/pages/index/index?GoodsId=" + this.GoodsId + "&user_id=" + this.uid+ "&SmallShopId=" + this.SmallShopId+'&JumpType=3'
			+'&address='+encodeURIComponent(JSON.stringify(this.address))
			+'&Pickcar='+encodeURIComponent(JSON.stringify(this.Pickcar))
			+'&StartTime='+this.StartTime
			+'&EndTime='+this.EndTime;
			wx.showShareMenu({
			  withShareTicket: true,
			  menus: ["shareAppMessage", "shareTimeline"],
			});
		},
		onShareTimeline() {
		  setTimeout(() => {
		    console.log("分享朋友圈调用");
		    this.getReceive();
		  }, 2500);
		  
		  if(this.uid==0){
			this.uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
		  }
		  let title = this.g.app_share_title != null && this.g.app_share_title != ""
		      ? this.g.app_share_title: this.g.name;
		  let imageUrl =
		    this.g.app_share_pic != null && this.g.app_share_pic != ""? this.g.app_share_pic: this.g.pic_url[0].pic_url;
		  return {
		    title: title,
		    query: "GoodsId=" + this.GoodsId + "&user_id=" + this.uid+ "&SmallShopId=" + this.SmallShopId
			+'&address='+this.address
			+'&Pickcar='+this.Pickcar
			+'&StartTime='+this.StartTime
			+'&EndTime='+this.EndTime,
		    imageUrl: imageUrl,
		  };
		  
		},
		onShareAppMessage(res) {
		  setTimeout(() => {
		    console.log("分享好友调用");
		    this.getReceive();
		  }, 2500);
		  
			if(this.uid==0){
				this.uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
			}
		  return {
		    title: this.g.app_share_title != null && this.g.app_share_title != "" ? this.g.app_share_title : this.g.name,
		    path: "/pages/index/index?GoodsId=" + this.GoodsId + "&user_id=" + this.uid+ "&SmallShopId=" + this.SmallShopId+'&JumpType=3'
			+'&address='+encodeURIComponent(JSON.stringify(this.address))
			+'&Pickcar='+encodeURIComponent(JSON.stringify(this.Pickcar))
			+'&StartTime='+this.StartTime
			+'&EndTime='+this.EndTime,
		    imageUrl:
		      this.g.app_share_pic != null && this.g.app_share_pic != ""
		        ? this.g.app_share_pic
		        : this.g.pic_url[0].pic_url,
		  };
		},
		
		created(){
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.setting = uni.getStorageSync("basedata").mall.setting;
			 this.bian = this.$uiConfig.is_bang
			 let that = this
			 uni.getSystemInfo({
			 	success(res) {
			 		console.log(res)
					that.san = (res.windowWidth-20)/3+'px'
			 	}
			 })
			 
		},
		mounted() {
			
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		methods: {
			//图片预览
			previewImage2(index, images) {
			  uni.previewImage({
			    urls: images,
			    current: index,
			  });
			},
			init(){
				this.loading = true;
				uni.showLoading({
				  title: "加载中",
				});
				this.request2(
					{
						url: '/api/AppletGuideCar/GetAppletSDGoodsInfo',
						data: {
							GoodsId:this.GoodsId
						}
					},
							
				  (res) => {
					if(res.resultCode == 1){
						uni.hideLoading();
						this.g = res.data.goods;	
						this.g.pic_url.forEach((x) => {
						  this.imgs.push(x.pic_url);
						});
						this.g.marketingLogo = JSON.parse(this.g.marketingLogo);
						this.isAllowShare = res.data.goods.isAllowShare; //1为可以分享 2为不能分享
						if (this.isAllowShare == 2) {
						  //隐藏分享的按钮
						  wx.hideShareMenu({
						    menus: ["shareAppMessage", "shareTimeline"],
						  });
						}
						var richtext = this.g.detail;
						//          richtext = richtext.replace(
						//   /<img/g,
						//   '< img style="margin-top:-4px;width:100%"'
						// );
						this.detailContent = richtext;
						this.loading = false;
					}else{
						this.isExsitGoods = false;
						
					}
					 
				  }
				);
			},
			getTime(time){
			   let myDate = new Date(time);
			   let obj = {}
				obj.year = myDate.getFullYear(); //年
				obj.month = myDate.getMonth() + 1; //月
				obj.day = myDate.getDate(); //日
				obj.hour = myDate.getHours(); //时
				obj.minute = myDate.getMinutes(); //分
				let days = myDate.getDay();
				obj.week = this.getweek(days)//星期几
				return obj
			},
			getweek(day){//根据值返回当前时间的星期几
				if(day==1){
					return '星期一'
				}else if(day==2){
					return '星期二'
				}else if(day==3){
					return '星期三'
				}else if(day==4){
					return '星期四'
				}else if(day==5){
					return '星期五'
				}else if(day==6){
					return '星期六'
				}else if(day==0){
					return '星期日'
				}
			},
			getAppletGoodsCommentPageList(){
				this.request2(
					{
						url: '/api/AppletGuideCar/GetAppletGoodsCommentPageList',
						data: {
							GoodsId:this.GoodsId,
							pageIndex:1,
							pageSize:99,
							CommentGrade:0,
						}
					},
				  (res) => {
					this.comments = res.data.pageData;
				  }
				);
			},
		
			clickDescription(e) {
			  console.log(e);
			},
			//点击跳转
			startPlay(item){
				uni.navigateTo({ url: '/pages/video/index?GoodsId='+this.id+'&VideoUrl='+item.pic_url })
			},
			previewImage(i) {
			  uni.previewImage({
			    urls: this.imgs,
			    current: i,
			    longPressActions: {
			      itemList: ["发送给朋友", "保存图片", "收藏"],
			      success: function (data) {
			        console.log(
			          "选中了第" +
			            (data.tapIndex + 1) +
			            "个按钮,第" +
			            (data.index + 1) +
			            "张图片"
			        );
			      },
			      fail: function (err) {
			        console.log(err.errMsg);
			      },
			    },
			  });
			},
			closeShare() {
			  this.showShare = false;
			},
			openShare() {
				  this.showShare = true;
			},
			goguide(type){//跳转导游详情
				uni.navigateTo({
					url:'/pages/guidecar/guidedetails?g='+encodeURIComponent(JSON.stringify(this.g))+'&type='+type
				})
			},
			clickCommentHandler(){//跳转评论列表
				uni.navigateTo({
					url:'/pages/guidecar/guidercarCommentList?GoodsId='+this.GoodsId
				})
			},
			//跳转
			goUrl(){
				uni.navigateTo({
					url:'/pages/guidecar/place_order?GoodsId='+this.GoodsId+'&Number='+this.RideNum+'&ShoppingAddress='+this.address+
					'&StartTime='+this.StartTime+
					'&EndTime='+this.EndTime
					
					
				})
			
				
			},
			getReceive() {
			  //分享进入调取领券接口
			  // 1-分享，2-购买并付款
			  this.request2(
			    {
			      url: "/api/AppletUser/ShareCoupon",
			      data: {
			        TriggerType: 1,
			      },
			    },
			    (res) => {
			      console.log(res, "res");
			      if (res.couponResultCode == 1) {
			        this.couponMessage = res.couponMessage;
			        this.showCoupons = true;
			      }
			    }
			  );
			},
			goLook() {
			  this.showCoupons = true;
			  uni.navigateTo({
			    url: "/pages/coupon/index/index",
			  });
			},
			closeBtn() {
			  this.showCoupons = false;
			},
		
		}
	}
</script>

<style>
.guidecarOrderdetails{
	height: 100%;
	background: #f5f5f5;
	padding-bottom: 55px;
}
.guidecarOrderdetails .g-info {
  background: #fff;
  padding: 10px;
}
.guidecarOrderdetails .g-name{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 16px;
	max-height: 45px;
}
.guidecarOrderdetails .Logo {
  padding: 1px 5px;
  display: inline-block;
  font-size: 22rpx;
  margin-right: 5rpx;
  border-radius: 4px;
}
.guidecarOrderdetails .g-info .g-price-box {
  display: flex;
  align-items: flex-end;
}
.guidecarOrderdetails .g-info .g-price-box .left {
  flex: 1;
  width: 1px;
}
.guidecarOrderdetails .g-info .g-price-box .left .price {
  margin: 15px 0;
  font-size: 24px;
  font-weight: bold;
  height: 31px;
}
.guidecarOrderdetails .g-info .g-price-box .left .price .small {
  font-size: 16px;
}
.guidecarOrderdetails .btnsmall{
	 font-size: 16px;
	 margin-left: 8px;
}
.guidecarOrderdetails .btnnumfont{
	font-size: 22px;
	font-weight: bold;
}
.guidecarOrderdetails .numfont {
  font-family: "oswald";
  font-weight: unset;
}
.guidecarOrderdetails .g-info .g-price-box .left .sell {
  font-size: 12px;
  color: gray;
}
.guidecarOrderdetails .g-info .g-price-box .left .sell .oprice {
  text-decoration: line-through;
  margin-right: 12px;
}
.guidecarOrderdetails .g-info .g-price-box .right {
  width: 30px;
  margin-left: 20px;
  height: 100%;
  font-size: 12px;
  color: #333;
}
.guidecarOrderdetails .g-info .g-price-box .right .share-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 12rpx;
}
.guidecarOrderdetails .sku-box {
  margin: 10px 0;
  background: #fff;
  display: flex;
  padding: 15px 10px;
  align-items: center;
}
.guidecarOrderdetails .sku-box .label {
  font-size: 12px;
  color: gray;
  margin-right: 15px;
}
.guidecarOrderdetails .details {
  padding: 10px;
  margin-bottom: 80px;
}
.guidecarOrderdetails .sku-box .content {
  width: 1px;
  flex: 1;
  color: #000;
  font-size: 12px;
}
.guidecarOrderdetails .sku-box .content .sku-chosen {
  display: flex;
  align-items: center;
}
.guidecarOrderdetails .sku-box .content .sku-chosen .arrow {
  width: 20px;
}
.guidecarOrderdetails .sku-box .content .sku-chosen .sku {
  font-size: 12px;
  width: 1rpx;
  flex: 1;
}
.guidecarOrderdetails .sku-box .content .suk-item {
  margin-top: 10px;
  display: flex;
}
.guidecarOrderdetails .sku-box .content .suk-item .item {
  margin-right: 5px;
  background: #f5f5f5;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 3px;
  overflow: hidden;
  color: #999;
}
.guidecarOrderdetails .sku-box .content .suk-item .item.img {
  padding: 0;
  width: 24px;
}
.guidecarOrderdetails .news{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0;
	padding: 15px 10px;
	background: #fff;
}
.guidecarOrderdetails .skub_text{
	font-size: 14px;
	color: #868686;
}
.guidecarOrderdetails .row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.guidecarOrderdetails .column{
	display: flex;
	flex-direction: column;
}
.guidecarOrderdetails .guiyears{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 1px 3px;
	background: #4578FF;
	font-size: 9px;
	color: #FFF;
	margin-left: 5px;
}
.guidecarOrderdetails .carxinx{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 1px 3px;
	background: #DBE4FF;
	font-size: 9px;
	color: #4578FF;
	margin-left: 5px;
}
.guidecarOrderdetails .actionsheet {
	display: flex;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 50px;
	align-items: center;
	justify-content: space-between;
}
.guidecarOrderdetails .actionsheet-item{
	display: flex;
	flex-direction: row;
	align-items: center;
	
}
.guidecarOrderdetails .btnstyle{
	width: 125px;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #FFF;
	background-image: linear-gradient(
	  to right,
	  #FF8585,
	  #EE4454
	);
}
.guidecarOrderdetails .g_top{
	width: 96%;
	height: 45px;
	border-radius: 22.5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	background: #FAF8F9;
	padding: 0 20px;
	
	margin: 10px 2%;
}
.guidecarOrderdetails .topB{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* align-items: center; */
	}
	.guidecarOrderdetails .titext{
		font-size: 22rpx;
		color: #929292;
	}
	.guidecarOrderdetails .ztext{
		font-size: 28rpx;
		color: #1C1E1F;
	}
	.guidecarOrderdetails .comment{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFF;
		padding:  10px;
	}
	.guidecarOrderdetails .comment-dao{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
</style>
