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

17
pages/listen/home.vue
View File

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