xinyouhe/product-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
浅念
2025-12-13 17:30:18 +08:00
parent 5112803313
commit c60dda98a4
8 changed files with 356 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/square/detiles.vue
+64 -8
View File
@@ -2,7 +2,9 @@
<view class="detail-page">
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000"
backgroundColor="#fff" :statusBar="true" :title="detail.sku.product_name"></uni-nav-bar>
<button open-type="share" class="circle-btn">
<image src="/static/image/shares.png" class="share" mode=""></image>
</button>
<scroll-view scroll-y class="page-scroll">
<!-- 图集 -->
<view class="gallery">
@@ -49,7 +51,7 @@
<!-- 详情 -->
<view v-if="currentTab === 'detail'" class="detail-box">
<text class="detail-text" v-html="detail.sku.desc"></text>
<rich-text :nodes="processedDesc"></rich-text>
</view>
<!-- 评论 -->
@@ -62,7 +64,7 @@
<view v-else>
<view v-for="(item, index) in comments" :key="index" class="comment-item">
<view class="comment-heard">
<image class="comment-avatar" :src="item.user.avatar"></image>
<image class="comment-avatar" :src="item.user.avatar_pull"></image>
<view class="comment-header">
<view class="comment-header-left">
<view class="comment-name">{{item.user.nickname}}</view>
@@ -80,7 +82,7 @@
<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"></image>
<image class="reply-avatar" :src="reply.user.avatar_pull"></image>
<text class="reply-name">{{reply.user.nickname}}：</text>
<uni-icons type="trash" @click="delComment(reply.id)" v-if="openid==reply.user.openid||openid==detail.user.openid" color="#999" size="20"></uni-icons>
</view>
@@ -152,6 +154,13 @@ export default {
currentIndex: 0
}
},
computed: {
// 处理富文本内容，让图片自适应
processedDesc() {
if (!this.detail.sku || !this.detail.sku.desc) return ''
return this.processRichText(this.detail.sku.desc)
}
},
onLoad(options) {
this.postid = options.id;
this.share = options.share
@@ -160,6 +169,30 @@ export default {
this.getCommentCount()
},
methods: {
// 处理富文本HTML，让图片自适应
processRichText(html) {
if (!html) return ''
// 使用正则表达式给所有 img 标签添加样式
return html.replace(/<img([^>]*)>/gi, (match, attrs) => {
// 检查是否已有 style 属性
if (attrs.includes('style=')) {
// 如果已有 style，添加 max-width
return match.replace(/style=["']([^"']*)["']/i, (styleMatch, styleContent) => {
// 移除已有的 max-width 和 width
let newStyle = styleContent.replace(/max-width\s*:\s*[^;]+;?/gi, '').replace(/width\s*:\s*[^;]+;?/gi, '')
newStyle = newStyle.trim()
if (newStyle && !newStyle.endsWith(';')) {
newStyle += ';'
}
newStyle += 'max-width: 100%; height: auto;'
return `style="${newStyle}"`
})
} else {
// 如果没有 style，添加 style 属性
return `<img${attrs} style="max-width: 100%; height: auto;">`
}
})
},
setCurrent(idx) {
this.currentIndex = idx
},
@@ -627,7 +660,7 @@ export default {
return {
title: this.article.content,
path: `/pages/square/detiles?share=share&id=${this.article.id}`,
imageUrl: "/static/image/share.jpg" // 封面图
imageUrl:this.article.media[0].url_pull // 封面图
}
},
// 分享到朋友圈
@@ -775,19 +808,23 @@ page,
background: #dcdcdc;
}
.detail-box {
margin-bottom: 80rpx;
background: #fff;
padding: 20rpx 24rpx 40rpx;
padding: 20rpx 24rpx 190rpx;
font-size: 26rpx;
color: #444;
line-height: 1.7;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
.icons20{
width: 36rpx;
height: 36rpx;
margin-right: 20rpx;
}
.comment-section {
padding: 20rpx 30rpx 140rpx;
.comment-section {
padding: 20rpx 30rpx 190rpx;
background: #fff;
}
@@ -979,4 +1016,23 @@ page,
align-items: center;
gap: 6rpx;
}
.circle-btn {
z-index: 11;
position: fixed;
right: 20rpx;
margin-top: 20rpx;
top: 180rpx;
border-radius: 50%;
width: 80rpx;
height: 80rpx;
background: #fff;
padding: 10rpx;
display: flex;
align-items: center;
justify-content: center;
.share{
width: 34rpx;
height: 34rpx;
}
}
</style>
pages/square/index.vue
+88 -95
View File
@@ -62,70 +62,57 @@ export default {
{ key: 'near', label: '距离最近' }
],
currentTab: 'latest',
slist:[
{
username:'用户名用户名',
time:'2025 年 12 月 4 日 10:56',
content:`西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子
西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子西门子全新嵌饮机品牌
西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子`,
tag:['#散饮机','#9成新'],
location:'门店位置',
image:[
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'}
]
},{
username:'用户名用户名',
time:'2025 年 12 月 4 日 10:56',
content:`西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子
西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子西门子全新嵌饮机品牌
西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子`,
tag:['#散饮机','#9成新'],
location:'门店位置',
image:[
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'}
]
},{
username:'用户名用户名',
time:'2025 年 12 月 4 日 10:56',
content:`西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子
西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子西门子全新嵌饮机品牌
西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子全新嵌饮机品牌西门子`,
tag:['#散饮机','#9成新'],
location:'门店位置',
image:[
{img_src:'/static/image/bx.jpg'},
{img_src:'/static/image/bx.jpg'}
]
}
],
slist:[],
loading: false,
refreshing: false,
loadingMore: false,
page: 1,
pageSize: 10,
hasMore: true,
defaultTags: ['样机机', '9成新']
latitude:'',
longitude:''
}
},
onShow() {
this.loadList()
this.getFuzzy().then(res => {
this.latitude = res.latitude
this.longitude = res.longitude
console.log(res);
}).catch(err => console.error(err));
// this.syncTabbar()
},
methods: {
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') })
},
getFuzzy() {
return new Promise((resolve, reject) => {
wx.getSetting({
success: (st) => {
const ok = st.authSetting['scope.userFuzzyLocation'];
const run = () => wx.getFuzzyLocation({
type: 'wgs84',
success: resolve,
fail: reject
});
if (ok) return run();
wx.authorize({
scope: 'scope.userFuzzyLocation',
success: run,
fail: () => wx.openSetting({ success: () => reject(new Error('未授权')) })
});
},
fail: reject
});
});
},
handleContact(item) {
const phone = item.user.mobile
if (!phone) return uni.showToast({ title: '号码为空', icon: 'none' });
// 简单清洗：去空格/横杠
const num = String(phone).replace(/[^\d+]/g, '');
uni.makePhoneCall({ phoneNumber: num });
},
changeTab(key) {
if (this.currentTab === key) return
this.currentTab = key
@@ -135,50 +122,56 @@ export default {
this.loadList()
},
loadList(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.loadingMore) return
this.loading = true
this.page = 1
this.hasMore = true
this.slist = []
}
const sortKey = this.currentTab === 'near' ? 'distance' : 'latest'
request({
url: 'common/post/list',
method: 'GET',
data: {
current: this.page,
size: this.pageSize,
sort: sortKey
}
}).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) {
this.slist = [...this.slist, ...records]
} 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
}
})
if (isLoadMore) {
if (this.loadingMore || this.loading || this.refreshing || !this.hasMore) return
this.loadingMore = true
this.page += 1
} else {
if (this.loading || this.loadingMore) return
this.loading = true
this.page = 1
this.hasMore = true
this.slist = []
}
const collectUrl = this.currentTab=='latest' ? 'common/post/list' : 'common/post/nearby'
var that = this;
const params = {
current:this.page,
status:1,
size:10
};
// 添加排序参数（如果后端支持）
if(this.currentTab=='near'){
params.lng = this.longitude;
params.lat = this.latitude;
} else {
}
request({
url: collectUrl,
method: 'GET',
data: params
}).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) {
this.slist = [...this.slist, ...records]
} 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) {