mall-uniapp/pages/activity/goods_combination_status/index.vue

<template>
	<div class="group-con">
		<div class="header acea-row row-between-wrapper">
      <!-- 拼团活动的信息 -->
			<div class="pictrue">
        <img :src="pinkT.picUrl" />
      </div>
			<div class="text">
				<div class="line1" v-text="activity.name" />
				<div class="money">
					￥
					<span class="num" v-text="fen2yuan(pinkT.combinationPrice) || 0"></span>
					<span class="team cart-color">{{ pinkT.userSize + '人拼' }}</span>
				</div>
			</div>
			<div v-if="status === 3" class="iconfont icon-pintuanshibai"></div>
			<div v-else-if="status === 2" class="iconfont icon-pintuanchenggong font-color-red"></div>
		</div>
		<div class="wrapper">
      <!-- 拼团进展：拼团中 -->
			<div class="title acea-row row-center-wrapper" v-if="status === 1">
				<div class="line"></div>
				<div class="name acea-row row-center-wrapper">
					剩余
					<CountDown :bgColor="bgColor" :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '"
						:minute-text="' : '" :second-text="' '" :datatime="pinkT.expireTime / 1000"></CountDown>
					<span class="end">结束</span>
				</div>
				<div class="line"></div>
			</div>
      <!-- 拼团进展：拼团成功 -->
      <div class="tips font-color-red" v-if="status === 2">恭喜您拼团成功</div>
      <!-- 拼团进展：拼团失败 -->
      <div class="tips" v-else-if="status === 3">还差{{ count }}人，拼团失败</div>

      <!-- 拼团中的记录列表 -->
			<div class="tips font-color-red" v-else-if="status === 1">拼团中，还差{{ count }}人拼团成功</div>
      <!-- 当前拼团记录列表 -->
			<div class="list acea-row row-middle"
				:class="[status === 2 || status === 3 ? 'result' : '', iShidden ? 'on' : '']">
				<div class="pinkT">
					<div class="pictrue">
            <img :src="pinkT.avatar" />
          </div>
					<div class="chief">团长</div>
				</div>
				<block v-if="pinkAll.length > 0">
					<div class="pictrue" v-for="(item, index) in pinkAll" :key="item.id">
            <img :src="item.avatar" />
          </div>
				</block>
				<div class="pictrue" v-for="index in count">
          <img class="img-none" src="/static/images/vacancy.png" />
        </div>
			</div>
			<div v-if="(status === 2 || status === 3) && count > 9"
           class="lookAll acea-row row-center-wrapper"
           @click="lookAll">
				{{ iShidden ? '收起' : '查看全部' }}
				<span class="iconfont" :class="iShidden ? 'icon-xiangshang' : 'icon-xiangxia'" />
			</div>

      <!-- 拼团操作：邀请 -->
			<!-- #ifndef MP -->
			<div v-if="userBool === 1 && status === 1">
				<div class="teamBnt bg-color-red" @click="goPoster">邀请好友参团</div>
			</div>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<button open-type="share" class="teamBnt bg-color-red" v-if="userBool === 1 && status === 1">邀请好友参团</button>
			<!-- #endif -->
      <!-- 拼团操作：过期 -->
      <div class="teamBnt bg-color-hui" v-if="status === 3">拼团已过期</div>
      <!-- 拼团操作：参团 -->
      <div class="teamBnt bg-color-red" v-else-if="userBool === 0 && count > 0 && status === 1" @click="openAttr">
        我要参团
			</div>
      <!-- 拼团操作：再次开团 -->
      <div class="teamBnt bg-color-red" v-if="status === 2 || status === 3"
           @click="goDetail(activity.id)">再次开团</div>
      <!-- 拼团操作：再次开团 -->
      <div class="cancel" @click="getCombinationRemove" v-if="status === 1 && userBool === 1">
				<span class="iconfont icon-guanbi3" /> 取消开团
			</div>
      <!-- 拼团操作：查看订单 -->
			<div class="lookOrder" v-if="status === 2" @click="goOrder">
				查看订单信息 <span class="iconfont icon-xiangyou" />
			</div>
		</div>

    <!-- 更多拼团 -->
		<div class="group-recommend">
			<div class="title acea-row row-between-wrapper">
				<div>大家都在拼</div>
				<div class="more" @click="goList">
					更多拼团 <span class="iconfont icon-jiantou"></span>
				</div>
			</div>
			<div class="list acea-row row-middle">
				<div class="item" v-for="(item, index) in storeCombinationHost" :key="index" @click="goDetail(item.id)">
					<div class="pictrue">
						<img :src="item.picUrl" />
						<div class="team" v-text="(item.userSize) + '人团'"></div>
					</div>
					<div class="name line1" v-text="item.spuName"></div>
					<div class="money font-color-red" v-text="'￥' + fen2yuan(item.combinationPrice)"></div>
				</div>
			</div>
		</div>

    <!--  SKU 选择 -->
		<product-window
      :attr="attr"
      :iSbnt="1"
      @ChangeAttr="ChangeAttr"
			@ChangeCartNum="ChangeCartNum"
      @iptCartNum="iptCartNum"
      @close="closeAttr"
      @goCat="goPay"
    />
		<view class="mask" v-if="posters || canvasStatus" @click="listenerActionClose"></view>
		<!-- 发送给朋友图片 -->
		<view class="share-box" v-if="H5ShareBox">
			<image src="/static/images/share-info.png" @click="H5ShareBox = false"></image>
		</view>
		<!-- 海报展示 -->
		<view class='poster-pop' v-if="canvasStatus">
			<image :src='imagePath'></image>
			<!-- #ifndef H5  -->
			<view class='save-poster' @click="savePosterPath">保存到手机</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="keep">长按图片保存至相册</view>
			<view class='iconfont icon-cha2 close' @tap='listenerActionClose'></view>
			<!-- #endif -->
		</view>
		<view class="canvas">
			<canvas style="width:597px;height:850px;" canvas-id="activityCanvas"></canvas>
			<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}"
				style="opacity: 0;" />
		</view>
		<home></home>
	</div>
</template>
<script>
	import CountDown from '@/components/countDown';
	import ProductWindow from '@/components/productWindow';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
	import { imageBase64 } from "@/api/public";
	import { toLogin } from '@/libs/login.js';
	import { mapGetters } from 'vuex';
	import { postCombinationRemove } from '@/api/activity';
  import * as ProductSpuApi from '@/api/product/spu.js';
  import * as CombinationApi from '@/api/promotion/combination.js';
  import * as Util from '@/utils/util.js';
  import * as ProductUtil from '@/utils/product.js';
	import home from '@/components/home';
	const NAME = 'GroupRule';
	const app = getApp();
	export default {
		name: NAME,
		components: {
			CountDown,
			ProductWindow,
			home
		},
		props: {},
		data: function() {
			return {
        // ========== 拼团活动相关变量 ==========
        storeCombination: {}, //拼团产品
        activity: {}, // 拼团活动的信息
        bgColor: {
          'bgColor': '#333333',
          'Color': '#fff',
          'width': '44rpx',
          'timeTxtwidth': '16rpx',
          'isDay': true
        },

        // ========== 拼团记录相关变量 ==========
        pinkId: 0, // 拼团记录编号
        pinkT: {}, // 团长信息
        pinkAll: [], // 团员列表
        count: 0, // 拼团剩余人数
        userBool: 0, // 判断当前用户是否在团内 | 0=未在,1=在
        status: 1, // 拼团记录的状态 | 1=进行中,2=已完成,3=未完成
        iShidden: false, // 拼团记录是否隐藏（查看全部、收齐）
        currentPinkOrder: '', // 当前用户的拼团订单
        timestamp: (new Date()).getTime(), // 当前时间戳

        // ========== 商品相关变量 ==========
        spu: {}, // 商品 SPU 详情
        skuMap: [], // 商品 SKU Map
        attrValue: '', // 已选属性名的拼接，例如说 红色,大 这样的格式
        attr: { // productWindow 组件，使用该属性
          cartAttr: false,
          // ↓↓↓ 属性数组，结构为：id = 属性编号；name = 属性编号的名字；values[].id = 属性值的编号，values[].name = 属性值的名字；index = 选中的属性值的名字
          productAttr: [],
          productSelect: {} // 选中的 SKU
        },

        // ========== 用户相关变量 ==========
        userInfo: {},

        // ========== 拼团推荐相关变量 ==========
				storeCombinationHost: [], // 拼团推荐

        // ========== 分销相关的变量 ==========
        qrcodeSize: 600, // 二维码的大小
        promotionCode: '', // 二维码图片
        imgTop: '', // 商品图片的 base64 码
        posters: false, // 分享弹窗的开关
        canvasStatus: false, // 是否显示海报
        H5ShareBox: false, // 公众号分享的弹出
        posterbackgd: '/static/images/canbj.png',  // 海报的背景，用于海报的生成
      };
		},
		watch: {
			userData: {
				handler: function(newV, oldV) {
					if (newV) {
						this.userInfo = newV;
						app.globalData.openPages = '/pages/activity/goods_combination_status/index?id='
              + this.pinkId +
							"&spread=" + this.uid;
					}
				},
				deep: true
			}
		},
		computed: mapGetters({
			'isLogin': 'isLogin',
			'userData': 'userInfo',
			'uid': 'uid'
		}),
		onLoad(options) {
      // 未登录，需要先去登录
			this.pinkId = options.id;
			if (!this.isLogin) {
				toLogin();
			}

      // TODO 芋艿：这里调用下加载 userinfo 信息，目前先写死；
      this.userInfo = {
        nickname: '芋艿'
      }

      // 加载拼团信息
      this.getCombinationPink();
		},
		//#ifdef MP
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: '您的好友' + this.userInfo.nickname + '邀请您参团' + this.activity.name,
				path: app.globalData.openPages,
				imageUrl: this.pinkT.picUrl
			};
		},
		//#endif
		methods: {
      /**
       * 获得拼团记录
       */
      getCombinationPink: function() {
        CombinationApi.getCombinationRecordDetail(this.pinkId).then(res => {
          // 记录
          this.$set(this, 'pinkT', res.data.headRecord);
          this.$set(this, 'pinkAll', res.data.memberRecords);
          // 状态相关的字段
          this.$set(this, 'count', res.data.headRecord.userSize - res.data.headRecord.userCount);
          this.$set(this, 'userBool', res.data.orderId > 0 ? 1 : 0);
          this.$set(this, 'status', res.data.headRecord.status);
          this.$set(this, 'currentPinkOrder', res.data.orderId);

          // 加载拼团活动
          CombinationApi.getCombinationActivity(res.data.headRecord.activityId).then(res => {
            this.activity = res.data;

            // 获得商品详情
            this.getGoodsDetails();
          })

          // 加载更多拼团记录
          this.combinationMore();
        }).catch(err => {
          this.$util.Tips({
            title: err
          }, {
            url: '/pages/index/index'
          });
        });
      },
      /**
       * 前往订单
       */
      goOrder: function() {
        uni.navigateTo({
          url: '/pages/order_details/index?order_id=' + this.currentPinkOrder
        });
      },
      /**
       * 查看更多 / 收齐
       */
      lookAll: function() {
        this.iShidden = !this.iShidden;
      },
      // 拼团取消 TODO 芋艿
      getCombinationRemove: function() {
        var that = this;
        postCombinationRemove({
          id: that.pinkId
        }).then(res => {
          that.$util.Tips({
            title: res.msg
          }, {
            tab: 3
          });
        }).catch(res => {
          that.$util.Tips({
            title: res
          });
        });
      },

      // ========== 商品详情相关 ==========
      /**
       * 获取产品详情
       */
      getGoodsDetails: function() {
        ProductSpuApi.getSpuDetail(this.activity.spuId).then(res => {
          let spu = res.data;
          let skus = res.data.skus;
          this.$set(this, 'spu', spu);
          this.$set(this.attr, 'properties', ProductUtil.convertProductPropertyList(skus));
          this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus));
          // 将拼团活动的信息，合并到 SKU 里面，实现拼团价格的显示
          this.activity.products.forEach(product => {
            this.spu.price = Math.min(this.spu.price, product.combinationPrice); // 设置 SPU 的最低价格
          });
          skus.forEach(sku => {
            const product = this.activity.products.find(product => product.skuId === sku.id);
            if (product) {
              sku.price = product.combinationPrice;
            } else { // 找不到可能是没配置，则不能发起拼团
              sku.stock = 0;
            }
            // 设置限购数量
            if (this.activity.totalLimitCount > 0 && this.activity.singleLimitCount > 0) {
              sku.limitCount = Math.min(this.activity.totalLimitCount, this.activity.singleLimitCount);
            } else if (this.activity.totalLimitCount > 0) {
              sku.limitCount = this.activity.totalLimitCount;
            } else if (this.activity.singleLimitCount > 0) {
              sku.limitCount = this.activity.singleLimitCount;
            }
          });

          //#ifdef H5
          this.getImageBase64(spu.picUrl);
          this.make();
          this.setOpenShare();
          //#endif

          // 选中默认 sku
          this.selectDefaultSku();
        }).catch(err => {
          return this.$util.Tips({
            title: err.toString()
          }, {
            tab: 3,
            url: 1
          });
        })
      },
      /**
       * 默认选中属性
       */
      selectDefaultSku: function() {
        const properties = this.attr.properties;
        // 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"]
        let skuKey = undefined;
        for (let key in this.skuMap) {
          if (this.skuMap[key].stock > 0) {
            skuKey = key.split(",");
            break;
          }
        }
        if (!skuKey) { // 如果找不到，则选中第一个
          skuKey = Object.keys(this.skuMap)[0].split(",");
        }
        // 使用 index 属性表示当前选中的，值为属性值的名字
        for (let i = 0; i < properties.length; i++) {
          this.$set(properties[i], "index", skuKey[i]);
        }

        let sku = this.skuMap[skuKey.join(",")];
        if (!sku) {
          return
        }
        this.$set(this.attr.productSelect, "spuName", this.spu.name);
        this.$set(this.attr.productSelect, "id", sku.id);
        this.$set(this.attr.productSelect, "picUrl", sku.picUrl);
        this.$set(this.attr.productSelect, "price", sku.price);
        this.$set(this.attr.productSelect, "stock", sku.stock);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this.attr.productSelect, "limitCount", sku.limitCount); // 拼团活动特有字段
        this.$set(this, "attrValue", skuKey.join(","));
      },
      /**
       * 打开 SKU 属性的选择
       */
      openAttr: function() {
        this.$set(this.attr, 'cartAttr', true);
      },
      /**
       * 关闭 productWindow 弹窗
       */
      closeAttr: function() {
        this.$set(this.attr, 'cartAttr', false);
      },
      /**
       * 属性变动赋值
       *
       * @param newSkuKey 新的 skuKey
       * @param propertyIndex properties 的下标
       * @param valueIndex values 的下标
       */
      ChangeAttr: function(newSkuKey, propertyIndex, valueIndex) {
        // SKU
        let sku = this.skuMap[newSkuKey];
        if (!sku) {
          return;
        }
        this.$set(this.attr.productSelect, "id", sku.id);
        this.$set(this.attr.productSelect, "picUrl", sku.picUrl);
        this.$set(this.attr.productSelect, "price", sku.price);
        this.$set(this.attr.productSelect, "stock", sku.stock);
        this.$set(this.attr.productSelect, "limitCount", sku.limitCount);
        this.$set(this.attr.productSelect, "cart_num", 1);
        // SKU 关联属性
        this.$set(this.attr.properties[propertyIndex], 'index',
          this.attr.properties[propertyIndex].values[valueIndex].name);
        this.$set(this, "attrValue", newSkuKey);
      },
      /**
       * 购物车数量加和数量减
       *
       * @param changeValue true 增加；false 减少
       */
      ChangeCartNum: function(changeValue) {
        // 获取当前 sku
        let sku = this.attr.productSelect;
        if (!sku) {
          return;
        }

        // 设置数量
        let stock = sku.stock || 0;
        let limitCount = sku.limitCount;
        if (changeValue) {
          sku.cart_num++;
          if (limitCount > 0 && sku.cart_num > limitCount) {
            this.$set(this.attr.productSelect, "cart_num", limitCount);
            this.$util.Tips({
              title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}`
            });
          } else if (sku.cart_num > stock) {
            this.$set(this.attr.productSelect, "cart_num", stock);
          }
        } else {
          sku.cart_num--;
          if (sku.cart_num < 1) {
            this.$set(this.attr.productSelect, "cart_num", 1);
          }
        }
      },
      /**
       * 购物车手动填写
       *
       * @param number 数量
       */
      iptCartNum: function(number) {
        this.$set(this.attr.productSelect, 'cart_num', number ? number : 1);
        // 判断是否超限购
        let sku = this.attr.productSelect;
        let limitCount = sku.limitCount;
        if (limitCount > 0 && number > limitCount) {
          this.$set(this.attr.productSelect, "cart_num", limitCount);
          this.$util.Tips({
            title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}`
          });
        }
      },
      /**
       * 下订单
       */
      goPay() {
        let sku = this.attr.productSelect;
        uni.navigateTo({
          url: '/pages/users/order_confirm/index?skuId=' + sku.id + '&count=' + sku.cart_num
            + '&combinationActivityId=' + this.activity.id
            + '&combinationHeadId=' + this.pinkId
        });
      },
      /**
       * 拼团详情
       */
      goDetail: function(id) {
        uni.navigateTo({
          url: '/pages/activity/goods_combination_details/index?id=' + id
        });
      },

      // ========== 拼团推荐 ==========
      /**
       * 前往拼团列表
       */
      goList: function() {
        uni.navigateTo({
          url: '/pages/activity/goods_combination/index'
        });
      },
      /**
       * 更多拼团
       */
      combinationMore: function() {
        CombinationApi.getHeadCombinationRecordList(undefined, 1, 9).then(res => {
          this.storeCombinationHost = res.data;
        }).catch(res => {
          this.$util.Tips({
            title: res
          });
        })
      },

      // ========== 分销相关的方法 ==========
      /**
       * 生成二维码，设置到 promotionCode 变量
       */
      make() {
        let href = location.protocol + '//' + location.host +
          '/pages/activity/goods_combination_status/index?id=' + this.pinkId + "&spread=" + this.uid;
        uQRCode.make({
          canvasId: 'qrcode',
          text: href,
          size: this.qrcodeSize,
          margin: 10,
          success: res => {
            this.promotionCode = res;
          },
          fail: res => {
            this.$util.Tips({
              title: '海报二维码生成失败！'
            });
          }
        })
      },
      //#ifdef H5
      /**
       * 设置微信公众号的分享标题、内容等信息
       */
      setOpenShare() {
        // 只处理微信环境
        if (!this.$wechat.isWeixin()) {
          return
        }
        let configTimeline = {
          title: '您的好友' + this.userInfo.nickname + '邀请您参团' + this.spu.name,
          desc: this.spu.name,
          link: window.location.protocol + '//' + window.location.host +
            '/pages/activity/goods_combination_status/index?id=' + this.pinkId + "&spread=" + this.uid,
          imgUrl: this.spu.picUrl
        };
        this.$wechat.wechatEvevt([
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'onMenuShareAppMessage',
          'onMenuShareTimeline'], configTimeline)
          .then(res => {
            console.log(res);
          }).catch(res => {
            if (res.is_ready) {
              res.wx.updateAppMessageShareData(configTimeline);
              res.wx.updateTimelineShareData(configTimeline);
              res.wx.onMenuShareAppMessage(configTimeline);
              res.wx.onMenuShareTimeline(configTimeline);
            }
          });
      },
      //#endif
      /**
       * 获得商品的封面 base64
       */
      getImageBase64: function(images) {
        imageBase64({
          url: images
        }).then(res => {
          this.imgTop = res.data.code;
        })
      },
      /**
       * 生成海报
       */
      goPoster: function() {
        //#ifdef H5
        if (this.$wechat.isWeixin()) {
          this.H5ShareBox = true;
          return
        }
        // 提示正在生成中
        uni.showLoading({
          title: '海报生成中',
          mask: true
        });
        this.posters = false;
        // 如果没有二维码图片，则说明加载失败，进行错误提示
        if (!this.promotionCode) {
          uni.hideLoading();
          this.$util.Tips({
            title: this.errT
          });
          return
        }
        // 校验海报是否已经生成；如果失败，则进行错误提示
        setTimeout(() => {
          if (!this.imgTop) {
            uni.hideLoading();
            this.$util.Tips({
              title: '无法生成商品海报！'
            });
          }
        }, 1000);

        // 展示海报
        let arrImagesUrlTop = '';
        uni.downloadFile({
          url: this.imgTop,
          success: (res) => {
            arrImagesUrlTop = res.tempFilePath;
            let arrImages = [this.posterbackgd, arrImagesUrlTop, this.promotionCode];
            const price = this.fen2yuan(this.pinkT.combinationPrice);
            setTimeout(() => {
              this.$util.activityCanvas(arrImages, this.spu.name,
                price, this.pinkT.userSize +
                '人团', '还差' + this.count + '人拼团成功', 9,
                (tempFilePath) => {
                  this.imagePath = tempFilePath;
                  this.canvasStatus = true;
                  uni.hideLoading();
                });
            }, 500);
          }
        });
        //#endif
      },
      /**
       * 分享关闭
       */
      listenerActionClose: function() {
        this.posters = false;
        this.canvasStatus = false;
      },

      fen2yuan(price) {
        return Util.fen2yuan(price)
      }
		}
	};
</script>
<style lang="scss" scoped>
	.pinkT {
		position: relative;

		.chief {
			position: absolute;
			width: 72rpx;
			height: 30rpx;
			background-color: #E93323;
			border-radius: 15rpx;
			font-size: 20rpx;
			line-height: 30rpx;
			text-align: center;
			right: -24rpx;
			top: -16rpx;
			color: #fff;
		}
	}

	.canvas {
		position: fixed;
		opacity: 0;
	}
	.poster-pop {
		width: 594rpx;
		height: 850rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		top: 50%;
		margin-top: -466rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 10rpx;
		}

		.close {
			text-align: center;
			margin-top: 55rpx;
			color: #fff;
			font-size: 52rpx;
		}

		.save-poster {
			background-color: #df2d0a;
			font-size: ：22rpx;
			color: #fff;
			text-align: center;
			height: 76rpx;
			line-height: 76rpx;
			width: 100%;
		}

		.keep {
			color: #fff;
			text-align: center;
			font-size: 25rpx;
			margin-top: 25rpx;
		}
	}

	/*开团*/
	.group-con .header {
		width: 100%;
		height: 186rpx;
		background-color: #fff;
		border-top: 1px solid #f5f5f5;
		padding: 0 30rpx;
		position: relative;
	}

	.group-con .header .iconfont {
		font-size: 100rpx;
		position: absolute;
		color: #ccc;
		right: 33rpx;
		bottom: 20rpx;
	}

	.group-con .header .pictrue {
		width: 140rpx;
		height: 140rpx;
	}

	.group-con .header .pictrue img {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.group-con .header .text {
		width: 540rpx;
		font-size: 30rpx;
		color: #222;
	}

	.group-con .header .text .money {
		font-size: 24rpx;
		font-weight: bold;
		margin-top: 15rpx;
	}

	.group-con .header .text .money .num {
		font-size: 32rpx;
	}

	.group-con .header .text .money .team {
		padding: 1rpx 10rpx;
		font-weight: normal;
		border-radius: 50rpx;
		font-size: 20rpx;
		vertical-align: 4rpx;
		margin-left: 15rpx;
	}

	.group-con .wrapper {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 2rpx 0 35rpx 0;
	}

	.group-con .wrapper .title {
		margin-top: 30rpx;
	}

	.group-con .wrapper .title .line {
		width: 136rpx;
		height: 1px;
		background-color: #ddd;
	}

	.group-con .wrapper .title .name {
		margin: 0 45rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.group-con .wrapper .title .name .time {
		margin: 0 14rpx;
	}

	.group-con .wrapper .title .name .timeTxt {
		color: #fc4141;
	}

	.group-con .wrapper .title .name .time .styleAll {
		background-color: #ffcfcb;
		text-align: center;
		border-radius: 3rpx;
		font-size: 28rpx;
		font-weight: bold;
		display: inline-block;
		vertical-align: middle;
		color: #fc4141;
		padding: 2rpx 5rpx;
	}

	.group-con .wrapper .tips {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 30rpx;
		color: #999;
	}

	.group-con .wrapper .list {
		padding: 0 30rpx;
		margin-top: 45rpx;
	}

	.group-con .wrapper .list.result {
		max-height: 240rpx;
	}

	.group-con .wrapper .list.result.on {
		max-height: 2000rpx;
	}

	.group-con .wrapper .list .pictrue {
		width: 94rpx;
		height: 94rpx;
		margin: 0 0 29rpx 35rpx;
	}

	.group-con .wrapper .list .pictrue img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2rpx solid #e93323;
	}

	.group-con .wrapper .list .pictrue img.img-none {
		border: none;
	}

	.group-con .wrapper .lookAll {
		font-size: 24rpx;
		color: #282828;
		padding-top: 10rpx;
	}

	.group-con .wrapper .lookAll .iconfont {
		font-size: 25rpx;
		margin: 2rpx 0 0 10rpx;
	}

	.group-con .wrapper .teamBnt {
		font-size: 30rpx;
		width: 620rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		margin: 21rpx auto 0 auto;
	}

	.group-con .wrapper .cancel,
	.group-con .wrapper .lookOrder {
		text-align: center;
		font-size: 24rpx;
		color: #282828;
		padding-top: 30rpx;
	}

	.group-con .wrapper .cancel .iconfont {
		font-size: 35rpx;
		color: #2c2c2c;
		vertical-align: -4rpx;
		margin-right: 9rpx;
	}

	.group-con .wrapper .lookOrder .iconfont {
		font-size: 25rpx;
		color: #2c2c2c;
		margin-left: 10rpx;
	}

	.group-con .group-recommend {
		background-color: #fff;
		margin-top: 25rpx;
	}

	.group-con .group-recommend .title {
		padding-right: 30rpx;
		margin-left: 30rpx;
		height: 85rpx;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
		color: #282828;
	}

	.group-con .group-recommend .title .more {
		color: #808080;
	}

	.group-con .group-recommend .title .more .iconfont {
		margin-left: 13rpx;
		font-size: 28rpx;
	}

	.group-con .group-recommend .list {
		margin-top: 30rpx;
	}

	.group-con .group-recommend .list .item {
		width: 210rpx;
		margin: 0 0 25rpx 30rpx;
	}

	.group-con .group-recommend .list .item .pictrue {
		width: 100%;
		height: 210rpx;
		position: relative;
	}

	.group-con .group-recommend .list .item .pictrue img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.group-con .group-recommend .list .item .pictrue .team {
		position: absolute;
		top: 28rpx;
		left: -5rpx;
		min-width: 100rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		border-radius: 0 18rpx 18rpx 0;
		font-size: 20rpx;
		color: #fff;
		background-image: linear-gradient(to right, #fb5445 0%, #e93323 100%);
		background-image: -webkit-linear-gradient(to right, #fb5445 0%, #e93323 100%);
		background-image: -moz-linear-gradient(to right, #fb5445 0%, #e93323 100%);
	}

	.group-con .group-recommend .list .item .name {
		font-size: 28rpx;
		color: #333;
		margin-top: 0.18rem;
	}

	.group-con .group-recommend .list .item .money {
		font-weight: bold;
		font-size: 28rpx;
	}

	.share-box {
		z-index: 1000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>