396 lines
9.4 KiB
Vue
396 lines
9.4 KiB
Vue
<template>
|
|
<view class="page-app theme-light main-green font-1">
|
|
<view v-if="currentIndex === 0" :style="{display: currentIndex === 0 ? '' : 'none'}">
|
|
<home ref="home"></home>
|
|
</view>
|
|
<view v-if="currentIndex === 1" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
|
<trend></trend>
|
|
</view>
|
|
<view v-if="currentIndex === 2" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
|
<message></message>
|
|
</view>
|
|
<view v-if="currentIndex === 3" :style="{display: currentIndex === 3 ? '' : 'none'}">
|
|
<mine></mine>
|
|
</view>
|
|
<tui-tabbar zIndex="997" :current="currentIndex" backdropFilter backgroundColor="#fff" :tabBar="tabbarList" color="#333" selectedColor="#aaaaaa" @click="tabbarSwitch"></tui-tabbar>
|
|
|
|
|
|
<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
|
|
<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='1' :auto-play="false" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
|
|
<view class="close-btn" @click="closeSvga">
|
|
<view class="bottom-box">
|
|
<view class="title">
|
|
<text class="username">{{gift.username}}</text>
|
|
<text class="unit">赠送</text>
|
|
<text class="nickname">{{gift.nickname}}</text>
|
|
<text class="name">{{gift.name}}</text>
|
|
<text class="count">x{{gift.count}}</text>
|
|
</view>
|
|
<view class="btn-box">
|
|
<view class="btn" @click="cannel">关闭</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<s-auth-modal />
|
|
<qrcode-modal />
|
|
<search-modal @query="query" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import home from "@/pages/tabbar/home.vue"
|
|
import trend from "@/pages/tabbar/trend.vue"
|
|
import message from "@/pages/tabbar/message.vue"
|
|
import mine from "@/pages/tabbar/mine.vue"
|
|
import RewardApi from '@/sheep/api/worker/reward';
|
|
import TradeConfigApi from '@/sheep/api/trade/config';
|
|
import qrcodeModal from '@/components/qrcode-modal/qrcode-modal.vue';
|
|
import searchModal from '@/components/search-modal/search-modal.vue';
|
|
import sheep from '@/sheep';
|
|
import $share from '@/sheep/platform/share';
|
|
import _ from 'lodash-es';
|
|
import AreaApi from '@/sheep/api/system/area';
|
|
import tuiTabbar from "@/components/thorui/tui-tabbar/tui-tabbar.vue"
|
|
export default {
|
|
components: {
|
|
home,
|
|
trend,
|
|
message,
|
|
mine,
|
|
searchModal,
|
|
qrcodeModal,
|
|
tuiTabbar
|
|
},
|
|
data() {
|
|
return {
|
|
tabberPageLoadFlag: [],
|
|
currentIndex: 0,
|
|
tabbarList: [
|
|
{
|
|
pagePath: '/pages/chat/chat',
|
|
text: '首页',
|
|
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/5c3dd70b602fa866a431e42cf23a584f12da91dd9675468090f69d1f74fac11f.png',
|
|
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d3803064e60b0e2a0610b62bb48f0ff5c75c8c08bcd090d09bc9f67cb51e7ed9.png'
|
|
},
|
|
{
|
|
pagePath: '/pages/chat/chat',
|
|
text: '动态',
|
|
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/e7f56870666bea98fef3e9323773b37e5dccfe48db51dcd63e306b1c8f400605.png',
|
|
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/3ef2198fcbb01321b59b822292345e75a58c32e6d2504238fd4675b4a529be51.png'
|
|
},
|
|
{
|
|
pagePath: '',
|
|
text: '滴滴',
|
|
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/810802ecdce16ff51b71d1d3de894350062ca9c1ee148053dd0c80db301c23e8.png',
|
|
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/52e3b3bb2a3cc4dd003b4024f21b2d28a5844cd5c3ffb636a6858d9c6c09e610.png'
|
|
},
|
|
/* {
|
|
pagePath: '',
|
|
text: '消息',
|
|
num: 2,
|
|
isDot: true,
|
|
iconPath: '/static/tabbar/find.png',
|
|
selectedIconPath: '/static/tabbar/find_cur.png'
|
|
}, */
|
|
{
|
|
pagePath: '/pages/tabbar/my/my',
|
|
text: '我的',
|
|
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/6c4098dbe1982ad7d6ee23f46e28bc21d4abc22fcdb42f75a9fe58da0a53c8cd.png',
|
|
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a1c7d19aa554fed74be5ecaba6545633c7e3f4f6c36d68b3b61213ba28233621.png',
|
|
verify: false
|
|
}
|
|
],
|
|
|
|
|
|
giftFlag: false,
|
|
src: '',
|
|
canvasId: 'myCanvas',
|
|
};
|
|
},
|
|
// 分享小程序
|
|
onShareAppMessage(res) {
|
|
return {
|
|
title: this.shareInfo.title,
|
|
path: this.shareInfo.path,
|
|
imageUrl: this.shareInfo.image,
|
|
};
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: this.shareInfo.title,
|
|
path: this.shareInfo.path,
|
|
imageUrl: this.shareInfo.image,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.initData(options);
|
|
|
|
this.getGiftList();
|
|
|
|
this.getTradeConfig();
|
|
|
|
this.getAreaData();
|
|
|
|
const index = Number(options.index || this.currentIndex);
|
|
this.currentIndex = index;
|
|
// 根据底部tabbar菜单列表设置对应页面的加载情况
|
|
this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
|
|
return index === tabbar_index
|
|
})
|
|
},
|
|
computed: {
|
|
gift() {
|
|
return sheep.$store('sys').gift;
|
|
},
|
|
shareInfo() {
|
|
return sheep.$platform.share.getShareInfo();
|
|
},
|
|
isLogin: {
|
|
get() {
|
|
return sheep.$store('user').isLogin;
|
|
},
|
|
},
|
|
userInfo: {
|
|
get() {
|
|
return sheep.$store('user').userInfo;
|
|
},
|
|
},
|
|
friendEnabled() {
|
|
return sheep.$store('user').tradeConfig.friendEnabled
|
|
},
|
|
clerk() {
|
|
return sheep.$store('sys').currentClerk;
|
|
},
|
|
},
|
|
methods: {
|
|
initData(options) {
|
|
// #ifdef MP
|
|
// 小程序识别二维码
|
|
if (options.scene) {
|
|
const sceneParams = decodeURIComponent(options.scene).split('=');
|
|
console.log("sceneParams=>",sceneParams);
|
|
options[sceneParams[0]] = sceneParams[1];
|
|
}
|
|
// 小程序场景值
|
|
const config = uni.getLaunchOptionsSync();
|
|
if(config.scene){
|
|
sheep.$store('sys').setScene(config.scene);
|
|
}
|
|
// #endif
|
|
|
|
// 预览模板
|
|
if (options.templateId) {
|
|
sheep.$store('app').init(options.templateId);
|
|
}
|
|
|
|
// 解析分享信息
|
|
if (options.spm) {
|
|
$share.decryptSpm(options.spm);
|
|
}
|
|
|
|
// 进入指定页面(完整页面路径)
|
|
if (options.page) {
|
|
sheep.$router.go(decodeURIComponent(options.page));
|
|
}
|
|
},
|
|
tabbarSwitch(e) {
|
|
//获取登录状态，此处默认未登录
|
|
//跳转切换逻辑需自行实现
|
|
let isLogin = false;
|
|
if (e.verify && !isLogin) {
|
|
this.$u.toast('您还未登录，请先登录');
|
|
} else {
|
|
this.tabberPageLoadFlag[e.index] = true
|
|
this.currentIndex = e.index;
|
|
this.getGiftList();
|
|
this.getTradeConfig();
|
|
}
|
|
},
|
|
onFinished() {
|
|
this.giftFlag = false;
|
|
console.log('动画停止播放时回调');
|
|
},
|
|
onFrame(frame) {//动画播放至某帧后回调
|
|
// console.log(frame);
|
|
},
|
|
onPercentage(percentage) { //动画播放至某进度后回调
|
|
// console.log(percentage);
|
|
},
|
|
onLoaded() {
|
|
this.$refs.cSvgaRef.call('setContentMode', 'AspectFill');
|
|
console.log('加载完成');
|
|
this.$refs.cSvgaRef.call('startAnimation');
|
|
},
|
|
closeSvga() {
|
|
this.src = "";
|
|
this.$refs.cSvgaRef.call('stopAnimation');
|
|
this.giftFlag = false;
|
|
},
|
|
fen2yuan(price) {
|
|
var f = 0;
|
|
var p = (price / 100.0).toFixed(0);
|
|
var p1 = (price / 100.0).toFixed(1);
|
|
var p2 = (price / 100.0).toFixed(2);
|
|
if(p*100 == price){
|
|
f = 0;
|
|
}else if(p1*100 == price){
|
|
f = 1;
|
|
}else if(p2*100 == price){
|
|
f = 2;
|
|
}
|
|
return (price / 100.0).toFixed(f)
|
|
},
|
|
cannel() {
|
|
this.closeSvga();
|
|
},
|
|
ok() {
|
|
this.closeSvga();
|
|
},
|
|
sendGift(e) {
|
|
if(e.giftType != 1){
|
|
// 普通礼物不播放
|
|
return;
|
|
}
|
|
sheep.$store('sys').setGift(e);
|
|
|
|
this.src = e.pic;
|
|
this.giftFlag = true;
|
|
},
|
|
getGiftList() {
|
|
RewardApi.getTopList().then(res => {
|
|
var gift = res.data[0];
|
|
if(gift){
|
|
if(this.gift.id != gift.id){
|
|
// 播放特效
|
|
this.sendGift(gift);
|
|
}
|
|
sheep.$store('sys').setGiftList(res.data);
|
|
}
|
|
});
|
|
},
|
|
getTradeConfig() {
|
|
TradeConfigApi.getTradeConfig(this.userInfo.id).then(res => {
|
|
sheep.$store('user').setTradeConfig(res.data);
|
|
});
|
|
},
|
|
// 获得地区数据
|
|
getAreaData() {
|
|
if (_.isEmpty(uni.getStorageSync('areaData'))) {
|
|
AreaApi.getAreaTree().then((res) => {
|
|
if (res.code === 0) {
|
|
uni.setStorageSync('areaData', res.data);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
query(e) {
|
|
this.$refs.home.queryUser(e);
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.svga-box {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999999999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
|
|
.close-btn {
|
|
color: #fff;
|
|
position: absolute;
|
|
z-index: 999999999;
|
|
padding: 5px 10px;
|
|
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 100rpx;
|
|
|
|
.bottom-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
margin-bottom: 5px;
|
|
|
|
.username {
|
|
color: pink;
|
|
}
|
|
|
|
.unit {
|
|
margin: 10rpx;
|
|
}
|
|
|
|
.nickname {
|
|
color: pink;
|
|
}
|
|
|
|
.name {
|
|
color: yellow;
|
|
margin: 10rpx;
|
|
}
|
|
|
|
.count {
|
|
font-size: 24px;
|
|
}
|
|
|
|
}
|
|
|
|
.price {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.btn-box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
|
|
.btn {
|
|
border: 1px solid #fff;
|
|
font-size: 28rpx;
|
|
padding: 20rpx 110rpx;
|
|
border-radius: 40px;
|
|
margin: 15px;
|
|
color: #fff;
|
|
}
|
|
|
|
.active {
|
|
border: 1px solid var(--ui-BG-Main);
|
|
background-color: var(--ui-BG-Main);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.svga-hide {
|
|
/* #ifdef MP */
|
|
transform: translate(-100%, 0);
|
|
/* #endif */
|
|
|
|
/* #ifndef MP */
|
|
display: none;
|
|
/* #endif */
|
|
}
|
|
|
|
.svga-show {
|
|
/* #ifdef MP */
|
|
transform: translate(0, 0);
|
|
/* #endif */
|
|
|
|
/* #ifndef MP */
|
|
display: block;
|
|
/* #endif */
|
|
}
|
|
</style>
|