276 lines
9.3 KiB
Vue
276 lines
9.3 KiB
Vue
<template>
|
||
<page-meta :page-style="themeColor"></page-meta>
|
||
<view>
|
||
<view v-if="info" style="background-color: #fff;">
|
||
|
||
<view class="invite_adv">
|
||
<image :src="$util.img('public/uniapp/member/invite/top_bg.png')" mode="widthFix"></image>
|
||
|
||
<view class="desc" @click="openRulePopup" v-if="info.remark != ''">
|
||
<text class="iconfont icon-bangzhu"></text>
|
||
活动说明
|
||
</view>
|
||
<image class="font" :src="$util.img('public/uniapp/member/invite/top_font.png')" mode="widthFix"/>
|
||
<view class="time">
|
||
活动时间：{{ $util.timeStampTurnTime(info.start_time, 1) }}至{{ $util.timeStampTurnTime(info.end_time, 1) }}
|
||
</view>
|
||
|
||
<view class="btn" :style="{ 'background-image': 'url(' + $util.img('public/uniapp/member/invite/top_btn.png') + ')' }" @click="openSharePopup">立即邀请</view>
|
||
</view>
|
||
<view class="content invite-list">
|
||
<view class="title">我的好友</view>
|
||
<block v-if="inviteList.length > 0">
|
||
<view class="invitelist_block">
|
||
<view class="invitelist">
|
||
<view class="list-item" v-for="(item, index) in inviteList">
|
||
<view class="img color-base-border">
|
||
<image mode="aspectFit" :src="item.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(item.headimg)"/>
|
||
</view>
|
||
<view class="list-left">
|
||
<view class="info">
|
||
<view class="name font-size-tag">{{ item.source_member_nickname }}</view>
|
||
<view class="time font-size-activity-tag color-tip">
|
||
{{ $util.timeStampTurnTime(item.create_time) }}
|
||
</view>
|
||
</view>
|
||
<view class="prize color-base-text font-size-activity-tag">
|
||
<block v-if="item.balance > 0">{{ item.balance }}元现金红包</block>
|
||
<block v-if="(item.point > 0 || item.coupon_num) && item.balance > 0">+</block>
|
||
<block v-if="item.point > 0">{{ parseInt(item.point) }}积分</block>
|
||
<block v-if="item.point > 0 && item.balance > 0 && item.coupon_num > 0">+
|
||
</block>
|
||
<block v-if="item.coupon_num > 0">{{ item.coupon_num }}张优惠券</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="more_invite color-tip font-size-tag " @click="moreList" v-if="isClick && total_num > page">
|
||
查看更多
|
||
<text class="iconfont icon-iconangledown"></text>
|
||
</view>
|
||
<view class="more_invite color-tip font-size-tag " @click="moreList" v-if="!isClick && inviteList.length > 5 && total_num <= page">没有更多数据了</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="empty">
|
||
<view class="tip">您还没有邀请到新朋友哦</view>
|
||
<view class="tip">邀请好友，赚取好礼。赶紧去试试吧~</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="content">
|
||
<view class="title">邀请好友奖励</view>
|
||
<view class="invite_active">
|
||
<view class="list">
|
||
<view class="item" v-if="$util.inArray('balance', info.type) != -1">
|
||
<image :src="$util.img('public/uniapp/member/invite/coupon_bg.png')" mode="aspectFill"/>
|
||
<view class="desc">
|
||
<view class="price">
|
||
<text class="font-size-base">{{ $lang('common.currencySymbol') }}</text>
|
||
<text>{{ info.balance }}</text>
|
||
</view>
|
||
<view class="type">现金红包</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item" v-if="$util.inArray('point', info.type) != -1">
|
||
<image :src="$util.img('public/uniapp/member/invite/coupon_bg.png')" mode="aspectFill"/>
|
||
<view class="desc">
|
||
<view class="price">
|
||
<text>{{ parseInt(info.point) }}</text>
|
||
</view>
|
||
<view class="type">积分</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item margin_right_none" v-if="$util.inArray('coupon', info.type) != -1">
|
||
<image :src="$util.img('public/uniapp/member/invite/coupon_bg.png')" mode="aspectFill">
|
||
</image>
|
||
<view class="desc">
|
||
<view class="price">
|
||
<text>{{ info.coupon.split(',').length }}</text>
|
||
张
|
||
</view>
|
||
<view class="type">优惠券</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="desc">
|
||
<view class="title_desc color-tip">分享给好友，让好友通过你的分享链接进入并注册登录，可获得以下奖励：</view>
|
||
<view class="desc_list">
|
||
<view class="" v-if="$util.inArray('balance', info.type) != -1">
|
||
<text>●</text>
|
||
可得{{ info.balance }}元红包奖励
|
||
</view>
|
||
<view class="" v-if="$util.inArray('point', info.type) != -1">
|
||
<text>●</text>
|
||
可得{{ info.point }}积分
|
||
</view>
|
||
<view class="" v-if="$util.inArray('coupon', info.type) != -1">
|
||
<text>●</text>
|
||
可得{{ info.coupon.split(',').length }}张优惠券
|
||
</view>
|
||
|
||
<view class="" v-if="info.max_fetch == 0">
|
||
<text>●</text>
|
||
可得奖励不受限制
|
||
</view>
|
||
<view class="" v-else>
|
||
<text>●</text>
|
||
奖励上限为{{ info.max_fetch }}人
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="title">如何邀请好友</view>
|
||
<view class="invite_active">
|
||
<view class="step">
|
||
<view>
|
||
<view class="img">
|
||
<image :src="$util.img('public/uniapp/member/invite/fenxiang.png')" mode="aspectFit"/>
|
||
</view>
|
||
<view class="text">分享链接给好友</view>
|
||
</view>
|
||
<view>
|
||
<image :src="$util.img('public/uniapp/member/invite/jiantou.png')" class="jiantou"></image>
|
||
</view>
|
||
<view>
|
||
<view class="img">
|
||
<image :src="$util.img('public/uniapp/member/invite/shouji.png')" mode="aspectFit"/>
|
||
</view>
|
||
<view class="text">好友进入</view>
|
||
</view>
|
||
<view>
|
||
<image :src="$util.img('public/uniapp/member/invite/jiantou.png')" class="jiantou"></image>
|
||
</view>
|
||
<view>
|
||
<view class="img">
|
||
<image :src="$util.img('public/uniapp/member/invite/hongbao.png')" mode="aspectFit"/>
|
||
</view>
|
||
<view class="text">好友注册成功获得奖励</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 海报 -->
|
||
<view @touchmove.prevent.stop>
|
||
<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
|
||
<template v-if="poster != '-1'">
|
||
<view>
|
||
<view class="image-wrap">
|
||
<image :src="$util.img(poster)" mode="widthFix" :show-menu-by-longpress="true" />
|
||
</view>
|
||
<!-- #ifdef MP || APP-PLUS -->
|
||
<view class="save" @click="savePoster()">保存图片</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<view class="save">长按保存图片</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
|
||
</template>
|
||
<view v-else class="msg">{{ posterMsg }}</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<!-- 分享弹窗 -->
|
||
<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 -->
|
||
<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>
|
||
<uni-popup ref="rulePopup" type="bottom">
|
||
<view class="tips-layer">
|
||
<view class="head" @click="closeRulePopup()">
|
||
<view class="title">活动说明</view>
|
||
<text class="iconfont icon-close"></text>
|
||
</view>
|
||
<view class="body">
|
||
<view class="detail margin-bottom">{{ info.remark }}</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</view>
|
||
<ns-empty v-else text="暂无相关数据"></ns-empty>
|
||
<ns-login ref="login"></ns-login>
|
||
<loading-cover ref="loadingCover"></loading-cover>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import inviteFriends from './public/js/invite_friends.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
inviteList: [],
|
||
info: null,
|
||
page: 1,
|
||
page_size: 5,
|
||
total_num: 0,
|
||
isClick: true,
|
||
poster: '-1', //海报
|
||
posterMsg: '' //海报错误信息
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.getBaseInfo();
|
||
if (this.storeToken) {
|
||
this.getList();
|
||
} else {
|
||
this.$nextTick(() => {
|
||
this.$refs.login.open('/pages_tool/member/invite_friends');
|
||
});
|
||
}
|
||
},
|
||
onShow() {},
|
||
mixins: [inviteFriends],
|
||
onReady() {}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './public/css/invite_friends.scss';
|
||
</style>
|
||
<style scoped>
|
||
/deep/ .uni-popup__wrapper.bottom {
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
}
|
||
|
||
.poster-layer>>>.uni-popup__wrapper-box {
|
||
max-height: initial !important;
|
||
}
|
||
</style> |