<template>
  <view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
    <!-- 商品轮播 -->
    <product-con-swiper :imgUrls="imgUrls"></product-con-swiper>

    <view class="tui-pro-detail">
      <view class="tui-product-title tui-border-radius">
        <view class="tui-price__box">
          <view class="tui-pro-pricebox tui-padding">
            <view class="tui-pro-price">
              <view>
                <text>￥</text>
                <text class="tui-price">{{ formatPrice(storeInfo.price, 0) }}</text>
                <text>.{{ formatPrice(storeInfo.price, 1) }}</text>
              </view>
              <!-- <view class="tui-original-price tui-white__gray">￥199.00</view> -->
            </view>
            <view class="tui-sold tui-white__gray">
              <view class="tui-price-tag">{{ storeInfo.people }}人团</view>
              <text>已拼{{ storeInfo.sales }}{{ storeInfo.unitName }}</text>
            </view>
          </view>
          <view class="tui-right__box">库存{{ storeInfo.stock }}{{ storeInfo.unitName }}</view>
        </view>
        <view class="tui-pro-titbox">
          <view class="tui-pro-title">{{ storeInfo.title }}</view>
        </view>
      </view>
    </view>

    <!-- 规格 -->
    <view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
      <view>
        <text>{{ attrTxt }}：</text>
        <text class="atterTxt">{{ attrValue }}</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>

    <!-- 拼团信息 -->
    <view class="notice acea-row row-middle">
      <view class="num font-color-red">
        <text class="iconfont icon-laba"></text>
        已拼{{ storeInfo.sales }}{{ storeInfo.unitName }}
        <text class="line">|</text>
      </view>
      <view class="swiper-no-swiping swiper">
        <swiper class="swiper-wrapper" :options="swiperTip" :autoplay="true" :interval="3000">
          <block v-for="(item, itemNewIndex) in itemNew" :key="itemNewIndex">
            <swiper-item>
              <view class="line1">{{ item }}</view>
            </swiper-item>
          </block>
        </swiper>
      </view>
    </view>

    <!-- 拼团人数，头像 -->
    <view class="assemble">
      <view v-for="(item, groupListindex) in groupList" :key="groupListindex">
        <view class="item acea-row row-between-wrapper" v-if="groupListindex < groupListCount">
          <view class="pictxt acea-row row-between-wrapper">
            <view class="pictrue">
              <image :src="item.avatar" class="image" />
            </view>
            <view class="text line1" v-text="item.nickname"></view>
          </view>
          <view class="right acea-row row-middle">
            <view>
              <view class="lack">
                <text>还差</text>
                <text class="font-color-red" v-text="item.count"></text>
                <text>人成团</text>
              </view>
              <count-down :isDay="true" :tipText="'剩余 '" :dayText="' 天 '" :hourText="' : '" :minuteText="' : '" :secondText="' '" :datatime="item.stopTime"></count-down>
            </view>
            <view class="spellBnt" @click="groupRule(item.id)">
              去拼单
              <text class="iconfont icon-jiantou"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="more" v-if="groupList.length > groupListCount" @click="setGroupListCount">
        查看更多
        <text class="iconfont icon-xiangxia"></text>
      </view>
    </view>

    <!-- 拼团规则 -->
    <view class="playWay">
      <view class="title acea-row row-between-wrapper">
        <view>拼团玩法</view>
      </view>
      <view class="way acea-row row-middle">
        <view class="item"> <text class="num">①</text>开团/参团 </view>
        <view class="iconfont icon-arrow"></view>
        <view class="item"> <text class="num">②</text>邀请好友 </view>
        <view class="iconfont icon-arrow"></view>
        <view class="item">
          <view> <text class="num">③</text>满员发货 </view>
        </view>
      </view>
    </view>

    <!-- 用户评价 -->
    <view class="userEvaluation">
      <view class="title acea-row row-between-wrapper">
        <view v-text="'用户评价(' + replyCount + ')'"></view>
        <view class="praise" @click="goReply">
          <text class="font-color-red" v-text="replyChance + '%'"></text>好评率
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
      <UserEvaluation :reply="reply"></UserEvaluation>
    </view>

    <!-- 产品介绍 -->
    <view class="product-intro">
      <text class="title"><text>产品介绍</text></text>
      <view class="conter" v-html="storeInfo.description"></view>
      <!-- <view class="conter" v-html=""></view> -->
    </view>

    <!-- 操作栏 -->
    <view style="height: 100rpx"></view>

    <!--底部操作栏-->
    <view class="tui-operation">
      <view class="tui-operation-left tui-col-5">
        <!-- #ifdef MP-WEIXIN -->
        <button class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150">
          <view class="iconfont icon-kefu"></view>
          <view class="tui-operation-text tui-scale-small">客服</view>
        </button>
        <!-- #endif -->

        <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect" v-if="userCollect">
          <view class="iconfont icon-shoucang1"></view>
          <view class="tui-operation-text tui-scale-small">收藏</view>
        </view>
        <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect" v-if="!userCollect">
          <view class="iconfont icon-shoucang"></view>
          <view class="tui-operation-text tui-scale-small">收藏</view>
        </view>
      </view>

      <view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4">
        <view class="tui-flex-1">
          <tui-button height="100rpx" :size="26" type="warning" shape="rightAngle" @click="openAlone">
            <view class="tui-btn__box">
              <view>单独购买</view>
              <view class="tui-flex-end">
                <view class="tui-size-26">￥</view>
                <view class="tui-size-36">{{ formatPrice(storeInfo.productPrice, 0) }}</view>
                <view class="tui-size-26">.{{ formatPrice(storeInfo.productPrice, 1) }}</view>
              </view>
            </view>
          </tui-button>
        </view>
        <view class="tui-flex-1">
          <tui-button height="100rpx" :size="26" type="danger" shape="rightAngle" @click="openTeam">
            <view class="tui-btn__box">
              <view>发起拼团</view>
              <view class="tui-flex-end">
                <view class="tui-size-28">￥</view>
                <view class="tui-price-large tui-size-36">{{ formatPrice(storeInfo.price, 0) }}</view>
                <view class="tui-size-28">.{{ formatPrice(storeInfo.price, 1) }}</view>
              </view>
            </view>
          </tui-button>
        </view>
      </view>
    </view>

    <!-- 商品信息弹窗 -->
    <ProductWindow v-if="cartNum" v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
    <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData"></StorePoster>
  </view>
</template>

<script>
// import { swiper, swiperSlide } from "vue-awesome-swiper";

import ProductConSwiper from '@/components/ProductConSwiper'
import CountDown from '@/components/CountDown'
import UserEvaluation from '@/components/UserEvaluation'
import ProductWindow from '@/components/ProductWindow'
import StorePoster from '@/components/StorePoster'
import { getCombinationDetail } from '@/api/activity'
import { postCartAdd } from '@/api/store'
import { imageBase64 } from '@/api/public'
import { getCoupon, getCollectAdd, getCollectDel, getUserInfo } from '@/api/user'
const NAME = 'GroupDetails'

export default {
  name: 'GroupDetails',
  components: {
    ProductConSwiper,
    CountDown,
    UserEvaluation,
    // swiper,
    // swiperSlide,
    ProductWindow,
    StorePoster,
  },
  props: {},
  data: function() {
    return {
      domStatus: false,
      posterData: {
        image: '',
        title: '',
        price: '',
        code: '',
      },
      posterImageStatus: false,
      reply: [],
      replyCount: 0,
      replyChance: 0,
      imgUrls: [],
      storeInfo: {},
      itemNew: {},
      groupListCount: 2,
      groupList: {},
      attrTxt: '请选择',
      productValue: [],
      attrValue: '',
      swiperTip: {
        direction: 'vertical',
        autoplay: {
          disableOnInteraction: false,
          delay: 2000,
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true,
      },
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      cartNum: 1,
      userCollect: false,
    }
  },
  computed: {},
  watch: {
    $yroute: function(n) {
      var that = this
      if (n.name === NAME) {
        that.mountedStart()
      }
    },
  },
  onShow: function() {
    this.mountedStart()
  },
  methods: {
    formatPrice(price, index) {
      console.log(price)
      if (price) {
        return price.split('.')[index]
      }
      return ''
    },
    onShareAppMessage: function() {
      return {
        title: this.storeInfo.title,
        imageUrl: this.storeInfo.image,
        path: 'pages/activity/GroupDetails/index?id=' + this.storeInfo.id + '&spread=' + uni.getStorageSync('uid') + '&pageType=good&codeType=routine',
        success(res) {
          uni.showToast({
            title: '分享成功',
          })
        },
        fail(res) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      }
    },
    openAlone: function() {
      this.$yrouter.push({
        path: '/pages/shop/GoodsCon/index',
        query: {
          id: this.storeInfo.productId,
        },
      })
      // this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId });
    },
    //收藏商品
    setCollect: function() {
      let that = this,
        id = that.storeInfo.id,
        category = 'product'
      if (that.userCollect) {
        getCollectDel(id, category).then(function() {
          that.userCollect = !that.userCollect
        })
      } else {
        getCollectAdd(id, category).then(function() {
          that.userCollect = !that.userCollect
        })
      }
    },
    mountedStart: function() {
      var that = this
      let id = that.$yroute.query.id
      getCombinationDetail(id).then(res => {
        that.userCollect = res.data.userCollect
        res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
        that.$set(that.attr, 'productAttr', res.data.productAttr)
        that.$set(that, 'productValue', res.data.productValue)
        that.$set(that, 'storeInfo', res.data.storeInfo)
        that.$set(that, 'imgUrls', res.data.storeInfo.sliderImageArr)
        that.$set(that, 'itemNew', res.data.pinkOkList)
        that.$set(that, 'groupList', res.data.pink)
        that.$set(that, 'reply', [res.data.reply])
        that.$set(that, 'replyCount', res.data.replyCount)
        that.$set(that, 'replyChance', res.data.replyChance)
        that.posterData.image = that.storeInfo.image
        if (that.storeInfo.title.length > 30) {
          that.posterData.title = that.storeInfo.title.substring(0, 30) + '...'
        } else {
          that.posterData.title = that.storeInfo.title
        }
        that.posterData.price = that.storeInfo.pinkPrice
        that.posterData.code = that.storeInfo.code_base
        that.domStatus = true
        console.log(this.storeInfo)
        that.DefaultSelect()
      })
    },
    DefaultSelect: function() {
      let productAttr = this.attr.productAttr
      let value = []
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], 'index', 0)
        value.push(productAttr[i].attrValueArr[0])
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.sort().join(',')]
      console.log(productSelect)
      if (productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.pinkPrice)
        this.$set(this.attr.productSelect, 'stock', productSelect.pinkStock)
        this.$set(this.attr.productSelect, 'unique', productSelect.unique)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', value.sort().join(','))
        this.$set(this, 'attrTxt', '已选择')
      } else if (!productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.pinkPrice)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', '')
        this.$set(this.attr.productSelect, 'cart_num', 0)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      } else if (!productSelect && !productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.pinkPrice)
        this.$set(this.attr.productSelect, 'stock', this.storeInfo.pinkStock)
        this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '')
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },
    getImageBase64: function() {
      let that = this
      imageBase64(this.posterData.image, that.posterData.code).then(res => {
        that.posterData.image = res.data.image
        that.posterData.code = res.data.code
      })
    },
    setPosterImageStatus: function() {
      // var sTop = document.body || document.documentElement;
      // sTop.scrollTop = 0;
      this.posterImageStatus = !this.posterImageStatus
    },
    groupRule: function(id) {
      var that = this
      that.$yrouter.push({
        path: '/pages/activity/GroupRule/index',
        query: {
          id,
        },
      })
    },
    goReply: function() {
      var that = this
      that.$yrouter.push({
        path: '/pages/shop/EvaluateList/index',
        query: {
          id: that.storeInfo.product_id,
        },
      })
    },
    setGroupListCount: function() {
      this.groupListCount = this.groupListCount + 2
    },
    //将父级向子集多次传送的函数合二为一；
    changeFun: function(opt) {
      if (typeof opt !== 'object') opt = {}
      let action = opt.action || ''
      let value = opt.value === undefined ? '' : opt.value
      this[action] && this[action](value)
    },
    changeattr: function(res) {
      var that = this
      that.attr.cartAttr = res
    },
    ChangeCartNum: function(res) {
      var that = this
      that.attr.productSelect.cart_num = 1
      that.cartNum = 1
      uni.showToast({
        title: '每人每次限购1' + that.storeInfo.unitName,
        icon: 'none',
        duration: 2000,
      })
    },
    //选择属性；
    ChangeAttr: function(res) {
      // 修改了规格
      let productSelect = this.productValue[res.value]
      if (productSelect) {
        this.attr.productAttr[res.indexw].index = res.indexn
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.pinkPrice)
        this.$set(this.attr.productSelect, 'stock', productSelect.pinkStock)
        this.$set(this.attr.productSelect, 'unique', productSelect.unique)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', res.value)
        this.$set(this, 'attrTxt', '已选择')
      } else {
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.pinkPrice)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', '')
        this.$set(this.attr.productSelect, 'cart_num', 0)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },

    openTeam: function() {
      var that = this
      if (that.attr.cartAttr == false) {
        that.attr.cartAttr = !this.attr.cartAttr
      } else {
        var data = {}
        data.productId = that.storeInfo.productId
        data.cartNum = that.attr.productSelect.cart_num
        data.uniqueId = that.attr.productSelect.unique
        data.combinationId = that.storeInfo.id
        data.new = 1
        postCartAdd(data)
          .then(res => {
            that.$yrouter.push({
              path: '/pages/order/OrderSubmission/index',
              query: {
                id: res.data.cartId,
              },
            })
          })
          .catch(err => {
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000,
            })
          })
      }
    },
    //打开属性插件；
    selecAttrTap: function() {
      this.attr.cartAttr = true
      this.isOpen = true
    },
  },
}
</script>
<style scoped lang="less">
.product-con .wrapper {
  padding-bottom: 0.26 * 100rpx;
}

.noscroll {
  height: 100%;
  overflow: hidden;
}

.product-con .footer-group .bnt {
  // flex:1;
  width: 43%;
}

.footer-group {
  button {
    border: 0;
    background: none;
  }
}

.product-con .footer-group .bnt.bg-color-violet {
  background-color: #fa8013;
}

/*内容 部分*/

.tui-padding {
  padding: 0 30rpx;
  box-sizing: border-box;
}

.tui-ml-auto {
  margin-left: auto;
}

/* #ifdef H5 */
.tui-ptop {
  padding-top: 44px;
}

/* #endif */

.tui-size {
  font-size: 24rpx;
  line-height: 24rpx;
}

.tui-gray {
  color: #999;
}

.tui-white__gray {
  color: rgba(255, 255, 255, 0.8);
  font-weight: normal;
  font-size: 26rpx;
}

.tui-color-red {
  color: #eb0909;
}

.tui-border-radius {
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  overflow: hidden;
}

.tui-radius-all {
  border-radius: 24rpx;
  overflow: hidden;
}

.tui-mtop {
  margin-top: 26rpx;
}

.tui-pro-detail {
  box-sizing: border-box;
  color: #333;
}

.tui-product-title {
  background: #fff;
  padding-bottom: 30rpx;
}

.tui-price__box {
  width: 100%;
  height: 130rpx;
  display: flex;
}

.tui-pro-pricebox {
  width: 540rpx;
  height: 130rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  font-size: 26rpx;
  line-height: 26rpx;
  background: linear-gradient(-30deg, #ff1f2e, #f52c6c);
  flex-shrink: 0;
}

.tui-pro-price {
  display: flex;
  align-items: flex-end;
}

.tui-price {
  font-size: 44rpx;
  line-height: 42rpx;
}

.tui-sold {
  width: 100%;
  height: 44rpx;
  padding-left: 4rpx;
  display: flex;
  align-items: center;
  padding-top: 10rpx;
}

.tui-price-tag {
  height: 38rpx;
  border: 1rpx solid #fff;
  border-radius: 6rpx;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  line-height: 24rpx;
  transform: scale(0.8);
  transform-origin: 0 center;
  border-radius: 6rpx;
  padding: 0 8rpx;
}

.tui-original-price {
  font-size: 26rpx;
  line-height: 26rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  text-decoration: line-through;
}

.tui-right__box {
  flex: 1;
  background-color: #ffe5e5;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #eb0909;
}

.tui-pro-titbox {
  font-size: 32rpx;
  font-weight: 500;
  position: relative;
  padding: 0 150rpx 0 30rpx;
  box-sizing: border-box;
}

.tui-pro-title {
  padding-top: 20rpx;
}

.tui-share-btn {
  display: block;
  background: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
}

.tui-share-btn::after {
  border: 0;
}

.tui-share-box {
  display: flex;
  align-items: center;
}

.tui-share-position {
  position: absolute;
  right: 0;
  top: 30rpx;
}

.tui-share-text {
  padding-left: 8rpx;
}

.tui-sub-title {
  padding: 20rpx 0;
  line-height: 32rpx;
}

.tui-guarantee__box {
  display: flex;
  padding: 12rpx 88rpx 0;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.tui-gt-item {
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.tui-gt-item text {
  transform: scale(0.8);
  transform-origin: center center;
}

.tui-gt-img {
  width: 24rpx;
  height: 26rpx;
  flex-shrink: 0;
}

.tui-group-text {
  width: 100%;
  display: flex;
  align-items: center;
}

.tui-group-title {
  font-size: 30rpx;
  line-height: 30rpx;
  font-weight: bold;
  padding-left: 16rpx;
  border-left: 2px solid #eb0909;
  box-sizing: border-box;
}

.tui-sub__title {
  font-size: 26rpx;
  padding-right: 30rpx;
}

.tui-step__box {
  width: 100%;
  height: 210rpx;
  background: #fff;
  padding: 0 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.tui-step-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 26rpx;
  color: #666666;
}

.tui-step-item image {
  width: 64rpx;
  height: 55rpx;
  flex-shrink: 0;
}

.tui-step-item image:first-child {
  width: 60rpx !important;
}

.tui-step-arrow {
  height: 90rpx;
}

.tui-step-arrow image {
  width: 11rpx;
  height: 20rpx;
  flex-shrink: 0;
}

.tui-step-text {
  line-height: 26rpx;
  padding-top: 24rpx;
}

.tui-discount-box {
  background: #fff;
}

.tui-list__cell {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  line-height: 26rpx;
  padding: 36rpx 30rpx;
  box-sizing: border-box;
}

.tui-right {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
}

.tui-top40 {
  top: 40rpx !important;
}

.tui-bold {
  font-weight: bold;
}

.tui-list__cell::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 126rpx;
}

.tui-last::after {
  border-bottom: 0 !important;
}

.tui-flex-center {
  display: flex;
  align-items: center;
}

.tui-cell-title {
  width: 66rpx;
  padding-right: 30rpx;
  flex-shrink: 0;
}

.tui-promotion-box {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  width: 80%;
}

.tui-promotion-box text {
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tui-basic-info {
  background: #fff;
}

.tui-addr-box {
  width: 76%;
}

.tui-addr-item {
  padding: 10rpx;
  line-height: 34rpx;
}

.tui-guarantee {
  background: #fdfdfd;
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 30rpx 30rpx 30rpx;
  font-size: 24rpx;
}

.tui-guarantee-item {
  color: #999;
  padding-right: 30rpx;
  padding-top: 10rpx;
}

.tui-pl {
  padding-left: 4rpx;
}

.tui-cmt-box {
  background: #fff;
}

.tui-between {
  justify-content: space-between !important;
}

.tui-cmt-all {
  color: #ff201f;
  padding-right: 8rpx;
}

.tui-cmt-content {
  font-size: 26rpx;
}

.tui-cmt-user {
  display: flex;
  align-items: center;
}

.tui-acatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: block;
  margin-right: 16rpx;
}

.tui-cmt {
  padding: 14rpx 0;
}

.tui-attr {
  font-size: 24rpx;
  color: #999;
  padding: 6rpx 0;
}

.tui-cmt-btn {
  padding: 50rpx 0 30rpx 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-nomore-box {
  padding-top: 10rpx;
}

.tui-product-img {
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
}

.tui-product-img image {
  width: 100%;
  display: block;
}

/*底部操作栏*/

.tui-col-7 {
  width: 58.33333333%;
}

.tui-col-5 {
  width: 41.66666667%;
}

.tui-operation {
  width: 100%;
  height: 100rpx;
  background: rgba(255, 255, 255, 0.98);
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  bottom: 0;
  left: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.tui-safearea-bottom {
  width: 100%;
  height: env(safe-area-inset-bottom);
}

.tui-operation::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.tui-operation-left {
  display: flex;
  align-items: center;
}

.tui-operation-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  background: none;
  padding: 0;

  border: 0;
  line-height: 1em;
  &:after {
    display: none;
  }
  .tui-operation-text {
    margin-top: 9rpx;
    line-height: 1em;
  }
}

.tui-operation-text {
  font-size: 22rpx;
  color: #333;
}

.tui-opacity {
  opacity: 0.5;
}

.tui-scale-small {
  transform: scale(0.9);
  transform-origin: center center;
}

.tui-operation-right {
  height: 100rpx;
  padding-top: 0;
}

.tui-right-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tui-flex-1 {
  flex: 1;
}

.tui-img__clock {
  width: 30rpx;
  height: 30rpx;
  margin-right: 8rpx;
}

/*底部操作栏*/

/*底部选择弹层*/

.tui-popup-class {
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.tui-popup-box {
  position: relative;
  padding: 30rpx 0 100rpx 0;
}

.tui-popup-btn {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.tui-product-box {
  display: flex;
  align-items: flex-end;
  font-size: 24rpx;
  padding-bottom: 30rpx;
}

.tui-popup-img {
  height: 200rpx;
  width: 200rpx;
  border-radius: 24rpx;
  display: block;
}

.tui-popup-price {
  padding-left: 20rpx;
  padding-bottom: 8rpx;
}

.tui-amount {
  color: #ff201f;
  font-size: 36rpx;
}

.tui-number {
  font-size: 24rpx;
  line-height: 24rpx;
  padding-top: 12rpx;
  color: #999;
}

.tui-popup-scroll {
  height: 600rpx;
  font-size: 26rpx;
}

.tui-scrollview-box {
  padding: 0 30rpx 60rpx 30rpx;
  box-sizing: border-box;
}

.tui-attr-title {
  padding: 10rpx 0;
  color: #333;
}

.tui-attr-box {
  font-size: 0;
  padding: 20rpx 0;
}

.tui-attr-item {
  max-width: 100%;
  min-width: 200rpx;
  height: 64rpx;
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  padding: 0 26rpx;
  box-sizing: border-box;
  border-radius: 32rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  font-size: 26rpx;
}

.tui-attr-active {
  background: #fcedea !important;
  color: #e41f19;
  font-weight: bold;
  position: relative;
}

.tui-attr-active::after {
  content: '';
  position: absolute;
  border: 1rpx solid #e41f19;
  width: 100%;
  height: 100%;
  border-radius: 40rpx;
  left: 0;
  top: 0;
}

.tui-number-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0 30rpx 0;
  box-sizing: border-box;
}

/*底部选择弹层*/

/*拼团玩法介绍 modal*/
.tui-modal__title {
  text-align: center;
  font-weight: bold;
  padding-bottom: 8rpx;
}
.tui-modal__p {
  font-size: 26rpx;
  color: #888;
  padding-top: 20rpx;
}
.tui-modal__btn {
  width: 100%;
  padding: 60rpx 0 20rpx;
  display: flex;
  justify-content: center;
}

/*正在拼团*/
.tui-group-swiper {
  width: 100%;
  background-color: #fff;
}
.tui-group-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 35rpx 40rpx;
  box-sizing: border-box;
}

.tui-user-left {
  font-size: 30rpx;
  display: flex;
  align-items: center;
}

.tui-user-left image {
  height: 80rpx;
  width: 80rpx;
  flex-shrink: 0;
  border-radius: 50%;
  margin-right: 16rpx;
}

.tui-user-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tui-user-anme {
  max-width: 160rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tui-group-num {
  font-size: 26rpx;
  line-height: 26rpx;
  padding-bottom: 12rpx;
}

.tui-user-countdown {
  padding-right: 18rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tui-sub-title {
  font-size: 28rpx;
  padding-right: 30rpx;
}
.tui-group-countdown {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666666;
  white-space: nowrap;
}

.tui-countdown-right {
  padding-right: 6rpx;
}

.tui-countdown-left {
  padding-left: 6rpx;
}

.tui-btn__box {
  height: 98rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  line-height: 28rpx;
  padding: 18rpx 0 14rpx 0;
  box-sizing: border-box;
}

.tui-size-26 {
  font-size: 26rpx;
  line-height: 26rpx;
  padding-top: 4rpx;
}

.tui-size-36 {
  font-size: 36rpx;
  line-height: 34rpx;
  font-weight: 500;
}
.tui-flex-end {
  display: flex;
  align-items: flex-end;
}
</style>
