From 832569c7d5fd7660161c9801bb59950186ed0858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Mon, 6 Sep 2021 17:26:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=A7=AF=E5=88=86=E5=95=86?=
 =?UTF-8?q?=E5=9F=8E=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/lf-code/lf-barcode.vue         |   1 +
 components/lf-code/lf-qrcode.vue          |   1 +
 pages.json                                |   7 +
 pages/point/shoppingMall/shoppingMall.vue | 279 ++++++++++++++++++++++
 4 files changed, 288 insertions(+)
 create mode 100644 pages/point/shoppingMall/shoppingMall.vue

diff --git a/components/lf-code/lf-barcode.vue b/components/lf-code/lf-barcode.vue
index 3b68bd9..3552469 100644
--- a/components/lf-code/lf-barcode.vue
+++ b/components/lf-code/lf-barcode.vue
@@ -34,6 +34,7 @@
 			}
 		},
 		created() {
+			// https://ext.dcloud.net.cn/plugin?id=4662
 			this.height = this.options.height + 'rpx';
 			this.width = this.options.width + 'rpx';
 			this.SpecialTreatment(this.options)
diff --git a/components/lf-code/lf-qrcode.vue b/components/lf-code/lf-qrcode.vue
index f5ec7c7..621163d 100644
--- a/components/lf-code/lf-qrcode.vue
+++ b/components/lf-code/lf-qrcode.vue
@@ -33,6 +33,7 @@
 			}
 		},
 		created() {
+			// https://ext.dcloud.net.cn/plugin?id=4662
 			this.size = this.options.size + 'rpx';
 			this.SpecialTreatment(this.options)
 			this.$nextTick(()=>{
diff --git a/pages.json b/pages.json
index 48797d8..3725ee9 100644
--- a/pages.json
+++ b/pages.json
@@ -797,6 +797,13 @@
 				"navigationBarTitleText": "会员码",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/point/shoppingMall/shoppingMall",
+			"style" : {
+				"navigationBarTitleText": "积分商城",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/point/shoppingMall/shoppingMall.vue b/pages/point/shoppingMall/shoppingMall.vue
new file mode 100644
index 0000000..8cd0333
--- /dev/null
+++ b/pages/point/shoppingMall/shoppingMall.vue
@@ -0,0 +1,279 @@
+<template>
+	<view>
+		<lf-nav title="积分商城" titleColor="#fff" bgColor="transparent" :showIcon="true" :spreadOut="false"></lf-nav>
+		<view class="head">
+			<view class="bg-view"></view>
+		</view>
+		<view class="menu">
+			<view class="left">
+				<view>
+					<text class="lf-iconfont icon--"></text>
+					<text class="point-num">783</text>
+					<text class="lf-iconfont icon--"></text>
+				</view>
+				<view class="lf-font-24">当前积分</view>
+			</view>
+			<view class="lf-flex">
+				<view class="item">
+					<text class="lf-iconfont icon-- lf-font-50"></text>
+					<text>兑换记录</text>
+				</view>
+				<view class="item">
+					<text class="lf-iconfont icon-- lf-font-50"></text>
+					<text>购物车</text>
+					<view class="angle-mark">99+</view>
+				</view>
+			</view>
+		</view>
+		<view class="lf-m-t-30" v-if="tab_list.length">
+			<u-tabs :list="tab_list" 
+				active-color="#15716E" 
+				inactive-color='#777777' 
+				:is-scroll="true" 
+				:current="tab_current" 
+				@change="tabChange">
+			</u-tabs>
+		</view>
+		<view class="page-item">
+			<view class="filter">
+				<view :class="{'filter-item': true, 'filter-active': index == filter_current}" 
+					v-for="(item, index) in filter_list" :key="index"
+					@click="filter_current = index">{{ item }}
+				</view>
+			</view>
+			<view class="goods">
+				<lf-waterfall :list="goods_list"></lf-waterfall>
+			</view>
+		</view>
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	export default {
+		components: {
+			lfWaterfall
+		},
+		data(){
+			let _public = {
+				page: 1,
+				isPage: true,
+				loadingClass: true,
+				loadingText: '正在加载中'
+			}
+			return {
+				tab_current: 0,
+				tab_list: [{
+					name: '全部',
+					list: [],
+					..._public
+				},{
+					name: '时尚尖货',
+					list: [],
+					..._public
+				},{
+					name: '美容美妆',
+					list: [],
+					..._public
+				},{
+					name: '家具用品',
+					list: [],
+					..._public
+				},{
+					name: '儿童玩具',
+					list: [],
+					..._public
+				}],
+				filter_list: ['1～100','100～1万','1万～2万','2万～5万','>5万'],
+				filter_current: null,
+				goods_list: [
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					}
+				]
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			tabChange(event){
+				this.tab_current = event;
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		overflow-x: hidden;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.head{
+		width: 750rpx;
+		height: 283rpx;
+		background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
+		position: relative;
+		overflow: hidden;
+		.bg-view{
+			position: absolute;
+			right: -100rpx;
+			top: -200rpx;
+			width: 400rpx;
+			height: 400rpx;
+			border-radius: 50%;
+			background-color: rgba(255,255,255,0.04);
+		}
+	}
+	.menu{
+		width: 686rpx;
+		height: 170rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		padding: 30rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		color: #15716E;
+		margin: -80rpx auto 0;
+		position: relative;
+		z-index: 2;
+		.left{
+			width: 340rpx;
+			.point-num{
+				font-size: 48rpx;
+				font-weight: bold;
+				margin: 0 10rpx;
+			}
+		}
+		.item{
+			width: 100rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+			font-size: 24rpx;
+			position: relative;
+			&:nth-child(2n){
+				margin-left: 40rpx;
+			}
+			.angle-mark{
+				width: 30rpx;
+				height: 30rpx;
+				background-color: #FF9D9D;
+				color: #FFFFFF;
+				border-radius: 50%;
+				position: absolute;
+				right: 10rpx;
+				top: 10rpx;
+				font-size: 18rpx;
+				text-align: center;
+				line-height: 30rpx;
+			}
+		}
+	}
+	
+	.page-item{
+		width: 750rpx;
+		height: max-content;
+		.filter{
+			width: 100%;
+			height: 83rpx;
+			border: 1rpx solid #e5e5e5;
+			box-sizing: border-box;
+			padding: 0 32rpx;
+			display: flex;
+			align-items: center;
+			.filter-item{
+				width: 123rpx;
+				height: 43rpx;
+				font-size: 24rpx;
+				color: #777777;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 26rpx;
+				&:nth-child(n+2){
+					margin-left: 28rpx;
+				}
+				&.filter-active{
+					background-color: #15716E;
+					color: #FFFFFF;
+				}
+			}
+		}
+		.goods{
+			padding: 30rpx 32rpx;
+		}
+	}
+	
+	// tabs 样式修改
+	/deep/.u-scroll-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+		width: max-content;
+	}
+	/deep/.u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 80rpx!important;
+		position: absolute;
+		left: 0;
+		bottom: -12rpx;
+	}
+	
+	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 56rpx!important;
+		position: absolute;
+		height: 5rpx!important;
+		left: 8rpx;
+		bottom: -4rpx;
+	}
+	
+	/deep/ .u-tab-item {
+		font-size: 28rpx!important;
+	}
+</style>