|
|
|
<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.15);
|
|
|
|
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: 112rpx;
|
|
|
|
height: 88rpx;
|
|
|
|
overflow: hidden;
|
|
|
|
padding-left: 20rpx;
|
|
|
|
.people-num {
|
|
|
|
width: 72rpx;
|
|
|
|
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::after {
|
|
|
|
width: 40rpx;
|
|
|
|
height: 40rpx;
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
top: 0rpx;
|
|
|
|
left: -20rpx;
|
|
|
|
border-radius: 18rpx;
|
|
|
|
box-shadow: 18rpx -18rpx 0rpx #2DB5AE;
|
|
|
|
}
|
|
|
|
.people-num::before {
|
|
|
|
width: 40rpx;
|
|
|
|
height: 40rpx;
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
top: 0rpx;
|
|
|
|
right: -20rpx;
|
|
|
|
border-radius: 18rpx;
|
|
|
|
box-shadow: -18rpx -18rpx 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>
|