web-africa-h5/pages/market/activity-zone/index.vue

880 lines
22 KiB
Vue
Raw Normal View History

2025-03-21 14:49:01 +08:00
<template>
<view>
<view class="top-tabbar">
<view :class="state_active == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">{{ $t('w_0144') }}
</view>
<!-- <view :class="state_active == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">{{ $t('ENU_APPROVE_B_725') }}</view> -->
</view>
<template v-if="state_active == 1">
<view class="pickup-list">
<view class="pickup-item" v-for="(item, index) in listData" :key="index"
@click.stop="gotoPage('/pages/market/activity-zone/detail?pkId=' + item.pkId)">
<view class="pickup-pic pr">
<image :src="item.actCover" mode="aspectFill"></image>
<view class="pickup-state" :class="{ bgGray: item.actStatus == 2 }">{{ item.actStatusVal }}
</view>
</view>
<view class="flex-1">
<view class="f30 domation text-ellipsis mb6">{{ item.actName }}</view>
<view class="f24 gray9 mb6">{{ $t('N_I_129') }}:</view>
<view class="f22 gray9 mb6">{{ item.actStartDate + '-' + item.actEndDate }}</view>
<!-- <view class="f26 gray3 text-ellipsis">{{ item.actExplain }}</view> -->
<!-- 我的进度 -->
<button v-if="item.actType == 61 || item.actType == 62" class="pickup-btn"
@click.stop="openDetail(item)">{{$t('fn_115') }}</button>
<button class="pickup-btn" v-if="item.existDrawNum == 0" @click.stop="openLottery(item)">{{
$t('w_0206') }}</button>
<button class="pickup-btn" @click.stop="openGift(item.pkId)"
v-if="item.existNewPeopleGift == 0">{{
$t('w_0205') }}</button>
<button class="pickup-btn" v-if="item.actType == 19" @click.stop="openTree">{{ $t('w_0283')
}}</button>
</view>
</view>
</view>
<template v-if="showPop">
<view class="pop-bg" @click.stop="showPop = false"></view>
<view class="pop-content d-c d-c-c">
<aylottery :availableSurplusNum="availableSurplusNum" :type="2" :list="aylotteryList"
themeColor="#811400" bgColor="#cf262b" bg_sd_Color="#ffffff00" @result="resultFun"
@toDetailPage="toDetailPage" :stay_index="stay_index_m" @Recharge="RechargeFunc"></aylottery>
</view>
</template>
<template v-if="showLottery">
<view class="pop-bg" @click.stop="closeFunc" style="z-index: 103;"></view>
<view class="pop-content-2">
<image class="lottry-bg" src="/static/bg/lottry-bg.png" mode=""></image>
<!-- <view class="f32 white mb20">恭喜!获得{{lotteryData.acGiftConfigList[0].productName}}</view> -->
<!-- <image style="width: 425rpx" :src="lotteryData.giftCover" mode="widthFix"></image> -->
<view class="f40 domation mb20 pop-lot-title text-ellipsis-2 tc" style="z-index: 2;">{{ $t('w_0195')
}}{{ lotteryData.giftName }}</view>
<image style="width:198rpx;height: 198rpx;;margin: 0 auto;" :src="lotteryData.giftCover"
mode="aspectFill"></image>
<view class="d-c d-c-c lottry-product">
<view class="text-ellipsis-2 white f24 tc" style="line-height: 1.5;">{{ $t('ENU_N_B_T_3') }}:{{
lotteryData.acGiftConfigList[0].productName }}</view>
<view class="text-ellipsis domation f24 tc">{{ $t('w_0196') }}:{{
lotteryData.acGiftConfigList[0].retailPrice }}</view>
</view>
</view>
</template>
<template v-if="isRecharge">
<view class="pop-bg" @click.stop="closeRechargeFunc" style="z-index: 104;"></view>
<view class="pop-input d-c d-c-c">
<view class="pop-top d-c d-c-c">
<view class="pop-title ww100">{{ $t('w_0199') }}{{ totalSurplusNum }}</view>
<view class="pop-title ww100">{{ $t('w_0194') }}{{ availableSurplusNum }}</view>
<view class="input-box d-c-c mb30"><input type="number" class="input-pop" v-model="rechargeNum"
:placeholder="$t('w_0200')" /></view>
</view>
<view class="border-t ww100 d-b-c" style="height: 89rpx;">
<view class="border-r-e d-c-c flex-1 f28 gray3 hh100" @click="closeRechargeFunc(null)">{{
$t('MY_ORD_24') }}</view>
<view class=" d-c-c flex-1 f28 domation hh100" @click="closeRechargeFunc(true)">
{{ $t('MN_F_32') }}
</view>
</view>
</view>
</template>
<template v-if="isGift">
<view class="pop-bg" @click="isGift = false"></view>
<view class="pop-giftpack d-c-c">
<view class="giftpack-content">
<image class="packgift-bg" src="/static/bg/packgift-bg.png" mode="aspectFill"></image>
<view style="z-index: 1;" class="pr">
<view class="d-e-c mb10" @click="isGift = false"><u-icon name="close" color="#fff"
size="36rpx"></u-icon></view>
<view class="fb white f32 d-c-c tc mb30">{{ planlist[current].plan }}</view>
<view class="plan-product mb20">
<swiper class="swiper" :current="current" interval="2000" duration="500">
<swiper-item v-for="(item, index) in planlist" :key="index">
<view class="gift-proitem d-b-s" v-for="(pitem, pindex) in item.pgpList"
:key="pindex">
<image class="gift-proitem-img" :src="pitem.cover" mode="aspectFill">
</image>
<view class="flex-1 d-c d-b-s">
<view class="f22 gray3 text-ellipsis">{{ pitem.productName }}</view>
<view class="f28 domation ">
<text class="f22">{{ currencyIcon() }}</text>
<text class="fb">{{ formatNum(pitem.price) }}</text>
</view>
</view>
<view class="f22 gray3">X{{ pitem.quantity }}</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="swiper-dots">
<view class="swiper-dot" :class="{ active: current == index }" @click="current = index"
v-for="(item, index) in planlist" :key="index"></view>
</view>
<button class="pop-lqbtn" @click.stop="SubGiftFunc">{{ $t('w_0211') }}</button>
</view>
</view>
</view>
</template>
<treeActive v-if="isTree" :isPop="isTree" :num="treeNum" :treeModel="treeModel" @close="closeTree">
</treeActive>
</template>
<!-- <template v-else-if="state_active == 2">
<view class="d-b-c search-data border-b f26 mb20">
<view class="flex-1 gray9">{{$t('w_0352')}}</view>
<picker mode="date" :value="form.startPayDate" :start="startPayDate" :end="endPayDate" @change="bindDateChange1">
<view class="picker-item-data">{{ form.startPayDate || $t('CK_KS_3') }}</view>
</picker>
<view style="margin: 0 60rpx;">{{$t('w_0139')}}</view>
<picker mode="date" :value="form.endPayDate" :start="startPayDate" :end="endPayDate" @change="bindDateChange2">
<view class="picker-item-data">{{ form.endPayDate || $t('CK_KS_9') }}</view>
</picker>
<view class="search-radio" @click="searchSubmit"><text class="icon iconfont icon-sousuo"></text></view>
</view>
<view class="memberList">
<view class="bonus-item" v-for="(item,index) in listData" :key="index">
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('MN_T_1') }}</view>
<view class="bonus-item-content f26 gray3">{{ item.memberCode }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('CK_KS_14') }}</view>
<view class="bonus-item-content f26 gray3">{{ item.memberName }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('w_0052') }}</view>
<view class="bonus-item-content f26 gray3">{{ item.phone }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('w_0148') }}</view>
<view class="bonus-item-content f26 gray3">{{ item.settleGradeStr }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('ENU_NOTICE_GRADE_2') }}</view>
<view class="bonus-item-content f26 gray3">{{ item.awardsStr }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('CK_KS_17') }}</view>
<view class="bonus-item-content f26 gray3">{{ item.quantity }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('w_0149') }}{{ currencyIcon() }}</view>
<view class="bonus-item-content f26 gray3">{{ item.price }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('ENU_TOTAL_V_2') }}{{ currencyIcon() }}</view>
<view class="bonus-item-content f26 gray3">{{ item.orderAmount }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t('w_0147') }}</view>
<view class="bonus-item-content f26 gray3">{{ item.payTime }}</view>
</view>
</view>
</view>
<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
<text class="iconfont icon-wushuju"></text>
<text class="cont">{{$t('w_0405')}}</text>
</view>
<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
</template> -->
</view>
</template>
<script>
import aylottery from '@/components/ay-lottery/ay-lottery.vue';
import utils from '@/common/utils.js';
import treeActive from '@/components/treeActive/treeActive.vue';
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
components: {
aylottery,
treeActive,
uniLoadMore,
},
data() {
return {
loading: false,
no_more: false,
state_active: 1,
form: {
pageNum: 1,
pageSize: 10,
startPayDate: '',
endPayDate: '',
},
total: 0,
isTree: false,
treeNum: 0,
treeModel: {},
listData: [],
values: '',
baseQuantity: 0,
pkId: 0,
module: {
pkId: 0,
usableQuantity: 0,
baseQuantity: 0
},
//跑马灯
showPop: false,
aylotteryList: [],
availableSurplusNum: '',
totalSurplusNum: '',
stay_index_m: 1,
showLottery: false,
lotteryData: {
acGiftConfigList: [{
productName: ''
}],
giftCover: ''
},
isRecharge: false,
isCashier: false,
isGift: false,
pkBaseId: 0,
rechargeNum: '',
current: 0,
pkGiftId: 0,
planlist: []
};
},
computed: {
/*加载中状态*/
loadingType() {
if (this.loading) {
return 1;
} else {
if (this.listData.length != 0 && this.no_more) {
return 2;
} else {
return 0;
}
}
},
startPayDate() {
return this.getDate('start');
},
endPayDate() {
return this.getDate('end');
}
},
onShow() {
this.stateFunc(this.state_active);
},
onReachBottom() {
let self = this;
if (self.form.pageNum * self.form.pageSize < self.total - 1) {
self.form.pageNum++;
self.getMemberInfo();
}
self.no_more = true;
},
methods: {
openDetail(e) {
this.gotoPage('/pages/market/activity-zone/other-detail?pkId=' + e.pkId + '&actTypeVal=' + e.actTypeVal +'&actType=' + e.actType)
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange1: function(e) {
this.form.startPayDate = e.detail.value;
},
bindDateChange2: function(e) {
this.form.endPayDate = e.detail.value;
},
searchSubmit: function() {
this.listData = [];
this.form.pageNum = 1;
this.getMemberInfo();
},
stateFunc(v) {
this.loading = true;
uni.showLoading({
title: '加载中'
});
this.state_active = v;
if (v == 1) {
this.getData();
} else if (v == 2) {
this.getMemberInfo();
}
},
getMemberInfo() {
let self = this;
self._get('activity/api/tree-rule-pick/member-info-list', self.form, res => {
const {
rows,
total
} = res;
self.listData = rows;
self.total = total;
self.loading = false;
});
},
RechargeFunc() {
this.isRecharge = true;
},
msg_modal(content, title = '') {
//统一提示方便全局修改
if (Boolean(content) === false) {
return;
}
uni.showModal({
title: title,
content: content,
confirmText: this.$t('w_0035'),
showCancel: false,
confirmColor: '#33CCCC',
success(res) {
if (res.confirm) {}
}
});
},
SubGiftFunc() {
let data = this.planlist[this.current];
data = JSON.stringify(data);
this.gotoPage('/pages/market/activity-zone/order-gift?data=' + encodeURIComponent(data));
},
openGift(e) {
let self = this;
this.pkGiftId = e;
uni.showLoading({
title: 'loading...'
});
self._post(
'activity/api/people-service/getGiftPack', {
pkBaseId: self.pkGiftId
},
res => {
uni.hideLoading();
self.planlist = res.data;
self.isGift = true;
}
);
},
openTree() {
let self = this;
uni.showLoading({
title: 'loading...'
});
self._get(
'activity/api/sa-tree-order/queryTreeActivity', {},
res => {
if (res.data && res.code == 200) {
self.treeModel = res.data;
self.treeNum = self.treeModel.quantity;
self.isTree = true;
console.log('isTree');
}
},
() => {},
com => {
uni.hideLoading();
}
);
},
closeTree() {
this.isTree = false;
},
resultFun(e) {
let self = this;
let item = e.item;
let list = e.list;
console.log(self.availableSurplusNum);
if (self.availableSurplusNum <= 0) {
this.msg_modal(self.$t('w_0427'), self.$t('w_0034'));
return;
}
self._post(
'activity/api/draw/lottery-draw', {
pkBaseId: self.pkId
},
res => {
let id = res.data.pkId;
self.aylotteryList.forEach((item, index) => {
if (item.pkId == id) {
self.stay_index_m = index;
}
});
self.lotteryData = res.data;
self.showLottery = true;
}
);
// this.msg_modal("抽中了" + item.name, '恭喜您')
//定义下一次转的位置
// that.stay_index_m = Math.round(Math.random() * (list.length - 1)); //随机数
},
toDetailPage(e) {
let list = e.list;
let idx = e.curIndex;
let list_img = [];
let item = e.item;
list.forEach(item => {
list_img.push(item.img);
});
if (list_img && list_img.length > 0) {
uni.previewImage({
current: list_img[idx], // 传 Number H5端出现不兼容
urls: list_img,
indicator: 'number',
loop: true
});
}
},
openLottery(e) {
let self = this;
self.pkId = e.pkId;
self._post(
'/activity/api/draw/prize-list', {
pkBaseId: e.pkId
},
res => {
self.aylotteryList = [];
res.rows.forEach((item, index) => {
self.aylotteryList.push({
name: item.giftName,
img: item.giftCover,
is_img_bg: item.giftCover,
pkId: item.pkId
});
});
self.getLotteryNum(e);
}
);
},
getLotteryNum(e) {
let self = this;
if (!e.pkId) {
return;
}
self._post(
'activity/api/draw/lottery-num', {
pkBaseId: e.pkId
},
res => {
self.availableSurplusNum = res.data.availableSurplusNum;
self.totalSurplusNum = res.data.totalSurplusNum;
self.showPop = true;
}
);
},
openInput(e) {
this.module = e;
this.baseQuantity = e.baseQuantity;
this.values = e.baseQuantity;
this.showPop = true;
},
Addnumber() {
if (this.values >= this.module.usableQuantity) {
return;
}
this.values += this.baseQuantity;
},
Reducenumber() {
if (this.values > this.baseQuantity) {
this.values -= this.baseQuantity;
}
},
goBack() {
uni.navigateBack();
},
getData() {
let self = this;
self._get('activity/api/base/activity-list', {}, res => {
self.listData = res.rows;
self.loading = false;
});
},
closeFunc(e) {
this.showLottery = false;
this.openLottery({
pkId: this.pkId
});
},
closeCashierFunc(e) {
this.isCashier = false;
},
closeRechargeFunc(e) {
let self = this;
if (e) {
if (self.rechargeNum <= 0) {
uni.showToast({
title: self.$t('w_0201'),
icon: 'none'
});
return;
}
self.gotoPage('/pages/market/activity-zone/recharge?payNum=' + self.rechargeNum + '&pkBaseId=' + self
.pkId);
this.showLottery = false;
this.showPop = false;
} else {
self.rechargeNum = '';
}
self.isRecharge = false;
}
}
};
</script>
<style lang="scss" scoped>
.nav-right-btn {
background: none;
color: #999;
font-size: 26rpx;
}
.pickup-list,
.memberList {
padding: 29rpx 24rpx 0 21rpx;
}
.pickup-item {
display: flex;
justify-content: space-between;
align-items: center;
// height: 363rpx;
background: #ffffff;
box-shadow: 0px 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 25rpx;
padding: 25rpx 22rpx 24rpx 18rpx;
box-sizing: border-box;
margin-bottom: 23rpx;
}
.pickup-pic {
width: 311rpx;
height: 209rpx;
border-radius: 20rpx;
margin-right: 25rpx;
display: block;
flex-shrink: 0;
position: relative;
z-index: 1;
image {
width: 311rpx;
height: 209rpx;
border-radius: 20rpx;
}
.pickup-state {
position: absolute;
z-index: 1;
top: 26rpx;
left: 0;
padding: 0 15rpx;
box-sizing: border-box;
min-width: 106rpx;
line-height: 46rpx;
font-size: 20rpx;
color: #fff;
background-color: #ffa50e;
border-radius: 0 8rpx 8rpx 0;
}
.pickup-state.bgGray {
background-color: #cccccc;
}
}
.pickup-btn {
min-width: 182rpx;
min-height: 52rpx;
line-height: 1.5;
align-items: 52rpx;
background: #fb3024;
border-radius: 26rpx;
font-size: 24rpx;
color: #ffffff;
text-align: center;
margin-top: 26rpx;
word-break: break-all;
display: flex;
justify-content: center;
align-items: center;
}
.pop-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 98;
background-color: rgba(0, 0, 0, 0.65);
}
.pop-content {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 100;
width: 636rpx;
height: 624rpx;
}
.lottry-bg {
position: absolute;
left: 0;
top: 0;
margin: auto;
z-index: 0;
width: 668rpx;
height: 820rpx;
}
.pop-content-2 {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 105;
width: 668rpx;
height: 820rpx;
}
.icon.icon-guanbi {
font-size: 32rpx;
color: #999;
position: absolute;
right: 25rpx;
top: 22rpx;
z-index: 101;
}
.pop-input {
width: 665rpx;
height: 350rpx;
background: #ffffff;
border-radius: 25rpx;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 105;
}
.pop-top {
padding: 40rpx 60rpx 0 60rpx;
box-sizing: border-box;
}
.pop-title {
font-size: 30rpx;
color: #333;
font-weight: bold;
margin-bottom: 22rpx;
}
.input-box {
// width: 80%;
height: 64rpx;
background: #ffffff;
border: 1rpx solid #dddddd;
border-radius: 32rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.input-pop {
box-sizing: border-box;
border-radius: 32rpx;
line-height: 1.5;
font-size: 28rpx;
color: #333;
padding: 0 25rpx;
border: none;
flex: 1;
outline-offset: 0;
}
.pop-lot-title {
// position: absolute;
// top: 96rpx;
// left: 140rpx;
position: relative;
margin: 0 auto;
margin-top: 96rpx;
width: 389rpx;
height: 125rpx;
padding: 10rpx 30rpx;
box-sizing: border-box;
line-height: 1.5;
margin-bottom: 122rpx;
}
.lottry-product {
width: 494rpx;
height: 126rpx;
background: #fdd840;
border-radius: 12rpx;
position: relative;
z-index: 2;
padding: 0 20rpx 0 20rpx;
box-sizing: border-box;
margin: 0 auto;
margin-top: 98rpx;
}
.plan-product {
width: 503rpx;
height: 381rpx;
border: 1rpx dashed #ffffff;
box-sizing: border-box;
border-radius: 20rpx;
.swiper {
width: 501rpx;
height: 379rpx;
padding: 22rpx 24rpx;
.gift-proitem {
width: 455rpx;
// height: 92rpx;
box-sizing: border-box;
padding: 11rpx 20rpx;
background-color: #fff;
border-radius: 10rpx;
margin-bottom: 26rpx;
.gift-proitem-img {
width: 54rpx;
height: 54rpx;
margin-right: 15rpx;
}
}
.gift-proitem:last-child {
margin-bottom: 0;
}
}
}
.pop-giftpack {
position: fixed;
z-index: 101;
top: 0;
right: 0;
bottom: 0;
left: 0;
.giftpack-content {
width: 549rpx;
height: 676rpx;
border-radius: 20rpx;
position: relative;
box-sizing: border-box;
padding: 20rpx;
.packgift-bg {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 549rpx;
height: 676rpx;
border-radius: 20rpx;
}
}
}
.swiper-dots {
display: flex;
justify-content: center;
align-items: center;
.swiper-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #fff;
margin-right: 20rpx;
}
.swiper-dot:last-of-type {
margin: 0;
}
.swiper-dot.active {
background: #000000;
}
}
.pop-lqbtn {
width: 472rpx;
height: 68rpx;
background: #ffb95c;
border-radius: 31rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
color: #fff;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-top: 20rpx;
}
.bonus-item {
padding: 20rpx 25rpx 20rpx 23rpx;
background-color: #fff;
margin-bottom: 20rpx;
.bonus-bottom {
height: 104rpx;
.order-btn {
box-sizing: border-box;
padding: 0 26rpx;
min-width: 146rpx;
height: 52rpx;
line-height: 52rpx;
text-align: center;
border-radius: 26rpx;
font-size: 24rpx;
color: #fff;
border: 1rpx solid #eee;
margin-left: 18rpx;
background: #fb3024;
border: 1rpx solid #fb3024;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.bonus-item-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
</style>