From d8ad0c1805b0701afadd069c79950edde490d5c9 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期一, 08 七月 2024 17:17:16 +0800
Subject: [PATCH] update 花店小程序
---
pages/login/supplier-login.vue | 839 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 421 insertions(+), 418 deletions(-)
diff --git a/pages/login/supplier-login.vue b/pages/login/supplier-login.vue
index 51d8a60..5d7d5e5 100644
--- a/pages/login/supplier-login.vue
+++ b/pages/login/supplier-login.vue
@@ -1,419 +1,422 @@
-<template>
- <view class="main-container login-container img100 relative" style="margin-top: 0rpx;">
- <!-- background-image:url('@/static/images/supplier/login/bg.png') -->
-
- <image class="component-bg"
- src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/a5/a54508de179a4942918ecb2c5a4aa9f5bg.png"
- mode="scaleToFill" />
- <view class="t-login top-bg">
- <view class="nav-title">登录</view>
- <view class="login">
- <form class="cl">
- <view class="t-a titles-top">
- <view class="title-1">HELLO</view>
- <view class="title-2">欢迎登录<span class="title-3">花满芜</span></view>
- </view>
- <view class="t-a input" v-if="loginType=='pwd'">
- <input type="text" name="userName" placeholder="请输入账号" v-model="userName" />
- </view>
- <view class="t-a input" v-if="loginType=='pwd'">
- <input type="text" :password="true" name="password" placeholder="请输入密码" v-model="password" />
- </view>
- <view class="t-a input" v-if="loginType=='code'">
-
-
- <input type="text" name="userName" placeholder="请输入手机号" v-model="phoneNumber" />
- <view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
- {{getCodeText}}
- </view>
- </view>
-
-
- <view class="t-a input" v-if="loginType=='code'">
- <input type="text" name="userName" placeholder="请输入手机验证码" v-model="smsCode" />
- </view>
-
- <button @tap="login()" class="bottom-button">登 录</button>
-
- <view class="flex">
- <view class="topic-font" v-if="loginType=='pwd'" @click="loginType='code'">手机验证码登录</view>
- <view class="topic-font" v-if="loginType=='code'" @click="loginType='pwd'">账号密码登录</view>
-
- <view class="topic-font m-l-a m-r-0" @click="toReg">前往注册</view>
- </view>
- </form>
- </view>
- </view>
- </view>
-</template>
-<script>
- // import util from '@/utils/util.js'
- // import gzmzApi from '@/api/gzmzApi.js'
- // import myCache from '@/utils/myCache.js'
- export default {
- props: {
- // apitype: 'loginSupplier',
- apitype: {
- type:String,
- default(){
- // #ifdef PUB_SUPPLIER
- return 'loginSupplier'
- // #endif
- // #ifdef PUB_PARTNER
- return 'loginPartner'
- // #endif
- return ''
- // return 'loginPartner'
- }
- },
- },
- data() {
- return {
- openId: '-1',
- userName: 'gzm',
- password: '123456',
- // userName: '',
- // password: '',
-
- phoneNumber: '',
- smsCode: '',
-
- checked: false,
- loginType: 'pwd', //pwd和code，密码和验证码登录
- pcfvalue: undefined,
- getCodeText: '获取验证码',
- getCodeBtnColor: "#20613D",
- getCodeisWaiting: false,
- Timer: undefined
- };
- },
- methods: {
- async getCode() {
- uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
- if (this.getCodeisWaiting) {
- return;
- }
- if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误
- this.$message.showToast('请填写正确手机号码')
- return false;
- }
- this.getCodeText = "发送中..." //发送验证码
- this.getCodeisWaiting = true;
- this.getCodeBtnColor = "#000" //追加样式，修改颜色
- //示例用定时器模拟请求效果
- //setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
- const {
- code
- } = await this.$http.request('post', '/api/sms/send/code', {
- data: {
- tel: this.phoneNumber,
- userType: 'supplier'
- }
- })
- if (code == 0) {
- uni.showToast({
- title: '验证码已发送',
- icon: "none"
- });
- this.setTimer(); //调用定时器方法
- }
- // setTimeout(() => {
- // uni.showToast({
- // title: '验证码已发送',
- // icon: "none"
- // }); //弹出提示框
- // //示例默认1234，生产中请删除这一句。
- // // this.code = '1234'; //发送验证码，进行填入
- // this.setTimer(); //调用定时器方法
- // }, 1000)
- },
- //setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
- setTimer() {
- let holdTime = 60; //定义变量并赋值
- this.getCodeText = "重新获取(60)"
- //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
- //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
- this.Timer = setInterval(() => {
- if (holdTime <= 0) {
- this.getCodeisWaiting = false;
- this.getCodeBtnColor = "#20613D";
- this.getCodeText = "获取验证码"
- clearInterval(this.Timer); //清除该函数
- return; //返回前面
- }
- this.getCodeText = "重新获取(" + holdTime + ")"
- holdTime--;
- }, 1000)
- },
- toReg() {
- // uni.switchTab({
- // url: '/pages/index/index'
- // })
- uni.redirectTo({
- url: '/sub_pages/supplier/supplier-reg/supplier-reg'
- })
-
- },
- changeAll(e) {
- this.pcfvalue = e.detail.value[0]
- },
- async login() {
- uni.showLoading({
- title: '登陆中'
- });
- var that = this;
- if (this.loginType == 'pwd') {
- if (!that.userName) {
- uni.showToast({
- title: '请输入用户名',
- icon: 'none'
- });
- return;
- }
- if (!that.password) {
- uni.showToast({
- title: '请输入密码',
- icon: 'none'
- });
- return;
- }
- }
- if (this.loginType == 'code') {
- if (!that.tel) {
- uni.showToast({
- title: '请输入手机号',
- icon: 'none'
- });
- return;
- }
- if (!that.smsCode) {
- uni.showToast({
- title: '请输入手机验证码',
- icon: 'none'
- });
- return;
- }
- }
- // if (this.pcfvalue == undefined) {
- // util.showMyToast('必须勾选《用户服务协议》及《隐私政策》');
- // return;
- // }
- let post = {
- username: this.userName,
- password: this.password,
- tel: this.phoneNumber,
- smsCode: this.smsCode
- // openId: '123456789'
- }
- // const {
- // code
- // } = await this.$http.request('get', '/api/login/admin')
- const resp = await this.$store.dispatch(this.apitype, post);
- // uni.hideLoading()
-
- if (resp.code == 0) {
-
- // myCache.cache("userToken", res.data.accessToken)
- // let userRes = await gzmzApi.getMemberInfo();
- // if (userRes.status) {
- // myCache.cache("userInfo", JSON.stringify(userRes.data))
- // }
- // setTimeout(() => {
- // uni.navigateBack();
- // }, 1000);
-
- } else {
- uni.showToast({
- title: '登录失败！',
- icon: 'none'
- });
- return;
- }
-
- },
- tc1(id) {
- uni.navigateTo({
- url: '/pages/users/xieyi?id=' + id,
- });
- }
- }
- };
-</script>
-
-<style lang="scss" scoped>
- @import './login.scss';
-
- .main-container {
- margin: 20px 0;
- }
-
- .img-a {
- position: absolute;
- width: 100%;
- top: -150rpx;
- right: 0;
- }
-
- .img-b {
- position: absolute;
- width: 50%;
- bottom: 0;
- left: -120rpx;
- }
-
- .to-home {
- margin-top: 30rpx;
- font-size: 30rpx;
- color: #5af;
- display: flex;
- flex-direction: row-reverse;
- }
-
- .t-login {
- width: 100%;
- margin: 0 auto;
- font-size: 28rpx;
- color: #000;
- }
-
- .t-login .bg {
- width: 100%;
- position: relative;
- }
-
- .t-login .login {
- width: 650rpx;
- margin: 60rpx auto;
- margin-top: 0rpx;
- font-size: 28rpx;
- color: #000;
- }
-
- .t-login button {
- font-size: 28rpx;
- background: #5677fc;
- color: #fff;
- height: 90rpx;
- line-height: 90rpx;
- border-radius: 50rpx;
- box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
- }
-
- .t-login input {
- padding: 0 20rpx 0 120rpx;
- height: 90rpx;
- line-height: 90rpx;
- margin-bottom: 50rpx;
- background: #f8f7fc;
- border: 1px solid #e9e9e9;
- font-size: 28rpx;
- border-radius: 50rpx;
- }
-
- .t-login .t-a {
- position: relative;
-
- .get-code {
- position: absolute;
- right: 40rpx;
- top: 25rpx;
- }
- }
-
- .t-login .t-a .icon {
- width: 40rpx;
- height: 40rpx;
- position: absolute;
- left: 24rpx;
- top: 14rpx;
- margin-right: 20rpx;
- }
-
- .t-login .t-a .line {
- width: 2rpx;
- height: 40rpx;
- background-color: #dedede;
- position: absolute;
- top: 28rpx;
- left: 98rpx;
- }
-
- .t-login .t-b {
- text-align: left;
- font-size: 46rpx;
- color: #000;
- padding: 300rpx 0 30rpx 0;
- font-weight: bold;
- }
-
- .t-login .t-b2 {
- text-align: left;
- font-size: 32rpx;
- color: #aaaaaa;
- padding: 0rpx 0 120rpx 0;
- }
-
- .t-login .t-c {
- position: absolute;
- right: 22rpx;
- top: 22rpx;
- background: #5677fc;
- color: #fff;
- font-size: 24rpx;
- border-radius: 50rpx;
- height: 50rpx;
- line-height: 50rpx;
- padding: 0 25rpx;
- z-index: 999;
- }
-
- .t-login .t-d {
- text-align: center;
- color: #999;
- margin: 80rpx 0;
- }
-
- .t-login .t-e {
- text-align: center;
- width: 250rpx;
- margin: 80rpx auto 0;
- }
-
- .t-login .t-g {
- float: left;
- width: 50%;
- }
-
- .t-login .t-e image {
- width: 50rpx;
- height: 50rpx;
- }
-
- .t-login .t-f {
- text-align: center;
- margin: 200rpx 0 0 0;
- color: #666;
- }
-
- .t-login .t-f text {
- margin-left: 20rpx;
- color: #aaaaaa;
- font-size: 27rpx;
- }
-
- .t-login .uni-input-placeholder {
- color: #000;
- }
-
- .cl {
- zoom: 1;
- }
-
- .cl:after {
- clear: both;
- display: block;
- visibility: hidden;
- height: 0;
- content: '\20';
- }
+<template>
+ <view class="main-container login-container img100 relative" style="margin-top: 0rpx;">
+ <!-- background-image:url('@/static/images/supplier/login/bg.png') -->
+
+ <image class="component-bg"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/a5/a54508de179a4942918ecb2c5a4aa9f5bg.png"
+ mode="scaleToFill" />
+ <view class="t-login top-bg">
+ <view class="nav-title">登录</view>
+ <view class="login">
+ <form class="cl">
+ <view class="t-a titles-top">
+ <view class="title-1">HELLO</view>
+ <view class="title-2">欢迎登录<span class="title-3">花满芜</span></view>
+ </view>
+ <view class="t-a input" v-if="loginType=='pwd'">
+ <input type="text" name="userName" placeholder="请输入账号" v-model="userName" />
+ </view>
+ <view class="t-a input" v-if="loginType=='pwd'">
+ <input type="text" :password="true" name="password" placeholder="请输入密码" v-model="password" />
+ </view>
+ <view class="t-a input" v-if="loginType=='code'">
+
+
+ <input type="text" name="userName" placeholder="请输入手机号" v-model="phoneNumber" />
+ <view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
+ {{getCodeText}}
+ </view>
+ </view>
+
+
+ <view class="t-a input" v-if="loginType=='code'">
+ <input type="text" name="userName" placeholder="请输入手机验证码" v-model="smsCode" />
+ </view>
+
+ <button @tap="login()" class="bottom-button">登 录</button>
+
+ <view class="flex">
+ <view class="topic-font" v-if="loginType=='pwd'" @click="loginType='code'">手机验证码登录</view>
+ <view class="topic-font" v-if="loginType=='code'" @click="loginType='pwd'">账号密码登录</view>
+
+ <view class="topic-font m-l-a m-r-0" @click="toReg">前往注册</view>
+ </view>
+ </form>
+ </view>
+ </view>
+ </view>
+</template>
+<script>
+ // import util from '@/utils/util.js'
+ // import gzmzApi from '@/api/gzmzApi.js'
+ // import myCache from '@/utils/myCache.js'
+ export default {
+ props: {
+ // apitype: 'loginSupplier',
+ apitype: {
+ type: String,
+ default () {
+ // #ifdef PUB_SUPPLIER
+ return 'loginSupplier'
+ // #endif
+ // #ifdef PUB_PARTNER
+ return 'loginPartner'
+ // #endif
+ // #ifdef PUB_CUSTOMER
+ return 'loginCustomer'
+ // #endif
+ return ''
+ // return 'loginPartner'
+ }
+ },
+ },
+ data() {
+ return {
+ openId: '-1',
+ userName: 'gzm',
+ password: '123456',
+ // userName: '',
+ // password: '',
+
+ phoneNumber: '',
+ smsCode: '',
+
+ checked: false,
+ loginType: 'pwd', //pwd和code，密码和验证码登录
+ pcfvalue: undefined,
+ getCodeText: '获取验证码',
+ getCodeBtnColor: "#20613D",
+ getCodeisWaiting: false,
+ Timer: undefined
+ };
+ },
+ methods: {
+ async getCode() {
+ uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
+ if (this.getCodeisWaiting) {
+ return;
+ }
+ if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误
+ this.$message.showToast('请填写正确手机号码')
+ return false;
+ }
+ this.getCodeText = "发送中..." //发送验证码
+ this.getCodeisWaiting = true;
+ this.getCodeBtnColor = "#000" //追加样式，修改颜色
+ //示例用定时器模拟请求效果
+ //setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
+ const {
+ code
+ } = await this.$http.request('post', '/api/sms/send/code', {
+ data: {
+ tel: this.phoneNumber,
+ userType: 'supplier'
+ }
+ })
+ if (code == 0) {
+ uni.showToast({
+ title: '验证码已发送',
+ icon: "none"
+ });
+ this.setTimer(); //调用定时器方法
+ }
+ // setTimeout(() => {
+ // uni.showToast({
+ // title: '验证码已发送',
+ // icon: "none"
+ // }); //弹出提示框
+ // //示例默认1234，生产中请删除这一句。
+ // // this.code = '1234'; //发送验证码，进行填入
+ // this.setTimer(); //调用定时器方法
+ // }, 1000)
+ },
+ //setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
+ setTimer() {
+ let holdTime = 60; //定义变量并赋值
+ this.getCodeText = "重新获取(60)"
+ //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
+ //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
+ this.Timer = setInterval(() => {
+ if (holdTime <= 0) {
+ this.getCodeisWaiting = false;
+ this.getCodeBtnColor = "#20613D";
+ this.getCodeText = "获取验证码"
+ clearInterval(this.Timer); //清除该函数
+ return; //返回前面
+ }
+ this.getCodeText = "重新获取(" + holdTime + ")"
+ holdTime--;
+ }, 1000)
+ },
+ toReg() {
+ // uni.switchTab({
+ // url: '/pages/index/index'
+ // })
+ uni.redirectTo({
+ url: '/sub_pages/supplier/supplier-reg/supplier-reg'
+ })
+
+ },
+ changeAll(e) {
+ this.pcfvalue = e.detail.value[0]
+ },
+ async login() {
+ uni.showLoading({
+ title: '登陆中'
+ });
+ var that = this;
+ if (this.loginType == 'pwd') {
+ if (!that.userName) {
+ uni.showToast({
+ title: '请输入用户名',
+ icon: 'none'
+ });
+ return;
+ }
+ if (!that.password) {
+ uni.showToast({
+ title: '请输入密码',
+ icon: 'none'
+ });
+ return;
+ }
+ }
+ if (this.loginType == 'code') {
+ if (!that.tel) {
+ uni.showToast({
+ title: '请输入手机号',
+ icon: 'none'
+ });
+ return;
+ }
+ if (!that.smsCode) {
+ uni.showToast({
+ title: '请输入手机验证码',
+ icon: 'none'
+ });
+ return;
+ }
+ }
+ // if (this.pcfvalue == undefined) {
+ // util.showMyToast('必须勾选《用户服务协议》及《隐私政策》');
+ // return;
+ // }
+ let post = {
+ username: this.userName,
+ password: this.password,
+ tel: this.phoneNumber,
+ smsCode: this.smsCode
+ // openId: '123456789'
+ }
+ // const {
+ // code
+ // } = await this.$http.request('get', '/api/login/admin')
+ const resp = await this.$store.dispatch(this.apitype, post);
+ // uni.hideLoading()
+
+ if (resp.code == 0) {
+
+ // myCache.cache("userToken", res.data.accessToken)
+ // let userRes = await gzmzApi.getMemberInfo();
+ // if (userRes.status) {
+ // myCache.cache("userInfo", JSON.stringify(userRes.data))
+ // }
+ // setTimeout(() => {
+ // uni.navigateBack();
+ // }, 1000);
+
+ } else {
+ uni.showToast({
+ title: '登录失败！',
+ icon: 'none'
+ });
+ return;
+ }
+
+ },
+ tc1(id) {
+ uni.navigateTo({
+ url: '/pages/users/xieyi?id=' + id,
+ });
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import './login.scss';
+
+ .main-container {
+ margin: 20px 0;
+ }
+
+ .img-a {
+ position: absolute;
+ width: 100%;
+ top: -150rpx;
+ right: 0;
+ }
+
+ .img-b {
+ position: absolute;
+ width: 50%;
+ bottom: 0;
+ left: -120rpx;
+ }
+
+ .to-home {
+ margin-top: 30rpx;
+ font-size: 30rpx;
+ color: #5af;
+ display: flex;
+ flex-direction: row-reverse;
+ }
+
+ .t-login {
+ width: 100%;
+ margin: 0 auto;
+ font-size: 28rpx;
+ color: #000;
+ }
+
+ .t-login .bg {
+ width: 100%;
+ position: relative;
+ }
+
+ .t-login .login {
+ width: 650rpx;
+ margin: 60rpx auto;
+ margin-top: 0rpx;
+ font-size: 28rpx;
+ color: #000;
+ }
+
+ .t-login button {
+ font-size: 28rpx;
+ background: #5677fc;
+ color: #fff;
+ height: 90rpx;
+ line-height: 90rpx;
+ border-radius: 50rpx;
+ box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
+ }
+
+ .t-login input {
+ padding: 0 20rpx 0 120rpx;
+ height: 90rpx;
+ line-height: 90rpx;
+ margin-bottom: 50rpx;
+ background: #f8f7fc;
+ border: 1px solid #e9e9e9;
+ font-size: 28rpx;
+ border-radius: 50rpx;
+ }
+
+ .t-login .t-a {
+ position: relative;
+
+ .get-code {
+ position: absolute;
+ right: 40rpx;
+ top: 25rpx;
+ }
+ }
+
+ .t-login .t-a .icon {
+ width: 40rpx;
+ height: 40rpx;
+ position: absolute;
+ left: 24rpx;
+ top: 14rpx;
+ margin-right: 20rpx;
+ }
+
+ .t-login .t-a .line {
+ width: 2rpx;
+ height: 40rpx;
+ background-color: #dedede;
+ position: absolute;
+ top: 28rpx;
+ left: 98rpx;
+ }
+
+ .t-login .t-b {
+ text-align: left;
+ font-size: 46rpx;
+ color: #000;
+ padding: 300rpx 0 30rpx 0;
+ font-weight: bold;
+ }
+
+ .t-login .t-b2 {
+ text-align: left;
+ font-size: 32rpx;
+ color: #aaaaaa;
+ padding: 0rpx 0 120rpx 0;
+ }
+
+ .t-login .t-c {
+ position: absolute;
+ right: 22rpx;
+ top: 22rpx;
+ background: #5677fc;
+ color: #fff;
+ font-size: 24rpx;
+ border-radius: 50rpx;
+ height: 50rpx;
+ line-height: 50rpx;
+ padding: 0 25rpx;
+ z-index: 999;
+ }
+
+ .t-login .t-d {
+ text-align: center;
+ color: #999;
+ margin: 80rpx 0;
+ }
+
+ .t-login .t-e {
+ text-align: center;
+ width: 250rpx;
+ margin: 80rpx auto 0;
+ }
+
+ .t-login .t-g {
+ float: left;
+ width: 50%;
+ }
+
+ .t-login .t-e image {
+ width: 50rpx;
+ height: 50rpx;
+ }
+
+ .t-login .t-f {
+ text-align: center;
+ margin: 200rpx 0 0 0;
+ color: #666;
+ }
+
+ .t-login .t-f text {
+ margin-left: 20rpx;
+ color: #aaaaaa;
+ font-size: 27rpx;
+ }
+
+ .t-login .uni-input-placeholder {
+ color: #000;
+ }
+
+ .cl {
+ zoom: 1;
+ }
+
+ .cl:after {
+ clear: both;
+ display: block;
+ visibility: hidden;
+ height: 0;
+ content: '\20';
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3