|
|
@@ -0,0 +1,580 @@
|
|
|
+<template>
|
|
|
+ <view class="content" :style="colorStyle">
|
|
|
+ <view class="tit">
|
|
|
+ 轻触头像以切换帐号
|
|
|
+ </view>
|
|
|
+ <!-- 当前账号 -->
|
|
|
+ <view class="account-wrap">
|
|
|
+ <image :src="'../../../static/images/f.png'" mode="" class="u-logo"></image>
|
|
|
+ <view class="u-info">
|
|
|
+ <view class="info-name">
|
|
|
+ {{userInfo.phone}}
|
|
|
+ </view>
|
|
|
+ <!-- <view class="info-id">
|
|
|
+ UID:{{userInfo.uid}}
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="set">
|
|
|
+ <view class="new-use">
|
|
|
+ <text></text>当前使用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 账号列表 -->
|
|
|
+ <template v-for="(item,index) in menList">
|
|
|
+ <view class="account-wrap" v-if="item.account != userInfo.phone">
|
|
|
+ <image v-if="item.avatar" :src="item.avatar" mode="" class="u-logo" @click="login(item)"></image>
|
|
|
+ <image v-else src="../../../static/images/f.png" mode="" class="u-logo" @click="login(item)"></image>
|
|
|
+ <view class="u-info">
|
|
|
+ <view class="info-name">
|
|
|
+ {{item.account}}
|
|
|
+ </view>
|
|
|
+ <view class="info-id" v-if="item.uid">
|
|
|
+ UID:{{item.uid}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="set">
|
|
|
+ <image src="../../../static/images/sc.png" mode="" @click="scAccount(item,index)"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 添加账号 -->
|
|
|
+ <view class="account-wrap" @click="openAdd" v-if="menList.length < maxAccountNum">
|
|
|
+ <image src="../../../static/images/add.png" mode="" class="add"></image>
|
|
|
+ <view class="u-info">
|
|
|
+ 添加帐号
|
|
|
+ </view>
|
|
|
+ <view class="set">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 添加账号弹窗 -->
|
|
|
+ <uni-popup type="center" ref="add">
|
|
|
+ <view class="whiteBg" >
|
|
|
+ <view class="tips">
|
|
|
+ <view class="tips-btn on">
|
|
|
+ <view>添加账号</view>
|
|
|
+ <!-- <view class="line"></view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <!-- <form @submit.prevent="submit"> -->
|
|
|
+ <view class="item">
|
|
|
+ <view class="acea-row row-middle">
|
|
|
+ <image src="../static/phone_1.png" class="itemImg-add"></image>
|
|
|
+ <input type="text" placeholder="输入手机号码" v-model="account" maxlength="11" required />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="acea-row row-middle">
|
|
|
+ <image src="../static/code_1.png" class="item-img"></image>
|
|
|
+ <input type="password" placeholder="填写登录密码" v-model="password" required />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- </form> -->
|
|
|
+ </view>
|
|
|
+ <view class="logon" @click="addAccount">添加账号</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <view class="tipaddress" v-show="isCancellation">
|
|
|
+ <view class="top"></view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="font1">是否确认删除</view>
|
|
|
+ <view class="font2">当前记录将被删除，您确认要删除吗？</view>
|
|
|
+ <view class="btn">
|
|
|
+ <view class="cancellation-btn btn-sty flex-aj-center" @tap="cancelUser">删除</view>
|
|
|
+ <view class="cancel btn-sty flex-aj-center" @tap="isCancellation = false">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import colors from '@/mixins/color.js';
|
|
|
+ import {
|
|
|
+ loginH5,
|
|
|
+ loginMobile,
|
|
|
+ registerVerify,
|
|
|
+ register,
|
|
|
+ getCodeApi,
|
|
|
+ getUserInfo,
|
|
|
+ appleLogin
|
|
|
+ } from "@/api/user";
|
|
|
+ const BACK_URL = "login_back_url";
|
|
|
+ export default {
|
|
|
+ mixins: [colors],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isCancellation: false,
|
|
|
+ menList: [],
|
|
|
+ userInfo: {},
|
|
|
+ account: '',
|
|
|
+ password: '',
|
|
|
+ maxAccountNum: 6,
|
|
|
+ scitem: {},
|
|
|
+ scindex: '',
|
|
|
+ keyLock: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getUserInfo()
|
|
|
+ this.getMenList()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 删除账号
|
|
|
+ cancelUser() {
|
|
|
+ let that = this;
|
|
|
+ that.menList.splice(that.scindex,1);
|
|
|
+ that.isCancellation = false;
|
|
|
+ try{
|
|
|
+ that.$io.storage("MenList.json", that.menList);
|
|
|
+ }catch(e){
|
|
|
+ console.log(e)
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 打开删除弹窗
|
|
|
+ scAccount(item,index) {
|
|
|
+ this.scitem = item;
|
|
|
+ this.scindex = index;
|
|
|
+ this.isCancellation = true;
|
|
|
+ },
|
|
|
+ // 添加账号
|
|
|
+ addAccount() {
|
|
|
+ let that = this;
|
|
|
+ if (!that.account) {
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '请输入手机号码'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!/^1(2|3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|
|
+ title: '请输入正确的手机号码'
|
|
|
+ });
|
|
|
+ if (!that.password) {
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '请填写登录密码'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // for(let i = 0;i=)
|
|
|
+ let i = false;
|
|
|
+ this.menList.forEach(item => {
|
|
|
+ if(item.account == that.account) {
|
|
|
+ i = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(!i) {
|
|
|
+ try{
|
|
|
+ that.menList.push({
|
|
|
+ account: that.account,
|
|
|
+ password: that.password
|
|
|
+ })
|
|
|
+ that.$io.storage("MenList.json", that.menList).then(e => {
|
|
|
+ console.log('结果返回：',e)
|
|
|
+ that.account = ''
|
|
|
+ that.password = ''
|
|
|
+ });
|
|
|
+ }catch(e){
|
|
|
+
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '当前账号已存在'
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ that.$refs.add.close()
|
|
|
+ },
|
|
|
+ // 打开添加弹窗
|
|
|
+ openAdd() {
|
|
|
+ this.$refs.add.open();
|
|
|
+ },
|
|
|
+ getUserInfo() {
|
|
|
+ let that = this;
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ that.userInfo = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getMenList() {
|
|
|
+ let that = this;
|
|
|
+ try {
|
|
|
+ that.$io.read("MenList.json").then(res => {
|
|
|
+ // res 读取的文件内容
|
|
|
+ that.menList = JSON.parse(res);
|
|
|
+ }).catch(err => {
|
|
|
+ // 找不到该文件就写入一个空白文件。
|
|
|
+ // that.$io.storage("MenList.json", []);
|
|
|
+ console.log(err, "err");
|
|
|
+ })
|
|
|
+ } catch (e) {
|
|
|
+
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ login(item) {
|
|
|
+ try{
|
|
|
+ let that = this;
|
|
|
+ if (that.keyLock) {
|
|
|
+ that.keyLock = !that.keyLock
|
|
|
+ } else {
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '请勿重复点击'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ loginH5({
|
|
|
+ account: item.account,
|
|
|
+ password: item.password,
|
|
|
+ })
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ console.log('登录成功：',data)
|
|
|
+ that.$store.commit("LOGIN", {
|
|
|
+ 'token': data.token,
|
|
|
+ 'time': data.expires_time - that.$Cache.time()
|
|
|
+ });
|
|
|
+ let backUrl = "/pages/user/index";
|
|
|
+ that.$Cache.clear(BACK_URL);
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ console.log('获取用户信息成功：',res)
|
|
|
+ that.keyLock = true
|
|
|
+ that.$store.commit("SETUID", res.data.uid);
|
|
|
+ that.$store.commit("UPDATE_USERINFO", res.data);
|
|
|
+ console.log('开始跳转：')
|
|
|
+ uni.reLaunch({
|
|
|
+ url: backUrl
|
|
|
+ });
|
|
|
+ console.log('跳转结束：')
|
|
|
+ }).catch(error => {
|
|
|
+ this.keyLock = true
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.keyLock = true
|
|
|
+ that.$util.Tips({
|
|
|
+ title: e
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }catch(e){
|
|
|
+ //TODO handle the exception
|
|
|
+ console.log('错误：',e)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .main-color {
|
|
|
+ color: var(--view-theme);
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ font-size: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 100rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .account-wrap {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ margin: auto;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .u-logo {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-info {
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-left: 25rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ .info-id {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-name {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .set {
|
|
|
+ width: 140rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .new-use {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #08c05f;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .whiteBg {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: -30rpx 56rpx 0rpx 56rpx;
|
|
|
+ box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 60rpx;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50rpx;
|
|
|
+ margin: 40rpx;
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ .tips-btn {
|
|
|
+ margin: 0 31rpx 0 48rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+
|
|
|
+ /* Safari 与 Chrome */
|
|
|
+ .line {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 10rpx auto 0 auto;
|
|
|
+ animation: myfirst .3s;
|
|
|
+ -webkit-animation: myfirst .3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .none {
|
|
|
+ width: 80rpx;
|
|
|
+ background: #fff;
|
|
|
+ height: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes myfirst {
|
|
|
+ 0% {
|
|
|
+ width: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ width: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes myfirst
|
|
|
+
|
|
|
+ /* Safari 与 Chrome */
|
|
|
+ {
|
|
|
+ 0% {
|
|
|
+ width: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ width: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-btn.on {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: var(--view-theme);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .forgetPwd {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ border-bottom: 1px solid #F0F0F0;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .row-middle {
|
|
|
+ position: relative;
|
|
|
+ padding: 16rpx 25rpx;
|
|
|
+
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ .spread {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ .code {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 50%;
|
|
|
+ color: var(--view-theme);
|
|
|
+ font-size: 26rpx;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 86rpx;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
|
|
|
+ border-radius: 120rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .acea-row.row-middle {
|
|
|
+ input {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .itemImg-add {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+ .item-img {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .tipaddress {
|
|
|
+ position: fixed;
|
|
|
+ left: 13%;
|
|
|
+ top: 25%;
|
|
|
+ // margin-left: -283rpx;
|
|
|
+ width: 560rpx;
|
|
|
+ height: 614rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ z-index: 100;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 560rpx;
|
|
|
+ height: 270rpx;
|
|
|
+ border-top-left-radius: 10rpx;
|
|
|
+ border-top-right-radius: 10rpx;
|
|
|
+ background-image: url('../../../static/images/address.png');
|
|
|
+ background-repeat: round;
|
|
|
+ background-color: #E93323;
|
|
|
+
|
|
|
+ .tipsphoto {
|
|
|
+ display: inline-block;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ margin-top: 73rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ .font1 {
|
|
|
+
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ margin: 32rpx 0rpx 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font2 {
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ margin: 0 20rpx;
|
|
|
+
|
|
|
+ .btn-sty {
|
|
|
+ height: 82rpx;
|
|
|
+ border-radius: 42rpx;
|
|
|
+ line-height: 82rpx;
|
|
|
+ padding: 24rpx 78rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancellation-btn {
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
