429 lines
12 KiB
Vue
429 lines
12 KiB
Vue
<template>
|
||
<view class="user-coupon-share" v-if="isLoad">
|
||
<!-- #ifdef H5 -->
|
||
<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
|
||
:class="[{'back-user-ios none': configInfo.isIos},{'back-user-android none': !configInfo.isIos}]"
|
||
style="z-index: 1;right:30rpx;" v-if="options.pid">
|
||
<view class="iconshouye iconfont"></view>
|
||
<view class="back-user_text">回到首页</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<image mode="aspectFill" class="coupon-img" :src="shareImg"></image>
|
||
|
||
<view class="coupon-content">
|
||
<view class="flex-center flex-column">
|
||
<view class="flex-center f-paragraph pt-lg pb-md" :style="{color:primaryColor}">
|
||
{{detail.status == 1 ? '距活动结束还剩':'活动已结束'}}
|
||
</view>
|
||
<view class="count-down">
|
||
<countdown type="2" :targetTime="over_time_text" @callback="countEnd">
|
||
</countdown>
|
||
</view>
|
||
<view class="space-lg"></view>
|
||
<view class="space-lg"></view>
|
||
<!-- status 1进行中，2成功，3失败 -->
|
||
<view class="ml-lg mr-lg pt-lg pb-sm pl-lg pr-lg rel radius-20" style="background: #FFFAF4;">
|
||
<view class="menu-img mt-lg abs">
|
||
<image mode="aspectFill" class="menu-img" src="https://lbqny.migugu.com/admin/anmo/coupon/menu.png"></image>
|
||
<view class="menu-title flex-center abs" :style="{color:primaryColor}">邀请记录</view>
|
||
</view>
|
||
<view class="space-lg"></view>
|
||
<view class="space-lg"></view>
|
||
<view class="flex-center f-desc pb-md" :style="{color:primaryColor}">
|
||
<view class="user-item">用户</view>
|
||
<view class="time-item">时间</view>
|
||
</view>
|
||
<image mode="aspectFill" class="line-img" src="https://lbqny.migugu.com/admin/anmo/coupon/line.png"></image>
|
||
<scroll-view scroll-y class="user-list-info" v-if="record_list.data.length > 0">
|
||
<view class="user-list flex-between f-desc c-title b-1px-b"
|
||
v-for="(item,index) in record_list.data" :key="index">
|
||
<view class="flex-y-center pt-md pb-md">
|
||
<image mode="aspectFill" class="avatar radius" :src="item.avatarUrl"></image>
|
||
<view class="ml-md max-300 ellipsis">{{item.nickName || `用户${item.id}`}}</view>
|
||
</view>
|
||
<view>{{item.create_time}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<abnor percent="70%" v-if="record_list.data.length == 0"></abnor>
|
||
<view class="space-sm"></view>
|
||
|
||
|
||
<!-- #ifndef H5 -->
|
||
<auth :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
|
||
:type="!userInfo.phone ? 'phone':'userInfo'" @go="toShare" v-if="detail.status == 1">
|
||
<view class="share-img mt-lg rel">
|
||
<image mode="aspectFill" class="share-img" src="https://lbqny.migugu.com/admin/anmo/coupon/btn.png"></image>
|
||
<view class="share-title flex-center abs" :style="{color:primaryColor}">
|
||
{{detail.user_id == userInfo.id?'邀请有奖': userInfo.nickName ?'帮TA邀请':'我要参加'}}
|
||
</view>
|
||
</view>
|
||
</auth>
|
||
|
||
<view class="share-img grayscale mt-lg rel" v-else>
|
||
<image mode="aspectFill" class="share-img" src="https://lbqny.migugu.com/admin/anmo/coupon/btn.png"></image>
|
||
<view class="share-title flex-center abs" :style="{color:primaryColor}">
|
||
{{detail.user_id == userInfo.id?'邀请有奖': userInfo.nickName ?'帮TA邀请':'我要参加'}}
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
</view>
|
||
<view class="mt-md ml-lg mr-lg pt-lg pb-lg pl-lg pr-lg rel radius-20" style="background: #FFFAF4;"
|
||
v-if="detail.id">
|
||
<view class="atv-rule pd-md radius-16" :style="{border: `1px solid ${primaryColor}`}">
|
||
<view class="flex-center f-paragraph pt-sm pb-md" :style="{color:primaryColor}">活动规则</view>
|
||
<view class="f-desc c-desc">1、活动总计可发起{{detail.atv_num}}次；</view>
|
||
<view class="f-desc c-desc" v-if="detail.to_inv_user == 1">2、被推荐人授权用户信息后即可获得相应奖励；</view>
|
||
<view class="f-desc c-desc">
|
||
{{detail.to_inv_user == 1?3:2}}、活动发起人每成功邀请{{detail.inv_user_num}}位好友授权用户信息后，即可获得以下卡券：
|
||
</view>
|
||
<view class="flex-warp f-desc c-desc" v-for="(item,index) in detail.coupon" :key="index">
|
||
<view>（{{index*1+1}}）卡券：{{item.title}}；数量：x{{item.num}}</view>
|
||
</view>
|
||
<view class="space-md"></view>
|
||
</view>
|
||
</view>
|
||
<view class="space-footer"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="show_share_item" type="bottom">
|
||
<view class="popup-share pd-lg f-desc c-desc fill-base">
|
||
<view class="flex-center">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button open-type="share" class="clear-btn list-item flex-center flex-column">
|
||
<image mode="aspectFill" class="item-image" src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
|
||
<view style="font-size: 26rpx;color:#666;">分享给好友</view>
|
||
</button>
|
||
<view @tap.stop="toPoster" class="list-item flex-center flex-column">
|
||
<image mode="aspectFill" class="item-image" src="https://lbqny.migugu.com/admin/anmo/coupon/picture.png"></image>
|
||
<view>生成海报码</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view @tap.stop="toAppShare(1)" class="list-item flex-center flex-column">
|
||
<image mode="aspectFill" class="item-image" src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
|
||
<view style="font-size: 26rpx;color:#666;">分享给好友</view>
|
||
</view>
|
||
<view @tap.stop="toAppShare(2)" class="list-item flex-center flex-column">
|
||
<image mode="aspectFill" class="item-image" src="https://lbqny.migugu.com/admin/anmo/coupon/wechat-moments.png"></image>
|
||
<view>分享到朋友圈</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="space-footer"></view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapActions,
|
||
mapMutations
|
||
} from "vuex"
|
||
import countdown from '@/components/min-countdown.vue'
|
||
import siteInfo from '@/siteinfo.js';
|
||
export default {
|
||
components: {
|
||
countdown
|
||
},
|
||
data() {
|
||
return {
|
||
shareImg: 'https://lbqny.migugu.com/admin/anmo/coupon/bg.png',
|
||
isLoad: false,
|
||
options: {},
|
||
detail: {
|
||
end_time: ''
|
||
},
|
||
record_list: {},
|
||
qr_code: ''
|
||
}
|
||
},
|
||
computed: mapState({
|
||
primaryColor: state => state.config.configInfo.primaryColor,
|
||
subColor: state => state.config.configInfo.subColor,
|
||
configInfo: state => state.config.configInfo,
|
||
commonOptions: state => state.user.commonOptions,
|
||
userInfo: state => state.user.userInfo,
|
||
isGzhLogin: state => state.user.isGzhLogin,
|
||
over_time_text() {
|
||
return new Date().getTime() + this.detail.end_time * 1000
|
||
}
|
||
}),
|
||
async onLoad(options) {
|
||
this.$util.showLoading()
|
||
options = await this.updateCommonOptions(options)
|
||
this.options = options
|
||
// #ifdef MP-WEIXIN
|
||
uni.hideShareMenu()
|
||
// #endif
|
||
await this.initIndex()
|
||
},
|
||
onPullDownRefresh() {
|
||
// #ifndef APP-PLUS
|
||
uni.showNavigationBarLoading()
|
||
// #endif
|
||
this.initRefresh();
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
onShareAppMessage(e) {
|
||
let {
|
||
id,
|
||
share_img: imageUrl
|
||
} = this.detail
|
||
let {
|
||
id: pid = 0
|
||
} = this.userInfo
|
||
let path =
|
||
`/user/pages/coupon/share?pid=${pid}&coupon_atv_id=${id}`
|
||
this.$util.log(path)
|
||
this.$refs.show_share_item.close()
|
||
return {
|
||
title: '',
|
||
imageUrl,
|
||
path,
|
||
}
|
||
},
|
||
methods: {
|
||
...mapActions(['getConfigInfo', 'getUserInfo', 'updateCommonOptions']),
|
||
...mapMutations(['updateUserItem']),
|
||
async initIndex(refresh = false) {
|
||
if (!this.configInfo.id || refresh) {
|
||
await this.getConfigInfo()
|
||
}
|
||
let {
|
||
id: uid = 0
|
||
} = this.userInfo
|
||
let {
|
||
isGzhLogin
|
||
} = this
|
||
// #ifdef H5
|
||
if (isGzhLogin && !uid) {
|
||
setTimeout(() => {
|
||
this.getDetail()
|
||
}, 1000)
|
||
} else {
|
||
this.getDetail()
|
||
}
|
||
// #endif
|
||
// #ifndef H5
|
||
await this.getDetail()
|
||
// #endif
|
||
this.$util.setNavigationBarColor({
|
||
bg: this.primaryColor
|
||
})
|
||
// #ifdef H5
|
||
if (!refresh && this.$jweixin.isWechat()) {
|
||
await this.$jweixin.initJssdk();
|
||
setTimeout(() => {
|
||
this.toAppShare()
|
||
}, 1200)
|
||
}
|
||
// #endif
|
||
},
|
||
initRefresh() {
|
||
this.initIndex(true)
|
||
},
|
||
async getDetail() {
|
||
let {
|
||
coupon_atv_id = 0
|
||
} = this.options
|
||
let {
|
||
record_list,
|
||
atv_info
|
||
} = await this.$api.mine.couponAtvInfo({
|
||
id: coupon_atv_id
|
||
})
|
||
if (atv_info.status !== 1) {
|
||
atv_info.end_time = 0
|
||
}
|
||
this.detail = atv_info
|
||
this.record_list = record_list
|
||
this.isLoad = true
|
||
this.$util.hideAll()
|
||
},
|
||
countEnd() {
|
||
this.$util.log("倒计时完了")
|
||
setTimeout(() => {
|
||
this.initRefresh()
|
||
this.$util.back()
|
||
}, 1000)
|
||
},
|
||
async toShare() {
|
||
if (this.detail.status != 1) return
|
||
// #ifndef APP-PLUS
|
||
if (!this.qr_code) {
|
||
this.$util.showLoading()
|
||
let {
|
||
id: coupon_atv_id
|
||
} = this.detail
|
||
let qr_code = await this.$api.mine.atvQr({
|
||
page: 'user/pages/coupon/share',
|
||
coupon_atv_id
|
||
})
|
||
this.$util.hideAll()
|
||
this.qr_code = qr_code
|
||
}
|
||
// #endif
|
||
this.$refs.show_share_item.open()
|
||
if (this.detail.user_id == this.userInfo.id) return
|
||
this.getDetail()
|
||
},
|
||
toPoster() {
|
||
this.$refs.show_share_item.close()
|
||
this.$util.goUrl({
|
||
url: `/user/pages/coupon/poster`
|
||
})
|
||
},
|
||
toAppShare(type = 1) {
|
||
let {
|
||
id,
|
||
share_img: imageUrl,
|
||
status
|
||
} = this.detail
|
||
let {
|
||
id: pid = 0
|
||
} = this.userInfo
|
||
let methodModel = status * 1 == 1 ? 'showOptionMenu' : 'hideOptionMenu'
|
||
let title = '邀请有礼'
|
||
let summary = '邀请新人 获得福利'
|
||
|
||
let {
|
||
siteroot
|
||
} = siteInfo
|
||
let url = siteroot.split('/index.php')[0]
|
||
let href = `${url}/h5/#/user/pages/coupon/share?coupon_atv_id=${id}&pid=${pid}`
|
||
|
||
// #ifdef H5
|
||
this.$jweixin.wxReady(() => {
|
||
this.$jweixin[methodModel]()
|
||
this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
|
||
this.$jweixin.shareTimelineMessage(title, href, imageUrl)
|
||
})
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.$refs.show_share_item.close()
|
||
let scene = type == 1 ? 'WXSceneSession' : 'WXSceneTimeline'
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene,
|
||
type: 0,
|
||
href,
|
||
title,
|
||
summary,
|
||
imageUrl,
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
.user-coupon-share {
|
||
.coupon-img {
|
||
width: 750rpx;
|
||
height: 560rpx;
|
||
}
|
||
|
||
.coupon-content {
|
||
width: 750rpx;
|
||
min-height: 1431rpx;
|
||
background: linear-gradient(0deg, #A40035 0%, #FFAE89 100%);
|
||
|
||
.count-down {
|
||
height: 56rpx;
|
||
}
|
||
|
||
.menu-img {
|
||
width: 426rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.menu-img.abs {
|
||
top: -56rpx;
|
||
left: 50%;
|
||
margin-left: -213rpx;
|
||
}
|
||
|
||
.menu-title {
|
||
width: 426rpx;
|
||
height: 90rpx;
|
||
font-size: 36rpx;
|
||
top: 0;
|
||
}
|
||
|
||
.line-img {
|
||
width: 630rpx;
|
||
height: 1rpx;
|
||
}
|
||
|
||
.user-item {
|
||
width: 360rpx;
|
||
}
|
||
|
||
.time-item {
|
||
width: 220rpx;
|
||
}
|
||
|
||
.user-list-info {
|
||
/* #ifdef H5 */
|
||
height: 746rpx;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
height: 576rpx;
|
||
/* #endif */
|
||
|
||
.user-list {
|
||
.avatar {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background: #FFAE89;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.share-img {
|
||
width: 541rpx;
|
||
height: 140rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.share-title {
|
||
width: 541rpx;
|
||
height: 125rpx;
|
||
font-size: 36rpx;
|
||
top: 0;
|
||
}
|
||
|
||
.atv-rule {
|
||
transform: rotateZ(360deg);
|
||
}
|
||
|
||
}
|
||
|
||
.popup-share {
|
||
.list-item {
|
||
width: 50%;
|
||
|
||
.item-image {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|