首页弹窗
This commit is contained in:
zpc
parent
f7b2917326
commit
2f871e3717
15
App.vue
15
App.vue
|
|
@ -222,4 +222,19 @@ button.hide {
|
|||
.uni-tabbar__icon {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
@keyframes m-zoom {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
|
||||
@up="loadData">
|
||||
<view style="width: 100%;" :style="{ height: $sys().statusBarHeight + 'px' }"></view>
|
||||
<view style="width: 100%;height: 70rpx;" ></view>
|
||||
<view style="width: 100%;height: 70rpx;"></view>
|
||||
<banner :type-id="1" :height="300" :img-width="94"></banner>
|
||||
<!-- 指示器 -->
|
||||
<!-- <view class="sw-dot relative">
|
||||
|
|
@ -64,10 +64,7 @@
|
|||
|
||||
<view class="qbt_con">
|
||||
<view v-for="(item, index) in listdata" :key="index" class="qbt_con_item" @click="todetails(item)">
|
||||
<view class="list_1 center" style="
|
||||
background-color: #d8d8d8;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
">
|
||||
<view class="list_1 center" style="background-color: #d8d8d8;border-radius: 16rpx 16rpx 0rpx 0rpx;">
|
||||
<image :src="item.imgurl" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="list_2">
|
||||
|
|
@ -106,22 +103,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<!-- 群聊弹窗 -->
|
||||
<uni-popup ref="qunliao_show" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
||||
<view class="pop">
|
||||
<view class="flex">
|
||||
<image class="img100" :src="erweima" :show-menu-by-longpress="true" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="pop-view column">
|
||||
<text class="ziti">添加客服领优惠</text>
|
||||
<text>识别图中二维码</text>
|
||||
</view>
|
||||
<image class="pop-liwu" :src="$img1('index/liwu.png')"></image>
|
||||
<view @click="$refs.qunliao_show.close()" class="pop-close flex">
|
||||
<image :src="$img1('common/close.png')" class="img100" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
<!-- 优惠券弹窗 -->
|
||||
<uni-popup ref="couponPop" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
||||
|
|
@ -152,25 +134,29 @@
|
|||
</uni-popup>
|
||||
<!-- <tab-bar :index="0"></tab-bar> -->
|
||||
|
||||
<!-- 进福利群 -->
|
||||
<!-- <view class="group-fixed" @click="$refs.qunliao_show.open()">
|
||||
<image :src="$img1('image/fuliqun.png')"></image>
|
||||
</view> -->
|
||||
|
||||
<!-- 邀请好友 -->
|
||||
<!-- <view class="group-fixed2" @tap="$c.to({url:'/pages/user/tui-guang'})">
|
||||
<image :src="$img1('image/yaoqing.png')"></image>
|
||||
</view> -->
|
||||
|
||||
<!-- 排行榜
|
||||
<view class="group-fixed1" @click="toRanking()">
|
||||
<image :src="$img1('image/paihangbang.png')"></image>
|
||||
</view> -->
|
||||
<!-- 排行榜 -->
|
||||
<view class="group-fixed1" @click="toyaoqingRanking()">
|
||||
<image :src="$img1('image/paihangbang.png')"></image>
|
||||
</view>
|
||||
<!-- 悬浮球 -->
|
||||
<template v-if="floatBall">
|
||||
<view v-for="(item, index) in floatBall" :style="[getBallStyle(item)]" :key="index" class="group-fixed1"
|
||||
@click="BallClick(item)">
|
||||
<image :src="item.image"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 悬浮球弹窗 -->
|
||||
<uni-popup ref="floatBall_popup" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
||||
<view class="pop-ball"
|
||||
:style="{ backgroundImage: 'url(' + ballItem.image_bj + ')', backgroundSize: '100% 99.5%', backgroundRepeat: 'no-repeat' }">
|
||||
<image show-menu-by-longpress v-if="ballItem != null" :src="ballItem.image_details" mode="aspectFit"
|
||||
:style="[getPopupStyle(ballItem)]">
|
||||
</image>
|
||||
</view>
|
||||
<view class="pop-ball-close flex" @click="$refs.floatBall_popup.close()">
|
||||
<view style="width: 48rpx;height: 48rpx;border-radius: 50%;opacity: 0.5;">
|
||||
<image show-menu-by-longpress :src="$img1('common/close.png')" class="img100" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<rule-pop ref="rulePop"></rule-pop>
|
||||
|
||||
<rule-pop ref="appNotice" notice-check></rule-pop>
|
||||
|
|
@ -218,6 +204,8 @@ export default {
|
|||
couponData: "",
|
||||
canGetCoupon: false,
|
||||
swCur: 0,
|
||||
floatBall: [],
|
||||
ballItem: null
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -267,6 +255,7 @@ export default {
|
|||
selected: 0,
|
||||
});
|
||||
}
|
||||
this.getFloatBall();
|
||||
},
|
||||
|
||||
onReady() {
|
||||
|
|
@ -274,6 +263,7 @@ export default {
|
|||
this.getCoupon();
|
||||
// this.$refs.rulePop.open()
|
||||
this.getnews();
|
||||
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
|
|
@ -284,7 +274,63 @@ export default {
|
|||
path: "/pages/shouye/index?pid=" + uni.getStorageSync("userinfo").ID,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getBallStyle() {
|
||||
return (item) => {
|
||||
//判断item.position_x 第一位是否是-号
|
||||
let s = {
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
top: item.position_y,
|
||||
};
|
||||
if (item.position_x.indexOf('-') > -1) {
|
||||
//是-号
|
||||
// 获取-号后面的值
|
||||
let position_x = item.position_x.split('-')[1];
|
||||
s.right = position_x;
|
||||
|
||||
} else {
|
||||
s.left = item.position_x;
|
||||
}
|
||||
if (item.effect == 1) {
|
||||
s.animation = "m-zoom 1.2s ease-in-out infinite";
|
||||
}
|
||||
return s;
|
||||
}
|
||||
},
|
||||
getPopupStyle() {
|
||||
return (item) => {
|
||||
if (item == null) {
|
||||
return {};
|
||||
}
|
||||
let s = {
|
||||
width: item.image_details_w ,
|
||||
height: item.image_details_h,
|
||||
position: 'relative',
|
||||
};
|
||||
if (item.image_details_x != "0") {
|
||||
s.left = item.image_details_x ;
|
||||
}
|
||||
if (item.image_details_y != "0") {
|
||||
s.top = item.image_details_y;
|
||||
}
|
||||
return s;
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
BallClick(item) {
|
||||
console.log(item);
|
||||
if (item.type == 2) {
|
||||
this.$c.nav(item.link_url);
|
||||
return;
|
||||
}
|
||||
if (item.type == 1) {
|
||||
// this.$c.nav(item.link_url);
|
||||
this.ballItem = item;
|
||||
this.$refs.floatBall_popup.open();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 是否弹公告
|
||||
* @return {*}
|
||||
|
|
@ -301,7 +347,14 @@ export default {
|
|||
uni.setStorageSync("_is_this_show", true);
|
||||
}
|
||||
},
|
||||
async getFloatBall() {
|
||||
const { status, data, msg } = await this.$request.get("getFloatBall");
|
||||
if (status == 1) {
|
||||
this.floatBall = data;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
swChange(e) {
|
||||
this.swCur = e.detail.current;
|
||||
},
|
||||
|
|
@ -508,6 +561,7 @@ export default {
|
|||
height: 380px;
|
||||
position: relative;
|
||||
background: #b198e2;
|
||||
|
||||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(137, 77, 211, 0.33);
|
||||
border-radius: 44rpx;
|
||||
|
||||
|
|
@ -1222,4 +1276,26 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pop-ball {
|
||||
width: 506rpx;
|
||||
height: 380px;
|
||||
position: relative;
|
||||
// background: #b198e2;
|
||||
border-radius: 25rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pop-ball-close {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
2712
pages/user/index.vue
2712
pages/user/index.vue
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user