商品详情页

zhiyangdu
1 parent 5895d103
Showing 4 changed files with 32 additions and 32 deletions
src/components/swiper/swiper.less
src/components/swiper/swiper.vue
src/pages/goodDetails/goodDetails.less
src/pages/goodDetails/goodDetails.vue
@@ -73,14 +73,15 @@
   overflow: hidden;
   background: #F9F9F9;
   .swipe{
-    // width: 750px;
+    width: 100vw;
+    margin: 0;
     .swipe-item {
       // width: 750px;
       .item{
         /deep/ .img-box {
           .img {
-            width: 565px;
-            height: 446px;
+            // width: 565px;
+            // height: 446px;
           }
         }
       }
@@ -4,7 +4,8 @@
             <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
                 <div class="item" @click="$parent.$parent.gotoDetail(item)">
                     <div class="img-box">
-                        <img v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
+                        <img v-if="isPointsMall" v-lazy="item + SIGN.BIG" class="img" mode="widthFix" />
+                        <img v-else v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
                     </div>
                 </div>
             </swipe-item>
@@ -7,7 +7,14 @@
       color: #333333;
       line-height: 48px;
       text-align: center;
-      margin-top: 30px;
+      margin:30px 20px 0 20px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /*! autoprefixer: off */
+      -webkit-box-orient: vertical;
+      /*! autoprefixer: on */
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
     .title-t{
       margin:20px 60px 10px 60px ;
@@ -24,8 +24,8 @@
                     ($parent.isBack && isCNLive.value ? 62 : 10) +
                     'px'
             "
-            v-if="banner"
-            :swipers="banner"
+            v-if="goodsInfo && goodsInfo.simg"
+            :swipers="goodsInfo.simg"
             :isPointsMall= 'true'
             :options="{
                 showIndicators: true
@@ -35,12 +35,12 @@
         <!-- 内容 -->
         <div class="main-box">
             <!-- 标题 -->
-            <div class="title">
-              山东沂蒙 优质大蒜山东沂蒙 优质大蒜
+            <div v-if="goodsInfo && goodsInfo.title" class="title">
+             {{goodsInfo.title}}
             </div>
             <!-- 积分 -->
             <div class="title-t">
-              <span class="price">¥200</span>
+              <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span>
               <span class="integral">15000</span>
               <span class="integral-in">积分</span>
             </div>
@@ -84,7 +84,7 @@
           </div>
         </div>
         <!-- 地址信息组件 -->
-        <address-toast ref="itemsInfo" @toUpdate="fansShopMessageList" v-show="pointsToast_control"></address-toast>
+        <address-toast ref="itemsInfo" @toUpdate="getGoodsInfo" v-show="pointsToast_control"></address-toast>
 </div>
 </template>
  
@@ -95,21 +95,12 @@ import swiper from &quot;@/components/swiper/swiper&quot;;
 import backBox from "@/components/backBox/backBox";
 import columnListBox from "@/components/columnListBox/columnListBox";
 import addressToast from "@/components/addressToast/addressToast";
+import { Toast, Indicator } from "mint-ui";
 export default {
   data () {
     return {
-      banner: [
-        {          id: "290",
-          shop_type: "",
-          simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15d4780610.jpg",
-          title: "世行",
-          to: "0",
-          type: "0",        }, {          id: "290",
-          shop_type: "",
-          simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15d4780610.jpg",
-          title: "世行",
-          to: "0",
-          type: "0",        }],
+      banner: null,
+      goodsInfo: null,
       backs: null, // 后退按钮组
       similarGoods: null, // 相似商品
       pointsToast_control: this.$route.query.pointsToast_control,
@@ -172,7 +163,7 @@ export default {
     /**
      * 积分商品详情页页面接口
      */
-    fansShopMessageList () {
+    getGoodsInfo () {
  
       // 校验登录
       if (this.$parent.checkLogin()) {
@@ -181,9 +172,10 @@ export default {
         Indicator.open("加载中...");
  
         // 获取证书请求接口
-        this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
-          uid: this.getStore("uid")
-        }, this.fansShopMessageListCallback, {
+        this.http("/Api/" + this.getApiVersion().index + "/goods_info", {
+          uid: this.getStore("uid"),
+          id: this.$route.query.goodsId // 商品ID
+        }, this.getGoodsInfoCallback, {
             method: "POST"
           });
       }
@@ -194,7 +186,7 @@ export default {
      * @param {Object} res [服务器返回数据]
      * @param {Object} ext [扩展参数]
      */
-    fansShopMessageListCallback (res, ext) {
+    getGoodsInfoCallback (res, ext) {
  
       // 加载完成
       Indicator.close();
@@ -206,9 +198,7 @@ export default {
         let { data: datas } = res;
  
         /* 获取banner */
-
-
-
+        this.goodsInfo = datas
         /* 获取详细信息 */
  
         /* 相似商品 */
@@ -228,7 +218,8 @@ export default {
   created () {
     // 设置标题
     this.$set(this, "title", "积分商品详情页");
-
+    // 获取商品信息
+    this.getGoodsInfo();
     // ios从url获取安卓localStorage
     if (this.isiPhone.value) {
       this.pointsToast_control = this.$route.query.pointsToast_control;