lilei 4 anni fa
parent
commit
a2354d4696

+ 40 - 0
components/uni-cart-fix/uni-cart-fix.vue

@@ -0,0 +1,40 @@
+<template>
+	 <view class="cart-fix" @click="toCart">
+	 	<u-image width="50rpx" height="50rpx" src="/static/cart.png"></u-image>
+	 	<u-badge absolute :offset="[15,10]" type="error" :count="count"></u-badge>
+	 </view>
+</template>
+	<script>
+		export default {
+			props: {
+				count: {
+					type: Number,
+					default: 0
+				},
+			},
+			data() {
+				return {
+				}
+			},
+			methods: {
+				toCart() {
+					uni.navigateTo({
+						url:"/pages/cart/cart"
+					})
+				}
+			},
+		}
+	</script>
+
+<style lang="scss">
+	.cart-fix{
+		position: fixed;
+		z-index: 100000;
+		background: rgba($color: #00aa00, $alpha: 0.9);
+		padding: 20upx;
+		border-radius: 100%;
+		bottom: 15%;
+		right: 5%;
+		box-shadow: 0upx 3upx 8upx #999;
+	}
+</style>

+ 23 - 1
components/uni-coods/uni-coods.vue

@@ -1,6 +1,9 @@
 <template>
 	<view class="goods-item">
-		<u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
+		<view class="goods-imgs">
+			<view v-if="data.status == 1" class="goods-staus">已售罄</view>
+			<u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
+		</view>
 		<view class="name">{{data.name}}</view>
 		<view class="price">
 			<view><text>{{data.price}}</text>乐豆</view>
@@ -38,6 +41,25 @@
 	box-shadow: 1px 1px 3px #eee;
 	width: 48%;
 	margin-bottom: 35upx;
+	border-radius: 10upx;
+	.goods-imgs{
+		position: relative;
+		.goods-staus{
+			width: 120rpx;
+			height: 120rpx;
+			position: absolute;
+			z-index: 10000;
+			border-radius: 100%;
+			background: rgba($color: #000000, $alpha: 0.5);
+			text-align: center;
+			line-height: 120rpx;
+			left: 50%;
+			top: 50%;
+			margin-top: -60rpx;
+			margin-left: -60rpx;
+			color: #eee;
+		}
+	}
 	.name{
 		padding: 10upx 20upx 0;
 	}

+ 4 - 4
package-lock.json

@@ -1,13 +1,13 @@
 {
-  "name": "qhsxKx-mini-html",
+  "name": "zxyj-mini-html",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "uview-ui": {
-      "version": "1.5.7",
-      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.5.7.tgz",
-      "integrity": "sha512-brNsxtXYNRFVISCehLXT+ZXmtaWh7gydrOokokYXvJUy5MkuZozMu+TdwA4mIo9y40FqKz6iO5gGWJuXyCSE5w=="
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.7.7.tgz",
+      "integrity": "sha512-CpSWQyRlOYkPLOWWhFM5so6Epy3Wp+7HGPg2rGyMaC9kKHEv848a2T7xq6qgZsVjcYZOZwJCMJel7TiZZKNV8w=="
     }
   }
 }

+ 1 - 1
package.json

@@ -14,6 +14,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "uview-ui": "^1.5.7"
+    "uview-ui": "^1.7.7"
   }
 }

+ 9 - 0
pages.json

@@ -39,6 +39,15 @@
 				"navigationBarTitleText": "注意事项及服务协议"
 			}
 		}
+        ,{
+            "path" : "pages/cart/cart",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "购物车",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",

+ 19 - 0
pages/cart/cart.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		pages/cart/cart
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

+ 18 - 11
pages/index/index.vue

@@ -1,16 +1,19 @@
 <template>
 	<view class="content">
 		<u-swiper height="200" :list="imageTopList"></u-swiper>
+		<!-- 商品 -->
 		<view class="goods">
-			<u-section title="人气零食" :show-line="false" sub-title="更多"></u-section>
-			<view class="goods-list">
+			<u-section title="人气零食" v-if="goodsList.length" :show-line="false" sub-title="更多"></u-section>
+			<view class="goods-list" v-if="goodsList.length">
 				<uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
 			</view>
-			<u-section title="居家生活" :show-line="false" sub-title="更多"></u-section>
-			<view class="goods-list">
+			<u-section title="居家生活" v-if="goodsList.length" :show-line="false" sub-title="更多"></u-section>
+			<view class="goods-list" v-if="goodsList.length">
 				<uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
 			</view>
 		</view>
+		<!-- 购物车 -->
+		<uni-cart-fix :count="15"></uni-cart-fix>
 	</view>
 </template>
 
@@ -33,33 +36,37 @@
 		data() {
 			return {
 				imageTopList:[
-					{photo:'https://cdn.uviewui.com/uview/example/fade.jpg'},
-					{photo:'https://cdn.uviewui.com/uview/example/fade.jpg'}
+					{image:'https://cdn.uviewui.com/uview/example/fade.jpg'},
+					{image:'https://cdn.uviewui.com/uview/example/fade.jpg'}
 				],
 				goodsList:[
 					{
 						id: 21312312321,
 						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
-						src: 'https://cdn.uviewui.com/uview/example/fade1.jpg',
-						price: 50
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 0
 					},
 					{
 						id: 6465465465,
 						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
 						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
-						price: 50
+						price: 50,
+						status: 1
 					},
 					{
 						id: 234324,
 						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
 						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
-						price: 50
+						price: 50,
+						status: 0
 					},
 					{
 						id: 4453455,
 						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
 						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
-						price: 50
+						price: 50,
+						status: 0
 					}
 				]
 			}

BIN
static/cart.png


BIN
static/imgError.png