image.png

    1. <template>
    2.     <view class='goods_detail'>
    3.         <swiper indicator-dots>
    4.             <swiper-item v-for="(item,index) in swipers" :key="index">
    5.                 <image :src='item.src'></image>
    6.             </swiper-item>
    7.         </swiper>
    8.         <view class='box1'>
    9.             <view class='price'>
    10.                 <text>￥{{info.sell_price}}</text>
    11.                 <text>￥{{info.market_price}}</text>
    12.                 <view class='goods_name'>{{info.title}}</view>
    13.             </view>
    14.         </view>
    16.         <view class='line'></view>
    18.         <view class='box2'>
    19.             <view>货号：{{info.goods_no}}</view>
    20.             <view>库存：{{info.stock_quantity}}</view>
    21.         </view>
    23.         <view class='line'></view>
    24.         <view class='box3'>
    25.             <view class='tit'>详情介绍</view>
    26.             <view class='content'><rich-text :nodes="content"></rich-text></view>
    28.         </view>
    29.     </view>
    30. </template>
    32. <script>
    33.     export default {
    34.         data() {
    35.             return {
    36.                 id: 0,
    37.                 swipers: [],
    38.                 info:{},
    39.                 content:null
    40.             }
    41.         },
    42.         methods: {
    43.             //获取轮播图的数据，首先会有函数
    44.             async getSwipers() {
    45.                 const res = await this.$myRequest({
    46.                     url: '/api/getthumimages/' + this.id
    47.                 })
    48.                 this.swipers = res.data.message
    49.             },
    50.             async getDetailInfo(){
    51.                 const res = await this.$myRequest({
    52.                     url:'/api/goods/getinfo/'+this.id
    53.                 })
    54.                 this.info = res.data.message[0]
    55.             },
    56.             async getDetailContent(){
    57.                 const res= await this.$myRequest({
    58.                     url:'/api/goods/getdesc/'+this.id
    59.                 })
    60.                 this.content = res.data.message[0].content
    61.             }
    62.         },
    63.         onLoad(options) {
    64.             // console.log(options)
    65.             this.id = options.id
    66.             this.getSwipers()
    67.             this.getDetailInfo()
    68.             this.getDetailContent()
    69.         }
    70.     }
    71. </script>
    73. <style lang="scss">
    74.     .goods_detail {
    75.         swiper {
    76.             height: 750rpx;
    78.             image {
    79.                 width: 100%;
    80.                 height: 100%;
    81.             }
    82.         }
    83.         .box1 {
    84.             padding: 10px;
    85.             .price {
    86.                 font-size: 35rpx;
    87.                 color: $shop-color;
    88.                 line-height: 80rpx;
    89.                 text:nth-child(2) {
    90.                     color: #ccc;
    91.                     font-size: 28rpx;
    92.                     text-decoration: line-through;
    93.                     margin-left: 20rpx;
    94.                 }
    95.             }
    96.             .goods_name {
    97.                 font-size: 35rpx;
    98.                 line-height: 60rpx;
    99.                 color:#333;
    100.             }    
    101.         }
    102.         .box2{
    103.             padding:10rpx 20rpx;
    104.             font-size: 35rpx;
    105.             line-height: 60rpx;
    106.         }
    108.         .box3{
    109.             .tit{
    110.                 font-size: 40rpx;
    111.                 padding-left: 10px;
    112.                 border-bottom: 1px solid #eee;
    113.                 line-height: 70rpx;
    114.             }
    115.             .content{
    116.                 padding:10px;
    117.                 font-size:28rpx;
    118.                 color:#333;
    119.                 line-height: 50rpx;
    121.             }
    122.         }
    123.     }
    125. .line{
    126.     height:10rpx;
    127.     width:750rpx;
    128.     background: #eee;
    129. }
    130. </style>

    接下来有几个注意点

    • 如果字符串中有标签需要解析，可以是用 rich-text :node=''> 方法。
    • 图片不能显示全并且加了样式也不起作用，可以将样式放入全局样式中 APP.VUE 文件中。