<template>
  <view class="group-con">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">拼团详情</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="content-box">
			<view class="banner">
				<swiper @change="swiperChange">
					<swiper-item v-for="(item, index) in storeCombination.sliderImageArr" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="dots acea-row">
					<view :class="'dot ' + (swiperCurrent == index?'on':'')" v-for="(item, index) in storeCombination.sliderImageArr" :key="index"></view>
				</view>
			</view>
			<view class="goods-info">
				<view class="price-box acea-row">
					<view class="">¥{{ storeCombination.price }}</view>
					<view class="productPrice">¥{{ storeCombination.productPrice }}</view>
				</view>
				<view class="goods-name">{{ storeCombination.title }}</view>
				<view class="info-text">{{ storeCombination.info }}</view>
			</view>
			<image class="link-icon left" src="../../../static/images/link-icon.png" mode=""></image>
			<image class="link-icon right" src="../../../static/images/link-icon.png" mode=""></image>
			<view class="people-num-box">
				<view class="people-num">
					<view class="num">{{ storeCombination.people || 0 }}</view>
					<view class="">人团</view>
				</view>
			</view>
		</view>
		
		<view class="content-box">
			<view class="pink-state" v-if="pinkBool == 0">进行中</view>
			<view class="pink-state" v-else-if="pinkBool == 1">拼团成功</view>
			<view class="pink-state" v-else-if="pinkBool == -1">拼团失败</view>
			<view class="tip" v-if="pinkBool == 0">还差{{count}}人，赶快邀请好友来拼团吧</view>
			<view class="group-countdown acea-row row-center-wrapper" v-if="pinkBool == 0 && pinkT.stopTime">
			  <view style="padding-right: 8rpx;">剩余</view>
			  <count-down :isDay="true" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="pinkT.stopTime"></count-down>
			  <view>结束</view>
			</view>
			<view class="user-box acea-row row-around">
				<view class="user-item leader">
					<image v-if="pinkT.avatar" class="avatar" :src="pinkT.avatar"></image>
					<view v-else class="no-avatar acea-row row-middle">
						<image src="@/static/images/yanjie-logo.png" mode="widthFix"></image>
					</view>
					<view class="leader-tip">团长</view>
				</view>
				<view class="" v-for="(item, index) in (storeCombination.people-1)" :key="index">
				<!-- <view class="" v-for="(item, index) in Array(storeCombination.people-1)" :key="index"> -->
				  <view class="user-item leader" v-if="pinkAll[index]">
						<image v-if="pinkAll[index].avatar" class="avatar" :src="pinkAll[index].avatar"></image>
						<view v-else class="no-avatar acea-row row-middle">
							<image src="@/static/images/yanjie-logo.png" mode="widthFix"></image>
						</view>
					</view>
				  <view class="user-item" v-else>
						<!-- <image class="avatar" :src="`${$VUE_APP_RESOURCES_URL}/images/vacancy.png`"></image> -->
					</view>
				</view>
			</view>
			
			<view class="btn-box">
				<button class="btn bg-color-red" open-type="share" v-if="userBool === 1 && isOk == 0 && pinkBool === 0">邀请好友参团</button>
				 <!-- @click="goPoster" -->
				
				<view class="btn bg-color-red" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">立刻拼团</view>
				<view class="btn bg-color-red" v-if="pinkBool === 1 || pinkBool === -1" @click="goDetail(storeCombination.id)">再次开团</view>
				<view class="btn" @click="getCombinationRemove" v-if="userBool === 1 && pinkBool === 0">取消开团</view>
				<view class="btn" v-if="pinkBool === 1" @click="goOrder">查看订单信息</view>
			</view>
		</view>
		
    <!-- <view class="tui-goods-item" v-if="storeCombination">
      <image :src="storeCombination.image" class="tui-goods-img"></image>
      <view class="tui-goods-center">
        <view class="tui-goods-name">{{ storeCombination.title }}</view>
        <view class="tui-price__box">
          <view class="tui-goods-price">
            <view class="tui-size-24">￥</view>
            <view class="tui-price-large">{{ storeCombination.price.split('.')[0] || 0 }}</view>
            <view class="tui-size-24">.{{ storeCombination.price.split('.')[1] || 0 }}</view>
            <text>已拼2020件</text>
          </view>
          <view class="tui-price-tag">{{ storeCombination.people || 0 }}人团</view>
        </view>
      </view>
    </view> -->
		
    <!-- <view class="tui-group__box tui-mtop__20">
      <tui-divider backgroundColor="#fff" width="70%" gradual>
        <view class="tui-divider__content">
          <text v-if="pinkBool == 0">进行中</text>
          <text v-if="pinkBool == 1">拼团成功</text>
          <text v-if="pinkBool == -1">拼团失败</text>
        </view>
      </tui-divider>
      <view class="tui-group__title" v-if="pinkBool == 0">
        <text>还差</text>
        <text class="tui-color__red">{{ count }}</text>
        <text>人，赶快邀请好友来拼团吧</text>
      </view>
      <view class="tui-group-countdown" v-if="pinkBool == 0">
        <view class="tui-countdown-right">剩余</view>
        <count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="pinkT.stopTime"></count-down>
        <view class="tui-countdown-left">结束</view>
      </view>
      <view class="tui-user__box">
        <view class="tui-user__item">
          <view class="tui-avatar__box tui-size">
            <image class="tui-size" :src="pinkT.avatar"></image>
            <view class="tui-team__leader">团长</view>
          </view>
          <view class="tui-nickname">不许人间见白头</view>
        </view>
        <view class="tui-user__item" v-for="(item, index) in Array(storeCombination.people-1)" :key="index">
          <view class="tui-avatar__box tui-size" v-if="pinkAll[index]"><image class="tui-size" :src="pinkAll[index].avatar"></image></view>
          <view class="tui-avatar__box tui-user__none" v-else><image class="tui-size" :src="`${$VUE_APP_RESOURCES_URL}/images/vacancy.png`"></image></view>
          <view class="tui-nickname">小可爱本人</view>
        </view>
      </view>
      <view class="tui-btn__box">
        <tui-button type="danger" height="88rpx" shadow shape="circle" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">邀请好友参团</tui-button>
        <tui-button type="warning" height="88rpx" shadow shape="circle" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">我要参团</tui-button>
        <tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1 || pinkBool === -1" @click="goDetail(storeCombination.id)">再次开团</tui-button>
        <tui-button type="warning" height="88rpx" shadow shape="circle" @click="getCombinationRemove" v-if="userBool === 1 && pinkBool === 0">取消开团</tui-button>
        <tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1" @click="goOrder">查看订单信息</tui-button>
      </view>
    </view> -->
		
  </view>
</template>
<script>
import CountDown from '@/components/CountDown'
import { getCombinationPink, getCombinationRemove } from '@/api/activity'
import { postCartAdd } from '@/api/store'
import { isWeixin, parseQuery, handleQrCode } from '@/utils/index'

const NAME = 'GroupRule'
export default {
  name: NAME,
  components: {
    CountDown,
  },
  props: {},
  data: function() {
    return {
			swiperCurrent: 0,
      currentPinkOrder: '', //当前拼团订单
      isOk: 0, //判断拼团是否完成
      pinkBool: 0, //判断拼团是否成功|0=失败,1=成功
      userBool: 0, //判断当前用户是否在团内|0=未在,1=在
      pinkAll: [], //团员
      pinkT: {}, //团长信息
      storeCombination: {
				price: '0.00',
				productPrice: '0.00',
			}, //拼团产品
      pinkId: 0,
      uniqueId: '',
      count: 0, //拼团剩余人数
      iShidden: false,
      userInfo: {},
    }
  },
  watch: {
    $yroute(n) {
      var that = this
			// console.log('res.target', n)
      if (n.name === NAME) {
        that.pinkId = that.$yroute.query.id
        that.getCombinationPink()
      }
    },
  },
  mounted() {
    let url = handleQrCode()
    if (url) {
      this.pinkId = url.pinkId
			console.log('QrCode pinkId', url)
    } else {
      this.pinkId = this.$yroute.query.id
			console.log('pinkId', this.$yroute.query)
    }
    this.getCombinationPink()
  },
	onShareAppMessage(res) {
		if (res.from === 'button') {// 来自页面内分享按钮
			// console.log('res.target', res.target)
		}
		return {
			title: '快来一起拼团！ '+this.storeCombination.title,
			path: '/pages/activity/GroupRule/index?id='+this.pinkId,
			// path: '/pages/activity/GroupRule/index?id='+this.id+'&spread='+this.$store.state.userInfo.uid,
			imageUrl: this.storeCombination.image
		}
	},
  methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},
    pay: function() {
      var that = this
      var data = {}
      data.productId = that.storeCombination.productId
      data.cartNum = that.pinkT.totalNum
      data.uniqueId = that.uniqueId
      data.combinationId = that.storeCombination.id
      data.new = 1
      postCartAdd(data)
        .then(res => {
          that.$yrouter.push({
            path: '/pages/order/OrderSubmission/index',
            query: {
              id: res.data.cartId,
              pinkid: that.pinkId,
            },
          })
        })
        .catch(err => {
          uni.showToast({
            title: err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
    },
    goPoster: function() {
      var that = this
      this.$yrouter.push({
        path: '/pages/activity/Poster/index',
        query: {
          id: that.pinkId,
          type: 1,
        },
      })
    },
    goOrder: function() {
      var that = this
      this.$yrouter.push({
        path: '/pages/order/OrderDetails/index',
        query: {
          id: that.currentPinkOrder,
        },
      })
    },
    //拼团列表
    goList: function() {
      this.$yrouter.push({
        path: '/pages/activity/GoodsGroup/index',
      })
    },
    //拼团详情
    goDetail: function(id) {
      this.$yrouter.push({
        path: '/pages/activity/GroupDetails/index',
        query: {
          id,
        },
      })
    },
    //拼团信息
    getCombinationPink: function() {
      var that = this
      getCombinationPink(that.pinkId).then(res => {
        that.$set(that, 'storeCombination', res.data.storeCombination)
        that.$set(that, 'pinkT', res.data.pinkT)
        that.$set(that, 'pinkAll', res.data.pinkAll)
        that.$set(that, 'count', res.data.count)
        that.$set(that, 'userBool', res.data.userBool)
        that.$set(that, 'pinkBool', res.data.pinkBool)
        that.$set(that, 'isOk', res.data.isOk)
        that.$set(that, 'currentPinkOrder', res.data.currentPinkOrder)
        that.$set(that, 'uniqueId', res.data.uniqueId)
        that.$set(that, 'userInfo', res.data.userInfo)
      })
    },
    //拼团取消
    getCombinationRemove: function() {
      var that = this
      getCombinationRemove({
        id: that.pinkId,
        cid: that.storeCombination.id,
      })
        .then(res => {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000,
          })
        })
        .catch(res => {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000,
          })
        })
    },
    lookAll: function() {
      this.iShidden = !this.iShidden
    },
  },
}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.content-box {
		margin: 20rpx 32rpx;
		width: 686rpx;
		// height: 317px;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		position: relative;
		.banner {
			width: 100%;
			height: 428rpx;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			position: relative;
			swiper {
				width: 100%;
				height: 100%;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				swiper-item {
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx 16rpx 0rpx 0rpx;
					}
				}
			}
			.dots {
				position: absolute;
				bottom: 16rpx;
				left: 50%;
				transform: translateX(-50%);
				.dot {
					margin: 0rpx 8rpx;
					width: 8rpx;
					height: 8rpx;
					background: #FFFFFF;
					border-radius: 50%;
				}
				.on {
					width: 34rpx;
					background: #2DB5AE;
					border-radius: 6rpx;
				}
			}
		}
		.link-icon {
			width: 32rpx;
			height: 80rpx;
			position: absolute;
			bottom: -54rpx;
			z-index: 2;
		}
		.left {
			left: 54rpx;
		}
		.right {
			right: 54rpx;
		}
	}
	
	.content-box .goods-info {
		padding: 24rpx 24rpx 42rpx;
		.price-box {
			font-size: 48rpx;
			font-family: Futura;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 64rpx;
			.productPrice {
				font-size: 30rpx;
				color: #999999;
				line-height: 40rpx;
				padding-left: 16rpx;
				padding-top: 18rpx;
			}
		}
		.goods-name {
			font-size: 34rpx;
			font-family: SourceHanSansSCVF;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 50rpx;
		}
		.info-text {
			font-size: 20rpx;
			font-family: SourceHanSansSCVF;
			font-weight: 600;
			color: #999999;
			line-height: 28rpx;
		}
	}
	
	.content-box .people-num-box {
		position: absolute;
		top: 0;
		right: 24rpx;
		width: 126rpx;
		height: 88rpx;
		overflow: hidden;
		padding: 0rpx 20rpx;
		.people-num {
			width: 100%;
			height: 88rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			background: #2DB5AE;
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #F5F6F8;
			line-height: 18rpx;
			text-align: center;
			padding-top: 2rpx;
			.num {
				font-size: 58rpx;
				font-family: Futura;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 58rpx;
			}
		}
		.people-num::before {
			width: 40rpx;
			height: 40rpx;
			content: "";
			position: absolute;
			top: 0rpx;
			left: -20rpx;
			border-radius: 20rpx;
			box-shadow: 20rpx -20rpx 0rpx #2DB5AE;
		}
		.people-num::after {
			width: 40rpx;
			height: 40rpx;
			content: "";
			position: absolute;
			top: 0rpx;
			right: -20rpx;
			border-radius: 20rpx;
			box-shadow: -20rpx -20rpx 0rpx #2DB5AE;
		}
	}
	
	.content-box {
		.pink-state {
			padding: 46rpx 0rpx 12rpx;
			font-size: 34rpx;
			font-family: SourceHanSansSCVF;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 50rpx;
			text-align: center;
		}
		.tip {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 38rpx;
			padding-bottom: 8rpx;
			text-align: center;
		}
		.group-countdown {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 32rpx;
		}
	}
	
	.user-box {
		padding: 46rpx 32rpx 0rpx;
		.user-item {
			width: 92rpx;
			height: 92rpx;
			box-shadow: 0rpx 0rpx 20rpx 6rpx rgba(0,0,0,0.08);
			border: 2rpx solid #D8D8D8;
			border-radius: 50%;
			.avatar {
				width: 100%;
				height: 100%;
				// width: 84rpx;
				// height: 84rpx;
				border-radius: 50%;
				background-color: #FFFFFF;
			}
			.no-avatar {
				width: 100%;
				height: 100%;
				// width: 84rpx;
				// height: 84rpx;
				border-radius: 50%;
				background-color: #FFFFFF;
				padding-left: 6rpx;
				padding-right: 5rpx;
				image {
					width: 100%;
				}
			}
			.leader-tip {
				width: 46rpx;
				height: 24rpx;
				background: linear-gradient(135deg, #39D396 0%, #1B8DCC 100%);
				border-radius: 16rpx;
				font-size: 16rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #F5F6F8;
				line-height: 24rpx;
				text-align: center;
				position: absolute;
				bottom: -6rpx;
				left: 26rpx;
			}
		}
		.leader {
			width: 92rpx;
			height: 92rpx;
			padding: 4rpx;
			border: none;
			background: linear-gradient(135deg, rgba(27, 141, 204, 1), rgba(57, 211, 150, 1));
			position: relative;
		}
	}
	
	.btn-box {
		padding: 38rpx 0rpx 26rpx;
		button {
			padding: 0;
		}
		.btn {
			margin: 0rpx auto 20rpx;
			width: 418rpx;
			height: 70rpx;
			background: #D8D8D8;
			border-radius: 16rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 70rpx;
			text-align: center;
		}
	}


// .tui-goods-item {
//   width: 100%;
//   padding: 20rpx 25rpx;
//   box-sizing: border-box;
//   display: flex;
//   justify-content: space-between;
//   background-color: #fff;
// }

// .tui-goods-img {
//   width: 180rpx;
//   height: 180rpx;
//   display: block;
//   flex-shrink: 0;
// }

// .tui-goods-center {
//   flex: 1;
//   padding: 12rpx 12rpx;
//   box-sizing: border-box;
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
// }

// .tui-goods-name {
//   word-break: break-all;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   display: -webkit-box;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 2;
//   font-size: 26rpx;
//   line-height: 32rpx;
// }

// .tui-price__box {
//   width: 100%;
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
// }

// .tui-goods-price {
//   width: 100%;
//   display: flex;
//   align-items: flex-end;
//   font-size: 24rpx;
//   color: #eb0909;
// }
// .tui-goods-price text {
//   font-size: 24rpx;
//   line-height: 24rpx;
//   color: #999;
//   padding-left: 20rpx;
// }

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

// .tui-price-large {
//   font-size: 32rpx;
//   line-height: 30rpx;
//   font-weight: 500;
// }

// .tui-price-tag {
//   height: 38rpx;
//   border: 1rpx solid #eb0909;
//   border-radius: 6rpx;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-size: 24rpx;
//   line-height: 24rpx;
//   transform: scale(0.8);
//   transform-origin: 100% center;
//   border-radius: 6rpx;
//   padding: 0 8rpx;
//   color: #eb0909;
//   flex-shrink: 0;
// }
// .tui-mtop__20 {
//   margin-top: 20rpx;
// }
// .tui-divider__content {
//   display: flex;
//   align-items: center;
// }
// .tui-divider__content image {
//   width: 36rpx;
//   height: 36rpx;
//   margin-right: 20rpx;
// }
// .tui-divider__content text {
//   font-size: 34rpx;
//   line-height: 34rpx;
//   color: #000000;
//   font-weight: bold;
// }
// .tui-group__time {
//   font-size: 24rpx;
//   font-weight: 400;
//   color: #999;
//   text-align: center;
// }
// .tui-group__box {
//   width: 100%;
//   padding: 50rpx 25rpx;
//   box-sizing: border-box;
//   background-color: #fff;
// }
// .tui-group__title {
//   width: 100%;
//   font-size: 34rpx;
//   line-height: 34rpx;
//   font-weight: 500;
//   text-align: center;
// }
// .tui-color__red {
//   color: #eb0909;
// }
// .tui-group-countdown {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-size: 24rpx;
//   color: #666666;
//   padding-top: 20rpx;
// }

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

// .tui-countdown-left {
//   padding-left: 6rpx;
// }
// .tui-user__box {
//   width: 100%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   padding-top: 60rpx;
// }
// .tui-user__item {
//   max-width: 128rpx;
//   margin: 0 40rpx;
// }
// .tui-size {
//   width: 100rpx;
//   height: 100rpx;
//   border-radius: 50%;
// }
// .tui-avatar__box {
//   position: relative;
//   border: 4rpx solid #eb0909;
// }
// .tui-user__none {
//   width: 108rpx;
//   height: 108rpx;
//   border: 0;
// }
// .tui-avatar__box image {
//   display: block;
//   width: 100%;
//   height: 100%;
// }
// .tui-team__leader {
//   position: absolute;
//   width: 64rpx;
//   height: 28rpx;
//   font-size: 24rpx;
//   background-color: #eb0909;
//   color: #fff;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   border-radius: 30px;
//   left: 50%;
//   top: -14rpx;
//   transform: translateX(-50%);
//   z-index: 10;
// }
// .tui-nickname {
//   font-size: 24rpx;
//   color: #999;
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   text-align: center;
//   padding-top: 12rpx;
// }
// .tui-btn__box {
//   padding-top: 60rpx;
// }

// .tui-group__text {
//   width: 100%;
//   display: flex;
//   align-items: center;
// }

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

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

// .tui-group__start .tui-group-title {
//   border-left: 0;
//   padding-left: 0;
// }
// .tui-group__start .tui-sub__info {
//   padding-right: 0;
// }
// .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-between {
//   justify-content: space-between;
// }
// .tui-btn__box .tui-btn {
//   margin-bottom: 30rpx !important;
// }

/*拼团玩法介绍 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-hot__title {
//   font-size: 30rpx;
//   line-height: 30rpx;
//   color: #333;
//   font-weight: bold;
// }

/*========商品 start======*/

// .tui-product__box {
//   width: 100%;
//   padding: 0 25rpx 60rpx 25rpx;
//   box-sizing: border-box;
// }

// .tui-product-list {
//   display: flex;
//   justify-content: space-between;
//   flex-direction: row;
//   flex-wrap: wrap;
//   box-sizing: border-box;
// }

// .tui-product-container {
//   flex: 1;
//   margin-right: 10rpx;
// }

// .tui-product-container:last-child {
//   margin-right: 0;
// }

// .tui-pro-item {
//   width: 100%;
//   margin-bottom: 10rpx;
//   background: #fff;
//   box-sizing: border-box;
//   border-radius: 12rpx;
//   overflow: hidden;
//   transition: all 0.15s ease-in-out;
// }

// .tui-flex-list {
//   display: flex;
//   margin-bottom: 1rpx !important;
// }

// .tui-pro-img {
//   width: 100%;
//   display: block;
//   flex-shrink: 0;
//   background-color: #f5f5f5;
// }

// .tui-proimg-list {
//   width: 280rpx;
//   height: 280rpx !important;
//   flex-shrink: 0;
//   border-radius: 12rpx;
// }

// .tui-pro-content {
//   flex: 1;
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
//   box-sizing: border-box;
//   padding: 20rpx;
// }

// .tui-pro-tit {
//   color: #2e2e2e;
//   font-size: 26rpx;
//   word-break: break-all;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   display: -webkit-box;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 2;
// }

// .tui-price__box {
//   width: 100%;
//   display: flex;
//   align-items: center;
//   padding-top: 12rpx;
// }

// .tui-price {
//   display: flex;
//   align-items: flex-end;
//   color: #eb0909;
// }

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

// .tui-price__large {
//   font-size: 34rpx;
//   line-height: 32rpx;
//   font-weight: 600;
// }

// .tui-price__original {
//   font-size: 24rpx;
//   line-height: 24rpx;
//   text-decoration: line-through;
//   color: #999;
//   padding-top: 10rpx;
//   padding-left: 12rpx;
// }

// .tui-group-btn {
//   max-width: 312rpx;
//   height: 48rpx;
//   border-radius: 6rpx;
//   background: #eb0909;
//   display: flex;
//   align-items: center;
//   padding: 4rpx;
//   margin-top: 10rpx;
//   box-sizing: border-box;
// }

// .tui-flex-btn {
//   height: 100%;
//   flex: 1;
//   text-align: center;
//   font-size: 26rpx;
//   line-height: 26rpx;
//   font-weight: 400;
//   color: #fff;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }

// .tui-flex-btn:first-child {
//   background: #fff;
// }

// .tui-group-text {
//   font-size: 25rpx;
//   line-height: 25rpx;
//   transform: scale(0.8);
//   transform-origin: 0 center;
//   padding-top: 30rpx;
//   color: #999;
// }

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

/*======商品======= end*/
</style>
