product_platform/yxt-yyth-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

22023-12-4

Browse Source
This commit is contained in:
guoxing
2023-12-04 17:45:16 +08:00
parent dd91461b40
commit 7883d3203c
34 changed files with 356 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
pages/good/goodsDetail.vue
View File

@@ -2,8 +2,8 @@
<loading-state ref="pageView" @request="request">
<view>
<image :src="data.picUrl" style="width: 100vw;height: 100vw;background-color: #FFFFFF;"></image>
<view
<image :src="data.picUrl" style="width: 100vw;height: 80vw;"></image>
<!-- <view
style="margin-top: 9px;margin-left: 9px;margin-right: 9px;border-top-left-radius: 13px;border-top-right-radius: 13px;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;padding-top: 11px;">
<image src="../../static/goods_price_bg.png"
style="width: 90vw;height: 16vw;border-radius: 10px;position: absolute;"></image>
@@ -33,7 +33,33 @@
{{data.remarks}}
</view>
</view>
</view> -->
<view style="display: flex;flex-direction: column;background: #fff;padding: 20px;margin-top: 10px;
border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;">
<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text>
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
<text style="font-size: 13px;color: #666;">规&ensp;&ensp;&ensp;&ensp;格</text>
<text style="font-size: 13px;color: #999;">{{data.remarks}}</text>
</view>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;">
<view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view>
<text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text>
</view>
<view style="margin-top: 10px;" v-show="!data.appContent==''">
<rich-text :nodes="data.appContent | formatRichText" ></rich-text>
</view>
</view>
</view>
</loading-state>
</template>
@@ -49,7 +75,8 @@
picUrl: '',
name: '',
price: '',
remarks: ''
remarks: '',
appContent: ""
}
}
},
@@ -57,12 +84,47 @@
this.page.sid = options.sid
this.request()
},
filters: {
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
formatRichText(html) {
//控制小程序中图片大小
if (html) {
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
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;"');
return newContent;
} else {
return '暂无商品详情';
}
},
},
methods: {
request() {
let _this = this
_this.$api.goodsDetail(this.page.sid).then((resp) => {
console.log(resp);
_this.data = resp
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(2)
})