288 lines
7.0 KiB
Vue
288 lines
7.0 KiB
Vue
<template>
|
|
<view class="fight-group-detail" v-if="!loadding">
|
|
<!--产品-->
|
|
<view class="product-info p30 d-s-c bg-white">
|
|
<view class="product-cover">
|
|
<image :src="productData.product.image[0].file_path" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="info flex-1 ml30 f30">
|
|
<text>{{productData.product.product_name}}</text>
|
|
<view class="mt20">
|
|
<text>{{productData.assemble_num}}人团：</text>
|
|
<text class="ml30 red">￥</text>
|
|
<text class="fb red f34">{{productData.assembleSku[0].assemble_price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!--拼团人-->
|
|
<view class="fight-users mt20 bg-white">
|
|
<!--成员列表-->
|
|
<view class="user-list d-c-c">
|
|
<view class="user-box pr" v-for="(item,index) in billData.billUser" :key="index">
|
|
<text class="leader" v-if="index==0">团长</text>
|
|
<image :src="item.user.avatarUrl" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="user-box user-who d-c-c">
|
|
?
|
|
</view>
|
|
</view>
|
|
<view class="d-c-c mt30 gray3">
|
|
还差<text class="fb">{{dif_people}}</text>人成团
|
|
</view>
|
|
<view class="mt20 d-c-c gray6 f34">
|
|
<Countdown :config="countdownConfig" @returnVal="returnValFunc"></Countdown>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="leader-info d-b-c p30">
|
|
<view class="photo d-s-c">
|
|
<image :src="billData.user.avatarUrl" mode="aspectFit"></image>
|
|
<text class="ml20">{{billData.user.nickName}}</text>
|
|
</view>
|
|
<view class="gray9">
|
|
<text>{{billData.create_time}}</text>
|
|
<text class="ml10">开团</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!--底部按钮-->
|
|
<view class="fight-group-btns">
|
|
<button v-if="!reallyAssemble" type="default" class="btn-red" @click="gotoAssemble(billData)">去拼团</button>
|
|
<button v-else type="default" class="btn-red" open-type="share" @click="shareFunc">分享拼团</button>
|
|
</view>
|
|
|
|
<!--分享-->
|
|
<share :isMpShare="isMpShare" :product_id="product_id" @close="closeShare"></share>
|
|
<!--app分享-->
|
|
<AppShare :isAppShare="isAppShare" :appParams="appParams" @close="closeAppShare"></AppShare>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Countdown from '@/components/countdown/countdown.vue';
|
|
import share from '@/components/mp-share.vue';
|
|
import AppShare from '@/components/app-share.vue';
|
|
export default {
|
|
components: {
|
|
Countdown,
|
|
share,
|
|
AppShare
|
|
},
|
|
data() {
|
|
return {
|
|
/*是否正在加载*/
|
|
loadding: true,
|
|
/*拼团组ID*/
|
|
assemble_bill_id: null,
|
|
/*拼团组对象*/
|
|
billData: {},
|
|
/*商品对象*/
|
|
productData: {},
|
|
/*倒计时配置*/
|
|
countdownConfig: {
|
|
type: 'text',
|
|
/*开始时间*/
|
|
startstamp: 0,
|
|
/*结束时间*/
|
|
endstamp: 0
|
|
},
|
|
/*是否分享*/
|
|
isMpShare: false,
|
|
/*还差几人*/
|
|
dif_people: 0,
|
|
/*是否已经参团*/
|
|
reallyAssemble: false,
|
|
/*app分享*/
|
|
isAppShare: false,
|
|
appParams: {
|
|
title: '',
|
|
summary: '',
|
|
path: ''
|
|
},
|
|
url: ''
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.assemble_bill_id = e.assemble_bill_id;
|
|
//#ifdef H5
|
|
this.url = window.location.href;
|
|
//#endif
|
|
},
|
|
mounted() {
|
|
/*获取产品详情*/
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
|
|
/*获取数据*/
|
|
getData() {
|
|
let self = this;
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
self._get(
|
|
'plus.assemble.bill/detail', {
|
|
assemble_bill_id: self.assemble_bill_id,
|
|
url: self.url
|
|
},
|
|
function(res) {
|
|
self.billData = res.data.bill;
|
|
self.productData = res.data.product
|
|
self.countdownConfig.startstamp = 0;
|
|
self.countdownConfig.endstamp = self.billData.end_time;
|
|
self.dif_people = self.productData.assemble_num - self.billData.billUser.length < 0 ? 0 : self.productData.assemble_num -
|
|
self.billData.billUser.length
|
|
// 配置微信分享参数
|
|
//#ifdef H5
|
|
if (self.url != '') {
|
|
let params = {
|
|
assemble_bill_id: self.assemble_bill_id
|
|
};
|
|
self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
|
|
}
|
|
//#endif
|
|
self.reallyAssemble = self.hasAssemble(self.billData.billUser);
|
|
|
|
self.loadding = false;
|
|
uni.hideLoading();
|
|
}
|
|
);
|
|
},
|
|
|
|
/*查看是否已经拼团*/
|
|
hasAssemble(list) {
|
|
let flag = false;
|
|
let user_id = this.getUserId();
|
|
for (let i = 0; i < list.length; i++) {
|
|
if (user_id == list[i].user_id) {
|
|
flag = true;
|
|
break;
|
|
}
|
|
}
|
|
return flag;
|
|
},
|
|
|
|
/*分享*/
|
|
shareFunc() {
|
|
let self = this;
|
|
//#ifndef APP-PLUS
|
|
self.isMpShare = true;
|
|
//#endif
|
|
//#ifdef APP-PLUS
|
|
self.appParams.title = '【仅限' + self.dif_people + '个名额】，快来参与拼团吧';
|
|
self.appParams.summary = self.productData.product.product_name;
|
|
// 构建页面参数
|
|
let params = self.getShareUrlParams({
|
|
assemble_bill_id: self.assemble_bill_id
|
|
});
|
|
self.appParams.path = '/pages/plus/assemble/fight-group-detail/fight-group-detail?' + params;
|
|
self.appParams.image = self.productData.product.image[0].file_path;
|
|
self.isAppShare = true;
|
|
//#endif
|
|
},
|
|
|
|
/*关闭分享*/
|
|
closeShare() {
|
|
this.isMpShare = false;
|
|
},
|
|
//关闭分享
|
|
closeAppShare(data) {
|
|
this.isAppShare = false;
|
|
},
|
|
/*返回状态*/
|
|
returnValFunc() {},
|
|
/*小程序分享*/
|
|
onShareAppMessage() {
|
|
let self = this;
|
|
// 构建页面参数
|
|
let params = self.getShareUrlParams({
|
|
assemble_bill_id: self.assemble_bill_id
|
|
});
|
|
return {
|
|
title: '【仅限' + self.dif_people + '个名额】，快来参与拼团吧',
|
|
path: '/pages/plus/assemble/fight-group-detail/fight-group-detail?' + params
|
|
};
|
|
},
|
|
|
|
/*去拼团*/
|
|
gotoAssemble(e) {
|
|
let url = 'pages/plus/assemble/detail/detail?assemble_product_id=' + e.assemble_product_id + '&assemble_bill_id=' +
|
|
e.assemble_bill_id
|
|
this.gotoPage(url);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.fight-group-detail {
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.fight-group-detail .product-cover image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.fight-group-detail .fight-users .user-box {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin: 10rpx;
|
|
border-radius: 50%;
|
|
border: 1px dashed #CCCCCC;
|
|
}
|
|
|
|
.fight-group-detail .fight-users {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.fight-group-detail .fight-users .user-box image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.fight-group-detail .fight-users .user-box .leader {
|
|
position: absolute;
|
|
top: -20rpx;
|
|
left: 50%;
|
|
margin-left: -30rpx;
|
|
width: 60rpx;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
border: 1px solid #FFFFFF;
|
|
background: red;
|
|
z-index: 2;
|
|
}
|
|
|
|
.fight-group-detail .fight-users .user-box.user-who {
|
|
font-size: 50rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.fight-group-detail .leader-info .photo image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.fight-group-btns {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.fight-group-btns button.btn-red {
|
|
margin-bottom: 20rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
</style> |