第一次提交
This commit is contained in:
wangxiaowei
229
pages/plus/assemble/fight-group-detail/fight-group-detail.vue
Normal file
229
pages/plus/assemble/fight-group-detail/fight-group-detail.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user