显示题目详情接口

src/views/cnctestlists/cncTestLists.html

@@ -43,85 +43,31 @@
         </div>
     </main>
     <div class="dialog" v-show="isShowDialog">
-        <div class="dialog-content">
+        <div class="dialog-content" v-if="cncTestDetailSingle!=null">
             <img class="close" src="../../assets/images/close-white.png" alt="" @click="close">
             <div class="content-box">
-                <div class="dialog-title">标题：测测你的隐形人格</div>
+                <div class="dialog-title">标题：{{cncTestDetailSingle.title}}</div>
                 <div class="dialog-qr" ref="dialogQR" v-loading="loading">
-                    <div class="qr-item">
-                        <span class="title">题目一：你的个人情况是什么样的？</span>
-                        <div class="qr-as-text">
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                        </div>
-                    </div>
-                    <div class="qr-item">
-                        <span class="title">题目二：你的个人情况是什么样的？</span>
-                        <div class="qr-as-img">
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                    <div v-for="(questionItem, index) in cncTestDetailSingle.questionList" :key="index">
+                        <div class="qr-item"
+                            v-if="questionItem.optionList[0]!=null && (questionItem.optionList[0].imageUrl==null||questionItem.optionList[0].imageUrl=='')">
+                            <span class="title">{{index+1|currentOptionNum}}：{{questionItem.content}}</span>
+                            <div class="qr-as-text">
+                                <span v-for="(qrItem, index) in questionItem.optionList"
+                                    :key="qrItem.optionId">{{index+1|transtion}}. {{qrItem.content}}</span>
                             </div>
                         </div>
-                    </div>
-                    <div class="qr-item">
-                        <span class="title">题目一：你的个人情况是什么样的？</span>
-                        <div class="qr-as-text">
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
+                        <div class="qr-item" v-else>
+                            <span class="title">{{index+1|currentOptionNum}}：{{questionItem.content}}</span>
+                            <div class="qr-as-img">
+                                <div class="qr-img" v-for="(qrItem, index) in questionItem.optionList"
+                                    :key="qrItem.optionId">
+                                    <img class="qr-image" :src="qrItem.imageUrl" alt="">
+                                    <span class="qr-desc">{{index+1|transtion}}. {{qrItem.content}}</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>

src/views/cnctestlists/cncTestLists.scss

@@ -279,6 +279,9 @@
             flex-direction: column;
             padding-left: 55px;
             margin-top: 6px;
+            span{
+              font-size: 14px;
+            }
           }
 
           .qr-as-img {

src/views/cnctestlists/cncTestLists.vue

@@ -10,6 +10,7 @@
         },
         data() {
             return {
+                cncTestDetailSingle: null,
                 houseList: [],
                 value: '',
                 isShowDialog: false,
@@ -29,6 +30,38 @@
 
             this.getCncTestcaseList();
         },
+        filters: {
+            transtion(val) {
+                return String.fromCharCode(64 + parseInt(val));
+            },
+            currentOptionNum(section) {
+                var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
+                var chnUnitChar = ["", "十", "百", "千", "万", "亿", "万亿", "亿亿"];
+                var strIns = '', chnStr = '';
+                var unitPos = 0;
+                var zero = true;
+                while (section > 0) {
+                    var v = section % 10;
+                    if (v === 0) {
+                        if (!zero) {
+                            zero = true;
+                            chnStr = chnNumChar[v] + chnStr;
+                        }
+                    } else {
+                        zero = false;
+                        strIns = chnNumChar[v];
+                        strIns += chnUnitChar[unitPos];
+                        chnStr = strIns + chnStr;
+                    }
+                    unitPos++;
+                    section = Math.floor(section / 10);
+                }
+                if (chnStr.indexOf("一十") == 0) {
+                    chnStr = chnStr.substr(1);
+                }
+                return "题目" + chnStr;
+            }
+        },
         methods: {
             getCncTestcaseList() {
                 let data = {
@@ -44,13 +77,15 @@
                 })
             },
             cncTestDetail(testcaseId) {
+                let that = this;
                 let data = {
-                    "testcaseId": testcaseId,
+                    testcaseId
                 }
                 api.cncTestDetail(data).then((res) => {
                     if (res.success) {
-                       console.log("cncTestDetail",res)
+                        that.cncTestDetailSingle = res.single;
                     }
+                    that.loading = false;
                 })
             },
             showQRDialog(testcaseId) {
@@ -60,12 +95,11 @@
                 setTimeout(() => {
                     this.$refs.dialogQR.scroll(0, 0)
                 }, 1);
-                setTimeout(() => {
-                    this.loading = false;
-                }, 3000);
+
             },
             close() {
                 this.isShowDialog = false;
+                this.cncTestDetailSingle = null;
             },
             handleCommand(command) {
                 this.houseList.forEach(element => {