增加图片

src/common/CheckBox.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="check-wrap" v-if="item">
     <p class="quest">{{item.name}}</p>
+    <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
     <p v-for="(it,index) in item.questionDetailList" class="list">
       <img src="../images/check-default.png">
       <span>{{it.name}}</span>
@@ -8,11 +9,12 @@
   </div>
 </template>
 <script type="text/javascript">
+import tools from '@utils/tools.js';
   export default{
     name:'CheckBox',
     data(){
       return{
-
+        imgUrl:tools.imageUrlPrefix
       }
     },
     props:['item']
@@ -25,10 +27,14 @@
       color:#000;
       margin-bottom: .2rem;
     }
+    img{
+      width:100%;
+    }
     .list{
       color: #7C828E;
-      margin-bottom: .1rem;
+      margin:0 .1rem .1rem 0;
       padding: .12rem .1rem;
+      display: inline-block;
       img{
         width: .38rem;
         vertical-align: middle;

src/common/Radio.vue

@@ -1,21 +1,31 @@
 <template>
   <div class="radio-wrap" v-if="item">
     <p class="quest">{{item.name}}</p>
-    <p v-for="(it,index) in item.questionDetailList" class="list">
-      <img src="../images/radio-default.png">
+    <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
+    <p v-for="(it,index) in item.questionDetailList" :key="it.id" class="list">
+      <img :src="index==current?check:defaultPic" @click="handleClick(it,index)">
       <span>{{it.name}}</span>
     </p>
   </div>
 </template>
 <script type="text/javascript">
+import icon from '../images/radio-default.png'
+import checkIcon from '../images/radio-check.png'
   export default{
     name:'Radio',
     data(){
       return{
-
+        defaultPic:icon,
+        check:checkIcon,
+        current:null
       }
     },
-    props:['item']
+    props:['item'],
+    methods:{
+      handleClick(item,index){
+        this.current = index;console.log(123,item)
+      }
+    }
   }
 </script>
 <style lang="less" scoped>
@@ -25,10 +35,14 @@
       color:#000;
       margin-bottom: .2rem;
     }
+    img{
+      width:100%;
+    }
     .list{
       color: #7C828E;
-      margin-bottom: .1rem;
+      margin:0 .1rem .1rem 0;
       padding: .12rem .1rem;
+      display: inline-block;
       img{
         width: .38rem;
         vertical-align: middle;

src/components/Detail.vue

@@ -25,6 +25,6 @@ import CheckBox from '../common/CheckBox.vue';
 </script>
 <style lang="less" scoped>
   .detail-wrap{
-    padding: .3rem .5rem .3rem .6rem;
+    padding: .3rem .5rem 2.1rem .6rem;
   }
 </style>

src/utils/tools.js

@@ -1,5 +1,6 @@
 
 const qs = require('qs');
+const imageUrlPrefix = 'http://192.168.2.236:82' //后台图片地址
 
 const getUrlArgObject = (parm) => {
     let query = window.location.search;
@@ -8,5 +9,6 @@ const getUrlArgObject = (parm) => {
 } 
 
 module.exports =  {
+  imageUrlPrefix,
   getUrlArgObject
 }