积分商城组件调用

zhiyangdu
1 parent 248e29f3
Showing 6 changed files with 134 additions and 80 deletions
src/components/goodsItem_2/goodsItem_2.less
src/components/goodsItem_2/goodsItem_2.vue
src/components/goodsItem_7/goodsItem_7.less
src/components/goodsItem_7/goodsItem_7.vue
src/pages/pointsMall/pointsMall.less
src/pages/pointsMall/pointsMall.vue
@@ -34,8 +34,12 @@
 			font-size: 24px;
 			white-space: nowrap;
 			text-overflow: ellipsis;
-			overflow: hidden;
-		}
+      overflow: hidden;
+    }
+    /**积分商城显示灰色颜色字**/
+    .grey {
+      color: #666666;
+    }
 		.price-box {
 			display: flex;
 			justify-content: flex-start;
@@ -7,8 +7,10 @@
             <slot name="flag"></slot>
         </div>
 		<div class="content-box">
-			<div class="title" v-if="pid == undefined || pid == '1' ||  pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
-			<div class="price-box" v-if="pid != '5'">
+       <!--因积分商城需要显示白色灰色字体标示 -->
+			<div class="title" :class={grey:item.grade} v-if="pid == undefined || pid == '1' ||  pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
+      <!--因积分商城不价格所有加上 !item.grade判断 -->
+			<div class="price-box" v-if="pid != '5' && !item.grade">
 				<div class="symbol">¥&nbsp;</div>
 				<div class="price">{{item.price}}</div>
 				<div class="prices" v-if="(pid == '3' || pid == '4') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div>
@@ -21,27 +23,27 @@
 </template>
 <script>
-    export default {
-        data: function () {
-            return {
+export default {
+  data: function () {
+    return {
-            }
-        },
-        props: ["item", "pid"],
-		methods: {
+    }
+  },
+  props: ["item", "pid"],
+  methods: {
-			/**
-			 * 点击跳转
-			 * @param {object} item [数据对象]
-			 */
-			jump(item) {
-				this.$emit("jump", item);
-			}
-		}
+    /**
+     * 点击跳转
+     * @param {object} item [数据对象]
+     */
+    jump (item) {
+      this.$emit("jump", item);
     }
+  }
+}
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
-    @import './goodsItem_2';
+@import './goodsItem_2';
 </style>
@@ -17,12 +17,28 @@
 			width: 100%;
 			height: 330px;
 			// height: 100%;
-			overflow: hidden;
+      overflow: hidden;
+      // 因为积分需要层叠到图片上方需要设置父级相对定位
+      position: relative;
 			.img {
 				display: block;
 				width: 100%;
 				height: auto;
-			}
+      }
+      // 积分商城需要商品是否有货显示补货中
+      .goods_active{
+        width: 100%;
+        height: 58px;
+        line-height: 58px;
+        background: #000000;
+        color: #fff;
+        font-size: 30px;
+        opacity: 0.39;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
 		}
 		.content-box {
 			margin: 0 auto;
@@ -84,7 +100,23 @@
 						height: 48px;
 					}
 				}
-			}
+      }
+      /**积分显示*/
+      .grade-box {
+        height: 50px;
+        font-size: 36px;
+        font-weight: 500;
+        color: #FC1541;
+        line-height: 50px;
+        display: flex;
+        align-items: center;
+        span{
+          font-size: 24px;
+          font-weight: 400;
+          color: #999999;
+          margin-left: 10px;
+        }
+      }
 		}
 	}
 }
@@ -3,13 +3,18 @@
 		<div class="item">
 			<div class="img-box">
 				<img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
+        <!-- 补货中按钮 -->
+        <div v-show="item.grade" class="goods_active">
+          补货中
+        </div>
 			</div>
 			<div class="content-box">
 				<div class="title">{{item.title}}</div>
 				<!-- <div class="coupon-box">
 					满180减10
 				</div> -->
-				<div class="price-box">
+        <!-- 价格 -->
+				<div  v-show="!item.grade" class="price-box">
 					<div class="left">
 						<div class="y">¥&nbsp;</div>
 						<div class="integer">{{getInteger(item.price)}}.</div>
@@ -19,70 +24,74 @@
 						<img src="static/img/icon_add.png" class="icon-add" mode="widthFix" @click.stop.prevent="primary(item)" />
 					</div>
 				</div>
+        <!-- 积分 -->
+        <div v-show="item.grade" class="grade-box">
+				   {{item.grade}}<span>积分</span>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script>
-    export default {
-        data: function () {
-            return {
+export default {
+  data: function () {
+    return {
-            }
-        },
-		props: ["item"],
-		computed: {
+    }
+  },
+  props: ["item"],
+  computed: {
-			/**
-			 * 获取输入数字的整数部分
-			 */
-			getInteger() {
-				return (number) => {
-					return parseInt(number);
-				}
-			},
+    /**
+     * 获取输入数字的整数部分
+     */
+    getInteger () {
+      return (number) => {
+        return parseInt(number);
+      }
+    },
-			/**
-			 * 获取输入数字的小数部分
-			 */
-			getDecimal() {
-				return (number) => {
+    /**
+     * 获取输入数字的小数部分
+     */
+    getDecimal () {
+      return (number) => {
-					// 拆分数字
-					let numberArr = number.toString().split(".");
+        // 拆分数字
+        let numberArr = number.toString().split(".");
-					// 判断是否有效数部分
-					if (numberArr.length === 2) {
-						return numberArr[1];
-					} else {
-						return "00";
-					}
-				}
-			}
-		},
-		methods: {
+        // 判断是否有效数部分
+        if (numberArr.length === 2) {
+          return numberArr[1];
+        } else {
+          return "00";
+        }
+      }
+    }
+  },
+  methods: {
-			/**
-			 * 点击跳转
-			 * @param {object} item [数据对象]
-			 */
-			jump(item) {
-				this.$emit("jump", item);
-			},
+    /**
+     * 点击跳转
+     * @param {object} item [数据对象]
+     */
+    jump (item) {
+      this.$emit("jump", item);
+    },
-			/**
-			 * 主按钮点击事件
-			 * @param {object} item [数据对象]
-			 */
-			 primary(item) {
-				this.$emit("primary", item);
-			}
-		}
+    /**
+     * 主按钮点击事件
+     * @param {object} item [数据对象]
+     */
+    primary (item) {
+      this.$emit("primary", item);
     }
+  }
+}
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
-    @import './goodsItem_7';
+@import './goodsItem_7';
 </style>
@@ -75,7 +75,7 @@
       display:flex;
       justify-content: space-between;
       align-items: center;
-      padding: 30px 20px;
+      padding: 10px 20px;
       .earn_icon{
         display: block;
         width: 36px;
@@ -121,7 +121,8 @@ export default {
         prices: "6.00",
         shop_type: "1",
         simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
-        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
+        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
+        grade: 1500 // 积分
       },
       {
         ads: "广告语",
@@ -130,7 +131,8 @@ export default {
         prices: "6.00",
         shop_type: "1",
         simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
-        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
+        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
+        grade: 1500 // 积分
       },
       {
         ads: "广告语",
@@ -139,7 +141,8 @@ export default {
         prices: "6.00",
         shop_type: "1",
         simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
-        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
+        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
+        grade: 1500 // 积分
       }
     ]);
     // 临时，实物商品列表
@@ -158,7 +161,8 @@ export default {
           simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
           stock: "0",
           stoptime: "0",
-          title: "aabbsdf350ml"
+          title: "aabbsdf350ml",
+          grade: 1500 // 积分
         },
         {
           activity: "0",
@@ -173,7 +177,8 @@ export default {
           simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
           stock: "0",
           stoptime: "0",
-          title: "aabbsdf350ml"
+          title: "aabbsdf350ml",
+          grade: 1500 // 积分
         },
         {
           activity: "0",
@@ -188,7 +193,8 @@ export default {
           simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
           stock: "0",
           stoptime: "0",
-          title: "aabbsdf350ml"
+          title: "aabbsdf350ml",
+          grade: 1500 // 积分
         },
         {
           activity: "0",
@@ -203,7 +209,8 @@ export default {
           simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
           stock: "0",
           stoptime: "0",
-          title: "aabbsdf350ml"
+          title: "aabbsdf350ml",
+          grade: 1500 // 积分
         }
       ]
     });