shortPlay-mini/pages/home/mini/mini.vue

155 lines
3.6 KiB
Vue

<template>
<c-tabbar :current="0">
<view class="container">
<view>
<u-swiper :list="list3" indicator indicatorMode="line" circular @click="clickSwiper"></u-swiper>
</view>
<view class="operations flex flex-row">
<view class="item b1">
<text class="t1">邀请好友</text>
<text class="t2">赚高额提成</text>
</view>
<view class="item b2">
<text class="t1">App下载</text>
<text class="t2">点击去下载</text>
</view>
<view class="item b3" @click="show = true">
<text class="t1">客服微信</text>
<text class="t2">疑问解答</text>
</view>
</view>
<view class="p-d-20">
<u-notice-bar :text="notice" mode="link" bgColor="#fff" color="#323333" speed="80"
url="/pages/notice/notice"></u-notice-bar>
</view>
<view style="padding: 10upx 0;">
<image style="width: 100%;" src="../../../static/home/app.png" mode="widthFix"></image>
</view>
<view style="padding: 10upx 0;">
<image style="width: 100%;" src="../../../static/home/feedback.png" mode="widthFix"></image>
</view>
<view class="title">变现项目</view>
<view style="padding: 10upx 0;">
<image style="width: 100%;margin-bottom: 20upx;" v-for="item in project" :key="item.id" :src="item.imgUrl" @click="goDetail(item)" mode="widthFix"></image>
</view>
</view>
<c-loading v-if="loading"><u-loading-icon mode="circle"></u-loading-icon></c-loading>
<service-modal :show="show" @close="show = false"></service-modal>
</c-tabbar>
</template>
<script>
import CTabbar from '@/components/gTabbar.vue'
import CLoading from '@/components/gLoading.vue'
import serviceModal from '@/components/modal/serviceModal.vue'
import {
getBannerList,
getProjectList,
getMessageList
} from '@/api/index.js'
import {
mapState,
mapActions
} from 'vuex'
export default {
components: {
CTabbar,
CLoading,
serviceModal
},
computed: {
...mapState(['userInfo', 'token'])
},
data() {
return {
loading: true,
notice: '',
list3: [],
project: [],
show: false
}
},
onLoad() {
uni.hideTabBar()
this.getContent()
},
methods: {
...mapActions(['getUserInfo']),
async getContent() {
const res = await getBannerList({})
this.list3 = res.data
const res1 = await getProjectList({})
this.project = res1.data
const res2 = await getMessageList({type: '02'})
const strArr = res2.data.map(item => {
return item.title
})
this.notice = strArr.join(';')
this.loading = false
},
goDetail(item) {
uni.setStorageSync('detailContent',item.detailContent)
const newItem = {...item, detailContent: ''}
this.navigateTo(`/pages/home/mini/info/info?item=${JSON.stringify(newItem)}`)
},
clickSwiper(index) {
this.navigateTo(`/pages/home/mini/viewImg/viewImg?url=${this.list3[index].detailUrl}`)
}
}
}
</script>
<style lang="scss">
.container {
background: #f7f8fa;
padding: 30upx;
}
.operations {
background-color: #fff;
border-radius: 10upx;
padding: 20upx;
margin-top: 20upx;
.b1 {
background-color: #fffaf0;
}
.b2 {
background-color: #f5f8ff;
}
.b3 {
background-color: #f3fafa;
}
.item {
display: flex;
flex-direction: column;
flex: 1;
padding: 15upx 20upx;
margin: 0 10upx;
border-radius: 10upx;
.t1 {
font-size: 30upx;
color: #44413b;
font-weight: bold;
}
.t2 {
font-size: 24upx;
color: #bbc3c3;
}
}
}
.title {
padding: 20upx 0;
font-size: 35upx;
color: #44413b;
font-weight: bold;
}
</style>