685 lines
14 KiB
Vue
685 lines
14 KiB
Vue
<template>
|
|
<view class="content">
|
|
<uni-nav-bar title="欧气券" color="#fff" left-icon="left" backgroundColor="transparent" :border="false"
|
|
:statusBar="true" :fixed="true" @clickLeft="$c.back"></uni-nav-bar>
|
|
|
|
<view v-if="pageData" class="hd-card relative column justify-center">
|
|
<view class="align-center">
|
|
<image :src="$img1('my/ouqi.png')"></image>
|
|
<view class="ml20 column">
|
|
<text>{{ $config.getAppSetting('currency1_name') }}数量</text>
|
|
<text>{{ pageData.user_integral }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="join mt20">
|
|
<view class="icon">
|
|
<image :src="$img1('my/canyu.png')" lazy-load></image>
|
|
</view>
|
|
今日已参与
|
|
<text>{{ pageData.y_count }}/{{ pageData.z_count }}</text>
|
|
</view>
|
|
<image class="hd-card-box" :src="$img1('my/ouqiBox.png')"></image>
|
|
</view>
|
|
|
|
<scroll-view class="tab" scroll-x>
|
|
<view class="tab-item common_bg relative" v-for="(item, i) in tabList" :key="i"
|
|
:class="tabCur==i?'act':'unact'" @click="tabChange(i)">
|
|
<text>
|
|
{{ item.title }}
|
|
</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption"
|
|
:up="upOption">
|
|
<view class="list">
|
|
<view class="list-item common_bg" v-for="(item, i) in listData" :key="i" @click="handelClick(item, i)">
|
|
<view v-if="tabList[tabCur].id == 1 && item.level > 2" class="check icon">
|
|
<image v-if="item.choose" :src="$img1('common/check_act.png')" lazy-load></image>
|
|
|
|
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
|
</view>
|
|
<view class="coin">
|
|
<image :src="item.level_img" lazy-load></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="title">{{ item.title }}</view>
|
|
<!-- <view class="open-num">{{ item.num }}HH币</view> -->
|
|
<view class="num">需要{{ item.kl_num2 }}个参与者</view>
|
|
</view>
|
|
<view v-if="tabList[tabCur].id == 1" class="share-btn relative" @click="h5share(item)">
|
|
<button v-if="!isH5" class="hide" open-type="share" :data-item="item" @click.stop></button>
|
|
立即分享
|
|
</view>
|
|
|
|
<view v-else-if="tabList[tabCur].id == 2" class="share-ing">
|
|
<view class="share-num">
|
|
<text>
|
|
{{ item.yi_ling == item.kl_num2 ? '已结束' : '分享中' }}
|
|
</text>
|
|
<template v-if="item.yi_ling != item.kl_num2">
|
|
{{ item.yi_ling }}/{{ item.kl_num2 }}
|
|
</template>
|
|
</view>
|
|
|
|
<view class="progress mt20" v-if="item.yi_ling != item.kl_num2">
|
|
<cmd-progress :percent="(item.yi_ling / item.kl_num2) * 100" :show-info="false"
|
|
stroke-color="#D3AFFF" :strokeWidth="5"></cmd-progress>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="tabCur == 3" class="share-end">已结束</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
|
|
<view v-if="tabList[tabCur].id == 1 && pageData" class="mix-fixed common_bg" :style="{
|
|
backgroundImage: `url(${$img('/static/img/3_mix_bg.png')})`
|
|
}">
|
|
<view class="title">
|
|
<text>合并大礼包</text>
|
|
</view>
|
|
|
|
<view class="rule">
|
|
高级赏包、低级赏包最多{{ pageData && pageData.ke_hc_count }}个合并1个,合成将损耗{{
|
|
pageData && pageData.sun_hao
|
|
}}{{ $config.getAppSetting('currency1_name') }}!
|
|
</view>
|
|
|
|
<view class="coin-num">
|
|
总{{ $config.getAppSetting('currency1_name') }}:{{ (mixData && mixData.sum_num) || 0 }} 将合成:{{
|
|
(mixData && mixData.coupon.title) || '普通赏券'
|
|
}}({{ $config.getAppSetting('currency1_name') }}{{ (mixData && mixData.sh_num) || 0 }})
|
|
</view>
|
|
|
|
<view class="btn-lsit">
|
|
<view class="btn" @click="chooseAll">全选</view>
|
|
|
|
<view class="btn" @click="cancelAll">取消</view>
|
|
|
|
<view class="btn color" @click="$c.noDouble(submitMix)">
|
|
合成(已选{{ chooseNum }}件)
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { shareCoupon, synthesisCoupon, calcSynthesis, getCouponList } from '@/common/server/coupon.js';
|
|
|
|
export default {
|
|
|
|
data() {
|
|
var isH5 = false;
|
|
// #ifdef H5
|
|
isH5 = true;
|
|
// #endif
|
|
return {
|
|
isH5,
|
|
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
|
downOption: {
|
|
auto: false
|
|
},
|
|
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
|
upOption: {
|
|
auto: true,
|
|
page: {
|
|
size: 10 // 每页数据的数量,默认10
|
|
}
|
|
},
|
|
tabList: [{
|
|
id: 1,
|
|
title: '未分享'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '已分享'
|
|
}
|
|
],
|
|
tabCur: 0,
|
|
pageData: '',
|
|
listData: [],
|
|
mixData: '',
|
|
canReload: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
chooseNum() {
|
|
if (this.listData.length <= 0) {
|
|
return 0
|
|
}
|
|
|
|
if (this.tabList[this.tabCur].id != 1) {
|
|
return 0
|
|
}
|
|
|
|
const arr = this.listData.filter(item => item.choose)
|
|
return arr.length
|
|
}
|
|
},
|
|
|
|
async onShareAppMessage(e) {
|
|
const item = e.target.dataset.item
|
|
const userInfo = uni.getStorageSync('userinfo')
|
|
await this.beforeShare(item.id)
|
|
|
|
return {
|
|
title: `快来领取${userInfo.nickname}分享的${item.num}赏币的${item.title}`,
|
|
imageUrl: item.level_img,
|
|
path: '/pages/user/index' +
|
|
this.$c.qs({
|
|
ou_coupon_id: item.id
|
|
})
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
if (options.type) {
|
|
this.tabCur = options.type
|
|
}
|
|
},
|
|
|
|
onShow() {},
|
|
|
|
methods: {
|
|
async h5share(item) {
|
|
|
|
const userInfo = uni.getStorageSync('userinfo')
|
|
await this.beforeShare(item.id)
|
|
var data = {
|
|
title: `快来领取${userInfo.nickname}分享的${item.num}赏币的${item.title}`,
|
|
imageUrl: item.level_img,
|
|
path: '/pages/user/index' +
|
|
this.$c.qs({
|
|
ou_coupon_id: item.id
|
|
})
|
|
}
|
|
console.log(data);
|
|
this.$c.$fenxiang(data.title, '', data.path, data.imageUrl);
|
|
},
|
|
beforeShare(coupon_id) {
|
|
return new Promise(async (resolve, reject) => {
|
|
const res = await shareCoupon(coupon_id);
|
|
if (res.status == 1) {
|
|
this.mescroll.resetUpScroll()
|
|
this.mescroll.scrollTo(0, 0)
|
|
|
|
resolve()
|
|
}
|
|
})
|
|
},
|
|
|
|
async submitMix() {
|
|
let arr = this.listData.filter(item => item.choose).map(item => item.id)
|
|
|
|
if (arr.length < 2) {
|
|
this.$c.toast({
|
|
title: '请最少选择两个赏券合成'
|
|
})
|
|
return
|
|
}
|
|
|
|
const res = await synthesisCoupon(arr.join(','));
|
|
if (res.status == 1) {
|
|
this.$c.toast({
|
|
title: res.msg,
|
|
duration: 500,
|
|
success: () => {
|
|
this.tabChange(this.tabCur)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
async confirmMix() {
|
|
let arr = this.listData.filter(item => item.choose).map(item => item.id)
|
|
|
|
if (arr.length < 2) {
|
|
this.mixData = ''
|
|
return
|
|
}
|
|
|
|
const res = await calcSynthesis(arr.join(','));
|
|
if (res.status == 1) {
|
|
this.mixData = res.data
|
|
}
|
|
},
|
|
|
|
cancelAll() {
|
|
if (this.tabList[this.tabCur].id != 1) {
|
|
return
|
|
}
|
|
|
|
this.listData.map(item => {
|
|
item.choose = false
|
|
})
|
|
|
|
this.confirmMix()
|
|
},
|
|
|
|
chooseAll() {
|
|
if (this.tabList[this.tabCur].id != 1) {
|
|
return
|
|
}
|
|
|
|
let arr = this.listData
|
|
.map((item, i) => {
|
|
return {
|
|
index: i,
|
|
level: item.level
|
|
}
|
|
})
|
|
.filter(item => item.level > 2)
|
|
let arr1 = null
|
|
|
|
/* 如果可合成赏券数量大于限制数量 */
|
|
if (arr.length > this.pageData.ke_hc_count) {
|
|
/* 截取等于限制数量的赏券 */
|
|
arr1 = arr.splice(0, this.pageData.ke_hc_count)
|
|
}
|
|
|
|
// console.log(arr)
|
|
|
|
/* 如果截取了赏券数据 */
|
|
if (arr1) {
|
|
/* 由上往下依次选中 */
|
|
arr1.map(item => {
|
|
this.listData[item.index].choose = true
|
|
})
|
|
|
|
/* 清除到之前选中的赏券,防止多选 */
|
|
arr.map(item => {
|
|
this.listData[item.index].choose = false
|
|
})
|
|
|
|
/* 如果没有截取 */
|
|
} else {
|
|
/* 默认全部选中 */
|
|
arr.map(item => {
|
|
this.listData[item.index].choose = true
|
|
})
|
|
}
|
|
|
|
this.confirmMix()
|
|
},
|
|
|
|
handelClick(item, i) {
|
|
if (this.tabList[this.tabCur].id == 1) {
|
|
if (item.level <= 2) {
|
|
this.$c.toast({
|
|
title: '该券不可合成'
|
|
})
|
|
return
|
|
}
|
|
|
|
let arr = this.listData.filter(item => item.choose)
|
|
|
|
if (arr.length >= this.pageData.ke_hc_count && !item.choose) {
|
|
this.$c.toast({
|
|
title: `赏包最多可选${this.pageData.ke_hc_count}个`
|
|
})
|
|
return
|
|
}
|
|
|
|
item.choose = !item.choose
|
|
this.confirmMix()
|
|
|
|
return
|
|
}
|
|
|
|
this.$c.to({
|
|
url: '/package/mine/coupon-detail',
|
|
query: {
|
|
id: item.id
|
|
}
|
|
})
|
|
},
|
|
|
|
tabChange(i) {
|
|
this.tabCur = i
|
|
this.listData = []
|
|
|
|
this.mescroll.resetUpScroll()
|
|
this.mescroll.scrollTo(0, 0)
|
|
},
|
|
|
|
/**
|
|
* @description: 获取列表
|
|
* @param {*} num
|
|
* @param {*} size
|
|
* @return {*}
|
|
*/
|
|
async getList({
|
|
num,
|
|
size
|
|
}) {
|
|
const res = await getCouponList({
|
|
page: num,
|
|
type: this.tabList[this.tabCur].id
|
|
});
|
|
if (res.status == 1) {
|
|
if (this.tabList[this.tabCur].id == 1) {
|
|
res.data.data.data.map(item => {
|
|
item.choose = false
|
|
})
|
|
}
|
|
|
|
if (num == 1) {
|
|
this.listData = []
|
|
}
|
|
|
|
this.pageData = res.data
|
|
|
|
this.listData = this.listData.concat(res.data.data.data)
|
|
this.mescroll.endByPage(
|
|
res.data.data.data.length,
|
|
res.data.data.last_page
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
padding-bottom: 400rpx;
|
|
|
|
.hd-card {
|
|
margin: 0 auto;
|
|
width: 710rpx;
|
|
height: 184rpx;
|
|
box-sizing: border-box;
|
|
padding: 28rpx 38rpx;
|
|
border: 4rpx solid #FFFFFF;
|
|
background: #ff873a;
|
|
border-radius: 40rpx;
|
|
|
|
>view:nth-child(1) {
|
|
>image {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
>view {
|
|
>text:nth-child(1) {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
>text:nth-child(2) {
|
|
font-weight: 700;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.join {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #FFFFFF;
|
|
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-box {
|
|
position: absolute;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
top: 24rpx;
|
|
right: 64rpx;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.common_bg {}
|
|
|
|
.tab {
|
|
margin-top: 30rpx;
|
|
white-space: nowrap;
|
|
|
|
.tab-item {
|
|
width: 154rpx;
|
|
height: 53rpx;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 30rpx;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
|
|
&:last-child {
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
&.act {
|
|
background: url($imgurl+'index/checkTab.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
text {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
|
|
}
|
|
}
|
|
|
|
&.unact {
|
|
background: url($imgurl+'index/uncheckTab.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
text {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #D6D6D6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.common_bg {}
|
|
}
|
|
|
|
.list {
|
|
padding: 10rpx 20rpx 0;
|
|
|
|
.list-item {
|
|
width: 710rpx;
|
|
height: 186rpx;
|
|
box-sizing: border-box;
|
|
padding-left: 30rpx;
|
|
padding-right: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
position: relative;
|
|
background: #3B3941;
|
|
border-radius: 10rpx;
|
|
|
|
.check {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 30rpx;
|
|
top: 30rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.coin {
|
|
width: 112rpx;
|
|
height: 120rpx;
|
|
position: relative;
|
|
// z-index: 1;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-left: 30rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.open-num {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.num {
|
|
margin-top: 10rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
|
|
.share-btn {
|
|
width: 180rpx;
|
|
height: 60rpx;
|
|
background: #894DD3;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.share-ing {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
|
|
.share-num {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff
|
|
}
|
|
|
|
.progress {
|
|
width: 150rpx;
|
|
|
|
::v-deep.cmd-progress-inner {
|
|
background-color: #F0F0F0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.share-end {
|
|
padding-right: 20rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
|
|
.common_bg {}
|
|
}
|
|
|
|
.mix-fixed {
|
|
position: fixed;
|
|
z-index: 10;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 370rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 40rpx;
|
|
|
|
.title {
|
|
padding-top: 30rpx;
|
|
|
|
text {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #ff873a;
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
margin-top: 20rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #dddddd;
|
|
}
|
|
|
|
.coin-num {
|
|
margin-top: 30rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-lsit {
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.btn {
|
|
width: 150rpx;
|
|
height: 80rpx;
|
|
border: 2rpx solid #ff873a;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ff873a;
|
|
}
|
|
|
|
.color {
|
|
width: 310rpx;
|
|
border: 0;
|
|
background: #ff873a;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
border: 2rpx solid #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |