<template>
  <view class="goods">
    <view class="u-skeleton" v-if="isExsitGoods">
      <view class="u-skeleton-rect">
		<image :src="g.cover_pic" style='width: 100%;height: 230px;' mode="aspectFill"></image>
		
        <view class="is_share" v-if="g.share > 0" style="top:120px;">
          <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">
          <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-label">
			<view class="gl-left">
				<view class="gl-left-item" :style="{background:mc}" v-for="(x, i) in g.course_lable_list" :key="ci">
					{{x}}
				</view>
			</view>
			<view class="good-rb-box" >
			    <text class="good-rb-text">{{g.course_score!=null &&g.course_score>0?g.course_score.toFixed(1):'5.0'}}分</text>
				<u-rate
					:current="g.course_score!=null &&g.course_score>0?g.course_score:'5'"
					active-color="#FEC471" inactive-color="#DDDDDD"
					active-icon="star"
					inactive-icon="star-o"
					size="26"
					:disabled="true"
				></u-rate>
			  
			 </view>
		</view>
        <view class="g-price-box">
          <view class="left">
            <view class="price u-skeleton-rect" v-if=" g.price!=0" >
              <text class="small" :style="{ color: pricecolor }">￥</text>
              <text
                class="numfont" :style="{ color: pricecolor }"
              >{{ g.price }}</text>
			  <text class="oprice" v-if="setting.is_underline_price == 1 && (g.original_price>g.price)">{{ g.original_price }}</text>
            </view>
			<view v-else  class="price" :style="{'font-size': '16px','color': pricecolor}">免费</view>
            <view class="sell u-skeleton-rect">
             
              <text v-if="setting.is_sales == 1">{{ g.sales }}人学习过</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="teacher">
		  <view style="font-size: 14px;color: #1B1D1E;font-weight: bold;">授课老师</view>
		  <view class="teacher-list">
		  	<view class="teacher-item" v-for="(ti, i) in g.teacher_list" :key="i" @click="goteacher(ti)">
				<u-avatar :src="ti.teacher_logo" size="50"></u-avatar>
				<text style="font-size: 12px;color: #666666;margin: 0 5px;">{{ti.teacher_name}}</text>
				<u-icon name="arrow" :size="20" color="#666666"></u-icon>
			</view>
		  </view>
	  </view>
	  <view style="width: 100%;height: 10px;background: #FAF8F9;"></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>
      </view>
	<view style="width: 100%;height: 10px;background: #FAF8F9;"></view>
     
    
      <view class="tiaoti">
		  <view class="tiaoti-l"></view>
		  <text style="font-size: 16px;color: #1B1D1E;margin-left: 5px;">课程简介</text>
	  </view>
	  
      <view class="details">
        <!-- <rich-text :nodes="detailContent"  @click="clickDescription"></rich-text> -->
        <h-parse :content="detailContent" @navigate="clickDescription"></h-parse>
      </view>
	  
   
      <u-skeleton v-if="loading" :loading="true" :animation="true" bgcolor="#FFF"></u-skeleton>
	  <view class="tiaoti">
		<view class="tiaoti-l"></view>
		<text style="font-size: 16px;color: #1B1D1E;margin-left: 5px;">课程目录</text>
	  </view>
	  <view class="catalog">
		  <view class="catalog-box" v-for="(cl, ci) in courseList" :key="ci" @click="gocourse(cl,ci)">
			  <view class="catalog-box-l">
				  <view style="min-width: 40px;display: flex;">
					  <view class="cb-l-bt" >{{cl.TypeName}}</view>
				  </view>
				  
				  {{cl.SortName}}:{{cl.Name}}
			  </view>
			  <!-- IsPay 0不可看    1已付款   2已下单 -->
			  <view :style="{color:mc}" class="catalog-box-r" v-if="cl.IsPay!=1">
				  {{cl.IsTrySee==1?'可试看':'购买'}}
			  </view>
		  </view>
		  <view class="ckcatalog"  v-if="courseShow ==true" @click="gocourse({IsTrySee:1},0)">
			  查看更多目录
		  </view>
	  </view>
	  
	  <view class="tiaoti">
	  		<view class="tiaoti-l"></view>
	  		<text style="font-size: 16px;color: #1B1D1E;margin-left: 5px;">评价 <text style="font-size: 11px;color: #1C1E1F;margin-left: 5px;font-weight: 0;">{{commentcount}}条</text> </text>
	  </view>
	  <view class="sku-box u-skeleton-rect" style="justify-content: center;"  v-if="comments.length == 0 && setting.is_comment == 1">
	    <view class="label">暂无评价信息</view>
	  </view>
	  <view class="comment" v-if="comments.length > 0">
	    <view class="content">
	      <view class="u-box">
	        <view class="user">
	          <u-avatar :src="comments[0].UserPhotoPath" :size="50"></u-avatar>
	          <text style="margin-left: 10px;">{{ comments[0].UserName }}</text>
	  			  <u-rate
	  			    :current="comments[0].CommentScore"
	  			    active-color="#FA3534"
	  			    inactive-color="#b2b2b2"
	  			    active-icon="star"
	  			    inactive-icon="star-o"
	  			    size="26"
	  			  	:disabled="true"
	  			  ></u-rate>
	        </view>
	        <view class="timer">{{ comments[0].CreateDate }}</view>
	      </view>
	      <view class="ucontent" style="line-height: 24px;">{{ comments[0].Content }}</view>
		  <view class="reply" v-if="comments[0].Reply!=''">
			  <view style="font-size: 12px;color: #121212;">回复:</view>
			  <view style="font-size: 12px;color: #9A9A9A;margin-top: 3px;">{{comments[0].Reply}}</view>
		  </view>
	    </view>
		<view class="ckcatalog" v-if="comments.length>1" @click="gocomments" >
			查看更多评价
		</view>
	  </view>
    </view>
	<view class="actionsheet" >
		<view style="display: flex;flex-direction: row;align-items: center;">
			<view class="price-btn " :style="{ color: pricecolor }" v-if="g.price!=0">
			  <text style="font-size: 11px;" >￥</text>
			  <text style="font-family: oswald; font-weight: unset;font-size: 20px;">{{ g.price }}</text>
			</view>
			<view class="price-btn " v-if="g.price==0">免费课程</view>
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;font-size: 14px;">
			<view style="width: 22px; margin: auto;margin-right: 15px;" @click="setFavorite"><u-icon :name="g.favorite ? 'like' : 'like-o'" size="44" :color="g.favorite ? pricecolor : '#333'"></u-icon></view>
			<view class="gwuche" :style="{'border':'1px solid'+mc}" @click="joinCar()" v-if="g.price!=0 && g.is_pay==false && g.is_orders==false">
				<text :style="{color:mc}">加入购物车</text>
			</view>
			<view class="gwuche" :style="{background:mc,'border':'1px solid'+mc}" v-if='g.is_pay==false && g.is_orders==true && g.price!=0' @click="goorderList()">
				<text style="color: #fff;" >去支付</text>
			</view>
			<view class="gwuche" :style="{background:mc,'border':'1px solid'+mc}" v-if='g.is_pay==false && g.is_orders==false && g.price!=0' @click="goSettlement">
				<text style="color: #fff;" >立即购买</text>
			</view>
			<view class="gwuche" :style="{background:mc,'border':'1px solid'+mc}" v-if='g.price==0||g.is_pay==true' @click="goMystudy()">
				<text style="color: #fff;" >学习中心</text>
			</view>
		</view>
	</view> 
	
    <u-empty text="没有找到商品，或商品已下架" mode="favor" v-if="!isExsitGoods"></u-empty>
    <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	<share
	  :good-id="id"
	  v-if="showShare"
	  :good-name="g.name"
	  :images="shareimg"
	  :advertising="g.advertising"
	  @close="closeShare"
	></share>
    <coupon
      v-if="showCoupons"
      :coupon-message="couponMessage"
      @goLook="goLook"
      @closeBtn="closeBtn"
    ></coupon>
  </view>
</template>

<script>
// #ifdef APP-NVUE
const dom = weex.requireModule("dom");
// #endif
import goodlist from "@/components/goods/list";
import auth from "@/components/auth/index";
import coupon from "@/components/coupons/coupons";
import share from "./components/share.vue";
import hParse from "@/components/u-parse/parse.vue";
export default {
  data() {
    return {
      id: 0,
      loading: true,
      g: {},
      imgs: [],
      mc: "",
      pricecolor:'',
      skuimage: [],
      comments: [],
	  commentcount:0,
      secondary: "",
      detailContent: "",
      showSku: false,
      ot: 0,
      
      isExsitGoods: true,
      pageTitle: "商品详情",
      setting: {},
      prevPage: "",
      //自定义接手传递
      opTionObj: {},
      showShare: false,
      msg: {
        pageIndex: 1,
        pageSize: 20,
        GoodsId: 0,
        CommentGrade: 0,
      },
      showAuth: false,
      showCoupons: false,
      couponMessage: "",
      isAllowShare: 1,
      u: {},
      vipState: {},
	  courseList:[],
	  courseShow:false,//显示更多课程的按钮
	  Up:0,
	  shareimg:[],
	  
    };
  },
  components: {
    goodlist,
    auth,
    coupon,
    share,
    hParse,
  },
  onLoad(option) {
    this.opTionObj = option;
    console.log(option, "option");

    if (option && option.id) {
      this.id = option.id ? option.id : 29; //40887 59512 46942
    } else {
      this.id = option.GoodsId ? option.GoodsId : 29; //40887 59512 46942
    }
    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 (custom_params.Up) {//分享进入校园id
	    uni.setStorageSync("Up", { Up: custom_params.Up });
	  }
    }
    if (option && option.user_id) {
      uni.setStorageSync("pid", { pid: option.user_id });
    }
	if (option && option.SmallShopId) {
	  uni.setStorageSync("SmallShopId", { SmallShopId: option.SmallShopId });
	}
    if (uni.getStorageSync("AnchorName")) {
      //如果有主播名称了先清除
      uni.removeStorageSync("AnchorName");
    }
	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.AnchorName) {
      //当传过来有主播名称的时候 存入缓存
      uni.setStorageSync("AnchorName", { AnchorName: option.AnchorName });
    }
    this.u = uni.getStorageSync("mall_UserInfo");
    this.init();
    this.initPage();
    this.getGoodsCourseList()

    this.mc = this.$uiConfig.mainColor;
	this.pricecolor = this.$uiConfig.pricecolor;
    this.secondary = this.$uiConfig.secondary;

    this.setting = uni.getStorageSync("basedata").mall.setting;
	
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  onShow(){
	  this.init();
  },
  onShareTimeline() {
    setTimeout(() => {
      console.log("分享调用");
      this.getReceive();
    }, 2500);
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
	  if(uid==0){
	  	uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
	  }
	  let SmallShopId = uni.getStorageSync("mall_UserInfo")
	    ? uni.getStorageSync("mall_UserInfo").SmallShopId
	    : 0;
		if(SmallShopId == 0){//如果微店id为0 去找所属微店id
			SmallShopId = uni.getStorageSync("mall_UserInfo")
			  ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
			  : 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.cover_pic;
    let id = this.id;
    return {
      title: title,
      query: "id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + this.Up,
      imageUrl: imageUrl,
    };
  },
  onShareAppMessage(res) {
    setTimeout(() => {
      console.log("分享调用");
      this.getReceive();
    }, 2500);
    let u = uni.getStorageSync("mall_UserInfo");
    let uid = u.UserId ? u.UserId : 0;
	if(uid==0){
		uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
	}
    let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
	if(SmallShopId == 0){//如果微店id为0 去找所属微店id
		SmallShopId = u.UserSmallShopId? u.UserSmallShopId:0
	}
	console.log("/pages/index/index?id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + this.Up+'&JumpType=5')
    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?id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + this.Up+'&JumpType=5',
      imageUrl:
        this.g.app_share_pic != null && this.g.app_share_pic != ""
          ? this.g.app_share_pic
          : this.g.cover_pic,
    };
  },
  mounted() {
    
  },
  methods: {
    clickDescription(e) {
      console.log(e);
    },
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
      // this.showAuth = false;
      this.init();
      this.initPage();
    },
    //关闭登录窗口
    gbAuth() {
      this.showAuth = false;
    },
    initPage() {
      let currentPages = getCurrentPages();
      let u = "/" + currentPages[currentPages.length - 1].route;
      let pages = uni.getStorageSync("basedata")
        ? uni.getStorageSync("basedata").bar_title
        : [];
      pages.forEach((x) => {
        if (x.value == u) {
          this.pageTitle = x.new_name ? x.new_name : x.name;
        }
      });
      uni.setNavigationBarTitle({
        title: this.pageTitle,
      });
    },
    clickCommentHandler() {
      uni.navigateTo({
        url: "/pages/goods/comment-list?id=" + this.id,
      });
    },


    init() {
      this.loading = true;
      this.request2(
        {
          url: "/api/AppletSchool/GetAppletGoodsInfo",
          data: {
            GoodsId: this.id,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.g = res.data.goods;
            this.g.marketingLogo = JSON.parse(this.g.marketingLogo);
            this.isAllowShare = res.data.goods.isAllowShare; //1为可以分享 2为不能分享
			this.shareimg=[];
			this.shareimg.push({'pic_url':this.g.cover_pic})
			
            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;

            //登录在调用评论接口
            if (this.u) {
              this.initComments();
              
            }
            
          } else {
            this.isExsitGoods = false;
          }
        }
      );
    },
	getGoodsCourseList(){//获取课程分页
		this.request2({
				url: '/api/AppletSchool/GetAppletGoodsCourseList',
				data: {GoodsId: this.id, pageIndex	:1,pageSize:10}
			},
			res => {
				
				this.courseList = res.data.pageData;
				if(this.courseList.length>3){
					this.courseList = this.courseList.splice(0,3)
					this.courseShow = true;
					
				}
			}
		);
	},
    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);
          },
        },
      });
    },
    initComments() {
      this.msg.GoodsId = this.id;
      this.request2(
        {
          url: "/api/AppletOrder/GetAppletGoodsCommentPageList",
          data: this.msg,
        },
        (res) => {
          this.comments = res.data.pageData;
			this.commentcount = res.data.count
          // this.initRecommend();
        },
        (err) => {
          this.u = uni.getStorageSync("mall_UserInfo");
          this.init();
          this.initPage();
        }
      );
    },
	joinCar(){//加入购物车
		this.request2(
			{
				url: '/api/AppletOrder/SetGoodsShoppingCartInfo',
				data: {
					GoodsId: this.id,
					SpecificationSort: '',
					Number: 1
				}
			},
			res => {
				uni.showToast({
					title: '加入购物车成功',
					icon: 'success',
					duration: 2000
				});
			}
		);
	},
	setFavorite(){
		this.request2(
			{
				url: '/api/AppletUser/SetUserCollectionInfo',
				data: {
					GoodsId: this.id
				}
			},
			res => {
				this.g.favorite = !this.g.favorite;
			}
		);
	},


	gocourse(item,index){//跳入课程详情
		if(item.IsPay!=1){
			if(item.IsTrySee==1){
				uni.navigateTo({
					url:'/pages/school/courseContent?id='+this.id+'&name='+this.g.name+'&cover_pic='+this.g.cover_pic+'&index='+index
				})
			}else{
				uni.showToast({
					title: '购买之后才能观看',
					icon: 'none',
					duration: 2000
				});
			}
		}else{
			uni.navigateTo({
				url:'/pages/school/courseContent?id='+this.id+'&name='+this.g.name+'&cover_pic='+this.g.cover_pic+'&index='+index
			})
		}
		
		
	},
	gocomments(){
		uni.navigateTo({
		  url: "/pages/goods/comment-list?id=" + this.id,
		});
	},
	goMystudy(){//学习中心
		uni.navigateTo({
			url:'/pages/school/mystudy/mystudy'
		})
	},

  
 

    closeShare() {
      this.showShare = false;
    },
    openShare() {
		if (this.u) {
		  this.showShare = true;
		} else {
		  this.showAuth = true;
		}
      
    },
    getReceive() {
      //分享进入调取领券接口
      // 1-分享，2-购买并付款
      this.request2(
        {
          url: "/api/AppletUser/ShareCoupon",
          data: {
            TriggerType: 1,
          },
        },
        (res) => {
          if (res.couponResultCode == 1) {
            this.couponMessage = res.couponMessage;
            this.showCoupons = true;
          }
        }
      );
    },
    goLook() {
      this.showCoupons = true;
      uni.navigateTo({
        url: "/pages/coupon/index/index",
      });
    },
	goSettlement(){
		this.u = uni.getStorageSync('mall_UserInfo');
		if (!this.u) {
			this.u = {
				nickName: '未登录',
				avatarUrl: ''
			};
			this.showAuth = true;
		} else{
			let DetailList = [];
			let obj={
				GoodsId:this.id,
				Number:1,
			}
			DetailList.push(obj)
			uni.navigateTo({
				url:'/pages/school/course-submit?DetailList='+encodeURIComponent(JSON.stringify(DetailList))
			})
		}
	},
	goorderList(){//去支付
		uni.navigateTo({
			url:'/pages/school/personal/orderList?status=1'
		})
	},
    closeBtn() {
      this.showCoupons = false;
    },
    goUrl(url) {
      uni.navigateTo({
        url: url,
      });
    },
	//点击跳转
	startPlay(item){
		uni.navigateTo({ url: '/pages/video/index?GoodsId='+this.id+'&VideoUrl='+item.pic_url })
	},
	goteacher(item){//老师详情
		uni.navigateTo({ url: '/pages/school/teacherDetails?ID='+item.teacher_id })
	}
  },
};
</script>

<style>
@font-face {
  font-family: "oswald";
  src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
}
.goods {
  height: 100%;
  /* background: #f5f5f5; */
  padding-bottom: 55px;
}
.goods .g-info {
  background: #fff;
  padding: 10px;
}
.goods .g-info .g-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  
}
.goods .g-info .g-price-box {
  display: flex;
  align-items: flex-end;
}
.goods .g-info .g-price-box .left {
  flex: 1;
  width: 1px;
}
.goods .g-info .g-price-box .left .price {
  margin: 10px 0;
  font-size: 24px;
  font-weight: bold;
  height: 31px;
}
.goods .price-btn{
	margin-left: 10px;
	
}
.goods .g-info .g-price-box .left .price .small {
  font-size: 16px;
}
.goods .numfont {
  font-family: "oswald";
  font-weight: unset;
}
.goods .g-info .g-price-box .left .sell {
  font-size: 12px;
  color: gray;
}
.goods .g-info .g-price-box .left  .oprice {
  text-decoration: line-through;
  font-size: 12px;
  color: gray;
  margin-left: 10px;
}
.goods .g-info .g-price-box .right {
  width: 30px;
  margin-left: 20px;
  height: 100%;
  font-size: 12px;
  color: #333;
}
.goods .g-info .g-price-box .right .share-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 12rpx;
}
.goods .sku-box {
  
  background: #fff;
  display: flex;
  padding: 15px 10px;
  align-items: center;
}
.goods .sku-box .label {
  font-size: 12px;
  color: gray;
  margin-right: 15px;
}
.goods .details {
  padding: 10px;
}
.goods .sku-box .content {
  width: 1px;
  flex: 1;
  color: #000;
  font-size: 12px;
}
.goods .sku-box .content .sku-chosen {
  display: flex;
  align-items: center;
}
.goods .sku-box .content .sku-chosen .arrow {
  width: 20px;
}

.goods .sku-box .content .suk-item {
  margin-top: 10px;
  display: flex;
}
.goods .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;
}
.goods .sku-box .content .suk-item .item.img {
  padding: 0;
  width: 24px;
}
.goods .comment {
  /* margin: 10px 0; */
  background: #fff;
font-family: aa;
  padding: 10px;
}
.goods .comment .chead {
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.goods .comment .content {
  display: flex;
  flex-direction: column;
  
  margin-bottom: 15px;
}
.goods .comment .content .u-box {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.goods .comment .content .u-box .user {
  flex: 1;
  font-size: 12px;
  color: gray;
  align-items: center;
  display: flex;
}
.goods .comment .content .u-box .timer {
  font-size: 12px;
  color: gray;
  text-align: right;
  flex: 1;
}
.goods .comment .content .u-box .ucontent {
  font-size: 12px;
  color: #000;
  margin-top: 10px;
}
.goods .detals {
  padding: 10px;
  background: #fff;
  margin-top: 10px;
}
.goods .detals * {
  max-width: 100%;
}
.goods .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: 170px;
  right: 0;
}
.goods .Logo {
  padding: 1px 5px;
  display: inline-block;
  font-size: 22rpx;
  margin-right: 5rpx;
  border-radius: 4px;
}
.goods .screen-swiper {
		min-height: 375upx;
	}
.goods .screen-swiper image,
.goods .screen-swiper video{
	width: 100%;
	display: block;
	height: 100%;
	margin: 0;
	pointer-events: none;
}
.goods .tiaoti{
	width: 100%;
	height: 35px;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-weight: bold
}
.goods .tiaoti-l{
	width: 3px;
	height: 14px;
	margin-left: 12px;
	background-image: linear-gradient(
	  to bottom,
	  #00D6A6,
	  #B5FFEE
	);
}
.goods .catalog{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 10px;
	
}
.goods .catalog-box{
	width: calc(100vw - 30px);
	padding: 15px;
	border-radius: 4px;
	box-shadow:  2px 2px 8px #D2D2D2;
	margin-top: 15px;
	background: #FFF;
	display: flex;flex-direction: row;
	align-items: center;justify-content: space-between;
}
.goods .ckcatalog{
	width: calc(100vw - 30px);
	height: 45px;
	border-radius: 6px;
	margin-top: 15px;
	background: #F5F6F7;
	font-size: 14px;
	color: #111111;
	display: flex;flex-direction: row;
	align-items: center;justify-content: center;
}
.goods .catalog-box-l{
	width: calc(100vw - 100px);
	display: flex;
	flex-direction: row;
	align-items: center;
}
.goods .cb-l-bt{
	font-size: 9px;
	border-radius: 2px;
	border: 1px solid #9A9A9A;
	padding: 1px;
	margin-right: 5px;
}
.goods .catalog-box-r{
	width: 40px;
	font-size: 10px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.goods .teacher{
	width: calc(100vw - 20px);
	padding: 10px;
	border-radius: 10px;
	background: #F5F6F7;
	margin-left: 10px;
	margin-bottom: 10px;
	
}
.goods .teacher-list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 10px 10px 0;
}
.goods .teacher-item{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 15px;
	padding: 5px 0;
	
}
.goods .actionsheet {
	display: flex;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 60px;
	/* align-items: center; */
	justify-content: space-between;
}
.goods .gwuche{
	padding: 10px 18px;
	/* margin-top: 6px; */
	margin-right: 15px;
	border-radius: 6px;
	
}
.goods .g-label{
	display: flex;
	align-items: center;
	padding: 5px 0;
	margin-top: 10px;
}
.goods .gl-left{
	flex: 1;
	width: 1px;
	display: flex;
	flex-wrap: wrap;
}
.goods .gl-left-item{
	padding: 2px 4px;
	border-radius: 2px;
	font-size: 10px;
	color: #FAF8F9;
	margin-right: 5px;
	margin-bottom: 5px;
}
.goods .good-rb-box{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.goods .good-rb-text{
	font-size: 11px;
	color: #121212;
	margin-right: 2px;
}
.goods .reply{
	width: 100%;
	padding: 10px;
	background: #F5F6F7;
	border-radius: 3px;
	margin-top: 10px;
	
}
</style>
