mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-16 03:55:06 +08:00
多模块重构 12：修改项目名字，按照新的规则
This commit is contained in:
YunaiV
326
yudao-ui-app-v1/pages/auth/login.vue
Normal file
326
yudao-ui-app-v1/pages/auth/login.vue
Normal file
@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<!-- 左上角的 x 关闭 -->
|
||||
<view class="back-btn mix-icon icon-guanbi" @click="navBack"></view>
|
||||
|
||||
<!-- 用户协议 -->
|
||||
<view class="agreement center">
|
||||
<text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text>
|
||||
<text @click="checkAgreement">请认真阅读并同意</text>
|
||||
<text class="title" @click="navToAgreementDetail(1)">《用户服务协议》</text>
|
||||
<text class="title" @click="navToAgreementDetail(2)">《隐私权政策》</text>
|
||||
</view>
|
||||
<!-- 登录表单 -->
|
||||
<view class="wrapper">
|
||||
<view class="left-top-sign">LOGIN</view>
|
||||
<view class="welcome">手机登录/注册</view>
|
||||
<!-- 手机验证码登录 -->
|
||||
<view class="input-content">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="form" errorType="toast">
|
||||
<u-form-item prop="mobile" borderBottom>
|
||||
<u--input type="number" v-model="form.mobile" placeholder="请输入手机号" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<!-- 判断使用验证码还是密码 -->
|
||||
<u-form-item prop="code" borderBottom v-if="loginType == 'code'">
|
||||
<u--input type="number" v-model="form.code" placeholder="请输入验证码" border="none"></u--input>
|
||||
<u-button slot="right" @tap="getCode" :text="uCode.tips" type="success" size="mini" :disabled="uCode.disabled"></u-button>
|
||||
<u-code ref="uCode" @change="codeChange" seconds="60" @start="uCode.disabled === true" @end="uCode.disabled === false"></u-code>
|
||||
</u-form-item>
|
||||
<u-form-item prop="password" borderBottom v-else>
|
||||
<u--input password v-model="form.password" placeholder="请输入密码" border="none"></u--input>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
|
||||
<u-button class="login-button" text="立即登录" type="error" shape="circle" @click="mobileLogin"
|
||||
:loading="loading"></u-button>
|
||||
<!-- 切换登陆 -->
|
||||
<view class="login-type" v-if="loginType == 'code'" @click="setLoginType('password')">账号密码登录</view>
|
||||
<view class="login-type" v-else @click="setLoginType('code')">免密登录</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷登录 -->
|
||||
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
||||
<view class="other-wrapper">
|
||||
<view class="line center">
|
||||
<text class="title">快捷登录</text>
|
||||
</view>
|
||||
<view class="list row">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item column center" @click="mpWxGetUserInfo">
|
||||
<image class="icon" src="/static/icon/login-wx.png"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="item column center" style="width: 180rpx;" @click="loginByWxApp">
|
||||
<image class="icon" src="/static/icon/login-wx.png"></image>
|
||||
<text>微信登录</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { checkStr } from '@/common/js/util'
|
||||
import { login, smsLogin, sendSmsCode } from '@/api/system/auth.js'
|
||||
import loginMpWx from './mixin/login-mp-wx.js'
|
||||
import loginAppWx from './mixin/login-app-wx.js'
|
||||
|
||||
export default{
|
||||
mixins: [loginMpWx, loginAppWx],
|
||||
data() {
|
||||
return {
|
||||
agreement: true,
|
||||
loginType: 'code', // 登录方式，code 验证码；password 密码
|
||||
loading: false, // 表单提交
|
||||
rules: {
|
||||
mobile: [{
|
||||
required: true,
|
||||
message: '请输入手机号'
|
||||
}, {
|
||||
validator: (rule, value, callback) => {
|
||||
return uni.$u.test.mobile(value);
|
||||
},
|
||||
message: '手机号码不正确'
|
||||
}],
|
||||
code: [],
|
||||
password: []
|
||||
},
|
||||
form: {
|
||||
mobile: '',
|
||||
code: '',
|
||||
password: '',
|
||||
},
|
||||
uCode: {
|
||||
tips: '',
|
||||
disable: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.setLoginType(this.loginType);
|
||||
},
|
||||
methods: {
|
||||
// 手机号登录
|
||||
mobileLogin() {
|
||||
if (!this.agreement) {
|
||||
this.$util.msg('请阅读并同意用户服务及隐私协议');
|
||||
return;
|
||||
}
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
// 执行登陆
|
||||
const { mobile, code, password} = this.form;
|
||||
const loginPromise = this.loginType == 'password' ? login(mobile, password) :
|
||||
smsLogin(mobile, code);
|
||||
loginPromise.then(data => {
|
||||
// 登陆成功
|
||||
this.loginSuccessCallBack(data);
|
||||
}).catch(errors => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
}).catch(errors => {
|
||||
});
|
||||
},
|
||||
// 登陆成功的处理逻辑
|
||||
loginSuccessCallBack(data) {
|
||||
this.$util.msg('登录成功');
|
||||
this.$store.commit('setToken', data);
|
||||
// TODO 芋艿：如果当前页是第一页，则无法返回。期望是能够回到首页
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack();
|
||||
}, 1000)
|
||||
},
|
||||
navBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
setLoginType(loginType) {
|
||||
this.loginType = loginType;
|
||||
// 修改校验规则
|
||||
this.rules.code = [];
|
||||
this.rules.password = [];
|
||||
if (loginType == 'code') {
|
||||
this.rules.code = [{
|
||||
required: true,
|
||||
message: '请输入验证码'
|
||||
}, {
|
||||
min: 4,
|
||||
max: 6,
|
||||
message: '验证码不正确'
|
||||
}];
|
||||
} else {
|
||||
this.rules.password = [{
|
||||
required: true,
|
||||
message: '请输入密码'
|
||||
}, {
|
||||
min: 4,
|
||||
max: 16,
|
||||
message: '密码不正确'
|
||||
}]
|
||||
}
|
||||
},
|
||||
//同意协议
|
||||
checkAgreement(){
|
||||
this.agreement = !this.agreement;
|
||||
},
|
||||
//打开协议
|
||||
navToAgreementDetail(type){
|
||||
this.navTo('/pages/public/article?param=' + JSON.stringify({
|
||||
module: 'article',
|
||||
operation: 'getAgreement',
|
||||
data: {
|
||||
type
|
||||
}
|
||||
}))
|
||||
},
|
||||
codeChange(text) {
|
||||
this.uCode.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
// 处于发送中，则跳过
|
||||
if (!this.$refs.uCode.canGetCode) {
|
||||
return;
|
||||
}
|
||||
// 校验手机号
|
||||
this.$refs.form.validateField('mobile', errors => {
|
||||
if (errors.length > 0) {
|
||||
uni.$u.toast(errors[0].message);
|
||||
return;
|
||||
}
|
||||
// 发送验证码 TODO 芋艿，枚举类
|
||||
sendSmsCode(this.form.mobile, 1).then(data => {
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}).catch(erros => {
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang='scss'>
|
||||
.app {
|
||||
padding-top: 15vh;
|
||||
position:relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
position:relative;
|
||||
z-index: 90;
|
||||
padding-bottom: 40rpx;
|
||||
.welcome {
|
||||
position:relative;
|
||||
left: 50rpx;
|
||||
top: -90rpx;
|
||||
font-size: 46rpx;
|
||||
color: #555;
|
||||
text-shadow: 1px 0px 1px rgba(0,0,0,.3);
|
||||
}
|
||||
}
|
||||
.back-btn {
|
||||
position:absolute;
|
||||
left: 20rpx;
|
||||
top: calc(var(--status-bar-height) + 20rpx);
|
||||
z-index: 90;
|
||||
padding: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #606266;
|
||||
}
|
||||
.left-top-sign {
|
||||
font-size: 120rpx;
|
||||
color: #f8f8f8;
|
||||
position: relative;
|
||||
left: -12rpx;
|
||||
}
|
||||
|
||||
/** 手机登录部分 */
|
||||
.input-content {
|
||||
padding: 0 60rpx;
|
||||
.login-button {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.login-type {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 13px;
|
||||
color: #40a2ff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 其他登录方式 */
|
||||
.other-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
margin-top: 80rpx;
|
||||
.line{
|
||||
margin-bottom: 40rpx;
|
||||
.title {
|
||||
margin: 0 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
}
|
||||
&:before, &:after{
|
||||
content: '';
|
||||
width: 160rpx;
|
||||
height: 0;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
}
|
||||
.item{
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
&:after{
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin: 0 24rpx 16rpx;
|
||||
}
|
||||
}
|
||||
.agreement{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 6vh;
|
||||
z-index: 1;
|
||||
width: 750rpx;
|
||||
height: 90rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
.mix-icon{
|
||||
font-size: 36rpx;
|
||||
color: #ccc;
|
||||
margin-right: 8rpx;
|
||||
margin-top: 1px;
|
||||
&.active{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: #40a2ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
yudao-ui-app-v1/pages/auth/mixin/login-app-wx.js
Normal file
73
yudao-ui-app-v1/pages/auth/mixin/login-app-wx.js
Normal file
@ -0,0 +1,73 @@
|
||||
export default{
|
||||
// #ifdef APP-PLUS
|
||||
methods: {
|
||||
/**
|
||||
* 微信App登录
|
||||
* "openId": "o0yywwGWxtBCvBuE8vH4Naof0cqU",
|
||||
* "nickName": "S .",
|
||||
* "gender": 1,
|
||||
* "city": "临沂",
|
||||
* "province": "山东",
|
||||
* "country": "中国",
|
||||
* "avatarUrl": "http://thirdwx.qlogo.cn/mmopen/vi_32/xqpCtHRBBmdlf201Fykhtx7P7JcicIbgV3Weic1oOvN6iaR3tEbuu74f2fkKQWXvzK3VDgNTZzgf0g8FqPvq8LCNQ/132",
|
||||
* "unionId": "oYqy4wmMcs78x9P-tsyMeM3MQ1PU"
|
||||
*/
|
||||
loginByWxApp(userInfoData){
|
||||
if(!this.agreement){
|
||||
this.$util.msg('请阅读并同意用户服务及隐私协议');
|
||||
return;
|
||||
}
|
||||
this.$util.throttle(async ()=>{
|
||||
let [err, res] = await uni.login({
|
||||
provider: 'weixin'
|
||||
})
|
||||
if(err){
|
||||
console.log(err);
|
||||
return;
|
||||
}
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async res=>{
|
||||
const response = await this.$request('user', 'loginByWeixin', {
|
||||
userInfo: res.userInfo,
|
||||
}, {
|
||||
showLoading: true
|
||||
});
|
||||
if(response.status === 0){
|
||||
this.$util.msg(response.msg);
|
||||
return;
|
||||
}
|
||||
if(response.hasBindMobile && response.data.token){
|
||||
this.loginSuccessCallBack({
|
||||
token: response.data.token,
|
||||
tokenExpired: response.data.tokenExpired
|
||||
});
|
||||
}else{
|
||||
this.navTo('/pages/auth/bindMobile?data='+JSON.stringify(response.data))
|
||||
}
|
||||
plus.oauth.getServices(oauthRes=>{
|
||||
oauthRes[0].logout(logoutRes => {
|
||||
console.log(logoutRes);
|
||||
}, error => {
|
||||
console.log(error);
|
||||
})
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
81
yudao-ui-app-v1/pages/auth/mixin/login-mp-wx.js
Normal file
81
yudao-ui-app-v1/pages/auth/mixin/login-mp-wx.js
Normal file
@ -0,0 +1,81 @@
|
||||
export default{
|
||||
// #ifdef MP-WEIXIN
|
||||
data(){
|
||||
return {
|
||||
mpCodeTimer: 0,
|
||||
mpWxCode: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
timerIdent(){
|
||||
return this.$store.state.timerIdent;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timerIdent(){
|
||||
this.mpCodeTimer ++;
|
||||
if(this.mpCodeTimer % 30 === 0){
|
||||
this.getMpWxCode();
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
this.getMpWxCode();
|
||||
},
|
||||
methods: {
|
||||
//微信小程序登录
|
||||
mpWxGetUserInfo(){
|
||||
if(!this.agreement){
|
||||
this.$util.msg('请阅读并同意用户服务及隐私协议');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$util.throttle(()=>{
|
||||
uni.getUserProfile({
|
||||
desc: '用于展示您的头像及昵称',
|
||||
success: async profileRes=> {
|
||||
const res = await this.$request('user', 'loginByWeixin', {
|
||||
code: this.mpWxCode,
|
||||
...profileRes.userInfo
|
||||
}, {
|
||||
showLoading: true
|
||||
});
|
||||
if(res.status === 0){
|
||||
this.$util.msg(res.msg);
|
||||
return;
|
||||
}
|
||||
if(res.hasBindMobile && res.data.token){
|
||||
this.loginSuccessCallBack({
|
||||
token: res.data.token,
|
||||
tokenExpired: res.data.tokenExpired
|
||||
});
|
||||
}else{
|
||||
this.navTo('/pages/auth/bindMobile?data='+JSON.stringify(res.data))
|
||||
}
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
//获取code
|
||||
getMpWxCode(){
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: res=> {
|
||||
this.mpWxCode = res.code;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
52
yudao-ui-app-v1/pages/index/index.vue
Normal file
52
yudao-ui-app-v1/pages/index/index.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
633
yudao-ui-app-v1/pages/set/cutImage/cut.js
Normal file
633
yudao-ui-app-v1/pages/set/cutImage/cut.js
Normal file
@ -0,0 +1,633 @@
|
||||
(function(global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global.weCropper = factory());
|
||||
}(this, (function() {
|
||||
'use strict';
|
||||
var device = void 0;
|
||||
var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];
|
||||
|
||||
function firstLetterUpper(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
function setTouchState(instance) {
|
||||
for (var _len = arguments.length, arg = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
arg[_key - 1] = arguments[_key];
|
||||
}
|
||||
|
||||
TOUCH_STATE.forEach(function(key, i) {
|
||||
if (arg[i] !== undefined) {
|
||||
instance[key] = arg[i];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function validator(instance, o) {
|
||||
Object.defineProperties(instance, o);
|
||||
}
|
||||
|
||||
function getDevice() {
|
||||
if (!device) {
|
||||
device = wx.getSystemInfoSync();
|
||||
}
|
||||
return device;
|
||||
}
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
|
||||
return typeof obj;
|
||||
} : function(obj) {
|
||||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" :
|
||||
typeof obj;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
var classCallCheck = function(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
};
|
||||
|
||||
var createClass = function() {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function(Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
|
||||
|
||||
|
||||
var slicedToArray = function() {
|
||||
function sliceIterator(arr, i) {
|
||||
var _arr = [];
|
||||
var _n = true;
|
||||
var _d = false;
|
||||
var _e = undefined;
|
||||
|
||||
try {
|
||||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
||||
_arr.push(_s.value);
|
||||
|
||||
if (i && _arr.length === i) break;
|
||||
}
|
||||
} catch (err) {
|
||||
_d = true;
|
||||
_e = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_n && _i["return"]) _i["return"]();
|
||||
} finally {
|
||||
if (_d) throw _e;
|
||||
}
|
||||
}
|
||||
|
||||
return _arr;
|
||||
}
|
||||
|
||||
return function(arr, i) {
|
||||
if (Array.isArray(arr)) {
|
||||
return arr;
|
||||
} else if (Symbol.iterator in Object(arr)) {
|
||||
return sliceIterator(arr, i);
|
||||
} else {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
var tmp = {};
|
||||
|
||||
var DEFAULT = {
|
||||
id: {
|
||||
default: 'cropper',
|
||||
get: function get$$1() {
|
||||
return tmp.id;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
if (typeof value !== 'string') {}
|
||||
tmp.id = value;
|
||||
}
|
||||
},
|
||||
width: {
|
||||
default: 750,
|
||||
get: function get$$1() {
|
||||
return tmp.width;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.width = value;
|
||||
}
|
||||
},
|
||||
height: {
|
||||
default: 750,
|
||||
get: function get$$1() {
|
||||
return tmp.height;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.height = value;
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
default: 2.5,
|
||||
get: function get$$1() {
|
||||
return tmp.scale;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.scale = value;
|
||||
}
|
||||
},
|
||||
zoom: {
|
||||
default: 5,
|
||||
get: function get$$1() {
|
||||
return tmp.zoom;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.zoom = value;
|
||||
}
|
||||
},
|
||||
src: {
|
||||
default: 'cropper',
|
||||
get: function get$$1() {
|
||||
return tmp.src;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.src = value;
|
||||
}
|
||||
},
|
||||
cut: {
|
||||
default: {},
|
||||
get: function get$$1() {
|
||||
return tmp.cut;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.cut = value;
|
||||
}
|
||||
},
|
||||
onReady: {
|
||||
default: null,
|
||||
get: function get$$1() {
|
||||
return tmp.ready;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.ready = value;
|
||||
}
|
||||
},
|
||||
onBeforeImageLoad: {
|
||||
default: null,
|
||||
get: function get$$1() {
|
||||
return tmp.beforeImageLoad;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.beforeImageLoad = value;
|
||||
}
|
||||
},
|
||||
onImageLoad: {
|
||||
default: null,
|
||||
get: function get$$1() {
|
||||
return tmp.imageLoad;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.imageLoad = value;
|
||||
}
|
||||
},
|
||||
onBeforeDraw: {
|
||||
default: null,
|
||||
get: function get$$1() {
|
||||
return tmp.beforeDraw;
|
||||
},
|
||||
set: function set$$1(value) {
|
||||
tmp.beforeDraw = value;
|
||||
}
|
||||
}
|
||||
};
|
||||
function prepare() {
|
||||
var self = this;
|
||||
|
||||
var _getDevice = getDevice(),
|
||||
windowWidth = _getDevice.windowWidth;
|
||||
|
||||
self.attachPage = function() {
|
||||
var pages = getCurrentPages();
|
||||
var pageContext = pages[pages.length - 1];
|
||||
pageContext.wecropper = self;
|
||||
};
|
||||
|
||||
self.createCtx = function() {
|
||||
var id = self.id;
|
||||
|
||||
if (id) {
|
||||
self.ctx = wx.createCanvasContext(id);
|
||||
}
|
||||
};
|
||||
|
||||
self.deviceRadio = windowWidth / 750;
|
||||
self.deviceRadio = self.deviceRadio.toFixed(2)
|
||||
}
|
||||
function observer() {
|
||||
var self = this;
|
||||
|
||||
var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad'];
|
||||
|
||||
self.on = function(event, fn) {
|
||||
if (EVENT_TYPE.indexOf(event) > -1) {
|
||||
if (typeof fn === 'function') {
|
||||
event === 'ready' ? fn(self) : self['on' + firstLetterUpper(event)] = fn;
|
||||
}
|
||||
}
|
||||
return self;
|
||||
};
|
||||
}
|
||||
function methods() {
|
||||
var self = this;
|
||||
|
||||
var deviceRadio = self.deviceRadio;
|
||||
|
||||
var boundWidth = self.width;
|
||||
var boundHeight = self.height;
|
||||
var _self$cut = self.cut,
|
||||
_self$cut$x = _self$cut.x,
|
||||
x = _self$cut$x === undefined ? 0 : _self$cut$x,
|
||||
_self$cut$y = _self$cut.y,
|
||||
y = _self$cut$y === undefined ? 0 : _self$cut$y,
|
||||
_self$cut$width = _self$cut.width,
|
||||
width = _self$cut$width === undefined ? boundWidth : _self$cut$width,
|
||||
_self$cut$height = _self$cut.height,
|
||||
height = _self$cut$height === undefined ? boundHeight : _self$cut$height;
|
||||
|
||||
|
||||
self.updateCanvas = function() {
|
||||
if (self.croperTarget) {
|
||||
|
||||
|
||||
self.ctx.drawImage(self.croperTarget, self.imgLeft, self.imgTop, self.scaleWidth, self.scaleHeight);
|
||||
}
|
||||
typeof self.onBeforeDraw === 'function' && self.onBeforeDraw(self.ctx, self);
|
||||
|
||||
self.setBoundStyle();
|
||||
self.ctx.draw();
|
||||
return self;
|
||||
};
|
||||
|
||||
self.pushOrign = function(src) {
|
||||
self.src = src;
|
||||
|
||||
typeof self.onBeforeImageLoad === 'function' && self.onBeforeImageLoad(self.ctx, self);
|
||||
|
||||
uni.getImageInfo({
|
||||
src: src,
|
||||
success: function success(res) {
|
||||
var innerAspectRadio = res.width / res.height;
|
||||
self.croperTarget = res.path || src;
|
||||
if (innerAspectRadio < width / height) {
|
||||
self.rectX = x;
|
||||
self.baseWidth = width;
|
||||
self.baseHeight = width / innerAspectRadio;
|
||||
self.rectY = y - Math.abs((height - self.baseHeight) / 2);
|
||||
} else {
|
||||
self.rectY = y;
|
||||
self.baseWidth = height * innerAspectRadio;
|
||||
self.baseHeight = height;
|
||||
self.rectX = x - Math.abs((width - self.baseWidth) / 2);
|
||||
}
|
||||
|
||||
self.imgLeft = self.rectX;
|
||||
self.imgTop = self.rectY;
|
||||
self.scaleWidth = self.baseWidth;
|
||||
self.scaleHeight = self.baseHeight;
|
||||
|
||||
self.updateCanvas();
|
||||
|
||||
typeof self.onImageLoad === 'function' && self.onImageLoad(self.ctx, self);
|
||||
}
|
||||
});
|
||||
|
||||
self.update();
|
||||
return self;
|
||||
};
|
||||
|
||||
self.getCropperImage = function() {
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
var id = self.id;
|
||||
|
||||
var ARG_TYPE = toString.call(args[0]);
|
||||
switch (ARG_TYPE) {
|
||||
case '[object Object]':
|
||||
var _args$0$quality = args[0].quality,
|
||||
quality = _args$0$quality === undefined ? 10 : _args$0$quality;
|
||||
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: id,
|
||||
x: x,
|
||||
y: y,
|
||||
fileType: "jpg",
|
||||
width: width,
|
||||
height: height,
|
||||
destWidth: width * quality / (deviceRadio * 10),
|
||||
destHeight: height * quality / (deviceRadio * 10),
|
||||
success: function success(res) {
|
||||
typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case '[object Function]':
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: id,
|
||||
x: x,
|
||||
y: y,
|
||||
fileType: "jpg",
|
||||
width: width,
|
||||
height: height,
|
||||
destWidth: width,
|
||||
destHeight: height,
|
||||
success: function success(res) {
|
||||
|
||||
typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
return self;
|
||||
};
|
||||
}
|
||||
|
||||
function update() {
|
||||
var self = this;
|
||||
if (!self.src) return;
|
||||
|
||||
self.__oneTouchStart = function(touch) {
|
||||
self.touchX0 = touch.x;
|
||||
self.touchY0 = touch.y;
|
||||
};
|
||||
|
||||
self.__oneTouchMove = function(touch) {
|
||||
var xMove = void 0,
|
||||
yMove = void 0;
|
||||
if (self.touchended) {
|
||||
return self.updateCanvas();
|
||||
}
|
||||
xMove = touch.x - self.touchX0;
|
||||
yMove = touch.y - self.touchY0;
|
||||
|
||||
var imgLeft = self.rectX + xMove;
|
||||
var imgTop = self.rectY + yMove;
|
||||
|
||||
self.outsideBound(imgLeft, imgTop);
|
||||
|
||||
self.updateCanvas();
|
||||
};
|
||||
|
||||
self.__twoTouchStart = function(touch0, touch1) {
|
||||
var xMove = void 0,
|
||||
yMove = void 0,
|
||||
oldDistance = void 0;
|
||||
|
||||
self.touchX1 = self.rectX + self.scaleWidth / 2;
|
||||
self.touchY1 = self.rectY + self.scaleHeight / 2;
|
||||
|
||||
xMove = touch1.x - touch0.x;
|
||||
yMove = touch1.y - touch0.y;
|
||||
oldDistance = Math.sqrt(xMove * xMove + yMove * yMove);
|
||||
|
||||
self.oldDistance = oldDistance;
|
||||
};
|
||||
|
||||
self.__twoTouchMove = function(touch0, touch1) {
|
||||
var xMove = void 0,
|
||||
yMove = void 0,
|
||||
newDistance = void 0;
|
||||
var scale = self.scale,
|
||||
zoom = self.zoom;
|
||||
|
||||
xMove = touch1.x - touch0.x;
|
||||
yMove = touch1.y - touch0.y;
|
||||
newDistance = Math.sqrt(xMove * xMove + yMove * yMove
|
||||
|
||||
// 使用0.005的缩放倍数具有良好的缩放体验
|
||||
);
|
||||
self.newScale = self.oldScale + 0.001 * zoom * (newDistance - self.oldDistance);
|
||||
|
||||
// 设定缩放范围
|
||||
self.newScale <= 1 && (self.newScale = 1);
|
||||
self.newScale >= scale && (self.newScale = scale);
|
||||
|
||||
self.scaleWidth = self.newScale * self.baseWidth;
|
||||
self.scaleHeight = self.newScale * self.baseHeight;
|
||||
var imgLeft = self.touchX1 - self.scaleWidth / 2;
|
||||
var imgTop = self.touchY1 - self.scaleHeight / 2;
|
||||
|
||||
self.outsideBound(imgLeft, imgTop);
|
||||
|
||||
self.updateCanvas();
|
||||
};
|
||||
|
||||
self.__xtouchEnd = function() {
|
||||
self.oldScale = self.newScale;
|
||||
self.rectX = self.imgLeft;
|
||||
self.rectY = self.imgTop;
|
||||
};
|
||||
}
|
||||
var handle = {
|
||||
touchStart: function touchStart(e) {
|
||||
var self = this;
|
||||
var _e$touches = slicedToArray(e.touches, 2),
|
||||
touch0 = _e$touches[0],
|
||||
touch1 = _e$touches[1];
|
||||
|
||||
if (!touch0.x) {
|
||||
touch0.x = touch0.clientX;
|
||||
touch0.y = touch0.clientY;
|
||||
if (touch1) {
|
||||
touch1.x = touch1.clientX;
|
||||
touch1.y = touch1.clientY;
|
||||
}
|
||||
}
|
||||
|
||||
setTouchState(self, true, null, null);
|
||||
self.__oneTouchStart(touch0);
|
||||
if (e.touches.length >= 2) {
|
||||
self.__twoTouchStart(touch0, touch1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
touchMove: function touchMove(e) {
|
||||
var self = this;
|
||||
|
||||
var _e$touches2 = slicedToArray(e.touches, 2),
|
||||
touch0 = _e$touches2[0],
|
||||
touch1 = _e$touches2[1];
|
||||
if (!touch0.x) {
|
||||
touch0.x = touch0.clientX;
|
||||
touch0.y = touch0.clientY;
|
||||
if (touch1) {
|
||||
touch1.x = touch1.clientX;
|
||||
touch1.y = touch1.clientY;
|
||||
}
|
||||
}
|
||||
setTouchState(self, null, true);
|
||||
if (e.touches.length === 1) {
|
||||
self.__oneTouchMove(touch0);
|
||||
}
|
||||
if (e.touches.length >= 2) {
|
||||
self.__twoTouchMove(touch0, touch1);
|
||||
}
|
||||
},
|
||||
touchEnd: function touchEnd(e) {
|
||||
var self = this;
|
||||
|
||||
setTouchState(self, false, false, true);
|
||||
self.__xtouchEnd();
|
||||
}
|
||||
};
|
||||
function cut() {
|
||||
var self = this;
|
||||
var deviceRadio = self.deviceRadio;
|
||||
|
||||
var boundWidth = self.width;
|
||||
var boundHeight = self.height;
|
||||
var _self$cut = self.cut,
|
||||
_self$cut$x = _self$cut.x,
|
||||
x = _self$cut$x === undefined ? 0 : _self$cut$x,
|
||||
_self$cut$y = _self$cut.y,
|
||||
y = _self$cut$y === undefined ? 0 : _self$cut$y,
|
||||
_self$cut$width = _self$cut.width,
|
||||
width = _self$cut$width === undefined ? boundWidth : _self$cut$width,
|
||||
_self$cut$height = _self$cut.height,
|
||||
height = _self$cut$height === undefined ? boundHeight : _self$cut$height;
|
||||
|
||||
|
||||
self.outsideBound = function(imgLeft, imgTop) {
|
||||
self.imgLeft = imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft;
|
||||
|
||||
self.imgTop = imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop;
|
||||
};
|
||||
|
||||
self.setBoundStyle = function() {
|
||||
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
||||
_ref$color = _ref.color,
|
||||
color = _ref$color === undefined ? '#04b00f' : _ref$color,
|
||||
_ref$mask = _ref.mask,
|
||||
mask = _ref$mask === undefined ? 'rgba(0, 0, 0, 0.5)' : _ref$mask,
|
||||
_ref$lineWidth = _ref.lineWidth,
|
||||
lineWidth = _ref$lineWidth === undefined ? 1 : _ref$lineWidth;
|
||||
|
||||
self.ctx.beginPath();
|
||||
self.ctx.setFillStyle(mask);
|
||||
self.ctx.fillRect(0, 0, x, boundHeight);
|
||||
self.ctx.fillRect(x, 0, width, y);
|
||||
self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
|
||||
self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
|
||||
self.ctx.fill();
|
||||
self.ctx.beginPath();
|
||||
self.ctx.setStrokeStyle(color);
|
||||
self.ctx.setLineWidth(lineWidth);
|
||||
self.ctx.moveTo(x - lineWidth, y + 10 - lineWidth);
|
||||
self.ctx.lineTo(x - lineWidth, y - lineWidth);
|
||||
self.ctx.lineTo(x + 10 - lineWidth, y - lineWidth);
|
||||
self.ctx.stroke();
|
||||
self.ctx.beginPath();
|
||||
self.ctx.setStrokeStyle(color);
|
||||
self.ctx.setLineWidth(lineWidth);
|
||||
self.ctx.moveTo(x - lineWidth, y + height - 10 + lineWidth);
|
||||
self.ctx.lineTo(x - lineWidth, y + height + lineWidth);
|
||||
self.ctx.lineTo(x + 10 - lineWidth, y + height + lineWidth);
|
||||
self.ctx.stroke();
|
||||
self.ctx.beginPath();
|
||||
self.ctx.setStrokeStyle(color);
|
||||
self.ctx.setLineWidth(lineWidth);
|
||||
self.ctx.moveTo(x + width - 10 + lineWidth, y - lineWidth);
|
||||
self.ctx.lineTo(x + width + lineWidth, y - lineWidth);
|
||||
self.ctx.lineTo(x + width + lineWidth, y + 10 - lineWidth);
|
||||
self.ctx.stroke();
|
||||
self.ctx.beginPath();
|
||||
self.ctx.setStrokeStyle(color);
|
||||
self.ctx.setLineWidth(lineWidth);
|
||||
self.ctx.moveTo(x + width + lineWidth, y + height - 10 + lineWidth);
|
||||
self.ctx.lineTo(x + width + lineWidth, y + height + lineWidth);
|
||||
self.ctx.lineTo(x + width - 10 + lineWidth, y + height + lineWidth);
|
||||
self.ctx.stroke();
|
||||
};
|
||||
}
|
||||
|
||||
var __version__ = '1.1.4';
|
||||
|
||||
var weCropper = function() {
|
||||
function weCropper(params) {
|
||||
classCallCheck(this, weCropper);
|
||||
|
||||
var self = this;
|
||||
var _default = {};
|
||||
|
||||
validator(self, DEFAULT);
|
||||
|
||||
Object.keys(DEFAULT).forEach(function(key) {
|
||||
_default[key] = DEFAULT[key].default;
|
||||
});
|
||||
Object.assign(self, _default, params);
|
||||
|
||||
self.prepare();
|
||||
self.attachPage();
|
||||
self.createCtx();
|
||||
self.observer();
|
||||
self.cutt();
|
||||
self.methods();
|
||||
self.init();
|
||||
self.update();
|
||||
|
||||
return self;
|
||||
}
|
||||
|
||||
createClass(weCropper, [{
|
||||
key: 'init',
|
||||
value: function init() {
|
||||
var self = this;
|
||||
var src = self.src;
|
||||
|
||||
|
||||
self.version = __version__;
|
||||
|
||||
typeof self.onReady === 'function' && self.onReady(self.ctx, self);
|
||||
|
||||
if (src) {
|
||||
self.pushOrign(src);
|
||||
}
|
||||
setTouchState(self, false, false, false);
|
||||
|
||||
self.oldScale = 1;
|
||||
self.newScale = 1;
|
||||
|
||||
return self;
|
||||
}
|
||||
}]);
|
||||
return weCropper;
|
||||
}();
|
||||
|
||||
Object.assign(weCropper.prototype, handle);
|
||||
|
||||
|
||||
weCropper.prototype.prepare = prepare;
|
||||
weCropper.prototype.observer = observer;
|
||||
weCropper.prototype.methods = methods;
|
||||
weCropper.prototype.cutt = cut;
|
||||
weCropper.prototype.update = update;
|
||||
|
||||
return weCropper;
|
||||
|
||||
})));
|
||||
223
yudao-ui-app-v1/pages/set/cutImage/cut.vue
Normal file
223
yudao-ui-app-v1/pages/set/cutImage/cut.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="title-view" :style="{height: navigationBarHeight + 'px'}">
|
||||
<navigator open-type="navigateBack" class="back-btn mix-icon icon-xiangzuo"></navigator>
|
||||
<text class="title">裁剪</text>
|
||||
<text class="empty"></text>
|
||||
</view>
|
||||
|
||||
<view class="cropper-wrapper">
|
||||
<canvas
|
||||
class="cropper"
|
||||
disable-scroll="true"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
:style="{ width: cropperOpt.width, height: cropperOpt.height }"
|
||||
canvas-id="cropper"
|
||||
></canvas>
|
||||
</view>
|
||||
<view class="cropper-buttons">
|
||||
<view class="btn upload" @tap="uploadTap">重选</view>
|
||||
<view class="btn getCropperImage" @tap="getCropperImage">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import weCropper from './cut.js';
|
||||
const device = uni.getSystemInfoSync();
|
||||
const width = device.windowWidth;
|
||||
const height = device.windowHeight;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cropperOpt: {
|
||||
id: 'cropper',
|
||||
width: width,
|
||||
height: height,
|
||||
scale: 2.5,
|
||||
zoom: 8,
|
||||
cut: {
|
||||
x: (width - 200) / 2,
|
||||
y: (height - this.systemInfo.navigationBarHeight - this.systemInfo.statusBarHeight - 200) / 2,
|
||||
width: 200,
|
||||
height: 200
|
||||
}
|
||||
},
|
||||
weCropper: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
navigationBarHeight(){
|
||||
console.log(this.systemInfo.navigationBarHeight);
|
||||
return this.systemInfo.navigationBarHeight;
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
// do something
|
||||
const cropperOpt = this.cropperOpt;
|
||||
const src = option.src;
|
||||
console.log(src);
|
||||
if (src) {
|
||||
Object.assign(cropperOpt, {
|
||||
src
|
||||
});
|
||||
|
||||
this.weCropper = new weCropper(cropperOpt)
|
||||
.on('ready', function(ctx) {})
|
||||
.on('beforeImageLoad', ctx => {
|
||||
/* uni.showToast({
|
||||
title: '上传中',
|
||||
icon: 'loading',
|
||||
duration: 3000
|
||||
}); */
|
||||
})
|
||||
.on('imageLoad', ctx => {
|
||||
uni.hideToast();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
touchStart(e) {
|
||||
this.weCropper.touchStart(e);
|
||||
},
|
||||
touchMove(e) {
|
||||
this.weCropper.touchMove(e);
|
||||
},
|
||||
touchEnd(e) {
|
||||
this.weCropper.touchEnd(e);
|
||||
},
|
||||
convertBase64UrlToBlob(dataURI, type) {
|
||||
var binary = atob(dataURI.split(',')[1]);
|
||||
var array = [];
|
||||
for (var i = 0; i < binary.length; i++) {
|
||||
array.push(binary.charCodeAt(i));
|
||||
}
|
||||
return new Blob([new Uint8Array(array)], {
|
||||
type: type
|
||||
}, {
|
||||
filename: '1111.jpg'
|
||||
});
|
||||
},
|
||||
blobToDataURL(blob) {
|
||||
var a = new FileReader();
|
||||
a.readAsDataURL(blob); //读取文件保存在result中
|
||||
a.onload = function(e) {
|
||||
var getRes = e.target.result; //读取的结果在result中
|
||||
console.log(getRes);
|
||||
};
|
||||
},
|
||||
getCropperImage() {
|
||||
let _this = this;
|
||||
this.weCropper.getCropperImage(avatar => {
|
||||
if (avatar) {
|
||||
this.$util.prePage().setAvatar(avatar);
|
||||
uni.navigateBack();
|
||||
|
||||
} else {
|
||||
console.log('获取图片失败，请稍后重试');
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadTap() {
|
||||
const self = this;
|
||||
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9
|
||||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success(res) {
|
||||
let src = res.tempFilePaths[0];
|
||||
// 获取裁剪图片资源后，给data添加src属性及其值
|
||||
self.weCropper.pushOrign(src);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page, .content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #000;
|
||||
padding-top: var(--status-bar-height);
|
||||
}
|
||||
|
||||
.title-view{
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
|
||||
.back-btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 42px;
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
.title{
|
||||
font-size: 17px;
|
||||
color: #fff;
|
||||
}
|
||||
.empty{
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.cropper {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cropper-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cropper-buttons {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.btn{
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
|
||||
&.upload{
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&.getCropperImage{
|
||||
padding-right: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
271
yudao-ui-app-v1/pages/set/userInfo.vue
Normal file
271
yudao-ui-app-v1/pages/set/userInfo.vue
Normal file
@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="cell">
|
||||
<text class="tit fill">头像</text>
|
||||
<view class="avatar-wrap" @click="chooseImage">
|
||||
<image class="avatar" :src="tempAvatar || userInfo.avatar || '/static/icon/default-avatar.png'" mode="aspectFill"></image>
|
||||
<!-- 进度遮盖 -->
|
||||
<view class="progress center"
|
||||
:class="{
|
||||
'no-transtion': uploadProgress === 0,
|
||||
show: uploadProgress != 100
|
||||
}"
|
||||
:style="{
|
||||
width: uploadProgress + '%',
|
||||
height: uploadProgress + '%',
|
||||
}"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell b-b">
|
||||
<text class="tit fill">昵称</text>
|
||||
<input class="input" v-model="userInfo.nickname" type="text" maxlength="8" placeholder="请输入昵称" placeholder-class="placeholder">
|
||||
</view>
|
||||
<u-cell-group>
|
||||
<u-cell title="昵称" :value="userInfo.nickname" isLink @click="nicknameClick()"></u-cell>
|
||||
</u-cell-group>
|
||||
|
||||
<u-modal :show="nicknameOpen" title="修改昵称" showCancelButton @confirm="nicknameSubmit" @cancel="nicknameCancel">
|
||||
<view class="slot-content">
|
||||
<u--form labelPosition="left" :model="nicknameForm" :rules="nicknameRules" ref="nicknameForm" errorType="toast">
|
||||
<u-form-item prop="nickname">
|
||||
<u--input v-model="nicknameForm.nickname" placeholder="请输入昵称" border="none"></u--input>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploadProgress: 100, //头像上传进度
|
||||
tempAvatar: '',
|
||||
userInfo: {},
|
||||
nicknameOpen: false,
|
||||
nicknameForm: {
|
||||
nickname: ''
|
||||
},
|
||||
nicknameRules: {
|
||||
nickname: [{
|
||||
required: true,
|
||||
message: '请输入昵称'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
curUserInfo(){
|
||||
return this.$store.state.userInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
curUserInfo(curUserInfo){
|
||||
const {avatar, nickname, gender} = curUserInfo;
|
||||
this.userInfo = {avatar, nickname, gender,};
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const {avatar, nickname, gender, anonymous} = this.curUserInfo;
|
||||
this.userInfo = {avatar, nickname, gender};
|
||||
},
|
||||
methods: {
|
||||
nicknameClick() {
|
||||
this.nicknameOpen = true;
|
||||
this.nicknameForm.nickname = this.userInfo.nickname;
|
||||
},
|
||||
nicknameCancel() {
|
||||
this.nicknameOpen = false;
|
||||
},
|
||||
nicknameSubmit() {
|
||||
this.$refs.nicknameForm.validate().then(() => {
|
||||
this.loading = true;
|
||||
// 执行登陆
|
||||
const { mobile, code, password} = this.form;
|
||||
const loginPromise = this.loginType == 'password' ? login(mobile, password) :
|
||||
smsLogin(mobile, code);
|
||||
loginPromise.then(data => {
|
||||
// 登陆成功
|
||||
this.loginSuccessCallBack(data);
|
||||
}).catch(errors => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
}).catch(errors => {
|
||||
});
|
||||
},
|
||||
// 提交修改
|
||||
async confirm() {
|
||||
// 校验信息是否变化
|
||||
const {uploadProgress, userInfo, curUserInfo} = this;
|
||||
let isUpdate = false;
|
||||
for (let key in userInfo) {
|
||||
if(userInfo[key] !== curUserInfo[key]){
|
||||
isUpdate = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isUpdate === false) {
|
||||
this.$util.msg('信息未修改');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
if (!userInfo.avatar) {
|
||||
this.$util.msg('请上传头像');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
if (uploadProgress !== 100) {
|
||||
this.$util.msg('请等待头像上传完毕');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
if (!userInfo.nickname) {
|
||||
this.$util.msg('请输入您的昵称');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
const res = await this.$request('user', 'update', userInfo);
|
||||
this.$refs.confirmBtn.stop();
|
||||
this.$util.msg(res.msg);
|
||||
if(res.status === 1){
|
||||
this.$store.dispatch('getUserInfo'); //刷新用户信息
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack();
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// 选择头像
|
||||
chooseImage(){
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res=> {
|
||||
uni.navigateTo({
|
||||
url: `./cutImage/cut?src=${res.tempFilePaths[0]}`
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 裁剪回调
|
||||
async setAvatar(filePath){
|
||||
this.tempAvatar = filePath;
|
||||
this.uploadProgress = 0;
|
||||
const result = await uniCloud.uploadFile({
|
||||
filePath: filePath,
|
||||
cloudPath: + new Date() + ('000000' + Math.floor(Math.random() * 999999)).slice(-6) + '.jpg',
|
||||
onUploadProgress: e=> {
|
||||
this.uploadProgress = Math.round(
|
||||
(e.loaded * 100) / e.total
|
||||
);
|
||||
}
|
||||
});
|
||||
if(!result.fileID){
|
||||
this.$util.msg('头像上传失败');
|
||||
return;
|
||||
}
|
||||
if(typeof uniCloud.getTempFileURL === 'undefined'){
|
||||
this.userInfo.avatar = result.fileID;
|
||||
}else{
|
||||
const tempFiles = await uniCloud.getTempFileURL({
|
||||
fileList: [result.fileID]
|
||||
})
|
||||
const tempFile = tempFiles.fileList[0];
|
||||
if(tempFile.download_url || tempFile.fileID){
|
||||
this.userInfo.avatar = tempFile.download_url || tempFile.fileID;
|
||||
}else{
|
||||
this.$util.msg('头像上传失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app{
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
.cell{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
padding: 0 40rpx;
|
||||
|
||||
&:first-child{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
&:after{
|
||||
left: 40rpx;
|
||||
right: 40rpx;
|
||||
border-color: #d8d8d8;
|
||||
}
|
||||
.tit{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.avatar-wrap{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: relative;
|
||||
border-radius: 100rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
.progress{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
box-shadow: rgba(0,0,0,.6) 0px 0px 0px 2005px;
|
||||
border-radius: 100rpx;
|
||||
transition: .5s;
|
||||
opacity: 0;
|
||||
|
||||
&.no-transtion{
|
||||
transition: 0s;
|
||||
}
|
||||
&.show{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input{
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
switch{
|
||||
margin: 0;
|
||||
transform: scale(0.8) translateX(10rpx);
|
||||
transform-origin: center right;
|
||||
}
|
||||
.tip{
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
.checkbox{
|
||||
padding: 12rpx 0 12rpx 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
|
||||
.mix-icon{
|
||||
margin-right: 12rpx;
|
||||
font-size: 36rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
.icon-xuanzhong{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
213
yudao-ui-app-v1/pages/tabbar/user.vue
Normal file
213
yudao-ui-app-v1/pages/tabbar/user.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<!-- 个人信息 -->
|
||||
<view class="user-wrapper">
|
||||
<image class="user-background" src="/static/backgroud/user.jpg"></image>
|
||||
<view class="user">
|
||||
<!-- 头像 -->
|
||||
<image class="avatar" :src="userInfo.avatar || '/static/icon/default-avatar.png'" @click="navTo('/pages/set/userInfo', {login: true})"></image>
|
||||
<!-- 已登陆，展示昵称 -->
|
||||
<view class="cen column" v-if="hasLogin">
|
||||
<text class="username f-m">{{ userInfo.nickname }}</text>
|
||||
<text class="group">普通会员</text>
|
||||
</view>
|
||||
<!-- 未登陆，引导登陆 -->
|
||||
<view class="login-box" v-else @click="navTo('/pages/auth/login')">
|
||||
<text>点击注册/登录</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下面的圆弧 -->
|
||||
<image class="user-background-arc-line" src="/static/icon/arc.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-wrap">
|
||||
<view class="order-header row" @click="navTo('/pages/order/list?current=0', {login: true})">
|
||||
<text class="title">我的订单</text>
|
||||
<text class="more">查看全部</text>
|
||||
<text class="mix-icon icon-you"></text>
|
||||
</view>
|
||||
<view class="order-list">
|
||||
<view class="item center" @click="navTo('/pages/order/list?current=1', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||||
<text class="mix-icon icon-daifukuan"></text>
|
||||
<text>待付款</text>
|
||||
<text v-if="orderCount.c0 > 0" class="number">{{ orderCount.c0 }}</text>
|
||||
</view>
|
||||
<view class="item center" @click="navTo('/pages/order/list?current=2', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||||
<text class="mix-icon icon-daifahuo"></text>
|
||||
<text>待发货</text>
|
||||
<text v-if="orderCount.c1 > 0" class="number">{{ orderCount.c1 }}</text>
|
||||
</view>
|
||||
<view class="item center" @click="navTo('/pages/order/list?current=3', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||||
<text class="mix-icon icon-yishouhuo"></text>
|
||||
<text>待收货</text>
|
||||
<text v-if="orderCount.c2 > 0" class="number">{{ orderCount.c2 }}</text>
|
||||
</view>
|
||||
<view class="item center" @click="navTo('/pages/order/list?current=4', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||||
<text class="mix-icon icon-daipingjia"></text>
|
||||
<text>待评价</text>
|
||||
<text v-if="orderCount.c3 > 0" class="number">{{ orderCount.c3 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能入口 -->
|
||||
<u-cell-group class="option1-wrap">
|
||||
<u-cell icon="edit-pen" title="个人信息" isLink @click="navTo('/pages/set/userInfo', {login: true})"></u-cell>
|
||||
<u-cell icon="setting" title="账号安全" isLink @click="navTo('/pages/set/set', {login: true})"></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import { isLogin } from '@/common/js/util.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderCount: { // TODO 芋艿：读取
|
||||
c0: 1,
|
||||
c1: 2,
|
||||
c2: 3,
|
||||
c3: 4
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
...mapGetters(['hasLogin']),
|
||||
},
|
||||
onShow() {
|
||||
// 获得用户信息 TODO 芋艿：
|
||||
// if (isLogin()) {
|
||||
// this.$store.dispatch('obtainUserInfo');
|
||||
// }
|
||||
// TODO 芋艿：获得订单数量
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.user-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: calc(var(--status-bar-height) + 52rpx);
|
||||
padding-bottom: 6rpx;
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 100px;
|
||||
margin-right: 24rpx;
|
||||
border: 4rpx solid #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
.username {
|
||||
font-size: 34rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.group {
|
||||
align-self: flex-start;
|
||||
padding: 10rpx 14rpx;
|
||||
margin: 16rpx 10rpx; // 10rpx 避免距离昵称太近
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255,.3);
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
.login-box {
|
||||
font-size: 36rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.user-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
}
|
||||
.user-background-arc-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-wrap {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto 0;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
.order-header {
|
||||
padding: 28rpx 20rpx 6rpx 26rpx;
|
||||
.title {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.icon-you {
|
||||
margin-left: 4rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.order-list {
|
||||
display:flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx 0;
|
||||
.item{
|
||||
flex-direction: column;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
position: relative;
|
||||
.mix-icon {
|
||||
font-size: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #fa436a;
|
||||
}
|
||||
.icon-shouhoutuikuan {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.number {
|
||||
position: absolute;
|
||||
right: 22rpx;
|
||||
top: 6rpx;
|
||||
min-width: 34rpx;
|
||||
height: 34rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
padding: 0 8rpx;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
border: 2rpx solid #fff;
|
||||
background-color: $base-color;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user