Procházet zdrojové kódy

feat:添加兑换中心页面和授权弹窗页面,修改请求接口封装

wangsisi před 1 měsícem
rodič
revize
df38f197fc

+ 3 - 2
api/config.js

@@ -1,7 +1,8 @@
 const config = {
-	BASIC_IMG: "https://birdseye-img.sysuimars.com/youwei-uniapp/",
-	BASE_URL: 'https://feiniaotech-dev.sysuimars.cn/',
+	BASIC_IMG: "https://birdseye-img.sysuimars.com/youwei-uniapp/", // 图片地址
+	BASE_URL: 'https://feiniaotech-dev.sysuimars.cn/', //开发环境
 	BASE_URL_MINI: 'https://feiniaotech-dev.sysuimars.cn/mini/',
+	BASE_URL_PRO: 'https://birdseye-api.feiniaotech.sysuimars.cn/',//生产环境
 }
 
 export default config

+ 10 - 0
api/user.js

@@ -0,0 +1,10 @@
+// api/index.js
+import http from '@/utils/http'
+import config from './config'
+
+export default {
+  userInfo() {
+    return http.get('mini/bbs_my/userInfo')
+  },
+  
+}

+ 10 - 0
pages.json

@@ -16,6 +16,9 @@
 			"path": "pages/tabBar/mine/mine"
 		},
 		{
+			"path": "pages/login/index"
+		},
+		{
 			"path" : "pages/tabBar/tree/subPages/dynamic",
 			"style" : 
 			{
@@ -70,6 +73,13 @@
 			{
 				"navigationBarTitleText" : "我的订单"
 			}
+		},
+		{
+			"path" : "pages/tabBar/mine/subPages/exchange",
+			"style" : 
+			{
+				"navigationBarTitleText" : "兑换中心"
+			}
 		}
 	],
 	"globalStyle": {

+ 0 - 52
pages/index/index.vue

@@ -1,52 +0,0 @@
-<template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
-</style>

+ 189 - 0
pages/login/index.vue

@@ -0,0 +1,189 @@
+<template>
+	<view class="base-container">
+		<image class="tabbar" src="https://birdseye-img.sysuimars.com/dinggou-mini/tabbar-new.png" mode="" />
+	</view>
+	<up-popup :show="showPopup" mode="center" round="10" :overlay="false" :safeAreaInsetBottom="false" bgColor="transparent">
+		<view class="popup">
+			<button class="avatar-none" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+				<view class="avatar-wrapper">
+					<image class="avatar" :src="userData.icon"></image>
+					<view class="photo-icon">
+						<up-icon color="#fff" size="20" name="camera-fill"></up-icon>
+					</view>
+				</view>
+			</button>
+			<view class="tips">设置头像,可以在地图上显示自己守护树的点位哦~</view>
+			<button class="arrow-icon" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
+				<view class="button">微信授权</view>
+			</button>
+		</view>
+	</up-popup>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	import { onLoad } from '@dcloudio/uni-app'
+	import USER from '@/api/user.js'
+
+	const showPopup = ref(true);
+	const userData = ref({})
+	const pageUrl = ref('')
+	const pageParams = ref(null)
+	
+	onLoad(({route_path,params = "{}"}) =>{
+		pageUrl.value = route_path
+		pageParams.value = params
+		getUserData()
+	})
+
+	
+	const getUserData = () =>{
+	    USER.userInfo().then(res =>{
+	      const timestamp = res.data.birthDate && Date.parse(res.data.birthDate); // 返回毫秒级时间戳
+		  userData.value = res.data
+	    })
+	}
+	
+	const onChooseAvatar = (e) =>{
+	    const { avatarUrl } = e.detail 
+	    // wx.showLoading({title: '上传中'})
+	    // upload(this.data.userInfo.id + "/" + new Date().getTime() + ".png", avatarUrl, (res) => {
+	    //   that.setData({
+	    //     'userInfo.icon':BASE_IMG_DIR+res.key,
+	    //   })
+	    //   wx.hideLoading()
+	    // })
+	}
+	
+	const onGetPhoneNumber = (e) =>{
+	    if (e.detail.code) {
+	      // getPhone({code:e.detail.code}).then(res =>{
+	      //   if(res.success){
+	      //     this.setData({'userInfo.tel':res.data})
+	      //     that.saveUserInfo(that.data.userInfo)
+	      //   }
+	      // })
+	    }else{
+	      console.log("用户拒绝了授权");
+	    }
+	}
+	
+	const saveUserInfo = (params) =>{
+	    // saveUser(params).then(response =>{
+	    //   wx.hideLoading()
+	    //   if(response.success){
+	    //     wx.showToast({
+	    //       title: '保存成功',
+	    //       icon: 'none',
+	    //       duration: 2000,
+	    //       mask:true
+	    //     })
+	    //     const params = {
+	    //       showPopup:true
+	    //     }
+	    //     wx.reLaunch({
+	    //       url: `/pages/tabBar/home/index?route_path=lj_home&params=${JSON.stringify(params)}`
+	    //     })
+	    //   }else{
+	    //     wx.showToast({
+	    //       title: '保存失败',
+	    //       icon: 'none',
+	    //       duration: 2000,
+	    //       mask:true
+	    //     })
+	    //   }
+	    // })
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "@/static/style/mixin.scss";
+
+	.base-container {
+		background-image: url('https://birdseye-img.sysuimars.com/dinggou-mini/login-new.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		background-position: center center;
+
+		.tabbar {
+			width: 100%;
+			height: 112rpx;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+		}
+	}
+
+	.popup {
+		width: 86vw;
+		padding: 40rpx;
+		box-sizing: border-box;
+		background-image: url('https://birdseye-img.sysuimars.com/dinggou-mini/popup-bg.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		background-position: center center;
+
+		.avatar-none {
+			width: auto;
+			height: auto;
+			display: contents;
+			pointer-events: none;
+
+			.avatar-wrapper {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-bottom: 40rpx;
+				position: relative;
+
+				.avatar {
+					width: 176rpx;
+					height: 176rpx;
+					border-radius: 50%;
+					object-fit: cover;
+					pointer-events: auto;
+				}
+
+				.photo-icon {
+					pointer-events: auto;
+					position: absolute;
+					bottom: -6rpx;
+					right: calc(50% - 64rpx - 40rpx);
+					width: 64rpx;
+					height: 64rpx;
+					border-radius: 50%;
+					background: #2199F8;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border: 4rpx solid #fff;
+				}
+			}
+		}
+
+		.tips {
+			font-size: 30rpx;
+			color: #666666;
+			margin-bottom: 48rpx;
+		}
+
+		.arrow-icon {
+			width: auto;
+			height: auto;
+			text-align: left;
+			background: transparent;
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		.button {
+			font-size: 32rpx;
+			text-align: center;
+			background: #2199F8;
+			color: #fff;
+			border-radius: 16rpx;
+		}
+	}
+</style>

+ 8 - 2
pages/tabBar/mine/mine.vue

@@ -11,12 +11,12 @@
 			<view class="user-right">收货地址</view>
 		</view>
 		<view class="grid-wrap">
-			<view class="grid-item ">
+			<view class="grid-item" @click="handlePage('0')">
 				<view class="grid-name">守护兑换</view>
 				<text class="grid-text">积累能量获大礼</text>
 				<image class="image" :src="`${config.BASIC_IMG}img/gift.png`"></image>
 			</view>
-			<view class="grid-item coupon">
+			<view class="grid-item coupon" @click="handlePage('1')">
 				<view class="grid-name">优惠券</view>
 				<text class="grid-text">满100减50</text>
 				<image class="icon" :src="`${config.BASIC_IMG}img/coupon.png`"></image>
@@ -71,6 +71,12 @@ import config from "@/api/config.js"
 const orderList = ["待付款","待发货","待收货","待评价","退款/售后"]
 const imageList = []
 
+const handlePage = (type) =>{
+	uni.navigateTo({
+		url: `/pages/tabBar/mine/subPages/exchange?type=${type}`
+	});
+}
+
 const handleItem = () =>{
 	uni.navigateTo({
 		url: `/pages/tabBar/mine/subPages/order`

+ 160 - 0
pages/tabBar/mine/subPages/exchange.vue

@@ -0,0 +1,160 @@
+<template>
+	<view class="sub-base-container">
+		<view class="exchange-card">
+			<view class="tabs">
+				<view :class="['tab-item',{active:active === index}]" @click="handleTab(index)"
+					v-for="(item,index) in tabs" :key="index">{{item}}</view>
+			</view>
+			<view class="list" v-show="active === 0">
+				<view class="item" v-for="(item,index) in 3" :key="index">
+					<view class="item-info">
+						<image class="img" src="/static/home/fruit.png"></image>
+						<view class="cont">
+							<up-text bold text="牛乳蜂蜜饼干一份"></up-text>
+							<up-text size="12" color="#999999" text="有限期:2025.06.05至2025.06.23"></up-text>
+						</view>
+					</view>
+					<view class="button">去兑换</view>
+				</view>
+			</view>
+			<view class="list" v-show="active === 1">
+				<view class="item" v-for="(item,index) in 3" :key="index">
+					<view class="item-info">
+						<view class="money">
+							<view class="sum"><text class="unit">¥</text>50</view>
+							<view class="tips">满100可用</view>
+						</view>
+						<view class="cont">
+							<up-text bold text="仙桃荔全场优惠券"></up-text>
+							<up-text bold text="满100减50"></up-text>
+							<up-text size="12" color="#999999" text="有限期:2025.06.05至2025.06.23"></up-text>
+						</view>
+					</view>
+					<view class="button">去使用</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import config from "@/api/config.js"
+	import {
+		ref
+	} from 'vue';
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	onLoad(({type})=>{
+		active.value = Number(type)
+	})
+
+	const active = ref(0)
+	const tabs = ["守护兑换", "优惠券"]
+	const handleTab = (index) => {
+		active.value = index
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "@/static/style/mixin.scss";
+
+	.sub-base-container {
+		@include ossBg("subTreePage/exchange-bg.png");
+		min-height: 750rpx;
+
+		.exchange-card {
+			width: 100%;
+			box-sizing: border-box;
+			padding: 26rpx 20rpx;
+			height: calc(100vh - 14vh);
+			border-radius: 40rpx 40rpx 0 0;
+			background: #fff;
+			position: absolute;
+			top: 14vh;
+			left: 0;
+
+			.tabs {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				.tab-item {
+					color: rgba(0, 0, 0, 0.2);
+					padding: 10rpx 12rpx;
+
+					&.active {
+						font-size: 36rpx;
+						color: #000;
+						font-weight: 500;
+					}
+				}
+
+				.tab-item+.tab-item {
+					margin-left: 24rpx;
+				}
+			}
+
+			.button {
+				font-size: 24rpx;
+				padding: 14rpx 32rpx;
+				border-radius: 50rpx;
+				background: #FFD95E;
+				font-weight: 500;
+			}
+
+			.list {
+				.item {
+					margin-top: 30rpx;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.item-info {
+						display: flex;
+
+						.img {
+							width: 160rpx;
+							height: 160rpx;
+							border-radius: 16rpx;
+							margin-right: 24rpx;
+						}
+
+						.money {
+							background-image: linear-gradient(120deg, #ffe3c9, #eebd8f);
+							border-radius: 16rpx;
+							padding: 20rpx 30rpx 30rpx;
+							text-align: center;
+							color: #322802;
+							margin-right: 24rpx;
+
+							.sum {
+								font-size: 64rpx;
+								font-weight: bold;
+
+								.unit {
+									font-size: 30rpx;
+									margin-right: 6rpx;
+								}
+							}
+
+							.tips {
+								color: #000000;
+								font-size: 24rpx;
+								margin-top: -12rpx;
+							}
+						}
+
+						.cont {
+							line-height: 46rpx;
+						}
+					}
+				}
+			}
+		}
+		/* #ifdef H5 */
+		.exchange-card{
+			height: calc(100vh - 14vh - 88rpx);
+		}
+		/* #endif */
+	}
+</style>

+ 9 - 14
utils/http.js

@@ -8,7 +8,7 @@ const envConfig = {
     baseUrl: 'https://feiniaotech-dev.sysuimars.cn/'
   },
   production: {
-    baseUrl: 'https://feiniaotech-dev.sysuimars.cn/'
+    baseUrl: 'https://birdseye-api.feiniaotech.sysuimars.cn/'
   }
 }
 
@@ -56,10 +56,11 @@ class HttpRequest {
       })
       
       // 添加token
-      const token = uni.getStorageSync('token')
+	  const token = '6288d39b-ed8e-4e67-9dac-796ee30eb5e4'
+      // const token = uni.getStorageSync('token')
       if (token) {
         config.header = config.header || {}
-        config.header.Authorization = `Bearer ${token}`
+		config.header.token = token
       }
       
       // 记录请求开始时间(用于计算请求耗时)
@@ -71,14 +72,8 @@ class HttpRequest {
     this.interceptors.afterResponse = (response) => {
       uni.hideLoading()
       
-      // 计算请求耗时
-      const endTime = new Date()
-      const duration = endTime - response.config.metadata.startTime
-      console.log(`请求 ${response.config.url} 耗时: ${duration}ms`)
-      
       const { data, statusCode } = response
       
-      // 根据业务逻辑调整
       if (statusCode === 200) {
         return data
       } else {
@@ -132,7 +127,7 @@ class HttpRequest {
     if (needLogin) {
       setTimeout(() => {
         uni.navigateTo({
-          url: '/pages/login/login'
+          url: '/pages/login/index'
         })
       }, 1500)
     }
@@ -182,7 +177,7 @@ class HttpRequest {
       
       // 添加常用方法别名
       get: (url, params = {}, options = {}) => {
-        return this.request({
+        return instance.request({
           url,
           method: 'GET',
           data: params,
@@ -191,7 +186,7 @@ class HttpRequest {
       },
       
       post: (url, data = {}, options = {}) => {
-        return this.request({
+        return instance.request({
           url,
           method: 'POST',
           data,
@@ -200,7 +195,7 @@ class HttpRequest {
       },
       
       put: (url, data = {}, options = {}) => {
-        return this.request({
+        return instance.request({
           url,
           method: 'PUT',
           data,
@@ -209,7 +204,7 @@ class HttpRequest {
       },
       
       delete: (url, data = {}, options = {}) => {
-        return this.request({
+        return instance.request({
           url,
           method: 'DELETE',
           data,