324 lines
8.4 KiB
Vue
324 lines
8.4 KiB
Vue
<template>
|
|
<view class="wrapper" v-if="flage">
|
|
<div class='goods' v-if="selectedGoods">
|
|
<image class="goods-image" :src="selectedGoods.thumbnail" alt="">
|
|
<p class="goodsName">{{selectedGoods.goodsName}}</p>
|
|
<div class="goodsPrice">{{(selectedGoods.promotionPrice || selectedGoods.price ) | unitPrice('￥')}}</div>
|
|
</div>
|
|
<div>
|
|
<div class="tips">
|
|
|
|
<span v-if="master.toBeGroupedNum">
|
|
还差<span class="num">{{master.toBeGroupedNum || 0}}</span>人，赶快邀请好友拼单吧
|
|
</span>
|
|
<span v-if="isBuy &&!master.toBeGroupedNum >0">
|
|
已成功拼团
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="isMaster && !isOver">
|
|
<div class="share-user" v-if="master.toBeGroupedNum" @click="share()">
|
|
邀请好友拼团
|
|
</div>
|
|
<div class="home" @click="handleClickHome()">
|
|
去首页逛逛
|
|
</div>
|
|
</div>
|
|
<div v-if="!isMaster && !isOver && !isBuy">
|
|
<div class="share-user" @click="toBuy">
|
|
参与拼团
|
|
</div>
|
|
</div>
|
|
<div v-if="!isMaster && !isOver && isBuy">
|
|
<div class="share-user disabled">
|
|
已购买该商品
|
|
</div>
|
|
</div>
|
|
<div v-if="isOver">
|
|
<!-- <div class="share-user disabled">
|
|
拼团已结束
|
|
</div> -->
|
|
<div class="home" @click="handleClickHome()">
|
|
去首页逛逛
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 倒计时 -->
|
|
<div class="count-down" v-if="!isOver">
|
|
<u-count-down bg-color="#ededed" :hide-zero-day="true" @end="isOver" :timestamp="timeStamp"></u-count-down>
|
|
</div>
|
|
|
|
<div class="user-list" v-if="data.pintuanMemberVOS">
|
|
<div class="user-item" v-for="(item,index) in data.pintuanMemberVOS" :key="index">
|
|
<span class="master" v-if="item.orderSn == ''">团长</span>
|
|
<image class="img" :src="item.face" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" v-if="goodsDetail.id " @handleClickSku="getGoodsDetail" />
|
|
<shares @close="closeShare" :link="'/pages/cart/payment/shareOrderGoods?sn='+this.routers.sn+'&sku='+this.routers.sku+'&goodsId='+this.routers.goodsId" type="pintuan"
|
|
:thumbnail="data.promotionGoods.thumbnail" :goodsName="data.promotionGoods.goodsName" v-if="shareFlage " />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getGoods } from "@/api/goods.js";
|
|
import { getPinTuanShare } from "@/api/order";
|
|
import shares from "@/components/m-share/index";
|
|
import storage from "@/utils/storage.js";
|
|
import popupGoods from "./popup/goods"; //购物车商品的模块
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
flage:false, //判断接口是否正常请求
|
|
addr: {
|
|
id: "",
|
|
},
|
|
maskFlag: false, //商品弹框
|
|
timeStamp: 0,
|
|
shareFlage: false,
|
|
data: "",
|
|
isMaster: true,
|
|
selectedGoods: "", //选择的商品规格昵称
|
|
routers: "", //传参数据
|
|
goodsDetail: "", //商品详情
|
|
goodsSpec: "",
|
|
master: "", // 团长
|
|
PromotionList: "", //优惠集合
|
|
isGroup: false, //是否拼团
|
|
isOver: false, //是否结束活动
|
|
isBuy: false, //当前用户是是否购买
|
|
};
|
|
},
|
|
components: {
|
|
shares,
|
|
popupGoods,
|
|
},
|
|
watch: {
|
|
isGroup(val) {
|
|
if (val) {
|
|
let timer = setInterval(() => {
|
|
this.$refs.popupGoods.buyType = "PINTUAN";
|
|
clearInterval(timer);
|
|
}, 100);
|
|
} else {
|
|
this.$refs.popupGoods.buyType = "";
|
|
}
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
this.routers = options;
|
|
},
|
|
mounted() {
|
|
this.init(this.routers.sn, this.routers.sku);
|
|
},
|
|
methods: {
|
|
closeShare() {
|
|
this.shareFlage = false;
|
|
},
|
|
// 这里的话得先跳到商品详情才能购买商品
|
|
toBuy() {
|
|
this.maskFlag = true;
|
|
this.$refs.popupGoods.parentOrder = {
|
|
...this.master,
|
|
orderSn: this.routers.sn,
|
|
};
|
|
this.$refs.popupGoods.isMask = true;
|
|
this.$refs.popupGoods.isClose = true;
|
|
this.$refs.popupGoods.buyType = "PINTUAN";
|
|
},
|
|
// 分享
|
|
share() {
|
|
this.shareFlage = true;
|
|
},
|
|
closePopupBuy(val) {
|
|
this.maskFlag = false;
|
|
},
|
|
// 实例化本页面
|
|
async init(sn, sku) {
|
|
let res = await getPinTuanShare(sn, sku);
|
|
if (res.data.success && res.data.result.promotionGoods) {
|
|
this.flage = true
|
|
this.data = res.data.result;
|
|
this.selectedGoods = res.data.result.promotionGoods;
|
|
let endTime = Date.parse(
|
|
res.data.result.promotionGoods.endTime.replace(/-/g, "/")
|
|
);
|
|
// 获取当前剩余的拼团商品时间
|
|
let timeStamp = Date.parse(new Date(endTime)) / 1000;
|
|
|
|
// 获取当前时间时间戳
|
|
let dateTime = Date.parse(new Date()) / 1000;
|
|
|
|
this.timeStamp = parseInt(timeStamp - dateTime);
|
|
|
|
this.timeStamp <= 0 ? (this.isOver = true) : (this.isOver = false);
|
|
|
|
// 获取剩余拼团人数
|
|
this.master =
|
|
res.data.result.pintuanMemberVOS.length != 0 &&
|
|
res.data.result.pintuanMemberVOS.filter((item) => {
|
|
return item.orderSn == "";
|
|
})[0];
|
|
|
|
// 获取当前是否是拼团本人
|
|
if (
|
|
storage.getUserInfo(this.routers.sku, this.routers.goodsId).id ==
|
|
this.master.memberId
|
|
) {
|
|
this.isMaster = true;
|
|
} else {
|
|
this.isMaster = false;
|
|
// 获取商品详情
|
|
this.getGoodsDetail(this.routers.sku, this.routers.goodsId);
|
|
}
|
|
|
|
// 获取当前商品是否已经购买
|
|
if (storage.getUserInfo().id) {
|
|
let isBuy = res.data.result.pintuanMemberVOS.filter((item) => {
|
|
return item.memberId == storage.getUserInfo().id;
|
|
});
|
|
isBuy.length != 0 ? (this.isBuy = true) : (this.isBuy = false);
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '当前拼团单有误！请联系管理员重试',
|
|
duration: 2000,
|
|
icon:"none"
|
|
});
|
|
}
|
|
},
|
|
// 获取商品详情
|
|
getGoodsDetail(id, goodsId) {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
getGoods(id, goodsId).then((response) => {
|
|
this.goodsDetail = response.data.result.data;
|
|
this.selectedGoods = response.data.result.data;
|
|
this.goodsSpec = response.data.result.specs;
|
|
uni.hideLoading();
|
|
this.PromotionList = response.data.result.promotionMap;
|
|
|
|
// 判断是否拼团活动 如果有则显示拼团活动信息
|
|
this.PromotionList &&
|
|
Object.keys(this.PromotionList).forEach((item) => {
|
|
if (item.indexOf("PINTUAN") == 0) {
|
|
this.isGroup = true;
|
|
}
|
|
});
|
|
});
|
|
},
|
|
handleClickHome() {
|
|
uni.switchTab({
|
|
url: "/pages/tabbar/home/index",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #fff;
|
|
}
|
|
.over {
|
|
margin: 10% 0;
|
|
}
|
|
.goods {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
.goods-image {
|
|
margin: 40rpx auto;
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
}
|
|
.goodsName {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
.goodsPrice {
|
|
margin-top: 10rpx;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: $main-color;
|
|
}
|
|
.master {
|
|
z-index: 99;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: $light-color;
|
|
padding: 0 8rpx;
|
|
border-radius: 10rpx;
|
|
color: #fff;
|
|
}
|
|
.user-item {
|
|
position: relative;
|
|
margin: 20rpx;
|
|
}
|
|
.count-down {
|
|
margin: 40rpx 0;
|
|
text-align: center;
|
|
}
|
|
.img {
|
|
border-radius: 50%;
|
|
border: 2rpx solid $light-color;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
.user-list {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
.tips {
|
|
margin-top: 10%;
|
|
text-align: center;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
.num {
|
|
color: $main-color;
|
|
font-size: 60rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.home,
|
|
.share-user {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
width: 80%;
|
|
margin: 30rpx auto 0 auto;
|
|
color: #fff;
|
|
border-radius: 0.4em;
|
|
}
|
|
.share-user {
|
|
background: $main-color;
|
|
}
|
|
.disabled {
|
|
background: rgba($main-color, $alpha: 0.2);
|
|
}
|
|
.home {
|
|
color: $main-color;
|
|
border: 2rpx solid $main-color;
|
|
}
|
|
</style>
|