添加商品详情页

src/router/index.js

@@ -62,6 +62,10 @@ const routes = [
         path: '/home/myCenter/goodsDetail',
         component: () => import('@/views/HomeView/GoodsDetail.vue')
       },
+      {
+        path: '/home/pointsMall/goodDetail',
+        component: () => import('@/views/HomeView/GoodDetail.vue')
+      },
       {
         path: '/home/welfareList',
         component: () => import('@/views/HomeView/WelfareList.vue')

src/views/HomeView/GoodDetail.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="timeline-container">
+        <!-- <el-breadcrumb separator="/" style="margin-bottom: 13px">
+            <el-breadcrumb-item :to="{ path: '/home/pointsMall' }">积分商城</el-breadcrumb-item>
+            <el-breadcrumb-item>商品详情</el-breadcrumb-item>
+        </el-breadcrumb> -->
+        <div class="timeline-content">
+            <div class="timeline-entry-list">
+                <div class="article">
+                    <!-- <div class="article-title">
+                        {{ data.title }}
+                    </div>
+                    <div class="author-info-block">
+                        <div class="meta-box"> 
+                            {{ data.createTime }}
+                        </div>
+                    </div> -->
+                    
+                    <div class="markdown-body" v-html="data.skuDesc"></div>
+                    
+                </div>
+            </div>
+            <SiderInfo></SiderInfo>
+        </div>
+    </div>
+</template>
+<script>
+import { integralInfo } from "@/api/allApi";
+import SiderInfo from '@/components/SiderInfo.vue'
+export default{
+  components: {
+    SiderInfo
+  },
+  data() {
+    return {
+        data:{},
+    };
+  },
+  created(){
+    this.getDataInfo(this.$route.query.id);
+  },
+  methods:{
+ 
+        getDataInfo(id){
+            integralInfo({skuId:id}).then(response => {
+                    this.data = response.data.data;
+                }).catch(() => {})
+        },
+  },
+}
+</script>
+<style scoped>
+.userInfo{
+    width: 65px;
+    position: absolute;
+    top: 37%;
+    left: 46%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+}
+.timeline-container{
+    margin: 0 auto;
+}
+.timeline-entry-list{
+    margin-right: 17.5rem;
+    border-radius: 2px;
+    width: 720px;
+    position: relative;
+}
+.timeline-entry-list .article{
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    padding-top: 2.667rem;
+    z-index: 1;
+    overflow: hidden;
+    background-color: #fff;
+    padding-left: 2.67rem;
+    padding-right: 2.67rem;
+    margin-bottom: 2rem;
+    box-sizing: border-box;
+}
+.article .article-title{
+    margin: 0 0 1rem;
+    font-size: 1.667rem;
+    font-weight: 600;
+    line-height: 1.31;
+    color: #252933;
+}
+.article .author-info-block{
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.667rem
+}
+.article .markdown-body {
+    overflow: hidden;
+    line-height: 1.75;
+    font-size: 15px;
+    /* background-image: linear-gradient(90deg,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0),linear-gradient(1turn,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0); */
+    background-size: 20px 20px;
+    background-position: 50%;
+    padding-top: 0!important;
+    min-height: 280px;
+}
+.markdown-body img {
+    max-width: 100%;
+}
+.markdown-body p {
+    color: #412c0c;
+    letter-spacing: 1px;
+    font-weight: 400;
+}
+.author-info-block .meta-box{
+    font-size: 1rem;
+    color: #8a919f;
+    margin-top: 2px;
+    line-height: 22px;
+}
+</style>

src/views/HomeView/GoodsDetail.vue

@@ -96,7 +96,7 @@
               <td>
                 <div class="prize-info">
                   <div class="prize-img-container">
-                    <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="[data.imgUrl]"
+                    <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="imgUrls.length==0?[data.imgUrl]:imgUrls"
                                         class="prize-img"></el-image>
                   </div>
                   <div class="prize-detail-info">
@@ -186,6 +186,7 @@ export default {
       logs: [],
       skuCount: 1,
       data: {},
+      imgUrls:[],
     };
   },
   created() {
@@ -197,6 +198,12 @@ export default {
       orderInfo({ orderId: orderId }).then((response) => {
         this.data = response.data.data;
         this.logs = response.data.data.logs;
+        let imgs = response.data.data.imgs;
+        if(imgs){
+          imgs.forEach(element => {
+            this.imgUrls.push(element.url);
+            });
+        }               
       })
     },
     handleClickConfirm(val) {

src/views/HomeView/PointsMall.vue

@@ -64,11 +64,11 @@
                         <div v-else class="prize-list">
                             <div v-for="(item, index) in goodsList" :key="index" class="prize-card prize-item">
                                 <div class="img-container">
-                                    <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="[item.imgUrl]"
+                                    <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="item.imgUrls.length==0?[item.imgUrl]:item.imgUrls"
                                         class="prize-img"></el-image>
                                 </div>
                                 <div class="content">
-                                    <h3 :title="item.name" class="title">{{ item.name }}</h3>
+                                    <h3 :title="item.name" class="title" @click="handleClickGood(item.skuId)">{{ item.name }}</h3>
                                     <p class="desc"><span v-if="item.deliveryTypeName">{{ item.deliveryTypeName }}</span></p>
                                     <p class="redeem-info">
                                         <span title="积分" class="price">
@@ -249,6 +249,14 @@ export default {
         this.getNotice(this.activeName);
     },
     methods: {
+        handleClickGood(id) {
+            this.$router.push({
+                path: '/home/pointsMall/goodDetail',
+                query: {
+                    id: id,
+                }
+            });
+        },
         handleFilter() {
             this.page = 1;
             this.getFirstList();
@@ -349,14 +357,25 @@ export default {
             }
 
             integralList(params).then(response => {
+                let list = response.data.data.list;
+                list.forEach((element,index) => {
+                    let imgUrls = []
+                    if(element.imgs){
+                        for (let i in element.imgs) {
+                            imgUrls.push(element.imgs[i].url)
+                        }
+                    } 
+                    list[index].imgUrls = imgUrls;
+                });
+                console.log(list);
                 if (this.page == 1) {
-                    this.goodsList = response.data.data.list;
+                    this.goodsList = list;
                     this.page = response.data.data.pageNum;
                     this.pages = response.data.data.pages;
                 } else {
                     this.goodsList = [
                         ...this.goodsList,
-                        ...response.data.data.list
+                        ...list
                     ]
                 }
                 ++this.page
@@ -487,6 +506,7 @@ button {
 
 .prize-card .content .desc,
 .prize-card .content .title {
+    cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

src/views/HomeView/RedeemView.vue

@@ -105,11 +105,11 @@
                             <td>
                                 <div class="prize-info">
                                     <div class="prize-img-container">
-                                        <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="[data.imgUrl]"
+                                        <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="imgUrls.length==0?[data.imgUrl]:imgUrls"
                                             class="prize-img"></el-image>
                                     </div>
                                     <div class="prize-detail-info">
-                                        <h3 class="title">{{ data.name }}</h3>
+                                        <h3 class="title" @click="handleClickGood(data.skuId)">{{ data.name }}</h3>
                                         <!-- <p class="desc">
                                             <span v-if="data.location">{{ data.location }}</span>
                                         </p> -->
@@ -393,6 +393,7 @@ export default {
             skuCount: 1,
             total: undefined,
             data: {},
+            imgUrls:[],
             dialogFormOrderInfo: false,
             dialogFormPhoneNumber: false,
             addressDetail: false,
@@ -459,6 +460,14 @@ export default {
         this.getInfo(skuId, activeName);
     },
     methods: {
+        handleClickGood(id) {
+            this.$router.push({
+                path: '/home/pointsMall/goodDetail',
+                query: {
+                    id: id,
+                }
+            });
+        },
         handleClick(){
             this.dialogVisible = true;
         },
@@ -548,6 +557,13 @@ export default {
                             this.address = this.contactInfo.contactAddr;
                         }
                         this.total = response.data.data.price;
+                        let imgs = response.data.data.imgs;
+                        if(imgs){
+                            imgs.forEach(element => {
+                                this.imgUrls.push(element.url);
+                            });
+                        }
+                        
                     })
                     .catch(() => { });
             } else {
@@ -896,6 +912,7 @@ img {
 }
 
 .table .prize-detail-info .title {
+    cursor: pointer;
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;