|
|
@@ -1,75 +1,138 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <view class="Wrap">
|
|
|
+ <!-- <view class="Wrap">
|
|
|
<text class="Wraph1">欢迎使用</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text>请选择您的身份开始使用</text>
|
|
|
</view>
|
|
|
- <!-- 用户部分 -->
|
|
|
<view class="button-group">
|
|
|
<up-button type="success" shape="circle" class="button" @click="handleBtn(1)">用户</up-button>
|
|
|
</view>
|
|
|
<image src="../static/FRAME.png" style="background-color: red;"></image>
|
|
|
<image src="../static/img_v3_02le_9fee240d-00fc-4f42-9391-4801b614cb9g.png"
|
|
|
style="background-color: red; width: 80rpx; height: 60rpx;"></image>
|
|
|
- <!-- 志愿者部分 -->
|
|
|
<view class="button-group">
|
|
|
<up-button type="success" shape="circle" class="button" @click="handleBtn(2)">志愿者</up-button>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <view class="select-title">欢迎使用</view>
|
|
|
+ <view class="select-text">请选择您的身份开始使用</view>
|
|
|
+ <view class="select-box">
|
|
|
+ <view v-for="item in list" :key="item.key" class="select-item" :style="{ background: item.bgcColor }" @click="handleBtn(item.key)">
|
|
|
+ <view class="select-img">
|
|
|
+ <img :src="item.icon" alt="" style="width: 48px;height: 48px;">
|
|
|
+ </view>
|
|
|
+ <view class="select-text-box">
|
|
|
+ <view class="select-lable">{{ item.label }}</view>
|
|
|
+ <view class="select-box-text">{{ item.text }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import {
|
|
|
- userOrWorker
|
|
|
- } from '@/api/login';
|
|
|
+import {
|
|
|
+ userOrWorker
|
|
|
+} from '@/api/login';
|
|
|
|
|
|
- import store from "@/store"
|
|
|
+import store from "@/store"
|
|
|
|
|
|
- const imagePath1 = '/static/志愿者.png';
|
|
|
- const imagePath2 = '/static/用户.png';
|
|
|
+const list = [
|
|
|
+ {
|
|
|
+ label: '我是用户',
|
|
|
+ text: '寻找并预约服务',
|
|
|
+ icon: '/static/img/user.png',
|
|
|
+ key: 1,
|
|
|
+ bgcColor: 'linear-gradient(135deg, rgba(45, 58, 78, 1) 0%, rgba(61, 74, 94, 1) 100%), rgba(0, 0, 0, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '我是志愿者',
|
|
|
+ text: '提供专业服务',
|
|
|
+ icon: '/static/img/admin.png',
|
|
|
+ key: 2,
|
|
|
+ bgcColor: 'linear-gradient(135deg, rgba(16, 185, 129, 1) 0%, rgba(32, 201, 145, 1) 100%), rgba(0, 0, 0, 0)'
|
|
|
+ }
|
|
|
+]
|
|
|
|
|
|
- function handleBtn(userType = 0) { // 默认值 0
|
|
|
- const params = {
|
|
|
- userType: userType // 使用传入的 userType
|
|
|
- };
|
|
|
- // 把 userType 存入本地存储
|
|
|
- uni.setStorageSync('userType', userType);
|
|
|
+function handleBtn(userType = 0) { // 默认值 0
|
|
|
+ const params = {
|
|
|
+ userType: userType // 使用传入的 userType
|
|
|
+ };
|
|
|
+ // 把 userType 存入本地存储
|
|
|
+ uni.setStorageSync('userType', userType);
|
|
|
|
|
|
- userOrWorker(params)
|
|
|
- .then(res => {
|
|
|
- // 重新拉取用户信息，储存本地
|
|
|
- store.dispatch('GetInfo').then(() => {
|
|
|
- uni.reLaunch({
|
|
|
- url: '/pages/index'
|
|
|
- });
|
|
|
- })
|
|
|
+ userOrWorker(params)
|
|
|
+ .then(res => {
|
|
|
+ // 重新拉取用户信息，储存本地
|
|
|
+ store.dispatch('GetInfo').then(() => {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/index'
|
|
|
+ });
|
|
|
})
|
|
|
- .catch(err => {
|
|
|
- console.error('设置失败:', err);
|
|
|
- });
|
|
|
- }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error('设置失败:', err);
|
|
|
+ });
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
- .Wrap {
|
|
|
- left: 0rpx;
|
|
|
- top: 0rpx;
|
|
|
- width: 342rpx;
|
|
|
- height: 80rpx;
|
|
|
- opacity: 1;
|
|
|
- background: rgba(0, 0, 0, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .Wraph1 {
|
|
|
+<style scoped lang="scss">
|
|
|
+.container {
|
|
|
+ padding: 28px 24px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- font-size: 30rpx;
|
|
|
+ .select-title {
|
|
|
+ font-size: 30px;
|
|
|
font-weight: 400;
|
|
|
- letter-spacing: 0rpx;
|
|
|
- line-height: 36rpx;
|
|
|
+ line-height: 36px;
|
|
|
color: rgba(45, 58, 78, 1);
|
|
|
- text-align: center;
|
|
|
- vertical-align: middle;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgba(75, 85, 99, 1);
|
|
|
+ margin-bottom: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .select-item {
|
|
|
+ padding: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ .select-img {
|
|
|
+ margin-right: 24px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-text-box {
|
|
|
+ .select-lable {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-box-text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
chenjj
