领券页面提交

.idea/UniappTool.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="cn.fjdmy.uniapp.UniappProjectDataService">
+    <option name="basePath" value="$PROJECT_DIR$" />
+    <option name="generalBasePath" value="$PROJECT_DIR$" />
+    <option name="manifestPath" value="$PROJECT_DIR$/manifest.json" />
+    <option name="pagesPath" value="$PROJECT_DIR$/pages.json" />
+    <option name="scanNum" value="1" />
+    <option name="type" value="store" />
+    <option name="uniapp" value="true" />
+    <option name="uniappHx" value="true" />
+    <option name="vueVersion" value="3" />
+  </component>
+</project>

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <excludedPredefinedLibrary name="uni-api" />
+  </component>
+</project>

api/coupon.js

@@ -0,0 +1,12 @@
+import {
+	http
+} from "../util/api"
+const baseURL = "http://192.168.0.11:3000"
+export const coupon = {
+	get_coupon: (params = {}) => http.get(baseURL + '/api/coupon',params ),
+	post_coupon: (data = {}) => http.get(`${baseURL}/api/coupon/${data.user_id}`,{coupon_id:data.coupon_id} ),
+}
+export default {
+	coupon
+}
+

pages.json

@@ -160,6 +160,20 @@
 				"navigationBarTitleText" : "搜索商品",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/my/getCoupons",
+			"style" : 
+			{
+				"navigationBarTitleText" : "领券中心"
+			}
+		},
+		{
+			"path" : "pages/my/car",
+			"style" : 
+			{
+				"navigationBarTitleText" : "购物车"
+			}
 		}
 	],
 	"globalStyle": {

pages/my/car.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/my/getCoupons.vue

@@ -0,0 +1,295 @@
+<template>
+	<view class="content">
+		<view class="coupons">
+			<view class="red_envelope"></view>
+			<view class="title">满减券每日限量</view>
+			<view class="list">
+				<view class="list_box" v-for="(item,index) in discount_for_a_amount" :key="index">
+					<view class="l_left"><text>￥</text>{{item.discount}}</view>
+					<view class="l_cont">
+						<view class="lt_top">满{{item.for_a_amount}}可用</view>
+						<view class="lt_footer">消费后次日领</view>
+					</view>
+					<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
+					<view class="l_right l_right_y" v-else>已领取</view>
+
+				</view>
+				<!-- <view class="list_box1">
+					<view class="l_left"><text>￥</text>5</view>
+					<view class="l_cont">
+						<view class="lt_top">满20可用</view>
+						<view class="lt_footer">神券商家可有 消费后次日领</view>
+					</view>
+					<view class="l_right"></view>
+				</view> -->
+			</view>
+		</view>
+		<view class="coupons coupons1">
+			<view class="title">代金券天天领</view>
+			<view class="red_envelope"></view>
+			<view class="list">
+				<view class="list_box2" v-for="(item,index) in deduction" :key='index' >
+					<view class="l2_top"><text>￥</text>{{item.price}}</view>
+					<view class="l2_title">无门槛</view>
+					<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
+					<view class="l_right l_right_y" v-else>已领取</view>
+				</view>
+			</view>
+		</view>
+		<view class="coupons">
+			<view class="title">全场促销折扣券</view>
+			<view class="list">
+				<view class="list_box" v-for="(item,index) in discount" :key="index">
+					<view class="l_left">{{(item.precent/10).toFixed(0)}}<text>折</text></view>
+					<view class="l_cont">
+						<view class="lt_top">指定商品折上折</view>
+						<view class="lt_footer">神券商家可有 消费后次日领</view>
+					</view>
+					<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
+					<view class="l_right l_right_y" v-else>已领取</view>
+				</view>
+				<!-- <view class="list_box1">
+					<view class="l_left"><text>￥</text>5</view>
+					<view class="l_cont">
+						<view class="lt_top">满20可用</view>
+						<view class="lt_footer">神券商家可有 消费后次日领</view>
+					</view>
+					<view class="l_right"></view>
+				</view> -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { onMounted, ref } from 'vue';
+	import { coupon } from '@/api/coupon.js'
+	let discount_for_a_amount = ref([]) // 满减券
+	let deduction = ref([]) // 抵扣券
+	let discount = ref([]) // 折扣券
+	const data_get_coupon = async () => {
+		let user = uni.getStorageSync('user')
+		let { coupon: data } : any = await coupon.get_coupon({ user_id: user.id })
+		discount_for_a_amount.value = data.filter((item : any) => {
+			return item.type === 'discount_for_a_amount'
+		})
+		deduction.value = data.filter((item : any) => {
+			return item.type === 'deduction'
+		})
+		discount.value = data.filter((item : any) => {
+			return item.type === 'discount'
+		})
+	}
+	const receive_coupon = async (id : any) => {
+		console.log(id, 'id')
+		let user = uni.getStorageSync('user')
+		let coupon_id = id
+		console.log({ user_id: user.id, coupon_id })
+		let data = await coupon.post_coupon({ user_id: user.id, coupon_id })
+		console.log(data)
+		data_get_coupon()
+	}
+	onMounted(() => {
+		data_get_coupon()
+	})
+</script>
+
+<style scoped lang="scss">
+	.content {
+		height: 100vh;
+		width: 100%;
+		background: url('@/static/my/bg.jpg') no-repeat transparent;
+		background-size: 100% 100%;
+		padding: 20rpx;
+
+		.coupons {
+			margin-top: 50rpx;
+			position: relative;
+			border-radius: 15rpx;
+			background-color: #fff;
+			padding: 10rpx;
+			width: 100%;
+
+			.red_envelope {
+				width: 220rpx;
+				height: 220rpx;
+				background: url('@/static/my/red_envelope.png') no-repeat transparent;
+				background-size: 100% 100%;
+				position: absolute;
+				top: -50rpx;
+				left: -25rpx;
+				z-index: 1;
+			}
+
+			.title {
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 30rpx;
+				color: #305def;
+				font-weight: bold;
+			}
+
+			.list {
+				position: relative;
+				z-index: 1;
+				padding: 10rpx;
+
+				.list_box {
+					padding-left: 10rpx;
+					padding-right: 10rpx;
+					margin-top: 20rpx;
+					align-items: center;
+					height: 132rpx;
+					background: url('@/static/my/gr.png') no-repeat transparent;
+					background-size: 100% 100%;
+					color: #305def;
+					display: flex;
+					justify-content: space-between;
+
+					.l_left {
+						font-weight: bold;
+						font-size: 50rpx;
+
+						text {
+							font-size: 20rpx;
+						}
+					}
+
+					.l_cont {
+						.lt_top {
+							font-size: 30rpx;
+							font-weight: bold;
+						}
+
+						.lt_footer {
+							font-size: 24rpx;
+						}
+					}
+
+					.l_right {
+						width: 180rpx;
+						padding: 10rpx 20rpx;
+						background-color: #305def;
+						color: #fff;
+						text-align: center;
+						border-radius: 30rpx;
+					}
+				}
+
+				.list_box1 {
+					margin-top: 20rpx;
+					align-items: center;
+					height: 132rpx;
+					padding: 10rpx;
+					background: url('@/static/my/grc.png') no-repeat transparent;
+					background-size: 100% 100%;
+					color: #7e91b4;
+					display: flex;
+
+					.l_left {
+						margin-left: 30rpx;
+						font-weight: bold;
+						font-size: 50rpx;
+
+						text {
+							font-size: 20rpx;
+						}
+					}
+
+					.l_cont {
+						margin-left: 40rpx;
+
+						.lt_top {
+							font-size: 30rpx;
+							font-weight: bold;
+						}
+
+						.lt_footer {
+							font-size: 24rpx;
+						}
+					}
+
+					.l_right {
+						margin-left: 90rpx;
+						width: 110rpx;
+						height: 100rpx;
+						background: url('@/static/my/over.png') no-repeat transparent;
+						background-size: 100% 100%;
+					}
+				}
+			}
+		}
+
+		.coupons1 {
+			.red_envelope {
+				width: 150rpx;
+				height: 150rpx;
+				background: url('@/static/my/logo.png') no-repeat transparent;
+				background-size: 100% 100%;
+				position: absolute;
+				top: -50rpx;
+				left: -10rpx;
+				z-index: 1;
+			}
+
+			.list {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 20rpx;
+			}
+
+			.list_box2 {
+				margin-bottom: 20rpx;
+				margin-right: 25rpx;
+				width: 200rpx;
+				height: 180rpx;
+				background: url('@/static/my/bg1.png') no-repeat transparent;
+				background-size: 100% 100%;
+				color: #305def;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.l2_top {
+					margin-top: 10rpx;
+					font-size: 40rpx;
+					font-weight: bold;
+
+					text {
+						font-size: 20rpx;
+					}
+				}
+
+				.l2_title {
+					font-size: 24rpx;
+				}
+				.l_right {
+					margin-top: 30rpx;
+					width: 140rpx;
+					padding: 10rpx 20rpx;
+					background-color: #305def;
+					color: #fff;
+					font-size: 16rpx;
+					text-align: center;
+					border-radius: 30rpx;
+				}
+				
+
+				.l2_footer {
+					font-size: 24rpx;
+					margin-top: 30rpx;
+				}
+
+				&:nth-child(3n) {
+					margin-right: 0rpx;
+				}
+
+			}
+		}
+		.l_right_y{
+			background-color: #92ACFF !important;
+		}
+	}
+</style>

pages/my/my.vue

@@ -45,12 +45,12 @@
 							我的兑换
 						</view>
 					</view>
-					<view class="item">
+					<view class="item" @click="shop_car">
 						<view class="count">
 							283
 						</view>
 						<view class="title">
-							我的收藏
+							购物车
 						</view>
 					</view>
 				</view>
@@ -87,7 +87,7 @@
 				</view>
 
 				<view class="menu-list">
-					<view class="menu-item">
+					<view class="menu-item" @click="navigatorSrc">
 						<u-image src="/static/my/01.png" width="40%" mode="widthFix"></u-image>
 						<view class="menu-text">
 							领券中心
@@ -182,6 +182,17 @@
 			url: '/pages/login/login'
 		})
 	}
+  const navigatorSrc = ()=>{
+    uni.navigateTo({
+      url:'/pages/my/getCoupons'
+    })
+  }
+  //购物车跳转
+  const shop_car = ()=>{
+	  uni.navigateTo({
+	  	url:'/pages/my/car'
+	  })
+  }
 </script>
 
 <style scoped lang="scss">