<template>
	<view class="guidecarOrderdetails">
		<view class="u-skeleton" v-if="isExsitGoods">
			<view style="width: 100%;background: #FFFFFF">
				<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:260px;">
					<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 class="is_share" v-if="g.share > 0" style="top:200px;">
					<image src="@/static/images/icon/WechatIMG424.png" style="width: 20px; margin-left: 12px; opacity: 1;height: auto;"
					 mode="widthFix" />
					<view style="
				          display: flex;
				          flex-direction: column;
				          margin-left: 8px;
				          font-size: 11px;
				          color: #fff;
				          opacity: 1;
				        ">
						<Text>即刻分享赚</Text>
						<Text>￥ {{ g.share }}</Text>
					</view>
				</view>
				<view class="is_share" v-if="g.myBuyCommission > 0">
					<image src="@/static/images/icon/WechatIMG424.png" style="width: 20px; margin-left: 12px; opacity: 1;height: auto;"
					 mode="widthFix" />
					<view style="
				          display: flex;
				          flex-direction: column;
				          margin-left: 8px;
				          font-size: 11px;
				          color: #fff;
				          opacity: 1;
				        ">
						<Text>即刻购买省</Text>
						<Text>￥ {{ g.myBuyCommission }}</Text>
					</view>
				</view>
			</view>
			<view class="g-info">
				<view class="g-name u-skeleton-rect" style="font-family: aa;">
					<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>
							<text v-if='g.car_type==5'>/人</text>
							<view class="sell u-skeleton-rect">
								<text class="oprice" v-if="setting.is_underline_price == 1">￥{{ g.original_price }}</text>
							</view>
						</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 :style="{'width':(windowWidth-20)+'px',height:'1px','margin-left':'10px'}"></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" style="justify-content: flex-start;">
								<u-rate :current="g.guide_score" active-color="#FEC471" inactive-color="#DDDDDD" active-icon="star"
								 inactive-icon="star-o" size="20" :disabled="true"></u-rate>
								<span style='font-size: 11px;color: #A8A8A8;margin-left: 5px;'>{{g.guide_score>0?g.guide_score.toFixed(1):'5.0'}}</span>
							</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;margin: 10px 0;">
				<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>
			</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;margin-top: 10px;padding: 10px;">
				<view class="row">
					<span class='skub_text'>服务类型</span>
					<view class="row" style="margin-left: 20px;">
						{{g.car_type_name}}
					</view>
				</view>
			</view>
			<view :style="{'width':(windowWidth-20)+'px',height:'1px','margin-left':'10px'}"></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 class="sku-box u-skeleton-rect" style="margin-top: 10px;" v-if="comments.length == 0 && setting.is_comment == 1">
				<view class="label">暂无评论信息</view>
			</view>
			<view class="comment" v-if="comments.length > 0" style="margin-top: 10px;">
				<view class="chead">
					<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-top: 10px;">
						<span>{{comments[0].CommentList[1].Content}}</span>
					</view>
					<view class="comment-dao" style="flex-wrap: wrap;" v-if="comments[0].CommentList[1].CommentImgList.length>0">
						<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.03);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>
		<view class="actionsheet" style="height:50px;">
			<view class="actionsheet-item" style="height: 50px;">
				<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.car_type==5? g.price*RideNum:g.price}}</text>
				</view>
				<text style='font-size: 12px;margin-left: 5px;' v-if="g.car_type==5">({{g.price}}*{{RideNum}})</text>
			</view>
			<view class='btnstyle' @click="goUrl()">
				<span style='margin-top: 14px;'>预订</span>
			</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',
				windowWidth: 0,
				Up: 0,
			}
		},
		onLoad(option) {
			if (option && option.GoodsId) {
				this.GoodsId = option.GoodsId
			}
			if (option && option.id) {
				this.GoodsId = option.id
			}
			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.Up) { //分享进入校园id
				uni.setStorageSync("Up", {
					Up: option.Up
				});
			}
			this.Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0; //用于分享出去的参数

			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 +
				"&Up=" + this.Up + '&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 + "&Up=" + this.Up +
					'&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 +
					"&Up=" + this.Up + '&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'
				}
			})
			this.windowWidth = this.$utils.SystemInfo().windowWidth
		},
		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;
							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() < 10) ? "0" + myDate.getHours() : myDate.getHours(); //时
				obj.minute = (myDate.getMinutes() < 10) ? "0" + myDate.getMinutes() : 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: 60px;
	}

	.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;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.guidecarOrderdetails .g-info .g-price-box .left .price .small {
		font-size: 16px;
		margin-bottom: 3px;
	}

	.guidecarOrderdetails .btnsmall {
		font-size: 16px;
		margin-left: 8px;
		margin-bottom: 2px;
	}

	.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;
		margin-left: 10px;
		margin-bottom: 2px;
	}

	.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 {
		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;
	}

	.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;
		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;
		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;
	}

	.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;
	}

	.guidecarOrderdetails .screen-swiper {
		min-height: 375upx;
	}

	.guidecarOrderdetails .screen-swiper image,
	.guidecarOrderdetails .screen-swiper video {
		width: 100%;
		display: block;
		height: 100%;
		margin: 0;
		pointer-events: none;
	}

	.guidecarOrderdetails .comment .chead {
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		width: 100%;
	}

	.guidecarOrderdetails .is_share {
		width: 120px;
		height: 45px;
		border-top-left-radius: 22.5px;
		border-bottom-left-radius: 22.5px;
		background: #111;
		opacity: 0.8;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		top: 260px;
		right: 0;
	}
</style>
