Commit 116fac558d59c02329385d3db3faaff0778ac92b
1 parent
c8d9dda1
提交
Showing
10 changed files
with
960 additions
and
378 deletions
garbage-removal/src/main.js
| @@ -28,7 +28,7 @@ list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirect | @@ -28,7 +28,7 @@ list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirect | ||
| 28 | // 重定向到登录页面 | 28 | // 重定向到登录页面 |
| 29 | uni.setStorageSync("cancelFlag", false); | 29 | uni.setStorageSync("cancelFlag", false); |
| 30 | uni.reLaunch({ | 30 | uni.reLaunch({ |
| 31 | - url: "/pages/login/index", | 31 | + url: "/pages/login/code", |
| 32 | }) | 32 | }) |
| 33 | } else if (res.cancel) { | 33 | } else if (res.cancel) { |
| 34 | console.log('用户点击取消'); | 34 | console.log('用户点击取消'); |
garbage-removal/src/pages.json
| @@ -21,10 +21,18 @@ | @@ -21,10 +21,18 @@ | ||
| 21 | "navigationBarTitleText": "", | 21 | "navigationBarTitleText": "", |
| 22 | "enablePullDownRefresh": false | 22 | "enablePullDownRefresh": false |
| 23 | } | 23 | } |
| 24 | - },{ | 24 | + }, |
| 25 | + { | ||
| 26 | + "path": "pages/sign-up/index", | ||
| 27 | + "style": { | ||
| 28 | + "navigationBarTitleText": "", | ||
| 29 | + "enablePullDownRefresh": false | ||
| 30 | + } | ||
| 31 | + } | ||
| 32 | + ,{ | ||
| 25 | "path": "pages/login/code", | 33 | "path": "pages/login/code", |
| 26 | "style": { | 34 | "style": { |
| 27 | - "navigationBarTitleText": "输入验证码", | 35 | + "navigationBarTitleText": "登录", |
| 28 | "enablePullDownRefresh": false | 36 | "enablePullDownRefresh": false |
| 29 | } | 37 | } |
| 30 | },{ | 38 | },{ |
garbage-removal/src/pages/home/index.vue
| @@ -29,7 +29,7 @@ | @@ -29,7 +29,7 @@ | ||
| 29 | <view class="company-list-box" v-if="(addressInfo && userType == '用户')||userType == '运输企业负责人'||userType == '清运车辆驾驶员'"> | 29 | <view class="company-list-box" v-if="(addressInfo && userType == '用户')||userType == '运输企业负责人'||userType == '清运车辆驾驶员'"> |
| 30 | <view class="company-list-header"> | 30 | <view class="company-list-header"> |
| 31 | 31 | ||
| 32 | - <view class="search-box" v-if="(addressInfo && userType == '用户')"> | 32 | + <view class="search-box" v-if="(addressInfo && userType == '用户') ||userType == '运输企业负责人'"> |
| 33 | <u-search | 33 | <u-search |
| 34 | v-model="searchKeyword" | 34 | v-model="searchKeyword" |
| 35 | :show-action="true" | 35 | :show-action="true" |
| @@ -311,7 +311,7 @@ const handleCleanClick = () => { | @@ -311,7 +311,7 @@ const handleCleanClick = () => { | ||
| 311 | // 重定向到登录页面 | 311 | // 重定向到登录页面 |
| 312 | uni.setStorageSync("cancelFlag", false); | 312 | uni.setStorageSync("cancelFlag", false); |
| 313 | uni.reLaunch({ | 313 | uni.reLaunch({ |
| 314 | - url: "/pages/login/index", | 314 | + url: "/pages/login/code", |
| 315 | }) | 315 | }) |
| 316 | } else if (res.cancel) { | 316 | } else if (res.cancel) { |
| 317 | console.log('用户点击取消'); | 317 | console.log('用户点击取消'); |
garbage-removal/src/pages/login/code.vue
| 1 | + | ||
| 1 | <template> | 2 | <template> |
| 2 | - <view class="wrap"> | ||
| 3 | - <view class="key-input"> | ||
| 4 | - <view class="title">输入验证码</view> | ||
| 5 | - <view class="tips">验证码已发送至 +{{ startIphoneNumber }}</view> | ||
| 6 | - <u-message-input :value="value" :focus="true" @change="change" @finish="finish" mode="bottomLine" | ||
| 7 | - :maxlength="maxlength"></u-message-input> | ||
| 8 | - <text v-if="verifyFlag" class="error">验证码错误,请重新输入</text> | ||
| 9 | - <view class="captcha"> | ||
| 10 | - <text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text> | ||
| 11 | - <text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text> | ||
| 12 | - </view> | ||
| 13 | - </view> | ||
| 14 | - </view> | 3 | + <view class="wrap"> |
| 4 | + <view class="key-input"> | ||
| 5 | + <view class="title">欢迎登录</view> | ||
| 6 | + | ||
| 7 | + <!-- 登录方式切换 --> | ||
| 8 | + <view class="login-type-switch"> | ||
| 9 | + <text | ||
| 10 | + :class="{ active: loginType === 'code' }" | ||
| 11 | + @click="switchLoginType('code')" | ||
| 12 | + > | ||
| 13 | + 验证码登录 | ||
| 14 | + </text> | ||
| 15 | + <text | ||
| 16 | + :class="{ active: loginType === 'password' }" | ||
| 17 | + @click="switchLoginType('password')" | ||
| 18 | + > | ||
| 19 | + 密码登录 | ||
| 20 | + </text> | ||
| 21 | + </view> | ||
| 22 | + | ||
| 23 | + <!-- 手机号输入 --> | ||
| 24 | + <view class="input-wrapper"> | ||
| 25 | + <u-icon name="account" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 26 | + <input | ||
| 27 | + class="login-input" | ||
| 28 | + type="text" | ||
| 29 | + v-model="iphoneNumber" | ||
| 30 | + placeholder="请输入手机号" | ||
| 31 | + placeholder-class="placeholder-style" | ||
| 32 | + /> | ||
| 33 | + </view> | ||
| 34 | + | ||
| 35 | + <!-- 验证码登录 --> | ||
| 36 | + <view v-if="loginType === 'code'"> | ||
| 37 | + <view class="tips">验证码已发送至 +{{ startIphoneNumber || iphoneNumber }}</view> | ||
| 38 | + <u-message-input | ||
| 39 | + :value="codeValue" | ||
| 40 | + :focus="true" | ||
| 41 | + @change="handleCodeChange" | ||
| 42 | + @finish="finish" | ||
| 43 | + mode="bottomLine" | ||
| 44 | + :maxlength="maxlength" | ||
| 45 | + ></u-message-input> | ||
| 46 | + <text v-if="verifyFlag" class="error">验证码错误,请重新输入</text> | ||
| 47 | + <view class="captcha"> | ||
| 48 | + <text :class="{ noCaptcha: show }" @tap="getCaptcha">获取验证码</text> | ||
| 49 | + <text :class="{ regain: !show }" v-if="!show">{{ second }}秒后重新获取</text> | ||
| 50 | + </view> | ||
| 51 | + </view> | ||
| 52 | + | ||
| 53 | + <!-- 密码登录 --> | ||
| 54 | + <view v-else> | ||
| 55 | + <view class="input-wrapper"> | ||
| 56 | + <u-icon name="lock" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 57 | + <input | ||
| 58 | + class="login-input" | ||
| 59 | + type="password" | ||
| 60 | + v-model="password" | ||
| 61 | + placeholder="请输入密码" | ||
| 62 | + placeholder-class="placeholder-style" | ||
| 63 | + /> | ||
| 64 | + </view> | ||
| 65 | + <button @tap="loginWithPassword" class="login-btn">登录</button> | ||
| 66 | + </view> | ||
| 67 | + | ||
| 68 | + <view class="alternative"> | ||
| 69 | + <text class="link" @click="toRegister">立即注册</text> | ||
| 70 | + <text class="link" @click="forgetPassword">忘记密码?</text> | ||
| 71 | + </view> | ||
| 72 | + </view> | ||
| 73 | + </view> | ||
| 15 | </template> | 74 | </template> |
| 16 | 75 | ||
| 17 | -<script setup> | ||
| 18 | -import { sendCode, userLogin } from "@/apis/user.js"; | 76 | +<script setup>import { sendCode, userLogin } from "@/apis/user.js"; |
| 19 | import { setRequestToken } from '@/utils/request/request.js'; | 77 | import { setRequestToken } from '@/utils/request/request.js'; |
| 20 | import { useMainStore } from '@/stores/index.js'; | 78 | import { useMainStore } from '@/stores/index.js'; |
| 21 | import { onLoad } from "@dcloudio/uni-app"; | 79 | import { onLoad } from "@dcloudio/uni-app"; |
| 22 | import { getCurrentInstance, ref } from "vue"; | 80 | import { getCurrentInstance, ref } from "vue"; |
| 81 | + | ||
| 23 | const { proxy } = getCurrentInstance(); | 82 | const { proxy } = getCurrentInstance(); |
| 24 | const store = useMainStore(); | 83 | const store = useMainStore(); |
| 25 | -const verifyFlag = ref(false) | ||
| 26 | -const iphoneNumber = ref("") | ||
| 27 | -const startIphoneNumber = ref("") | ||
| 28 | -const maxlength = ref(4) | ||
| 29 | -const value = ref("") | ||
| 30 | -const second = ref(10); | ||
| 31 | -const show = ref(false) | ||
| 32 | 84 | ||
| 33 | -onLoad((options) => { | ||
| 34 | - iphoneNumber.value = options.iphoneNumber; | ||
| 35 | - startIphoneNumber.value = handleIphoneNumber("" + options.iphoneNumber); | ||
| 36 | - getCaptcha(iphoneNumber.value) | ||
| 37 | -}) | ||
| 38 | -const handleIphoneNumber = (tel) => { | ||
| 39 | - return tel.replace(tel.substring(3, 7), "****"); | ||
| 40 | -} | 85 | +// 登录方式:code-验证码登录,password-密码登录 |
| 86 | +const loginType = ref('code'); | ||
| 41 | 87 | ||
| 42 | -const getCaptcha = (iphoneNumber) => { | ||
| 43 | - value.value = '' | ||
| 44 | - second.value = 10 | ||
| 45 | - show.value = false; | ||
| 46 | - sendCode(iphoneNumber).then(res => { | ||
| 47 | - proxy.$u.toast(res.data.data) | ||
| 48 | - }) | ||
| 49 | - let interval = setInterval(() => { | ||
| 50 | - second.value--; | ||
| 51 | - if (second.value <= 0) { | ||
| 52 | - show.value = true | ||
| 53 | - clearInterval(interval); | ||
| 54 | - } | ||
| 55 | - }, 1000); | 88 | +// 验证码登录相关 |
| 89 | +const verifyFlag = ref(false); | ||
| 90 | +const iphoneNumber = ref(""); | ||
| 91 | +const startIphoneNumber = ref(""); | ||
| 92 | +const maxlength = ref(4); | ||
| 93 | +const codeValue = ref(""); | ||
| 94 | +const second = ref(0); | ||
| 95 | +const show = ref(true); | ||
| 56 | 96 | ||
| 57 | -} | ||
| 58 | -// 收不到验证码选择时的选择 | ||
| 59 | -const noCaptcha = () => { | ||
| 60 | - uni.showActionSheet({ | ||
| 61 | - itemList: ['重新获取验证码'], | ||
| 62 | - success: function (res) { | ||
| 63 | - getCaptcha(iphoneNumber.value) | ||
| 64 | - }, | ||
| 65 | - fail: function (res) { | ||
| 66 | - | ||
| 67 | - } | ||
| 68 | - }); | ||
| 69 | -} | 97 | +// 密码登录相关 |
| 98 | +const password = ref(""); | ||
| 70 | 99 | ||
| 71 | -// 校验验证码 | ||
| 72 | -const checkVerifyNum = (code) => { | ||
| 73 | - userLogin({ loginType: 0, tel: iphoneNumber.value, code: code }).then(res => { | ||
| 74 | - console.log(res); | ||
| 75 | - // 登录成功 | ||
| 76 | - if (res.data.code===200) { | ||
| 77 | - verifyFlag.value = false; | ||
| 78 | - store.tempToken = res.data.data.token | ||
| 79 | - if (res.data.data.token) { | ||
| 80 | - setRequestToken(res.data.data.token) | ||
| 81 | - } | ||
| 82 | - store.userInfo = {}; | ||
| 83 | - store.userName = res.data.data.name !=null ? res.data.data.name : ""; | ||
| 84 | - store.userInfo.userName = res.data.data.name; | ||
| 85 | - store.userPhone = res.data.data.loginPhone; | ||
| 86 | - if(res.data.data.testUser){ | ||
| 87 | - // uni.navigateTo({ | ||
| 88 | - // url: `/pages/wode-info/wode-info-choose/index?ruleVos= ${encodeURIComponent(JSON.stringify(res.data.data.ruleVos))}&userName=${encodeURIComponent(res.data.data.name)}`"" | ||
| 89 | - // }); | ||
| 90 | - if (store.tempToken) { | ||
| 91 | - store.token = store.tempToken | ||
| 92 | - store.tempToken = ""; | ||
| 93 | - } | ||
| 94 | - const ruleVos = res.data.data.ruleVos; | ||
| 95 | - if(ruleVos!=null && ruleVos.length>0){ | ||
| 96 | - // console.log(store.userInfo); | ||
| 97 | - //默认用户 | ||
| 98 | - store.userType = ruleVos[0].userType; | ||
| 99 | - store.userInfo.userType = ruleVos[0].userType; | ||
| 100 | - store.userInfo.ruleVos = ruleVos; | ||
| 101 | - //判断是哪种角色 | ||
| 102 | - for(let rule of ruleVos){ | ||
| 103 | - store.userInfo.transportCompanyName = null; | ||
| 104 | - // console.log(rule) | ||
| 105 | - if(rule.userType==="处置场所负责人"){ | ||
| 106 | - store.userType = rule.userType; | ||
| 107 | - store.userInfo.userType = rule.userType; | ||
| 108 | - store.userInfo.transportCompanyName = rule.transportCompanyName; | ||
| 109 | - uni.$u.route({ | ||
| 110 | - type: "switchTab", | ||
| 111 | - url: `pages/order/index`, | ||
| 112 | - }) | ||
| 113 | - } | ||
| 114 | - if(rule.userType==="运输企业负责人"){ | ||
| 115 | - store.userType = rule.userType; | ||
| 116 | - store.userInfo.userType = rule.userType; | ||
| 117 | - store.userInfo.transportCompanyName = rule.transportCompanyName; | ||
| 118 | - } | ||
| 119 | - if(rule.userType==="清运车辆驾驶员"){ | ||
| 120 | - store.userType = rule.userType; | ||
| 121 | - store.userInfo.userType = rule.userType; | ||
| 122 | - store.userInfo.transportCompanyName = rule.transportCompanyName; | ||
| 123 | - } | ||
| 124 | - } | ||
| 125 | - } | ||
| 126 | - uni.$u.route({ | ||
| 127 | - type: "switchTab", | ||
| 128 | - url: `/pages/home/index`, | ||
| 129 | - }) | ||
| 130 | - }else{ | ||
| 131 | - uni.$u.toast("该手机无法登录,不是投放点管理员"); | ||
| 132 | - } | ||
| 133 | - | ||
| 134 | - } else { | ||
| 135 | - verifyFlag.value = true; | ||
| 136 | - uni.$u.toast(res.data.msg); | ||
| 137 | - } | ||
| 138 | - }) | ||
| 139 | -} | 100 | +// 切换登录方式 |
| 101 | +const switchLoginType = (type) => { | ||
| 102 | + loginType.value = type; | ||
| 103 | +}; | ||
| 140 | 104 | ||
| 141 | -// change事件侦听 | ||
| 142 | -const change = (value) => { | ||
| 143 | - // console.log("value:", value); | ||
| 144 | -} | 105 | +// 获取验证码 |
| 106 | +const getCaptcha = () => { | ||
| 107 | + if (!proxy.$u.test.mobile(iphoneNumber.value)) { | ||
| 108 | + proxy.$u.toast("请输入正确的手机号"); | ||
| 109 | + return; | ||
| 110 | + } | ||
| 111 | + | ||
| 112 | + codeValue.value = ''; | ||
| 113 | + second.value = 60; | ||
| 114 | + show.value = false; | ||
| 115 | + | ||
| 116 | + sendCode(iphoneNumber.value).then(res => { | ||
| 117 | + proxy.$u.toast(res.data.data); | ||
| 118 | + }); | ||
| 119 | + | ||
| 120 | + let interval = setInterval(() => { | ||
| 121 | + second.value--; | ||
| 122 | + if (second.value <= 0) { | ||
| 123 | + show.value = true; | ||
| 124 | + clearInterval(interval); | ||
| 125 | + } | ||
| 126 | + }, 1000); | ||
| 127 | +}; | ||
| 145 | 128 | ||
| 146 | -// 输入完验证码最后一位执行 | 129 | +// 验证码输入变化 |
| 130 | +const handleCodeChange = (value) => { | ||
| 131 | + codeValue.value = value; | ||
| 132 | +}; | ||
| 133 | + | ||
| 134 | +// 验证码输入完成 | ||
| 147 | const finish = (value) => { | 135 | const finish = (value) => { |
| 148 | - if (value.length == 4) { | ||
| 149 | - checkVerifyNum(value); | ||
| 150 | - } | ||
| 151 | -} | 136 | + if (value.length == 4) { |
| 137 | + checkVerifyNum(value); | ||
| 138 | + } | ||
| 139 | +}; | ||
| 140 | + | ||
| 141 | +// 验证码登录 | ||
| 142 | +const checkVerifyNum = (code) => { | ||
| 143 | + userLogin({ loginType: 0, tel: iphoneNumber.value, code: code }).then(res => { | ||
| 144 | + handleLoginSuccess(res); | ||
| 145 | + }); | ||
| 146 | +}; | ||
| 147 | + | ||
| 148 | +// 密码登录 | ||
| 149 | +const loginWithPassword = () => { | ||
| 150 | + if (!proxy.$u.test.mobile(iphoneNumber.value)) { | ||
| 151 | + proxy.$u.toast("请输入正确的手机号"); | ||
| 152 | + return; | ||
| 153 | + } | ||
| 154 | + | ||
| 155 | + if (!password.value) { | ||
| 156 | + proxy.$u.toast("请输入密码"); | ||
| 157 | + return; | ||
| 158 | + } | ||
| 159 | + | ||
| 160 | + userLogin({ | ||
| 161 | + loginType: 0, | ||
| 162 | + tel: iphoneNumber.value, | ||
| 163 | + password: password.value | ||
| 164 | + }).then(res => { | ||
| 165 | + handleLoginSuccess(res); | ||
| 166 | + }); | ||
| 167 | +}; | ||
| 168 | + | ||
| 169 | +// 处理登录成功 | ||
| 170 | +const handleLoginSuccess = (res) => { | ||
| 171 | + if (res.data.code === 200) { | ||
| 172 | + verifyFlag.value = false; | ||
| 173 | + | ||
| 174 | + // 设置token和用户信息 | ||
| 175 | + store.tempToken = res.data.data.token; | ||
| 176 | + if (res.data.data.token) { | ||
| 177 | + setRequestToken(res.data.data.token); | ||
| 178 | + uni.setStorageSync("Authorization", res.data.data.token); | ||
| 179 | + } | ||
| 180 | + | ||
| 181 | + store.userInfo = {}; | ||
| 182 | + store.userName = res.data.data.name != null ? res.data.data.name : ""; | ||
| 183 | + store.userInfo.userName = res.data.data.name; | ||
| 184 | + store.userPhone = res.data.data.loginPhone; | ||
| 185 | + | ||
| 186 | + console.log(res.data.data) | ||
| 187 | + if(res.data.data.testUser){ | ||
| 188 | + if (store.tempToken) { | ||
| 189 | + store.token = store.tempToken; | ||
| 190 | + store.tempToken = ""; | ||
| 191 | + } | ||
| 192 | + | ||
| 193 | + const ruleVos = res.data.data.ruleVos; | ||
| 194 | + if(ruleVos != null && ruleVos.length > 0){ | ||
| 195 | + store.userType = ruleVos[0].userType; | ||
| 196 | + store.userInfo.userType = ruleVos[0].userType; | ||
| 197 | + store.userInfo.ruleVos = ruleVos; | ||
| 198 | + | ||
| 199 | + let hasSpecialRole = false; | ||
| 200 | + for(let rule of ruleVos){ | ||
| 201 | + store.userInfo.transportCompanyName = null; | ||
| 202 | + | ||
| 203 | + if(rule.userType === "处置场所负责人"){ | ||
| 204 | + store.userType = rule.userType; | ||
| 205 | + store.userInfo.userType = rule.userType; | ||
| 206 | + store.userInfo.transportCompanyName = rule.transportCompanyName; | ||
| 207 | + hasSpecialRole = true; | ||
| 208 | + | ||
| 209 | + uni.$u.route({ | ||
| 210 | + type: "switchTab", | ||
| 211 | + url: `pages/order/index`, | ||
| 212 | + }); | ||
| 213 | + return; | ||
| 214 | + } | ||
| 215 | + | ||
| 216 | + if(rule.userType === "运输企业负责人"){ | ||
| 217 | + store.userType = rule.userType; | ||
| 218 | + store.userInfo.userType = rule.userType; | ||
| 219 | + store.userInfo.transportCompanyName = rule.transportCompanyName; | ||
| 220 | + } | ||
| 221 | + | ||
| 222 | + if(rule.userType === "清运车辆驾驶员"){ | ||
| 223 | + store.userType = rule.userType; | ||
| 224 | + store.userInfo.userType = rule.userType; | ||
| 225 | + store.userInfo.transportCompanyName = rule.transportCompanyName; | ||
| 226 | + } | ||
| 227 | + } | ||
| 228 | + | ||
| 229 | + if (!hasSpecialRole) { | ||
| 230 | + uni.$u.route({ | ||
| 231 | + type: "switchTab", | ||
| 232 | + url: `/pages/home/index`, | ||
| 233 | + }); | ||
| 234 | + } | ||
| 235 | + } else { | ||
| 236 | + uni.$u.route({ | ||
| 237 | + type: "switchTab", | ||
| 238 | + url: `/pages/home/index`, | ||
| 239 | + }); | ||
| 240 | + } | ||
| 241 | + } else { | ||
| 242 | + uni.$u.toast("该手机无法登录,不是投放点管理员"); | ||
| 243 | + } | ||
| 244 | + } else { | ||
| 245 | + verifyFlag.value = true; | ||
| 246 | + uni.$u.toast(res.data.msg); | ||
| 247 | + } | ||
| 248 | +}; | ||
| 249 | + | ||
| 250 | +// 跳转到注册页面 | ||
| 251 | +const toRegister = () => { | ||
| 252 | + uni.$u.route({ | ||
| 253 | + url: 'pages/sign-up/index' | ||
| 254 | + }); | ||
| 255 | +}; | ||
| 256 | + | ||
| 257 | +// 忘记密码 | ||
| 258 | +const forgetPassword = () => { | ||
| 259 | + // 实现忘记密码逻辑 | ||
| 260 | + console.log("忘记密码"); | ||
| 261 | +}; | ||
| 262 | + | ||
| 263 | +onLoad((options) => { | ||
| 264 | + // 如果从其他页面传入手机号 | ||
| 265 | + if (options.iphoneNumber) { | ||
| 266 | + iphoneNumber.value = options.iphoneNumber; | ||
| 267 | + startIphoneNumber.value = handleIphoneNumber("" + options.iphoneNumber); | ||
| 268 | + } | ||
| 269 | +}); | ||
| 270 | + | ||
| 271 | +const handleIphoneNumber = (tel) => { | ||
| 272 | + return tel.replace(tel.substring(3, 7), "****"); | ||
| 273 | +}; | ||
| 152 | </script> | 274 | </script> |
| 153 | 275 | ||
| 154 | -<style lang="scss" scoped> | ||
| 155 | -.wrap { | ||
| 156 | - padding: 80rpx; | 276 | +<style lang="scss" scoped>.wrap { |
| 277 | + padding: 80rpx; | ||
| 157 | } | 278 | } |
| 158 | 279 | ||
| 159 | -.box { | ||
| 160 | - margin: 30rpx 0; | ||
| 161 | - font-size: 30rpx; | ||
| 162 | - color: 555; | 280 | +.title { |
| 281 | + font-size: 50rpx; | ||
| 282 | + color: #333; | ||
| 283 | + text-align: center; | ||
| 284 | + margin-bottom: 40rpx; | ||
| 163 | } | 285 | } |
| 164 | 286 | ||
| 165 | -.key-input { | ||
| 166 | - padding: 30rpx 0; | 287 | +.login-type-switch { |
| 288 | + display: flex; | ||
| 289 | + justify-content: center; | ||
| 290 | + margin-bottom: 40rpx; | ||
| 291 | + | ||
| 292 | + text { | ||
| 293 | + padding: 10rpx 20rpx; | ||
| 294 | + margin: 0 10rpx; | ||
| 295 | + border-radius: 20rpx; | ||
| 296 | + cursor: pointer; | ||
| 297 | + | ||
| 298 | + &.active { | ||
| 299 | + background-color: #19a97c; | ||
| 300 | + color: white; | ||
| 301 | + } | ||
| 302 | + } | ||
| 303 | +} | ||
| 167 | 304 | ||
| 168 | - -webkit-user-select: text !important; | 305 | +.input-wrapper { |
| 306 | + display: flex; | ||
| 307 | + align-items: center; | ||
| 308 | + border-bottom: 1px solid #e4e7ed; | ||
| 309 | + padding: 20rpx 0; | ||
| 310 | + margin-bottom: 30rpx; | ||
| 169 | 311 | ||
| 170 | - text { | ||
| 171 | - display: none; | ||
| 172 | - } | 312 | + .input-icon { |
| 313 | + margin-right: 20rpx; | ||
| 314 | + } | ||
| 173 | 315 | ||
| 174 | - .error { | ||
| 175 | - display: block; | ||
| 176 | - color: red; | ||
| 177 | - font-size: 30rpx; | ||
| 178 | - margin: 20rpx 0; | ||
| 179 | - } | 316 | + .login-input { |
| 317 | + flex: 1; | ||
| 318 | + font-size: 28rpx; | ||
| 319 | + color: #303133; | ||
| 320 | + padding: 10rpx 0; | ||
| 321 | + | ||
| 322 | + &::placeholder { | ||
| 323 | + color: #c0c4cc; | ||
| 324 | + } | ||
| 325 | + } | ||
| 180 | } | 326 | } |
| 181 | 327 | ||
| 182 | -.title { | ||
| 183 | - font-size: 50rpx; | ||
| 184 | - color: #333; | 328 | +.placeholder-style { |
| 329 | + color: #c0c4cc; | ||
| 330 | + font-size: 26rpx; | ||
| 185 | } | 331 | } |
| 186 | 332 | ||
| 187 | -.key-input .tips { | ||
| 188 | - font-size: 30rpx; | ||
| 189 | - color: #333; | ||
| 190 | - margin-top: 20rpx; | ||
| 191 | - margin-bottom: 60rpx; | 333 | +.tips { |
| 334 | + font-size: 28rpx; | ||
| 335 | + color: #333; | ||
| 336 | + margin: 20rpx 0; | ||
| 192 | } | 337 | } |
| 193 | 338 | ||
| 194 | .captcha { | 339 | .captcha { |
| 195 | - color: $u-warning; | ||
| 196 | - font-size: 30rpx; | ||
| 197 | - margin-top: 40rpx; | 340 | + color: $u-warning; |
| 341 | + font-size: 28rpx; | ||
| 342 | + margin-top: 40rpx; | ||
| 343 | + display: flex; | ||
| 344 | + justify-content: space-between; | ||
| 345 | + | ||
| 346 | + .noCaptcha { | ||
| 347 | + display: block; | ||
| 348 | + cursor: pointer; | ||
| 349 | + } | ||
| 350 | + | ||
| 351 | + .regain { | ||
| 352 | + display: block; | ||
| 353 | + } | ||
| 354 | +} | ||
| 355 | + | ||
| 356 | +.error { | ||
| 357 | + display: block; | ||
| 358 | + color: red; | ||
| 359 | + font-size: 28rpx; | ||
| 360 | + margin: 20rpx 0; | ||
| 361 | +} | ||
| 362 | + | ||
| 363 | +.login-btn { | ||
| 364 | + background-color: #19a97c; | ||
| 365 | + color: #ffffff; | ||
| 366 | + border: none; | ||
| 367 | + font-size: 30rpx; | ||
| 368 | + padding: 12rpx 0; | ||
| 369 | + border-radius: 50rpx; | ||
| 370 | + margin-top: 60rpx; | ||
| 371 | + width: 100%; | ||
| 372 | + | ||
| 373 | + &::after { | ||
| 374 | + border: none; | ||
| 375 | + } | ||
| 376 | +} | ||
| 198 | 377 | ||
| 199 | - .noCaptcha { | ||
| 200 | - display: block; | ||
| 201 | - } | 378 | +.alternative { |
| 379 | + color: $u-tips-color; | ||
| 380 | + display: flex; | ||
| 381 | + justify-content: space-between; | ||
| 382 | + margin-top: 60rpx; | ||
| 202 | 383 | ||
| 203 | - .regain { | ||
| 204 | - display: block; | ||
| 205 | - } | 384 | + .link { |
| 385 | + color: $u-warning; | ||
| 386 | + cursor: pointer; | ||
| 387 | + } | ||
| 206 | } | 388 | } |
| 207 | -</style> | 389 | -</style> |
| 390 | +</style> | ||
| 208 | \ No newline at end of file | 391 | \ No newline at end of file |
garbage-removal/src/pages/login/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <view class="wrap"> | ||
| 3 | - <view class="top"></view> | ||
| 4 | - <u-toast ref="uToastRef"></u-toast> | ||
| 5 | - <view class="content"> | ||
| 6 | - <view class="title">欢迎登录</view> | ||
| 7 | - <input class="u-border-bottom" type="number" v-model="tel" placeholder="请输入手机号" /> | ||
| 8 | - <!-- <view class="tips">未注册的手机号验证后自动创建账号</view> --> | ||
| 9 | - <button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button> | ||
| 10 | - <view class="alternative"> | ||
| 11 | - </view> | ||
| 12 | - </view> | ||
| 13 | - <view class="buttom"> | ||
| 14 | - <!-- <view class="loginType"> | ||
| 15 | - <view class="wechat item"> | ||
| 16 | - <button class="box" open-type="getPhoneNumber" @getphonenumber="handleWeixinLogin"> | ||
| 17 | - <view class="icon"><u-icon size="60" name="weixin-fill" color="rgb(83,194,64)"></u-icon> | ||
| 18 | - </view> | ||
| 19 | - 微信登录 | ||
| 20 | - </button> | ||
| 21 | - </view> | ||
| 22 | - </view> --> | ||
| 23 | - <view class="hint"> | ||
| 24 | - <view style="display: flex; justify-content: flex-start;" @click="radioChange"> | ||
| 25 | - <u-checkbox-group v-model="agree" placement="row" @change="groupChange"> | ||
| 26 | - <!-- 选中颜色为绿色 --> | ||
| 27 | - <u-checkbox shape="square" activeColor="#19a97c" :size="28" | ||
| 28 | - :customStyle="{ marginBottom: '0px', marginTop: '1px' }" :key="0" :name="true"> | ||
| 29 | - </u-checkbox> | ||
| 30 | - </u-checkbox-group> | ||
| 31 | - </view> | ||
| 32 | - <view class="prompt-txt"> | ||
| 33 | - 登录代表同意 | ||
| 34 | - <text class="link" @click="handleUserAgreement">用户协议、隐私政策,</text> | ||
| 35 | - 并授权使用您的账号信息(如昵称、头像、收获地址)以便您统一管理。 | ||
| 36 | - </view> | ||
| 37 | - </view> | ||
| 38 | - </view> | ||
| 39 | - </view> | 2 | + <view class="wrap"> |
| 3 | + <view class="top"></view> | ||
| 4 | + <u-toast ref="uToastRef"></u-toast> | ||
| 5 | + <view class="content"> | ||
| 6 | + <view class="title">欢迎登录</view> | ||
| 7 | + | ||
| 8 | + <!-- 手机号输入框 --> | ||
| 9 | + <view class="input-wrapper"> | ||
| 10 | + <u-icon name="account" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 11 | + <input | ||
| 12 | + class="login-input" | ||
| 13 | + type="text" | ||
| 14 | + v-model="tel" | ||
| 15 | + placeholder="请输入手机号" | ||
| 16 | + placeholder-class="placeholder-style" | ||
| 17 | + /> | ||
| 18 | + </view> | ||
| 19 | + | ||
| 20 | + <!-- 密码输入框 --> | ||
| 21 | + <view class="input-wrapper"> | ||
| 22 | + <u-icon name="lock" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 23 | + <input | ||
| 24 | + class="login-input" | ||
| 25 | + type="password" | ||
| 26 | + v-model="password" | ||
| 27 | + placeholder="请输入密码" | ||
| 28 | + placeholder-class="placeholder-style" | ||
| 29 | + /> | ||
| 30 | + </view> | ||
| 31 | + | ||
| 32 | + <button @tap="submit" :style="[inputStyle]" class="getCaptcha">登录</button> | ||
| 33 | + <view class="alternative"> | ||
| 34 | + <text class="link" @click="toRegister">立即注册</text> | ||
| 35 | + <text class="link" @click="forgetPassword">忘记密码?</text> | ||
| 36 | + </view> | ||
| 37 | + </view> | ||
| 38 | + <view class="buttom"> | ||
| 39 | + <view class="hint"> | ||
| 40 | + <view style="display: flex; justify-content: flex-start;" @click="radioChange"> | ||
| 41 | + <u-checkbox-group v-model="agree" placement="row" @change="groupChange"> | ||
| 42 | + <u-checkbox shape="square" activeColor="#19a97c" :size="28" | ||
| 43 | + :customStyle="{ marginBottom: '0px', marginTop: '1px' }" :key="0" :name="true"> | ||
| 44 | + </u-checkbox> | ||
| 45 | + </u-checkbox-group> | ||
| 46 | + </view> | ||
| 47 | + <view class="prompt-txt"> | ||
| 48 | + 登录代表同意 | ||
| 49 | + <text class="link" @click="handleUserAgreement">用户协议、隐私政策,</text> | ||
| 50 | + 并授权使用您的账号信息(如昵称、头像、收获地址)以便您统一管理。 | ||
| 51 | + </view> | ||
| 52 | + </view> | ||
| 53 | + </view> | ||
| 54 | + </view> | ||
| 40 | </template> | 55 | </template> |
| 41 | 56 | ||
| 42 | <script> | 57 | <script> |
| 43 | import { userLogin } from "@/apis/user.js"; | 58 | import { userLogin } from "@/apis/user.js"; |
| 59 | +import { useMainStore } from '@/stores/index.js'; | ||
| 44 | export default { | 60 | export default { |
| 45 | - data() { | ||
| 46 | - return { | ||
| 47 | - tel: '', | ||
| 48 | - agree: [] | ||
| 49 | - } | ||
| 50 | - }, | ||
| 51 | - computed: { | ||
| 52 | - inputStyle() { | ||
| 53 | - let style = {}; | ||
| 54 | - if (this.tel) { | ||
| 55 | - style.color = "#fff"; | ||
| 56 | - style.backgroundColor = this.$u.color['success']; | ||
| 57 | - } | ||
| 58 | - return style; | ||
| 59 | - } | ||
| 60 | - }, | ||
| 61 | - methods: { | ||
| 62 | - groupChange(e) { | ||
| 63 | - console.log(e); | ||
| 64 | - }, | ||
| 65 | - submit() { | ||
| 66 | - if (this.$u.test.mobile(this.tel)) { | ||
| 67 | - if (this.agree[0]) { | ||
| 68 | - this.$u.route({ | ||
| 69 | - url: `pages/login/code?iphoneNumber=${this.tel}`, | ||
| 70 | - }) | ||
| 71 | - } else { | ||
| 72 | - let that = this | ||
| 73 | - uni.showModal({ | ||
| 74 | - title: '提示', | ||
| 75 | - content: '需要同意登录协议', | ||
| 76 | - success: function (res) { | ||
| 77 | - if (res.confirm) { | ||
| 78 | - that.agree[0] = true | ||
| 79 | - } else if (res.cancel) { | ||
| 80 | - } | ||
| 81 | - } | ||
| 82 | - }) | ||
| 83 | - } | ||
| 84 | - } else { | ||
| 85 | - this.$refs.uToastRef.show({ | ||
| 86 | - type: 'default', | ||
| 87 | - title: '默认主题', | ||
| 88 | - message: "手机号不对", | ||
| 89 | - complete() { | ||
| 90 | - | ||
| 91 | - } | ||
| 92 | - }) | ||
| 93 | - } | ||
| 94 | - }, | ||
| 95 | - handleUserAgreement() { | ||
| 96 | - console.log("user click agreement"); | ||
| 97 | - }, | ||
| 98 | - radioChange() { | ||
| 99 | - this.agree[0] = !this.agree[0] | ||
| 100 | - }, | ||
| 101 | - handleWeixinLogin(wxInfo) { | ||
| 102 | - uni.login({ | ||
| 103 | - provider: 'weixin', | ||
| 104 | - success: res => { | ||
| 105 | - userLogin({ loginType: type, encryptedData: wxInfo.detail.encryptedData, iv: wxInfo.detail.iv, wxCode: res.code }) | ||
| 106 | - .then(res => { | ||
| 107 | - console.log(res); | ||
| 108 | - }) | ||
| 109 | - } | ||
| 110 | - }); | ||
| 111 | - } | ||
| 112 | - } | 61 | + data() { |
| 62 | + return { | ||
| 63 | + tel: '', | ||
| 64 | + nickname: '', | ||
| 65 | + password: '', | ||
| 66 | + agree: [] | ||
| 67 | + } | ||
| 68 | + }, | ||
| 69 | + computed: { | ||
| 70 | + inputStyle() { | ||
| 71 | + let style = {}; | ||
| 72 | + if (this.username && this.password) { | ||
| 73 | + style.color = "#fff"; | ||
| 74 | + style.backgroundColor = this.$u.color['success']; | ||
| 75 | + } | ||
| 76 | + return style; | ||
| 77 | + } | ||
| 78 | + }, | ||
| 79 | + methods: { | ||
| 80 | + toRegister() { | ||
| 81 | + this.$u.route({ | ||
| 82 | + url: 'pages/sign-up/index' | ||
| 83 | + }); | ||
| 84 | + }, | ||
| 85 | + groupChange(e) { | ||
| 86 | + console.log(e); | ||
| 87 | + }, | ||
| 88 | + submit() { | ||
| 89 | + if (this.$u.test.mobile(this.tel)) { | ||
| 90 | + if (this.agree[0]) { | ||
| 91 | + userLogin({ | ||
| 92 | + loginType: 0, | ||
| 93 | + tel: this.tel, | ||
| 94 | + password: this.password | ||
| 95 | + }).then(res => { | ||
| 96 | + if (res.data.code === 200) { | ||
| 97 | + console.log('登录成功', res); | ||
| 98 | + uni.setStorageSync("cancelFlag", false); | ||
| 99 | + this.$u.route({ | ||
| 100 | + type: "switchTab", | ||
| 101 | + url: `/pages/home/index`, | ||
| 102 | + }); | ||
| 103 | + } else if (res.data.code === 500) { | ||
| 104 | + this.$refs.uToastRef.show({ | ||
| 105 | + type: 'error', | ||
| 106 | + message: "用户不存在" | ||
| 107 | + }); | ||
| 108 | + } else { | ||
| 109 | + console.log(res.data); | ||
| 110 | + } | ||
| 111 | + }).catch(err => { | ||
| 112 | + this.$refs.uToastRef.show({ | ||
| 113 | + type: 'error', | ||
| 114 | + message: "网络错误,请稍后再试" | ||
| 115 | + }); | ||
| 116 | + }); | ||
| 117 | + } else { | ||
| 118 | + let that = this; | ||
| 119 | + uni.showModal({ | ||
| 120 | + title: '提示', | ||
| 121 | + content: '需要同意登录协议', | ||
| 122 | + success: function (res) { | ||
| 123 | + if (res.confirm) { | ||
| 124 | + that.agree[0] = true; | ||
| 125 | + } else if (res.cancel) { | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | + }); | ||
| 129 | + } | ||
| 130 | + } else { | ||
| 131 | + this.$refs.uToastRef.show({ | ||
| 132 | + type: 'default', | ||
| 133 | + title: '默认主题', | ||
| 134 | + message: "手机号不对", | ||
| 135 | + complete() { | ||
| 136 | + } | ||
| 137 | + }); | ||
| 138 | + } | ||
| 139 | + }, | ||
| 140 | + handleUserAgreement() { | ||
| 141 | + console.log("user click agreement"); | ||
| 142 | + }, | ||
| 143 | + radioChange() { | ||
| 144 | + this.agree[0] = !this.agree[0] | ||
| 145 | + }, | ||
| 146 | + handleWeixinLogin(wxInfo) { | ||
| 147 | + uni.login({ | ||
| 148 | + provider: 'weixin', | ||
| 149 | + success: res => { | ||
| 150 | + userLogin({ loginType: type, encryptedData: wxInfo.detail.encryptedData, iv: wxInfo.detail.iv, wxCode: res.code }) | ||
| 151 | + .then(res => { | ||
| 152 | + console.log(res); | ||
| 153 | + }) | ||
| 154 | + } | ||
| 155 | + }); | ||
| 156 | + } | ||
| 157 | + } | ||
| 113 | } | 158 | } |
| 114 | </script> | 159 | </script> |
| 115 | 160 | ||
| 116 | <style lang="scss" scoped> | 161 | <style lang="scss" scoped> |
| 117 | .wrap { | 162 | .wrap { |
| 118 | - font-size: 28rpx; | ||
| 119 | - | ||
| 120 | - .content { | ||
| 121 | - width: 600rpx; | ||
| 122 | - margin: 80rpx auto 0; | ||
| 123 | - | ||
| 124 | - .title { | ||
| 125 | - text-align: left; | ||
| 126 | - font-size: 60rpx; | ||
| 127 | - font-weight: 500; | ||
| 128 | - margin-bottom: 100rpx; | ||
| 129 | - } | ||
| 130 | - | ||
| 131 | - input { | ||
| 132 | - text-align: left; | ||
| 133 | - margin-bottom: 10rpx; | ||
| 134 | - padding-bottom: 6rpx; | ||
| 135 | - } | ||
| 136 | - | ||
| 137 | - .tips { | ||
| 138 | - color: $u-info; | ||
| 139 | - margin-bottom: 60rpx; | ||
| 140 | - margin-top: 8rpx; | ||
| 141 | - font-size: 12px; | ||
| 142 | - } | ||
| 143 | - | ||
| 144 | - .getCaptcha { | ||
| 145 | - background-color: #19a97c; | ||
| 146 | - color: #ffffff; | ||
| 147 | - border: none; | ||
| 148 | - font-size: 30rpx; | ||
| 149 | - padding: 12rpx 0; | ||
| 150 | - | ||
| 151 | - &::after { | ||
| 152 | - border: none; | ||
| 153 | - } | ||
| 154 | - } | ||
| 155 | - | ||
| 156 | - .alternative { | ||
| 157 | - color: $u-tips-color; | ||
| 158 | - display: flex; | ||
| 159 | - justify-content: space-between; | ||
| 160 | - margin-top: 30rpx; | ||
| 161 | - } | ||
| 162 | - } | ||
| 163 | - | ||
| 164 | - .buttom { | ||
| 165 | - .loginType { | ||
| 166 | - display: flex; | ||
| 167 | - padding: 350rpx 150rpx 150rpx 150rpx; | ||
| 168 | - justify-content: center; | ||
| 169 | - | ||
| 170 | - .item { | ||
| 171 | - .box { | ||
| 172 | - display: flex; | ||
| 173 | - flex-direction: column; | ||
| 174 | - align-items: center; | ||
| 175 | - color: $u-content-color; | ||
| 176 | - justify-content: center; | ||
| 177 | - font-size: 28rpx; | ||
| 178 | - background-color: #ffffff00; | ||
| 179 | - border-radius: 0 !important; | ||
| 180 | - border: 0 solid #ffffff00 !important; | ||
| 181 | - padding: 0 !important; | ||
| 182 | - margin: 0 !important; | ||
| 183 | - | ||
| 184 | - &::after { | ||
| 185 | - border: none; | ||
| 186 | - } | ||
| 187 | - | ||
| 188 | - } | ||
| 189 | - | ||
| 190 | - } | ||
| 191 | - | ||
| 192 | - } | ||
| 193 | - | ||
| 194 | - .hint { | ||
| 195 | - padding: 20rpx 40rpx; | ||
| 196 | - font-size: 28rpx; | ||
| 197 | - color: $u-tips-color; | ||
| 198 | - display: flex; | ||
| 199 | - justify-content: flex-start; | ||
| 200 | - | ||
| 201 | - .prompt-txt { | ||
| 202 | - .link { | ||
| 203 | - color: $u-warning; | ||
| 204 | - } | ||
| 205 | - } | ||
| 206 | - | ||
| 207 | - | ||
| 208 | - } | ||
| 209 | - } | 163 | + font-size: 28rpx; |
| 164 | + | ||
| 165 | + .content { | ||
| 166 | + width: 600rpx; | ||
| 167 | + margin: 80rpx auto 0; | ||
| 168 | + | ||
| 169 | + .title { | ||
| 170 | + text-align: left; | ||
| 171 | + font-size: 60rpx; | ||
| 172 | + font-weight: 500; | ||
| 173 | + margin-bottom: 100rpx; | ||
| 174 | + } | ||
| 175 | + | ||
| 176 | + // 输入框容器样式 | ||
| 177 | + .input-wrapper { | ||
| 178 | + display: flex; | ||
| 179 | + align-items: center; | ||
| 180 | + border-bottom: 1px solid #e4e7ed; | ||
| 181 | + padding: 20rpx 0; | ||
| 182 | + margin-bottom: 30rpx; | ||
| 183 | + | ||
| 184 | + .input-icon { | ||
| 185 | + margin-right: 20rpx; | ||
| 186 | + } | ||
| 187 | + | ||
| 188 | + .login-input { | ||
| 189 | + flex: 1; | ||
| 190 | + font-size: 28rpx; | ||
| 191 | + color: #303133; | ||
| 192 | + padding: 10rpx 0; | ||
| 193 | + | ||
| 194 | + &::placeholder { | ||
| 195 | + color: #c0c4cc; | ||
| 196 | + } | ||
| 197 | + } | ||
| 198 | + } | ||
| 199 | + | ||
| 200 | + .placeholder-style { | ||
| 201 | + color: #c0c4cc; | ||
| 202 | + font-size: 26rpx; | ||
| 203 | + } | ||
| 204 | + | ||
| 205 | + .tips { | ||
| 206 | + color: $u-info; | ||
| 207 | + margin-bottom: 60rpx; | ||
| 208 | + margin-top: 8rpx; | ||
| 209 | + font-size: 12px; | ||
| 210 | + } | ||
| 211 | + | ||
| 212 | + .getCaptcha { | ||
| 213 | + background-color: #19a97c; | ||
| 214 | + color: #ffffff; | ||
| 215 | + border: none; | ||
| 216 | + font-size: 30rpx; | ||
| 217 | + padding: 12rpx 0; | ||
| 218 | + border-radius: 50rpx; | ||
| 219 | + margin-top: 60rpx; | ||
| 220 | + | ||
| 221 | + &::after { | ||
| 222 | + border: none; | ||
| 223 | + } | ||
| 224 | + } | ||
| 225 | + | ||
| 226 | + .alternative { | ||
| 227 | + color: $u-tips-color; | ||
| 228 | + display: flex; | ||
| 229 | + justify-content: space-between; | ||
| 230 | + margin-top: 30rpx; | ||
| 231 | + | ||
| 232 | + .link { | ||
| 233 | + color: $u-warning; | ||
| 234 | + } | ||
| 235 | + } | ||
| 236 | + } | ||
| 237 | + | ||
| 238 | + .buttom { | ||
| 239 | + .loginType { | ||
| 240 | + display: flex; | ||
| 241 | + padding: 350rpx 150rpx 150rpx 150rpx; | ||
| 242 | + justify-content: center; | ||
| 243 | + | ||
| 244 | + .item { | ||
| 245 | + .box { | ||
| 246 | + display: flex; | ||
| 247 | + flex-direction: column; | ||
| 248 | + align-items: center; | ||
| 249 | + color: $u-content-color; | ||
| 250 | + justify-content: center; | ||
| 251 | + font-size: 28rpx; | ||
| 252 | + background-color: #ffffff00; | ||
| 253 | + border-radius: 0 !important; | ||
| 254 | + border: 0 solid #ffffff00 !important; | ||
| 255 | + padding: 0 !important; | ||
| 256 | + margin: 0 !important; | ||
| 257 | + | ||
| 258 | + &::after { | ||
| 259 | + border: none; | ||
| 260 | + } | ||
| 261 | + } | ||
| 262 | + } | ||
| 263 | + } | ||
| 264 | + | ||
| 265 | + .hint { | ||
| 266 | + padding: 20rpx 40rpx; | ||
| 267 | + font-size: 28rpx; | ||
| 268 | + color: $u-tips-color; | ||
| 269 | + display: flex; | ||
| 270 | + justify-content: flex-start; | ||
| 271 | + | ||
| 272 | + .prompt-txt { | ||
| 273 | + .link { | ||
| 274 | + color: $u-warning; | ||
| 275 | + } | ||
| 276 | + } | ||
| 277 | + } | ||
| 278 | + } | ||
| 210 | } | 279 | } |
| 211 | </style> | 280 | </style> |
garbage-removal/src/pages/order/index.vue
| @@ -6,13 +6,45 @@ | @@ -6,13 +6,45 @@ | ||
| 6 | </view> | 6 | </view> |
| 7 | </template> | 7 | </template> |
| 8 | <script setup> | 8 | <script setup> |
| 9 | -import { useMainStore } from "@/stores/index.js"; | ||
| 10 | -import { computed } from 'vue'; | 9 | +import {useMainStore} from "@/stores/index.js"; |
| 10 | +import {computed} from 'vue'; | ||
| 11 | +import {onShow} from '@dcloudio/uni-app'; | ||
| 11 | import OrderDisposal from './order-disposal/index.vue'; | 12 | import OrderDisposal from './order-disposal/index.vue'; |
| 12 | import OrderDriver from './order-driver/index.vue'; | 13 | import OrderDriver from './order-driver/index.vue'; |
| 13 | import OrderOther from './order-other/index.vue'; | 14 | import OrderOther from './order-other/index.vue'; |
| 15 | +import {queryOrderList} from "@/apis/order.js"; | ||
| 16 | + | ||
| 14 | const mainStore = useMainStore() | 17 | const mainStore = useMainStore() |
| 15 | const userType = computed(() => mainStore.userType) | 18 | const userType = computed(() => mainStore.userType) |
| 19 | + | ||
| 20 | + | ||
| 21 | +// 根据订单类型获取订单总数 | ||
| 22 | +const getOrderCountByType = async (type) => { | ||
| 23 | + try { | ||
| 24 | + return await queryOrderList({ | ||
| 25 | + type: type, | ||
| 26 | + pageNo: 1, | ||
| 27 | + pageSize: 1 | ||
| 28 | + }); | ||
| 29 | + } catch (error) { | ||
| 30 | + console.error('获取订单数量失败:', error); | ||
| 31 | + throw error; | ||
| 32 | + } | ||
| 33 | +} | ||
| 34 | + | ||
| 35 | +onShow(() => { | ||
| 36 | + // 调用获取订单数量的接口 | ||
| 37 | + getOrderCountByType(0).then(res => { | ||
| 38 | + // 设置角标显示为实际的订单总数 | ||
| 39 | + uni.setTabBarBadge({ | ||
| 40 | + index: 1, // 订单tab在tabBar中的索引 | ||
| 41 | + text: String(res.data.data.total) // 使用实际的订单总数 | ||
| 42 | + }); | ||
| 43 | + }).catch(error => { | ||
| 44 | + console.error('获取订单数量失败:', error); | ||
| 45 | + }); | ||
| 46 | +}); | ||
| 47 | + | ||
| 16 | </script> | 48 | </script> |
| 17 | <style lang="scss" scoped> | 49 | <style lang="scss" scoped> |
| 18 | .container { | 50 | .container { |
garbage-removal/src/pages/order/order-disposal/index.vue
| @@ -24,12 +24,14 @@ | @@ -24,12 +24,14 @@ | ||
| 24 | :inactiveStyle="{ color: '#ffffff' }" ref="uTabsElement" :list="displayList" :current="current" | 24 | :inactiveStyle="{ color: '#ffffff' }" ref="uTabsElement" :list="displayList" :current="current" |
| 25 | @change="tabsChange" :scrollable="false"></u-tabs> | 25 | @change="tabsChange" :scrollable="false"></u-tabs> |
| 26 | </template> | 26 | </template> |
| 27 | + | ||
| 27 | <swiper class="swiper" :current="swiperCurrent" @translation="translation" | 28 | <swiper class="swiper" :current="swiperCurrent" @translation="translation" |
| 28 | @animationfinish="animationfinish"> | 29 | @animationfinish="animationfinish"> |
| 29 | <swiper-item class="swiper-item" v-for="( item, index ) in list " :key="index"> | 30 | <swiper-item class="swiper-item" v-for="( item, index ) in list " :key="index"> |
| 30 | <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item> | 31 | <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item> |
| 31 | </swiper-item> | 32 | </swiper-item> |
| 32 | </swiper> | 33 | </swiper> |
| 34 | + | ||
| 33 | </z-paging-swiper> | 35 | </z-paging-swiper> |
| 34 | 36 | ||
| 35 | </view> | 37 | </view> |
garbage-removal/src/pages/sign-up/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="wrap"> | ||
| 3 | + <view class="top"></view> | ||
| 4 | + <u-toast ref="uToastRef"></u-toast> | ||
| 5 | + <view class="content"> | ||
| 6 | + <view class="title">用户注册</view> | ||
| 7 | + | ||
| 8 | + <!-- 手机号输入框 --> | ||
| 9 | + <view class="input-wrapper"> | ||
| 10 | + <u-icon name="phone" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 11 | + <input | ||
| 12 | + class="login-input" | ||
| 13 | + type="number" | ||
| 14 | + v-model="tel" | ||
| 15 | + placeholder="请输入手机号" | ||
| 16 | + placeholder-class="placeholder-style" | ||
| 17 | + /> | ||
| 18 | + </view> | ||
| 19 | + | ||
| 20 | + <!-- 用户名输入框 --> | ||
| 21 | + <view class="input-wrapper"> | ||
| 22 | + <u-icon name="account" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 23 | + <input | ||
| 24 | + class="login-input" | ||
| 25 | + type="text" | ||
| 26 | + v-model="nickname" | ||
| 27 | + placeholder="请输入用户名" | ||
| 28 | + placeholder-class="placeholder-style" | ||
| 29 | + /> | ||
| 30 | + </view> | ||
| 31 | + | ||
| 32 | + <!-- 密码输入框 --> | ||
| 33 | + <view class="input-wrapper"> | ||
| 34 | + <u-icon name="lock" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 35 | + <input | ||
| 36 | + class="login-input" | ||
| 37 | + type="password" | ||
| 38 | + v-model="password" | ||
| 39 | + placeholder="请输入密码" | ||
| 40 | + placeholder-class="placeholder-style" | ||
| 41 | + /> | ||
| 42 | + </view> | ||
| 43 | + | ||
| 44 | + <!-- 确认密码输入框 --> | ||
| 45 | + <view class="input-wrapper"> | ||
| 46 | + <u-icon name="lock" size="36" color="#909399" class="input-icon"></u-icon> | ||
| 47 | + <input | ||
| 48 | + class="login-input" | ||
| 49 | + type="password" | ||
| 50 | + v-model="confirmPassword" | ||
| 51 | + placeholder="请确认密码" | ||
| 52 | + placeholder-class="placeholder-style" | ||
| 53 | + /> | ||
| 54 | + </view> | ||
| 55 | + | ||
| 56 | + <button @tap="submit" :style="[inputStyle]" class="getCaptcha">注册</button> | ||
| 57 | + <view class="alternative"> | ||
| 58 | + <text class="link" @click="toLogin">已有账号?立即登录</text> | ||
| 59 | + </view> | ||
| 60 | + </view> | ||
| 61 | + <view class="buttom"> | ||
| 62 | + <view class="hint"> | ||
| 63 | + <view style="display: flex; justify-content: flex-start;" @click="radioChange"> | ||
| 64 | + <u-checkbox-group v-model="agree" placement="row" @change="groupChange"> | ||
| 65 | + <u-checkbox shape="square" activeColor="#19a97c" :size="28" | ||
| 66 | + :customStyle="{ marginBottom: '0px', marginTop: '1px' }" :key="0" :name="true"> | ||
| 67 | + </u-checkbox> | ||
| 68 | + </u-checkbox-group> | ||
| 69 | + </view> | ||
| 70 | + <view class="prompt-txt"> | ||
| 71 | + 注册代表同意 | ||
| 72 | + <text class="link" @click="handleUserAgreement">用户协议、隐私政策,</text> | ||
| 73 | + 并授权使用您的账号信息(如昵称、头像、收获地址)以便您统一管理。 | ||
| 74 | + </view> | ||
| 75 | + </view> | ||
| 76 | + </view> | ||
| 77 | + </view> | ||
| 78 | +</template> | ||
| 79 | + | ||
| 80 | +<script> | ||
| 81 | +import { userLogin } from "@/apis/user.js"; | ||
| 82 | + | ||
| 83 | +export default { | ||
| 84 | + data() { | ||
| 85 | + return { | ||
| 86 | + tel: '', | ||
| 87 | + nickname: '', | ||
| 88 | + password: '', | ||
| 89 | + confirmPassword: '', | ||
| 90 | + agree: [] | ||
| 91 | + } | ||
| 92 | + }, | ||
| 93 | + computed: { | ||
| 94 | + inputStyle() { | ||
| 95 | + let style = {}; | ||
| 96 | + if (this.tel && this.nickname && this.password && this.confirmPassword) { | ||
| 97 | + style.color = "#fff"; | ||
| 98 | + style.backgroundColor = this.$u.color['success']; | ||
| 99 | + } | ||
| 100 | + return style; | ||
| 101 | + } | ||
| 102 | + }, | ||
| 103 | + methods: { | ||
| 104 | + groupChange(e) { | ||
| 105 | + console.log(e); | ||
| 106 | + }, | ||
| 107 | + submit() { | ||
| 108 | + // 验证必填字段 | ||
| 109 | + if (!this.tel || !this.nickname || !this.password || !this.confirmPassword) { | ||
| 110 | + this.$refs.uToastRef.show({ | ||
| 111 | + type: 'default', | ||
| 112 | + message: "请填写所有必填项", | ||
| 113 | + }); | ||
| 114 | + return; | ||
| 115 | + } | ||
| 116 | + | ||
| 117 | + // 验证手机号格式 | ||
| 118 | + if (!this.$u.test.mobile(this.tel)) { | ||
| 119 | + this.$refs.uToastRef.show({ | ||
| 120 | + type: 'default', | ||
| 121 | + message: "手机号格式不正确", | ||
| 122 | + }); | ||
| 123 | + return; | ||
| 124 | + } | ||
| 125 | + | ||
| 126 | + // 验证密码长度 | ||
| 127 | + if (this.password.length < 6) { | ||
| 128 | + this.$refs.uToastRef.show({ | ||
| 129 | + type: 'default', | ||
| 130 | + message: "密码长度不能少于6位", | ||
| 131 | + }); | ||
| 132 | + return; | ||
| 133 | + } | ||
| 134 | + | ||
| 135 | + // 验证密码确认 | ||
| 136 | + if (this.password !== this.confirmPassword) { | ||
| 137 | + this.$refs.uToastRef.show({ | ||
| 138 | + type: 'default', | ||
| 139 | + message: "两次输入的密码不一致", | ||
| 140 | + }); | ||
| 141 | + return; | ||
| 142 | + } | ||
| 143 | + | ||
| 144 | + if (!this.agree[0]) { | ||
| 145 | + let that = this; | ||
| 146 | + uni.showModal({ | ||
| 147 | + title: '提示', | ||
| 148 | + content: '需要同意用户协议才能注册', | ||
| 149 | + success: function (res) { | ||
| 150 | + if (res.confirm) { | ||
| 151 | + that.agree[0] = true; | ||
| 152 | + } | ||
| 153 | + } | ||
| 154 | + }); | ||
| 155 | + return; | ||
| 156 | + } | ||
| 157 | + | ||
| 158 | + this.doRegister(); | ||
| 159 | + }, | ||
| 160 | + doRegister() { | ||
| 161 | + userLogin({ | ||
| 162 | + loginType: 0, | ||
| 163 | + signin: 1, | ||
| 164 | + tel: this.tel, | ||
| 165 | + nikename: this.nickname, | ||
| 166 | + password: this.password | ||
| 167 | + }).then(res => { | ||
| 168 | + console.log('注册成功', res); | ||
| 169 | + this.$refs.uToastRef.show({ | ||
| 170 | + type: 'success', | ||
| 171 | + message: "注册成功", | ||
| 172 | + complete: () => { | ||
| 173 | + setTimeout(() => { | ||
| 174 | + this.$u.route({ | ||
| 175 | + url: 'pages/login/code' | ||
| 176 | + }); | ||
| 177 | + }, 1000); | ||
| 178 | + } | ||
| 179 | + }); | ||
| 180 | + }).catch(err => { | ||
| 181 | + console.log('注册失败', err); | ||
| 182 | + this.$refs.uToastRef.show({ | ||
| 183 | + type: 'error', | ||
| 184 | + message: err.message || "注册失败" | ||
| 185 | + }); | ||
| 186 | + }); | ||
| 187 | + }, | ||
| 188 | + handleUserAgreement() { | ||
| 189 | + console.log("user click agreement"); | ||
| 190 | + }, | ||
| 191 | + radioChange() { | ||
| 192 | + this.agree[0] = !this.agree[0]; | ||
| 193 | + }, | ||
| 194 | + toLogin() { | ||
| 195 | + this.$u.route({ | ||
| 196 | + url: 'pages/login/code' | ||
| 197 | + }); | ||
| 198 | + } | ||
| 199 | + } | ||
| 200 | +} | ||
| 201 | +</script> | ||
| 202 | + | ||
| 203 | +<style lang="scss" scoped>.wrap { | ||
| 204 | + font-size: 28rpx; | ||
| 205 | + | ||
| 206 | + .content { | ||
| 207 | + width: 600rpx; | ||
| 208 | + margin: 80rpx auto 0; | ||
| 209 | + | ||
| 210 | + .title { | ||
| 211 | + text-align: left; | ||
| 212 | + font-size: 60rpx; | ||
| 213 | + font-weight: 500; | ||
| 214 | + margin-bottom: 100rpx; | ||
| 215 | + } | ||
| 216 | + | ||
| 217 | + // 输入框容器样式 | ||
| 218 | + .input-wrapper { | ||
| 219 | + display: flex; | ||
| 220 | + align-items: center; | ||
| 221 | + border-bottom: 1px solid #e4e7ed; | ||
| 222 | + padding: 20rpx 0; | ||
| 223 | + margin-bottom: 30rpx; | ||
| 224 | + | ||
| 225 | + .input-icon { | ||
| 226 | + margin-right: 20rpx; | ||
| 227 | + } | ||
| 228 | + | ||
| 229 | + .login-input { | ||
| 230 | + flex: 1; | ||
| 231 | + font-size: 28rpx; | ||
| 232 | + color: #303133; | ||
| 233 | + padding: 10rpx 0; | ||
| 234 | + | ||
| 235 | + &::placeholder { | ||
| 236 | + color: #c0c4cc; | ||
| 237 | + } | ||
| 238 | + } | ||
| 239 | + } | ||
| 240 | + | ||
| 241 | + .placeholder-style { | ||
| 242 | + color: #c0c4cc; | ||
| 243 | + font-size: 26rpx; | ||
| 244 | + } | ||
| 245 | + | ||
| 246 | + .getCaptcha { | ||
| 247 | + background-color: #19a97c; | ||
| 248 | + color: #ffffff; | ||
| 249 | + border: none; | ||
| 250 | + font-size: 30rpx; | ||
| 251 | + padding: 12rpx 0; | ||
| 252 | + border-radius: 50rpx; | ||
| 253 | + margin-top: 60rpx; | ||
| 254 | + | ||
| 255 | + &::after { | ||
| 256 | + border: none; | ||
| 257 | + } | ||
| 258 | + } | ||
| 259 | + | ||
| 260 | + .alternative { | ||
| 261 | + color: $u-tips-color; | ||
| 262 | + display: flex; | ||
| 263 | + justify-content: center; | ||
| 264 | + margin-top: 30rpx; | ||
| 265 | + | ||
| 266 | + .link { | ||
| 267 | + color: $u-warning; | ||
| 268 | + } | ||
| 269 | + } | ||
| 270 | + } | ||
| 271 | + | ||
| 272 | + .buttom { | ||
| 273 | + .hint { | ||
| 274 | + padding: 20rpx 40rpx; | ||
| 275 | + font-size: 28rpx; | ||
| 276 | + color: $u-tips-color; | ||
| 277 | + display: flex; | ||
| 278 | + justify-content: flex-start; | ||
| 279 | + | ||
| 280 | + .prompt-txt { | ||
| 281 | + .link { | ||
| 282 | + color: $u-warning; | ||
| 283 | + } | ||
| 284 | + } | ||
| 285 | + } | ||
| 286 | + } | ||
| 287 | +} | ||
| 288 | +</style> | ||
| 0 | \ No newline at end of file | 289 | \ No newline at end of file |
garbage-removal/src/pages/wode/index.vue
| @@ -116,7 +116,7 @@ const handleLoginOut = () => { | @@ -116,7 +116,7 @@ const handleLoginOut = () => { | ||
| 116 | uni.$u.toast("已退出") | 116 | uni.$u.toast("已退出") |
| 117 | uni.$u.route({ | 117 | uni.$u.route({ |
| 118 | type: "reLaunch", | 118 | type: "reLaunch", |
| 119 | - url: "pages/login/index" | 119 | + url: "pages/login/code" |
| 120 | }) | 120 | }) |
| 121 | } | 121 | } |
| 122 | }) | 122 | }) |
garbage-removal/src/utils/request/request.js
| @@ -115,7 +115,7 @@ const reSetLoginStatus = () => { | @@ -115,7 +115,7 @@ const reSetLoginStatus = () => { | ||
| 115 | 115 | ||
| 116 | uni.setStorageSync("cancelFlag", false); | 116 | uni.setStorageSync("cancelFlag", false); |
| 117 | uni.reLaunch({ | 117 | uni.reLaunch({ |
| 118 | - url: "/pages/login/index", | 118 | + url: "/pages/login/code", |
| 119 | }) | 119 | }) |
| 120 | 120 | ||
| 121 | } else if (res.cancel) { | 121 | } else if (res.cancel) { |