webapp / GreenwayWeb

<template>
	<view class="inviteSpell-con">
    <global-loading />

    <view class="grouped">
      <view class="fs32 font-color-FFF">{{remainPerson !== 0?'等待成团':'已成团'}}</view>
      <view class="fs26 number">{{inviteSpell.person}}人团</view>
    </view>
    <view class="topBox">
      <view class="title-box flex-row-plus">
        <image class="pro-img" :src="inviteSpell.image"></image>
        <view class="flex-column-plus mar-left-30">
          <view class="title-lab fs28">{{inviteSpell.productName}}</view>
          <view class="flex-row-plus flex-sp-between">
            <view class="flex-column-plus">
<!--              <view class="spellNum flex-items-plus font-color-C5AA7B mar-top-30 fs24">{{inviteSpell.person}}人团</view>-->
              <view class="flex-row-plus mar-top-30 flex-items">
                <label class="font-color-C83732 fs24">¥</label>
                <label class="font-color-C83732 fs36 mar-left-5">{{inviteSpell.price}}</label>
                <label class="font-color-CCC discountsPriceLine fs26 mar-left-20">¥{{inviteSpell.originalPrice}}</label>
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>
		<view class="spellpersonnel-box">
      <view class="bgBox flex-items-plus flex-column">
        <view class="flex-items flex-sp-around flex-row-plus mar-right-20">
          <view class="flex-column flex-items-plus mar-left-20" v-for="(item,index) in inviteSpell.personList" :key="index">
            <image v-if="index == 0" class="head-icon border-FF7 z-index-0" :src="item.headImage"></image>
            <image v-else class="head-icon " :src="item.headImage"></image>
            <view v-if="index == 0" class="fs18 colonel-box">团长</view>
          </view>
          <view v-for="ritem in remainPerson">
            <view class="replenish-icon flex-items-plus mar-left-20">?</view>
          </view>
        </view>
		  <view v-if="remainPerson !== 0">
			  <view class="mar-top-50 font-color-333">还差<label class="font-color-C5AA7B">{{remainPerson}}</label>人成团，距结束还剩{{hou}}:{{min}}:{{sec}}</view>
			  <view v-if="type == 1" @click="shareClick" class="offered-but font-color-FFF flex-items-plus mar-top-60">邀请好友拼单</view>
			  <view v-if="type == 0" @click="getOffered" class="offered-but font-color-FFF flex-items-plus mar-top-60">立即参团</view>
			  <view v-if="type == 1" @click="goinvitePoster" class="poster-but flex-items-plus mar-top-40">生成邀请海报</view>
		  </view>
      </view>
		</view>
		<view class="spellrule flex-items-plus flex-column mar-top-20">
			<view class="flex-row-plus">
				<view class="flex-row-plus flex-items-plus text-align">
					<view class="dot1"></view>
					<view class="dot2"></view>
					<view class="dot3"></view>
				</view>
				<label class="fs28 mar-left-20">拼团玩法</label>
				<view class="flex-row-plus flex-items-plus text-align mar-left-10">
					<view class="dot3"></view>
					<view class="dot2"></view>
					<view class="dot1"></view>
				</view>
			</view>
			<view class="mar-top-40">
				<u-steps :list="numList" mode="number" :current="-1"></u-steps>
			</view>
		</view>
		<!-- 商品详情 -->
		<u-popup class="goosDetailshow-box" v-model="goosDetailshowFlag" mode="bottom" border-radius="14">
			<view>
				<view class="detailImg-box flex-row-plus">
					<image class="detailImg" :src="skuImg"></image>
					<view class="flex-column-plus mar-left-40">
						<view class="font-color-C5AA7B">
							<label class="fs24">¥</label>
							<label class="fs36 mar-left-10">{{skuPrice}}</label>
						</view>
						<label class="fs24 font-color-999 mar-top-20">库存 {{stockNumber}} 件</label>
						<label class="fs24 mar-top-20">已选</label>
					</view>
				</view>
				<view class="color-box flex-column-plus">
					<view v-for="(attritem,index) in skuProdList.names" :key="index">
						<label class="fs24 font-color-999">{{attritem.skuName}}</label>
						<view class="colorName-box">
							<view class="pad-bot-30" v-for="(attrRes, resIndex) in attritem.values" :key="resIndex">
								<label class="colorName" :class="{'colorName-on' :subIndex[index] == resIndex}" @click="colorActiveClick(attrRes,index,resIndex)">{{attrRes.skuValue}}</label>
							</view>
						</view>
					</view>
				</view>
				<view class="goodsNum-box flex-row-plus flex-sp-between">
					<label class="font-color-999 fs24">数量</label>
					<view class="goodsNum">
						<label class="subtract" @click="numSub">-</label>
						<label class="goodsNumber" v-model="buyNum">{{buyNum}}</label>
						<label class="add" @click="numAdd">+</label>
					</view>
				</view>
				<view class="goosDetailbut-box flex-items-plus" :style="{'padding-bottom':(isIphone===true? 50:20)+'rpx'}">
					<view class="joinbuyBut" @click="getGroupSettlement(2)">确定</view>
				</view>
			</view>
		</u-popup>
		<shareSpell ref="shareSpell" @shareCancel='shareCancel' :url="url" :urlParms="urlParms" :img="inviteSpell.image" title="好友邀请您来拼单啦">
		</shareSpell>
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	import shareSpell from '@/component/share.vue'
	import ClipboardJS from "clipboard"
	export default {
		data() {
			return {
				numList: [{
					name: '选择商品 完成下单'
				}, {
					name: '支付开团 或参团'
				}, {
					name: '邀请好友 参与拼团'
				}, {
					name: '人满成团 失败退款'
				}, ],
				collageId:0,
				orderId:0,
				type:0,
				inviteSpell:{},
				personLen:0,
				remainPerson:0,
				hou: "00",
				min: "00",
				sec: "00",
				timeOut:undefined,
				goosDetailshowFlag: false,
				productId:0,
				skuId:0,
				shopGroupWorkId:0,
				buyNum:1,
				skuProdId:0,
				skuImg:'',
				skuPrice:0,
				stockNumber:0,
				skuProdList:{},
				isIphone: "",
				selectArr: [], // 存放被选中的值
				subIndex: [], // 是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
				attrItemIdArr: [], //存放被选中的id
				shopId:0,
				attrList: [],
				productDetail:{},
				userInfo: {},
				url: '',
				shareTitle: '',
				showJoinGroup: false,
				showGroupText: '立即参团',
        urlParms: ''
			};
		},
		components:{
			shareSpell
		},
		onShareAppMessage: function(res) {
			var that = this;
			//console.log('res=====',res);
			if (res.from === 'button') {
				//console.log('来自页面内转发按钮');
			} else if (res.from === 'menu'){
				//console.log('右上角菜单转发按钮');
			}
			this.url = '/pages_category_page1/goodsModule/inviteSpell?collageId='
					+ this.collageId +'&orderId='+ this.orderId+'&type=0'+'&productId='+this.productId+'&skuId='+this.skuId+'&shopGroupWorkId='+this.shopGroupWorkId
			this.shareTitle = `【仅剩${this.remainPerson}个名额】我${this.inviteSpell.price}元拼了${this.inviteSpell.productName}`
			// 返回数据
			return {
				title: that.shareTitle,
				path: that.url,
				success: function(res) {
					// 转发成功，可以把当前页面的链接发送给后端，用于记录当前页面被转发了多少次或其他业务
					wx.request({
						url: app.buildUrl("/member/share"),
						data: {
							url: utils.getCurrentPageUrlWithArgs()
						},
						success: function(res) {
							//console.log('成功');
						}
					});
				},
				fail: function(res) {
					// 转发失败
				}
			}
		},
		onUnload() {
			if(this.timeOut){
			    clearTimeout(this.timeOut)
			}
		},
		onShow(){
            //判断是否登录
			let item = {}
			if(uni.getStorageSync('storage_key')){
				item = uni.getStorageSync('storage_key');
			}
			if(JSON.stringify(item) == '{}'){
				let data = {
					collageId : this.collageId,
					orderId : this.orderId,
					productId : this.productId,
					skuId : this.skuId,
					type : this.type,
				}
				uni.setStorageSync("inviteSpell",data)
				// uni.navigateTo({
				// 	url:'../../pages_category_page2/userModule/accountLogin?inviteSpell=1'
				// })
			}else{
				this.userInfo = uni.getStorageSync('storage_userInfo')
			}
			this.getInviteSpell()
		},
		onLoad(options) {
			console.log(options,'options')
			this.isIphone = getApp().globalData.isIphone;
			let item = getApp().globalData.inviteSpellShareIte
			if (item) {
				this.collageId = parseInt(item.collageId)
				this.orderId = parseInt(item.orderId)
				this.productId = parseInt(item.productId)
				this.skuId = parseInt(item.skuId)
				this.shopGroupWorkId = parseInt(item.shopGroupWorkId)
				getApp().globalData.inviteSpellShareItem = undefined
			} else {
				this.collageId = parseInt(options.collageId)
				this.orderId = parseInt(options.orderId)
				this.productId = parseInt(options.productId)
				this.skuId = parseInt(options.skuId)
				this.shopGroupWorkId = parseInt(options.shopGroupWorkId)
			}
			// #ifdef MP-WEIXIN
			this.url = '/pages_category_page1/goodsModule/inviteSpell?collageId=' +
				this.collageId + '&orderId=' + this.orderId + '&productId=' + this.productId + '&skuId=' + this.skuId +
				'&shopGroupWorkId=' + this.shopGroupWorkId
      this.urlParms = this.collageId + '&orderId=' + this.orderId + '&productId=' + this.productId + '&skuId=' + this.skuId +
          '&shopGroupWorkId=' + this.shopGroupWorkId
			// #endif
			// #ifndef MP-WEIXIN
			this.url = '/h5/#/pages_category_page1/goodsModule/inviteSpell?collageId=' +
				this.collageId + '&orderId=' + this.orderId + '&productId=' + this.productId + '&skuId=' + this.skuId +
				'&shopGroupWorkId=' + this.shopGroupWorkId
			// #endif
		},
		methods:{
			getOffered(){
        this.goosDetailshowFlag = true
			},
			//拼团下单
			getGroupSettlement(type){
        uni.removeStorageSync("skuItemDTOList")
				let data={}
				data= {
					collageId:this.collageId,
					number:this.buyNum,
					productId:this.productId,
					shopId:this.shopId,
					skuId:this.skuProdId,
					shopGroupWorkId:this.shopGroupWorkId,
					type:type
				}
				uni.setStorageSync('skuItemList',data)
				this.goosDetailshowFlag = false
				this.buyNum = 1
				uni.navigateTo({
					url: '../orderModule/orderConfirm?type=1',
				})
			},
			//获取商品详情
			queryProductDetail() {
				NET.request(API.QueryProductDetail,
				{
					shopId:this.shopId,
					productId:this.productId,
					skuId:this.skuId,
					terminal:1
				},
				"GET").then(res => {
					this.productDetail = res.data
					for (let i = 0; i < res.data.attrList.length; i++) {
						this.subIndex[i] = 0
					}
					this.attrItemIdArr[0] = res.data.attrList[0].attrValueList[0].id
				}).catch(res => {
				})
			},
			getProductSku(){
				NET.request(API.QueryProductSku, {
					skuId:this.skuId,
					productId:this.productId
				}, 'GET').then(res => {
					this.skuProdList = res.data
					this.attrList = res.data.names
					this.attrValueList = res.data.names[0].values
					//渲染商详之后，默认先选中第一个规格
					this.colorActiveClick(this.attrValueList[0],0,0)
					this.skuProdId = this.skuId
					this.skuImg = res.data.image
					this.skuPrice = res.data.price
					this.stockNumber = res.data.stockNumber
					this.shopId = res.data.shopId

				}).catch(res => {

				})

			},
			// 数量减
			numSub() {
				if (this.buyNum > 1) {
					this.buyNum = this.buyNum - 1
				} else {
					uni.showToast({
						title: '亲！至少一件哦！',
						icon: "none"
					})
				}
			},
			// 数量加
			numAdd() {
				if(this.buyNum < this.stockNumber){
					this.buyNum = this.buyNum + 1
				}else{
					uni.showToast({
						title: '库存不足！',
						icon: "none"
					})
				}
			},
			//颜色选中事件
			colorActiveClick(res, index, resIndex) {
				let t = this;
				t.selectArr[index] = res;
				t.subIndex[index] = resIndex;
				t.attrItemIdArr[index] = res.valueCode
				t.checkItem();
				t.checkItemDataClick(t.attrItemIdArr)
			},
			checkItem() {
				var self = this;
				var option = self.attrList;
				var result = []; // 定义数组存储被选中的值
				for (let i in option) {
					result[i] = self.selectArr[i] ? self.selectArr[i] : "";
					if (!self.subIndex[i]) {
						self.subIndex[i] = 0
					}
					if (!self.attrItemIdArr[i]) {
						self.attrItemIdArr[i] = option[i].values[0].valueCode
					}
				}
				for (let i in option) {
					var last = result[i]; // 把选中的值存放到字符串last去
					for (let k in option[i].item) {
						result[i] = option[i].item[k].name; // 赋值，存在直接覆盖，不存在往里面添加name值
					}
					result[i] = last; // 还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
				}
				self.$forceUpdate(); // 重绘
			},
			checkItemDataClick(attrItemIdArr) {
				let attrkey = ''
				for(let i =0;i<attrItemIdArr.length;i++){
					attrkey += attrItemIdArr[i]+','
				}
				attrkey = attrkey.substring(0,attrkey.length - 1)
				let mapinfo = this.skuProdList.map
				for (var key in mapinfo){
					if(attrkey == key){
						this.skuProdId = mapinfo[key].skuId
						this.skuImg = mapinfo[key].skuImg
						this.skuPrice = mapinfo[key].price
						this.stockNumber = mapinfo[key].stockNumber
					}
				}
			},
			shareClick(){
				this.$refs.shareSpell.shareShow = true
			},
			shareCancel(){
				this.$refs.shareSpell.shareShow = false
			},
			goinvitePoster(){
			  console.log(this.inviteSpell, 'test')
				let data = {
					image:this.inviteSpell.image,
					headImage:this.inviteSpell.headImage,
					productName:this.inviteSpell.productName,
					person:this.inviteSpell.person,
					originalPrice:this.inviteSpell.originalPrice,
					price:this.inviteSpell.price,
					collageId:this.collageId,
          productId:this.productId,
          skuId:this.skuId,
					orderId:this.orderId
				}
				uni.navigateTo({
					url:'invitePoster?data='+ JSON.stringify(data)
				})
			},
			getInviteSpell(){
				// uni.showLoading({
        //           mask: true,
				//   title: '加载中...',
				// })
				NET.request(API.getInviteSpell, {
					collageId:this.collageId,
					orderId: this.orderId
				}, 'POST').then(res => {
					this.inviteSpell = res.data
					this.type = 0
					this.inviteSpell.personList.forEach(item=>{
						if(item.buyerUserId === this.userInfo.buyerUserId){
							this.type = 1
						}
					})
					this.personLen = res.data.personList.length
					this.remainPerson = res.data.person - this.personLen
					this.dateformat(res.data.time)
					this.countDown()
					uni.hideLoading()
				}).catch(res => {
				  uni.hideLoading()
				})
			},
			//时分秒换算
			dateformat(micro_second) {
				// 总秒数
				let second = Math.floor(micro_second / 1000);
				// 天数
				let day = Math.floor(second / 3600 / 24);
				// 小时
				let hr = Math.floor(second / 3600 % 24);
				// 分钟
				let min = Math.floor(second / 60 % 60);
				// 秒
				let sec = Math.floor(second % 60);
				this.hou = hr
				this.min = min
				this.sec = sec
			},
			countDown(){
			    let timeOut = setTimeout(() => {
			      let hou = parseInt(this.hou);
			      let min = parseInt(this.min);
			      let sec = parseInt(this.sec);

			      let netxSec = sec - 1;
			      let netxMin = min
			      let netxHou = hou;

			      if (netxHou == 0 && netxMin == 0 && netxSec == -1) {
			        clearTimeout(timeOut)
					// uni.switchTab({
					// 	url:'../../pages/tabbar/index/index'
					// })
			      } else {
			        if (netxSec == -1) {
			          netxSec = 59
			          netxMin = netxMin - 1;
			        }
			        if (netxMin == -1) {
			          netxMin = 59
			          netxHou = netxHou - 1
			        }
			        if (netxHou == -1) {
			          netxHou = 23
			        }

			        this.hou = this.timeFormat(netxHou),
			        this.min = this.timeFormat(netxMin),
			        this.sec = this.timeFormat(netxSec),
			        this.timeOut = timeOut
			        this.countDown();
			      }
			    }, 1000)
			},
			timeFormat(param) { //小于10的格式化函数
			    return param < 10 ? '0' + param : param;
			},
		}
	}
</script>

<style lang="scss">
page{background-color: #F7F7F7;}
.copy-color{
	display: flex;
	justify-content: center;
	align-items:center;
	flex-direction: column;
}
.inviteSpell-con{
  background: url("https://zhgw-uat.028wlkj.com/cdwlMall/zsfwzxt/file/static/images/pintuanbg.png") no-repeat left top;
  background-size: contain;
  .grouped {
    text-align: center;
    padding-top: 40rpx;
    .number {
      display: inline-block;
      color: #FFEBC4;
      height: 48rpx;
      line-height: 48rpx;
      padding: 0 30rpx;
      background: #525252;
      margin-top: 10rpx;
    }
  }
	.z-index-0{
		z-index: 0;
	}
	.border-FF7{
		border: 2rpx solid #FFF;
	}
	.colonel-box{
		color: #FFEBC4;
		background-color: #333333;
		width: 86rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 15rpx;
		text-align: center;
		margin-top: -20rpx;
		z-index: 2;
	}
	.font-color-C5AA7B{
		color: #C5AA7B;
	}
  .topBox {
    padding: 40rpx 20rpx 0 20rpx;
  }
	.title-box{
		padding: 30rpx;
    background: #FFFFFF;
		.title-lab{
			width: 400rpx;
      height: 130rpx;
		}
		.spellNum{
			background-color: #FFEDDF;
			border-radius: 22rpx;
			width: 144rpx;
			height: 44rpx;
		}
		.pro-img{
			width: 222rpx;
			height: 222rpx;
		}
		.issueregiment{
			width: 120rpx;
			height: 122rpx;
		}
	}
	.spellpersonnel-box{
		margin-top: 20rpx;
    padding: 0 20rpx;
    .bgBox {
      background-color: #FFFFFF;
      padding: 30rpx 0;
    }
		.head-icon{
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
		}
		.replenish-icon{
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
			border: 1rpx #E5E5E5 dashed;
			font-size: 60rpx;
			color: #DBDBDB;
		}
		.offered-but{
			background-color: #333333;
			border-radius: 5rpx;
			width: 420rpx;
			height: 66rpx;
      color: #FFEBC4;
		}
		.poster-but{
			border: #C5AA7B 1rpx solid;
			border-radius: 5rpx;
			width: 420rpx;
			height: 66rpx;
			color: #C5AA7B;
		}
	}
	.spellrule{
		background-color: #FFFFFF;
		padding: 50rpx 20rpx;
		.dot1{
			width: 4rpx;
			height: 4rpx;
			background-color: #B6B6C1;
			border-radius: 50%;
			margin-left: 10rpx;
		}
		.dot2{
			width: 6rpx;
			height: 6rpx;
			background-color: #B6B6C1;
			border-radius: 50%;
			margin-left: 10rpx;
		}
		.dot3{
			width: 8rpx;
			height: 8rpx;
			background-color: #B6B6C1;
			border-radius: 50%;
			margin-left: 10rpx;
		}
	}
	.inactive-box{
		padding: 40rpx 40rpx;
		.weixin-box{
			width: 100rpx;
			height: 100rpx;
			background-color: #F5F5F5;
			border-radius: 50%;
			image{
				width: 55rpx;
				height: 55rpx;
			}
		}
	}
	.goosDetailshow-box {
		.detailImg-box {
			margin-top: 30upx;
			margin-left: 30upx;
			border-radius: 10upx;
			border-bottom: 1upx solid #EDEDED;
			padding-bottom: 20upx;
			width: 690upx;

			.detailImg {
				width: 180upx;
				height: 180upx;
			}
		}

		.color-box {
			padding: 30upx 30upx;
			border-bottom: 1upx solid #EDEDED;
			width: 690upx;

			.colorName-box {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 30upx;
				margin-left: -30upx;

				.colorName-on {
					background-color: #FFE5D0;
					color: #C5AA7B;
					margin-left: 30upx;
					padding: 10upx 32upx;
					border-radius: 28upx;
					border: 1upx solid #C5AA7B;
					font-size: 26upx;
					text-align: center;
					z-index: 1;
				}

				.colorName {
					background-color: #F5F5F5;
					margin-left: 30upx;
					padding: 10upx 32upx;
					border-radius: 28upx;
					font-size: 26upx;
					z-index: 2;
				}
			}

		}

		.modelNum-box {
			padding: 30upx 30upx;
			border-bottom: 1upx solid #EDEDED;
			width: 690upx;

			.modelNumName-box {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 30upx;
				margin-left: -30upx;

				.modelNumName-on {
					background-color: #FFE4D0;
					color: #C5AA7B;
					margin-left: 30upx;
					padding: 10upx 32upx;
					border-radius: 28upx;
					border: 1upx solid #C5AA7B;
					font-size: 26upx;
					text-align: center;
				}

				.modelNumName {
					background-color: #F5F5F5;
					margin-left: 30upx;
					padding: 10upx 32upx;
					border-radius: 28upx;
					font-size: 26upx;
				}
			}
		}
	.joinbuyBut{
		width: 690upx;
		height: 80upx;
		border-radius: 40upx 40upx;
		background-color: #3D3C3D;
		color: #FFFEFE;
		font-size: 28upx;
		line-height: 80upx;
		text-align: center;
	}
		.goodsNum-box {
			padding: 30upx 30upx;
			width: 690upx;
			padding-bottom: 268upx;

			.goodsNumber {
				border: 1upx solid #999999;
				padding: 3upx 20upx;
			}

			.subtract {
				border: 1upx solid #999999;
				padding: 3upx 20upx;
				margin-right: -1upx;
			}

			.add {
				border: 1upx solid #999999;
				padding: 3upx 20upx;
				margin-left: -1upx;
			}
		}

		.goosDetailbut-box {
			.joinShopCartBut {
				width: 343upx;
				height: 80upx;
				border-radius: 40upx 0 0 40upx;
				background-color: #3D3C3D;
				color: #FFFEFE;
				font-size: 28upx;
				line-height: 80upx;
				text-align: center;
				margin-left: 30upx;
			}

			.buyNowBut {
				width: 343upx;
				height: 80upx;
				border-radius: 0 40upx 40upx 0;
				background-color: #3D3C3D;
				color: #FFFEFE;
				font-size: 28upx;
				line-height: 80upx;
				text-align: center;
			}
		}
	}
}
</style>
<style scoped>
 .spellrule /deep/ .u-steps__item__num {
   background: #F3F4F5 !important;
   border: none !important;
   width: 60rpx;
   height: 60rpx;
 }
 .spellrule /deep/ .u-steps .u-steps__item--row .u-steps__item__line {
   left: 66%;
   width: 67%;
 }
 .spellrule /deep/ .u-steps .u-steps__item--row .u-line {
   height: 6rpx;
   border-bottom: none;
   background: #F3F4F5;
   border-bottom: none !important;
 }
 .spellrule /deep/ .u-steps .u-steps__item--row .u-steps__item__text--row {
   width: 180rpx;
   padding: 0 25rpx;
 }
</style>