tuanfeng-shop-user/pages_category_page1/goodsModule/inviteSpell.vue

<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 class="mar-top-20"> -->
						<!--              <image class="issueregiment" src="../../static/images/origin/issueregiment.png"></image> -->
						<!--            </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
						v-for="(item, index) in inviteSpell.personList" :key="index"
						class="flex-column flex-items-plus mar-left-20"
					>
						<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" class="offered-but font-color-FFF flex-items-plus mar-top-60" @click="shareClick">
						邀请好友拼单
					</view>
					<view v-if="type == 0" class="offered-but font-color-FFF flex-items-plus mar-top-60" @click="getOffered">
						立即参团
					</view>
					<view v-if="type == 1" class="poster-but flex-items-plus mar-top-40" @click="goinvitePoster">
						生成邀请海报
					</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 v-model="goosDetailshowFlag" class="goosDetailshow-box" 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 v-for="(attrRes, resIndex) in attritem.values" :key="resIndex" class="pad-bot-30">
								<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 v-model="buyNum" class="goodsNumber">{{ 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" :url="url" :url-parms="urlParms" :img="inviteSpell.image"
			title="好友邀请您来拼单啦"
			@shareCancel="shareCancel"
		>
		</ShareSpell>
	</view>
</template>

<script>
import { J_STORAGE_KEY } from '../../config/constant'
const NET = require('../../utils/request')
const API = require('../../config/api')
import shareSpell from '@/component/share.vue'
import ClipboardJS from 'clipboard'
export default {
	components: {
		ShareSpell: shareSpell
	},
	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: ''
		}
	},
	onShareAppMessage(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(res) {
				// 转发成功，可以把当前页面的链接发送给后端，用于记录当前页面被转发了多少次或其他业务
				wx.request({
					url: app.buildUrl('/member/share'),
					data: {
						url: utils.getCurrentPageUrlWithArgs()
					},
					success(res) {
						// console.log('成功');
					}
				})
			},
			fail(res) {
				// 转发失败
			}
		}
	},
	onUnload() {
		if (this.timeOut) {
			clearTimeout(this.timeOut)
		}
	},
	onShow() {
		// 判断是否登录
		let item = {}
		if (uni.getStorageSync(J_STORAGE_KEY)) {
			item = uni.getStorageSync(J_STORAGE_KEY)
		}
		if (JSON.stringify(item) == '{}') {
			const data = {
				collageId: this.collageId,
				orderId: this.orderId,
				productId: this.productId,
				skuId: this.skuId,
				type: this.type
			}
			uni.setStorageSync('inviteSpell', data)
		} else {
			this.userInfo = uni.getStorageSync('storage_userInfo')
		}
		this.getInviteSpell()
	},
	onLoad(options) {
		this.isIphone = getApp().globalData.isIphone
		const 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)
		}
		this.getProductSku()
		this.queryProductDetail()
		// #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
			}
			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) {
			const 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 (const 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 (const i in option) {
				var last = result[i] // 把选中的值存放到字符串last去
				for (const 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)
			const 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() {
			const 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) {
			// 总秒数
			const second = Math.floor(micro_second / 1000)
			// 天数
			const day = Math.floor(second / 3600 / 24)
			// 小时
			const hr = Math.floor(second / 3600 % 24)
			// 分钟
			const min = Math.floor(second / 60 % 60)
			// 秒
			const sec = Math.floor(second % 60)
			this.hou = hr
			this.min = min
			this.sec = sec
		},
		countDown() {
			const timeOut = setTimeout(() => {
				const hou = parseInt(this.hou)
				const min = parseInt(this.min)
				const sec = parseInt(this.sec)

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

				if (netxHou == 0 && netxMin == 0 && netxSec == -1) {
					clearTimeout(timeOut)
				// this.$switchTab('/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("../../static/images/origin/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>