You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
4.6 KiB
146 lines
4.6 KiB
<template>
|
|
|
|
<loading-state ref="pageView" @request="request">
|
|
<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>
|
|
<view
|
|
style="display: flex;flex-direction: row;justify-content: space-between;width: 80vw;position: relative;height: 16vw;align-items: center;color: white;">
|
|
<view>
|
|
<text style="font-size: 14px;font-weight: 600;">￥</text>
|
|
<text style="font-size: 24px;margin-left: 7px;font-weight: 500;">{{data.price}}</text>
|
|
</view>
|
|
<view>价值</view>
|
|
</view>
|
|
|
|
<view
|
|
style="left: 25px;font-size: 18px;width: 90vw;margin: 10px 0px;font-weight: 600;margin-left: 18px;">
|
|
{{data.name}}
|
|
</view>
|
|
</view>
|
|
|
|
<view style="display: flex;flex-direction: column;align-items: center;margin-left: 9px;margin-right: 9px;">
|
|
<view
|
|
style="border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;background-color: #f9f9f9;width: 100%;display: flex;flex-direction: row;">
|
|
<image src="../../static/guige.png"
|
|
style="width: 21px;height: 21px;margin-left: 12px;margin-top: 9px;margin-bottom: 12px;"></image>
|
|
<view
|
|
style="height: 21px;line-height: 21px;margin-top: 9px;font-size: 13px;color: #666666;margin-left: 5px;">
|
|
规格：
|
|
{{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;">规    格</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>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
page: {
|
|
sid: ''
|
|
},
|
|
data: {
|
|
picUrl: '',
|
|
name: '',
|
|
price: '',
|
|
remarks: '',
|
|
appContent: ""
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
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: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)
|
|
})
|
|
}).catch(e => {
|
|
_this.$nextTick(() => {
|
|
_this.$refs.pageView.setLoadState(1)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
uni-page-body,
|
|
page {
|
|
background: #f3f4f6;
|
|
}
|
|
</style>
|