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

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

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

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

@ -2,41 +2,39 @@
<view class="register absolute"> <view class="register absolute">
<view class="whiteBg" v-if="formItem === 1"> <view class="whiteBg" v-if="formItem === 1">
<view class="title acea-row"> <view class="title acea-row">
<view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList" <view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList" @click="navTap(index)" :key="index">{{ item }}</view>
@click="navTap(index)" :key="index">{{ item }}</view>
</view> </view>
<!-- 手机号登录 --> <!-- 手机号登录 -->
<view class="list" :hidden="current !== 0"> <view class="list" :hidden="current !== 0">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<view class="item getPhoneCode"> <view class="item getPhoneCode">
<view class="phoneInput acea-row row-between-wrapper"> <view class="phoneInput acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码" <input type="text" placeholder="输入手机号码" v-model="account" required />
v-model="account" required/> </view>
<view class="phoneCode" @click="sendCode">
{{ clockText }}
</view> </view>
<view class="phoneCode" @click="sendCode">
{{ clockText }}
</view>
</view> </view>
<view class="item"> <view class="item">
<view class="acea-row row-between-wrapper"> <view class="acea-row row-between-wrapper">
<input type="text" placeholder="请输入验证码" v-model="captcha" required /> <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>
</view> </view>
</form> </form>
</view> </view>
<!-- 账号密码登录 --> <!-- 账号密码登录 -->
<view class="list" :hidden="current !== 1"> <view class="list" :hidden="current !== 1">
<view class="item"> <view class="item">
<view class="acea-row row-between-wrapper"> <view class="acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码" v-model="account" /> <input type="text" placeholder="输入手机号码" v-model="account" />
</view> </view>
</view> </view>
<view class="item"> <view class="item">
<view class="acea-row row-between-wrapper"> <view class="acea-row row-between-wrapper">
<input type="password" placeholder="输入密码" v-model="password" /> <input type="password" placeholder="输入密码" v-model="password" />
</view> </view>
</view> </view>
<!-- <view class="item"> <!-- <view class="item">
<view class="align-left"> <view class="align-left">
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" /> <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
@ -52,7 +50,7 @@
<text @click="formItem = 2" class="font-color-red">立即注册</text> <text @click="formItem = 2" class="font-color-red">立即注册</text>
</view> </view>
</view> </view>
<!-- 注册 --> <!-- 注册 -->
<view class="whiteBg" v-else> <view class="whiteBg" v-else>
<view class="title acea-row row-between-wrapper"> <view class="title acea-row row-between-wrapper">
<view class="item on">注册账号</view> <view class="item on">注册账号</view>
@ -72,8 +70,7 @@
<use xlink:href="#icon-code_1" /> <use xlink:href="#icon-code_1" />
</svg>--> </svg>-->
<input name="verifyCode" type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" /> <input name="verifyCode" type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">{{ text }}</button>
@click="code">{{ text }}</button>
</view> </view>
</view> </view>
<view class="item"> <view class="item">
@ -94,7 +91,6 @@
</view> </view>
</view> </view>
<!-- #endif --> <!-- #endif -->
</view> </view>
<view class="logon" @click="register">注册</view> <view class="logon" @click="register">注册</view>
<view class="tip"> <view class="tip">
@ -105,307 +101,250 @@
</view> </view>
</template> </template>
<script> <script>
import sendVerifyCode from "@/mixins/SendVerifyCode"; import sendVerifyCode from '@/mixins/SendVerifyCode'
import { import { login, loginMobile, registerVerify, register } from '@/api/user'
login, import attrs, { required, alpha_num, chs_phone } from '@/utils/validate'
loginMobile, import { validatorDefaultCatch } from '@/utils/dialog'
registerVerify, import dayjs from 'dayjs'
register import cookie from '@/utils/store/cookie'
} 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 { import { handleGetUserInfo } from '@/utils'
handleGetUserInfo
} from "@/utils";
const BACK_URL = "login_back_url"; const BACK_URL = 'login_back_url'
export default { export default {
name: "Login", name: 'Login',
mixins: [sendVerifyCode], mixins: [sendVerifyCode],
data: function () { data: function() {
return { return {
navList: ["手机号登录", "密码登录"], navList: ['手机号登录', '密码登录'],
// navList: ["手机号登录",], // navList: ["手机号登录",],
current: 0, current: 0,
account: "", account: '',
password: "", password: '',
captcha: "", captcha: '',
inviteCode: "", inviteCode: '',
formItem: 1, formItem: 1,
type: "login", type: 'login',
timer: null, timer: null,
clock: 60, clock: 60,
clockText: '验证码' 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
});
}
}
} }
}; },
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> </script>
<style lang="scss"> <style lang="scss">
.register .whiteBg .title .item{ .register .whiteBg .title .item {
border-bottom: 2px solid; border-bottom: 2px solid;
} }
.register .whiteBg .title .item.on{ .register .whiteBg .title .item.on {
border-bottom-color: #f35749; border-bottom-color: #f35749;
} }
.getPhoneCode{ .getPhoneCode {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.phoneInput{ .phoneInput {
width: 70%; width: 70%;
} }
.phoneCode{ .phoneCode {
width: 30%; width: 30%;
text-align: center; text-align: center;
color: #FFFFFF; color: #ffffff;
background-color: #f35749; background-color: #f35749;
padding: 12rpx; padding: 12rpx;
font-size: 28rpx; font-size: 28rpx;
border-radius: 30rpx; border-radius: 30rpx;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save