浅念
474 lines
11 KiB
Vue
474 lines
11 KiB
Vue
<template>
|
|
<view class="page">
|
|
<z-paging ref="paging" :auto="false" v-model="list" @query="queryList" empty-view-text="暂无数据！">
|
|
<!-- 顶部背景 -->
|
|
<uni-nav-bar leftText=" " :fixed="true" :border="false" color="#000000" backgroundColor="#3BC8BE" :statusBar="true" title="西门子样机福利平台"></uni-nav-bar>
|
|
<view class="header">
|
|
<swiper class="banner-swiper" circular autoplay :interval="4000" indicator-dots indicator-color="rgba(255,255,255,.4)"
|
|
indicator-active-color="#3F435B">
|
|
<swiper-item v-for="(banner,index) in bannerList" :key="index">
|
|
<image class="banner-img" :src="banner.image_url_pull" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="homemap">
|
|
<image
|
|
class="homemap-img"
|
|
:src="homemapurl"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
<!-- 弹幕组件 -->
|
|
<danmu :list="danmuList" :row="6" :visible="danmuVisible"></danmu>
|
|
|
|
<!-- 右侧按钮 -->
|
|
<view class="right-btns">
|
|
<view class="circle-btn" :class="{ active: danmuVisible }" @click="toggleDanmu">
|
|
<image v-if="danmuVisible" src="/static/image/dan1.png" mode=""></image>
|
|
<image v-else src="/static/image/danm.png" mode=""></image>
|
|
</view>
|
|
<button open-type="share" class="circle-btn">
|
|
<image src="/static/image/shares.png" class="share" mode=""></image>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主体内容 -->
|
|
|
|
<view class="main-box">
|
|
<view class="titles">
|
|
样机广场
|
|
</view>
|
|
<view class="tabs">
|
|
<view :class="['tab',activeTab==0?'on':'']" @tap="tabclick(0)">
|
|
<text>最新发布</text>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view :class="['tab',activeTab==1?'on':'']" @tap="tabclick(1)">
|
|
<text>距离最近</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户卡片 -->
|
|
<view class="card">
|
|
<post-card
|
|
v-for="sitem in list"
|
|
:key="sitem.id || sitem.username"
|
|
:item="sitem"
|
|
@userClick="goto"
|
|
@view="goto"
|
|
@contact="handleContact"
|
|
@comment="handleComment">
|
|
</post-card>
|
|
</view>
|
|
|
|
</view>
|
|
</z-paging>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import danmu from '@/components/danmu/danmu.vue';
|
|
import PostCard from '@/components/PostCard.vue'
|
|
import { request,showToast } from '@/api/apiT.js'
|
|
export default {
|
|
components: { danmu, PostCard },
|
|
data() {
|
|
return {
|
|
activeTab: 0,
|
|
danmuVisible:true,
|
|
content:'',
|
|
list:[],
|
|
danmuList: [],
|
|
bannerList:[],
|
|
latitude:'',
|
|
longitude:'',
|
|
bannerurl:'',
|
|
banner:uni.getStorageSync('banner'),
|
|
homemapurl:''
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 数据加载逻辑
|
|
if (!uni.getStorageSync('token')) {
|
|
this.mini_login().then(() => {
|
|
this.bannerListfn()
|
|
this.configListfn()
|
|
this.barragelist()
|
|
this.$refs.paging && this.$refs.paging.reload()
|
|
})
|
|
}else{
|
|
this.bannerListfn()
|
|
this.configListfn()
|
|
this.barragelist()
|
|
this.$refs.paging && this.$refs.paging.reload()
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getFuzzy().then(res => {
|
|
this.latitude = res.latitude
|
|
this.longitude = res.longitude
|
|
console.log(res);
|
|
}).catch(err => console.error(err));
|
|
},
|
|
onTabItemTap() {
|
|
this.reloadPage()
|
|
},
|
|
methods: {
|
|
configListfn(){
|
|
request({
|
|
url:'common/config/find',
|
|
method:'get',
|
|
data:{
|
|
code:'home_map'
|
|
}
|
|
}).then(res => {
|
|
const homemapurl = res.data.data.value_pull
|
|
const EXPIRE_TIME = 2 * 60 * 60 * 1000
|
|
const cache = uni.getStorageSync('homemapurl')
|
|
let useCache = false
|
|
// 1️⃣ 缓存存在 + 未过期 + url 相同 → 用缓存
|
|
if (
|
|
cache &&
|
|
cache.time &&
|
|
Date.now() - cache.time < EXPIRE_TIME &&
|
|
cache.data === homemapurl
|
|
) {
|
|
useCache = true
|
|
this.homemapurl = uni.getStorageSync('homemapurl')
|
|
}
|
|
// 2️⃣ 否则更新缓存
|
|
if (!useCache) {
|
|
uni.setStorageSync('banner', {
|
|
data: homemapurl,
|
|
time: Date.now()
|
|
})
|
|
uni.setStorageSync('homemapurl', homemapurl)
|
|
this.homemapurl = homemapurl
|
|
}
|
|
})
|
|
},
|
|
bannerListfn(){
|
|
request({
|
|
url:'common/banner/list',
|
|
method:'get',
|
|
data:{
|
|
module:'home_module'
|
|
}
|
|
}).then(res => {
|
|
const bannerList = res.data.data || []
|
|
this.bannerList = bannerList
|
|
// if (!bannerList.length) return
|
|
// const banner = bannerList[0]
|
|
// const EXPIRE_TIME = 2 * 60 * 60 * 1000
|
|
// const cache = uni.getStorageSync('banner')
|
|
// let useCache = false
|
|
// // 1️⃣ 缓存存在 + 未过期 + url 相同 → 用缓存
|
|
// if (
|
|
// cache &&
|
|
// cache.time &&
|
|
// Date.now() - cache.time < EXPIRE_TIME &&
|
|
// cache.data === banner.image_url
|
|
// ) {
|
|
// useCache = true
|
|
// this.bannerurl = uni.getStorageSync('bannerurl')
|
|
// }
|
|
// // 2️⃣ 否则更新缓存
|
|
// if (!useCache) {
|
|
// uni.setStorageSync('banner', {
|
|
// data: banner.image_url,
|
|
// time: Date.now()
|
|
// })
|
|
// uni.setStorageSync('bannerurl', banner.image_url_pull)
|
|
// this.bannerurl = banner.image_url_pull
|
|
// }
|
|
})
|
|
},
|
|
reloadPage() {
|
|
this.$refs.paging.reload()
|
|
},
|
|
getFuzzy() {
|
|
return new Promise((resolve, reject) => {
|
|
wx.getSetting({
|
|
success: (st) => {
|
|
const ok = st.authSetting['scope.userFuzzyLocation'];
|
|
const run = () => wx.getFuzzyLocation({
|
|
type: 'wgs84',
|
|
success: resolve,
|
|
fail: reject
|
|
});
|
|
|
|
if (ok) return run();
|
|
|
|
wx.authorize({
|
|
scope: 'scope.userFuzzyLocation',
|
|
success: run,
|
|
fail: () => wx.openSetting({ success: () => reject(new Error('未授权')) })
|
|
});
|
|
},
|
|
fail: reject
|
|
});
|
|
});
|
|
},
|
|
tabclick(item){
|
|
const that = this
|
|
if((this.longitude==''||this.latitude=='')&&item==1){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请先授权地理位！',
|
|
content: '请在设置中开启模糊定位权限',
|
|
confirmText: '去设置',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
wx.openSetting({
|
|
success: (setRes) => {
|
|
if (setRes.authSetting['scope.userFuzzyLocation']) {
|
|
that.getFuzzy().then(res => {
|
|
that.latitude = res.latitude
|
|
that.longitude = res.longitude
|
|
console.log(res);
|
|
}).catch(err => console.error(err));
|
|
} else {
|
|
reject(new Error('未开启模糊定位权限'));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
})
|
|
return false
|
|
}
|
|
this.activeTab = item;
|
|
this.$refs.paging && this.$refs.paging.reload()
|
|
},
|
|
//获取弹幕
|
|
barragelist(){
|
|
request({
|
|
url: 'common/barrage/all',
|
|
method: 'GET',
|
|
}).then(res => {
|
|
if (res.data.code === 200) {
|
|
this.danmuList = res.data.data
|
|
}
|
|
})
|
|
},
|
|
toggleDanmu() {
|
|
this.danmuVisible = !this.danmuVisible;
|
|
},
|
|
goto(item){
|
|
uni.navigateTo({
|
|
url: '/pages/square/detiles?id='+item.id
|
|
});
|
|
},
|
|
handleContact(item) {
|
|
const phone = item.user.mobile
|
|
if (!phone) return uni.showToast({ title: '号码为空', icon: 'none' });
|
|
// 简单清洗：去空格/横杠
|
|
const num = String(phone).replace(/[^\d+]/g, '');
|
|
uni.makePhoneCall({ phoneNumber: num });
|
|
},
|
|
handleComment(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/square/detiles?id=' + (item?.id || 1)
|
|
});
|
|
},
|
|
queryList(pageNo, pageSize, from) {
|
|
this.loading = true;
|
|
var that = this;
|
|
const params = {
|
|
current:pageNo,
|
|
status:1,
|
|
size:10
|
|
};
|
|
const collectUrl = this.activeTab==0 ? 'common/post/list' : 'common/post/nearby'
|
|
// 添加排序参数（如果后端支持）
|
|
if(this.activeTab==1){
|
|
params.lng = this.longitude;
|
|
params.lat = this.latitude;
|
|
} else {
|
|
}
|
|
request({
|
|
url:collectUrl,
|
|
method:'get',
|
|
data: params
|
|
}).then(res => {
|
|
if(res.data.code ==200){
|
|
var datas = res.data.data.records;
|
|
this.$refs.paging.complete(datas);
|
|
}else{
|
|
}
|
|
uni.stopPullDownRefresh();
|
|
//
|
|
})
|
|
},
|
|
mini_login() {
|
|
return new Promise((resolve, reject) => {
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: loginRes => {
|
|
|
|
// 一定要 return，不然 Promise 不会等待
|
|
return request({
|
|
url:'miniapp/login',
|
|
method:'POST',
|
|
data:{ code: loginRes.code }
|
|
}).then(res => {
|
|
if (res.data.code === 200) {
|
|
|
|
uni.setStorageSync('openid', res.data.data.openid);
|
|
uni.setStorageSync('token', res.data.data.token);
|
|
|
|
if (res.data.data.mobile) {
|
|
uni.setStorageSync('is_login', true);
|
|
} else {
|
|
uni.setStorageSync('is_login', false);
|
|
}
|
|
|
|
resolve(true); // 👍 一定在 Promise 中
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
});
|
|
reject(res);
|
|
}
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: '获取 code 失败',
|
|
icon: 'none'
|
|
});
|
|
reject(err); // 👍 必须 reject
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
// 分享给好友
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '西门子样机福利平台',
|
|
path: '/pages/index/index?from=share',
|
|
imageUrl: this.bannerList[0].image_url_pull // 封面图
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
}
|
|
.banner-swiper{
|
|
width: 100%;
|
|
height: 430rpx;
|
|
}
|
|
.banner-img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.homemap {
|
|
width: 100%;
|
|
}
|
|
|
|
.homemap-img {
|
|
width: 100%;
|
|
display: block; /* 防止底部留白 */
|
|
}
|
|
|
|
.right-btns {
|
|
position: absolute;
|
|
right: 40rpx;
|
|
top: 420rpx;
|
|
|
|
.circle-btn {
|
|
margin-top: 20rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
padding: 4rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
image{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
.share{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
/* 激活状态（弹幕开启） */
|
|
.circle-btn.active {
|
|
background: #00c28a;
|
|
color: #fff;
|
|
}
|
|
.main-box {
|
|
margin: 20rpx 30rpx;
|
|
// margin-top: -60rpx;
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: 30rpx;
|
|
.titles{
|
|
font-size: 34rpx;
|
|
text-align: center;
|
|
color: #000;
|
|
font-weight: bold;
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
gap: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.tab {
|
|
position: relative;
|
|
padding: 12rpx 24rpx;
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
}
|
|
.tab::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -10rpx;
|
|
width: 60rpx;
|
|
height: 4rpx;
|
|
background: #3BC6BD;
|
|
border-radius: 4rpx;
|
|
transform: translateX(-50%);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.tab.on {
|
|
color: #3BC6BD;
|
|
font-weight: 600;
|
|
}
|
|
.tab.on::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.divider {
|
|
width: 1px;
|
|
height: 24rpx;
|
|
background: #dcdcdc;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
padding: 10rpx;
|
|
}
|
|
</style>
|