880 lines
22 KiB
Vue
880 lines
22 KiB
Vue
<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> |