admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6 from Moonofweisheng/develop

Browse Source 
合并演示项目新增用户隐私保护指引的处理
This commit is contained in:
weisheng 2023-08-25 00:21:41 +08:00 committed by GitHub
commit ecc1275936
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 199 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/component/actionSheet.md
View File

@ -4,7 +4,7 @@
## 基本用法
通过 `show` 属性设置显示隐藏，监听 `close` 事件，隐藏菜单。
通过 `v-model` 设置显示隐藏。
`actions` 类型为 `Array`，数组内部对象结构如下：
@ -17,7 +17,7 @@
```html
<wd-toast />
<wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" @select="select" />
<wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
```
```typescript
@ -56,7 +56,7 @@ function select({ item, index }) {
```html
<wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" />
<wd-action-sheet v-model="show" :actions="actions" @close="close" />
```
```typescript
@ -88,7 +88,7 @@ function close() {
设置 `cancel-text` 取消按钮文案，展示取消按钮。
```html
<wd-action-sheet :show="show" :actions="actions" @close="close" cancel-text="取消" />
<wd-action-sheet v-model="show" :actions="actions" @close="close" cancel-text="取消" />
```
## 自定义单行面板
@ -102,7 +102,7 @@ function close() {
```html
<wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :panels="panels" @close="close" @select="select" />
<wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select" />
```
```typescript
@ -138,7 +138,7 @@ function select({ item, index }) {
```html
<wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :panels="panels" @close="close" @select="select" />
<wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select" />
```
```typescript
@ -177,7 +177,7 @@ function select({ item, index }) {
设置 `title` 展示标题。
```html
<wd-action-sheet :show="show" title="标题" @close="close">
<wd-action-sheet v-model="show" title="标题" @close="close">
<view style="padding: 15px 15px 150px 15px;">内容</view>
</wd-action-sheet>
```
@ -186,7 +186,7 @@ function select({ item, index }) {
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | ----------------------------------------------------------------------------- | ------- | ------ | ------- | -------- |
| show | 设置菜单显示隐藏 | boolean | - | - | - |
| v-model | 设置菜单显示隐藏 | boolean | - | - | - |
| actions | 菜单选项 | array | - | [] | - |
| panels | 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示 | array | - | [] | - |
| title | 标题 | string | - | - | - |

47
src/components/wd-privacy-popup/index.scss Normal file
View File

@ -0,0 +1,47 @@
@import '@/uni_modules/wot-design-uni/components/wd-button/index.scss';
:deep(.wd-privacy-popup) {
width: 600rpx;
padding: 0 24rpx;
box-sizing: border-box;
border-radius: 32rpx;
overflow: hidden;
}
.wd-privacy-popup {
&__header {
width: 100%;
height: 128rpx;
line-height: 128rpx;
color: rgba(0, 0, 0, 0.85);
font-size: 30rpx;
padding: 0 12rpx;
box-sizing: border-box;
}
&__container {
width: 100%;
box-sizing: border-box;
padding: 0 12rpx;
margin-bottom: 32rpx;
font-size: 28rpx;
line-height: 1.8;
color: #3e3e3e;
text-align: left;
font-weight: 550;
&-protocol {
color: #4d80f0;
}
}
&__footer {
display: flex;
justify-content: space-between;
padding-bottom: 36rpx;
button {
border: none;
outline: none;
}
}
}

119
src/components/wd-privacy-popup/wd-privacy-popup.vue Normal file
View File

@ -0,0 +1,119 @@
<template>
<view>
<wd-popup v-model="showPopup" custom-class="wd-privacy-popup">
<view class="wd-privacy-popup__header">
<!--标题-->
<view class="wd-picker__title">{{ title }}</view>
</view>
<view class="wd-privacy-popup__container">
<text>{{ desc }}</text>
<text class="wd-privacy-popup__container-protocol" @click="openPrivacyContract">{{ protocol }}</text>
<text>{{ subDesc }}</text>
</view>
<view class="wd-privacy-popup__footer">
<button class="wd-privacy-popup__footer-disagree wd-button is-block is-round is-medium is-plain" id="disagree-btn" @click="handleDisagree">
拒绝
</button>
<button
class="wd-privacy-popup__footer-agree wd-button is-primary is-block is-round is-medium"
id="agree-btn"
open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgree"
>
同意
</button>
</view>
</wd-popup>
</view>
</template>
<script lang="ts">
export default {
name: 'wd-privacy-popup',
options: {
virtualHost: true,
addGlobalClass: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue'
interface Props {
title?: string // 标题
desc?: string // 描述
subDesc?: string // 字描述
protocol?: string // 协议名称
}
const props = withDefaults(defineProps<Props>(), {
title: '用户隐私保护提示',
desc: '感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意',
subDesc: '。当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。',
protocol: '《用户隐私保护指引》'
})
const showPopup = ref<boolean>(false) // 是否展示popup
const privacyResolves = ref(new Set()) // onNeedPrivacyAuthorization的reslove
const privacyHandler = (resolve: any) => {
showPopup.value = true
privacyResolves.value.add(resolve)
}
onBeforeMount(() => {
if ((wx as any).onNeedPrivacyAuthorization) {
;(wx as any).onNeedPrivacyAuthorization((resolve: any) => {
if (typeof privacyHandler === 'function') {
privacyHandler(resolve)
}
})
}
})
function handleAgree(e) {
showPopup.value = false
privacyResolves.value.forEach((resolve: any) => {
resolve({
event: 'agree',
buttonId: 'agree-btn'
})
})
privacyResolves.value.clear()
}
/**
* 拒绝隐私协议
* @param e
*/
function handleDisagree(e) {
showPopup.value = false
privacyResolves.value.forEach((resolve: any) => {
resolve({
event: 'disagree'
})
})
privacyResolves.value.clear()
}
/**
* 打开隐私协议
*/
function openPrivacyContract() {
;(wx as any).openPrivacyContract({
success: (res) => {
console.log('openPrivacyContract success')
},
fail: (res) => {
console.error('openPrivacyContract fail', res)
}
})
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>

10
src/pages/actionSheet/Index.vue
View File

@ -4,27 +4,27 @@
<view>
<demo-block title="基本用法">
<wd-button @click="showActions1">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" />
<wd-action-sheet v-model="show" :actions="actions" />
</demo-block>
<demo-block title="选项状态">
<wd-button @click="showActions2">弹出菜单</wd-button>
</demo-block>
<demo-block title="取消按钮">
<wd-button @click="showActions3">弹出菜单</wd-button>
<wd-action-sheet :show="show1" :actions="actions" cancel-text="取消" @close="close1" />
<wd-action-sheet v-model="show1" :actions="actions" cancel-text="取消" @close="close1" />
</demo-block>
<demo-block title="自定义面板单行">
<wd-button @click="showActions4">弹出菜单</wd-button>
<wd-action-sheet :show="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" />
<wd-action-sheet v-model="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" />
</demo-block>
<demo-block title="自定义面板多行">
<wd-button @click="showActions5">弹出菜单</wd-button>
<wd-action-sheet :show="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" />
<wd-action-sheet v-model="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" />
</demo-block>
<demo-block title="标题">
<wd-button @click="showActions6">弹出菜单</wd-button>
</demo-block>
<wd-action-sheet :show="show4" title="标题" @close="close4" :cancelText="cancelText">
<wd-action-sheet v-model="show4" title="标题" @close="close4" :cancelText="cancelText">
<view style="padding: 15px 15px 150px 15px">内容</view>
</wd-action-sheet>
</view>

5
src/pages/configProvider/Index.vue
View File

@ -2,7 +2,7 @@
<page-wraper>
<wd-message-box />
<wd-toast />
<wd-action-sheet :show="showAction" :actions="actions" @close="closeActions" />
<wd-action-sheet v-model="showAction" :actions="actions" />
<wd-cell-group>
<wd-cell title="弹出菜单" clickable @click="showActions"></wd-cell>
@ -201,9 +201,6 @@ const phone = ref<string>('')
const toast = useToast()
const messageBox = useMessage()
function closeActions() {
showAction.value = false
}
function showActions() {
showAction.value = true
actions.value = [

9
src/pages/upload/Index.vue
View File

@ -1,5 +1,8 @@
<template>
<page-wraper>
<!-- #ifdef MP-WEIXIN -->
<wd-privacy-popup></wd-privacy-popup>
<!-- #endif -->
<wd-message-box></wd-message-box>
<wd-toast id="wd-toast"></wd-toast>
<demo-block title="基本用法">
@ -126,6 +129,12 @@ const beforeRemove = ({ file, fileList, resolve }) => {
})
}
function getPhoneNumber(e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)
}
function handleSuccess(event) {
console.log('成功', event.detail)
}

9
src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
View File

@ -93,7 +93,7 @@ interface Panel {
interface Props {
customClass?: string
customHeaderClass?: string
show: boolean
modelValue: boolean
actions?: Array<Action>
panels?: Array<Panel>
title?: string
@ -109,7 +109,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
customClass: '',
customHeaderClass: '',
show: false,
modelValue: false,
actions: () => [] as Array<Action>,
panels: () => [] as Array<Panel>,
closeOnClickAction: true,
@ -132,14 +132,14 @@ watch(
)
watch(
() => props.show,
() => props.modelValue,
(newValue) => {
showPopup.value = newValue
},
{ deep: true, immediate: true }
)
const emit = defineEmits(['select', 'clickmodal', 'cancel', 'closed', 'close', 'open', 'opened'])
const emit = defineEmits(['select', 'clickmodal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
function isArray() {
return props.panels.length && !(props.panels[0] instanceof Array)
@ -179,6 +179,7 @@ function handleCancel() {
close()
}
function close() {
emit('update:modelValue', false)
emit('close')
}
function handleOpen() {

1
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -18,7 +18,6 @@
class="month"
:type="type"
:date="item.date"
:data-date="item.date"
:value="value"
:min-date="minDate"
:max-date="maxDate"

2
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
View File

@ -1,7 +1,7 @@
<template>
<wd-toast selector="wd-year" />
<view class="wd-year year" :data-date="date">
<view class="wd-year year">
<view class="wd-year__title">{{ yearTitle(date) }}</view>
<view class="wd-year__months">
<view

1
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
View File

@ -7,7 +7,6 @@
class="year"
:type="type"
:date="item.date"
:data-date="item.date"
:value="value"
:min-date="minDate"
:max-date="maxDate"

4
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -25,7 +25,7 @@
</view>
</view>
<wd-action-sheet
:show="pickerShow"
v-model="pickerShow"
:duration="250"
:close-on-click-modal="closeOnClickModal"
:safe-area-inset-bottom="safeAreaInsetBottom"
@ -54,7 +54,7 @@
{{ item.text }}
</wd-tag>
</view>
<wd-icon custom-class="wd-calendar__close" name="add" @tap="close" />
<wd-icon custom-class="wd-calendar__close" name="add" @click="close" />
</view>
<view
v-if="inited"

2
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
View File

@ -25,7 +25,7 @@
</view>
</view>
<wd-action-sheet
:show="pickerShow"
v-model="pickerShow"
:duration="250"
:title="title || '请选择'"
:close-on-click-modal="closeOnClickModal"

2
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
View File

@ -27,7 +27,7 @@
</view>
</view>
<wd-action-sheet
:show="pickerShow"
v-model="pickerShow"
:duration="250"
:title="title || '请选择'"
:close-on-click-modal="closeOnClickModal"