2023-5-22

api/water.js

@@ -31,3 +31,22 @@ export function category_goods(data) {
 		data
 	});
 }
+
+
+// 获取水票
+export function certificate(data) {
+	return request({
+		url: '/api/user/certificate',
+		method: 'get',
+		data
+	});
+}
+// 水票使用记录
+export function use_certificate(data) {
+	return request({
+		url: '/api/user/use_certificate',
+		method: 'get',
+		data
+	});
+}
+

pages.json

@@ -77,20 +77,21 @@
 					}
 				},
 				{
-					"path": "/myWaterList",
+					"path": "/deposit",
 					"style": {
-						"navigationBarTitleText": "我的水票"
+						"navigationBarTitleText": "我的押金"
 					}
 				},
 				{
-					"path": "/deposit",
+					"path": "/waterUse",
 					"style": {
-						"navigationBarTitleText": "我的押金"
+						"navigationBarTitleText": "使用记录"
 					}
 				},
 				{
-					"path": "list",
+					"path": "/myWaterList",
 					"style": {
+						"navigationStyle": "custom",
 						"navigationBarTitleText": "我的水票",
 						"navigationBarBackgroundColor": "#3C82E6",
 						"navigationBarTextStyle": "white"

pages/home/index.vue

@@ -2,7 +2,7 @@
 	<view class="container">
 		<!-- 顶部logo and 搜索 start-->
 		<view class="index-top-wrap">
-			<image src="../../static/image/index-top.png" mode="scaleToFill" class="index-top"></image>
+			<view class="index-top-image index-top"></view>
 			<view class="status_bar fud"></view>
 			<view class="top-search flex fud">
 				<view class="search-box flex" @click="clickSearch()">
@@ -847,12 +847,13 @@
 	// }
 	.index-top-wrap {
 		position: relative;
-
-		.index-top {
+		.index-top-image{
+			position: absolute;
 			width: 750rpx;
 			height: 288rpx;
-			position: absolute;
-
+			border-bottom-right-radius: 30rpx;
+			border-bottom-left-radius: 30rpx;
+			background:$bg-gradual;
 		}
 
 		.fud {

pages/water/deposit.vue

@@ -1,8 +1,180 @@
 <template>
+	<view class="good-list">
+		<uni-nav-bar class="nav" @clickLeft='back' :border='false' backgroundColor='transparent' leftIcon='left'
+			color='#FFF' title="我的余额" />
+		<view class="good flex" v-for="item in navList[tabCurrentIndex].orderList">
+			<image :src="item.image" mode="" class="good-image"></image>
+			<view class="right">
+				<view class="good-name ">
+					<view class="clamp2">
+						{{item.store_name}}
+					</view>
+				</view>
+				<view class="good-key">
+					{{item.keyword}}
+				</view>
+				<view class="good-price flex">
+					<view class="price">
+						￥{{item.price}}/{{item.unit_name}}
+					</view>
+					<navigator :url="'/pages/water/waterDetail?id='+item.id">
+						<view class="xl">
+							立即购买
+						</view>
+					</navigator>
+				</view>
+			</view>
+		</view>
+		<uni-load-more :status="navList[tabCurrentIndex].loadingType"></uni-load-more>
+	</view>
 </template>
 
 <script>
+	import {
+		certificate
+	} from '@/api/water.js';
+	export default {
+		data() {
+			return {
+				tabCurrentIndex: 0,
+				navList: [{
+					state: 0,
+					text: '全部',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				}]
+			};
+		},
+		onReachBottom() {
+			this.getGoodList();
+		},
+		onLoad: function(option) {
+			this.getGoodList();
+		},
+		methods: {
+			// 加载数据
+			getGoodList(source) {
+				//这里是将订单挂载到tab列表下
+				let index = this.tabCurrentIndex;
+				let navItem = this.navList[index];
+				let state = navItem.state;
+				console.log(navItem, '数据');
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+
+				certificate({})
+					.then(({
+						data
+					}) => {
+						let arr = data.data.map(e => {
+							return e;
+						});
+						navItem.orderList = navItem.orderList.concat(arr);
+						// console.log(navItem.orderList);
+						navItem.page++;
+						if (navItem.limit == arr.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+		}
+	};
 </script>
 
-<style>
-</style>
+
+<style lang="scss">
+	.good-list {
+		padding: 20rpx 28rpx;
+		width: 750rpx;
+
+		.good {
+			background: #FFFFFF;
+			box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
+			width: 100%;
+			border-radius: 14rpx;
+			margin-bottom: 20rpx;
+			position: relative;
+			padding: 20rpx;
+
+			.good-image {
+				width: 180rpx;
+				height: 180rpx;
+				background-color: #eee;
+				border-radius: 10rpx;
+				flex-shrink: 0;
+
+			}
+
+			.right {
+				height: 180rpx;
+				position: relative;
+
+				.good-name {
+					font-size: 28rpx;
+					font-weight: bold;
+					color: #333333;
+					padding-left: 20rpx;
+				}
+
+				.good-key {
+					font-size: 22rpx;
+					font-weight: 500;
+					color: #999999;
+					padding-left: 20rpx
+				}
+
+				.good-price {
+					display: flex;
+					justify-content: space-between;
+					align-items: flex-end;
+					font-size: 28rpx;
+					font-weight: bold;
+					color: #FF1A1A;
+					position: absolute;
+					bottom: 0rpx;
+					padding: 0 20rpx;
+					left: 0;
+					right: 0rpx;
+
+					.xl {
+						background: linear-gradient(90deg, #3C82E6, #5395F5);
+						border-radius: $font-base;
+						padding: 10rpx 20rpx;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+	.nav {
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		z-index: 998;
+	}
+</style>

pages/water/list.vue

@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

pages/water/myWaterList.vue

@@ -1,8 +1,252 @@
 <template>
+	<view class="good-list">
+		<uni-nav-bar class="nav" @clickLeft='back' :border='false' backgroundColor='transparent' leftIcon='left'
+			color='#FFF' title="我的水票" />
+		<view class="content-money">
+			<view class="conetnt-box">
+				<view class="money-box">
+					<view class="money">{{ allNumber }}</view>
+					<view class="text">剩余总数</view>
+				</view>
+				<navigator url="./waterUse">
+					<view class="topDetail">
+						使用记录
+					</view>
+				</navigator>
+			</view>
+		</view>
+
+		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
+			<!-- 空白页 -->
+			<!-- #ifdef H5 -->
+			<empty src="../../static/error/emptyMyCart.png"
+				v-if="navList[tabCurrentIndex].loaded === true && navList[tabCurrentIndex].orderList.length === 0">
+			</empty>
+			<!-- #endif -->
+			<!-- #ifndef H5 -->
+			<empty src="../static/error/emptyMyCart.png"
+				v-if="navList[tabCurrentIndex].loaded === true && navList[tabCurrentIndex].orderList.length === 0">
+			</empty>
+			<!-- #endif -->
+			<view class="good flex" v-for="item in navList[tabCurrentIndex].orderList">
+				<image :src="item.product.image" mode="" class="good-image"></image>
+				<view class="right">
+					<view class="good-name ">
+						<view class="clamp2">
+							{{item.product.store_name}}
+						</view>
+					</view>
+					<view class="good-key">
+						{{item.product.keyword}}
+					</view>
+					<view class="good-price">
+						剩余<text class="num">{{item.certificate_num}}</text>张
+					</view>
+				</view>
+			</view>
+			<uni-load-more :status="navList[tabCurrentIndex].loadingType"></uni-load-more>
+		</scroll-view>
+
+	</view>
 </template>
 
 <script>
+	import {
+		certificate
+	} from '@/api/water.js';
+	export default {
+		data() {
+			return {
+				tabCurrentIndex: 0,
+				navList: [{
+					state: 0,
+					text: '全部',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				}]
+			};
+		},
+		computed: {
+			allNumber() {
+				const item = this.navList[0].orderList;
+				let num = 0;
+				for (let i = 0; i < item.length; i++) {
+					num += item[i].certificate_num
+				}
+				return num
+			}
+		},
+		onReachBottom() {
+			this.getGoodList();
+		},
+		onLoad: function(option) {
+			this.getGoodList();
+		},
+		methods: {
+			// 返回退回
+			back() {
+				uni.reLaunch({
+					url: '/pages/home/user'
+				})
+			},
+			// 加载数据
+			getGoodList(source) {
+				//这里是将订单挂载到tab列表下
+				let index = this.tabCurrentIndex;
+				let navItem = this.navList[index];
+				let state = navItem.state;
+				console.log(navItem, '数据');
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+
+				certificate({})
+					.then(({
+						data
+					}) => {
+						let arr = data.data
+						console.log(arr, 'arr');
+						navItem.orderList = navItem.orderList.concat(arr);
+						// console.log(navItem.orderList);
+						navItem.page++;
+						if (navItem.limit == arr.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+		}
+	};
 </script>
 
-<style>
-</style>
+
+<style lang="scss">
+	.good-list {
+		width: 750rpx;
+		height: 100%;
+
+		.good {
+			background: #FFFFFF;
+			box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
+			width: 100%;
+			border-radius: 14rpx;
+			margin-bottom: 20rpx;
+			position: relative;
+			padding: 20rpx;
+
+			.good-image {
+				width: 180rpx;
+				height: 180rpx;
+				background-color: #eee;
+				border-radius: 10rpx;
+				flex-shrink: 0;
+
+			}
+
+			.right {
+				height: 180rpx;
+				position: relative;
+
+				.good-name {
+					font-size: 28rpx;
+					font-weight: bold;
+					color: #333333;
+					padding-left: 20rpx;
+				}
+
+				.good-key {
+					font-size: 22rpx;
+					font-weight: 500;
+					color: #999999;
+					padding-left: 20rpx
+				}
+
+				.good-price {
+					font-size: 28rpx;
+					font-weight: bold;
+					position: absolute;
+					bottom: 0rpx;
+					padding: 0 20rpx;
+					left: 0;
+					right: 0rpx;
+
+					.num {
+						color: $color-red;
+					}
+				}
+			}
+		}
+	}
+
+	.list-scroll-content {
+		height: calc(100% - 200px - var(--status-bar-height));
+		padding: 20rpx;
+	}
+
+	.nav {
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		z-index: 998;
+	}
+
+	.content-money {
+		position: relative;
+		padding: 20rpx;
+		padding-top: var(--status-bar-height);
+		background: url('../../static/image/mywater.png') no-repeat;
+		background-size: 100% 100%;
+		height: 200px;
+
+		.topDetail {
+			position: absolute;
+			right: 0;
+			top: calc(70px + var(--status-bar-height));
+			background-color: #FFF;
+			padding: 5px 10px;
+			border-top-left-radius: 10rpx;
+			border-bottom-left-radius: 10rpx;
+			line-height: 1;
+			color: $base-color;
+			font-size: $font-base;
+		}
+
+		.money-box {
+			padding-top: 80px;
+			text-align: center;
+			color: #FFF;
+
+			.text {
+				font-size: $font-base;
+			}
+
+			.money {
+				font-weight: bold;
+				font-size: 82rpx;
+			}
+		}
+	}
+</style>

pages/water/waterUse.vue

@@ -0,0 +1,192 @@
+<template>
+	<view class="good-list">
+		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
+			<!-- 空白页 -->
+			<!-- #ifdef H5 -->
+			<empty src="../../static/error/emptyMyCart.png"
+				v-if="navList[tabCurrentIndex].loaded === true && navList[tabCurrentIndex].orderList.length === 0">
+			</empty>
+			<!-- #endif -->
+			<!-- #ifndef H5 -->
+			<empty src="../static/error/emptyMyCart.png"
+				v-if="navList[tabCurrentIndex].loaded === true && navList[tabCurrentIndex].orderList.length === 0">
+			</empty>
+			<!-- #endif -->
+			<view class="good flex" v-for="item in navList[tabCurrentIndex].orderList">
+				<image :src="item.product.image" mode="" class="good-image"></image>
+				<view class="right">
+					<view class="good-name ">
+						<view class="clamp2">
+							{{item.product.store_name}}
+						</view>
+					</view>
+					<view class="good-key">
+						{{item.product.keyword}}
+					</view>
+					<view class="good-price">
+						剩余<text class="num">{{item.certificate_num}}</text>张
+					</view>
+				</view>
+			</view>
+			<uni-load-more :status="navList[tabCurrentIndex].loadingType"></uni-load-more>
+		</scroll-view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		use_certificate
+	} from '@/api/water.js';
+	export default {
+		data() {
+			return {
+				tabCurrentIndex: 0,
+				navList: [{
+					state: 0,
+					text: '全部',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				}]
+			};
+		},
+		computed: {
+			allNumber() {
+				const item = this.navList[0].orderList;
+				let num = 0;
+				for (let i = 0; i < item.length; i++) {
+					num += item[i].certificate_num
+				}
+				return num
+			}
+		},
+		onReachBottom() {
+			this.getGoodList();
+		},
+		onLoad: function(option) {
+			this.getGoodList();
+		},
+		methods: {
+			// 返回退回
+			back() {
+				uni.reLaunch({
+					url: '/pages/home/user'
+				})
+			},
+			// 加载数据
+			getGoodList(source) {
+				//这里是将订单挂载到tab列表下
+				let index = this.tabCurrentIndex;
+				let navItem = this.navList[index];
+				let state = navItem.state;
+				console.log(navItem, '数据');
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+
+				use_certificate({
+							page: navItem.page,
+							limit: navItem.limit
+						})
+					.then(({
+						data
+					}) => {
+						let arr = data.data
+						navItem.orderList = navItem.orderList.concat(arr);
+						navItem.page++;
+						if (navItem.limit == arr.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+		}
+	};
+</script>
+
+
+<style lang="scss">
+	.good-list {
+		width: 750rpx;
+		height: 100%;
+
+		.good {
+			background: #FFFFFF;
+			box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
+			width: 100%;
+			border-radius: 14rpx;
+			margin-bottom: 20rpx;
+			position: relative;
+			padding: 20rpx;
+
+			.good-image {
+				width: 180rpx;
+				height: 180rpx;
+				background-color: #eee;
+				border-radius: 10rpx;
+				flex-shrink: 0;
+
+			}
+
+			.right {
+				height: 180rpx;
+				position: relative;
+
+				.good-name {
+					font-size: 28rpx;
+					font-weight: bold;
+					color: #333333;
+					padding-left: 20rpx;
+				}
+
+				.good-key {
+					font-size: 22rpx;
+					font-weight: 500;
+					color: #999999;
+					padding-left: 20rpx
+				}
+
+				.good-price {
+					font-size: 28rpx;
+					font-weight: bold;
+					position: absolute;
+					bottom: 0rpx;
+					padding: 0 20rpx;
+					left: 0;
+					right: 0rpx;
+					.num{
+						color:$color-red;
+					}
+				}
+			}
+		}
+	}
+
+	.list-scroll-content {
+		height: calc(100% - 200px - var(--status-bar-height));
+		padding: 20rpx;
+	}
+
+</style>