Skip to content

U
uni-starter

言程序plus / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 0
Fork 0
U
uni-starter
提交 e0a62a01 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

更正由目录修改导致的路径错误

上级 92cd08db
隐藏空白更改
内联 并排
Showing with 361 addition and 270 deletion
baseapp.config.js
浏览文件 @ e0a62a01
......@@ -23,7 +23,7 @@ module.exports = {
"needLogin": [
"/pages/ucenter/userinfo/userinfo",
"/uni_modules/uni-news-favorite/pages/uni-news-favorite/list",
"/pages/ucenter/edit/uploadCutImageToUnicloud"
"/pages/ucenter/userinfo/uploadCutImageToUnicloud"
],
"login": [ "smsCode","uniVerify", "username", "weixin", "apple"],
/*
......
pages/ucenter/settings/settings.vue
浏览文件 @ e0a62a01
<template>
<view class="content">
<!-- 功能列表 -->
<uni-list class="mt10">
<uni-list-item title="个人资料" to="/pages/ucenter/edit/edit" link="navigateTo"></uni-list-item>
<uni-list-item v-if="userInfo.phone" title="修改密码" :to="'/pages/ucenter/login-page/pwd-retrieve/pwd-retrieve?phoneNumber='+ userInfo.phone" link="navigateTo"></uni-list-item>
</uni-list>
<uni-list class="mt10">
<!-- #ifdef APP-PLUS -->
<!-- 检查push过程未结束不显示，push设置项 -->
<uni-list-item title="清理缓存" @click="clearTmp" link></uni-list-item>
<uni-list-item v-if="pushIsOn != 'wait'" @click.native="openSetting()" title="推送功能" showSwitch :switchChecked="pushIsOn"></uni-list-item>
<!-- #endif -->
<uni-list-item v-if="supportMode.includes('fingerPrint')" title="指纹解锁" @click="startSoterAuthentication('fingerPrint')" link></uni-list-item>
<uni-list-item v-if="supportMode.includes('facial')" title="人脸解锁" @click="startSoterAuthentication('facial')" link></uni-list-item>
</uni-list>
<!-- 功能列表 -->
<uni-list class="mt10">
<uni-list-item title="个人资料" to="/pages/ucenter/userinfo/userinfo" link="navigateTo"></uni-list-item>
<uni-list-item v-if="userInfo.phone" title="修改密码" :to="'/pages/ucenter/login-page/pwd-retrieve/pwd-retrieve?phoneNumber='+ userInfo.phone" link="navigateTo"></uni-list-item>
</uni-list>
<uni-list class="mt10">
<!-- #ifdef APP-PLUS -->
<!-- 检查push过程未结束不显示，push设置项 -->
<uni-list-item title="清理缓存" @click="clearTmp" link></uni-list-item>
<uni-list-item v-if="pushIsOn != 'wait'" @click.native="openSetting()" title="推送功能" showSwitch :switchChecked="pushIsOn"></uni-list-item>
<!-- #endif -->
<uni-list-item v-if="supportMode.includes('fingerPrint')" title="指纹解锁" @click="startSoterAuthentication('fingerPrint')" link></uni-list-item>
<uni-list-item v-if="supportMode.includes('facial')" title="人脸解锁" @click="startSoterAuthentication('facial')" link></uni-list-item>
</uni-list>
<!-- 退出/登陆 按钮 -->
<view class="bottom-back" @click="clickLogout">
......@@ -34,36 +34,36 @@
} from 'vuex';
export default {
data() {
return {
supportMode:[],
pushIsOn:"wait"
return {
supportMode:[],
pushIsOn:"wait"
}
},
computed: {
...mapGetters({
'userInfo': 'user/info',
'userInfo': 'user/info',
'hasLogin': 'user/hasLogin',
})
},
onLoad() {
// #ifdef APP-PLUS || MP-WEIXIN
uni.checkIsSupportSoterAuthentication({
success: (res) => {
console.log(res);
this.supportMode = res.supportMode
},
fail: (err) => {
reject(err);
}
})
// #endif
// #ifdef APP-PLUS || MP-WEIXIN
uni.checkIsSupportSoterAuthentication({
success: (res) => {
console.log(res);
this.supportMode = res.supportMode
},
fail: (err) => {
reject(err);
}
})
// #endif
},
onShow() {
// 检查手机端获取推送是否开启
//#ifdef APP-PLUS
setTimeout(()=>{
this.pushIsOn = isOn();
},1)
onShow() {
// 检查手机端获取推送是否开启
//#ifdef APP-PLUS
setTimeout(()=>{
this.pushIsOn = isOn();
},1)
//#endif
},
methods: {
......@@ -72,12 +72,12 @@
}),
toEdit() {
uni.navigateTo({
url: '/pages/ucenter/edit/edit'
url: '/pages/ucenter/userinfo/userinfo'
});
},
changePwd() {
uni.navigateTo({
url: '/pages/ucenter/login-page/pwd-retrieve/pwd-retrieve?phoneNumber='
url: '/pages/ucenter/login-page/pwd-retrieve/pwd-retrieve?phoneNumber='
+ (this.userInfo && this.userInfo.phone ? this.userInfo.phone : ''),
fail: err => {
console.log(err);
......@@ -87,7 +87,7 @@
/**
* 开始生物认证
*/
startSoterAuthentication(checkAuthMode) {
startSoterAuthentication(checkAuthMode) {
let title = {"fingerPrint":"指纹解锁","facial":"人脸解锁"}[checkAuthMode]
// 检查是否开启认证
this.checkIsSoterEnrolledInDevice({checkAuthMode,title})
......@@ -218,7 +218,7 @@
/**
* 打开设置页面
*/
openSetting() {
openSetting() {
console.log('openSetting');
setting();
}
......@@ -281,8 +281,8 @@
background-color: #F9F9F9;
}
.content /deep/ .uni-list-item--disabled,.list-item {
.content /deep/ .uni-list-item--disabled,.list-item {
height: 50px;
margin-bottom: 1px;
margin-bottom: 1px;
}
</style>
\ No newline at end of file
pages/ucenter/userinfo/limeClipper/README.md 0 → 100644
浏览文件 @ e0a62a01
插件来源：[https://ext.dcloud.net.cn/plugin?id=3594](https://ext.dcloud.net.cn/plugin?id=3594)
以下是插件作者的插件介绍：
# Clipper 图片裁剪
> uniapp 图片裁剪，可用于图片头像等裁剪处理
> [查看更多](http://liangei.gitee.io/limeui/#/clipper) <br>
> Q群：458377637
## 平台兼容
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
| √ | √ | √ | 未测 | √ | √ | √ |
## 代码演示
### 基本用法
`@success` 事件点击 👉 **确定** 后会返回生成的图片信息，包含 `url`、`width`、`height`
```html
<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper v-if="show" @success="url = $event.url; show = false" @cancel="show = false" ></l-clipper>
<button @tap="show = true">裁剪</button>
```
```js
// 非uni_modules引入
import lClipper from '@/components/lime-clipper/'
// uni_modules引入
import lClipper from '@/uni_modules/lime-clipper/components/lime-clipper/'
export default {
components: {lClipper},
data() {
return {
show: false,
url: '',
}
}
}
```
### 传入图片
`image-url`可传入**相对路径**、**临时路径**、**本地路径**、**网络图片**<br>
* **当为网络地址时**
* H5：👉 需要解决跨域问题。 <br>
* 小程序：👉 需要配置 downloadFile 域名 <br>
```html
<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper v-if="show" :image-url="imageUrl" @success="url = $event.url; show = false" @cancel="show = false" ></l-clipper>
<button @tap="show = true">裁剪</button>
```
```js
export default {
components: {lClipper},
data() {
return {
imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
show: false,
url: '',
}
}
}
```
### 确定按钮颜色
样式变量名：`--l-clipper-confirm-color`
可放到全局样式的 `page` 里或节点的 `style`
```html
<l-clipper class="clipper" style="--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)" ></l-clipper>
```
```css
// css 中为组件设置 CSS 变量
.clipper {
--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
}
// 全局
page {
--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
}
```
### 使用插槽
共五个插槽 `cancel` 取消按钮、 `photo` 选择图片按钮、 `rotate` 旋转按钮、 `confirm` 确定按钮和默认插槽。
```html
<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper
v-if="show"
:isLockWidth="isLockWidth"
:isLockHeight="isLockHeight"
:isLockRatio="isLockRatio"
:isLimitMove="isLimitMove"
:isDisableScale="isDisableScale"
:isDisableRotate="isDisableRotate"
:isShowCancelBtn="isShowCancelBtn"
:isShowPhotoBtn="isShowPhotoBtn"
:isShowRotateBtn="isShowRotateBtn"
:isShowConfirmBtn="isShowConfirmBtn"
@success="url = $event.url; show = false"
@cancel="show = false" >
<!-- 四个基本按钮插槽 -->
<view slot="cancel">取消</view>
<view slot="photo">选择图片</view>
<view slot="rotate">旋转</view>
<view slot="confirm">确定</view>
<!-- 默认插槽 -->
<view class="tools">
<view>显示取消按钮
<switch :checked="isShowCancelBtn" @change="isShowCancelBtn = $event.target.value" ></switch>
</view>
<view>显示选择图片按钮
<switch :checked="isShowPhotoBtn" @change="isShowPhotoBtn = $event.target.value" ></switch>
</view>
<view>显示旋转按钮
<switch :checked="isShowRotateBtn" @change="isShowRotateBtn = $event.target.value" ></switch>
</view>
<view>显示确定按钮
<switch :checked="isShowConfirmBtn" @change="isShowConfirmBtn = $event.target.value" ></switch>
</view>
<view>锁定裁剪框宽度
<switch :checked="isLockWidth" @change="isLockWidth = $event.target.value" ></switch>
</view>
<view>锁定裁剪框高度
<switch :checked="isLockHeight" @change="isLockHeight = $event.target.value" ></switch>
</view>
<view>锁定裁剪框比例
<switch :checked="isLockRatio" @change="isLockRatio = $event.target.value" ></switch>
</view>
<view>限制移动范围
<switch :checked="isLimitMove" @change="isLimitMove = $event.target.value" ></switch>
</view>
<view>禁止缩放
<switch :checked="isDisableScale" @change="isDisableScale = $event.target.value" ></switch>
</view>
<view>禁止旋转
<switch :checked="isDisableRotate" @change="isDisableRotate = $event.target.value" ></switch>
</view>
</view>
</l-clipper>
<button @tap="show = true">裁剪</button>
```
```js
export default {
components: {lClipper},
data() {
return {
show: false,
url: '',
isLockWidth: false,
isLockHeight: false,
isLockRatio: true,
isLimitMove: false,
isDisableScale: false,
isDisableRotate: false,
isShowCancelBtn: true,
isShowPhotoBtn: true,
isShowRotateBtn: true,
isShowConfirmBtn: true
}
}
}
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ------------ | ---------------- | ------------ |
| image-url | 图片路径 | <em>string</em> | |
| quality | 图片的质量，取值范围为 [0, 1]，不在范围内时当作1处理 | <em>number</em> | `1` |
| source | `{album: '从相册中选择'}`key为图片来源类型，value为选项说明 | <em>Object</em> | |
| width | 裁剪框宽度，单位为 `rpx` | <em>number</em> | `400` |
| height | 裁剪框高度 | <em>number</em> | `400` |
| min-width | 裁剪框最小宽度 | <em>number</em> | `200` |
| min-height |裁剪框最小高度 | <em>number</em> | `200` |
| max-width | 裁剪框最大宽度 | <em>number</em> | `600` |
| max-height | 裁剪框最大宽度 | <em>number</em> | `600` |
| min-ratio | 图片最小缩放比 | <em>number</em> | `0.5` |
| max-ratio | 图片最大缩放比 | <em>number</em> | `2` |
| rotate-angle | 旋转按钮每次旋转的角度 | <em>number</em> | `90` |
| scale-ratio | 生成图片相对于裁剪框的比例， **比例越高生成图片越清晰** | <em>number</em> | `1` |
| is-lock-width | 是否锁定裁剪框宽度 | <em>boolean</em> | `false` |
| is-lock-height | 是否锁定裁剪框高度上 | <em>boolean</em> | `false` |
| is-lock-ratio | 是否锁定裁剪框比例 | <em>boolean</em> | `true` |
| is-disable-scale | 是否禁止缩放 | <em>boolean</em> | `false` |
| is-disable-rotate | 是否禁止旋转 | <em>boolean</em> | `false` |
| is-limit-move | 是否限制移动范围 | <em>boolean</em> | `false` |
| is-show-photo-btn | 是否显示选择图片按钮 | <em>boolean</em> | `true` |
| is-show-rotate-btn | 是否显示转按钮 | <em>boolean</em> | `true` |
| is-show-confirm-btn | 是否显示确定按钮 | <em>boolean</em> | `true` |
| is-show-cancel-btn | 是否显示关闭按钮 | <em>boolean</em> | `true` |
### 事件 Events
| 事件名 | 说明 | 回调 |
| ------- | ------------ | -------------- |
| success | 生成图片成功 | {`width`, `height`, `url`} |
| fail | 生成图片失败 | `error` |
| cancel | 关闭 | `false` |
| ready | 图片加载完成 | {`width`, `height`, `path`, `orientation`, `type`} |
| change | 图片大小改变时触发 | {`width`, `height`} |
| rotate | 图片旋转时触发 | `angle` |
## 常见问题
> 1、H5端使用网络图片需要解决跨域问题。<br>
> 2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！<br>
> 3、H5端生成图片是base64，有时显示只有一半可以使用原生标签`<IMG/>`<br>
> 4、IOS APP 请勿使用HBX2.9.3.20201014的版本！这个版本无法生成图片。<br>
> 5、APP端无成功反馈、也无失败反馈时，请更新基座和HBX。<br>
## 打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。<br>
![输入图片说明](https://images.gitee.com/uploads/images/2020/1122/222521_bb543f96_518581.jpeg "微信图片编辑_20201122220352.jpg")
\ No newline at end of file
pages/ucenter/userinfo/limeClipper/index.styl 已删除 100644 → 0
浏览文件 @ 92cd08db
$edge-border-width = 6rpx
.flex-auto
flex auto
.bg-transparent
background-color rgba(0, 0, 0, 0.9)
transition-duration 0.35s
.l-clipper
width 100vw
height calc( 100vh - var(--window-top))
background-color rgba(0, 0, 0, 0.9)
position fixed
top var(--window-top)
left 0
z-index 1
&-mask
position relative
z-index 2
pointer-events: none
&__content
pointer-events: none;
position absolute
border 1rpx solid rgba(255,255,255,.3)
box-sizing border-box
box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 80vh;
background: transparent;
&::before,&::after
content ''
position absolute
border 1rpx dashed rgba(255,255,255,.3)
&::before
width 100%
top 33.33%
height 33.33%
border-left none
border-right none
&::after
width 33.33%
left 33.33%
height 100%
border-top none
border-bottom none
&__edge
position absolute
// left 6rpx
width 34rpx
height 34rpx
border $edge-border-width solid #ffffff
pointer-events auto
&::before
content ''
position absolute
width 40rpx
height 40rpx
background-color transparent
&:nth-child(1)
left: - $edge-border-width
top: - $edge-border-width
border-bottom-width 0 !important
border-right-width 0 !important
&:before
top -50%
left -50%
&:nth-child(2)
right: - $edge-border-width
top: - $edge-border-width
border-bottom-width 0 !important
border-left-width 0 !important
&:before
top -50%
left 50%
&:nth-child(3)
left: - $edge-border-width
bottom: - $edge-border-width
border-top-width 0 !important
border-right-width 0 !important
&:before
bottom -50%
left -50%
&:nth-child(4)
right: - $edge-border-width
bottom: - $edge-border-width
border-top-width 0 !important
border-left-width 0 !important
&:before
bottom -50%
left 50%
&-image
width 100%
border-style none
position absolute
top 0
left 0
z-index 1
-webkit-backface-visibility hidden
backface-visibility hidden
transform-origin center
&-canvas
position fixed
z-index 10
left -200vw
top -200vw
pointer-events none
&-tools
position fixed
left 0
bottom 10px
width 100%
z-index 99
color #fff
&__btns
font-weight bold
display flex
align-items center
justify-content space-between
width 100%
padding 20rpx 40rpx
box-sizing border-box
.cancel
width 112rpx
height 60rpx
text-align center
line-height 60rpx
.confirm
width 112rpx
height 60rpx
line-height 60rpx
background-color #07c160
border-radius 6rpx
text-align center
image
display block
width 60rpx
height 60rpx
.l-clipper-tools__btns
flex-direction row
\ No newline at end of file
pages/ucenter/userinfo/userinfo.vue
浏览文件 @ e0a62a01
......@@ -58,7 +58,7 @@
}
})
// #endif
// #ifndef APP-PLUS
// #ifndef APP-PLUS
this.bindMobileBySmsCode()
//...去用验证码绑定
// #endif
......@@ -69,37 +69,37 @@
"univerifyStyle": this.univerifyStyle,
success: async e => {
console.log(e.authResult);
this.request('user-center/bind_mobile_by_univerify',
this.request('user-center/bind_mobile_by_univerify',
e.authResult,
result=>
{
console.log(result);
if(result.code===0){
this.setUserInfo({"mobile":result.mobile})
uni.closeAuthView()
}else{
uni.showModal({
content: JSON.stringify(result.msg),
showCancel: false,
complete() {
uni.closeAuthView()
}
});
}
}
result=>
{
console.log(result);
if(result.code===0){
this.setUserInfo({"mobile":result.mobile})
uni.closeAuthView()
}else{
uni.showModal({
content: JSON.stringify(result.msg),
showCancel: false,
complete() {
uni.closeAuthView()
}
});
}
}
)
},
fail: (err) => {
console.log(err);
if(err.code=='30002'){
this.bindMobileBySmsCode()
}
fail: (err) => {
console.log(err);
if(err.code=='30002'){
this.bindMobileBySmsCode()
}
}
})
},
bindMobileBySmsCode() {
uni.navigateTo({
url:'/pages/ucenter/edit/bind-mobile/bind-mobile'
uni.navigateTo({
url:'/pages/ucenter/userinfo/bind-mobile/bind-mobile'
})
},
setNickname(nickname) {
......@@ -141,7 +141,7 @@
}
// 剪裁并上传头像
uni.navigateTo({
url: '/pages/ucenter/edit/uploadCutImageToUnicloud?path=' +
url: '/pages/ucenter/userinfo/uploadCutImageToUnicloud?path=' +
res
.tempFilePaths[0] +
`&options=${JSON.stringify(options)}`,
......@@ -186,12 +186,12 @@
width: 750rpx;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-items: center;
height: 60px;
}
.avatarUrl {
width: 50px;
height: 50px;
height: 50px;
border-radius: 6px;
}
</style>
}
</style>
uni_modules/uni-id-users/pages/uni-id-users/edit.vue
浏览文件 @ e0a62a01
<template>
<view class="uni-container">
<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="avatar">
<template>
<view class="avatar-box">
<image class="avatar-img" :src="formData.avatar || '/static/uni-center/logo.png'" @click="chooseImg" mode="aspectFill"></image>
</view>
</template>
<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="avatar">
<template>
<view class="avatar-box">
<image class="avatar-img" :src="formData.avatar || '/static/uni-center/logo.png'" @click="chooseImg" mode="aspectFill"></image>
</view>
</template>
</uni-forms-item>
<!-- <uni-forms-item name="gender" label="性别" required>
<uni-data-checkbox v-model="formData.gender" :localdata="formOptions.gender_localdata" />
......@@ -29,7 +29,7 @@
validator
} from '../../js_sdk/validator/uni-id-users.js';
import {
mapMutations,
mapMutations,
mapGetters
} from 'vuex';
const db = uniCloud.database();
......@@ -72,47 +72,47 @@
...getValidator(["avatar", "gender", "nickname"])
}
}
},
computed:{
...mapGetters({
userInfo:'user/info'
})
},
computed:{
...mapGetters({
userInfo:'user/info'
})
},
onLoad(e) {
let id = uni.getStorageSync('uni_id_uid') || this.userInfo._id;
let id = uni.getStorageSync('uni_id_uid') || this.userInfo._id;
this.formDataId = id
this.getDetail(id)
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
...mapMutations({
setUserInfo:'user/login'
}),
// 选择图片
chooseImg(){
uni.chooseImage({
count:1,
success:(res)=> {
// 头像剪裁尺寸
let options = {
width:600,
height:600
}
// 剪裁并上传头像
uni.navigateTo({
url:'/pages/ucenter/edit/uploadCutImageToUnicloud?path=' + res.tempFilePaths[0] + `&options=${JSON.stringify(options)}`,
animationType:"fade-in",
events:{
uploadAvatarAfter:({url})=>{
this.formData.avatar = url;
this.submitForm({avatar:url});
}
}
});
}
})
methods: {
...mapMutations({
setUserInfo:'user/login'
}),
// 选择图片
chooseImg(){
uni.chooseImage({
count:1,
success:(res)=> {
// 头像剪裁尺寸
let options = {
width:600,
height:600
}
// 剪裁并上传头像
uni.navigateTo({
url:'/pages/ucenter/userinfo/uploadCutImageToUnicloud?path=' + res.tempFilePaths[0] + `&options=${JSON.stringify(options)}`,
animationType:"fade-in",
events:{
uploadAvatarAfter:({url})=>{
this.formData.avatar = url;
this.submitForm({avatar:url});
}
}
});
}
})
},
/**
* 触发表单提交
......@@ -121,7 +121,7 @@
uni.showLoading({
mask: true
})
this.$refs.form.submit().then((res) => {
this.$refs.form.submit().then((res) => {
console.log(res);
this.submitForm(res)
}).catch((errors) => {
......@@ -129,13 +129,13 @@
})
},
submitForm(value) {
submitForm(value) {
// 使用 clientDB 提交数据
db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
uni.showToast({
icon: 'none',
title: '修改成功'
})
})
this.setUserInfo(value);
setTimeout(() => uni.navigateBack(), 500)
}).catch((err) => {
......@@ -203,7 +203,7 @@
.uni-button-group {
margin-top: 50px;
display: flex;
justify-content: center;
justify-content: center;
align-items: center;
}
......@@ -214,21 +214,21 @@
border-radius: 4px;
line-height: 1;
margin: 0;
}
.avatar-box{
width: 700rpx;
height: 200rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.avatar-img{
width: 150rpx;
height: 150rpx;
border-radius: 75rpx;
border: #F8F8F8 solid 3px;
}
</style>
.avatar-box{
width: 700rpx;
height: 200rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.avatar-img{
width: 150rpx;
height: 150rpx;
border-radius: 75rpx;
border: #F8F8F8 solid 3px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或