Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改错误提示不弹出的问题

zyh
Gao xiaosong 3 years ago
parent
7c7736dd6a
commit
6f12083ef1
3 changed files with 698 additions and 786 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 604
      pages/order/OrderReturnDetail/index.vue
  2. 317
      pages/order/submitExpress/index.vue
  3. 563
      pages/user/Login/index.vue

604
pages/order/OrderReturnDetail/index.vue
Unescape View File

@ -1,334 +1,314 @@
<template>
<view class="returnList">
<view class="data bgRed">
<view v-if="orderDetail.salesState === 0">
<view class="state" v-if="orderDetail.state === 0">
已提交申请，请耐心等待卖家处理
</view>
<view class="state" v-if="orderDetail.state === 1">
<view class="state" v-if="orderDetail.serviceType === 0">
已通过平台审核,正在退款
</view>
<view class="state" v-if="orderDetail.serviceType === 1">
已通过平台审核 ,请填写退货物流
</view>
</view>
<view class="state" v-if="orderDetail.state === 2">
已发货，等待商家审核
</view>
<view class="state" v-if="orderDetail.state === 3">
售后订单已完成
</view>
</view>
<view v-if="orderDetail.salesState === 1">
已撤销售后订单
</view>
<view v-if="orderDetail.salesState === 2">
商家已拒绝售后申请
</view>
</view>
<!-- 退款总金额 -->
<view class="money">
<view class="top">
<text>退款总金额</text>
<text class="colorRed">￥{{ orderDetail.refundAmount || 0}}</text>
</view>
<view class="express" v-if="orderDetail.serviceType === 1">
<view class="title">商家已同意退货申请，请尽快发货。</view>
<view class="info people">
收货人： {{ orderDetail.consignee || '' }}
</view>
<view class="info address">
收货地址： {{ orderDetail.address || '' }}
</view>
<view class="info phone">
收货电话： {{ orderDetail.phoneNumber || '' }}
</view>
</view>
<!-- 退款信息 -->
<view class="tips" v-if="orderDetail.state === 0">
<text class="title">您已成功发起退款申请，请耐心等待商家处理</text>
<view class="content">
<view>· 卖家同意或超时未处理，系统将退款给您</view>
<view>· 如果卖家拒绝，您可以修改退款申请后再次发起，卖家会重新处理</view>
</view>
</view>
<!-- 撤销 -->
<!-- <view class="tips" v-if="orderDetail.serviceType === 1 && orderDetail.state >= 2">
<view class="returnList">
<view class="data bgRed">
<view v-if="orderDetail.salesState === 0">
<view class="state" v-if="orderDetail.state === 0">
已提交申请，请耐心等待卖家处理
</view>
<view class="state" v-if="orderDetail.state === 1">
<view class="state" v-if="orderDetail.serviceType === 0">
已通过平台审核,正在退款
</view>
<view class="state" v-if="orderDetail.serviceType === 1">
已通过平台审核 ,请填写退货物流
</view>
</view>
<view class="state" v-if="orderDetail.state === 2">
已发货，等待商家审核
</view>
<view class="state" v-if="orderDetail.state === 3">
售后订单已完成
</view>
</view>
<view v-if="orderDetail.salesState === 1">
已撤销售后订单
</view>
<view v-if="orderDetail.salesState === 2">
商家已拒绝售后申请
</view>
</view>
<!-- 退款总金额 -->
<view class="money">
<view class="top">
<text>退款总金额</text>
<text class="colorRed">￥{{ orderDetail.refundAmount || 0 }}</text>
</view>
<view class="express" v-if="orderDetail.serviceType === 1">
<view class="title">商家已同意退货申请，请尽快发货。</view>
<view class="info people"> 收货人： {{ orderDetail.consignee || '' }} </view>
<view class="info address"> 收货地址： {{ orderDetail.address || '' }} </view>
<view class="info phone"> 收货电话： {{ orderDetail.phoneNumber || '' }} </view>
</view>
<!-- 退款信息 -->
<view class="tips" v-if="orderDetail.state === 0">
<text class="title">您已成功发起退款申请，请耐心等待商家处理</text>
<view class="content">
<view>· 卖家同意或超时未处理，系统将退款给您</view>
<view>· 如果卖家拒绝，您可以修改退款申请后再次发起，卖家会重新处理</view>
</view>
</view>
<!-- 撤销 -->
<!-- <view class="tips" v-if="orderDetail.serviceType === 1 && orderDetail.state >= 2">
<text class="title">您已撤销售后申请</text>
<view class="content">
<view>· </view>
<view>· </view>
</view>
</view> -->
<!-- 商家拒接 -->
<!-- <view class="tips" v-if="orderDetail.serviceType === 2 && orderDetail.state >= 2">
<!-- 商家拒接 -->
<!-- <view class="tips" v-if="orderDetail.serviceType === 2 && orderDetail.state >= 2">
<text class="title">卖家已拒绝</text>
<view class="content">
<view>· </view>
<view>· </view>
</view>
</view> -->
<view class="bottom">
<view class="btns redBtn"
v-if="orderDetail.salesState === 0
&& orderDetail.serviceType === 1
&& orderDetail.state === 1"
@click="toExpress"
>填写物流</view>
<view class="btns def"
v-if="orderDetail.salesState === 0"
@click="cancelReq"
>撤销申请</view>
<!-- <view class="btns redBtn" @click="editReq">修改申请</view>-->
</view>
</view>
<!-- 退款信息 -->
<view class="rebackInfo">
<view class="top">
退款信息
</view>
<view class="rebackItem"
v-for="item in orderDetail.cartInfo"
:key="item.id"
>
<image class="img" :src="item.productInfo.image" mode=""></image>
<view class="info">
<view class="productName">
{{ item.productInfo.storeName }}
</view>
<view class="sku">
{{ item.productInfo.attrInfo.sku }}
</view>
</view>
</view>
<view class="bottom">
<view class="reason">
<view class="left">
退款原因:
</view>
<view class="right">
{{ orderDetail.reasons || '' }}
</view>
</view>
<view class="reason">
<view class="left">
退款金额:
</view>
<view class="right">
￥{{ orderDetail.refundAmount || 0 }}
</view>
</view>
<view class="reason">
<view class="left">
退款编号:
</view>
<view class="right">
{{ orderDetail.id || '' }}
</view>
</view>
<view class="reason">
<view class="left">
申请时间:
</view>
<view class="right">
{{ orderDetail.createTime || '' }}
</view>
</view>
</view>
</view>
</view>
<view class="bottom">
<view class="btns redBtn" v-if="orderDetail.salesState === 0 && orderDetail.serviceType === 1 && orderDetail.state === 1" @click="toExpress">填写物流</view>
<view class="btns def" v-if="orderDetail.salesState === 0" @click="cancelReq">撤销申请</view>
<!-- <view class="btns redBtn" @click="editReq">修改申请</view>-->
</view>
</view>
<!-- 退款信息 -->
<view class="rebackInfo">
<view class="top">
退款信息
</view>
<view class="rebackItem" v-for="item in orderDetail.cartInfo" :key="item.id">
<image class="img" :src="item.productInfo.image" mode=""></image>
<view class="info">
<view class="productName">
{{ item.productInfo.storeName }}
</view>
<view class="sku">
{{ item.productInfo.attrInfo.sku }}
</view>
</view>
</view>
<view class="bottom">
<view class="reason">
<view class="left">
退款原因:
</view>
<view class="right">
{{ orderDetail.reasons || '' }}
</view>
</view>
<view class="reason">
<view class="left">
退款金额:
</view>
<view class="right"> ￥{{ orderDetail.refundAmount || 0 }} </view>
</view>
<view class="reason">
<view class="left">
退款编号:
</view>
<view class="right">
{{ orderDetail.id || '' }}
</view>
</view>
<view class="reason">
<view class="left">
申请时间:
</view>
<view class="right">
{{ orderDetail.createTime || '' }}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import{
getAfterSealsDetail,
rebackAfterSeals
} from '@/api/aftersales.js';
import { getAfterSealsDetail, rebackAfterSeals } from '@/api/aftersales.js'
export default {
data() {
return {
orderId: '',
id: '',
orderInfo: {},
orderDetail: {}
}
},
mounted() {
this.orderId = this.$yroute.query.key
this.id = this.$yroute.query.id
this.getReturnDetail()
},
methods: {
/** state售后状态 0已提交等待平台审核 1平台已审核 等待用户发货/退款 2 用户已发货 3已完成 */
async getReturnDetail() {
const res = await getAfterSealsDetail(this.orderId, this.id)
if (res.status === 200) {
this.orderDetail = res.data
} else {
uni.showToast({
title: "订单异常",
icon: "none",
duration: 2000,
});
}
},
toExpress () {
this.$yrouter.push({
path: '/pages/order/submitExpress/index',
query: {
orderCode: this.orderId
}
})
},
// 撤销申请
async cancelReq() {
const res = await rebackAfterSeals(this.orderId, this.id)
if (res.status === 200) {
uni.showToast({
title: "已撤销",
icon: "none",
duration: 2000,
});
setTimeout(() => {
this.$yrouter.back();
}, 1500)
} else {
uni.showToast({
title: "撤销失败",
icon: "none",
duration: 2000,
});
}
},
// 修改申请
editReq() {}
}
data() {
return {
orderId: '',
id: '',
orderInfo: {},
orderDetail: {},
}
},
mounted() {
this.orderId = this.$yroute.query.key
this.id = this.$yroute.query.id
this.getReturnDetail()
},
methods: {
/** state售后状态 0已提交等待平台审核 1平台已审核 等待用户发货/退款 2 用户已发货 3已完成 */
async getReturnDetail() {
getAfterSealsDetail(this.orderId, this.id)
.then(res => {
this.orderDetail = res.data
})
.catch(err => {
uni.showToast({
title: '订单异常',
icon: 'none',
duration: 2000,
})
})
},
toExpress() {
this.$yrouter.push({
path: '/pages/order/submitExpress/index',
query: {
orderCode: this.orderId,
},
})
},
// 撤销申请
async cancelReq() {
rebackAfterSeals(this.orderId, this.id)
.then(res => {
uni.showToast({
title: '已撤销',
icon: 'none',
duration: 2000,
})
setTimeout(() => {
this.$yrouter.back()
}, 1500)
})
.catch(err => {
uni.showToast({
title: '撤销失败',
icon: 'none',
duration: 2000,
})
})
},
// 修改申请
editReq() {},
},
}
</script>
<style scoped lang='scss'>
$red: #EB3729;
.returnList{
.colorRed{
color: $red;
}
.bgRed{
background-color: $red;
}
.data{
width: 100%;
height: 150rpx;
line-height: 150rpx;
padding-left: 30rpx;
color: #FFF;
}
.money{
background-color: #FFF;
.top{
padding: 20rpx 30rpx;
font-size: 30rpx;
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #F3F4F5;
}
.express{
padding: 20rpx 30rpx;
font-size: 26rpx;
.title{
color: #333333;
}
.info{
color: #999999;
}
}
.tips{
height: 160rpx;
padding: 20rpx 30rpx;
color: #999999;
border-bottom: 2rpx solid #F3F4F5;
font-size: 26rpx;
.title{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content{
font-size: 20rpx;
}
}
.bottom{
padding: 20rpx 30rpx;
display: flex;
justify-content: flex-end;
.btns{
width: 160rpx;
height: 58rpx;
margin: 0 10rpx;
font-size: 24rpx;
text-align: center;
line-height: 58rpx;
border-radius: 180rpx;
}
.def{
color: #DDDDDD;
border: 2rpx solid #DDDDDD;
}
.redBtn{
color: #FFF;
background-color: $red;
}
}
}
.rebackInfo{
padding: 0 30rpx;
background-color: #FFF;
.top{
height: 80rpx;
margin: 20rpx 0;
line-height: 80rpx;
font-size: 30rpx;
font-weight: bold;
color: #333333;
border-bottom: 2rpx solid #F3F4F5;
}
.rebackItem{
padding: 20rpx 0;
font-size: 28rpx;
display: flex;
border-bottom: 2rpx solid #F3F4F5;
.img{
width: 120rpx;
height: 120rpx;
}
.info{
margin-left: 16rpx;
flex: 1;
.productName{
width: 100%;
height: 80rpx;
overflow: hidden;
text-overflow: ellipsis;
color: #333333;
}
.sku{
font-size: 24rpx;
color: #CCCCCC;
}
}
}
.bottom{
padding: 20rpx 0;
.reason{
font-size: 28rpx;
color: #333333;
display: flex;
justify-content: space-between;
.right{
color: #AAAAAA;
}
}
}
}
<style scoped lang="scss">
$red: #eb3729;
.returnList {
.colorRed {
color: $red;
}
.bgRed {
background-color: $red;
}
.data {
width: 100%;
height: 150rpx;
line-height: 150rpx;
padding-left: 30rpx;
color: #fff;
}
.money {
background-color: #fff;
.top {
padding: 20rpx 30rpx;
font-size: 30rpx;
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #f3f4f5;
}
.express {
padding: 20rpx 30rpx;
font-size: 26rpx;
.title {
color: #333333;
}
.info {
color: #999999;
}
}
.tips {
height: 160rpx;
padding: 20rpx 30rpx;
color: #999999;
border-bottom: 2rpx solid #f3f4f5;
font-size: 26rpx;
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
font-size: 20rpx;
}
}
.bottom {
padding: 20rpx 30rpx;
display: flex;
justify-content: flex-end;
.btns {
width: 160rpx;
height: 58rpx;
margin: 0 10rpx;
font-size: 24rpx;
text-align: center;
line-height: 58rpx;
border-radius: 180rpx;
}
.def {
color: #dddddd;
border: 2rpx solid #dddddd;
}
.redBtn {
color: #fff;
background-color: $red;
}
}
}
.rebackInfo {
padding: 0 30rpx;
background-color: #fff;
.top {
height: 80rpx;
margin: 20rpx 0;
line-height: 80rpx;
font-size: 30rpx;
font-weight: bold;
color: #333333;
border-bottom: 2rpx solid #f3f4f5;
}
.rebackItem {
padding: 20rpx 0;
font-size: 28rpx;
display: flex;
border-bottom: 2rpx solid #f3f4f5;
.img {
width: 120rpx;
height: 120rpx;
}
.info {
margin-left: 16rpx;
flex: 1;
.productName {
width: 100%;
height: 80rpx;
overflow: hidden;
text-overflow: ellipsis;
color: #333333;
}
.sku {
font-size: 24rpx;
color: #cccccc;
}
}
}
.bottom {
padding: 20rpx 0;
.reason {
font-size: 28rpx;
color: #333333;
display: flex;
justify-content: space-between;
.right {
color: #aaaaaa;
}
}
}
}
}
</style>

317
pages/order/submitExpress/index.vue
Unescape View File

@ -1,174 +1,167 @@
<!-- 提交物流 -->
<template>
<view class="submitExpress">
<!-- 填写物流 -->
<view class="form">
<picker class="picker"
:value="express"
:range="expressPicker"
@change="changeExpress"
>
<view class="item acea-row row-between-wrapper">
<view class="title">
<view class="point">
*
</view>
物流公司
</view>
<view class="num">{{ express }}</view>
<text class="iconfont icon-jiantou"></text>
</view>
</picker>
<view class="item">
<view class="title">
<view class="point">
*
</view>
物流单号:
</view>
<input class="input" v-model="expressQuery.postalCode" placeholder="请输入物流单号" />
</view>
</view>
<!-- 提交按钮 -->
<view class="btnContainer">
<view class="addBtn" @click="addExpress">
提交
</view>
</view>
</view>
<view class="submitExpress">
<!-- 填写物流 -->
<view class="form">
<picker class="picker" :value="express" :range="expressPicker" @change="changeExpress">
<view class="item acea-row row-between-wrapper">
<view class="title">
<view class="point">
*
</view>
物流公司
</view>
<view class="num">{{ express }}</view>
<text class="iconfont icon-jiantou"></text>
</view>
</picker>
<view class="item">
<view class="title">
<view class="point">
*
</view>
物流单号:
</view>
<input class="input" v-model="expressQuery.postalCode" placeholder="请输入物流单号" />
</view>
</view>
<!-- 提交按钮 -->
<view class="btnContainer">
<view class="addBtn" @click="addExpress">
提交
</view>
</view>
</view>
</template>
<script>
import {
getExpressData,
addExpressData
} from '@/api/aftersales.js'
import { getExpressData, addExpressData } from '@/api/aftersales.js'
export default {
data () {
return {
expressQuery: {
code: '', // 快递公司编码
name: '', // 快递公司名称
postalCode: 'SF1213132132', // 快递编号
orderCode: '' // 订单编号
},
expressList: [],
expressPicker: [],
express: ''
}
},
mounted () {
this.expressQuery.orderCode = this.$yroute.query.orderCode
this.getExpress()
},
methods: {
async getExpress () {
const res = await getExpressData()
console.log(res)
this.expressList = res.data.map(item => {
return {
id: item.id,
name: item.name,
code: item.code
}
})
this.expressPicker = res.data.map(item => {
return item.name
})
},
changeExpress(e) {
this.express = this.expressPicker[e.mp.detail.value];
this.expressQuery.code = this.expressList[e.mp.detail.value].code
this.expressQuery.name = this.expressList[e.mp.detail.value].name
},
async addExpress () {
let errMsg = '请选择'
if (!this.expressQuery.code || !this.expressQuery.code) {
errMsg += ' 快递公司 '
}
if (!this.expressQuery.postalCode) {
errMsg += ' 快递单号 '
}
if (errMsg.length > 3) {
uni.showToast({
title: errMsg,
icon: 'none',
duration: 2000,
})
}
console.log(this.expressQuery)
const res = await addExpressData(this.expressQuery)
if (res.status === 200) {
uni.showToast({
title: '物流填写成功！',
icon: 'none',
duration: 2000,
})
this.$yrouter.push({
path: '/pages/order/ReturnList/index'
})
} else {
uni.showToast({
title: '提交物流信息失败！',
icon: 'none',
duration: 2000,
})
}
}
}
data() {
return {
expressQuery: {
code: '', // 快递公司编码
name: '', // 快递公司名称
postalCode: 'SF1213132132', // 快递编号
orderCode: '', // 订单编号
},
expressList: [],
expressPicker: [],
express: '',
}
},
mounted() {
this.expressQuery.orderCode = this.$yroute.query.orderCode
this.getExpress()
},
methods: {
async getExpress() {
const res = await getExpressData()
console.log(res)
this.expressList = res.data.map(item => {
return {
id: item.id,
name: item.name,
code: item.code,
}
})
this.expressPicker = res.data.map(item => {
return item.name
})
},
changeExpress(e) {
this.express = this.expressPicker[e.mp.detail.value]
this.expressQuery.code = this.expressList[e.mp.detail.value].code
this.expressQuery.name = this.expressList[e.mp.detail.value].name
},
async addExpress() {
let errMsg = '请选择'
if (!this.expressQuery.code || !this.expressQuery.code) {
errMsg += ' 快递公司 '
}
if (!this.expressQuery.postalCode) {
errMsg += ' 快递单号 '
}
if (errMsg.length > 3) {
uni.showToast({
title: errMsg,
icon: 'none',
duration: 2000,
})
}
addExpressData(this.expressQuery)
.then(res => {
uni.showToast({
title: '物流填写成功！',
icon: 'none',
duration: 2000,
})
this.$yrouter.push({
path: '/pages/order/ReturnList/index',
})
})
.catch(err => {
uni.showToast({
title: '提交物流信息失败！',
icon: 'none',
duration: 2000,
})
})
},
},
}
</script>
<style lang="scss" scoped>
.submitExpress{
.form{
margin-bottom: 170rpx;
.picker{
margin: 0;
padding: 0;
font-size: 28rpx;
color: #999999;
}
.item{
width: 100%;
height: 80rpx;
padding: 0 32rpx;
line-height: 80rpx;
background-color: #FFF;
display: flex;
.title{
font-size: 28rpx;
color: #333333;
display: flex;
.point{
color: #EA3729;
}
}
.input{
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
color: #999999;
}
}
}
.btnContainer{
width: 100%;
height: 170rpx;
background-color: #FFF;
box-shadow: 0px 0px 0px rgba(197, 202, 207, 0.5);
position: fixed;
bottom: 0;
.addBtn{
height: 90rpx;
margin: 40rpx 30rpx;
line-height: 90rpx;
text-align: center;
border-radius: 50rpx;
font-size: 28rpx;
color: #FFF;
background: linear-gradient(90deg, #E93526 0%, #FF8E3C 100%);
}
}
.submitExpress {
.form {
margin-bottom: 170rpx;
.picker {
margin: 0;
padding: 0;
font-size: 28rpx;
color: #999999;
}
.item {
width: 100%;
height: 80rpx;
padding: 0 32rpx;
line-height: 80rpx;
background-color: #fff;
display: flex;
.title {
font-size: 28rpx;
color: #333333;
display: flex;
.point {
color: #ea3729;
}
}
.input {
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
color: #999999;
}
}
}
.btnContainer {
width: 100%;
height: 170rpx;
background-color: #fff;
box-shadow: 0px 0px 0px rgba(197, 202, 207, 0.5);
position: fixed;
bottom: 0;
.addBtn {
height: 90rpx;
margin: 40rpx 30rpx;
line-height: 90rpx;
text-align: center;
border-radius: 50rpx;
font-size: 28rpx;
color: #fff;
background: linear-gradient(90deg, #e93526 0%, #ff8e3c 100%);
}
}
}
</style>

563
pages/user/Login/index.vue
Unescape View File

@ -2,41 +2,39 @@
<view class="register absolute">
<view class="whiteBg" v-if="formItem === 1">
<view class="title acea-row">
<view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
@click="navTap(index)" :key="index">{{ item }}</view>
<view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList" @click="navTap(index)" :key="index">{{ item }}</view>
</view>
<!-- 手机号登录 -->
<!-- 手机号登录 -->
<view class="list" :hidden="current !== 0">
<form @submit.prevent="submit">
<view class="item getPhoneCode">
<view class="phoneInput acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码"
v-model="account" required/>
<input type="text" placeholder="输入手机号码" v-model="account" required />
</view>
<view class="phoneCode" @click="sendCode">
{{ clockText }}
</view>
<view class="phoneCode" @click="sendCode">
{{ clockText }}
</view>
</view>
<view class="item">
<view class="acea-row row-between-wrapper">
<input type="text" placeholder="请输入验证码" v-model="captcha" required />
<!-- <input type="password" placeholder="填写登录密码" v-model="password" required /> -->
<!-- <input type="password" placeholder="填写登录密码" v-model="password" required /> -->
</view>
</view>
</form>
</view>
<!-- 账号密码登录 -->
<!-- 账号密码登录 -->
<view class="list" :hidden="current !== 1">
<view class="item">
<view class="acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码" v-model="account" />
</view>
</view>
<view class="item">
<view class="acea-row row-between-wrapper">
<input type="password" placeholder="输入密码" v-model="password" />
</view>
</view>
<view class="item">
<view class="acea-row row-between-wrapper">
<input type="password" placeholder="输入密码" v-model="password" />
</view>
</view>
<!-- <view class="item">
<view class="align-left">
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
@ -52,7 +50,7 @@
<text @click="formItem = 2" class="font-color-red">立即注册</text>
</view>
</view>
<!-- 注册 -->
<!-- 注册 -->
<view class="whiteBg" v-else>
<view class="title acea-row row-between-wrapper">
<view class="item on">注册账号</view>
@ -72,8 +70,7 @@
<use xlink:href="#icon-code_1" />
</svg>-->
<input name="verifyCode" type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
@click="code">{{ text }}</button>
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">{{ text }}</button>
</view>
</view>
<view class="item">
@ -94,7 +91,6 @@
</view>
</view>
<!-- #endif -->
</view>
<view class="logon" @click="register">注册</view>
<view class="tip">
@ -105,307 +101,250 @@
</view>
</template>
<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import {
login,
loginMobile,
registerVerify,
register
} from "@/api/user";
import attrs, {
required,
alpha_num,
chs_phone
} from "@/utils/validate";
import {
validatorDefaultCatch
} from "@/utils/dialog";
import dayjs from "dayjs";
import cookie from "@/utils/store/cookie";
import sendVerifyCode from '@/mixins/SendVerifyCode'
import { login, loginMobile, registerVerify, register } from '@/api/user'
import attrs, { required, alpha_num, chs_phone } from '@/utils/validate'
import { validatorDefaultCatch } from '@/utils/dialog'
import dayjs from 'dayjs'
import cookie from '@/utils/store/cookie'
import {
handleGetUserInfo
} from "@/utils";
import { handleGetUserInfo } from '@/utils'
const BACK_URL = "login_back_url";
const BACK_URL = 'login_back_url'
export default {
name: "Login",
mixins: [sendVerifyCode],
data: function () {
return {
navList: ["手机号登录", "密码登录"],
// navList: ["手机号登录",],
current: 0,
account: "",
password: "",
captcha: "",
inviteCode: "",
formItem: 1,
type: "login",
timer: null,
clock: 60,
clockText: '验证码'
};
},
methods: {
async loginMobile() {
var that = this;
const {
account,
captcha
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
]
})
.validate({
account,
captcha
});
} catch (e) {
return validatorDefaultCatch(e);
}
const res = await loginMobile({
account: that.account,
captcha: that.captcha,
spread: cookie.get("spread")
})
if (res.status === 200) {
this.$store.commit("login", res.data.token, dayjs(res.data.expires_time));
handleGetUserInfo();
} else {
uni.showToast({
title: res.msg || res.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
}
// .then(res => {
// that.$store.commit("login", res.data.token, dayjs(res.data.expires_time));
// handleGetUserInfo();
// })
// .catch(err => {
// console.log(err)
// uni.showToast({
// title: err.msg || err.response.data.msg || err.response.data.message,
// icon: "none",
// duration: 2000
// });
// });
},
async register() {
var that = this;
const {
account,
captcha,
password
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
})
.validate({
account,
captcha,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
register({
account: that.account,
captcha: that.captcha,
password: that.password,
inviteCode: that.inviteCode,
spread: cookie.get("spread")
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.formItem = 1;
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
// 获取验证码
async code() {
const {
account
} = this;
try {
await this
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
]
})
.validate({
account
});
} catch (e) {
return validatorDefaultCatch(e);
}
if (this.formItem == 2) this.type = "register";
this.showCode()
},
// 手机号登录获取验证码
async sendCode () {
const {
account
} = this;
try {
await this
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
]
})
.validate({
account
});
} catch (e) {
return validatorDefaultCatch(e);
}
// 倒计时
if (this.clock !== 60) {
return
}
this.clock--
this.clockText = `${this.clock} 秒`
this.timer = setInterval(() => {
if (parseInt(this.clock) === 1) {
clearTimeout(this.timer)
this.clock = 60
this.clockText = '获取验证码'
return
}
this.clock--
if (this.clock < 10) this.clock = `0${this.clock}`
this.clockText = `${this.clock} 秒`
}, 1000)
this.showCode()
},
// 验证码请求
showCode() {
return registerVerify({
phone: this.account,
type: this.type
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
this.sendCode();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
navTap(index) { this.current = index; },
async submit() {
const {
account,
password
} = this;
try {
await this.$validator({
account: [
required(required.message("账号")),
attrs.range([5, 16], attrs.range.message("账号")),
alpha_num(alpha_num.message("账号"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
}).validate({
account,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
// 账号密码登录
const res = await login({
username: account,
password,
spread: cookie.get("spread")
})
if (res.status === 200) {
this.$store.commit("login", res.data.token, dayjs(res.data.expires_time));
handleGetUserInfo();
} else {
uni.showToast({
title: res.msg || res.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
}
}
export default {
name: 'Login',
mixins: [sendVerifyCode],
data: function() {
return {
navList: ['手机号登录', '密码登录'],
// navList: ["手机号登录",],
current: 0,
account: '',
password: '',
captcha: '',
inviteCode: '',
formItem: 1,
type: 'login',
timer: null,
clock: 60,
clockText: '验证码',
}
};
},
methods: {
async loginMobile() {
var that = this
const { account, captcha } = that
try {
await that
.$validator({
account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
captcha: [required(required.message('验证码')), alpha_num(alpha_num.message('验证码'))],
})
.validate({
account,
captcha,
})
} catch (e) {
return validatorDefaultCatch(e)
}
loginMobile({
account: that.account,
captcha: that.captcha,
spread: cookie.get('spread'),
})
.then(res => {
this.$store.commit('login', res.data.token, dayjs(res.data.expires_time))
handleGetUserInfo()
})
.catch(err => {
uni.showToast({
title: res.msg || res.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
})
// .then(res => {
// that.$store.commit("login", res.data.token, dayjs(res.data.expires_time));
// handleGetUserInfo();
// })
// .catch(err => {
// console.log(err)
// uni.showToast({
// title: err.msg || err.response.data.msg || err.response.data.message,
// icon: "none",
// duration: 2000
// });
// });
},
async register() {
var that = this
const { account, captcha, password } = that
try {
await that
.$validator({
account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
captcha: [required(required.message('验证码')), alpha_num(alpha_num.message('验证码'))],
password: [required(required.message('密码')), attrs.range([6, 16], attrs.range.message('密码')), alpha_num(alpha_num.message('密码'))],
})
.validate({
account,
captcha,
password,
})
} catch (e) {
return validatorDefaultCatch(e)
}
register({
account: that.account,
captcha: that.captcha,
password: that.password,
inviteCode: that.inviteCode,
spread: cookie.get('spread'),
})
.then(res => {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 2000,
})
that.formItem = 1
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
})
},
// 获取验证码
async code() {
const { account } = this
try {
await this.$validator({
account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
}).validate({
account,
})
} catch (e) {
return validatorDefaultCatch(e)
}
if (this.formItem == 2) this.type = 'register'
this.showCode()
},
// 手机号登录获取验证码
async sendCode() {
const { account } = this
try {
await this.$validator({
account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
}).validate({
account,
})
} catch (e) {
return validatorDefaultCatch(e)
}
// 倒计时
if (this.clock !== 60) {
return
}
this.clock--
this.clockText = `${this.clock} 秒`
this.timer = setInterval(() => {
if (parseInt(this.clock) === 1) {
clearTimeout(this.timer)
this.clock = 60
this.clockText = '获取验证码'
return
}
this.clock--
if (this.clock < 10) this.clock = `0${this.clock}`
this.clockText = `${this.clock} 秒`
}, 1000)
this.showCode()
},
// 验证码请求
showCode() {
return registerVerify({
phone: this.account,
type: this.type,
})
.then(res => {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 2000,
})
this.sendCode()
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
})
},
navTap(index) {
this.current = index
},
async submit() {
const { account, password } = this
try {
await this.$validator({
account: [required(required.message('账号')), attrs.range([5, 16], attrs.range.message('账号')), alpha_num(alpha_num.message('账号'))],
password: [required(required.message('密码')), attrs.range([6, 16], attrs.range.message('密码')), alpha_num(alpha_num.message('密码'))],
}).validate({
account,
password,
})
} catch (e) {
return validatorDefaultCatch(e)
}
login({
username: account,
password,
spread: cookie.get('spread'),
})
.then(res => {
this.$store.commit('login', res.data.token, dayjs(res.data.expires_time))
handleGetUserInfo()
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
})
},
},
}
</script>
<style lang="scss">
.register .whiteBg .title .item{
border-bottom: 2px solid;
.register .whiteBg .title .item {
border-bottom: 2px solid;
}
.register .whiteBg .title .item.on{
border-bottom-color: #f35749;
.register .whiteBg .title .item.on {
border-bottom-color: #f35749;
}
.getPhoneCode{
display: flex;
justify-content: space-between;
.phoneInput{
width: 70%;
}
.phoneCode{
width: 30%;
text-align: center;
color: #FFFFFF;
background-color: #f35749;
padding: 12rpx;
font-size: 28rpx;
border-radius: 30rpx;
}
.getPhoneCode {
display: flex;
justify-content: space-between;
.phoneInput {
width: 70%;
}
.phoneCode {
width: 30%;
text-align: center;
color: #ffffff;
background-color: #f35749;
padding: 12rpx;
font-size: 28rpx;
border-radius: 30rpx;
}
}
</style>

Write Preview
Loading…
Cancel
Save