forked from zhongyuanhaiju/uniapp
1252 lines
34 KiB
Vue
1252 lines
34 KiB
Vue
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="guafen-box">
|
|
<view class="" v-if="groupInfoList.status != 2">
|
|
<view class="guafen_adv" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/hongbao_bg.png') + ')' }">
|
|
<view class="explain">
|
|
<view class="explain-img" @click="toIndex()"><image :src="$util.img('public/uniapp/hongbao/index.png')" mode="" class="index-img"></image></view>
|
|
<view class="desc ns-rule-bg" @click="openRulePopup">活动说明</view>
|
|
</view>
|
|
<view class="guafen_content" v-if="groupInfoList == '' && hongbaoInfo.status == 1">
|
|
<view class="guafen_content_title">点击 [立即领取] 邀请好友瓜分红包</view>
|
|
<view class="guafen_content_num">
|
|
{{ hongbaoInfo.money | int }}
|
|
<text>元</text>
|
|
</view>
|
|
<view class="btn font-size-base" @click="getLaunch()">立即领取</view>
|
|
</view>
|
|
<view class="guafen_content" v-if="(groupInfoList != '' && hongbaoInfo.status == 1 && groupInfoList.status == 0) || groupInfoList.status == 2">
|
|
<view class="guafen_photo">
|
|
<scroll-view :scroll-y="true" :show-scrollbar="false" v-if="groupInfoList.member_list.length > 0">
|
|
<view class="hongbao-lists">
|
|
<view class="guafen_header_img" v-for="(headerItem, headerIndex) in groupInfoList.member_list" :key="headerItem.member_id">
|
|
<image v-if="headerItem.headimg != ''" :src="$util.img(headerItem.headimg)" mode="" @error="headerimageError(headerIndex)"></image>
|
|
<image v-else :src="$util.img('public/uniapp/default_img/head.png')" mode=""></image>
|
|
</view>
|
|
<view class="guafen_header_img" @click="openSharePopup" v-for="(itm, inx) in groupInfoList.num - groupInfoList.member_list.length" :key="">
|
|
<text>+</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="guafen_content_title">
|
|
仅差
|
|
<text class="guafen_content_color">{{ groupInfoList.num - groupInfoList.member_list.length }}</text>
|
|
人，即可瓜分
|
|
<text class="guafen_content_color">{{ hongbaoInfo.money | int }}</text>
|
|
元现金红包
|
|
</view>
|
|
<view class="guafen_content_time">
|
|
<image :src="$util.img('public/uniapp/hongbao/bg_left.png')"></image>
|
|
<text class="seckill-title-name">距结束</text>
|
|
<uni-count-down class="guafen_content_color" :hour="seckillH" :minute="seckillI" :second="seckillS" borderColor="#fff" color="#FF4544" />
|
|
<image :src="$util.img('public/uniapp/hongbao/bg_right.png')"></image>
|
|
</view>
|
|
<view class="btn" @click="openSharePopup">邀请好友</view>
|
|
</view>
|
|
<view class="guafen_content" v-if="groupInfoList != '' && groupInfoList.status == 1 && g_member_state == 0">
|
|
<view class="guafen-success">恭喜你，成功瓜分现金红包</view>
|
|
<view :class="groupInfoList.member_list.length > 4 ? 'guafen_photo' : 'guafen_photo-two'">
|
|
<scroll-view :scroll-y="true" :show-scrollbar="false" v-if="groupInfoList.member_list.length > 0">
|
|
<view :class="groupInfoList.member_list.length > 4 ? 'hongbao-lists' : 'hongbao-lists-two'">
|
|
<view class="guafen_header_img" v-for="(headerItem, headerIndex) in groupInfoList.member_list" :key="headerItem.member_id">
|
|
<image v-if="headerItem.headimg != ''" :src="$util.img(headerItem.headimg)" mode="" @error="headerimageError(headerIndex)"></image>
|
|
<image v-else :src="$util.img('public/uniapp/default_img/head.png')" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="guafen-coupon">
|
|
{{ money }}
|
|
<text>元</text>
|
|
</view>
|
|
<view class="guafen-man color-sub font-size-tag">红包已存入您的账户余额中</view>
|
|
<view class="success-btn" @click="toLook()">立即查看</view>
|
|
<view class="success-guafen-btn" @click="toGuaFen">瓜分新红包</view>
|
|
</view>
|
|
<block v-if="(groupInfoList.status != 1 && hongbaoInfo.status == -1) || (groupInfoList.status != 1 && hongbaoInfo.status == 2)">
|
|
<view class="guafen_over">哎呀，来晚了，活动已结束</view>
|
|
</block>
|
|
<block v-if="hongbaoInfo.status == 1 && g_member_state == 1"><view class="guafen_over">来晚了，红包已被瓜分完</view></block>
|
|
</view>
|
|
<view class="guafen-how">
|
|
<view class="how-title font-size-toolbar">如何瓜分红包</view>
|
|
<view class="step">
|
|
<view class="step-img">
|
|
<image :src="$util.img('public/uniapp/hongbao/active.png')" class="step-one"></image>
|
|
<image :src="$util.img('public/uniapp/hongbao/jiantou.png')" class="step-jiantou"></image>
|
|
<image :src="$util.img('public/uniapp/hongbao/friend.png')" class="step-one"></image>
|
|
<image :src="$util.img('public/uniapp/hongbao/jiantou.png')" class="step-jiantou"></image>
|
|
<image :src="$util.img('public/uniapp/hongbao/reward.png')" class="step-three"></image>
|
|
</view>
|
|
<view class="step-txt">
|
|
<view class="color-sub font-size-tag">参与红包活动</view>
|
|
<view class="color-sub font-size-tag">邀请好友组队</view>
|
|
<view class="color-sub font-size-tag">集齐好友瓜分</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rule-description">
|
|
<view class="rule-description-title font-size-toolbar">活动说明</view>
|
|
<view class="color-sub remark">{{ hongbaoInfo.remark }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="detail-box" v-if="groupInfoList.status == 2">
|
|
<view class="status-wrap color-base-bg" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/order/status-wrap-bg.png') + ')' }">
|
|
<view class="order-status-left">
|
|
<view class="status-name">
|
|
<text class="iconfont icon-wode-tuangou fail"></text>
|
|
<text class="name font-size-toolbar">组队失败</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="guafen_content">
|
|
<view :class="groupInfoList.member_list.length > 4 ? 'guafen_photo' : 'guafen_photo-two'">
|
|
<scroll-view :scroll-y="true" :show-scrollbar="false" v-if="groupInfoList.member_list.length > 0">
|
|
<view :class="groupInfoList.member_list.length > 4 ? 'hongbao-lists' : 'hongbao-lists-two'">
|
|
<view class="guafen_header_img" v-for="(headerItem, headerIndex) in groupInfoList.member_list" :key="headerItem.member_id">
|
|
<image v-if="headerItem.headimg != ''" :src="$util.img(headerItem.headimg)" mode="" @error="headerimageError(headerIndex)"></image>
|
|
<image v-else :src="$util.img('public/uniapp/default_img/head.png')" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="guafen_content_title">
|
|
集齐{{ groupInfoList.num }}人可瓜分红包，还差
|
|
<text class="color-base-text">{{ groupInfoList.num - groupInfoList.member_list.length }}</text>
|
|
人
|
|
</view>
|
|
</view>
|
|
<view class="footer-guafen">
|
|
<view class="footer-list">
|
|
<text>活动开始时间</text>
|
|
<text>{{ $util.timeStampTurnTime(hongbaoInfo.start_time) }}</text>
|
|
</view>
|
|
<view class="footer-list">
|
|
<text>活动结束时间</text>
|
|
<text>{{ $util.timeStampTurnTime(hongbaoInfo.end_time) }}</text>
|
|
</view>
|
|
<view class="footer-list">
|
|
<text>组队时间</text>
|
|
<text>{{ $util.timeStampTurnTime(groupInfoList.start_time) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 活动规则 -->
|
|
<uni-popup ref="rulePopup" type="center" :maskClick="false">
|
|
<view class="rule-wrap">
|
|
<view class="content-wrap">
|
|
<image :src="$util.img('public/uniapp/hongbao/rule_head.png')" mode="" class="rule-head"></image>
|
|
<scroll-view scroll-y="true" class="rule">
|
|
<view>
|
|
<view class="tit">活动时间:</view>
|
|
<view class="text">{{ $util.timeStampTurnTime(hongbaoInfo.start_time) }} - {{ $util.timeStampTurnTime(hongbaoInfo.end_time) }}</view>
|
|
<view class="tit">活动说明:</view>
|
|
<view class="text">{{ hongbaoInfo.remark }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
<text class="iconfont icon-round-close" @click="closeRulePopup"></text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 分享弹窗 -->
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
|
|
<view>
|
|
<view class="share-title">分享</view>
|
|
<view class="share-content">
|
|
<!-- #ifdef MP -->
|
|
<view class="share-box">
|
|
<button class="share-btn" :plain="true" open-type="share">
|
|
<view class="iconfont icon-share-friend"></view>
|
|
<text>分享给好友</text>
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="share-box" v-if="goodsCircle">
|
|
<button class="share-btn" :plain="true" @click="openBusinessView">
|
|
<view class="iconfont icon-haowuquan"></view>
|
|
<text>分享到好物圈</text>
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="share-box" @click="openPosterPopup">
|
|
<button class="share-btn" :plain="true">
|
|
<view class="iconfont icon-pengyouquan"></view>
|
|
<text>生成分享海报</text>
|
|
</button>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<view class="share-box" @click="copyUrl">
|
|
<button class="share-btn" :plain="true">
|
|
<view class="iconfont icon-fuzhilianjie"></view>
|
|
<text>复制链接</text>
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<!-- 加入队伍 -->
|
|
<view @touchmove.prevent.stop class="reward-popup">
|
|
<uni-popup ref="linkPopup" type="center" :maskClick="false">
|
|
<view class="wrap-popup" v-if="inviterInfo">
|
|
<view class="reward-wrap" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/popup_bg.png') + ')' }">
|
|
<image
|
|
:src="$util.img(inviterInfo.headimg ? $util.img(inviterInfo.headimg) : $util.getDefaultImage().head)"
|
|
@error="inviterInfo.headimg = $util.getDefaultImage().head"
|
|
class="img-head"
|
|
></image>
|
|
<view class="nickname">{{ inviterInfo.nickname | guolv }}</view>
|
|
<view class="txt">邀请你加入团队</view>
|
|
<view class="guafen-hongbao">瓜分现金红包</view>
|
|
<view class="qu-btn" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/btn_bg.png') + ')' }" @click="join()">加入队伍</view>
|
|
</view>
|
|
<view class="close-btn" @click="closeLinkPopup()"><image :src="$util.img('public/uniapp/hongbao/close.png')" mode=""></image></view>
|
|
</view>
|
|
<view class="wrap-popup" v-else>
|
|
<view class="reward-wrap" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/popup_bg.png') + ')' }">
|
|
<image
|
|
:src="$util.img(inviterInfo.headimg ? $util.img(inviterInfo.headimg) : $util.getDefaultImage().head)"
|
|
@error="inviterInfo.headimg = $util.getDefaultImage().head"
|
|
class="img-head"
|
|
></image>
|
|
<view class="nickname">{{ groupInfoList.header_nickname | guolv }}</view>
|
|
<view class="txt">邀请你加入团队</view>
|
|
<view class="guafen-hongbao">瓜分现金红包</view>
|
|
<view class="qu-btn" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/btn_bg.png') + ')' }" @click="join()">加入队伍</view>
|
|
</view>
|
|
<view class="close-btn" @click="closeLinkPopup()"><image :src="$util.img('public/uniapp/hongbao/close.png')" mode=""></image></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<!-- 喊好友一起瓜分 -->
|
|
<view @touchmove.prevent.stop class="reward-popup-three">
|
|
<uni-popup ref="friendsPopup" type="center" :maskClick="false">
|
|
<view class="wrap-popup-three">
|
|
<view class="reward-wrap-three" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/popup_bg.png') + ')' }">
|
|
<view class="join-three">
|
|
你已加入
|
|
<text class="nickname-three">{{ groupInfoList.header_nickname | guolv }}</text>
|
|
的瓜分团
|
|
</view>
|
|
<view class="guafen-three" v-if="groupInfoList.member_list">
|
|
仅差
|
|
<text>{{ groupInfoList.num - groupInfoList.member_list.length }}</text>
|
|
人即可瓜分现金红包
|
|
</view>
|
|
<view class="txt-three">{{ hongbaoInfo.money | int }}元</view>
|
|
<view class="qu-btn-three" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/btn_bg.png') + ')' }" @click="goFriend()">
|
|
喊好友一起瓜分
|
|
</view>
|
|
</view>
|
|
<view class="close-btn-three" @click="closeFriend()"><image :src="$util.img('public/uniapp/hongbao/close.png')" mode=""></image></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<!-- 集齐瓜分 -->
|
|
<view @touchmove.prevent.stop class="reward-popup-two">
|
|
<uni-popup ref="linkSuccessPopup" type="center" :maskClick="false">
|
|
<view class="wrap-popup-two">
|
|
<view class="reward-wrap-two" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/popup_bg.png') + ')' }">
|
|
<view class="title-two">瓜分红包</view>
|
|
<view class="together-two">- 好友已集齐 -</view>
|
|
<view class="txt-two">{{ hongbaoInfo.money | int }}元</view>
|
|
<view class="qu-btn-two" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/hongbao/btn_bg.png') + ')' }" @click="closeGetItNow()">
|
|
立即瓜分红包
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<ns-login ref="login"></ns-login>
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
export default {
|
|
components: {
|
|
uniPopup
|
|
},
|
|
data() {
|
|
return {
|
|
hongbaoInfo: {},
|
|
groupInfoList: [],
|
|
goodsRecommend: [],
|
|
isShow: false,
|
|
isNow: false,
|
|
seckillH: '',
|
|
seckillI: '',
|
|
seckillS: '',
|
|
seckillInterval: null,
|
|
hongBaoId: '',
|
|
groupId: '',
|
|
memberInfo: {},
|
|
money: '',
|
|
memberList: [],
|
|
inviterId: '',
|
|
inviterInfo: {},
|
|
is_exit: 0,
|
|
g_member_state: 0,
|
|
start_time_coupon: '',
|
|
end_time_coupon: '',
|
|
memberId: 0,
|
|
token: null
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
//小程序分享接收source_member
|
|
if (option.source_member) {
|
|
uni.setStorageSync('source_member', option.source_member);
|
|
}
|
|
// 小程序扫码进入
|
|
if (option.scene) {
|
|
var sceneParams = decodeURIComponent(option.scene);
|
|
sceneParams = sceneParams.split('&');
|
|
if (sceneParams.length) {
|
|
sceneParams.forEach(item => {
|
|
if (item.indexOf('hid') != -1) this.hongBaoId = item.split('-')[1];
|
|
if (item.indexOf('id') != -1) this.inviterId = item.split('-')[1];
|
|
if (item.indexOf('gid') != -1) this.groupId = item.split('-')[1];
|
|
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
|
|
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
|
|
});
|
|
}
|
|
} else {
|
|
if (option.hid) {
|
|
if (option.hid) this.hongBaoId = option.hid;
|
|
if (option.id) this.inviterId = option.id;
|
|
if (option.gid) this.groupId = option.gid;
|
|
} else {
|
|
if (option.hongbao_id) this.hongBaoId = option.hongbao_id;
|
|
if (option.inviter_id) this.inviterId = option.inviter_id;
|
|
if (option.group_id) this.groupId = option.group_id;
|
|
}
|
|
}
|
|
},
|
|
filters: {
|
|
date(date) {
|
|
return String(date).slice(0, 10);
|
|
},
|
|
guolv(str) {
|
|
str = String(str);
|
|
if (str.length >= 6) {
|
|
return str.substr(0, 1) + '****' + str.substr(str.split('').length - 1, str.split('').length);
|
|
} else {
|
|
return str;
|
|
}
|
|
},
|
|
int(val) {
|
|
var str = String(val);
|
|
var arr = str.split('.');
|
|
if (parseInt(arr[1]) > 0) {
|
|
return str;
|
|
} else {
|
|
return arr[0];
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getInfo();
|
|
this.getMemberInfo();
|
|
this.$util.getMemberId().then(resolve => {
|
|
this.memberId = resolve;
|
|
});
|
|
|
|
//记录分享关系
|
|
if (uni.getStorageSync('token') && uni.getStorageSync('source_member')) {
|
|
this.$util.onSourceMember(uni.getStorageSync('source_member'));
|
|
}
|
|
|
|
|
|
},
|
|
/**
|
|
* 自定义分享内容
|
|
* @param {Object} res
|
|
*/
|
|
onShareAppMessage(res) {
|
|
var path = '/pages_tool/hongbao/index?hid=' + this.hongbaoInfo.hongbao_id + '&gid=' + this.groupInfoList.group_id + '&id=' + this.hongbaoInfo.member_id;
|
|
if (this.memberId) path += '&source_member=' + this.memberId;
|
|
return {
|
|
title: '仅差一人即可瓜分' + this.hongbaoInfo.money + '元红包',
|
|
path: path,
|
|
success: res => {
|
|
console.log(path, '00');
|
|
},
|
|
fail: res => {
|
|
console.log(path, '11');
|
|
}
|
|
};
|
|
},
|
|
// 分享到微信朋友圈
|
|
// #ifdef MP-WEIXIN
|
|
onShareTimeline() {
|
|
var title = '仅差一人即可瓜分' + this.hongbaoInfo.money + '元红包';
|
|
var query = 'hid=' + this.hongbaoInfo.hongbao_id + '&gid=' + this.groupInfoList.group_id + '&id=' + this.hongbaoInfo.member_id;
|
|
if (this.memberId) query += '&source_member=' + this.memberId;
|
|
return {
|
|
title: title,
|
|
query: query,
|
|
imageUrl: ''
|
|
};
|
|
},
|
|
// #endif
|
|
methods: {
|
|
//瓜分集齐
|
|
closeGetItNow() {
|
|
this.$refs.linkSuccessPopup.close();
|
|
},
|
|
// 打开分享弹出层
|
|
openSharePopup() {
|
|
this.$refs.sharePopup.open();
|
|
},
|
|
// 关闭分享弹出层
|
|
closeSharePopup() {
|
|
this.$refs.sharePopup.close();
|
|
},
|
|
showPrice(data) {
|
|
let price = data.discount_price;
|
|
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
|
return price;
|
|
},
|
|
//打开规则弹出层
|
|
openRulePopup() {
|
|
this.$refs.rulePopup.open();
|
|
},
|
|
//关闭规则弹出层
|
|
closeRulePopup() {
|
|
this.$refs.rulePopup.close();
|
|
},
|
|
toLook() {
|
|
this.$util.redirectTo('/pages_tool/member/balance_detail', { group_id: this.groupInfoList.group_id, from_type: 'hongbao' });
|
|
},
|
|
//去瓜分新红包
|
|
toGuaFen() {
|
|
this.$util.redirectTo('/pages_tool/hongbao/list');
|
|
},
|
|
toIndex() {
|
|
this.$util.redirectTo('/pages/index/index');
|
|
},
|
|
GetItNowPopup() {
|
|
this.$refs.linkSuccessPopup.open();
|
|
},
|
|
closeFriend() {
|
|
this.$refs.friendsPopup.close();
|
|
},
|
|
friend() {
|
|
this.$refs.friendsPopup.open();
|
|
},
|
|
goFriend() {
|
|
this.closeFriend();
|
|
this.openSharePopup();
|
|
},
|
|
getInfo() {
|
|
this.$api.sendRequest({
|
|
url: '/hongbao/api/hongbao/info',
|
|
data: {
|
|
hongbao_id: this.hongBaoId,
|
|
inviter_id: this.inviterId == '' ? 0 : this.inviterId,
|
|
group_id: this.groupId == '' ? 0 : this.groupId
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.hongbaoInfo = res.data;
|
|
this.groupInfoList = res.data.group_info;
|
|
this.memberList = res.data.group_info.member_list;
|
|
this.groupId = res.data.group_info.group_id;
|
|
if (this.hongbaoInfo.inviter_info) {
|
|
this.inviterInfo = res.data.inviter_info;
|
|
}
|
|
if (this.memberList) {
|
|
this.memberList.forEach(e => {
|
|
if (this.hongbaoInfo.member_id == e.member_id) {
|
|
this.money = e.money;
|
|
this.start_time_coupon = e.coupon_start_time;
|
|
this.end_time_coupon = e.coupon_end_time;
|
|
}
|
|
});
|
|
}
|
|
if (res.data.group_info != '') {
|
|
let time = Date.parse(new Date()) / 1000; //当前时间
|
|
if (this.groupInfoList.end_time - res.timestamp > 0) {
|
|
var obj = this.$util.countDown(this.groupInfoList.end_time - res.timestamp);
|
|
this.seckillH = obj.h;
|
|
this.seckillI = obj.i;
|
|
this.seckillS = obj.s;
|
|
}
|
|
if (res.data.member_id != res.data.group_info.header_id) {
|
|
var is_exit = 0;
|
|
res.data.group_info.member_list.some(function(i) {
|
|
if (i.member_id == res.data.member_id) {
|
|
is_exit = is_exit + 1;
|
|
}
|
|
});
|
|
if (res.data.group_info.status == 1 && is_exit == 0) {
|
|
this.g_member_state = 1;
|
|
} else {
|
|
if (is_exit == 0) {
|
|
is_exit = is_exit + 1;
|
|
this.$refs.linkPopup.open();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
join() {
|
|
if (!uni.getStorageSync('token')) {
|
|
setTimeout(() => {
|
|
this.$refs.login.open('/pages_tool/hongbao/index?hongbao_id=' + this.hongBaoId + '&group_id=' + this.groupId + '&inviter_id=' + this.inviterId);
|
|
});
|
|
} else {
|
|
this.$api.sendRequest({
|
|
url: '/hongbao/api/hongbao/divide',
|
|
data: {
|
|
group_id: this.groupId
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.$util.showToast({
|
|
title: '加入成功'
|
|
});
|
|
this.closeLinkPopup();
|
|
this.getInfo();
|
|
if (this.groupInfoList.num - this.groupInfoList.member_list.length > 1) {
|
|
this.friend();
|
|
}
|
|
if (this.groupInfoList.num - this.groupInfoList.member_list.length <= 1) {
|
|
this.GetItNowPopup();
|
|
}
|
|
} else {
|
|
this.$util.showToast({
|
|
title: res.message
|
|
});
|
|
this.closeLinkPopup();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
getLaunch() {
|
|
if (!uni.getStorageSync('token')) {
|
|
setTimeout(() => {
|
|
this.$refs.login.open('/pages_tool/hongbao/index?hongbao_id=' + this.hongBaoId + '&group_id=' + '');
|
|
});
|
|
} else {
|
|
this.$api.sendRequest({
|
|
url: '/hongbao/api/hongbao/launch',
|
|
data: {
|
|
hongbao_id: this.hongBaoId
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.groupId = res.data;
|
|
this.isShow == true;
|
|
this.getInfo();
|
|
} else {
|
|
this.$util.showToast({ title: '红包已被瓜分完，下次再来吧' });
|
|
}
|
|
this.$forceUpdate();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
// 打开海报弹出层
|
|
openPosterPopup() {
|
|
this.$util.redirectTo('/pages_tool/hongbao/poster', { hongbao_id: this.hongBaoId, group_id: this.groupId, inviter_id: this.hongbaoInfo.member_id });
|
|
},
|
|
// 关闭海报弹出层
|
|
closePosterPopup() {
|
|
this.$refs.posterPopup.close();
|
|
},
|
|
closeLinkPopup() {
|
|
this.$refs.linkPopup.close();
|
|
},
|
|
copyUrl() {
|
|
let text = this.$config.h5Domain + '/pages_tool/hongbao/index';
|
|
if (this.hongBaoId) text += '?hongbao_id=' + this.hongBaoId + '&group_id=' + this.groupInfoList.group_id + '&inviter_id=' + this.hongbaoInfo.member_id;
|
|
this.$util.copy(text, () => {
|
|
this.closeSharePopup();
|
|
});
|
|
},
|
|
imageError(index) {
|
|
this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
|
this.$forceUpdate();
|
|
},
|
|
headerimageError(index) {
|
|
this.list[index].headimg = this.$util.getDefaultImage().head;
|
|
this.$forceUpdate();
|
|
},
|
|
onPageHide() {
|
|
clearInterval(this.seckillInterval);
|
|
},
|
|
getMemberInfo() {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/info',
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.memberInfo = res.data;
|
|
}
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
},
|
|
fail: res => {
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
@import '@/common/css/goods_detail.scss';
|
|
</style>
|
|
<style lang="scss">
|
|
.detail-box {
|
|
.status-wrap {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
padding: 60rpx 30rpx;
|
|
height: 100rpx;
|
|
.status-name {
|
|
color: #fff;
|
|
.name {
|
|
margin-left: 14rpx;
|
|
}
|
|
.fail {
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.guafen_content {
|
|
border-radius: $border-radius;
|
|
text-align: center;
|
|
padding: 48rpx 0 58rpx;
|
|
margin: -70rpx 30rpx 20rpx;
|
|
.guafen_content_title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
.guafen_content_num {
|
|
color: #ff4544;
|
|
font-weight: bold;
|
|
font-size: 72rpx;
|
|
margin: 52rpx 0 58rpx;
|
|
line-height: 1;
|
|
text {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.guafen_photo {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
margin-bottom: 30rpx;
|
|
.guafen_header_img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background: #ffe5e5;
|
|
border: 2rpx dashed #ff4544;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 44rpx;
|
|
line-height: 44rpx;
|
|
color: #ff4544;
|
|
margin-left: 56rpx;
|
|
margin-bottom: 40rpx;
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.guafen_photo-two {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
margin-bottom: 30rpx;
|
|
.guafen_header_img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background: #ffe5e5;
|
|
border: 2rpx dashed #ff4544;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 44rpx;
|
|
line-height: 44rpx;
|
|
color: #ff4544;
|
|
margin-left: 56rpx;
|
|
margin-bottom: 40rpx;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.guafen_content_time {
|
|
font-size: 24rpx;
|
|
margin: 30rpx 0 38rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.seckill-title-name {
|
|
margin-right: 11rpx;
|
|
}
|
|
image {
|
|
width: 110rpx;
|
|
height: 2rpx;
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.footer-guafen {
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
margin: 0 30rpx 0;
|
|
background: #fff;
|
|
.footer-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 2;
|
|
}
|
|
}
|
|
}
|
|
.guafen_adv {
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
padding: 20rpx 30rpx;
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.explain {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.explain-img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
.index-img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
.desc {
|
|
text-align: center;
|
|
color: #fff;
|
|
border-radius: 25rpx;
|
|
font-size: $font-size-tag;
|
|
width: 140rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
.guafen_over {
|
|
height: 100rpx;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
padding: 60rpx 0;
|
|
margin: 342rpx auto 0;
|
|
}
|
|
.guafen_content {
|
|
border-radius: $border-radius;
|
|
text-align: center;
|
|
padding: 48rpx 0 58rpx;
|
|
margin: 342rpx auto 0;
|
|
.guafen_content_title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
.guafen_content_num {
|
|
color: #ff4544;
|
|
font-weight: bold;
|
|
font-size: 72rpx;
|
|
margin: 52rpx 0 58rpx;
|
|
line-height: 1;
|
|
text {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.guafen_photo {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
margin-bottom: 30rpx;
|
|
.guafen_header_img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background: #ffe5e5;
|
|
border: 2rpx dashed #ff4544;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 44rpx;
|
|
line-height: 44rpx;
|
|
color: #ff4544;
|
|
margin-left: 56rpx;
|
|
margin-bottom: 40rpx;
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.guafen_photo-two {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
margin-bottom: 30rpx;
|
|
.guafen_header_img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background: #ffe5e5;
|
|
border: 2rpx dashed #ff4544;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 44rpx;
|
|
line-height: 44rpx;
|
|
color: #ff4544;
|
|
margin-left: 56rpx;
|
|
margin-bottom: 40rpx;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.guafen_content_color {
|
|
color: #ff4544;
|
|
}
|
|
.guafen_content_time {
|
|
font-size: 24rpx;
|
|
margin: 30rpx 0 38rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.seckill-title-name {
|
|
margin-right: 11rpx;
|
|
}
|
|
image {
|
|
width: 110rpx;
|
|
height: 2rpx;
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.btn {
|
|
text-align: center;
|
|
width: 75%;
|
|
padding: 14.84rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
background: linear-gradient(90deg, #ff3c00 0%, #ff6a00 100%);
|
|
margin: 0 auto;
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 10rpx 20rpx rgba(255, 69, 68, 1);
|
|
}
|
|
}
|
|
.guafen-how {
|
|
background-color: #fff;
|
|
border-radius: $border-radius;
|
|
margin: 0 30rpx 20rpx;
|
|
padding: 40rpx 30rpx;
|
|
.how-title {
|
|
font-weight: bold;
|
|
}
|
|
.step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 40rpx;
|
|
padding: 0 30rpx;
|
|
.step-jiantou {
|
|
width: 30rpx;
|
|
height: 28rpx;
|
|
}
|
|
.step-img {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.step-txt {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
view {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.step-one {
|
|
width: 58rpx;
|
|
height: 60rpx;
|
|
}
|
|
.step-three {
|
|
width: 54rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
.rule-description {
|
|
background-color: #fff;
|
|
border-radius: $border-radius;
|
|
margin: 0 30rpx 20rpx;
|
|
padding: 40rpx 30rpx;
|
|
.rule-description-title {
|
|
font-weight: bold;
|
|
margin: 0 0 30rpx;
|
|
}
|
|
.remark {
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
.rule-wrap {
|
|
border-radius: 10rpx;
|
|
background-color: #ffd697;
|
|
width: 80vw;
|
|
padding: 12rpx;
|
|
box-sizing: border-box;
|
|
|
|
.content-wrap {
|
|
background-color: #fff2dd;
|
|
width: 100%;
|
|
border-radius: 8rpx;
|
|
position: relative;
|
|
.rule-head {
|
|
width: 100%;
|
|
height: 148rpx;
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.rule {
|
|
height: 560rpx;
|
|
padding: 80rpx 30rpx 0 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.tit {
|
|
font-weight: bold;
|
|
color: #da2b00;
|
|
margin-top: 10rpx;
|
|
}
|
|
.text {
|
|
font-size: $font-size-sub;
|
|
color: #da2b00;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
/* .icon-round-close {
|
|
color: #da2b00;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: -32rpx;
|
|
right: -4rpx;
|
|
font-size: 70rpx;
|
|
} */
|
|
.icon-round-close {
|
|
color: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: -150rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 70rpx;
|
|
}
|
|
}
|
|
}
|
|
.wrap-popup {
|
|
width: 700rpx;
|
|
.close-btn {
|
|
margin-top: 46rpx;
|
|
text-align: center;
|
|
image {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
}
|
|
}
|
|
.reward-wrap {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
padding: 340rpx 0 68rpx;
|
|
.img-head {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.nickname {
|
|
color: #fff;
|
|
margin: 20rpx 0 40rpx;
|
|
line-height: 1;
|
|
}
|
|
.qu-btn {
|
|
color: #fe0106;
|
|
width: 450rpx;
|
|
font-weight: bold;
|
|
margin: 0 auto;
|
|
font-size: 36rpx;
|
|
padding: 26rpx 0 32rpx;
|
|
line-height: 1;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.txt {
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
line-height: 1;
|
|
}
|
|
.guafen-hongbao {
|
|
font-size: 60rpx;
|
|
color: #feffb3;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
margin: 40rpx 0 52rpx;
|
|
}
|
|
}
|
|
}
|
|
.wrap-popup-two {
|
|
width: 700rpx;
|
|
.close-btn {
|
|
margin-top: 46rpx;
|
|
text-align: center;
|
|
image {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
}
|
|
}
|
|
.reward-wrap-two {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
padding: 460rpx 0 68rpx;
|
|
.title-two {
|
|
font-size: 60rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
line-height: 1;
|
|
}
|
|
.together-two {
|
|
color: #feffb3;
|
|
font-size: 36rpx;
|
|
line-height: 1;
|
|
margin: 36rpx 0 38rpx;
|
|
}
|
|
.qu-btn-two {
|
|
color: #fe0106;
|
|
width: 450rpx;
|
|
font-weight: bold;
|
|
margin: 48rpx auto 0;
|
|
font-size: 36rpx;
|
|
padding: 26rpx 0 32rpx;
|
|
line-height: 1;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.txt-two {
|
|
font-size: 80rpx;
|
|
color: #feffb3;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
.wrap-popup-three {
|
|
width: 700rpx;
|
|
.close-btn-three {
|
|
margin-top: 46rpx;
|
|
text-align: center;
|
|
image {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
}
|
|
}
|
|
.reward-wrap-three {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
padding: 460rpx 0 68rpx;
|
|
.qu-btn-three {
|
|
color: #fe0106;
|
|
width: 450rpx;
|
|
font-weight: bold;
|
|
margin: 48rpx auto 0;
|
|
font-size: 36rpx;
|
|
padding: 26rpx 0 32rpx;
|
|
line-height: 1;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.txt-three {
|
|
font-size: 80rpx;
|
|
color: #feffb3;
|
|
line-height: 1;
|
|
margin-bottom: 52rpx;
|
|
}
|
|
.element-three {
|
|
font-size: 40rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.join-three {
|
|
color: #fff;
|
|
line-height: 1;
|
|
}
|
|
.guafen-three {
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
line-height: 1;
|
|
margin: 34rpx 0 38rpx;
|
|
text {
|
|
color: #ffc444;
|
|
font-size: 36rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.guafen_content {
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
padding: 50rpx 0 56rpx;
|
|
margin: 200rpx auto 0;
|
|
background: #fff;
|
|
.guafen-success {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
margin: 0 0 30rpx;
|
|
line-height: 1;
|
|
}
|
|
.guafen-coupon {
|
|
font-size: 72rpx;
|
|
line-height: 1;
|
|
margin-bottom: 40rpx;
|
|
color: #ff4544;
|
|
text {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.guafen-man {
|
|
line-height: 1;
|
|
}
|
|
.guafen-time {
|
|
line-height: 1;
|
|
margin: 30rpx 0 44rpx;
|
|
}
|
|
.success-btn {
|
|
width: 540rpx;
|
|
background: linear-gradient(90deg, #ff3c00 0%, #ff6a00 100%);
|
|
box-shadow: 0 10rpx 20rpx rgba(255, 69, 68, 1);
|
|
color: #fff;
|
|
border-radius: $border-radius;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
margin: 62rpx auto 40rpx;
|
|
}
|
|
.success-guafen-btn {
|
|
width: 540rpx;
|
|
background-color: #ffc444;
|
|
box-shadow: 0 10rpx 20rpx RGBA(255, 211, 115, 1);
|
|
color: #fff;
|
|
border-radius: $border-radius;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
/deep/.register-box .uni-scroll-view {
|
|
background: unset !important;
|
|
}
|
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
|
background-color: unset;
|
|
}
|
|
/deep/ .uni-tip-button.color-base-bg {
|
|
background-color: #007aff !important;
|
|
}
|
|
/deep/ .uni-countdown__number {
|
|
font-size: 28rpx;
|
|
padding: 0;
|
|
}
|
|
/deep/ .uni-countdown__splitor {
|
|
font-size: 28rpx;
|
|
color: #ff4544 !important;
|
|
}
|
|
>>> .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
|
background: none !important;
|
|
}
|
|
|
|
>>> .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
|
|
overflow: unset;
|
|
}
|
|
|
|
/deep/ .reward-popup-two .uni-popup__wrapper-box {
|
|
background: none !important;
|
|
max-width: unset !important;
|
|
max-height: unset !important;
|
|
}
|
|
/deep/ .reward-popup-three .uni-popup__wrapper-box {
|
|
background: none !important;
|
|
max-width: unset !important;
|
|
max-height: unset !important;
|
|
}
|
|
/deep/ .uni-countdown__number {
|
|
margin: 0;
|
|
}
|
|
/* /deep/ .uni-scroll-view-content{
|
|
max-height: 300rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
} */
|
|
/deep/ .hongbao-lists {
|
|
max-height: 280rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
/deep/ .hongbao-lists-two {
|
|
max-height: 280rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|