230 lines
6.9 KiB
Vue
230 lines
6.9 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: ''
|
||
}
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.assemble_bill_id = e.assemble_bill_id;
|
||
//#ifdef H5
|
||
if (this.isWeixin()) {
|
||
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
|
||
console.log(self.billData.billUser);
|
||
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;}
|
||
.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>
|