2368 lines
54 KiB
Vue
2368 lines
54 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<uni-icons class="back" type="left" size="20" @click="open" color="#fff"></uni-icons>
|
||
<view>
|
||
<image :src="data.banner" style="width: 100%;height: 244px;"></image>
|
||
</view>
|
||
<view style="margin-top:-90px;position: relative;">
|
||
<customTab :isHuise="shouldBeTrue(data.goods)" />
|
||
</view>
|
||
<scroll-view class="package-items-box" scroll-x="true" v-if="data.goodsList.length">
|
||
<view class="package-items-container">
|
||
<view class="package-item" :class="{ 'active-package-item': selected == (index + 1) }"
|
||
v-for="(item, index) in data.goodsList" @click="onSelect(item, index)" :key="index">
|
||
<view class="top">
|
||
<view class="title">
|
||
{{ item.goods_name }}
|
||
</view>
|
||
<text class="del-text">￥{{ item.origin_price }}</text>
|
||
</view>
|
||
<view class="price-box">
|
||
<text>￥</text><text class="price">{{ item.price }}</text>
|
||
</view>
|
||
<view class="shen ">
|
||
{{ item.tips2 || `立省￥${(Number(item.origin_price) - Number(item.price)).toFixed(0)}` }}
|
||
</view>
|
||
<view class="active-package-item-tips" v-show="item.tips && selected == (index + 1)">
|
||
{{ item.tips }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="myCouponList" @click="data.myActivity.length > 0 ? myCoupon.open() : ''">
|
||
<view class="left">
|
||
<image src="/static/image/recharge/couponMin.png" mode=""></image>
|
||
<view class="title">{{ data.active_id == 0 ? '优惠券' : (data.activeCoupon.coupon_type_name + '已减') }}
|
||
</view>
|
||
<view class="money" v-if="data.active_id != 0">
|
||
￥{{ $toFiexd(data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) /
|
||
100) : ((1 - Number(data.activeCoupon.coupon_value)) * data.goods.price), 2) }}
|
||
</view>
|
||
</view>
|
||
<view class="right" v-if="data.active_id == 0">
|
||
<text style="color: red;">{{ data.myActivity.length == 0 ? '暂无优惠券' : ('待使用' + data.myActivity.length +
|
||
'张') }}</text>
|
||
<uni-icons type="forward" color="#AEAEAE" class="forward"></uni-icons>
|
||
</view>
|
||
<view class="right " v-else>
|
||
<view class="timeBox" v-if="data.countdown && data.active_id > 0">
|
||
<view class="titles">距离优惠结束</view>
|
||
<uni-countdown :font-size="12" :day="data.activeCoupon.days" :hour="data.activeCoupon.hours"
|
||
:minute="data.activeCoupon.minutes" :second="data.activeCoupon.seconds" color="#FFFFFF"
|
||
background-color="#2A2617" />
|
||
</view>
|
||
<uni-icons type="forward" color="#AEAEAE" class="forward"
|
||
:class="{ forward2: data.active_id != 0 }"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="question" :class="{ 'iosQuestion': $system == 'iOS' }">
|
||
<view class="titles">
|
||
常见问题
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question1.png"></image>
|
||
<view class="text">开通会员享受哪些权益</view>
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question2.png"></image>
|
||
<view class="text text1">会员用户享受无水印,无广告及专属客服等权益,正在开发中的100多个功能点免费更新,另外会员用户功能需求可定制。</view>
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question1.png"></image>
|
||
<view class="text">苹果安卓会员是否互通</view>
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question2.png"></image>
|
||
<view class="text text1">苹果、安卓以及鸿蒙系统会员是互通的,登录同一个账号,其他平台也可以使用,没有设备数量限制。</view>
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question1.png"></image>
|
||
<view class="text">会员时长如何计算</view>
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question2.png"></image>
|
||
<view class="text text1">月会员31天,年会员365天,终身会员永久使用不过期。</view>
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question1.png"></image>
|
||
<view class="text">是否会自动扣费</view>
|
||
</view>
|
||
<view class="titleBox">
|
||
<image src="/static/image/recharge/question2.png"></image>
|
||
<view class="text text1">我们不会自动扣费,会员到期后需要您手动续费。</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer-container">
|
||
<view class="payment-method-box">
|
||
<view class="wx-pay payment-method" v-for="(item, index) in data.payList"
|
||
@click="onSelectPayment(item.type)" :key="index">
|
||
<image class="img-select"
|
||
:src="paymentMethod == item.type ? '/static/image/recharge/selected.png' : '/static/image/recharge/unselected.png'">
|
||
</image>
|
||
<image class="logo" :src="item.image" mode="aspectFit"></image>
|
||
<text class="name">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="buttonBoxs " :class="{ 'christmas': data.isChristmas }">
|
||
<view class="hongbao" v-if="data.ishongBao">
|
||
<c-lottie ref="cLottieRef" :loop="false" src='/static/lottie/hongbao.json' width="100vw"
|
||
height='216vw'></c-lottie>
|
||
</view>
|
||
<view class="button-box " :class="{ 'white-flow': data.active_id > 0 }">
|
||
<view class="text">
|
||
合计
|
||
<text>￥</text>
|
||
<countUp :num="$toFiexd(data.price, 2)" height="24" style="margin-top: -6px;" color="red"
|
||
fontSize='24'></countUp>
|
||
已优惠￥{{ $toFiexd(data.coupon, 0) }}
|
||
</view>
|
||
<view class="button" @click="activateVip">
|
||
立即开通
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footerBottom"></view>
|
||
</view>
|
||
|
||
<uni-popup ref="coupon" type="center" mask-background-color="rgb(0 0 0 / 70%)" :is-mask-click="false"
|
||
:mask-click="false">
|
||
<view>
|
||
<view class="coupon" v-if="data.coupon">
|
||
<c-lottie ref="cLottieRef" src='/static/lottie/coupon.json' width="100vw" height='462px' :loop="false"
|
||
@Complete="Complete"></c-lottie>
|
||
</view>
|
||
<transition name="scale">
|
||
<view v-if="!data.coupon" class="animated-box">
|
||
<view class="couponBox"
|
||
:style="{ height: data.activity.length == 1 ? '266px' : (data.activity.length == 2 ? '358px' : '450px') }">
|
||
|
||
<image class="shadowBg" src="/static/image/recharge/shadowBg.png" mode=""></image>
|
||
<view class="header">
|
||
|
||
</view>
|
||
<view class="couponConten"
|
||
:style="{ height: data.activity.length == 1 ? '76px' : (data.activity.length == 2 ? '168px' : '260px') }">
|
||
|
||
</view>
|
||
<c-lottie ref="cLottieRef" class="couponTop" src='/static/lottie/couponTop.json' width="100vw"
|
||
height='390px'></c-lottie>
|
||
<image class="colse" src="/static/image/watermarkColse.png" mode="" @click="coupon.close()">
|
||
</image>
|
||
<scroll-view class="listCoupon" scroll-y="true"
|
||
:style="{ height: data.activity.length == 1 ? '92px' : (data.activity.length == 2 ? '184px' : '276px') }">
|
||
<view class="item" v-for="(item, index) in data.activity" :key="index">
|
||
<view class="left">
|
||
<text class="danwei">{{ item.activity_type_name == '折扣券' ? '' : '￥' }}</text>
|
||
<text class="AlibabaPuHuiTiBold">{{ item.activity_type_name == '折扣券' ?
|
||
((Number(item.activity_value) * 10) + '折') : item.activity_value }}</text>
|
||
</view>
|
||
<view class="right">
|
||
{{ item.activity_type_name }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="couponButton" @click="submitActivity">
|
||
<c-lottie ref="cLottieRef" src='/static/lottie/couponButton.json' width="305px"
|
||
height='86px'></c-lottie>
|
||
</view>
|
||
</view>
|
||
</transition>
|
||
</view>
|
||
</uni-popup>
|
||
<view class="popup">
|
||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" mask-background-color="rgb(0 0 0 / 70%)">
|
||
<view class="dialog-container">
|
||
<view class="top">
|
||
<view>亲~您还有福利</view>
|
||
<view>真的要放弃优惠吗？</view>
|
||
</view>
|
||
<view class="content">
|
||
<div class="title-box">
|
||
<image class="decorative-line" src="/static/image/recharge/dialogTitleLeft.png" mode=""></image>
|
||
<text class="title">您可享以下权益</text>
|
||
<image class="decorative-line" src="/static/image/recharge/dialogTitleRight.png" mode="">
|
||
</image>
|
||
</div>
|
||
<view class="vip-benefits">
|
||
<view class="benefit-item" v-for="(benefit, index) in dialogVipBenefits" :key="index">
|
||
<image class="img" :src="benefit.url" mode=""></image>
|
||
<view class="name">
|
||
{{ benefit.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="timeDJS" v-if="data.active_id">
|
||
<view class="titles">距离优惠结束</view>
|
||
<uni-countdown :font-size="14" :day="data.activeCoupon2.days" :hour="data.activeCoupon2.hours"
|
||
:minute="data.activeCoupon2.minutes" :second="data.activeCoupon2.seconds" color="#FFFFFF"
|
||
background-color="#2A2617" />
|
||
</view>
|
||
<view class="button-box">
|
||
<view class="button" @click="activateVip('back')">
|
||
开通会员
|
||
</view>
|
||
<text class="leave" @click="back">去意已决</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
<uni-popup ref="myCoupon" type="bottom" :safeArea="false" border-radius="10px 10px 0 0"
|
||
mask-background-color="rgb(0,0,0,0.8)">
|
||
<view class="myCouponContainer" :style="{ height: proxy.$system == 'iOS' ? '400px' : '370px' }">
|
||
<scroll-view scroll-y="true" class="myCouponBox">
|
||
<view>
|
||
<view class="item" v-for="(item, index) in data.myActivity" :key="index"
|
||
@click="(data.goods.price < (Number(item.threshold) / 100) && item.threshold != '') || !item.isStatus ? '' : setActiveId(item)">
|
||
<view class="left"
|
||
:class="{ left2: data.goods.price < (Number(item.threshold) / 100) || !item.isStatus }">
|
||
<view class="money">
|
||
<text v-if="item.coupon_type_name != '折扣券'">￥</text>
|
||
<text class="moneys">{{ item.coupon_type_name != '折扣券' ? (Number(item.coupon_value) /
|
||
100) : ((Number(item.coupon_value) * 10) + '折') }}</text>
|
||
</view>
|
||
<view class="dec">
|
||
{{ item.threshold != '' ? ('满' + (Number(item.threshold) / 100) + '可用') : '无门槛' }}
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="titlebox">
|
||
<view class="title">{{ item.coupon_name }}</view>
|
||
<view class="dec">有效期至{{ item.expire_time }}</view>
|
||
</view>
|
||
<image
|
||
v-if="(data.goods.price < (Number(item.threshold) / 100) && item.threshold != '') || !item.isStatus"
|
||
class="checkedImg" src="/static/image/recharge/checked1.png" mode=""></image>
|
||
<image v-else-if="data.active_ids == item.id" class="checkedImg"
|
||
src="/static/image/recharge/checked3.png" mode=""></image>
|
||
<image v-else class="checkedImg" src="/static/image/recharge/checked2.png" mode=""></image>
|
||
</view>
|
||
<view class="jjdq" v-if="isToday(item.expire_times)">
|
||
即将到期
|
||
</view>
|
||
<view class="ygq" v-if="!item.isStatus">
|
||
已过期
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="btn" @click="activeClick(true)">
|
||
确定
|
||
</view>
|
||
<image @click="activeClick(false)" class="myCouponContainerClose"
|
||
src="/static/image/recharge/myCouponContainerClose.png" mode=""></image>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
|
||
import customTab from "@/components/custom-tab/custom-tab.vue"
|
||
import countUp from "@/components/countUp/countUp.vue"
|
||
import { postJson } from "@/utils/requests.js"
|
||
import { ref, reactive, getCurrentInstance, watch, nextTick, toRefs } from "vue";
|
||
import { onLoad, onShow, onReady, onPullDownRefresh, onReachBottom, onBackPress, onUnload } from "@dcloudio/uni-app";
|
||
const { appContext, proxy } = getCurrentInstance();
|
||
const popup = ref();
|
||
const coupon = ref();
|
||
const couponBox = ref();
|
||
const myCoupon = ref();
|
||
const dialogVipBenefits = [{
|
||
name: "模拟微信",
|
||
url: "/static/image/recharge/moniweixinDialog.png"
|
||
},
|
||
{
|
||
name: "无广告",
|
||
url: "/static/image/recharge/wuguanggaoDialog.png"
|
||
},
|
||
{
|
||
name: "无水印",
|
||
url: "/static/image/recharge/wushuiyinDialog.png"
|
||
},
|
||
{
|
||
name: "专属客服",
|
||
url: "/static/image/recharge/zhuanshukefuDialog.png"
|
||
}
|
||
]
|
||
|
||
// 套餐列表
|
||
const packageList = [{
|
||
name: "连续包月",
|
||
delPrice: "89",
|
||
price: "29",
|
||
lifespan: "一月"
|
||
},
|
||
{
|
||
name: "连续包季",
|
||
delPrice: "189",
|
||
price: "98",
|
||
lifespan: "一季"
|
||
},
|
||
{
|
||
name: "连续包年",
|
||
delPrice: "365",
|
||
price: "198",
|
||
lifespan: "一年"
|
||
}
|
||
]
|
||
|
||
const data = reactive({
|
||
scrollLeft: 0,
|
||
active_id: 0,
|
||
active_ids: 0,
|
||
activeitems: {},
|
||
coupon: true,
|
||
currentUrl: '',
|
||
background: ['color1', 'color2', 'color3'],
|
||
indicatorDots: false,
|
||
autoplay: false,
|
||
interval: 5000,
|
||
duration: 500,
|
||
// 底部按钮文字
|
||
buttonText: '',
|
||
// 套餐选择
|
||
selected: 1,
|
||
// 支付方式选择
|
||
paymentMethod: "wxpay",
|
||
// banner列表
|
||
bannerList: [{
|
||
url: "/static/image/recharge/banner1.png"
|
||
}],
|
||
// 会员权益列表
|
||
benefitList: [{
|
||
name: "无广告",
|
||
url: "/static/image/recharge/icon1.png"
|
||
},
|
||
{
|
||
name: "无水印",
|
||
url: "/static/image/recharge/icon2.png"
|
||
},
|
||
{
|
||
name: "专属客服",
|
||
url: "/static/image/recharge/icon3.png"
|
||
},
|
||
{
|
||
name: "多设备",
|
||
url: "/static/image/recharge/icon4.png"
|
||
},
|
||
{
|
||
name: "AI聊天模板",
|
||
url: "/static/image/recharge/icon5.png"
|
||
},
|
||
{
|
||
name: "聊天转账",
|
||
url: "/static/image/recharge/icon6.png"
|
||
},
|
||
{
|
||
name: "限额设置",
|
||
url: "/static/image/recharge/icon7.png"
|
||
},
|
||
{
|
||
name: "零钱修改",
|
||
url: "/static/image/recharge/icon8.png"
|
||
},
|
||
{
|
||
name: "零钱通",
|
||
url: "/static/image/recharge/icon9.png"
|
||
},
|
||
{
|
||
name: "分付",
|
||
url: "/static/image/recharge/icon10.png"
|
||
},
|
||
{
|
||
name: "账单",
|
||
url: "/static/image/recharge/icon11.png"
|
||
},
|
||
{
|
||
name: "朋友圈",
|
||
url: "/static/image/recharge/icon12.png"
|
||
}
|
||
],
|
||
goodsList: [],
|
||
myActivity: [],
|
||
activeCoupon: {},
|
||
activeCoupon2: {},
|
||
uni_recharge_back: [],
|
||
goods: {},
|
||
activity: [],
|
||
appUser: {},
|
||
countdown: true,
|
||
isBack: true,
|
||
payList: [{
|
||
image: '/static/image/recharge/wxpay.png',
|
||
name: '微信支付',
|
||
type: 'wxpay'
|
||
},
|
||
{
|
||
image: '/static/image/recharge/alipay.png',
|
||
name: '支付宝支付',
|
||
type: 'alipay',
|
||
}
|
||
],
|
||
open_number: 1,
|
||
back_number: 1,
|
||
price: 0,
|
||
coupon: 0,
|
||
ishongBao: false,
|
||
incrementTimer: null,
|
||
timeout: null,
|
||
isChristmas: false,
|
||
// 添加一个标志位来防止快速连续点击导致的价格显示错误
|
||
isProcessingClick: false,
|
||
banner: '/static/image/recharge/banner1.png',
|
||
})
|
||
|
||
let { buttonText, selected, benefitList, noticeList, commentList, paymentMethod } = toRefs(data)
|
||
|
||
/**
|
||
* 返回监听
|
||
*/
|
||
onBackPress((e) => {
|
||
if (e.from == 'backbutton' && data.appUser.vip == 1) {
|
||
open()
|
||
return true; //阻止返回
|
||
}
|
||
})
|
||
|
||
|
||
onLoad(async () => {
|
||
const config = uni.getStorageSync('config').config
|
||
const themeConfig = config?.['client.uniapp.theme']
|
||
if (themeConfig?.enable) {
|
||
if (themeConfig?.theme == '0214') {
|
||
data.banner = '/static/image/recharge/214/bannar.png'
|
||
// })
|
||
} else if (themeConfig?.theme == '0217') {
|
||
data.banner = '/static/image/recharge/chunjie/bannar.png'
|
||
}
|
||
}
|
||
let pages = getCurrentPages();
|
||
let currentPage = pages[pages.length - 1];
|
||
data.currentUrl = proxy.$pageData[currentPage.route];
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true // 添加遮罩防止用户操作
|
||
});
|
||
let user = await proxy.$requestPromise({
|
||
url: 'api/user',
|
||
method: "GET",
|
||
data: {}
|
||
})
|
||
if (user.code == 0) {
|
||
data.appUser = user.data
|
||
}
|
||
let goods = await proxy.$requestPromise({
|
||
url: 'api/order/goods',
|
||
method: "GET",
|
||
data: {
|
||
type: "member"
|
||
}
|
||
})
|
||
console.log(goods)
|
||
if (goods.code == 0) {
|
||
data.goodsList = goods.data
|
||
|
||
let zsItem = goods.data[0]
|
||
let zsIndex = 0
|
||
let checked = true
|
||
goods.data.forEach((item, index) => {
|
||
if (item.checked && checked) {
|
||
checked = false
|
||
zsItem = item
|
||
zsIndex = index
|
||
}
|
||
})
|
||
nextTick(() => {
|
||
setTimeout(() => {
|
||
data.scrollLeft = zsIndex * 120
|
||
}, 100)
|
||
})
|
||
let activity = await proxy.$requestPromise({
|
||
url: 'api/activity/coupon',
|
||
method: "GET",
|
||
data: {
|
||
page: 1,
|
||
size: 50,
|
||
status: 1
|
||
}
|
||
})
|
||
if (activity.data.total != 0) {
|
||
activity.data.items.forEach(item => {
|
||
if (new Date(item.expire_time) < new Date()) {
|
||
item['isStatus'] = false
|
||
} else {
|
||
item['isStatus'] = true
|
||
}
|
||
item['expire_times'] = item.expire_time
|
||
item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(0, 10)
|
||
})
|
||
data.myActivity = [
|
||
...activity.data.items.filter(item => (item.threshold == '' || zsItem.price >= (Number(item
|
||
.threshold) / 100)) && item.isStatus),
|
||
...activity.data.items.filter(item => (zsItem.price < (Number(item.threshold) / 100) && item
|
||
.threshold != '') || !item.isStatus)
|
||
]
|
||
data.myActivity = deduplicateKeepLast(data.myActivity)
|
||
}
|
||
await onSelect(zsItem, zsIndex)
|
||
}
|
||
let activity = await proxy.$requestPromise({
|
||
url: 'api/activity',
|
||
method: "GET",
|
||
data: {
|
||
scene: 'uni_open_recharge'
|
||
}
|
||
})
|
||
data.activity = activity.data
|
||
if (activity.data.length != 0) {
|
||
coupon.value.open()
|
||
}
|
||
uni.setStorageSync('open_number', data.open_number + 1);
|
||
let uni_recharge_back = await proxy.$requestPromise({
|
||
url: 'api/activity',
|
||
method: "GET",
|
||
data: {
|
||
scene: 'uni_recharge_back'
|
||
}
|
||
})
|
||
data.uni_recharge_back = uni_recharge_back.data
|
||
if (uni_recharge_back.data.length == 0) {
|
||
data.isBack = false
|
||
}
|
||
uni.hideLoading();
|
||
//监听宿主传递消息
|
||
uni.onNativeEventReceive((event, data) => {
|
||
if (event) {
|
||
if (event == "wx_pay_result") {
|
||
if (Number(data) == 0) {
|
||
paymentResult(uni.getStorageSync('orderId'), paymentMethod.value)
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败'
|
||
})
|
||
}
|
||
}
|
||
if (event == "ios_pay_result") {
|
||
if (Number(data) == 0) {
|
||
paymentResult(uni.getStorageSync('orderId'), paymentMethod.value)
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败'
|
||
})
|
||
}
|
||
}
|
||
console.log('接收到宿主App消息-' + event + '：' + data);
|
||
}
|
||
})
|
||
})
|
||
|
||
onShow(async () => {
|
||
|
||
})
|
||
onUnload(() => {
|
||
uni.offNativeEventReceive()
|
||
})
|
||
onReady(() => {
|
||
try {
|
||
if (plus.os.name === 'Android') {
|
||
let color = plus.android.newObject("android.graphics.Color");
|
||
let activity = plus.android.runtimeMainActivity();
|
||
let colorInt = plus.android.invoke(color, "parseColor", '#fff'); // 设置为橙色
|
||
let window = plus.android.invoke(activity, "getWindow");
|
||
plus.android.invoke(window, "setNavigationBarColor", colorInt);
|
||
uni.setNavigationBarColor({
|
||
animation: { // 动画效果
|
||
duration: 100,
|
||
timingFunc: 'easeIn'
|
||
}
|
||
})
|
||
console.log("状态栏设置完毕！");
|
||
setTimeout(function () {
|
||
uni.setNavigationBarColor({
|
||
backgroundColor: '#fff',
|
||
animation: { // 动画效果
|
||
duration: 100,
|
||
timingFunc: 'easeIn'
|
||
}
|
||
})
|
||
}, 200);
|
||
setTimeout(function () {
|
||
plus.navigator.setStatusBarStyle("light");
|
||
}, 200);
|
||
}
|
||
} catch (error) {
|
||
//TODO handle the exception
|
||
}
|
||
})
|
||
|
||
|
||
|
||
function isToday(inputTime) {
|
||
// 获取当前日期的时间戳（去掉时分秒）
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
const todayTimestamp = today.getTime();
|
||
|
||
// 处理输入时间
|
||
const inputDate = new Date(inputTime);
|
||
inputDate.setHours(0, 0, 0, 0);
|
||
const inputTimestamp = inputDate.getTime();
|
||
|
||
// 比较时间戳
|
||
return inputTimestamp === todayTimestamp;
|
||
}
|
||
|
||
function calculateTimeRemaining(targetTime) {
|
||
// 获取目标时间和当前时间的时间戳
|
||
const target = new Date(targetTime).getTime();
|
||
const now = new Date().getTime();
|
||
// 计算时间差（毫秒）
|
||
const difference = target - now;
|
||
// 如果目标时间已过，返回0
|
||
if (difference <= 0) {
|
||
return {
|
||
days: 0,
|
||
hours: 0,
|
||
minutes: 0,
|
||
seconds: 0
|
||
};
|
||
}
|
||
// 计算天数
|
||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
||
// 计算剩余小时数
|
||
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
// 计算剩余分钟数
|
||
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
||
// 计算剩余秒数
|
||
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
|
||
console.log({
|
||
days: days,
|
||
hours: hours,
|
||
minutes: minutes,
|
||
seconds: seconds
|
||
})
|
||
return {
|
||
days: days,
|
||
hours: hours,
|
||
minutes: minutes,
|
||
seconds: seconds
|
||
};
|
||
}
|
||
|
||
function activeClick(status) {
|
||
myCoupon.value.close()
|
||
if (status && data.active_ids > 0) {
|
||
let item = data.activeitems
|
||
data.activeCoupon = {
|
||
...item,
|
||
...calculateTimeRemaining(item.expire_times)
|
||
}
|
||
data.countdown = false
|
||
setTimeout(() => {
|
||
data.countdown = true
|
||
}, 100);
|
||
data.active_id = item.id
|
||
setTimeout(() => {
|
||
setPrice(true)
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
function setActiveId(item) {
|
||
data.active_ids = item.id
|
||
data.activeitems = item
|
||
}
|
||
|
||
function setPrice(status) {
|
||
console.log("setPrice")
|
||
if (data.incrementTimer) {
|
||
clearInterval(data.incrementTimer);
|
||
data.incrementTimer = null
|
||
}
|
||
if (data.timeout) {
|
||
clearInterval(data.timeout);
|
||
data.timeout = null
|
||
}
|
||
let oldPrice = Number(data.goods.origin_price)
|
||
data.price = Number(data.goods.origin_price)
|
||
console.log("开始", data.price)
|
||
let price = 0
|
||
let origin_price = 0
|
||
let coupon = 0
|
||
if (data.active_id == 0) {
|
||
price = Number(data.goods.price)
|
||
origin_price = Number(data.goods.origin_price)
|
||
coupon = origin_price - price
|
||
} else {
|
||
price = data.goods.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) /
|
||
100) : ((1 - Number(data.activeCoupon.coupon_value)) * data.goods.price))
|
||
coupon = (Number(data.goods.origin_price) - Number(data.goods.price)) + (Number(data.goods.price) - (data.goods
|
||
.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) / 100) : ((
|
||
1 - Number(data.activeCoupon.coupon_value)) * data.goods.price))))
|
||
}
|
||
data.coupon = proxy.$toFiexd(coupon, 0)
|
||
if (status) {
|
||
if (data.active_id) {
|
||
data.ishongBao = true
|
||
data.timeout = setTimeout(() => {
|
||
data.ishongBao = false
|
||
}, 1500);
|
||
}
|
||
data.price = proxy.$toFiexd(price, 2)
|
||
if (false) {
|
||
// 修复关键点：计算合理的间隔时间
|
||
const priceDiff = Math.abs(oldPrice - price);
|
||
// 确保间隔在合理范围内（16ms-100ms）
|
||
let interval = 1000 / priceDiff;
|
||
if (interval < 16) interval = 16; // 不低于16ms
|
||
if (interval > 100) interval = 100; // 不高于100ms
|
||
if (!isFinite(interval)) interval = 16; // 处理除零
|
||
console.log(`间隔: ${interval}ms`);
|
||
data.incrementTimer = setInterval(() => {
|
||
if (oldPrice > price) {
|
||
if (Number(data.price) > price) {
|
||
if ((oldPrice - price) > 500) {
|
||
data.price -= 4
|
||
} else {
|
||
data.price -= 1
|
||
}
|
||
} else {
|
||
data.isProcessingClick = false
|
||
data.price = proxy.$toFiexd(price, 2)
|
||
clearInterval(data.incrementTimer);
|
||
data.incrementTimer = null
|
||
}
|
||
} else {
|
||
if (Number(data.price) < price) {
|
||
data.price = Number(data.price) + 1
|
||
} else {
|
||
data.isProcessingClick = false
|
||
data.price = proxy.$toFiexd(price, 2)
|
||
clearInterval(data.incrementTimer);
|
||
data.incrementTimer = null
|
||
}
|
||
}
|
||
console.log(data.price)
|
||
}, interval)
|
||
}
|
||
|
||
} else {
|
||
data.isProcessingClick = false
|
||
data.price = proxy.$toFiexd(price, 2)
|
||
}
|
||
console.log("最后", data.price)
|
||
|
||
|
||
}
|
||
/* 获取我的优惠券 */
|
||
async function getActivity() {
|
||
let activity = await proxy.$requestPromise({
|
||
url: 'api/activity/coupon',
|
||
method: "GET",
|
||
data: {
|
||
page: 1,
|
||
size: 50,
|
||
status: 1
|
||
}
|
||
})
|
||
if (activity.data.total != 0) {
|
||
activity.data.items.forEach(item => {
|
||
if (new Date(item.expire_time) < new Date()) {
|
||
item['isStatus'] = false
|
||
} else {
|
||
item['isStatus'] = true
|
||
}
|
||
})
|
||
activity.data.items.forEach(item => {
|
||
item['expire_times'] = item.expire_time
|
||
item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(0, 10)
|
||
})
|
||
data.myActivity = [
|
||
...activity.data.items.filter(item => (item.threshold == '' || data.goods.price >= (Number(item.threshold) /
|
||
100) && item.isStatus)),
|
||
...activity.data.items.filter(item => (data.goods.price < (Number(item.threshold) / 100) && item.threshold !=
|
||
'') || !item.isStatus)
|
||
]
|
||
data.myActivity = deduplicateKeepLast(data.myActivity)
|
||
}
|
||
}
|
||
function deduplicateKeepLast(arr, idKey = 'id') {
|
||
const map = new Map();
|
||
|
||
arr.forEach(item => {
|
||
const id = item[idKey];
|
||
map.set(id, item); // 总是设置最新的值
|
||
});
|
||
|
||
return Array.from(map.values());
|
||
}
|
||
|
||
/* 领取优惠券 */
|
||
async function submitActivity() {
|
||
console.log("activity_id");
|
||
let activity_id = ''
|
||
data.activity.forEach(item => {
|
||
activity_id += ',' + item.id
|
||
})
|
||
activity_id = activity_id.replace(',', '')
|
||
if (activity_id != "") {
|
||
console.log("activity_id", activity_id);
|
||
let activityRes = await postJson('q', 'api/activity', {
|
||
activity_id: activity_id//activity_id+"="
|
||
})
|
||
console.log(activityRes)
|
||
if (activityRes.code == 0) {
|
||
coupon.value.close()
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '领取成功'
|
||
})
|
||
getActivity()
|
||
} else {
|
||
coupon.value.close()
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '领取失败'
|
||
})
|
||
}
|
||
} else {
|
||
coupon.value.close()
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '领取失败'
|
||
})
|
||
}
|
||
|
||
}
|
||
/**
|
||
* @param {Object} item
|
||
* @param {Object} index
|
||
* 选择购买套餐
|
||
*/
|
||
|
||
|
||
/*
|
||
防抖
|
||
*/
|
||
const debouncedOnSelect = debounce((items, index) => {
|
||
onSelect(items, index);
|
||
}, 200, false);
|
||
|
||
function debounce(func, wait, immediate = true) {
|
||
let timeout;
|
||
return function (...args) {
|
||
const later = () => {
|
||
timeout = null;
|
||
if (!immediate) func(...args);
|
||
};
|
||
|
||
const callNow = immediate && !timeout;
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(later, wait);
|
||
|
||
if (callNow) func(...args);
|
||
};
|
||
}
|
||
async function onSelect(items, index) {
|
||
data.active_id = 0
|
||
data.activeCoupon = {}
|
||
data.active_ids = 0
|
||
data.countdown = false
|
||
data.goods = items
|
||
console.log("选中商品", data.goods)
|
||
let id = 0
|
||
if (data.myActivity.length > 0) {
|
||
let defaultCoupon = data.myActivity.filter(item => item.activity_id == data.goods.default_activity)
|
||
if (defaultCoupon.length > 0) {
|
||
defaultCoupon.forEach(item => {
|
||
if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') && item.isStatus) {
|
||
item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item.coupon_value) /
|
||
100) : ((1 - Number(item.coupon_value)) * data.goods.price))
|
||
} else {
|
||
item['price2'] = 10000000
|
||
}
|
||
})
|
||
let maxItem = defaultCoupon.reduce((min, curr) => curr.price2 < min.price2 ? curr : min)
|
||
console.log("默认", maxItem)
|
||
if (maxItem.price2 != 10000000) {
|
||
id = maxItem.id
|
||
data.activeitems = maxItem
|
||
data.activeCoupon = {
|
||
...maxItem,
|
||
...calculateTimeRemaining(maxItem.expire_times)
|
||
}
|
||
|
||
console.log("data.activeCoupon", data.activeCoupon)
|
||
}
|
||
}
|
||
if (id == 0 && data.goods.default_activity != '') {
|
||
try {
|
||
data.myActivity.forEach(item => {
|
||
if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') && item.isStatus) {
|
||
item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item.coupon_value) /
|
||
100) : ((1 - Number(item.coupon_value)) * data.goods.price))
|
||
} else {
|
||
item['price2'] = 10000000
|
||
}
|
||
})
|
||
let maxItem = data.myActivity.reduce((min, curr) => curr.price2 < min.price2 ? curr : min)
|
||
console.log("其他", maxItem)
|
||
if (maxItem.price2 != 10000000) {
|
||
id = maxItem.id
|
||
data.activeitems = maxItem
|
||
data.activeCoupon = {
|
||
...maxItem,
|
||
...calculateTimeRemaining(maxItem.expire_times)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
}
|
||
console.log(data.activeitems)
|
||
console.log(data.active_id)
|
||
data.active_id = id
|
||
data.active_ids = id
|
||
selected.value = index + 1
|
||
buttonText.value = `${items.price}元享受${items.goods_name}`
|
||
if (items.pay_type != '') {
|
||
let list = items.pay_type.split(',').filter(cell => cell == 'alipay' || cell == 'weixin')
|
||
if (list.length != 0) {
|
||
let listData = list.map(cell => {
|
||
return {
|
||
image: cell == 'weixin' ? '/static/image/recharge/wxpay.png' : '/static/image/recharge/alipay.png',
|
||
name: cell == 'weixin' ? '微信支付' : '支付宝支付',
|
||
type: cell == 'weixin' ? 'wxpay' : 'alipay'
|
||
}
|
||
})
|
||
data.payList = listData
|
||
} else {
|
||
data.payList = [{
|
||
image: '/static/image/recharge/wxpay.png',
|
||
name: '微信支付',
|
||
type: 'wxpay'
|
||
},
|
||
{
|
||
image: '/static/image/recharge/alipay.png',
|
||
name: '支付宝支付',
|
||
type: 'alipay',
|
||
}
|
||
]
|
||
}
|
||
} else {
|
||
data.payList = [{
|
||
image: '/static/image/recharge/wxpay.png',
|
||
name: '微信支付',
|
||
type: 'wxpay'
|
||
},
|
||
{
|
||
image: '/static/image/recharge/alipay.png',
|
||
name: '支付宝支付',
|
||
type: 'alipay',
|
||
}
|
||
]
|
||
}
|
||
paymentMethod.value = data.payList[0].type
|
||
setTimeout(function () {
|
||
data.countdown = true
|
||
}, 100);
|
||
await setPrice(true)
|
||
await getActivity()
|
||
|
||
}
|
||
/**
|
||
* @param {Object} value
|
||
* 选择支付方式
|
||
*/
|
||
function onSelectPayment(value) {
|
||
paymentMethod.value = value
|
||
}
|
||
|
||
function open() {
|
||
|
||
uni.setStorageSync('back_number', data.back_number + 1);
|
||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||
if (!data.isBack) {
|
||
proxy.$apiUserEvent('all', {
|
||
type: "event",
|
||
key: "recharge_dialog",
|
||
value: "返回充值页弹窗",
|
||
extra: {
|
||
uni_version: proxy.$version
|
||
|
||
}
|
||
}, {
|
||
type: 'recharge_dialog',
|
||
data: {
|
||
uni_version: proxy.$version
|
||
}
|
||
})
|
||
data.activeCoupon2 = calculateTimeRemaining(data.activeCoupon.expire_times)
|
||
console.log("data.activeCoupon2: " + JSON.stringify(data.activeCoupon2));
|
||
popup.value.open('center')
|
||
} else {
|
||
|
||
data.isBack = false
|
||
data.activity = data.uni_recharge_back
|
||
data.coupon = false
|
||
coupon.value.open()
|
||
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 随机生成通知列表
|
||
*/
|
||
function generateNoticeList() {
|
||
noticeList.value = []
|
||
for (let i = 0; i <= 10; i++) {
|
||
noticeList.value.push({
|
||
user: `用户${generateMaskedPhoneNumber()}`,
|
||
time: generateNaturalTimeAgo(),
|
||
package: getRandomItem()
|
||
})
|
||
}
|
||
}
|
||
/**
|
||
* 下单拉取支付
|
||
*/
|
||
async function activateVip(type = '') {
|
||
if (type == 'back') {
|
||
proxy.$apiUserEvent('all', {
|
||
type: "click",
|
||
key: "recharge_dialog_pay",
|
||
value: "返回弹窗页开通会员按钮",
|
||
extra: {
|
||
uni_version: proxy.$version
|
||
}
|
||
}, {
|
||
type: 'recharge_dialog_pay',
|
||
data: {
|
||
uni_version: proxy.$version
|
||
}
|
||
})
|
||
}
|
||
uni.showLoading({
|
||
title: '支付中',
|
||
mask: true // 添加遮罩防止用户操作
|
||
});
|
||
|
||
uni.setStorageSync("UserEventOrder", {
|
||
"订单金额": data.goods.price + '元',
|
||
"订单名称": data.goods.goods_name,
|
||
"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
|
||
})
|
||
|
||
|
||
let paymentRes = await postJson('a', 'api/order', {
|
||
goods_id: data.goods.goods_id,
|
||
coupon: data.active_id ? data.active_id : '',
|
||
pay_type: paymentMethod.value == "wxpay" ? 'weixin' : "alipay",
|
||
"pay_source": paymentMethod.value == "alipay" && proxy.$system == 'iOS' ? "h5" : "app",
|
||
source: "uni_alipay",
|
||
})
|
||
|
||
|
||
|
||
if (paymentRes.code == 0) {
|
||
let payData = {}
|
||
if (paymentMethod.value == "wxpay") {
|
||
payData = {
|
||
"appid": paymentRes.data.appId, // 应用ID
|
||
"noncestr": paymentRes.data.nonceStr, // 随机字符串
|
||
"package": "Sign=WXPay", // 固定值
|
||
"partnerid": paymentRes.data.partnerId, // 商户号
|
||
"prepayid": paymentRes.data.prepayId, // 预支付交易会话ID
|
||
"timestamp": Number(paymentRes.data.timeStamp), // 时间戳（秒！）
|
||
"sign": paymentRes.data.sign // 签名
|
||
}
|
||
uni.setStorageSync('orderId', paymentRes.data.orderId)
|
||
//安卓wx支付开始传递开始
|
||
if (proxy.$system != 'iOS') {
|
||
uni.sendNativeEvent('wx_pay_start_alipay', paymentRes.data.orderId, ret => {
|
||
console.log('宿主App回传的数据：' + ret);
|
||
});
|
||
}
|
||
|
||
} else {
|
||
payData = paymentRes.data.payParam
|
||
uni.setStorageSync('orderId', paymentRes.data.orderId)
|
||
}
|
||
// ios 支付由宿主处理
|
||
if (proxy.$system == 'iOS') {
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
}, 30000);
|
||
uni.sendNativeEvent('paymentResData', JSON.stringify(paymentRes.data), ret => {
|
||
console.log('宿主App回传的数据：' + ret);
|
||
});
|
||
return
|
||
}
|
||
uni.requestPayment({
|
||
provider: paymentMethod.value,
|
||
orderInfo: payData, //支付宝订单数据
|
||
success: function (resss) {
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
}, 30000);
|
||
paymentResult(paymentRes.data.orderId, paymentMethod.value)
|
||
},
|
||
fail: function (err) {
|
||
proxy.$apiUserEvent('all', {
|
||
type: "event",
|
||
key: "pay_fail",
|
||
value: "支付失败",
|
||
extra: {
|
||
from: data.currentUrl,
|
||
"订单号": paymentRes.data.orderId,
|
||
"订单金额": data.goods.price + '元',
|
||
"订单名称": data.goods.goods_name,
|
||
"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
|
||
"原因": JSON.stringify(err),
|
||
}
|
||
}, {
|
||
type: 'pay_fail',
|
||
data: {
|
||
from: data.currentUrl,
|
||
"订单号": paymentRes.data.orderId,
|
||
"订单金额": data.goods.price + '元',
|
||
"订单名称": data.goods.goods_name,
|
||
"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
|
||
"原因": JSON.stringify(err),
|
||
}
|
||
})
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败'
|
||
})
|
||
}
|
||
});
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败'
|
||
})
|
||
}
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
}, 10000);
|
||
}
|
||
|
||
|
||
// 支付状态轮询函数
|
||
async function paymentResult(orderId, paytype) {
|
||
uni.hideLoading();
|
||
uni.showLoading({
|
||
title: '会员发放排队中，正在实时向服务器索要，请耐心等待。',
|
||
mask: true
|
||
});
|
||
|
||
let attempts = 0;
|
||
const maxAttempts = 10;
|
||
const pollInterval = 1000;
|
||
|
||
const poll = async () => {
|
||
try {
|
||
let orderInfo = await proxy.$requestPromise({
|
||
url: 'api/order',
|
||
method: "GET",
|
||
data: {
|
||
order_id: orderId
|
||
}
|
||
});
|
||
|
||
console.log("订单状态：", orderInfo);
|
||
|
||
if (orderInfo.code == 0 && orderInfo.data.status == 2) {
|
||
// 支付成功
|
||
uni.sendNativeEvent('pay_success', paymentMethod.value, ret => {
|
||
console.log('宿主App回传的数据：' + ret);
|
||
});
|
||
|
||
proxy.$apiUserEvent('all', {
|
||
type: "event",
|
||
key: "pay_success",
|
||
value: "支付成功",
|
||
extra: {
|
||
from: data.currentUrl,
|
||
"订单号": orderId,
|
||
"订单金额": data.goods.price + '元',
|
||
"订单名称": data.goods.goods_name,
|
||
"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
|
||
}
|
||
}, {
|
||
type: 'pay_success',
|
||
data: {
|
||
from: data.currentUrl,
|
||
"订单号": orderId,
|
||
"订单金额": data.goods.price + '元',
|
||
"订单名称": data.goods.goods_name,
|
||
"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
|
||
}
|
||
});
|
||
|
||
// 修复：这里应该用赋值操作，原代码缺少等号
|
||
data.appUser.vip = 2;
|
||
|
||
// 刷新用户数据
|
||
await proxy.$getUserInfo();
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
|
||
return; // 成功时停止轮询
|
||
}
|
||
|
||
// 检查是否达到最大尝试次数
|
||
if (attempts >= maxAttempts) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '查询超时，请稍后查看',
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 继续轮询
|
||
attempts++;
|
||
setTimeout(poll, pollInterval);
|
||
|
||
} catch (error) {
|
||
console.error("轮询请求出错:", error);
|
||
|
||
// 错误时也检查尝试次数
|
||
if (attempts >= maxAttempts) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '网络错误，请稍后查看订单状态',
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
return;
|
||
}
|
||
|
||
attempts++;
|
||
setTimeout(poll, pollInterval);
|
||
}
|
||
};
|
||
|
||
// 开始轮询
|
||
poll();
|
||
}
|
||
|
||
// 随机抽取一个元素
|
||
function getRandomItem() {
|
||
const list = ['月度会员', '季度会员', '年度会员'];
|
||
const randomIndex = Math.floor(Math.random() * list.length);
|
||
return list[randomIndex];
|
||
}
|
||
|
||
/**
|
||
* 随机生成时间提示语
|
||
*/
|
||
function generateNaturalTimeAgo() {
|
||
const weights = [{
|
||
range: [1, 30],
|
||
weight: 30,
|
||
unit: '分钟'
|
||
}, // 1-30分钟，权重30%
|
||
{
|
||
range: [31, 60],
|
||
weight: 15,
|
||
unit: '分钟'
|
||
}, // 31-60分钟，权重15%
|
||
{
|
||
range: [1, 3],
|
||
weight: 10,
|
||
unit: '小时'
|
||
}, // 1-3小时，权重10%
|
||
{
|
||
range: [4, 12],
|
||
weight: 10,
|
||
unit: '小时'
|
||
}, // 4-12小时，权重10%
|
||
{
|
||
range: [1, 2],
|
||
weight: 10,
|
||
unit: '天'
|
||
}, // 1-2天，权重10%
|
||
{
|
||
range: [3, 7],
|
||
weight: 10,
|
||
unit: '天'
|
||
}, // 3-7天，权重10%
|
||
{
|
||
range: [1, 4],
|
||
weight: 10,
|
||
unit: '周'
|
||
}, // 1-4周，权重10%
|
||
{
|
||
range: [1, 3],
|
||
weight: 3,
|
||
unit: '个月'
|
||
}, // 1-12个月，权重3%
|
||
{
|
||
range: [4, 12],
|
||
weight: 2,
|
||
unit: '个月'
|
||
} // 1-12个月，权重2%
|
||
];
|
||
|
||
// 计算总权重
|
||
const totalWeight = weights.reduce((sum, item) => sum + item.weight, 0);
|
||
let random = Math.random() * totalWeight;
|
||
let selected;
|
||
|
||
// 根据权重选择时间范围
|
||
for (const item of weights) {
|
||
random -= item.weight;
|
||
if (random <= 0) {
|
||
selected = item;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 在选中的范围内生成随机值
|
||
const [min, max] = selected.range;
|
||
const amount = Math.floor(Math.random() * (max - min + 1)) + min;
|
||
|
||
return `${amount}${selected.unit}前`;
|
||
}
|
||
|
||
/**
|
||
* 随机生成电话号码
|
||
*/
|
||
function generateMaskedPhoneNumber() {
|
||
// 常见手机号段
|
||
const prefixes = [
|
||
'130', '131', '132', '133', '134', '135', '136', '137', '138', '139',
|
||
'145', '146', '147', '148', '149',
|
||
'150', '151', '152', '153', '155', '156', '157', '158', '159',
|
||
'165', '166', '167', '168',
|
||
'170', '171', '172', '173', '174', '175', '176', '177', '178',
|
||
'180', '181', '182', '183', '184', '185', '186', '187', '188', '189',
|
||
'191', '198', '199'
|
||
];
|
||
|
||
// 随机选择号段
|
||
const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
|
||
|
||
// 生成完整的11位号码
|
||
let fullNumber = prefix;
|
||
for (let i = 0; i < 11 - prefix.length; i++) {
|
||
fullNumber += Math.floor(Math.random() * 10);
|
||
}
|
||
|
||
// 对中间4位进行掩码处理：前3位 + **** + 后4位
|
||
return fullNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
|
||
}
|
||
|
||
|
||
/**
|
||
* 返回
|
||
*/
|
||
function back() {
|
||
proxy.$apiUserEvent('all', {
|
||
type: "click",
|
||
key: "recharge_dialog_cancel",
|
||
value: "去意已决",
|
||
extra: {
|
||
uni_version: proxy.$version
|
||
|
||
}
|
||
}, {
|
||
type: 'recharge_dialog_cancel',
|
||
data: {
|
||
uni_version: proxy.$version
|
||
}
|
||
})
|
||
uni.navigateBack();
|
||
}
|
||
|
||
function Complete() {
|
||
data.coupon = false
|
||
console.log("播放完成");
|
||
}
|
||
function shouldBeTrue(obj) {
|
||
// 情况1: 没有 features 字段 → 返回 true
|
||
if (!('features' in obj)) {
|
||
return false;
|
||
}
|
||
|
||
// 情况2: features 字段存在但为空或 undefined → 返回 true
|
||
if (!obj.features) {
|
||
return false;
|
||
}
|
||
|
||
// 情况3: features 字段包含 alipay → 返回 true
|
||
if (obj.features.includes('alipay')) {
|
||
return false;
|
||
}
|
||
|
||
// 情况4: 有 features 字段且不包含 alipay → 返回 false
|
||
return true;
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
* {
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.couponBox {
|
||
width: 375px;
|
||
height: 450px;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
.shadowBg {
|
||
position: absolute;
|
||
width: 750px;
|
||
height: 750px;
|
||
left: -187.5px;
|
||
top: -240px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.listCoupon {
|
||
position: absolute;
|
||
width: 244px;
|
||
height: 276px;
|
||
left: 65.5px;
|
||
top: 157px;
|
||
overflow: hidden;
|
||
overflow-y: scroll;
|
||
|
||
.item {
|
||
position: relative;
|
||
width: 244px;
|
||
height: 74px;
|
||
background-image: url('/static/image/recharge/couponItemBg.png');
|
||
box-shadow: 0px 0px 14px 0px rgba(255, 255, 255, 0.5);
|
||
background-repeat: no-repeat;
|
||
background-size: 244px 74px;
|
||
margin-top: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
|
||
.left {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
|
||
.AlibabaPuHuiTiBold {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.danwei {
|
||
margin-left: 11px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
text-align: center;
|
||
width: 144px;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tips {
|
||
text-align: center;
|
||
line-height: 30px;
|
||
position: absolute;
|
||
width: 70px;
|
||
height: 30px;
|
||
background-image: url('/static/image/recharge/couponItemTips.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 70px 30px;
|
||
right: 7px;
|
||
top: -14px;
|
||
color: #F97902;
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header {
|
||
height: 198px;
|
||
background-image: url('/static/image/recharge/couponHeaderBg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 375px 198px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.couponConten {
|
||
width: 300px;
|
||
height: 252px;
|
||
background-color: #FEF5D8;
|
||
border-radius: 0 0 42px 42px;
|
||
margin-left: calc(74px / 2);
|
||
z-index: 2;
|
||
}
|
||
|
||
.colse {
|
||
position: absolute;
|
||
right: 36px;
|
||
top: 36px;
|
||
width: 18px;
|
||
height: 20px;
|
||
z-index: 4;
|
||
}
|
||
|
||
.couponTop {
|
||
position: absolute;
|
||
width: 375px;
|
||
height: 390px;
|
||
left: 0;
|
||
top: -145px;
|
||
z-index: 3;
|
||
}
|
||
}
|
||
|
||
.couponButton {
|
||
position: relative;
|
||
margin-top: 37px;
|
||
width: 305px;
|
||
height: 86px;
|
||
margin-left: calc(50% - 152.5px);
|
||
z-index: 4 !important;
|
||
}
|
||
|
||
.page-container {
|
||
background-color: #F7F7F7;
|
||
padding-bottom: 240rpx;
|
||
padding-bottom: calc(240rpx + constant(safe-area-inset-bottom)) !important;
|
||
padding-bottom: calc(240rpx + env(safe-area-inset-bottom)) !important;
|
||
|
||
.package-items-box {
|
||
width: 100vw;
|
||
// background: linear-gradient(to bottom, #FFFFFF, #F7F7F7);
|
||
}
|
||
|
||
.package-items-container {
|
||
display: flex;
|
||
padding: 20rpx 32rpx;
|
||
|
||
.active-package-item-tips {
|
||
position: absolute;
|
||
content: '限时优惠';
|
||
top: -8px;
|
||
left: 14px;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
height: 44rpx;
|
||
width: 112rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 12px 12px 12px 0;
|
||
background: linear-gradient(200deg, #FFCCA8 0%, #ff0000 100%);
|
||
|
||
}
|
||
|
||
.active-package-item::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 88%;
|
||
background-color: initial;
|
||
border-radius: 25%;
|
||
z-index: 0;
|
||
height: 1px;
|
||
margin: auto;
|
||
border-radius: 10%;
|
||
// box-shadow: 0px 2px 10px 1px #b1b1b1;
|
||
}
|
||
|
||
.package-item {
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 184rpx;
|
||
height: 280rpx;
|
||
background-image: url("/static/image/recharge/packagItemBg.png");
|
||
background-size: cover;
|
||
margin-right: 40rpx;
|
||
padding: 54rpx 0 0 0;
|
||
transition: width 0.2s, background-image 0.2s;
|
||
|
||
// overflow: hidden;
|
||
.top {
|
||
|
||
padding-left: 26rpx;
|
||
font-size: 24rpx;
|
||
|
||
.title {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.del-text {
|
||
color: #767676;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
|
||
.price-box {
|
||
padding-left: 26rpx;
|
||
font-family: 'WeChatSansStd';
|
||
font-size: 30rpx;
|
||
|
||
.price {
|
||
font-size: 64rpx;
|
||
}
|
||
}
|
||
|
||
.shen {
|
||
text-align: center;
|
||
width: 184rpx;
|
||
height: 24px;
|
||
color: #AAAAAA;
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.active-package-item {
|
||
position: relative;
|
||
width: 240rpx !important;
|
||
height: 280rpx !important;
|
||
background-image: url("/static/image/recharge/activePackagItemBg.png") !important;
|
||
background-position: center;
|
||
/* 居中显示图片 */
|
||
background-repeat: no-repeat;
|
||
|
||
/* 防止图片重复 */
|
||
.shen {
|
||
width: 240rpx !important;
|
||
color: #D86C24;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.vip-benefits-container {
|
||
position: relative;
|
||
background-color: #FFFFFF;
|
||
border-radius: 12px 12px 12px 12px;
|
||
overflow: hidden;
|
||
margin: -73px 32rpx 24rpx 32rpx;
|
||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #fff);
|
||
|
||
.content {
|
||
margin-top: -4px;
|
||
padding: 16px 0px 0 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
|
||
.benefit-item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
.img {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 10px;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
@keyframes vertical-scroll {
|
||
from {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(-100%);
|
||
}
|
||
}
|
||
|
||
.footer-container {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
|
||
padding: 16rpx 32rpx;
|
||
padding-top: 40rpx;
|
||
padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
|
||
padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
|
||
|
||
.payment-method-box {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding-bottom: 32rpx;
|
||
|
||
.payment-method {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.img-select {
|
||
flex-shrink: 0 !important;
|
||
height: 16px;
|
||
width: 16px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.logo {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.name {
|
||
color: #767676;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footerBottom {
|
||
width: 100%;
|
||
height: 20px;
|
||
}
|
||
|
||
.buttonBoxs {
|
||
width: 100%;
|
||
height: 104rpx;
|
||
background-image: url('/static/image/recharge/bottom-button.png');
|
||
background-position: center;
|
||
/* 居中显示图片 */
|
||
background-repeat: no-repeat;
|
||
/* 防止图片重复 */
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.hongbao {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -52rpx;
|
||
}
|
||
}
|
||
|
||
.christmas {
|
||
// background-image: url('/static/image/recharge/christmas/bottom-button.png');
|
||
}
|
||
|
||
.button-box {
|
||
display: flex;
|
||
|
||
.text {
|
||
flex: 1;
|
||
// color: text;
|
||
// text-align: center;
|
||
color: #ffffff;
|
||
// line-height: 104rpx;
|
||
font-size: 12px;
|
||
height: 104rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
color: red;
|
||
}
|
||
|
||
.price {
|
||
font-size: 24px;
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
.button {
|
||
flex-shrink: 0;
|
||
opacity: 0;
|
||
text-align: center;
|
||
height: 100%;
|
||
width: 32%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialog-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 80vw;
|
||
|
||
.top {
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
top: 1px;
|
||
box-sizing: border-box;
|
||
background-image: url('/static/image/recharge/dialogImg.png');
|
||
background-size: cover;
|
||
width: 80vw;
|
||
height: 260rpx;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
line-height: 60rpx;
|
||
padding-left: 80rpx;
|
||
padding-top: 96rpx;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
flex-shrink: 0;
|
||
padding-bottom: 24rpx;
|
||
border-radius: 0 0 25px 25px;
|
||
background: linear-gradient(150deg, #fef9f0 0%, #FEF3E1 21%, #FFDDAF 100%);
|
||
// box-shadow: 10px 10px 15px #ffffff78;
|
||
box-shadow: 2px 5px 30px 5px #9f9f9f9e;
|
||
|
||
.title-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 2px;
|
||
|
||
.title {
|
||
margin: 0 32rpx;
|
||
}
|
||
|
||
.decorative-line {
|
||
width: 68rpx;
|
||
height: 6rpx;
|
||
}
|
||
}
|
||
|
||
.timeDJS {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
|
||
.titles {
|
||
color: #FC3939;
|
||
font-size: 14px;
|
||
margin-right: 11px;
|
||
}
|
||
}
|
||
|
||
.vip-benefits {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 24px 0;
|
||
padding: 0 32rpx;
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 26rpx;
|
||
margin-top: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.button-box {
|
||
margin: 0 44rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.button {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
border-radius: 50px;
|
||
height: 52px;
|
||
line-height: 52px;
|
||
color: #FFFFFF;
|
||
width: 100%;
|
||
background: linear-gradient(360deg, #4B3F30 0%, #181713 56%, #504834 100%);
|
||
}
|
||
|
||
/* .button::before {
|
||
position: absolute;
|
||
content: "限时优惠";
|
||
top: -10px;
|
||
right: -15px;
|
||
font-size: 0.625rem;
|
||
color: #FFFFFF;
|
||
height: 1.375rem;
|
||
width: 3.5rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 12px 12px 12px 0;
|
||
background: linear-gradient(200deg, #FFCCA8 0%, #ff0000 100%);
|
||
}
|
||
*/
|
||
.leave {
|
||
color: #767676;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.back {
|
||
position: fixed;
|
||
top: 100rpx;
|
||
left: 36rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.uni-margin-wrap::after {
|
||
// position: absolute;
|
||
// content: '';
|
||
// left: 0;
|
||
// bottom: -1px;
|
||
// width: 100%;
|
||
// height: 18px;
|
||
// background-color: #f7f7f7;
|
||
// border-radius: 16px 16px 0px 0px;
|
||
}
|
||
|
||
.uni-margin-wrap {
|
||
// position: relative;
|
||
height: auto;
|
||
width: 100%;
|
||
z-index: 0;
|
||
|
||
::v-deep .uni-swiper-dots-horizontal {
|
||
bottom: 60rpx;
|
||
|
||
.uni-swiper-dot {
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
background-color: #FFFFFF;
|
||
opacity: 0.5;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.uni-swiper-dot-active {
|
||
opacity: 1;
|
||
width: 24rpx;
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
height: 244px;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 244px;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-list {
|
||
margin-top: 40rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.uni-common-mt {
|
||
margin-top: 60rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.info {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
}
|
||
|
||
.uni-padding-wrap {
|
||
width: 550rpx;
|
||
padding: 0 100rpx;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
.placeholder {
|
||
// display: none;
|
||
// position: relative;
|
||
// background-color: #f7f7f7;
|
||
// width: 100%;
|
||
// border-radius: 1rem 1rem 0 0;
|
||
// left: 0;
|
||
// bottom: 30rpx;
|
||
}
|
||
|
||
/* 由小到大缩放动画 */
|
||
.animated-box {
|
||
animation: scaleIn 1s ease-out forwards;
|
||
}
|
||
|
||
/* 延迟动画 */
|
||
.scale-in-delay {
|
||
animation: scaleIn 0.5s ease-out 0.2s forwards;
|
||
}
|
||
|
||
/* 动画关键帧定义 */
|
||
@keyframes scaleIn {
|
||
0% {
|
||
transform: scale(0);
|
||
opacity: 0;
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.iosQuestion {
|
||
.titleBox {
|
||
.image {
|
||
margin-top: 3px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.question {
|
||
margin: 24rpx 32rpx;
|
||
padding: 17px 13px;
|
||
background-color: #FFFFFF;
|
||
border-radius: 10px 10px 10px 10px;
|
||
|
||
.titles {
|
||
text-align: center;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 12px;
|
||
background-image: -webkit-linear-gradient(bottom, #6E430F, #1A1A1A);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.titleBox {
|
||
display: flex;
|
||
margin-top: 10px;
|
||
|
||
image {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.text {
|
||
margin-left: 5px;
|
||
width: calc(100% - 15px);
|
||
font-size: 11px;
|
||
color: #767676;
|
||
}
|
||
|
||
.text1 {
|
||
color: #AAAAAA;
|
||
}
|
||
}
|
||
}
|
||
|
||
.myCouponList {
|
||
|
||
margin: 24rpx 32rpx;
|
||
padding: 17px 13px;
|
||
height: 18px;
|
||
background-color: #FFFFFF;
|
||
border-radius: 10px 10px 10px 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
|
||
image {
|
||
width: 23px;
|
||
height: 17px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 3px;
|
||
display: inline-block;
|
||
/* 确保文字可以应用背景 */
|
||
background: linear-gradient(to right, #6E430F, #1A1A1A);
|
||
/* 从左到右的渐变 */
|
||
-webkit-background-clip: text;
|
||
/* 仅裁剪文本部分 */
|
||
color: transparent;
|
||
/* 文本颜色设置为透明，以显示背景渐变 */
|
||
font-size: 14px;
|
||
/* 根据需要调整字体大小 */
|
||
}
|
||
|
||
.money {
|
||
margin-top: 1px;
|
||
font-family: 'PingFangSC-Semibold';
|
||
font-weight: bold;
|
||
color: #FC3939;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
color: #767676;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.forward {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.forward2 {
|
||
margin: 0;
|
||
}
|
||
|
||
.timeBox {
|
||
.titles {
|
||
text-align: right;
|
||
color: #FC3939;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.myCouponContainer {
|
||
width: calc(100% - 52px);
|
||
height: 400px;
|
||
background-image: url('/static/image/recharge/myCouponContainerBg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 0 26px;
|
||
padding-top: 150px;
|
||
position: relative;
|
||
|
||
.myCouponContainerClose {
|
||
position: absolute;
|
||
width: 34px;
|
||
height: 34px;
|
||
top: -27px;
|
||
right: 16px;
|
||
}
|
||
|
||
.myCouponBox {
|
||
height: 282px;
|
||
overflow-y: scroll;
|
||
|
||
.item {
|
||
width: calc(100% - 12px);
|
||
height: 62px;
|
||
background-color: #fff;
|
||
border-radius: 8px 8px 8px 8px;
|
||
padding: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
position: relative;
|
||
|
||
.jjdq {
|
||
width: 52px;
|
||
height: 18px;
|
||
background: linear-gradient(194deg, #FFCCA8 0%, #FE3D32 100%);
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
border-radius: 0 8px 0 8px;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.ygq {
|
||
width: 52px;
|
||
height: 18px;
|
||
background: #AAAAAA;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
border-radius: 0 8px 0 8px;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.left {
|
||
width: 110px;
|
||
height: 62px;
|
||
background: #FFEDED;
|
||
border-radius: 6px 6px 6px 6px;
|
||
text-align: center;
|
||
|
||
.money {
|
||
margin-top: 4px;
|
||
color: #FF3838;
|
||
font-size: 16px;
|
||
|
||
.moneys {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.dec {
|
||
margin-top: 1px;
|
||
color: #FF3838;
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
.left2 {
|
||
background-color: #EDEDED;
|
||
|
||
.money {
|
||
color: #8A8A8A;
|
||
}
|
||
|
||
.dec {
|
||
color: #8A8A8A;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: calc(100% - 126px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-right: 7px;
|
||
|
||
.titlebox {
|
||
.titlle {
|
||
margin-top: 13px;
|
||
color: #3D3D3D;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.dec {
|
||
margin-top: 8px;
|
||
color: #AAAAAA;
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
.checkedImg {
|
||
width: 26px;
|
||
height: 26px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 18px;
|
||
height: 52px;
|
||
background: linear-gradient(360deg, #4B3F30 0%, #181713 56%, #504834 100%);
|
||
border-radius: 508px 508px 508px 508px;
|
||
text-align: center;
|
||
line-height: 52px;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.white-flow {
|
||
background: linear-gradient(-45deg, transparent, transparent, transparent, transparent, transparent, transparent, transparent, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), transparent, transparent, transparent, transparent, transparent, transparent, transparent);
|
||
background-repeat: no-repeat;
|
||
background-size: 60% 100%;
|
||
animation: flow 2s infinite linear;
|
||
}
|
||
|
||
@keyframes flow {
|
||
0% {
|
||
background-position: -100% 0;
|
||
}
|
||
|
||
100% {
|
||
background-position: 200% 0;
|
||
}
|
||
}
|
||
|
||
::v-deep .uni-countdown-day {
|
||
width: auto !important;
|
||
color: #2A2617 !important;
|
||
/* 例如，将文字颜色改为红色 */
|
||
background-color: transparent !important;
|
||
margin-right: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
::v-deep .uni-countdown-splitor-day {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
.yanhua {
|
||
position: fixed;
|
||
top: 170px;
|
||
left: 15px;
|
||
z-index: 999999;
|
||
}
|
||
</style> |