支付宝理财页面40%
This commit is contained in:
tangxinyue
parent
19ddea7165
commit
2147da46ac
1
App.vue
1
App.vue
|
|
@ -6,6 +6,7 @@ export default {
|
|||
recentNativeData: 0 // 初始化一个全局变量
|
||||
},
|
||||
onLaunch: function (options) {
|
||||
uni.setStorageSync('onNativeEventReceive', "no")
|
||||
const startTime = Date.now()
|
||||
console.log('App Launch', options)
|
||||
|
||||
|
|
|
|||
|
|
@ -272,6 +272,11 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-justify-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
<view class="item" v-for="(item, index) in tabList" :key="item.id"
|
||||
:class="{ 'active': index === activeIndex }" @click="onTabChange(index)">
|
||||
<view class="left">
|
||||
<view class="triangle-concave-transparent ">
|
||||
</view>
|
||||
<!-- <view class="triangle-concave-transparent ">
|
||||
</view> -->
|
||||
<image src="/static/image/recharge/tabLine.png" mode=""></image>
|
||||
</view>
|
||||
<view class="box" v-show="index != activeIndex">
|
||||
{{ item.label }}
|
||||
|
|
@ -17,8 +18,9 @@
|
|||
<image class="vipImage" v-else src="/static/image/template/close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="triangle-concave-transparent leftBox">
|
||||
</view>
|
||||
<image src="/static/image/recharge/tabLine.png" mode=""></image>
|
||||
<!-- <view class="triangle-concave-transparent leftBox">
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -492,7 +494,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
margin:0 20px 20px 20px;
|
||||
margin:0 32rpx 32rpx 32rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -508,7 +510,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 42px;
|
||||
// background-color: #;
|
||||
border-radius: 14px 14px 0 0;
|
||||
border-radius: 12px 12px 0 0;
|
||||
position: relative;
|
||||
line-height: 47px;
|
||||
text-align: center;
|
||||
|
|
@ -538,22 +540,27 @@ export default {
|
|||
}
|
||||
|
||||
|
||||
|
||||
.left,.right{
|
||||
image{
|
||||
width: 19px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -25px;
|
||||
top: 12px;
|
||||
left: -19px;
|
||||
// transition: all 0.3s ease-in-out;
|
||||
transform-origin: right center;
|
||||
// transform: scaleX(0);
|
||||
// transform-origin: right center;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.right {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -25px;
|
||||
top: 12px;
|
||||
right: -19px;
|
||||
// transition: all 0.3s ease-in-out;
|
||||
transform-origin: left center;
|
||||
// transform: scaleX(0);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<view style="width: 100%;" :style="{ height: `${data.statusBarHeight + 44}px` }"></view>
|
||||
<view class="nav-bar-container" :style="{ backgroundColor: bgColor, zIndex: zIndex }">
|
||||
<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }"></view>
|
||||
<view style="width: 100%;height: 44px;" @click="openPopup">
|
||||
<view style="width: 100%;height: 88rpx;" @click="openPopup">
|
||||
<slot>
|
||||
<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
|
||||
v-on="$attrs">
|
||||
|
|
|
|||
2
main.js
2
main.js
|
|
@ -27,7 +27,7 @@ export function createApp() {
|
|||
const systemInfo = uni.getStorageSync('systemInfo') || {}
|
||||
app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
|
||||
app.config.globalProperties.$systemInfo = systemInfo
|
||||
uni.setStorageSync('version', '1.0.0.sp2')
|
||||
uni.setStorageSync('version', '1.0.0.sp3')
|
||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||
|
||||
app.use(globalMethods);
|
||||
|
|
|
|||
|
|
@ -262,11 +262,11 @@ const onConsumptionDateChange = (e) => {
|
|||
}
|
||||
|
||||
onLoad((option) => {
|
||||
// 进入花呗页面埋点
|
||||
// 进入花呗逾期页面埋点
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: 'click',
|
||||
key: 'huabei',
|
||||
value: "花呗"
|
||||
key: 'huabei_overdue',
|
||||
value: "花呗逾期"
|
||||
})
|
||||
console.log(option)
|
||||
// 读取缓存
|
||||
|
|
|
|||
|
|
@ -241,7 +241,8 @@ import {
|
|||
reactive,
|
||||
toRefs,
|
||||
ref,
|
||||
nextTick
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad,
|
||||
|
|
@ -257,6 +258,9 @@ const {
|
|||
updateBill
|
||||
} = useStore()
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const { proxy } = instance;
|
||||
|
||||
const billManagementPopupRef = ref(null)
|
||||
|
||||
const buttonGroup = [{
|
||||
|
|
@ -326,6 +330,12 @@ onShow(() => {
|
|||
})
|
||||
|
||||
onLoad((option) => {
|
||||
// 进入账单详情页面埋点
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: 'click',
|
||||
key: 'bill_details',
|
||||
value: "账单详情"
|
||||
})
|
||||
console.log(option)
|
||||
if (option.id) {
|
||||
data.billId = option.id
|
||||
|
|
|
|||
|
|
@ -260,57 +260,76 @@
|
|||
|
||||
|
||||
<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 = [{
|
||||
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 = [{
|
||||
// 套餐列表
|
||||
const packageList = [{
|
||||
name: "连续包月",
|
||||
delPrice: "89",
|
||||
price: "29",
|
||||
lifespan: "一月"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
name: "连续包季",
|
||||
delPrice: "189",
|
||||
price: "98",
|
||||
lifespan: "一季"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
name: "连续包年",
|
||||
delPrice: "365",
|
||||
price: "198",
|
||||
lifespan: "一年"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const data = reactive({
|
||||
const data = reactive({
|
||||
scrollLeft: 0,
|
||||
active_id: 0,
|
||||
active_ids: 0,
|
||||
|
|
@ -414,22 +433,29 @@ const data = reactive({
|
|||
// 添加一个标志位来防止快速连续点击导致的价格显示错误
|
||||
isProcessingClick: false,
|
||||
banner: '/static/image/recharge/banner1.png',
|
||||
})
|
||||
})
|
||||
|
||||
let { buttonText, selected, benefitList, noticeList, commentList, paymentMethod } = toRefs(data)
|
||||
let {
|
||||
buttonText,
|
||||
selected,
|
||||
benefitList,
|
||||
noticeList,
|
||||
commentList,
|
||||
paymentMethod
|
||||
} = toRefs(data)
|
||||
|
||||
/**
|
||||
/**
|
||||
* 返回监听
|
||||
*/
|
||||
onBackPress((e) => {
|
||||
onBackPress((e) => {
|
||||
if (e.from == 'backbutton' && data.appUser.vip == 1) {
|
||||
open()
|
||||
return true; //阻止返回
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
onLoad(async () => {
|
||||
onLoad(async () => {
|
||||
const config = uni.getStorageSync('config').config
|
||||
const themeConfig = config?.['client.uniapp.theme']
|
||||
if (themeConfig?.enable) {
|
||||
|
|
@ -498,12 +524,15 @@ onLoad(async () => {
|
|||
item['isStatus'] = true
|
||||
}
|
||||
item['expire_times'] = item.expire_time
|
||||
item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(0, 10)
|
||||
item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(
|
||||
0, 10)
|
||||
})
|
||||
data.myActivity = [
|
||||
...activity.data.items.filter(item => (item.threshold == '' || zsItem.price >= (Number(item
|
||||
...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
|
||||
...activity.data.items.filter(item => (zsItem.price < (Number(item.threshold) / 100) &&
|
||||
item
|
||||
.threshold != '') || !item.isStatus)
|
||||
]
|
||||
data.myActivity = deduplicateKeepLast(data.myActivity)
|
||||
|
|
@ -534,6 +563,8 @@ onLoad(async () => {
|
|||
data.isBack = false
|
||||
}
|
||||
uni.hideLoading();
|
||||
if (uni.getStorageSync('onNativeEventReceive') != 'ok') {
|
||||
uni.setStorageSync('onNativeEventReceive', 'ok')
|
||||
//监听宿主传递消息
|
||||
uni.onNativeEventReceive((event, data) => {
|
||||
if (event) {
|
||||
|
|
@ -562,15 +593,17 @@ onLoad(async () => {
|
|||
console.log('接收到宿主App消息-' + event + '：' + data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onShow(async () => {
|
||||
})
|
||||
|
||||
})
|
||||
onUnload(() => {
|
||||
uni.offNativeEventReceive()
|
||||
})
|
||||
onReady(() => {
|
||||
onShow(async () => {
|
||||
|
||||
})
|
||||
onUnload(() => {
|
||||
// uni.offNativeEventReceive()
|
||||
})
|
||||
onReady(() => {
|
||||
try {
|
||||
if (plus.os.name === 'Android') {
|
||||
let color = plus.android.newObject("android.graphics.Color");
|
||||
|
|
@ -585,7 +618,7 @@ onReady(() => {
|
|||
}
|
||||
})
|
||||
console.log("状态栏设置完毕！");
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
uni.setNavigationBarColor({
|
||||
backgroundColor: '#fff',
|
||||
animation: { // 动画效果
|
||||
|
|
@ -594,18 +627,18 @@ onReady(() => {
|
|||
}
|
||||
})
|
||||
}, 200);
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
plus.navigator.setStatusBarStyle("light");
|
||||
}, 200);
|
||||
}
|
||||
} catch (error) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
function isToday(inputTime) {
|
||||
function isToday(inputTime) {
|
||||
// 获取当前日期的时间戳（去掉时分秒）
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
|
@ -618,9 +651,9 @@ function isToday(inputTime) {
|
|||
|
||||
// 比较时间戳
|
||||
return inputTimestamp === todayTimestamp;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateTimeRemaining(targetTime) {
|
||||
function calculateTimeRemaining(targetTime) {
|
||||
// 获取目标时间和当前时间的时间戳
|
||||
const target = new Date(targetTime).getTime();
|
||||
const now = new Date().getTime();
|
||||
|
|
@ -655,9 +688,9 @@ function calculateTimeRemaining(targetTime) {
|
|||
minutes: minutes,
|
||||
seconds: seconds
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function activeClick(status) {
|
||||
function activeClick(status) {
|
||||
myCoupon.value.close()
|
||||
if (status && data.active_ids > 0) {
|
||||
let item = data.activeitems
|
||||
|
|
@ -674,14 +707,14 @@ function activeClick(status) {
|
|||
setPrice(true)
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveId(item) {
|
||||
function setActiveId(item) {
|
||||
data.active_ids = item.id
|
||||
data.activeitems = item
|
||||
}
|
||||
}
|
||||
|
||||
function setPrice(status) {
|
||||
function setPrice(status) {
|
||||
console.log("setPrice")
|
||||
if (data.incrementTimer) {
|
||||
clearInterval(data.incrementTimer);
|
||||
|
|
@ -702,10 +735,12 @@ function setPrice(status) {
|
|||
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) /
|
||||
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) : ((
|
||||
.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)
|
||||
|
|
@ -761,9 +796,9 @@ function setPrice(status) {
|
|||
console.log("最后", data.price)
|
||||
|
||||
|
||||
}
|
||||
/* 获取我的优惠券 */
|
||||
async function getActivity() {
|
||||
}
|
||||
/* 获取我的优惠券 */
|
||||
async function getActivity() {
|
||||
let activity = await proxy.$requestPromise({
|
||||
url: 'api/activity/coupon',
|
||||
method: "GET",
|
||||
|
|
@ -786,15 +821,18 @@ async function getActivity() {
|
|||
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) /
|
||||
...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 !=
|
||||
...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') {
|
||||
}
|
||||
|
||||
function deduplicateKeepLast(arr, idKey = 'id') {
|
||||
const map = new Map();
|
||||
|
||||
arr.forEach(item => {
|
||||
|
|
@ -803,10 +841,10 @@ function deduplicateKeepLast(arr, idKey = 'id') {
|
|||
});
|
||||
|
||||
return Array.from(map.values());
|
||||
}
|
||||
}
|
||||
|
||||
/* 领取优惠券 */
|
||||
async function submitActivity() {
|
||||
/* 领取优惠券 */
|
||||
async function submitActivity() {
|
||||
console.log("activity_id");
|
||||
let activity_id = ''
|
||||
data.activity.forEach(item => {
|
||||
|
|
@ -816,7 +854,7 @@ async function submitActivity() {
|
|||
if (activity_id != "") {
|
||||
console.log("activity_id", activity_id);
|
||||
let activityRes = await postJson('q', 'api/activity', {
|
||||
activity_id: activity_id//activity_id+"="
|
||||
activity_id: activity_id //activity_id+"="
|
||||
})
|
||||
console.log(activityRes)
|
||||
if (activityRes.code == 0) {
|
||||
|
|
@ -841,24 +879,24 @@ async function submitActivity() {
|
|||
})
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
}
|
||||
/**
|
||||
* @param {Object} item
|
||||
* @param {Object} index
|
||||
* 选择购买套餐
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
防抖
|
||||
*/
|
||||
const debouncedOnSelect = debounce((items, index) => {
|
||||
/*
|
||||
防抖
|
||||
*/
|
||||
const debouncedOnSelect = debounce((items, index) => {
|
||||
onSelect(items, index);
|
||||
}, 200, false);
|
||||
}, 200, false);
|
||||
|
||||
function debounce(func, wait, immediate = true) {
|
||||
function debounce(func, wait, immediate = true) {
|
||||
let timeout;
|
||||
return function (...args) {
|
||||
return function(...args) {
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
if (!immediate) func(...args);
|
||||
|
|
@ -870,8 +908,8 @@ function debounce(func, wait, immediate = true) {
|
|||
|
||||
if (callNow) func(...args);
|
||||
};
|
||||
}
|
||||
async function onSelect(items, index) {
|
||||
}
|
||||
async function onSelect(items, index) {
|
||||
data.active_id = 0
|
||||
data.activeCoupon = {}
|
||||
data.active_ids = 0
|
||||
|
|
@ -883,8 +921,10 @@ async function onSelect(items, index) {
|
|||
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) /
|
||||
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
|
||||
|
|
@ -906,8 +946,10 @@ async function onSelect(items, index) {
|
|||
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) /
|
||||
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
|
||||
|
|
@ -940,7 +982,8 @@ async function onSelect(items, index) {
|
|||
if (list.length != 0) {
|
||||
let listData = list.map(cell => {
|
||||
return {
|
||||
image: cell == 'weixin' ? '/static/image/recharge/wxpay.png' : '/static/image/recharge/alipay.png',
|
||||
image: cell == 'weixin' ? '/static/image/recharge/wxpay.png' :
|
||||
'/static/image/recharge/alipay.png',
|
||||
name: cell == 'weixin' ? '微信支付' : '支付宝支付',
|
||||
type: cell == 'weixin' ? 'wxpay' : 'alipay'
|
||||
}
|
||||
|
|
@ -973,22 +1016,22 @@ async function onSelect(items, index) {
|
|||
]
|
||||
}
|
||||
paymentMethod.value = data.payList[0].type
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
data.countdown = true
|
||||
}, 100);
|
||||
await setPrice(true)
|
||||
await getActivity()
|
||||
|
||||
}
|
||||
/**
|
||||
}
|
||||
/**
|
||||
* @param {Object} value
|
||||
* 选择支付方式
|
||||
*/
|
||||
function onSelectPayment(value) {
|
||||
function onSelectPayment(value) {
|
||||
paymentMethod.value = value
|
||||
}
|
||||
}
|
||||
|
||||
function open() {
|
||||
function open() {
|
||||
|
||||
uni.setStorageSync('back_number', data.back_number + 1);
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
|
|
@ -1018,12 +1061,12 @@ function open() {
|
|||
coupon.value.open()
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 随机生成通知列表
|
||||
*/
|
||||
function generateNoticeList() {
|
||||
function generateNoticeList() {
|
||||
noticeList.value = []
|
||||
for (let i = 0; i <= 10; i++) {
|
||||
noticeList.value.push({
|
||||
|
|
@ -1032,11 +1075,11 @@ function generateNoticeList() {
|
|||
package: getRandomItem()
|
||||
})
|
||||
}
|
||||
}
|
||||
/**
|
||||
}
|
||||
/**
|
||||
* 下单拉取支付
|
||||
*/
|
||||
async function activateVip(type = '') {
|
||||
async function activateVip(type = '') {
|
||||
if (type == 'back') {
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: "click",
|
||||
|
|
@ -1111,13 +1154,13 @@ async function activateVip(type = '') {
|
|||
uni.requestPayment({
|
||||
provider: paymentMethod.value,
|
||||
orderInfo: payData, //支付宝订单数据
|
||||
success: function (resss) {
|
||||
success: function(resss) {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 30000);
|
||||
paymentResult(paymentRes.data.orderId, paymentMethod.value)
|
||||
},
|
||||
fail: function (err) {
|
||||
fail: function(err) {
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: "event",
|
||||
key: "pay_fail",
|
||||
|
|
@ -1158,11 +1201,11 @@ async function activateVip(type = '') {
|
|||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 10000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 支付状态轮询函数
|
||||
async function paymentResult(orderId, paytype) {
|
||||
// 支付状态轮询函数
|
||||
async function paymentResult(orderId, paytype) {
|
||||
uni.hideLoading();
|
||||
uni.showLoading({
|
||||
title: '会员发放排队中，正在实时向服务器索要，请耐心等待。',
|
||||
|
|
@ -1268,19 +1311,19 @@ async function paymentResult(orderId, paytype) {
|
|||
|
||||
// 开始轮询
|
||||
poll();
|
||||
}
|
||||
}
|
||||
|
||||
// 随机抽取一个元素
|
||||
function getRandomItem() {
|
||||
// 随机抽取一个元素
|
||||
function getRandomItem() {
|
||||
const list = ['月度会员', '季度会员', '年度会员'];
|
||||
const randomIndex = Math.floor(Math.random() * list.length);
|
||||
return list[randomIndex];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 随机生成时间提示语
|
||||
*/
|
||||
function generateNaturalTimeAgo() {
|
||||
function generateNaturalTimeAgo() {
|
||||
const weights = [{
|
||||
range: [1, 30],
|
||||
weight: 30,
|
||||
|
|
@ -1347,12 +1390,12 @@ function generateNaturalTimeAgo() {
|
|||
const amount = Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
|
||||
return `${amount}${selected.unit}前`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 随机生成电话号码
|
||||
*/
|
||||
function generateMaskedPhoneNumber() {
|
||||
function generateMaskedPhoneNumber() {
|
||||
// 常见手机号段
|
||||
const prefixes = [
|
||||
'130', '131', '132', '133', '134', '135', '136', '137', '138', '139',
|
||||
|
|
@ -1375,13 +1418,13 @@ function generateMaskedPhoneNumber() {
|
|||
|
||||
// 对中间4位进行掩码处理：前3位 + **** + 后4位
|
||||
return fullNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
/**
|
||||
* 返回
|
||||
*/
|
||||
function back() {
|
||||
function back() {
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: "click",
|
||||
key: "recharge_dialog_cancel",
|
||||
|
|
@ -1397,13 +1440,14 @@ function back() {
|
|||
}
|
||||
})
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
|
||||
function Complete() {
|
||||
function Complete() {
|
||||
data.coupon = false
|
||||
console.log("播放完成");
|
||||
}
|
||||
function shouldBeTrue(obj) {
|
||||
}
|
||||
|
||||
function shouldBeTrue(obj) {
|
||||
// 情况1: 没有 features 字段 → 返回 true
|
||||
if (!('features' in obj)) {
|
||||
return false;
|
||||
|
|
@ -1421,15 +1465,15 @@ function shouldBeTrue(obj) {
|
|||
|
||||
// 情况4: 有 features 字段且不包含 alipay → 返回 false
|
||||
return true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.couponBox {
|
||||
.couponBox {
|
||||
width: 375px;
|
||||
height: 450px;
|
||||
position: relative;
|
||||
|
|
@ -1540,18 +1584,18 @@ function shouldBeTrue(obj) {
|
|||
top: -145px;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.couponButton {
|
||||
.couponButton {
|
||||
position: relative;
|
||||
margin-top: 37px;
|
||||
width: 305px;
|
||||
height: 86px;
|
||||
margin-left: calc(50% - 152.5px);
|
||||
z-index: 4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
.page-container {
|
||||
background-color: #F7F7F7;
|
||||
padding-bottom: 240rpx;
|
||||
padding-bottom: calc(240rpx + constant(safe-area-inset-bottom)) !important;
|
||||
|
|
@ -1714,9 +1758,9 @@ function shouldBeTrue(obj) {
|
|||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vertical-scroll {
|
||||
@keyframes vertical-scroll {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
|
@ -1724,9 +1768,9 @@ function shouldBeTrue(obj) {
|
|||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
.footer-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -1830,9 +1874,9 @@ function shouldBeTrue(obj) {
|
|||
width: 32%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
.dialog-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80vw;
|
||||
|
|
@ -1957,16 +2001,16 @@ function shouldBeTrue(obj) {
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 100rpx;
|
||||
left: 36rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-margin-wrap::after {
|
||||
.uni-margin-wrap::after {
|
||||
// position: absolute;
|
||||
// content: '';
|
||||
// left: 0;
|
||||
|
|
@ -1975,9 +2019,9 @@ function shouldBeTrue(obj) {
|
|||
// height: 18px;
|
||||
// background-color: #f7f7f7;
|
||||
// border-radius: 16px 16px 0px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
.uni-margin-wrap {
|
||||
// position: relative;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
|
|
@ -2031,11 +2075,11 @@ function shouldBeTrue(obj) {
|
|||
padding: 0 100rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.placeholder {
|
||||
.placeholder {
|
||||
// display: none;
|
||||
// position: relative;
|
||||
// background-color: #f7f7f7;
|
||||
|
|
@ -2043,20 +2087,20 @@ function shouldBeTrue(obj) {
|
|||
// border-radius: 1rem 1rem 0 0;
|
||||
// left: 0;
|
||||
// bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 由小到大缩放动画 */
|
||||
.animated-box {
|
||||
/* 由小到大缩放动画 */
|
||||
.animated-box {
|
||||
animation: scaleIn 1s ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
/* 延迟动画 */
|
||||
.scale-in-delay {
|
||||
/* 延迟动画 */
|
||||
.scale-in-delay {
|
||||
animation: scaleIn 0.5s ease-out 0.2s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画关键帧定义 */
|
||||
@keyframes scaleIn {
|
||||
/* 动画关键帧定义 */
|
||||
@keyframes scaleIn {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
|
|
@ -2070,17 +2114,17 @@ function shouldBeTrue(obj) {
|
|||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iosQuestion {
|
||||
.iosQuestion {
|
||||
.titleBox {
|
||||
.image {
|
||||
margin-top: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question {
|
||||
.question {
|
||||
margin: 24rpx 32rpx;
|
||||
padding: 17px 13px;
|
||||
background-color: #FFFFFF;
|
||||
|
|
@ -2117,9 +2161,9 @@ function shouldBeTrue(obj) {
|
|||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.myCouponList {
|
||||
.myCouponList {
|
||||
|
||||
margin: 24rpx 32rpx;
|
||||
padding: 17px 13px;
|
||||
|
|
@ -2187,9 +2231,9 @@ function shouldBeTrue(obj) {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.myCouponContainer {
|
||||
.myCouponContainer {
|
||||
width: calc(100% - 52px);
|
||||
height: 400px;
|
||||
background-image: url('/static/image/recharge/myCouponContainerBg.png');
|
||||
|
|
@ -2327,16 +2371,16 @@ function shouldBeTrue(obj) {
|
|||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.white-flow {
|
||||
.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 {
|
||||
@keyframes flow {
|
||||
0% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
|
@ -2344,25 +2388,25 @@ function shouldBeTrue(obj) {
|
|||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uni-countdown-day {
|
||||
::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 {
|
||||
::v-deep .uni-countdown-splitor-day {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.yanhua {
|
||||
.yanhua {
|
||||
position: fixed;
|
||||
top: 170px;
|
||||
left: 15px;
|
||||
z-index: 999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,15 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="main-info-container">
|
||||
<!-- 水印 -->
|
||||
<view v-if="$isVip()">
|
||||
<watermark :dark="data.dark" />
|
||||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
|
||||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||||
</liu-drag-button>
|
||||
</view>
|
||||
<view class="container flex flex-column" @touchstart="handleTouchStart" @touchmove.stop.prevent="handleTouchMove"
|
||||
@touchend="handleTouchEnd">
|
||||
<view class="main-info-container" :class="{ 'open': isOpen }"
|
||||
:style="{ 'padding-bottom': `${cardArrowHeight}px` }">
|
||||
<!-- 导航栏 placeholder -->
|
||||
<NavBar bgColor="transparent">
|
||||
<view class="nav-bar flex-align-center h100">
|
||||
|
|
@ -36,10 +45,13 @@
|
|||
</view>
|
||||
<view class="total-money flex-align-center" style="margin-top: 10px;">
|
||||
<view class="total-money-value flex-align-center">
|
||||
<text>{{ financeInfo.totalMoney }}</text>
|
||||
<text class="alipay-font">{{ numberUtil.formatMoneyWithThousand(totalMoney) }}</text>
|
||||
</view>
|
||||
<view class="total-money-value flex-align-center">
|
||||
<text>{{ financeInfo.yesterdayIncome }}</text>
|
||||
<text class="alipay-font">{{ yesterdayIncome > 0 ? "+" +
|
||||
numberUtil.formatMoneyWithThousand(yesterdayIncome) :
|
||||
numberUtil.formatMoneyWithThousand(yesterdayIncome)
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -48,14 +60,55 @@
|
|||
<text>家庭保障</text>
|
||||
</view>
|
||||
<view class=" flex-align-end" style="margin-top: 10px;">
|
||||
<text class="value">{{ financeInfo.familyProtection }}</text>
|
||||
<text class="value alipay-font">{{ familyProtection }}</text>
|
||||
<text class="text">份</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="data-box">
|
||||
<view v-for="item in myAssets" :key="item.title">
|
||||
<view v-if="item.title" class="title second-color">{{ item.title }}</view>
|
||||
<view class="group-data flex-justify-between">
|
||||
<template v-for="subItem in item.items" :key="subItem.label">
|
||||
<view v-if="financeInfo[item.key][subItem.key].labelSub"
|
||||
class="item flex-align-center flex-justify-between">
|
||||
<view class="flex-align-center">
|
||||
<text class="label primary-color">{{ subItem.label }}</text>
|
||||
<text v-if="financeInfo[item.key][subItem.key].type == 'text'"
|
||||
class="label-sub second-color">
|
||||
{{ formatTextWithNumber(financeInfo[item.key][subItem.key].labelSub) }}
|
||||
</text>
|
||||
<text v-else class="label-sub second-color">
|
||||
{{
|
||||
numberUtil.formatMoneyWithThousand(financeInfo[item.key][subItem.key].labelSub)
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<text v-if="financeInfo[item.key][subItem.key].value" class="value primary-color">{{
|
||||
financeInfo[item.key][subItem.key].value > 0 ? "+" +
|
||||
numberUtil.formatMoneyWithThousand(financeInfo[item.key][subItem.key].value) :
|
||||
numberUtil.formatMoneyWithThousand(financeInfo[item.key][subItem.key].value)
|
||||
}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-if="item.groupId == '1'" class="item flex-align-center flex-justify-between">
|
||||
<view class="flex-align-center">
|
||||
<text class="label primary-color">更多资产服务</text>
|
||||
</view>
|
||||
<text class="value primary-color">去看看</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="image-service-box flex-column"
|
||||
:style="{ top: topHeight + 'px', 'min-height': `calc(100vh - ${imageCardBoxtopHeight}px)` }">
|
||||
<view class="card-arrow-box">
|
||||
<view class="arrow-box">
|
||||
<image class="arrow-icon" src="/static/image/finance-management/arrow-down.png"></image>
|
||||
<image @click="data.isOpen = !data.isOpen" class="arrow-icon"
|
||||
:src="`/static/image/finance-management/arrow-${isOpen ? 'up' : 'down'}.png`">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<view class="card-box flex-column">
|
||||
|
|
@ -63,14 +116,18 @@
|
|||
<view class="wealth-card-box flex">
|
||||
<!-- 占位图片设置为透明 -->
|
||||
<image class="wealth-card-opacity0" src="/static/image/finance-management/v1/bg.png"
|
||||
mode="widthFix" />
|
||||
mode="widthFix" @load="updateTopHeight" />
|
||||
<!-- 背景图片高度自适应 -->
|
||||
<image class="wealth-card" src="/static/image/finance-management/v1/bg.png" mode="widthFix" />
|
||||
<image class="wealth-card"
|
||||
:src="`/static/image/finance-management/${financeInfo.vipLevel}/bg.png`" mode="widthFix" />
|
||||
|
||||
<view class="card-info">
|
||||
<image class="logo" src="/static/image/finance-management/v1/logo.png" mode="scaleToFill" />
|
||||
<image class="logo"
|
||||
:src="`/static/image/finance-management/${financeInfo.vipLevel}/logo.png`"
|
||||
mode="scaleToFill" />
|
||||
<view class="name-box flex-align-center">
|
||||
<image class="card-holder-icon" src="/static/image/finance-management/v1/card-holder.png"
|
||||
<image class="card-holder-icon"
|
||||
:src="`/static/image/finance-management/${financeInfo.vipLevel}/card-holder.png`"
|
||||
mode="scaleToFill" />
|
||||
<view class="card-holder-name sacramento-font">{{ financeInfo.cardHolderName }}</view>
|
||||
</view>
|
||||
|
|
@ -78,24 +135,54 @@
|
|||
</view>
|
||||
<view class="enjoy-benefits flex-align-center">
|
||||
<text class="benefits-text">{{ financeInfo.benefitsText }}</text>
|
||||
<image class="arrow-icon" src="/static/image/finance-management/v1/arrow.png"></image>
|
||||
<image class="arrow-icon"
|
||||
:src="`/static/image/finance-management/${financeInfo.vipLevel}/arrow.png`"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-box">
|
||||
<view class="service-icons">
|
||||
<view class="service-icon" v-for="item in serviceIcons" :key="item.name">
|
||||
<image class="icon"
|
||||
:src="`/static/image/finance-management/service-icon/${item.icon}.png`"
|
||||
mode="scaleToFill" />
|
||||
<text class="name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content flex-1 flex-align-center flex-justify-center">
|
||||
<view class="flex-align-center flex-column">
|
||||
<image style="width:92rpx; height: 92rpx;margin-top: 16rpx;"
|
||||
src="/static/image/common/upload-screenshot.png">
|
||||
</image>
|
||||
<text style="font-size: 36rpx;color: #1777FF;">长按替换真实截图</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="content-box"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="bottom-box"
|
||||
:class="`navigation-menu-${financeInfo.navigationMenuStyle}`, { 'ios-bottom-box': $system == 'iOS' }">
|
||||
<view class="bottom-item" v-for="item in navigationMenu" :key="item.name">
|
||||
<image
|
||||
:src="`/static/image/finance-management/navigation-menu/${financeInfo.navigationMenuStyle}/${item.icon}.png`">
|
||||
</image>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
||||
import { ref, toRefs, reactive, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { ref, toRefs, reactive, onMounted, watch, computed } from 'vue'
|
||||
import { onLoad, onReady } from '@dcloudio/uni-app'
|
||||
import { serviceIcons, navigationMenu, myAssets } from '@/static/json/fortune.json'
|
||||
import { numberUtil } from '@/utils/common.js'
|
||||
|
||||
onLoad(() => {
|
||||
// 理财页面埋点
|
||||
|
|
@ -106,18 +193,245 @@ onLoad(() => {
|
|||
// })
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
financeInfo: {
|
||||
totalMoney: 100000000,
|
||||
yesterdayIncome: 22222,
|
||||
familyProtection: 1,
|
||||
benefitsText: '尊享礼遇18000元/年',
|
||||
cardHolderName: 'LiXing',
|
||||
vipLevel: 1,
|
||||
}
|
||||
onReady(() => {
|
||||
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
|
||||
uni.createSelectorQuery().select('.total-money-box').boundingClientRect((data) => {
|
||||
console.log("total-money-box height: " + (data ? data.height : "null"));
|
||||
topHeight.value = data ? data.height + 44 + statusBarHeight.value : 44 + statusBarHeight.value;
|
||||
imageCardBoxtopHeight.value = data ? data.height + 44 + statusBarHeight.value : 44 + statusBarHeight.value;
|
||||
}).exec()
|
||||
})
|
||||
|
||||
let { financeInfo } = toRefs(data)
|
||||
const updateTopHeight = () => {
|
||||
setTimeout(() => {
|
||||
uni.createSelectorQuery().select('.card-arrow-box').boundingClientRect((data) => {
|
||||
console.log("card-arrow-box height: " + (data ? data.height : "null"));
|
||||
cardArrowHeight.value = data ? data.height - 20 : 0;
|
||||
}).exec()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 总资产
|
||||
const totalMoney = computed(() => {
|
||||
let totalMoney = 0;
|
||||
for (const key in financeInfo.value.fortune) {
|
||||
if (!Object.hasOwn(financeInfo.value.fortune, key)) continue;
|
||||
const element = financeInfo.value.fortune[key];
|
||||
totalMoney += Number(element.labelSub)
|
||||
}
|
||||
return totalMoney
|
||||
})
|
||||
|
||||
// 昨日收益
|
||||
const yesterdayIncome = computed(() => {
|
||||
let yesterdayIncome = 0;
|
||||
for (const key in financeInfo.value.fortune) {
|
||||
if (!Object.hasOwn(financeInfo.value.fortune, key)) continue;
|
||||
const element = financeInfo.value.fortune[key];
|
||||
yesterdayIncome += Number(element.value)
|
||||
}
|
||||
return yesterdayIncome
|
||||
})
|
||||
|
||||
// 家庭保障
|
||||
const familyProtection = computed(() => {
|
||||
return parseInt(financeInfo.value.myAssets.baoxian.labelSub)
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
financeInfo: {
|
||||
benefitsText: '尊享礼遇18000元/年',
|
||||
cardHolderName: 'LiXing',
|
||||
vipLevel: "v3",
|
||||
navigationMenuStyle: "style-1",
|
||||
fortune: {
|
||||
yuebao: {
|
||||
value: 3.53,
|
||||
labelSub: "100000",
|
||||
},
|
||||
dingqi: {
|
||||
value: 50,
|
||||
labelSub: "100000",
|
||||
},
|
||||
jijin: {
|
||||
value: 5000,
|
||||
labelSub: "100000",
|
||||
},
|
||||
huangjin: {
|
||||
value: -300,
|
||||
labelSub: "100000",
|
||||
},
|
||||
yulingbao: {
|
||||
value: 20,
|
||||
labelSub: "100000",
|
||||
}
|
||||
},
|
||||
myAssets: {
|
||||
baoxian: {
|
||||
labelSub: "3份保单保障中",
|
||||
type: "text"
|
||||
}
|
||||
},
|
||||
myQuota: {
|
||||
huabei: {
|
||||
labelSub: "可用100000",
|
||||
type: "text"
|
||||
},
|
||||
jubei: {
|
||||
labelSub: "可用100000",
|
||||
type: "text"
|
||||
},
|
||||
beizhi: {
|
||||
labelSub: "可用100000",
|
||||
type: "text"
|
||||
},
|
||||
wangshangdai: {
|
||||
labelSub: "预计可借100000",
|
||||
type: "text"
|
||||
}
|
||||
}
|
||||
},
|
||||
topHeight: 0,
|
||||
statusBarHeight: 0,
|
||||
cardArrowHeight: 0,
|
||||
imageCardBoxtopHeight: 0,
|
||||
isOpen: false
|
||||
})
|
||||
|
||||
|
||||
let { financeInfo, topHeight, statusBarHeight, cardArrowHeight, imageCardBoxtopHeight, isOpen } = toRefs(data)
|
||||
|
||||
|
||||
const formatTextWithNumber = (str) => {
|
||||
if (!str) return '';
|
||||
return str.replace(/(\d+(\.\d+)?)/g, (match) => {
|
||||
return match > 100 ? numberUtil.formatMoneyWithThousand(match) : match;
|
||||
});
|
||||
}
|
||||
|
||||
let startY = 0;
|
||||
let startTop = 0;
|
||||
let minTop = 0;
|
||||
let maxTop = 0;
|
||||
|
||||
// 监听 isOpen 变化来控制 topHeight
|
||||
watch(() => isOpen.value, () => {
|
||||
updateHeightByState();
|
||||
})
|
||||
|
||||
const handleTouchStart = (e) => {
|
||||
startY = e.touches[0].clientY;
|
||||
startTop = topHeight.value;
|
||||
|
||||
// 如果未设置边界（或为了安全起见每次开始时），则计算边界
|
||||
if (!minTop || !maxTop) {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const statusBar = systemInfo.statusBarHeight;
|
||||
|
||||
// 创建查询以获取当前尺寸
|
||||
const query = uni.createSelectorQuery();
|
||||
query.select('.total-money-box').boundingClientRect();
|
||||
query.select('.main-info-container').boundingClientRect();
|
||||
query.exec(([totalMoneyBox, mainInfoContainer]) => {
|
||||
if (totalMoneyBox) {
|
||||
// 最小高度（关闭状态）：total-money-box 高度 + 导航栏 + 状态栏 - 卡片箭头偏移量
|
||||
minTop = totalMoneyBox.height + 44 + statusBar;
|
||||
}
|
||||
if (mainInfoContainer) {
|
||||
// 最大高度（打开状态）：main-info-container 高度 - 卡片箭头高度
|
||||
// 注意：isOpen 会切换内边距/布局，因此这可能需要根据当前状态进行调整。
|
||||
// 为简单起见，我们假设我们在初始化/切换期间捕获了正确的值或对其进行了估算。
|
||||
// 更稳健的方法：
|
||||
// 关闭状态顶部：~160px（示例）
|
||||
// 打开状态顶部：~400px（示例）
|
||||
// 我们可以从之前使用的 'isOpen=true' 计算逻辑推断出 maxTop：
|
||||
// data.height (main-info-container 的高度)。
|
||||
// 如果当前已关闭，main-info-container 可能很小。
|
||||
// 但我们知道 'isOpen=true' 会将 topHeight 设置为 main-info-container 的高度（打开时）。
|
||||
|
||||
// 让我们依赖之前记录/使用的值。
|
||||
// 如果当前已关闭：minTop 是当前 topHeight。
|
||||
// 如果当前已打开：maxTop 是当前 topHeight。
|
||||
// 我们需要 *另一个* 值。
|
||||
|
||||
// 让我们在 onReady/updateTopHeight 中动态重新测量以确信，
|
||||
// 但在这里我们可以尝试估算或依赖之前的逻辑。
|
||||
|
||||
// 更好的方法：根据 DOM 预先计算两者或使用固定逻辑。
|
||||
// minTop 大约是 44 + statusBar + totalMoneyBoxHeight
|
||||
// maxTop 是 mainContainerHeight（展开时）
|
||||
}
|
||||
// 目前，让我们使用 handleTouchEnd 中的逻辑来设置这些动态限制
|
||||
// 我们将在 handleTouchEnd 或 init 中更新它们。
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
let currentY = e.touches[0].clientY;
|
||||
let delta = currentY - startY;
|
||||
let newTop = startTop + delta;
|
||||
|
||||
// 如果为 0，让我们获取它们。
|
||||
if (minTop === 0 && !isOpen.value) minTop = startTop;
|
||||
if (maxTop === 0 && isOpen.value) maxTop = startTop;
|
||||
|
||||
// 如果有值，则进行简单钳位
|
||||
if (minTop && maxTop) {
|
||||
if (newTop < minTop) newTop = minTop;
|
||||
if (newTop > maxTop) newTop = maxTop;
|
||||
}
|
||||
|
||||
// 应用
|
||||
topHeight.value = newTop;
|
||||
}
|
||||
|
||||
const updateHeightByState = () => {
|
||||
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
|
||||
if (isOpen.value) {
|
||||
// 打开状态：计算 main-info-container 高度
|
||||
uni.createSelectorQuery().select('.main-info-container').boundingClientRect((data) => {
|
||||
if (data) {
|
||||
const targetH = data.height - cardArrowHeight.value;
|
||||
topHeight.value = targetH;
|
||||
maxTop = targetH; // 更新 maxTop
|
||||
}
|
||||
}).exec()
|
||||
} else {
|
||||
// 关闭状态：计算 total-money-box 位置
|
||||
uni.createSelectorQuery().select('.total-money-box').boundingClientRect((data) => {
|
||||
if (data) {
|
||||
const targetH = data.height + 44 + statusBarHeight.value;
|
||||
topHeight.value = targetH;
|
||||
minTop = targetH; // 更新 minTop
|
||||
}
|
||||
}).exec()
|
||||
}
|
||||
}
|
||||
|
||||
const handleTouchEnd = (e) => {
|
||||
let endY = e.changedTouches[0].clientY;
|
||||
let diff = endY - startY;
|
||||
|
||||
let targetState = isOpen.value;
|
||||
|
||||
// 判断滑动意图
|
||||
if (diff > 50) {
|
||||
targetState = true;
|
||||
} else if (diff < -50) {
|
||||
targetState = false;
|
||||
}
|
||||
|
||||
// 如果状态改变，watch 会处理动画/高度更新
|
||||
if (targetState !== isOpen.value) {
|
||||
isOpen.value = targetState;
|
||||
} else {
|
||||
// 如果状态未改变，手动恢复高度（吸附回原位）
|
||||
updateHeightByState();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -127,13 +441,12 @@ let { financeInfo } = toRefs(data)
|
|||
<style lang="less" scoped>
|
||||
.container {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-info-container {
|
||||
background: linear-gradient(191deg, #0B1028 5.48%, #0B1028 30.26%, #18336C 60.18%, #18336C 100%);
|
||||
|
||||
background: linear-gradient(348deg, #0B1028 49%, #0B1028 76.26%, #18336C 86.18%, #18336C 100%);
|
||||
|
||||
.nav-bar {
|
||||
padding: 20rpx;
|
||||
|
|
@ -192,6 +505,7 @@ let { financeInfo } = toRefs(data)
|
|||
.total-money-box {
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 6rpx;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.revenue-box {
|
||||
padding: 0 24rpx;
|
||||
|
|
@ -234,6 +548,7 @@ let { financeInfo } = toRefs(data)
|
|||
.family-protection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
padding: 0 28rpx;
|
||||
border-left: 1rpx solid #172139;
|
||||
|
|
@ -256,6 +571,52 @@ let { financeInfo } = toRefs(data)
|
|||
}
|
||||
}
|
||||
|
||||
.data-box {
|
||||
padding: 0 26rpx 0;
|
||||
font-size: 26rpx;
|
||||
|
||||
.title {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.group-data {
|
||||
// margin-top: 8rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: calc(50% - 15rpx);
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.label {
|
||||
margin-right: 18rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.second-color {
|
||||
color: #787174;
|
||||
}
|
||||
|
||||
.primary-color {
|
||||
color: #EAD2B8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
// background: #08112E;
|
||||
background: linear-gradient(146deg, #0B1028 49%, #08112E 71.26%, #18336C 83.18%, #18336C 96%)
|
||||
}
|
||||
|
||||
.image-service-box {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 20%;
|
||||
width: 100%;
|
||||
|
||||
.arrow-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -291,7 +652,7 @@ let { financeInfo } = toRefs(data)
|
|||
|
||||
.name-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card-holder-icon {
|
||||
|
|
@ -338,8 +699,33 @@ let { financeInfo } = toRefs(data)
|
|||
|
||||
.content-box {
|
||||
margin-top: -1px;
|
||||
background-color: #ffffff;
|
||||
background: linear-gradient(180deg, #FFFFFF 56.37%, #F0F4F9 100%);
|
||||
padding: 20rpx;
|
||||
|
||||
.service-icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.service-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
margin-top: 22rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.icon {
|
||||
width: 62rpx;
|
||||
height: 62rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
color: #5D5D5D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -347,6 +733,66 @@ let { financeInfo } = toRefs(data)
|
|||
}
|
||||
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 4rpx 0;
|
||||
|
||||
.bottom-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 25rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ios-bottom-box {
|
||||
padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
|
||||
padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
|
||||
|
||||
}
|
||||
|
||||
.navigation-menu-style-1 {
|
||||
background-color: #ffffff;
|
||||
|
||||
.bottom-item:nth-child(2) {
|
||||
text {
|
||||
color: #A27140;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-menu-style-2 {
|
||||
background-color: #F8F8F8;
|
||||
border-top: 1rpx solid #C3CED1;
|
||||
padding: 6rpx 0;
|
||||
|
||||
.bottom-item:nth-child(2) {
|
||||
text {
|
||||
color: #0075FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -95,8 +95,6 @@
|
|||
<text class="vision-text">版本:{{ vision }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
|
|
@ -108,21 +106,51 @@ import {
|
|||
storage
|
||||
} from '@/utils/storage.js'
|
||||
import {
|
||||
get
|
||||
get,
|
||||
postJson
|
||||
} from '@/utils/requests.js'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
toRefs,
|
||||
getCurrentInstance
|
||||
toRefs
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
onLoad,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const { proxy } = instance;
|
||||
// 内部埋点方法
|
||||
const apiUserEvent = async (type, adminData) => {
|
||||
let uni_version = uni.getStorageSync("version")
|
||||
if (type != 'uni') {
|
||||
await postJson('a', 'api/user/event', {
|
||||
type: adminData.type,
|
||||
key: adminData.type + ".uni.alipay." + adminData.key,
|
||||
value: adminData.value,
|
||||
extra: JSON.stringify({
|
||||
uni_version: uni_version,
|
||||
...adminData.extra
|
||||
}),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 内部跳转充值页方法
|
||||
const goRechargePage = () => {
|
||||
// 进入页面
|
||||
apiUserEvent('all', {
|
||||
type: "event",
|
||||
key: "payment_onload",
|
||||
value: "进入充值页面",
|
||||
extra: {
|
||||
from: "支付宝模拟器首页"
|
||||
}
|
||||
})
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/recharge/index'
|
||||
});
|
||||
}
|
||||
|
||||
// 菜单列表
|
||||
const menuList = [{
|
||||
|
|
@ -141,8 +169,8 @@ const menuList = [{
|
|||
icon: "licaiheika",
|
||||
name: "理财黑卡",
|
||||
isHot: true,
|
||||
// path: "/pages/finance-management/index"
|
||||
path: ""
|
||||
path: "/pages/finance-management/index"
|
||||
// path: ""
|
||||
},
|
||||
{
|
||||
icon: "huabei",
|
||||
|
|
@ -311,9 +339,10 @@ const clickMenu = (item) => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// 开通vip
|
||||
const openVip = () => {
|
||||
console.log('openVip')
|
||||
util.goPage('/pages/common/recharge/index')
|
||||
goRechargePage()
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 554 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 759 B |
Binary file not shown.
|
After Width: | Height: | Size: 767 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 718 B |
|
|
@ -0,0 +1,145 @@
|
|||
{
|
||||
"serviceIcons": [
|
||||
{
|
||||
"name": "余额宝",
|
||||
"icon": "yuebao"
|
||||
},
|
||||
{
|
||||
"name": "稳健理财",
|
||||
"icon": "wenjianlicai"
|
||||
},
|
||||
{
|
||||
"name": "基金",
|
||||
"icon": "jijin"
|
||||
},
|
||||
{
|
||||
"name": "黄金",
|
||||
"icon": "huangjin"
|
||||
},
|
||||
{
|
||||
"name": "股票",
|
||||
"icon": "gupiao"
|
||||
},
|
||||
{
|
||||
"name": "定期",
|
||||
"icon": "dingqi"
|
||||
},
|
||||
{
|
||||
"name": "保险",
|
||||
"icon": "baoxian"
|
||||
},
|
||||
{
|
||||
"name": "高端理财",
|
||||
"icon": "gaoduanlicai"
|
||||
},
|
||||
{
|
||||
"name": "全球投资",
|
||||
"icon": "quanqiutouzi"
|
||||
},
|
||||
{
|
||||
"name": "更多",
|
||||
"icon": "gengduo"
|
||||
}
|
||||
],
|
||||
"navigationMenu": [
|
||||
{
|
||||
"name": "首页",
|
||||
"icon": "shouye"
|
||||
},
|
||||
{
|
||||
"name": "理财",
|
||||
"icon": "licai"
|
||||
},
|
||||
{
|
||||
"name": "视频",
|
||||
"icon": "shipin"
|
||||
},
|
||||
{
|
||||
"name": "消息",
|
||||
"icon": "xiaoxi"
|
||||
},
|
||||
{
|
||||
"name": "我的",
|
||||
"icon": "wode"
|
||||
}
|
||||
],
|
||||
"myAssets": [
|
||||
{
|
||||
"groupId": "1",
|
||||
"key": "fortune",
|
||||
"title": "",
|
||||
"items": [
|
||||
{
|
||||
"label": "余额宝",
|
||||
"labelSub": "",
|
||||
"value": "",
|
||||
"key": "yuebao"
|
||||
},
|
||||
{
|
||||
"label": "定期",
|
||||
"labelSub": "",
|
||||
"value": "",
|
||||
"key": "dingqi"
|
||||
},
|
||||
{
|
||||
"label": "基金",
|
||||
"labelSub": "",
|
||||
"value": "",
|
||||
"key": "jijin"
|
||||
},
|
||||
{
|
||||
"label": "黄金",
|
||||
"labelSub": "",
|
||||
"value": "",
|
||||
"key": "huangjin"
|
||||
},
|
||||
{
|
||||
"label": "余利宝",
|
||||
"labelSub": "",
|
||||
"value": "",
|
||||
"key": "yulingbao"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupId": "2",
|
||||
"title": "我的保障资产",
|
||||
"key": "myAssets",
|
||||
"items": [
|
||||
{
|
||||
"label": "保险",
|
||||
"labelSub": "1份保单保障中",
|
||||
"value": "",
|
||||
"key": "baoxian"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupId": "3",
|
||||
"title": "我的额度",
|
||||
"key": "myQuota",
|
||||
"items": [
|
||||
{
|
||||
"label": "花呗",
|
||||
"labelSub": "",
|
||||
"key": "huabei"
|
||||
},
|
||||
{
|
||||
"label": "借呗",
|
||||
"labelSub": "",
|
||||
"key": "jubei"
|
||||
},
|
||||
{
|
||||
"label": "备用金",
|
||||
"labelSub": "",
|
||||
"key": "beizhi"
|
||||
},
|
||||
{
|
||||
"label": "网商贷",
|
||||
"labelSub": "",
|
||||
"key": "wangshangdai"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -42,6 +42,7 @@ export default {
|
|||
let currentPage = pages[pages.length - 1];
|
||||
let currentUrl = currentPage.route;
|
||||
currentUrl = pageData[currentUrl]
|
||||
if (type) {
|
||||
// 点击水印
|
||||
app.config.globalProperties.$apiUserEvent('all', {
|
||||
type: "click",
|
||||
|
|
@ -56,6 +57,7 @@ export default {
|
|||
page: currentUrl
|
||||
}
|
||||
})
|
||||
}
|
||||
// 进入页面
|
||||
app.config.globalProperties.$apiUserEvent('all', {
|
||||
type: "event",
|
||||
|
|
|
|||
Loading…
Reference in New Issue