zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

详情页点击图片放大+听书logo不居中

Browse Source
This commit is contained in:
@fawn-nine
2023-10-20 14:34:01 +08:00
parent ae340d1944
commit 1e8dc0ee9a
2 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
pages/bookShop/commodityDetail.vue
View File

@@ -8,7 +8,8 @@
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
style="width: 100%;height: 100%;">
<swiper-item v-for="(item,index) in swiperlist" :key="index" style="width: 100%;height: 100%;">
<image :src="item" mode="aspectFit" style="width: 100%;height: 100%;" @click="previewImage(item)"></image>
<image :src="item" mode="aspectFit" style="width: 100%;height: 100%;" @click="previewImage(item)">
</image>
</swiper-item>
</swiper>
</view>
@@ -36,7 +37,7 @@
<view v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
<view class="spbh" v-for="(item, index) in linkProducts" :key="item.id">
<view class="flexbox aligncenter" @click="previewProduct(item,index)">
<view class="spbhimg" >
<view class="spbhimg">
<image :src="item.productImages" mode="aspectFit"></image>
</view>
<text class="username nowrap ">{{item.productName}}</text>
@@ -111,8 +112,8 @@
<!-- <view class="commodityIntroduce" v-html="productInfo.productDetails"> -->
<view class="commodityIntroduce">
<view v-if="productInfo.productDetails">
<rich-text v-if="productInfo.productDetails" class="xiangqing"
:nodes="productInfo.productDetails|formatRichText" ></rich-text>
<rich-text v-if="productInfo.productDetails" class="xiangqing" @itemclick="showImg"
:nodes="productInfo.productDetails|formatRichText"></rich-text>
</view>
</view>
</view>
@@ -122,7 +123,8 @@
</view>
<view class="pingjia" v-else>
<view class="">
<view style="font-weight: 700;margin-bottom: 30rpx;">评价({{commentsList?commentsList.length:0}})</view>
<view style="font-weight: 700;margin-bottom: 30rpx;">评价({{commentsList?commentsList.length:0}})
</view>
<!-- <view class="icon-del rotate"></view> -->
</view>
<!-- 商品评价 -->
@@ -176,7 +178,8 @@
<view class="imgBox">
<image v-if="linkimg == ''" src="../../static/icon/wufeng.jpg" mode="aspectFit"
style="width: 100%; height: 100%;"></image>
<image v-else :src="linkimg" mode="aspectFit" style="width: 100%; height: 100%;" @click="previewImage(linkimg)"></image>
<image v-else :src="linkimg" mode="aspectFit" style="width: 100%; height: 100%;"
@click="previewImage(linkimg)"></image>
<view class="xiangxi" v-if="productId != linkProducts[linkCur].productId"
@click="gotoDetail(linkProducts[linkCur])">
<text>查看详情</text>
@@ -185,8 +188,8 @@
<view :class="['spbh', linkCur == index ? 'cur' :'']" v-for="(item, index) in linkProducts"
:key="item.id">
<view class="flexbox aligncenter" @click="previewProduct(item,index)">
<view class="spbhimg" >
<image :src="item.productImages" mode="aspectFit" ></image>
<view class="spbhimg">
<image :src="item.productImages" mode="aspectFit"></image>
</view>
<text class="username nowrap ">{{item.productName}}</text>
<text class="price"
@@ -200,7 +203,6 @@
</view>
</u-popup>
</view>
<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
<music-play :playData="playData"></music-play>
@@ -213,7 +215,7 @@
import {
mapState
} from 'vuex';
import loginVue from '../user/login.vue';
import loginVue from '../user/login.vue';
export default {
data() {
return {
@@ -223,7 +225,7 @@
options: [{
icon: 'cart',
text: '购物车'
}],
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
@@ -253,7 +255,7 @@
listenList: [], // 关联得听书
linkProducts: [], // 关联的商品,
upoShow: false, // 显示底部购买选项
linkCur: 0, // 当前选中的关联项
linkCur: 0, // 当前选中的关联项
}
},
onLoad(e) {
@@ -269,7 +271,13 @@
components: {
musicPlay
},
methods: {
methods: {
showImg(e) {
// console.log(e,'点击的内容')
// let contentimg = e.target.dataset.nodes;
this.previewImage(e.target.node.attrs.src)
},
gotoDetail(item) {
// console.log(item,'gotoDetail')
uni.navigateTo({
@@ -295,14 +303,14 @@
})
.then(res => {
console.log('关联商品', res)
if (res.code == 0) {
if (res.code == 0) {
if (res.result.length > 0) {
this.linkProducts = res.result
this.linkimg = this.linkProducts[0].productImages
this.linkCur = 0
}else{
} else {
this.linkProducts = []
}
}
}
})
.catch(e => {
@@ -320,9 +328,9 @@
console.log(url)
uni.previewImage({
urls: [url],
longPressActions:{
itemList:['很抱歉，暂不支持保存图片到本地'],
success:function(res){
longPressActions: {
itemList: ['很抱歉，暂不支持保存图片到本地'],
success: function(res) {
// console.log(res,'+++++')
}
}
@@ -479,17 +487,17 @@
// console.log(e)
if (e.index == 0) {
// 点击的是加入购物车
// console.log('+.........',this.linkProducts,'this.linkProducts')
if (this.linkProducts.length == 0) {
this.addCart()
// console.log('+.........',this.linkProducts,'this.linkProducts')
if (this.linkProducts.length == 0) {
this.addCart()
} else {
this.upoShow = true
}
} else {
// 点击的是立即购买
if (this.linkProducts.length == 0) {
this.goPurse()
if (this.linkProducts.length == 0) {
this.goPurse()
} else {
this.upoShow = true
}
@@ -699,6 +707,10 @@
'max-width:100%;');
return match;
});
// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
// match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
// return match;
// });
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
@@ -710,7 +722,9 @@
url: '../peanut/shopping'
});
},
clickImg() {
console.log('点击了图片')
}
},
filters: {
/**

17
pages/listen/home.vue
View File

@@ -4,11 +4,14 @@
<public-module></public-module>
<z-nav-bar title="我的听书"></z-nav-bar>
<view class="home_bg">
<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
<view v-if="showEbook" class="search_box" @click="onPageJump('./searchFor')">
<view class="icon_hua_1">
<image src="../../static/icon/home_icon_1.png" mode="aspectFit" ></image>
</view>
<!-- <view v-if="showEbook" class="search_box" @click="onPageJump('./searchFor')">
<text class="icon_search"></text>
<text class="prompt">搜索...</text>
</view>
</view> -->
</view>
<!-- <view class="contentButton">
<u-tabs :scrollable="false" bg-color="#d4d4d4" active-color="#2979ff" inactive-color="#606266"
@@ -481,13 +484,17 @@
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 100rpx 0 40rpx 0;
// padding: 100rpx 0 40rpx 0;
position: relative;
.icon_hua_1 {
margin: 0 auto;
width: 150rpx;
height: 150rpx;
padding: 40rpx 0;
image{
width: 150rpx;
height: 150rpx;
}
}
.search_box {