147 lines
3.0 KiB
Vue
147 lines
3.0 KiB
Vue
<template>
|
|
<view class="warpbox">
|
|
<view class="proli">
|
|
<view class="label">产品名称</view>
|
|
<view class="right">{{info.name ? info.name : ''}}</view>
|
|
</view>
|
|
<view class="proli">
|
|
<view class="label">产品编号</view>
|
|
<view class="right">{{info.num ? info.num : ''}}</view>
|
|
</view>
|
|
<view class="proli">
|
|
<view class="label">产品单位</view>
|
|
<view class="right">{{info.unit ? info.unit : ''}}</view>
|
|
</view>
|
|
<view class="proli">
|
|
<view class="label">产品零售价</view>
|
|
<view class="right">{{info.price ? info.price : ''}}</view>
|
|
</view>
|
|
<view class="proli">
|
|
<view class="label">产品批发价</view>
|
|
<view class="right">{{info.wholesale ? info.wholesale : ''}}</view>
|
|
</view>
|
|
<view class="proli">
|
|
<view class="label">产品图片</view>
|
|
<image :src="info.img" @click="toPreimg" class="proimg"></image>
|
|
</view>
|
|
<view class="proli_con">
|
|
<view class="label">产品详情</view>
|
|
<view class="product_Detail">
|
|
<rich-text :nodes="detail"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { netProductDetail } from '@/api/kehu.js'
|
|
|
|
export default{
|
|
data() {
|
|
return{
|
|
id:'',
|
|
info:{},
|
|
detail:''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = options.id
|
|
//商品详情
|
|
this.getDetail()
|
|
},
|
|
methods:{
|
|
getDetail() {
|
|
netProductDetail({id:this.id}).then(res=>{
|
|
this.info = res.data
|
|
this.handleDetail(res.data)
|
|
})
|
|
},
|
|
handleDetail(data) {
|
|
let detail = data.description
|
|
var jsonDa = JSON.stringify(detail).replace(/<img/gi, "<img class='richImg' style='height:auto!important;width:100%;'");
|
|
var newResData = JSON.parse(jsonDa);
|
|
console.log(newResData,'=====')
|
|
this.detail = newResData
|
|
},
|
|
toPreimg() {
|
|
let url = this.info.img
|
|
uni.previewImage({
|
|
urls: [ url ]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.warpbox{
|
|
background:#fff;
|
|
}
|
|
.proli_con{
|
|
padding:24rpx 30rpx;
|
|
.label{
|
|
font-size:24rpx;
|
|
color:#333;
|
|
margin-bottom:24rpx;
|
|
}
|
|
.product_Detail{
|
|
width:100%;
|
|
font-size:24rpx;
|
|
rich-text .richImg{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
vertical-align: middle;
|
|
height: auto!important;
|
|
width: auto!important;
|
|
}
|
|
}
|
|
}
|
|
.proli{
|
|
padding:24rpx 30rpx;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.label{
|
|
font-size:24rpx;
|
|
color:#333;
|
|
}
|
|
.right{
|
|
font-size:24rpx;
|
|
color:#999;
|
|
}
|
|
.proimg{
|
|
width:100rpx;
|
|
height:100rpx;
|
|
}
|
|
}
|
|
.pro_text{
|
|
padding:24rpx 30rpx;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
.label{
|
|
font-size:24rpx;
|
|
color:#333;
|
|
}
|
|
.partlist{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top:30rpx;
|
|
.partli{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right:24rpx;
|
|
.partimg{
|
|
width:100rpx;
|
|
height:100rpx;
|
|
}
|
|
.partname{
|
|
font-size:24rpx;
|
|
color:#333;
|
|
margin-top:10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |