feat：添加登录上传功能

api/ali.js

@@ -0,0 +1,70 @@
+import http from '@/utils/http'
+import config from './config'
+import crypto from 'crypto-js';
+import { Base64 } from 'js-base64';
+
+export default {
+	getCredential() {
+		return http.post('mini/ali/mini_credential')
+	},
+	// 图片校验
+	checkImg(data) {
+		return http.post('mini/mini_wechat_app_info/media_check_async',data)
+	},
+	// 图片上传
+	uploadImg(data) {
+		return http.post('mini/lz_tree_image/insert',data)
+	},
+	// 计算签名
+	computeSignature(accessKeySecret, canonicalString) {
+	  return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
+	},
+	getFormDataParams(){
+	  return new Promise((resolve)=>{
+	    this.getCredential().then(({code, data})=>{
+	      let { accessKeyId, accessKeySecret, securityToken } = data;
+	      const policy = Base64.encode(JSON.stringify(this.getPolicyText())) 
+	      const signature = this.computeSignature(accessKeySecret, policy)
+	      const formData = {
+	        OSSAccessKeyId: accessKeyId,
+	        signature,
+	        policy,
+	        "x-oss-security-token":securityToken 
+	      }
+	      resolve(formData)
+	    })
+	  })
+	},
+	getPolicyText(){
+	  const date = new Date();
+	  date.setHours(date.getHours() + 1);
+	  const policyText = {
+	    expiration: date.toISOString(), // 设置policy过期时间。
+	    conditions: [
+	      // 限制上传大小。
+	      ["content-length-range", 0, 1024 * 1024 * 1024],
+	    ],
+	  };
+	  return policyText
+	},
+	upload(formData,key,src){
+	    let host = "https://birdseye.oss-cn-guangzhou.aliyuncs.com/"
+	    return new Promise((resolve)=>{
+	      uni.uploadFile({
+	        url: host,
+	        filePath: src,
+	        name: 'file', // 必须填file。
+	        formData: {
+	          key,
+	          ...formData // 使用STS签名时必传。
+	        },
+	        success: (res) => {
+	          resolve(res)
+	        },
+	        fail: err => {
+	          console.log(err);
+	        }
+	      });
+	    })
+	},
+}

package.json

@@ -1,8 +1,9 @@
 {
   "dependencies": {
     "clipboard": "^2.0.11",
+    "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
+    "js-base64": "^3.7.8",
     "qqmap-wx-jssdk": "^1.0.0"
-    
   }
 }

pages.json

@@ -1,5 +1,6 @@
 {
-	"pages": [{
+	"pages": [
+		{
 			"path": "pages/tabBar/home/home"
 		},
 		{
@@ -34,7 +35,7 @@
 		{
 			"path": "pages/tabBar/home/subPages/gardenItem",
 			"style": {
-				"navigationBarTitleText": "有味果园"
+				"navigationBarTitleText": ""
 			}
 		},
 		{
@@ -89,13 +90,6 @@
 			"style": {
 				"navigationBarTitleText": "溯源报告"
 			}
-		},
-		{
-			"path" : "pages/tabBar/home/subPages/gardenList",
-			"style" : 
-			{
-				"navigationBarTitleText" : "有味果园"
-			}
 		}
 	],
 	"globalStyle": {
@@ -108,7 +102,7 @@
 	"tabBar": {
 		"color": "#898989",
 		"selectedColor": "#000000",
-		"borderStyle": "white",
+		"borderStyle": "black",
 		"backgroundColor": "#FFFFFF",
 		"list": [{
 				"pagePath": "pages/tabBar/home/home",

pages/login/index.vue

@@ -1,24 +1,26 @@
 <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" @getphonenumber="onGetPhoneNumber">
-				<view class="button">微信授权</view>
-			</button>
+	<view class="login-container">
+		<view class="base-container">
+			<!-- <image class="tabbar" src="https://birdseye-img.sysuimars.com/dinggou-mini/tabbar-new.png" mode="" /> -->
 		</view>
-	</up-popup>
+		<up-popup :show="showPopup" mode="center" round="10" :overlay="false" :safeAreaInsetBottom="false"
+			bgColor="transparent">
+			<view class="popup">
+				<button class="avatar-none" open-type="chooseAvatar" @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" @getphonenumber="onGetPhoneNumber">
+					<view class="button">微信授权</view>
+				</button>
+			</view>
+		</up-popup>
+	</view>
 </template>
 
 <script setup>
@@ -28,6 +30,8 @@
 	import {
 		onLoad
 	} from '@dcloudio/uni-app'
+	import config from "@/api/config.js"
+	import upload from '@/utils/uploadUtils.js'
 	import USER from '@/api/user.js'
 
 	const showPopup = ref(true);
@@ -56,13 +60,11 @@
 		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()
-		// })
+		uni.showLoading({title: '上传中'})
+		upload(userData.value.id + "/" + new Date().getTime() + ".png", avatarUrl, (res) => {
+		  userData.value.icon = config.BASE_IMG_URL + res.key
+		  uni.hideLoading()
+		})
 	}
 
 	const onGetPhoneNumber = (e) => {
@@ -90,7 +92,7 @@
 					duration: 2000,
 					mask: true
 				})
-				uni.navigateTo({
+				uni.reLaunch({
 					url: `/pages/tabBar/home/subPages/gardenMap?enterSelectTree=true`
 				});
 			} else {
@@ -107,17 +109,18 @@
 
 <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;
+	
+	.login-container {
+		.base-container {
+			@include ossBg("login-bj.png");
+			
+			.tabbar {
+				width: 100%;
+				height: 112rpx;
+				position: fixed;
+				bottom: 0;
+				left: 0;
+			}
 		}
 	}
 

utils/uploadUtils.js

@@ -0,0 +1,43 @@
+
+import ALI from '@/api/ali.js'
+/**
+ * @param {*} keyName 新的图片名称
+ * @param {*} file   上传的图片路径
+ * @param {*} success 回调函数
+ */
+let upload = (keyName, file, success) => {
+    ALI.getFormDataParams().then(res => {
+        let host = "https://birdseye.oss-cn-guangzhou.aliyuncs.com/"
+        let key = "birdseye-look-mini/" + keyName
+        uni.uploadFile({
+            url: host,
+            filePath: file,
+            name: 'file', // 必须填file。
+            formData: {
+                key,
+                ...res // 使用STS签名时必传。
+            },
+            success: (res) => {
+                if (res.statusCode === 204) {
+					uni.showToast({
+						title: '上传成功',
+						icon: 'none',
+						duration: 2000
+					});
+                    console.log(res)
+                    res.key = key
+                    success && success(res)
+                }
+            },
+            fail: err => {
+				uni.showToast({
+					title: '上传失败',
+					icon: 'none',
+					duration: 2000
+				});
+                console.log(err);
+            }
+        });
+    })
+}
+export default upload