创建小程序
This commit is contained in:
浅念
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<view class="home-page">
|
||||
<z-paging ref="paging" :auto="false" v-model="contList" @query="queryList" empty-view-text="暂无数据！">
|
||||
<!-- <template #top> -->
|
||||
<!-- 轮播Banner -->
|
||||
<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>
|
||||
<!-- <view class="banner-desc">
|
||||
<text class="slogan-text">{{banner.slogan}}</text>
|
||||
</view> -->
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- </template> -->
|
||||
<!-- 内容网格 -->
|
||||
<view class="content-grid">
|
||||
<square-post-card
|
||||
class="grid-item"
|
||||
v-for="sitem in contList"
|
||||
:key="sitem.id"
|
||||
:item="sitem"
|
||||
:isshow="false"
|
||||
@view="navToList"
|
||||
@comment="viewPost"
|
||||
@like="viewPost" />
|
||||
</view>
|
||||
</z-paging>
|
||||
|
||||
<u-popup :show="show" :closeOnClickOverlay="false" :round="20" mode="center">
|
||||
<view class="popupcontent">
|
||||
<image class="log1" src="/static/image/log1.png"></image>
|
||||
<view class="title">{{$t('home.loginmsg')}}</view>
|
||||
<view class="yhxy">
|
||||
<checkbox-group name="" style="width: 28px;display: inline-block;">
|
||||
<label @tap="selfChangde()">
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B"
|
||||
style="transform:scale(0.7);border-radius: 50%" />
|
||||
</label>
|
||||
</checkbox-group>
|
||||
{{$t('home.argin')}}<text class="xy" @click="gouser">{{$t('home.UserAgreement')}}</text>{{$t('home.and')}}<text
|
||||
class="xy" @click="goprivacy">{{$t('home.Privacy')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cent">
|
||||
<button class="btn1" @click="show = !show">{{$t('cancel')}}</button>
|
||||
<button v-if="selfChecked" class="btn" open-type="getPhoneNumber" @click="show = !show"
|
||||
@getphonenumber="getPhoneNumber">{{$t('login')}}</button>
|
||||
<button v-else class="btn" @click="loginbtn">{{$t('login')}}</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-picker :immediateChange="true" :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" @close="close('showlang')"
|
||||
:show="showlang" :columns="columns" @cancel="cancellang" @confirm="confirmlang" :title="$t('home.langbtn')" keyName="label"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
import SquarePostCard from '@/components/SquarePostCard.vue'
|
||||
export default {
|
||||
components: {
|
||||
SquarePostCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
selfChecked: false,
|
||||
home: this.$t('tabbar.home'),
|
||||
is_login:uni.getStorageSync('is_login'),
|
||||
show: false,
|
||||
showlang: false,
|
||||
searchKeyword: '',
|
||||
bannerList: [],
|
||||
contList: [],
|
||||
columns: [
|
||||
[{
|
||||
label: this.$t('zh'),
|
||||
id: 'zh'
|
||||
}, {
|
||||
label: this.$t('en'),
|
||||
id: 'en'
|
||||
},{
|
||||
label: this.$t('ru'),
|
||||
id: 'ru'
|
||||
}]
|
||||
],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// if(uni.getStorageSync('token')){
|
||||
// // this.$refs.paging && this.$refs.paging.reload()
|
||||
// }else{
|
||||
// this.mini_login()
|
||||
// }
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.mini_login().then(() => {
|
||||
this.bannerListfn()
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.setTabBarItem({
|
||||
index: 0,
|
||||
text: this.$t('tabbar.home')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index:1,
|
||||
text: this.$t('tabbar.square')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
text: this.$t('tabbar.publish')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 3,
|
||||
text: this.$t('tabbar.mine')
|
||||
})
|
||||
if(uni.getStorageSync('token')){
|
||||
this.bannerListfn()
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initPage(){
|
||||
await this.mini_login()
|
||||
await this.bannerListfn()
|
||||
},
|
||||
bannerListfn(){
|
||||
request({
|
||||
url:'common/banner/list',
|
||||
method:'get',
|
||||
data:{
|
||||
module:'home_module'
|
||||
}
|
||||
}).then(res => {
|
||||
this.bannerList = res.data.data
|
||||
})
|
||||
},
|
||||
// 点击商品项
|
||||
navToList(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id='+item.id
|
||||
});
|
||||
},
|
||||
viewPost(item){
|
||||
if(uni.getStorageSync('is_login')){
|
||||
}else{
|
||||
this.show = true
|
||||
}
|
||||
},
|
||||
cancellang() {
|
||||
this.showlang = false
|
||||
},
|
||||
close(value){
|
||||
this[value] = false
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
this.loading = true;
|
||||
var that = this;
|
||||
request({
|
||||
url:'common/post/list',
|
||||
method:'get',
|
||||
data: {
|
||||
current:pageNo,
|
||||
size:10
|
||||
}
|
||||
}).then(res => {
|
||||
if(res.data.code ==200){
|
||||
var datas = res.data.data.records;
|
||||
this.$refs.paging.complete(datas);
|
||||
}else{
|
||||
// this.$refs.paging.complete(null);
|
||||
// that.listlength=0
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
//
|
||||
})
|
||||
},
|
||||
//语言切换事件
|
||||
confirmlang(e) {
|
||||
var that = this
|
||||
this.$i18n.locale = e.value[0].id
|
||||
uni.setLocale(e.value[0].id)
|
||||
uni.setStorageSync('i18locale', e.value[0].id);
|
||||
this.columns =[
|
||||
[{
|
||||
label: this.$t('zh'),
|
||||
id: 'zh'
|
||||
}, {
|
||||
label: this.$t('en'),
|
||||
id: 'en'
|
||||
},{
|
||||
label: this.$t('ru'),
|
||||
id: 'ru'
|
||||
}]
|
||||
];
|
||||
uni.setTabBarItem({
|
||||
index: 0,
|
||||
text: this.$t('tabbar.square')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 1,
|
||||
text: this.$t('tabbar.publish')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
text: this.$t('tabbar.mine')
|
||||
})
|
||||
this.showlang = false
|
||||
var languages = e.value[0].id
|
||||
if(e.value[0].id=='zh'){
|
||||
languages= 'zh_CN'
|
||||
}
|
||||
request({
|
||||
url:'user/update',
|
||||
method:'POST',
|
||||
data:{
|
||||
language:languages
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
},
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
addCar(){
|
||||
if(uni.getStorageSync('is_login')){
|
||||
uni.removeStorageSync('draftid')
|
||||
uni.removeStorageSync('carinfo')
|
||||
uni.navigateTo({
|
||||
url: '/pages/carinfo/index'
|
||||
});
|
||||
}else{
|
||||
this.show = true
|
||||
}
|
||||
},
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
loginbtn(){
|
||||
if(!this.selfChecked){
|
||||
uni.showToast({
|
||||
title:this.$t('home.arginimg'),
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: e.detail.code,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 200) {
|
||||
//返回数据接收成功
|
||||
uni.setStorageSync('is_login', true);
|
||||
}
|
||||
})
|
||||
},
|
||||
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
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-page{
|
||||
min-height: 100vh;
|
||||
background: #F5F6FA;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
.brand-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background: #F5F6FA;
|
||||
}
|
||||
.brand-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-text{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.sun-icon{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #FFB800;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.brand-right{
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #3F435B;
|
||||
}
|
||||
.banner-swiper{
|
||||
width: 100%;
|
||||
height: 430rpx;
|
||||
}
|
||||
.banner-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.banner-desc{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
bottom: 60rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
.slogan-text{
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
color: #51B6FF;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
|
||||
}
|
||||
.content-grid{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.grid-item{
|
||||
width: 48%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.grid-image{
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
background: #E5E5E5;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.grid-footer{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-avatar{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.grid-info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 87%;
|
||||
}
|
||||
.grid-tag{
|
||||
font-size: 24rpx;
|
||||
color: #3F435B;
|
||||
margin-bottom: 4rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 95%;
|
||||
}
|
||||
.grid-name{
|
||||
font-size: 22rpx;
|
||||
color: #8A8D97;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 88%;
|
||||
}
|
||||
.popupcontent{
|
||||
background-size: 100% 100%;
|
||||
padding: 26px 15px;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
.title{
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.log1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.yhxy{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
.xy{
|
||||
color: #297EFF;
|
||||
}
|
||||
}
|
||||
.cent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0px 10px 20px;
|
||||
.btn1{
|
||||
background-color: #fff;
|
||||
border: 1px solid #206ff4;
|
||||
color: #206ff4;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.btn{
|
||||
background-color: #206ff4;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<image class="headimg" src="/static/image/minebg.png" mode=""></image>
|
||||
<view class="content">
|
||||
<view class="contop">
|
||||
<view class="">
|
||||
<!-- <image class="userimg" :src="userinfo.avatar_pull" mode="" @tap="getUserProfile"></image> -->
|
||||
<image class="userimg" :src="userinfo.avatar_pull" mode="" @click="changinfo"></image>
|
||||
<!-- <image class="userimg" src="/static/image/mine/user.png" mode=""></image> -->
|
||||
</view>
|
||||
<view class="right" @click="changinfo">
|
||||
{{userinfo.nickname}}
|
||||
|
||||
</view>
|
||||
<image class="lineimg" src="/static/image/mine/line.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bottomCon">
|
||||
<view class="sonContent" @click="navTo('/pages/mine/my_favorites')">
|
||||
<!-- <image class="son-img-bg" src="/static/image/mine/icon1.png"></image> -->
|
||||
<span>我的发布</span>
|
||||
<uni-icons type="right" size="18"></uni-icons>
|
||||
</view>
|
||||
<view class="sonContent" @click="navTo('/pages/mine/my_release')">
|
||||
<!-- <image class="son-img-bg" src="/static/image/mine/icon2.png"></image> -->
|
||||
<span>我的收藏</span>
|
||||
<uni-icons type="right" size="18"></uni-icons>
|
||||
</view>
|
||||
<view class="sonContent" @click="navTo('/pages/mine/my_newmsg')">
|
||||
<!-- <image class="son-img-bg" src="/static/image/mine/icon3.png"></image> -->
|
||||
<span>最新消息</span>
|
||||
<uni-icons type="right" size="18"></uni-icons>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="foots">
|
||||
<view class="btns" @click="goout()">退出登录</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-popup :show="show" :closeOnClickOverlay="false" :round="20" mode="center">
|
||||
<view class="popupcontent">
|
||||
<image class="log1" src="/static/image/log1.png"></image>
|
||||
<view class="title">{{$t('home.loginmsg')}}</view>
|
||||
<view class="yhxy">
|
||||
<checkbox-group name="" style="width: 28px;display: inline-block;">
|
||||
<label @tap="selfChangde()">
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B" style="transform:scale(0.7);border-radius: 50%"/>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
{{$t('home.argin')}}<text class="xy" @click="gouser">{{$t('home.UserAgreement')}}</text>{{$t('home.and')}}<text class="xy" @click="goprivacy">{{$t('home.Privacy')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cent">
|
||||
<button class="btn1" @click="show = !show">{{$t('cancel')}}</button>
|
||||
<button v-if="selfChecked" class="btn" open-type="getPhoneNumber" @click="show = !show" @getphonenumber="getPhoneNumber">{{$t('login')}}</button>
|
||||
<button v-else class="btn" @click="loginbtn">{{$t('login')}}</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo:'',
|
||||
selfChecked: false,
|
||||
is_login:uni.getStorageSync('is_login'),
|
||||
show: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
onShow() {
|
||||
uni.setTabBarItem({ index:0, text:this.$t('tabbar.home') })
|
||||
uni.setTabBarItem({ index:1, text:this.$t('tabbar.square') })
|
||||
uni.setTabBarItem({ index:2, text:this.$t('tabbar.publish') })
|
||||
uni.setTabBarItem({ index:3, text:this.$t('tabbar.mine') })
|
||||
this.getinfo()
|
||||
uni.removeStorageSync('carlistinfo')
|
||||
uni.removeStorageSync('newcarinfo')
|
||||
uni.removeStorageSync('edtcarinfo')
|
||||
},
|
||||
methods: {
|
||||
getUserProfile() {
|
||||
uni.getUserProfile({
|
||||
desc: '用于完善资料',
|
||||
success: res => {
|
||||
this.bcFn(res.userInfo)
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '用户拒绝授权',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
bcFn(userInfo){
|
||||
request({
|
||||
url:'common/user/update',
|
||||
method:'POST',
|
||||
data:{
|
||||
nickname:userInfo.nickName,
|
||||
avatar:userInfo.avatarUrl
|
||||
}
|
||||
}).then(res => {
|
||||
this.getinfo()
|
||||
})
|
||||
},
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
getinfo(){
|
||||
request({
|
||||
url:'common/user/info',
|
||||
method:'POST',
|
||||
}).then(res => {
|
||||
this.userinfo=res.data.data.user
|
||||
})
|
||||
},
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
loginbtn(){
|
||||
if(!this.selfChecked){
|
||||
uni.showToast({
|
||||
title:this.$t('home.arginimg'),
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: e.detail.code,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 200) {
|
||||
//返回数据接收成功
|
||||
uni.showToast({
|
||||
title:this.$t('messagesucc'),
|
||||
icon: 'none'
|
||||
});
|
||||
uni.setStorageSync('is_login', true);
|
||||
setTimeout(function () {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/mine',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
changinfo(){
|
||||
if(uni.getStorageSync('is_login')){
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/changinfo'
|
||||
});
|
||||
}else{
|
||||
this.show = true
|
||||
}
|
||||
|
||||
},
|
||||
navTo(url) {
|
||||
if(uni.getStorageSync('is_login')){
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
}else{
|
||||
this.show = true
|
||||
}
|
||||
},
|
||||
goout(){
|
||||
uni.clearStorageSync();
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.headimg{
|
||||
width: 100%;
|
||||
height: 276rpx;
|
||||
}
|
||||
.content{
|
||||
padding: 12px;
|
||||
margin-top: -180rpx;
|
||||
.contop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
font-size: 34rpx;
|
||||
color: white;
|
||||
.right{
|
||||
margin-left: 15px;
|
||||
max-width: 50%;
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.conbot{
|
||||
position: relative;
|
||||
color: #F4C493;
|
||||
font-size: 32rpx;
|
||||
.logimg{
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 57rpx;
|
||||
image{
|
||||
width: 100rpx;
|
||||
height:100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.company{
|
||||
position: absolute;
|
||||
top: 24%;
|
||||
left: 300rpx;
|
||||
}
|
||||
.tel{
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
left: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.foots{
|
||||
margin-top: 100rpx;
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
.btns{
|
||||
background: #ccc;
|
||||
text-align: center;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 20px;
|
||||
margin: 0px 12px;
|
||||
}
|
||||
.slot-image {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.userimg{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.lineimg{
|
||||
width: 30px;
|
||||
height:22px;
|
||||
}
|
||||
.timg{
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
}
|
||||
.bottomCon {
|
||||
margin-top: 40rpx;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
// padding: 0 24rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
// border-radius: 22rpx;
|
||||
// background: #FFFFFF;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
|
||||
.sonTitle {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 36rpx;
|
||||
border-bottom: 2rpx solid #F3F3F3;
|
||||
}
|
||||
.sonContent {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
padding: 32rpx 28rpx;
|
||||
color: #000;
|
||||
margin-bottom: 10px;
|
||||
.son-img-bg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -20rpx;
|
||||
left: 12;
|
||||
}
|
||||
span {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popupcontent{
|
||||
// background: url(/static/image/log0.png);
|
||||
background-size: 100% 100%;
|
||||
padding: 26px 15px;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
.title{
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.log1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.yhxy{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
.xy{
|
||||
color: #297EFF;
|
||||
}
|
||||
}
|
||||
.qxbtn{
|
||||
width: 99%;
|
||||
}
|
||||
.cent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0px 10px 20px;
|
||||
.btn1{
|
||||
background-color: #fff;
|
||||
border: 1px solid #3F435B;
|
||||
color: #3F435B;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.btn{
|
||||
background-color: #3F435B;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000"
|
||||
backgroundColor="#fff" :statusBar="true" title="隐私政策"></uni-nav-bar>
|
||||
<view class="contents">
|
||||
<view class="title">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="" v-html="content">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request,
|
||||
showToast
|
||||
} from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
title: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getcont()
|
||||
},
|
||||
methods: {
|
||||
leftClick() {
|
||||
uni.navigateBack({})
|
||||
},
|
||||
getcont() {
|
||||
request({
|
||||
url:'common/agreement?type=privacy_policy',
|
||||
method:'GET'
|
||||
}).then(res => {
|
||||
console.log(res.data.data)
|
||||
if (res.data.code == 200) {
|
||||
this.content = res.data.data.content
|
||||
this.title = res.data.data.title
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.contents {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="用户服务协议"></uni-nav-bar>
|
||||
<view class="contents" >
|
||||
<view class="title">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="" v-html="content">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content:'',
|
||||
title:''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getcont()
|
||||
},
|
||||
methods: {
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
getcont(){
|
||||
request({
|
||||
url:'common/agreement?type=user_agreement',
|
||||
method:'GET'
|
||||
}).then(res => {
|
||||
console.log(res.data.data)
|
||||
if (res.data.code == 200) {
|
||||
this.content = res.data.data.content
|
||||
this.title = res.data.data.title
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.contents{
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/image/bg.jpg"></image>
|
||||
|
||||
<view class="contop">
|
||||
<text class="text">2025 USED CAR</text>
|
||||
<text class="cont">
|
||||
河南合塑实业有限公司
|
||||
</text>
|
||||
</view>
|
||||
<view class="foot">
|
||||
<!-- <button v-if="is_login" class="btn" @click="mini_login">一键登录</button>
|
||||
<button v-else="is_login" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
|
||||
<view class="check">
|
||||
<checkbox-group name="" style="width: 28px;">
|
||||
<label>
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B" style="transform:scale(0.7);border-radius: 50%"/>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
我同意并遵守<text class="argeen" @click="gouser">《用户服务协议》</text>以及<text class="argeen" @click="goprivacy">《隐私政策》</text>
|
||||
</view> -->
|
||||
<view class="login-form-content">
|
||||
<uni-forms ref="loginForm" :modelValue="loginForm" :border="true" validateTrigger="submit"
|
||||
err-show-type="toast">
|
||||
<uni-forms-item name="username">
|
||||
<view style="margin-top: 20rpx;">
|
||||
<u-input v-model="loginForm.username" type="text" placeholder="请输入手机号" border="none" maxlength="11"
|
||||
:styles="{ backgroundColor: 'transparent' }" clearable>
|
||||
<template slot="prefix">
|
||||
<uni-icons type="person" size="20"></uni-icons>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="password">
|
||||
<view style="margin-top: 20rpx;">
|
||||
<u-input type="text" password v-model="loginForm.password" placeholder="请输入密码" border="none"
|
||||
maxlength="16" :styles="{ backgroundColor: 'transparent' }" clearable>
|
||||
<template slot="prefix">
|
||||
<uni-icons type="locked" size="20"></uni-icons>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item>
|
||||
<view class="register_forget_wrap">
|
||||
<view class="" @click="handleClickForgetPwd">
|
||||
<text>忘记密码？</text>
|
||||
</view>
|
||||
<view class="" @click="handleClickRegister">
|
||||
<text>立即注册</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="action-btn">
|
||||
<button class="btn" @click="mini_login">登录</button>
|
||||
</view>
|
||||
<view class="check">
|
||||
<checkbox-group name="" style="width: 28px;">
|
||||
<label>
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B" style="transform:scale(0.6);border-radius: 50%"/>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
同意<text class="argeen" @click="gouser">《用户服务协议》</text>以及<text class="argeen" @click="goprivacy">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selfChecked: false,
|
||||
is_login:false,
|
||||
loginForm: {
|
||||
isChecked: false,
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
rules: {
|
||||
isChecked: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请阅读并勾选《用户服务协议》《隐私政策》',
|
||||
}, {
|
||||
validateFunction: (rule, value, data, callback) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (value) {
|
||||
resolve()
|
||||
} else {
|
||||
reject(new Error('请阅读并勾选《用户服务协议》《隐私政策》'))
|
||||
}
|
||||
})
|
||||
}
|
||||
}]
|
||||
},
|
||||
username: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入手机号',
|
||||
}, {
|
||||
validateFunction: (rule, value, data, callback) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (uni.$u.test.mobile(value)) {
|
||||
resolve()
|
||||
} else {
|
||||
reject(new Error('请输入正确的手机号'))
|
||||
}
|
||||
})
|
||||
}
|
||||
}]
|
||||
},
|
||||
password: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入密码',
|
||||
},{
|
||||
validateFunction: (rule, value, data, callback) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (value.length >= 8 && value.length <= 16) {
|
||||
resolve()
|
||||
} else {
|
||||
reject(new Error('密码是由8-16位数字、字母或字符组合请重新输入'))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isCheckedLoginBtn() {
|
||||
console.log(this.loginForm.username && this.loginForm.password)
|
||||
return this.loginForm.username && this.loginForm.password
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// this.Props.statusBarHeight = getApp().globalData.statusBarHeight
|
||||
// console.log(this.Props.statusBarHeight)
|
||||
// this.Props.capsuleTop = getApp().globalData.capsuleTop
|
||||
// this.getbg()
|
||||
},
|
||||
onShow() {
|
||||
// #ifdef MP-WEIXIN
|
||||
//小程序登录检测
|
||||
// this.mini_login()
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.is_login = true
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 点击忘记密码
|
||||
handleClickForgetPwd() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/forgetPwd'
|
||||
})
|
||||
},
|
||||
// 点击注册
|
||||
handleClickRegister() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/register'
|
||||
})
|
||||
},
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
console.log(e.detail.code) // 动态令牌
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
// url:'customerLogin',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: e.detail.code,
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data.data)
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 0) {
|
||||
//返回数据接收成功
|
||||
this.mini_login();
|
||||
}
|
||||
})
|
||||
},
|
||||
mini_login() {
|
||||
let that = this;
|
||||
// if(!this.selfChecked){
|
||||
// uni.showToast({
|
||||
// title:'请先勾选同意用户服务协议以及隐私政策',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// return false
|
||||
// }
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
console.log(loginRes);
|
||||
that.code = loginRes.code;
|
||||
// 2. 将用户登录code传递到后台置换用户SessionKey、OpenId等信息
|
||||
request({
|
||||
url:'miniapp/login',
|
||||
method:'POST',
|
||||
data:{
|
||||
code: loginRes.code
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
uni.hideLoading()
|
||||
if (res.data.code == 0) {
|
||||
//存取session
|
||||
uni.setStorageSync('openid', res.data.data.openid);
|
||||
uni.setStorageSync('token', res.data.data.token);
|
||||
if(res.data.data.phone&&res.data.data.phone!=''&&res.data.data.phone!=null){
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
this.is_login = true;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '获取 code 失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
pd_login(openid) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: openid
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
// if (res.data.code == -1) {
|
||||
// //unionid在数据库没有记录 记录就可以不需要操作
|
||||
// console.log('unionid在数据库没有记录 记录就可以不需要操作')
|
||||
// } else if (res.data.code == 0) {
|
||||
// var userid = res.data.data;
|
||||
// this.is_login = true;
|
||||
// this.getCard(openid);
|
||||
// }
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
>>>.uni-forms-item{
|
||||
padding: 5px 0px !important;
|
||||
}
|
||||
>>>checkbox .wx-checkbox-input {
|
||||
border-radius: 50% !important;
|
||||
border: 2rpx solid #3F435B !important;
|
||||
}
|
||||
|
||||
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
border: 2rpx solid #3F435B !important;
|
||||
background-color:#3F435B !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
>>>uni-checkbox .uni-checkbox-input {
|
||||
margin-right: 0;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #3F435B;
|
||||
}
|
||||
>>>uni-checkbox .uni-checkbox-input:empty {
|
||||
border: 2rpx solid #3F435B;
|
||||
background-color: #5FFFFFF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
>>>uni-checkbox .uni-checkbox-input:not(:empty) {
|
||||
border: 2rpx solid #3F435B;
|
||||
background-color: #3F435B;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.argeen{
|
||||
color: #3F435B;
|
||||
}
|
||||
.content{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
}
|
||||
.logo{
|
||||
width: 100%;
|
||||
height: 830rpx;
|
||||
}
|
||||
.contop{
|
||||
position: absolute;
|
||||
top: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
.text{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(120deg, #B9773C 0%, #67450D 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
display: inline-block;
|
||||
}
|
||||
.cont{
|
||||
background-image: linear-gradient(#4C392B, #0A0604);
|
||||
padding: 4px 15px;
|
||||
color: #FFEBCC;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.foot{
|
||||
width: 88%;
|
||||
margin: 0px auto;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.foot label{
|
||||
color: #929292;
|
||||
}
|
||||
.check{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.btn{
|
||||
background-color: #3F435B;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
.radio{
|
||||
color: #929292;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
.login-form-content {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.register_forget_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #ff8f02;
|
||||
}
|
||||
|
||||
.login_btn {
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.action-btn{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/image/bg.jpg"></image>
|
||||
|
||||
<view class="contop">
|
||||
<text class="text">2025 USED CAR</text>
|
||||
<text class="cont">
|
||||
河南合塑实业有限公司
|
||||
</text>
|
||||
</view>
|
||||
<view class="foot">
|
||||
<button v-if="is_login" class="btn" @click="mini_login">一键登录</button>
|
||||
<button v-else="is_login" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
|
||||
<view class="check">
|
||||
<checkbox-group name="" style="width: 28px;">
|
||||
<label>
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B" style="transform:scale(0.7);border-radius: 50%"/>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
我同意并遵守<text class="argeen" @click="gouser">《用户服务协议》</text>以及<text class="argeen" @click="goprivacy">《隐私政策》</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selfChecked: false,
|
||||
is_login:false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// this.Props.statusBarHeight = getApp().globalData.statusBarHeight
|
||||
// console.log(this.Props.statusBarHeight)
|
||||
// this.Props.capsuleTop = getApp().globalData.capsuleTop
|
||||
// this.getbg()
|
||||
},
|
||||
onShow() {
|
||||
// #ifdef MP-WEIXIN
|
||||
//小程序登录检测
|
||||
this.mini_login()
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.is_login = true
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
console.log(e.detail.code) // 动态令牌
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
// url:'customerLogin',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: e.detail.code,
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data.data)
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 0) {
|
||||
//返回数据接收成功
|
||||
this.mini_login();
|
||||
}
|
||||
})
|
||||
},
|
||||
mini_login() {
|
||||
let that = this;
|
||||
// if(!this.selfChecked){
|
||||
// uni.showToast({
|
||||
// title:'请先勾选同意用户服务协议以及隐私政策',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// return false
|
||||
// }
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
console.log(loginRes);
|
||||
that.code = loginRes.code;
|
||||
// 2. 将用户登录code传递到后台置换用户SessionKey、OpenId等信息
|
||||
request({
|
||||
url:'miniapp/login',
|
||||
method:'POST',
|
||||
data:{
|
||||
code: loginRes.code
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
uni.hideLoading()
|
||||
if (res.data.code == 0) {
|
||||
//存取session
|
||||
uni.setStorageSync('openid', res.data.data.openid);
|
||||
uni.setStorageSync('token', res.data.data.token);
|
||||
if(res.data.data.phone&&res.data.data.phone!=''&&res.data.data.phone!=null){
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
this.is_login = true;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '获取 code 失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
pd_login(openid) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: openid
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
// if (res.data.code == -1) {
|
||||
// //unionid在数据库没有记录 记录就可以不需要操作
|
||||
// console.log('unionid在数据库没有记录 记录就可以不需要操作')
|
||||
// } else if (res.data.code == 0) {
|
||||
// var userid = res.data.data;
|
||||
// this.is_login = true;
|
||||
// this.getCard(openid);
|
||||
// }
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
>>>checkbox .wx-checkbox-input {
|
||||
border-radius: 50% !important;
|
||||
border: 2rpx solid #3F435B !important;
|
||||
}
|
||||
|
||||
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
border: 2rpx solid #3F435B !important;
|
||||
background-color:#3F435B !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
>>>uni-checkbox .uni-checkbox-input {
|
||||
margin-right: 0;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #3F435B;
|
||||
}
|
||||
>>>uni-checkbox .uni-checkbox-input:empty {
|
||||
border: 2rpx solid #3F435B;
|
||||
background-color: #5FFFFFF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
>>>uni-checkbox .uni-checkbox-input:not(:empty) {
|
||||
border: 2rpx solid #3F435B;
|
||||
background-color: #3F435B;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.argeen{
|
||||
color: #3F435B;
|
||||
}
|
||||
.content{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
}
|
||||
.logo{
|
||||
width: 100%;
|
||||
height: 830rpx;
|
||||
}
|
||||
.contop{
|
||||
position: absolute;
|
||||
top: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
.text{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(120deg, #B9773C 0%, #67450D 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
display: inline-block;
|
||||
}
|
||||
.cont{
|
||||
background-image: linear-gradient(#4C392B, #0A0604);
|
||||
padding: 4px 15px;
|
||||
color: #FFEBCC;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.foot{
|
||||
width: 88%;
|
||||
margin: 30px auto;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.foot label{
|
||||
color: #929292;
|
||||
}
|
||||
.check{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.btn{
|
||||
background-color: #3F435B;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.radio{
|
||||
color: #929292;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.changinfo')"></uni-nav-bar>
|
||||
<view class="content">
|
||||
<view class="cell">
|
||||
<view>{{$t('mine.avatar')}}</view>
|
||||
<view class="right">
|
||||
<uni-file-picker fileMediatype="image" limit="1" @select="select" @delete="delfn" :del-icon="false" disable-preview :imageStyles="imageStyles">
|
||||
<image :src="userinfo.avatar_pull==''?'/static/image/mine/user.png':userinfo.avatar_pull" mode="" class="addimg"></image>
|
||||
</uni-file-picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell1">
|
||||
<view>{{$t('mine.nickname')}}</view>
|
||||
<view class="right select">
|
||||
<input :placeholder="$t('mine.nickinput')" v-model="userinfo.nickname"></input>
|
||||
<uni-icons type="right" size="18"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foot">
|
||||
<button class="btn" @click="bcFn">{{$t('button.save')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageStyles: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
border: {
|
||||
radius: '50%'
|
||||
}
|
||||
},
|
||||
userinfo:{
|
||||
nickname:'',
|
||||
avatar:'',
|
||||
company:'',
|
||||
phone:'',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getinfo()
|
||||
},
|
||||
methods: {
|
||||
getinfo(){
|
||||
var that= this;
|
||||
request({
|
||||
url:'common/user/info',
|
||||
method:'POST',
|
||||
}).then(res => {
|
||||
this.userinfo=res.data.data.user
|
||||
})
|
||||
},
|
||||
uploadfn(imgUrl){
|
||||
var that = this;
|
||||
uni.uploadFile({
|
||||
url: 'https://bsh.info.hb.hnzhwlkj.cn/upload/image?scene=userinfo',
|
||||
filePath: imgUrl,
|
||||
name: 'image',
|
||||
header:{'content-type': 'application/x-www-form-urlencoded','Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'wechat','Fdesk-System-Code':'wechat'},
|
||||
success: (uploadFileRes) => {
|
||||
const path=JSON.parse(uploadFileRes.data)
|
||||
that.userinfo.avatar = path.data.href
|
||||
}
|
||||
});
|
||||
},
|
||||
delfn(){
|
||||
that.userinfo.avatar =''
|
||||
},
|
||||
select(e){
|
||||
const tempFilePaths = e.tempFilePaths;
|
||||
const imgUrl=tempFilePaths[0]
|
||||
this.uploadfn(imgUrl)
|
||||
},
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
bcFn(){
|
||||
request({
|
||||
url:'common/user/update',
|
||||
method:'POST',
|
||||
data:{
|
||||
nickname:this.userinfo.nickname,
|
||||
avatar:this.userinfo.avatar
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
if(res.data.code ==200){
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/mine',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uniui-right{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.content{
|
||||
margin: 20px 12px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.cell{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 10px 20px;
|
||||
/* border-bottom: 1px solid #C3C3C3; */
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.cell1{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.right{
|
||||
text-align: right;
|
||||
}
|
||||
.select{
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.foot{
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.btn{
|
||||
background: linear-gradient(180deg, #206ff4 0%, #42e0a2 100%);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 84%;
|
||||
margin-bottom: 40px;
|
||||
margin: 20px 8%;
|
||||
}
|
||||
.addimg{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="我的发布"></uni-nav-bar>
|
||||
|
||||
<view class="year-selector" @click="showYearPicker">
|
||||
<text class="year-text">{{selectedYear}}年</text>
|
||||
<uni-icons type="arrowdown" size="14" color="#666"></uni-icons>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-container"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
:lower-threshold="100"
|
||||
@scrolltolower="onLoadMore">
|
||||
<view class="post-list">
|
||||
<view v-for="(group, dateKey) in groupedPosts" :key="dateKey" class="date-group">
|
||||
<view class="date-item">
|
||||
<view class="date-label">
|
||||
<text class="date-day">{{group.day}}</text>
|
||||
<text class="date-month">{{group.month}}月</text>
|
||||
</view>
|
||||
<view class="posts-container">
|
||||
<view v-for="post in group.posts" :key="post.id" class="post-item" @click="viewPost(post)">
|
||||
<image class="post-image" :src="post.media && post.media[0] ? post.media[0].url_pull : '/static/image/placeholder.png'" mode="aspectFill"></image>
|
||||
<text class="post-tag">{{post.content || ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="hasMore && postList.length > 0" class="load-more">
|
||||
<text v-if="loadingMore">加载中...</text>
|
||||
<text v-else>上拉加载更多</text>
|
||||
</view>
|
||||
<view v-else-if="!hasMore && postList.length > 0" class="load-more">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
|
||||
<view v-if="postList.length === 0 && !loading && !loadingMore" class="empty-view">
|
||||
<text>暂无发布内容</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 年份选择器 -->
|
||||
<u-picker
|
||||
:show="showYearSelect"
|
||||
:columns="yearColumns"
|
||||
:defaultIndex="defaultYearIndex"
|
||||
keyName="label"
|
||||
@confirm="onYearConfirm"
|
||||
@cancel="showYearSelect = false"
|
||||
title="选择年份">
|
||||
</u-picker>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" class="loading-mask">
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
// 生成年份列表（当前年份前后5年）
|
||||
const currentYear = new Date().getFullYear();
|
||||
const years = [];
|
||||
for (let i = currentYear - 5; i <= currentYear + 5; i++) {
|
||||
years.push({ label: i.toString(), value: i });
|
||||
}
|
||||
|
||||
return {
|
||||
selectedYear: currentYear,
|
||||
showYearSelect: false,
|
||||
yearColumns: [years],
|
||||
postList: [],
|
||||
groupedPosts: {},
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
loadingMore: false, // 上拉加载状态
|
||||
page: 1, // 当前页码
|
||||
pageSize: 10, // 每页数量
|
||||
hasMore: true, // 是否还有更多数据
|
||||
total: 0, // 总数据量
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算当前年份在选择器中的默认索引
|
||||
defaultYearIndex() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const startYear = currentYear - 5;
|
||||
return [currentYear - startYear]; // 当前年份在数组中的索引
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadPostList();
|
||||
},
|
||||
methods: {
|
||||
leftClick() {
|
||||
// uni.navigateBack()
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/mine',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
showYearPicker() {
|
||||
this.showYearSelect = true;
|
||||
},
|
||||
onYearConfirm(e) {
|
||||
if (e.value && e.value[0]) {
|
||||
const selectedItem = typeof e.value[0] === 'object' ? e.value[0] : { value: e.value[0], label: e.value[0].toString() };
|
||||
this.selectedYear = selectedItem.value || parseInt(selectedItem.label);
|
||||
this.showYearSelect = false;
|
||||
// 切换年份时重置分页
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.postList = [];
|
||||
this.groupedPosts = {};
|
||||
this.loadPostList(false);
|
||||
}
|
||||
},
|
||||
// 加载帖子列表
|
||||
loadPostList(isLoadMore = false) {
|
||||
// 防止重复请求
|
||||
if (isLoadMore) {
|
||||
if (this.loadingMore || this.loading || this.refreshing || !this.hasMore) {
|
||||
return;
|
||||
}
|
||||
this.loadingMore = true;
|
||||
this.page += 1;
|
||||
} else {
|
||||
if (this.loading && !this.refreshing) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
if (!isLoadMore && !this.refreshing) {
|
||||
this.postList = [];
|
||||
this.groupedPosts = {};
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前用户发布的帖子列表
|
||||
request({
|
||||
url: 'common/post/list',
|
||||
method: 'GET',
|
||||
data: {
|
||||
// 只获取当前用户发布的帖子，后端应该根据token自动过滤
|
||||
current: this.page,
|
||||
size: this.pageSize,
|
||||
scene:'self',
|
||||
year:this.selectedYear
|
||||
}
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
|
||||
if (res.data.code == 200) {
|
||||
const records = res.data.data.records || [];
|
||||
const total = res.data.data.total || 0;
|
||||
this.total = total;
|
||||
|
||||
// 过滤出当前年份的数据
|
||||
const yearFilteredRecords = records.filter(post => {
|
||||
if (!post.created_at) return false;
|
||||
const dateStr = post.created_at;
|
||||
const postYear = new Date(dateStr).getFullYear();
|
||||
return postYear === this.selectedYear;
|
||||
});
|
||||
|
||||
if (isLoadMore) {
|
||||
// 上拉加载更多，追加数据并去重
|
||||
const existingIds = new Set(this.postList.map(item => item.id));
|
||||
const newRecords = yearFilteredRecords.filter(item => !existingIds.has(item.id));
|
||||
this.postList = [...this.postList, ...newRecords];
|
||||
} else {
|
||||
// 下拉刷新或初次加载，替换数据
|
||||
this.postList = yearFilteredRecords;
|
||||
}
|
||||
|
||||
// 重新分组
|
||||
this.groupPostsByDate();
|
||||
|
||||
// 判断是否还有更多数据
|
||||
// 如果当前页返回的原始数据少于pageSize，说明没有更多了
|
||||
// 或者已经加载到最后一页
|
||||
if (records.length < this.pageSize) {
|
||||
this.hasMore = false;
|
||||
} else {
|
||||
// 计算理论上最多能加载多少页
|
||||
const maxPages = Math.ceil(total / this.pageSize);
|
||||
this.hasMore = this.page < maxPages;
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
if (isLoadMore) {
|
||||
this.page -= 1; // 加载失败，页码回退
|
||||
}
|
||||
});
|
||||
},
|
||||
// 按日期分组帖子
|
||||
groupPostsByDate() {
|
||||
const grouped = {};
|
||||
|
||||
this.postList.forEach(post => {
|
||||
const dateStr = post.created_at || post.create_time || post.createdAt;
|
||||
if (!dateStr) return;
|
||||
|
||||
const date = new Date(dateStr);
|
||||
const month = date.getMonth() + 1; // 月份从0开始，需要+1
|
||||
const day = date.getDate();
|
||||
|
||||
// 生成日期key，格式：MM-DD，用于排序
|
||||
const dateKey = `${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
|
||||
if (!grouped[dateKey]) {
|
||||
grouped[dateKey] = {
|
||||
day: day,
|
||||
month: month,
|
||||
posts: []
|
||||
};
|
||||
}
|
||||
|
||||
grouped[dateKey].posts.push(post);
|
||||
});
|
||||
|
||||
// 按日期倒序排序（最新的在前）
|
||||
const sortedKeys = Object.keys(grouped).sort((a, b) => {
|
||||
// 按完整日期排序（年-月-日）
|
||||
const dateA = new Date(this.selectedYear, parseInt(a.split('-')[0]) - 1, parseInt(a.split('-')[1]));
|
||||
const dateB = new Date(this.selectedYear, parseInt(b.split('-')[0]) - 1, parseInt(b.split('-')[1]));
|
||||
return dateB - dateA; // 倒序：最新的在前
|
||||
});
|
||||
|
||||
// 重新构建分组对象，保持顺序
|
||||
const sortedGrouped = {};
|
||||
sortedKeys.forEach(key => {
|
||||
sortedGrouped[key] = grouped[key];
|
||||
});
|
||||
|
||||
this.groupedPosts = sortedGrouped;
|
||||
},
|
||||
// 下拉刷新
|
||||
onRefresh() {
|
||||
// 如果正在加载中，不执行刷新
|
||||
if (this.loading || this.loadingMore) {
|
||||
this.refreshing = false;
|
||||
return;
|
||||
}
|
||||
this.refreshing = true;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.loadPostList(false);
|
||||
},
|
||||
// 上拉加载更多
|
||||
onLoadMore() {
|
||||
if (!this.hasMore || this.loadingMore || this.loading || this.refreshing) {
|
||||
return;
|
||||
}
|
||||
this.loadPostList(true);
|
||||
},
|
||||
// 查看帖子详情
|
||||
viewPost(post) {
|
||||
// TODO: 跳转到帖子详情页
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id='+post.id
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.year-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #F5F5F5;
|
||||
|
||||
.year-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
height: calc(100% - 168rpx); // 减去导航栏和年份选择器高度
|
||||
}
|
||||
|
||||
.post-list {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.date-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
margin-right: 30rpx;
|
||||
min-width: 120rpx;
|
||||
|
||||
.date-day {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.date-month {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.posts-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.post-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background-color: #E5E5E5;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-view {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.loading-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.loading-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view class="home-page">
|
||||
<z-paging ref="paging" v-model="contList" @query="queryList" empty-view-text="暂无消息">
|
||||
<template #top>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="最新消息"></uni-nav-bar>
|
||||
</template>
|
||||
<view class="msg-list">
|
||||
<view class="msg-item" v-for="item in contList" :key="item.id">
|
||||
<image class="msg-avatar" :src="item.sender_user.avatar_pull" mode="aspectFill"></image>
|
||||
<view class="msg-body">
|
||||
<view class="msg-header">
|
||||
<text class="msg-name">{{item.sender_user.nickname}}</text>
|
||||
<text class="msg-time">{{item.created_at}}</text>
|
||||
</view>
|
||||
<text class="msg-text">
|
||||
<text>{{ item.type==1?'点赞了': item.type==2?'收藏了':'评论了' }} </text>
|
||||
<text>{{ formatContent(item.post && item.post.content) }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
contList: [],
|
||||
defaultAvatar: '/static/image/mine/user.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
request({
|
||||
url:'common/post/messageNotice/list',
|
||||
method:'get',
|
||||
data: {
|
||||
current:pageNo,
|
||||
size:pageSize || 10
|
||||
}
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
const datas = res.data.data.records || [];
|
||||
this.$refs.paging.complete(datas);
|
||||
}else{
|
||||
this.$refs.paging.complete(false);
|
||||
uni.showToast({
|
||||
title:res.data.message || '加载失败',
|
||||
icon:'none'
|
||||
});
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
}).catch(() => {
|
||||
this.$refs.paging.complete(false);
|
||||
})
|
||||
},
|
||||
formatContent(content){
|
||||
if(!content) return '';
|
||||
const text = content.trim();
|
||||
return text.length > 10 ? `${text.slice(0,10)}...` : text;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-page{
|
||||
min-height: 100vh;
|
||||
background: #F5F6FA;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
.msg-list{
|
||||
padding: 20rpx;
|
||||
}
|
||||
.msg-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
}
|
||||
.msg-avatar{
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.msg-body{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
}
|
||||
.msg-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.msg-name{
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 40%;
|
||||
}
|
||||
.msg-time{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.msg-text{
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<view class="home-page">
|
||||
<z-paging ref="paging" :auto="false" v-model="contList" @query="queryList" empty-view-text="暂无数据！">
|
||||
<template #top>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="我的收藏"></uni-nav-bar>
|
||||
</template>
|
||||
<!-- 内容网格 -->
|
||||
<view class="content-grid">
|
||||
<square-post-card
|
||||
class="grid-item"
|
||||
v-for="sitem in contList"
|
||||
:key="sitem.id"
|
||||
:item="sitem.post"
|
||||
:isshow="false"
|
||||
@view="navToList"
|
||||
@comment="viewPost"
|
||||
@like="viewPost" />
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
import SquarePostCard from '@/components/SquarePostCard.vue'
|
||||
export default {
|
||||
components: {
|
||||
SquarePostCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
contList:[]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow(){
|
||||
this.$refs.paging.reload()
|
||||
},
|
||||
methods: {
|
||||
leftClick(){
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/mine',// 替换为你要跳转的页面路径
|
||||
});
|
||||
// uni.navigateBack({})
|
||||
},
|
||||
// 点击商品项
|
||||
navToList(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id='+item.id
|
||||
});
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
this.loading = true;
|
||||
var that = this;
|
||||
request({
|
||||
url:'common/post/favorite/self',
|
||||
method:'get',
|
||||
data: {
|
||||
current:pageNo,
|
||||
size:10
|
||||
}
|
||||
}).then(res => {
|
||||
|
||||
if(res.data.code ==200){
|
||||
var datas = res.data.data.records;
|
||||
this.$refs.paging.complete(datas);
|
||||
}else{
|
||||
// this.$refs.paging.complete(null);
|
||||
// that.listlength=0
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
//
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.home-page{
|
||||
min-height: 100vh;
|
||||
background: #F5F6FA;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
.content-grid{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.grid-item{
|
||||
width: 48%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.grid-image{
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
background: #E5E5E5;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.grid-footer{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-avatar{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.grid-info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 87%;
|
||||
}
|
||||
.grid-tag{
|
||||
font-size: 24rpx;
|
||||
color: #3F435B;
|
||||
margin-bottom: 4rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 95%;
|
||||
}
|
||||
.grid-name{
|
||||
font-size: 22rpx;
|
||||
color: #8A8D97;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 88%;
|
||||
}
|
||||
.iconview{
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.icons {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,582 @@
|
||||
<template>
|
||||
<view class="publish-page">
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="发布页"></uni-nav-bar>
|
||||
<view class="form-card">
|
||||
<view class="section-label">选择发布标签</view>
|
||||
<picker mode="selector" :range="categoryOptions" range-key="name" @change="onCategoryChange">
|
||||
<view class="select-input gradient-bg">
|
||||
<view class="category-content">
|
||||
<view class="fridge-icon">
|
||||
<image :src="iconurl" mode=""></image>
|
||||
</view>
|
||||
<text class="category-text">{{form.category || '请选择发布标签'}}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="mag-top">
|
||||
<textarea v-model="form.content" class="content-textarea" placeholder="请输入文字内容"
|
||||
:maxlength="maxWords" @input="handleContentInput" />
|
||||
</view>
|
||||
|
||||
<view class="media-upload-wrapper mag-top">
|
||||
<uni-file-picker fileMediatype="image" limit="9" @select="selectMedia" @delete="delfn" :imageStyles="imageStyles">
|
||||
<view class="upload-icon-wrapper">
|
||||
<image src="/static/image/photo.png" mode="" class="addimg"></image>
|
||||
<text class="upload-text">添加图片</text>
|
||||
</view>
|
||||
</uni-file-picker>
|
||||
<!-- <view class="upload-area" @click="selectMedia" v-if="form.media.length < maxMedia">
|
||||
<view class="upload-icon-wrapper">
|
||||
<view class="camera-icon">
|
||||
<image src="/static/image/photo.png" mode=""></image>
|
||||
</view>
|
||||
<text class="upload-text">添加图片</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="media-preview" v-for="(item, index) in form.media" :key="index">
|
||||
<image :src="item.url" mode="aspectFill" class="preview-image"></image>
|
||||
<view class="delete-btn" @click.stop="deleteMedia(index)">
|
||||
<u-icon name="close" size="18" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="help-text">
|
||||
<u-icon name="info-circle" size="18" color="#A6ABB7"></u-icon>
|
||||
<text>文字不多于2000字,图片不多于9张</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="agreement">
|
||||
<label class="agree-label" @click="toggleAgreement">
|
||||
<checkbox :checked="agree" style="transform:scale(0.8)"></checkbox>
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="link" @click.stop="viewAgreement">《发布协议》</text>
|
||||
</label>
|
||||
</view>
|
||||
|
||||
<!-- <button class="primary-btn gradient-btn" :class="{disabled: !canSubmit}" :disabled="!canSubmit" @click="submitForm">立即发布</button> -->
|
||||
<button class="primary-btn gradient-btn" @click="submitForm">立即发布</button>
|
||||
<u-popup :show="show" :closeOnClickOverlay="false" :round="10" mode="center">
|
||||
<view class="cont-text" >
|
||||
<view class="" v-html="viewAgreementcont">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="cent">
|
||||
<button class="btn1" @click="show = !show">取消</button>
|
||||
<button class="btn" @click="agreementbtn">确定</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="showlogin" :closeOnClickOverlay="false" :round="20" mode="center">
|
||||
<view class="popupcontent">
|
||||
<image class="log1" src="/static/image/log1.png"></image>
|
||||
<view class="title">{{$t('home.loginmsg')}}</view>
|
||||
<view class="yhxy">
|
||||
<checkbox-group name="" style="width: 28px;display: inline-block;">
|
||||
<label @tap="selfChangde()">
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B"
|
||||
style="transform:scale(0.7);border-radius: 50%" />
|
||||
</label>
|
||||
</checkbox-group>
|
||||
{{$t('home.argin')}}<text class="xy" @click="gouser">{{$t('home.UserAgreement')}}</text>{{$t('home.and')}}<text
|
||||
class="xy" @click="goprivacy">{{$t('home.Privacy')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cent">
|
||||
<button class="btn1" @click="showlogin = !showlogin">{{$t('cancel')}}</button>
|
||||
<button v-if="selfChecked" class="btn" open-type="getPhoneNumber" @click="showlogin = !showlogin"
|
||||
@getphonenumber="getPhoneNumber">{{$t('login')}}</button>
|
||||
<button v-else class="btn" @click="loginbtn">{{$t('login')}}</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
name: 'PublishPage',
|
||||
data(){
|
||||
return {
|
||||
categoryOptions:[],
|
||||
form:{
|
||||
category:'',
|
||||
category_id:'',
|
||||
content:'',
|
||||
media:[]
|
||||
},
|
||||
selfChecked: false,
|
||||
showlogin:false,
|
||||
viewAgreementcont:'',
|
||||
iconurl:'',
|
||||
maxWords:2000,
|
||||
maxMedia:9,
|
||||
agree:false,
|
||||
show:false,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
canSubmit(){
|
||||
return this.agree && this.form.content.trim().length>0 && this.form.media.length>0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getcategory()
|
||||
},
|
||||
onShow() {
|
||||
|
||||
this.syncTabbar()
|
||||
},
|
||||
methods:{
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
loginbtn(){
|
||||
if(!this.selfChecked){
|
||||
uni.showToast({
|
||||
title:this.$t('home.arginimg'),
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: e.detail.code,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 200) {
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'none'
|
||||
});
|
||||
//返回数据接收成功
|
||||
uni.setStorageSync('is_login', true);
|
||||
}
|
||||
})
|
||||
},
|
||||
getcategory(){
|
||||
request({
|
||||
url:'common/post/category/list',
|
||||
method:'GET'
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.categoryOptions = res.data.data.records || [];
|
||||
this.form.category = res.data.data.records[0].name
|
||||
this.form.category_id = res.data.data.records[0].id
|
||||
this.iconurl = res.data.data.records[0].icon_preset_pull
|
||||
}
|
||||
})
|
||||
},
|
||||
syncTabbar(){
|
||||
uni.setTabBarItem({ index:0, text:this.$t('tabbar.home') })
|
||||
uni.setTabBarItem({ index:1, text:this.$t('tabbar.square') })
|
||||
uni.setTabBarItem({ index:2, text:this.$t('tabbar.publish') })
|
||||
uni.setTabBarItem({ index:3, text:this.$t('tabbar.mine') })
|
||||
},
|
||||
goBack(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
onCategoryChange(e){
|
||||
console.log(e)
|
||||
const index = e.detail.value; // picker 返回的 index
|
||||
const selectCity = this.categoryOptions[index]; // 直接取整条数据
|
||||
this.iconurl = selectCity.icon_preset_pull
|
||||
this.form.category = selectCity.name
|
||||
this.form.category_id = selectCity.id
|
||||
},
|
||||
handleContentInput(e){
|
||||
if(e.detail.value.length>this.maxWords){
|
||||
this.form.content = e.detail.value.slice(0,this.maxWords)
|
||||
}
|
||||
},
|
||||
uploadfn(imgUrl){
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: 'https://bsh.info.hb.hnzhwlkj.cn/upload/image?scene=postlist',
|
||||
filePath: imgUrl,
|
||||
name: 'image',
|
||||
header:{'content-type': 'application/x-www-form-urlencoded','Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'wechat','Fdesk-System-Code':'wechat'},
|
||||
success: (uploadFileRes) => {
|
||||
const res = JSON.parse(uploadFileRes.data || '{}')
|
||||
if(res && res.data && res.data.href){
|
||||
resolve(res.data.href)
|
||||
}else{
|
||||
reject('上传失败')
|
||||
}
|
||||
},
|
||||
fail: (err) => reject(err)
|
||||
});
|
||||
})
|
||||
},
|
||||
selectMedia(e){
|
||||
const allowCount = this.maxMedia - this.form.media.length
|
||||
if(allowCount <= 0){
|
||||
uni.showToast({
|
||||
title:`最多只能上传${this.maxMedia}张图片`,
|
||||
icon:'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
|
||||
const paths = tempFilePaths.slice(0, allowCount)
|
||||
if(paths.length === 0){
|
||||
return
|
||||
}
|
||||
Promise.all(paths.map(p => this.uploadfn(p))).then(urls => {
|
||||
urls.forEach(url => {
|
||||
this.form.media.push(url)
|
||||
})
|
||||
}).catch(() => {
|
||||
uni.showToast({
|
||||
title:'图片上传失败，请重试',
|
||||
icon:'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
delfn(e){
|
||||
this.form.media.splice(e.index, 1)
|
||||
},
|
||||
deleteMedia(index){
|
||||
this.form.media.splice(index, 1)
|
||||
},
|
||||
toggleAgreement(){
|
||||
this.agree = !this.agree
|
||||
},
|
||||
viewAgreement(){
|
||||
request({
|
||||
url:'common/agreement?type=release_agreement',
|
||||
method:'GET'
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.viewAgreementcont = res.data.data.content
|
||||
this.show = true
|
||||
}
|
||||
})
|
||||
},
|
||||
agreementbtn(){
|
||||
this.agree = true
|
||||
this.show = false
|
||||
},
|
||||
submitForm(){
|
||||
if(!this.agree){
|
||||
uni.showToast({
|
||||
title: '请先同意发布协议！',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
if(uni.getStorageSync('is_login')){
|
||||
request({
|
||||
url:'common/post/store',
|
||||
method:'post',
|
||||
data:this.form
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
if(res.data.code ==200){
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/square/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.showlogin = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0px 10px 20px;
|
||||
.btn1{
|
||||
background-color: #fff;
|
||||
border: 1px solid #206ff4;
|
||||
color: #206ff4;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.btn{
|
||||
background-color: #206ff4;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.custom-navbar{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: calc(var(--status-bar-height) + 88rpx);
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--status-bar-height) 30rpx 0;
|
||||
z-index: 999;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
.form-card{
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 12rpx 30rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
.section-label{
|
||||
font-size: 30rpx;
|
||||
color: #2F323A;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.select-input{
|
||||
height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.gradient-bg{
|
||||
background: linear-gradient(90deg, #206ff4 0%, #42e0a2 100%);
|
||||
}
|
||||
.category-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.fridge-icon{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
.fridge-icon image{
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
}
|
||||
.fridge-body{
|
||||
width: 32rpx;
|
||||
height: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 4rpx;
|
||||
position: absolute;
|
||||
left: 8rpx;
|
||||
top: 4rpx;
|
||||
}
|
||||
.fridge-line{
|
||||
width: 28rpx;
|
||||
height: 2rpx;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
top: 18rpx;
|
||||
}
|
||||
.fridge-line2{
|
||||
width: 28rpx;
|
||||
height: 2rpx;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
top: 28rpx;
|
||||
}
|
||||
.category-text{
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
.mag-top{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.content-textarea{
|
||||
width: 100%;
|
||||
// background: #F7F8FB;
|
||||
border-radius: 16rpx;
|
||||
max-height: 160rpx;
|
||||
padding: 24rpx 0px;
|
||||
font-size: 28rpx;
|
||||
color: #2F323A;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.media-upload-wrapper{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.upload-area{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: #F7F8FB;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.upload-icon-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.camera-icon{
|
||||
position: relative;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.addimg{
|
||||
width: 26px;
|
||||
height: 22px;
|
||||
}
|
||||
.upload-text{
|
||||
font-size: 26rpx;
|
||||
color: #3F75FF;
|
||||
}
|
||||
.media-preview{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.preview-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.delete-btn{
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.help-text{
|
||||
font-size: 24rpx;
|
||||
color: #A6ABB7;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
.agreement{
|
||||
margin: 20rpx 0 40rpx;
|
||||
padding: 20px 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.agree-label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #6A6E7F;
|
||||
}
|
||||
.agree-label text{
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
.agree-label .link{
|
||||
color: #51B6FF;
|
||||
}
|
||||
.primary-btn{
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
margin: 40px 12px;
|
||||
}
|
||||
.gradient-btn{
|
||||
background: linear-gradient(180deg, #206ff4 0%, #42e0a2 100%);
|
||||
}
|
||||
.cont-text{
|
||||
max-width: 350px;
|
||||
max-height: 450px;
|
||||
overflow: scroll;
|
||||
padding: 10px;
|
||||
}
|
||||
.popupcontent{
|
||||
background-size: 100% 100%;
|
||||
padding: 26px 15px;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
.title{
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.log1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.yhxy{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
.xy{
|
||||
color: #297EFF;
|
||||
}
|
||||
}
|
||||
.cent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0px 10px 20px;
|
||||
.btn1{
|
||||
background-color: #fff;
|
||||
border: 1px solid #206ff4;
|
||||
color: #206ff4;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.btn{
|
||||
background-color: #206ff4;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,964 @@
|
||||
<template>
|
||||
<view class="detail-page">
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000"
|
||||
backgroundColor="#fff" :statusBar="true" title="详情"></uni-nav-bar>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="detail-scroll"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefreshComments"
|
||||
@scrolltolower="onLoadMoreComments"
|
||||
>
|
||||
<!-- 顶部轮播图 -->
|
||||
<swiper class="media-swiper" circular autoplay indicator-dots indicator-color="rgba(255,255,255,.4)"
|
||||
indicator-active-color="#FFB400">
|
||||
<swiper-item v-for="(img, index) in detail.media" :key="index">
|
||||
<image class="media-image" :src="img.url_pull" mode="aspectFill" @click="previewImage(index)" @longpress="downloadImage(img)"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 内容信息 -->
|
||||
<view class="post-info">
|
||||
<view class="author">
|
||||
<image class="avatar" :src="detail.user.avatar_pull"></image>
|
||||
<view class="author-meta">
|
||||
<view class="name-box">
|
||||
<text class="name">{{detail.user.nickname}}<text class="role-tag">作者</text></text>
|
||||
</view>
|
||||
<text class="time">{{detail.publishTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="post-content">
|
||||
<text>{{detail.content}}</text>
|
||||
</view>
|
||||
<view class="post-actions">
|
||||
<view class="action-item" @click="toggleLike(detail)">
|
||||
<uni-icons :type="detail.is_like ? 'heart-filled' : 'heart'" :color="detail.is_like ? '#FF5757' : '#999'" size="18"></uni-icons>
|
||||
<text>{{detail.like}}</text>
|
||||
</view>
|
||||
<view class="action-item" @click="toggleCollect">
|
||||
<uni-icons :type="detail.is_favorite ? 'star-filled' : 'star'" :color="detail.is_favorite ? '#FFB400' : '#999'" size="20"></uni-icons>
|
||||
<text>{{detail.favorite}}</text>
|
||||
</view>
|
||||
<view class="action-item">
|
||||
<image :src="detail.is_comment == 0 ? '/static/image/msg.png' : '/static/image/msga.png'" mode="" class="icons18"></image>
|
||||
<text>{{detail.comment}}</text>
|
||||
</view>
|
||||
<view class="action-item">
|
||||
<button open-type="share" class="share"><uni-icons type="redo" color="#206ff4" size="20"></uni-icons></button>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评论列表 -->
|
||||
<view class="comment-section">
|
||||
<view class="comment-title">全部评论</view>
|
||||
<view v-if="comments.length == 0">
|
||||
<view class="comment-item">
|
||||
<text>暂无评论</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-for="(item, index) in comments" :key="index" class="comment-item">
|
||||
<image class="comment-avatar" :src="item.user.avatar_pull"></image>
|
||||
<view class="comment-body">
|
||||
<view class="comment-header">
|
||||
<view class="comment-header-left">
|
||||
<text class="comment-name">{{item.user.nickname}}</text>
|
||||
<text class="comment-time">{{item.created_at}}</text>
|
||||
</view>
|
||||
<image @click="replyComment(item)" src="/static/image/msg.png" mode="" class="icons20"></image>
|
||||
</view>
|
||||
<text class="comment-text">{{item.content}}</text>
|
||||
<view class="comment-footer">
|
||||
<text class="comment-reply" @click="replyComment(item)">回复</text>
|
||||
<view class="comment-icons">
|
||||
|
||||
<!-- <uni-icons type="hand-thumbsup" size="16" color="#999"></uni-icons>
|
||||
<text>{{item.like}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.child && item.child.length" class="comment-reply-box">
|
||||
<view v-for="(reply, rIndex) in item.child" :key="rIndex" class="reply-item">
|
||||
<view class="reply-item-left">
|
||||
<image class="reply-avatar" :src="reply.user.avatar_pull"></image>
|
||||
<text class="reply-name">{{reply.user.nickname}}：</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="reply-text">{{reply.content}}</view>
|
||||
<view class="reply-text">{{reply.created_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="comment-reply" v-if="item.count> 1" @click="viewMoreReply(item)">展开{{item.count-1}}条回复</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!hasMore && comments.length" class="comment-end">
|
||||
<text class="comment-end-text">没有更多评论了</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-bottom"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="input-box">
|
||||
<uni-icons type="compose" size="20" color="#bbb"></uni-icons>
|
||||
<input class="input"
|
||||
type="text"
|
||||
:placeholder="commentPlaceholder"
|
||||
v-model="commentText"
|
||||
confirm-type="send"
|
||||
@confirm="sendComment"
|
||||
:focus="commentFocus"
|
||||
@focus="commentFocus = true"
|
||||
@blur="handleInputBlur"
|
||||
/>
|
||||
<view class="send-btn" :class="{disabled: !commentText.trim()}" :disabled="!commentText.trim()" @click="sendComment">发送</view>
|
||||
</view>
|
||||
<view class="bottom-actions">
|
||||
<view class="bottom-action" @click="toggleLike(detail)">
|
||||
<uni-icons :type="detail.is_like ? 'heart-filled' : 'heart'" :color="detail.is_like ? '#FF5757' : '#333'" size="22"></uni-icons>
|
||||
<text>{{detail.like}}</text>
|
||||
</view>
|
||||
<view class="bottom-action" @click="toggleCollect(detail)">
|
||||
<uni-icons :type="detail.is_favorite ? 'star-filled' : 'star'" :color="detail.is_favorite ? '#FFB400' : '#333'" size="24"></uni-icons>
|
||||
<text>{{detail.favorite}}</text>
|
||||
</view>
|
||||
<view class="bottom-action" @click="startComment()">
|
||||
<image :src="detail.is_comment == 0 ? '/static/image/msg.png' : '/static/image/msga.png'" mode="" class="icons20"></image>
|
||||
<text>{{detail.comment}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showlogin" :closeOnClickOverlay="false" :round="20" mode="center">
|
||||
<view class="popupcontent">
|
||||
<image class="log1" src="/static/image/log1.png"></image>
|
||||
<view class="title">{{$t('home.loginmsg')}}</view>
|
||||
<view class="yhxy">
|
||||
<checkbox-group name="" style="width: 28px;display: inline-block;">
|
||||
<label @tap="selfChangde()">
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B"
|
||||
style="transform:scale(0.7);border-radius: 50%" />
|
||||
</label>
|
||||
</checkbox-group>
|
||||
{{$t('home.argin')}}<text class="xy" @click="gouser">{{$t('home.UserAgreement')}}</text>{{$t('home.and')}}<text
|
||||
class="xy" @click="goprivacy">{{$t('home.Privacy')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cent">
|
||||
<button class="btn1" @click="showlogin = !showlogin">{{$t('cancel')}}</button>
|
||||
<button v-if="selfChecked" class="btn" open-type="getPhoneNumber" @click="showlogin = !showlogin"
|
||||
@getphonenumber="getPhoneNumber">{{$t('login')}}</button>
|
||||
<button v-else class="btn" @click="loginbtn">{{$t('login')}}</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showlogin: false,
|
||||
detail: {},
|
||||
comments: [],
|
||||
postid:'',
|
||||
commentText: '',
|
||||
commentPlaceholder: '说点什么...',
|
||||
commentFocus: false,
|
||||
replyTarget: null,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
hasMore: true,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
selfChecked: false,
|
||||
loadingMore: false,
|
||||
article:{},
|
||||
share:'',
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.postid = options.id;
|
||||
this.share = options.share
|
||||
this.getshows()
|
||||
this.loadComments(true)
|
||||
this.getCommentCount()
|
||||
},
|
||||
methods: {
|
||||
leftClick() {
|
||||
if(this.share=='share'){
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}else{
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
loginbtn(){
|
||||
if(!this.selfChecked){
|
||||
uni.showToast({
|
||||
title:this.$t('home.arginimg'),
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: e.detail.code,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 200) {
|
||||
//返回数据接收成功
|
||||
uni.setStorageSync('is_login', true);
|
||||
}
|
||||
})
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
//获取详情
|
||||
getshows(){
|
||||
|
||||
let that = this;
|
||||
request({
|
||||
url:'common/post/show',
|
||||
method:'GET',
|
||||
data:{
|
||||
id:that.postid
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.article = res.data.data
|
||||
this.detail = res.data.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取评论（分页）
|
||||
loadComments(isRefresh = false){
|
||||
if (this.loading) return;
|
||||
if (isRefresh) {
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
} else if (!this.hasMore) {
|
||||
this.loadingMore = false;
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
request({
|
||||
url:'common/post/comment/list',
|
||||
method:'GET',
|
||||
data:{
|
||||
post_id:this.postid,
|
||||
parent_id:0,
|
||||
current:this.page,
|
||||
size:this.pageSize
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
const records = res.data.data.records || [];
|
||||
if (isRefresh) {
|
||||
this.comments = records;
|
||||
} else {
|
||||
const existingIds = new Set(this.comments.map(item => item.id));
|
||||
const appendList = records.filter(item => !existingIds.has(item.id));
|
||||
this.comments = [...this.comments, ...appendList];
|
||||
}
|
||||
if (records.length < this.pageSize) {
|
||||
this.hasMore = false;
|
||||
} else {
|
||||
this.page += 1;
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message || '获取评论失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}).finally(()=>{
|
||||
this.loading = false;
|
||||
if (isRefresh) {
|
||||
this.refreshing = false;
|
||||
}
|
||||
this.loadingMore = false;
|
||||
})
|
||||
},
|
||||
onRefreshComments(){
|
||||
if (this.refreshing) return;
|
||||
this.refreshing = true;
|
||||
this.loadComments(true);
|
||||
},
|
||||
onLoadMoreComments(){
|
||||
if (this.loadingMore || this.refreshing || this.loading || !this.hasMore) return;
|
||||
this.loadingMore = true;
|
||||
this.loadComments(false);
|
||||
},
|
||||
islogin(){
|
||||
if(uni.getStorageSync('is_login')){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
},
|
||||
toggleLike(items) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
const likeUrl = this.detail.is_like ? 'common/post/like/destroy' : 'common/post/like/store'
|
||||
const method = this.detail.is_like ? 'GET' : 'POST'
|
||||
const data = {
|
||||
post_id: items.id
|
||||
}
|
||||
if (this.detail.is_like) {
|
||||
data.user_id = this.detail.user_id
|
||||
}
|
||||
request({
|
||||
url: likeUrl,
|
||||
method,
|
||||
data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
if(this.detail.is_like){
|
||||
this.detail.is_like = 0
|
||||
this.detail.like += this.detail.is_like ? 1 : -1
|
||||
// newTarget.like = Math.max(0, (Number(newTarget.like) || 0) - 1)
|
||||
uni.showToast({
|
||||
title: '取消成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}else{
|
||||
this.detail.is_like =1
|
||||
this.detail.like += this.detail.is_like ? 1 : -1
|
||||
uni.showToast({
|
||||
title: '点赞成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
toggleCollect(items) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
const collectUrl = this.detail.is_favorite ? 'common/post/favorite/destroy' : 'common/post/favorite/store'
|
||||
const method = this.detail.is_favorite ? 'GET' : 'POST'
|
||||
const data = {
|
||||
post_id: this.detail.id
|
||||
}
|
||||
if (this.detail.is_favorite) {
|
||||
data.user_id = this.detail.user_id
|
||||
}
|
||||
request({
|
||||
url: collectUrl,
|
||||
method,
|
||||
data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
if(this.detail.is_favorite){
|
||||
this.detail.is_favorite = 0
|
||||
this.detail.favorite += this.detail.is_favorite ? 1 : -1
|
||||
uni.showToast({
|
||||
title: '取消收藏成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}else{
|
||||
this.detail.is_favorite = 1
|
||||
this.detail.favorite += this.detail.is_favorite ? 1 : -1
|
||||
uni.showToast({
|
||||
title: '收藏成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
startComment(target = null) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
this.replyTarget = target
|
||||
this.commentPlaceholder = target ? `回复 ${target.user.nickname}...` : '说点什么...'
|
||||
this.commentText = ''
|
||||
this.commentFocus = true
|
||||
},
|
||||
handleInputBlur() {
|
||||
this.commentFocus = false
|
||||
},
|
||||
replyComment(item) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
this.commentText = ''
|
||||
this.startComment(item)
|
||||
},
|
||||
viewMoreReply(item) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'common/post/comment/list',
|
||||
method:'GET',
|
||||
data:{
|
||||
post_id:that.postid,
|
||||
parent_id:item.id,
|
||||
received_id:item.child[0].id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
item.child = item.child || []
|
||||
const index = this.comments.findIndex(item1 => item1.id === item.id)
|
||||
if (index > -1) {
|
||||
this.$set(
|
||||
this.comments[index],
|
||||
'child',
|
||||
[...this.comments[index].child, ...res.data.data.records]
|
||||
)
|
||||
this.comments[index].count = 0
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取评论数量
|
||||
getCommentCount(){
|
||||
let that = this;
|
||||
request({
|
||||
url:'common/post/interaction',
|
||||
method:'GET',
|
||||
data:{
|
||||
id:that.postid
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.detail.comment = res.data.data.comment
|
||||
}
|
||||
})
|
||||
},
|
||||
sendComment() {
|
||||
if (!this.commentText.trim()) return
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
const data = {
|
||||
post_id: this.detail.id,
|
||||
parent_id: 0,
|
||||
content: this.commentText
|
||||
}
|
||||
if(this.replyTarget){
|
||||
data.parent_id = this.replyTarget.id
|
||||
}
|
||||
request({
|
||||
url: 'common/post/comment/store',
|
||||
method: 'POST',
|
||||
data: data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
uni.showToast({
|
||||
title: '评论成功',
|
||||
icon: 'none'
|
||||
});
|
||||
this.loadComments(true)
|
||||
this.getCommentCount()
|
||||
this.commentText = ''
|
||||
this.commentPlaceholder = '说点什么...'
|
||||
this.replyTarget = null
|
||||
this.commentFocus = false
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 预览图片（点击放大）
|
||||
previewImage(index) {
|
||||
if (!this.detail.media || this.detail.media.length === 0) return
|
||||
const urls = this.detail.media.map(item => item.url_pull)
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls
|
||||
})
|
||||
},
|
||||
// 下载图片（长按）
|
||||
downloadImage(img) {
|
||||
if (!img || !img.url_pull) return
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 保存图片
|
||||
uni.showLoading({
|
||||
title: '下载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.downloadFile({
|
||||
url: img.url_pull,
|
||||
success: (downloadRes) => {
|
||||
if (downloadRes.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: downloadRes.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要授权保存图片到相册',
|
||||
showCancel: false
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 分享给好友
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.article.content,
|
||||
path: `/pages/square/detiles?share=share&id=${this.article.id}`,
|
||||
imageUrl: "/static/image/share.jpg" // 封面图
|
||||
}
|
||||
},
|
||||
// 分享到朋友圈
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.article.content,
|
||||
query: `id=${this.article.id}`,
|
||||
imageUrl: "/static/image/share.jpg"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.detail-page {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.icons20{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.icons18{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.detail-scroll {
|
||||
height: calc(100% - 120rpx);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.media-swiper {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
}
|
||||
|
||||
.media-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
padding: 30rpx;
|
||||
border-bottom: 16rpx solid #F7F7F7;
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.author-meta {
|
||||
flex: 1;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.role-tag {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
background: #206ff4;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.comment-section {
|
||||
padding: 20rpx 30rpx 140rpx;
|
||||
}
|
||||
|
||||
.comment-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
// gap: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.comment-header-left{
|
||||
display: flex;
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
.comment-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.comment-footer {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.comment-reply {
|
||||
font-size: 26rpx;
|
||||
color: #206ff4;
|
||||
}
|
||||
|
||||
.comment-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.comment-reply-box {
|
||||
margin-top: 20rpx;
|
||||
background: #F8F8F8;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.comment-end {
|
||||
padding: 24rpx 0 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comment-end-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 1.4;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.reply-item-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.reply-avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.reply-name {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: #555;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
.scroll-bottom {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-top: 1px solid #F0F0F0;
|
||||
padding: 16rpx 30rpx calc(env(safe-area-inset-bottom) + 16rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #F6F7F8;
|
||||
border-radius: 999rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: #297EFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 999rpx;
|
||||
padding: 0 20rpx;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.send-btn.disabled {
|
||||
background: #dcdcdc;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
}
|
||||
.popupcontent{
|
||||
background-size: 100% 100%;
|
||||
padding: 26px 15px;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
.title{
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.log1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.yhxy{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
.xy{
|
||||
color: #297EFF;
|
||||
}
|
||||
}
|
||||
.share{
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.share:after{
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
.cent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0px 10px 20px;
|
||||
.btn1{
|
||||
background-color: #fff;
|
||||
border: 1px solid #206ff4;
|
||||
color: #206ff4;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.btn{
|
||||
background-color: #206ff4;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="广场"></uni-nav-bar>
|
||||
<view class="content-con">
|
||||
<scroll-view scroll-y class="left-aside">
|
||||
<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentCategoryId}"
|
||||
@click="onCategoryChange(item.id)">
|
||||
<view class="category-icon" v-if="item.icon_active_pull">
|
||||
<image :src="item.id === currentCategoryId?item.icon_active_pull:item.icon_inactive_pull" mode=""></image>
|
||||
️</view>
|
||||
{{item.name}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y class="right-aside"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
:lower-threshold="100"
|
||||
@scrolltolower="onLoadMore">
|
||||
<view class="t-lists">
|
||||
<square-post-card
|
||||
class="t-item"
|
||||
v-for="sitem in slist"
|
||||
:key="sitem.id"
|
||||
:item="sitem"
|
||||
:isshow="true"
|
||||
@view="navToList"
|
||||
@comment="navTomsg"
|
||||
@like="navTozan" />
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="hasMore" class="load-more">
|
||||
<text v-if="loadingMore">加载中...</text>
|
||||
<text v-else>上拉加载更多</text>
|
||||
</view>
|
||||
<view v-else-if="slist.length > 0" class="load-more">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
<view class="empty" v-if="slist.length==0">
|
||||
<image src="/static/image/empty.png" mode=""></image>
|
||||
<view class="">
|
||||
暂无数据！
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" class="loading-mask">
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
import SquarePostCard from '@/components/SquarePostCard.vue'
|
||||
export default {
|
||||
components: {
|
||||
SquarePostCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flist: [],
|
||||
slist: [],
|
||||
currentCategoryId: '', // 当前选中的分类id
|
||||
loading: false, // 加载状态
|
||||
refreshing: false, // 下拉刷新状态
|
||||
loadingMore: false, // 上拉加载状态
|
||||
page: 1, // 当前页码
|
||||
pageSize: 10, // 每页数量
|
||||
hasMore: true, // 是否还有更多数据
|
||||
categoriesLoaded: false // 分类是否已加载完成
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 加载第一级分类列表
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.loadCategoryList();
|
||||
this.syncTabbar()
|
||||
// // 从详情页返回后，重新拉取当前分类数据
|
||||
// if (this.categoriesLoaded) {
|
||||
// this.refreshCurrentCategory()
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
// 加载第一级分类列表
|
||||
loadCategoryList() {
|
||||
// TODO: 替换为实际的后端接口
|
||||
let that = this;
|
||||
|
||||
request({
|
||||
url:'common/post/category/list',
|
||||
method:'GET'
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
const records = res.data.data.records || [];
|
||||
this.flist = [{
|
||||
id: '',
|
||||
name: '全部分类'
|
||||
}, ...records];
|
||||
this.categoriesLoaded = true;
|
||||
// 默认加载第一个分类的数据
|
||||
if (this.flist.length > 0) {
|
||||
this.onCategoryChange(this.flist[0].id);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 重新加载当前分类数据
|
||||
refreshCurrentCategory() {
|
||||
const targetCategory = this.currentCategoryId !== undefined ? this.currentCategoryId : (this.flist[0] && this.flist[0].id) || '';
|
||||
this.loadCategoryData(targetCategory, false);
|
||||
},
|
||||
|
||||
// 分类切换事件
|
||||
onCategoryChange(categoryId) {
|
||||
// 如果点击的是当前分类且已有数据，不重复加载
|
||||
if (this.currentCategoryId === categoryId && this.slist.length > 0) {
|
||||
return;
|
||||
}
|
||||
// 切换分类时，重置所有状态
|
||||
this.currentCategoryId = categoryId;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
this.slist = []; // 先清空数据
|
||||
this.loadCategoryData(categoryId, false);
|
||||
},
|
||||
|
||||
// 根据分类id加载分类下的内容
|
||||
loadCategoryData(categoryId, isLoadMore = false) {
|
||||
// 防止重复请求：如果是加载更多，需要检查所有加载状态
|
||||
if (isLoadMore) {
|
||||
if (this.loadingMore || this.loading || this.refreshing) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 下拉刷新或初次加载，检查加载状态
|
||||
if (this.loading || this.loadingMore) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoadMore) {
|
||||
this.loadingMore = true;
|
||||
this.page += 1;
|
||||
} else {
|
||||
this.loading = true;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.slist = []; // 清空之前的数据
|
||||
}
|
||||
|
||||
request({
|
||||
url:'common/post/list',
|
||||
method:'GET',
|
||||
data:{
|
||||
category_id:categoryId,
|
||||
current: this.page,
|
||||
size: this.pageSize
|
||||
}
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
|
||||
if (res.data.code == 200) {
|
||||
const records = res.data.data.records || [];
|
||||
const total = res.data.data.total || 0;
|
||||
|
||||
if (isLoadMore) {
|
||||
// 上拉加载更多，追加数据并去重
|
||||
const existingIds = new Set(this.slist.map(item => item.id));
|
||||
const newRecords = records.filter(item => !existingIds.has(item.id));
|
||||
this.slist = [...this.slist, ...newRecords];
|
||||
} else {
|
||||
// 下拉刷新或初次加载，替换数据
|
||||
this.slist = records;
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
this.hasMore = this.slist.length < total;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
if (isLoadMore) {
|
||||
this.page -= 1; // 加载失败，页码回退
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下拉刷新
|
||||
onRefresh() {
|
||||
// 如果正在加载中，不执行刷新
|
||||
if (this.loading || this.loadingMore) {
|
||||
this.refreshing = false;
|
||||
return;
|
||||
}
|
||||
this.refreshing = true;
|
||||
this.loadCategoryData(this.currentCategoryId, false);
|
||||
},
|
||||
// 上拉加载更多
|
||||
onLoadMore() {
|
||||
if (!this.hasMore || this.loadingMore || this.loading || this.refreshing) {
|
||||
return;
|
||||
}
|
||||
this.loadCategoryData(this.currentCategoryId, true);
|
||||
},
|
||||
|
||||
// 点击商品项
|
||||
navToList(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id='+item.id
|
||||
});
|
||||
},
|
||||
//点赞
|
||||
navTozan(item){
|
||||
const targetIndex = this.slist.findIndex(post => post.id === item.id)
|
||||
if(targetIndex === -1){
|
||||
return
|
||||
}
|
||||
const target = this.slist[targetIndex]
|
||||
const isLiked = Number(target.is_like) === 1
|
||||
const likeUrl = isLiked ? 'common/post/like/destroy' : 'common/post/like/store'
|
||||
const method = isLiked ? 'GET' : 'POST'
|
||||
const data = {
|
||||
post_id: target.id
|
||||
}
|
||||
if (isLiked) {
|
||||
data.user_id = target.user_id
|
||||
}
|
||||
request({
|
||||
url: likeUrl,
|
||||
method,
|
||||
data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
const newTarget = { ...target }
|
||||
if(isLiked){
|
||||
newTarget.is_like = 0
|
||||
newTarget.like = Math.max(0, (Number(newTarget.like) || 0) - 1)
|
||||
uni.showToast({
|
||||
title: '取消成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}else{
|
||||
newTarget.is_like = 1
|
||||
newTarget.like = (Number(newTarget.like) || 0) + 1
|
||||
uni.showToast({
|
||||
title: '点赞成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
this.$set(this.slist, targetIndex, newTarget)
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
//消息
|
||||
navTomsg(item){
|
||||
request({
|
||||
url:'common/like/store',
|
||||
method:'GET',
|
||||
data:{
|
||||
post_id:item.id
|
||||
}
|
||||
}).then(res => {
|
||||
})
|
||||
},
|
||||
leftClick(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
syncTabbar(){
|
||||
uni.setTabBarItem({ index:0, text:this.$t('tabbar.home') })
|
||||
uni.setTabBarItem({ index:1, text:this.$t('tabbar.square') })
|
||||
uni.setTabBarItem({ index:2, text:this.$t('tabbar.publish') })
|
||||
uni.setTabBarItem({ index:3, text:this.$t('tabbar.mine') })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.empty{
|
||||
text-align: center;
|
||||
margin-top: 30%;
|
||||
width: 100%;
|
||||
}
|
||||
.empty image{
|
||||
width: 252px;
|
||||
height: 164px;
|
||||
}
|
||||
page,
|
||||
.content {
|
||||
height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.loading-text {
|
||||
color: #fff;
|
||||
font-size: 28upx;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 20upx 40upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
}
|
||||
.content-con {
|
||||
height: calc(100% - 128rpx);
|
||||
background-color: #f8f8f8;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left-aside {
|
||||
flex-shrink: 0;
|
||||
width: 200upx;
|
||||
height: 100%;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.f-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding-left: 24rpx;
|
||||
|
||||
&.active {
|
||||
color: #0071FC;
|
||||
background: #fff;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 36upx;
|
||||
width: 8upx;
|
||||
background-color: #0071FC;
|
||||
border-radius: 0 4px 4px 0;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.iconview{
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.icons {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.right-aside {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
/* padding-left: 20upx; */
|
||||
/* padding-top: 20upx; */
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-lists {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.t-item{
|
||||
width: 48%;
|
||||
/* background: #fff; */
|
||||
/* border-radius: 24rpx; */
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
/* box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06); */
|
||||
}
|
||||
.grid-image{
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
background: #E5E5E5;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.grid-footer{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-avatar{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.grid-info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 70%;
|
||||
}
|
||||
.grid-tag{
|
||||
font-size: 24rpx;
|
||||
color: #3F435B;
|
||||
margin-bottom: 4rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 87%;
|
||||
}
|
||||
.category-icon image{
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.load-more{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user