yovinchen/sl-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
shuhongfan
2023-09-04 16:40:17 +08:00
commit cf5ac25c14
8267 changed files with 1305066 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
project-wl-siji-uniapp-vue3/components/Card/index.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<!-- 公用卡片 -->
<view class="card" @click="goDetailsSucc()">
<view class="topCont"> <text>任务编号：{{item.transportTaskId}}</text> <text v-if="item.isDelay == 1 && type == 0" class="label">已延期</text> </view>
<view class="addrCont">
<view class="startAddr">{{item.startAddress}}</view>
<view class="endAddr">{{item.endAddress}}</view>
</view>
<view class="botCont" v-show="type == 0">
<view class="timeCont">
<view class="tit"> <text>提货时间</text> </view>
<view class="time"> <text>{{item.planDepartureTime}}</text> </view>
</view>
<view class="ButCont">
<text class="butRed" v-if="item.enablePickUp" @click="goDetails(item)" >提货</text>
<text class="butRed butDis" v-else >提货</text>
</view>
</view>
<view class="botCont" v-show="type == 1">
<view class="timeCont">
<view class="tit"> <text>预计到达时间 </text> </view>
<view class="time"> <text>{{item.planArrivalTime}}</text> </view>
</view>
<view class="ButCont" v-if="item.status <= 3 "> <text class="butRed" @click="goDetails(item)" >交付</text> </view>
<view class="ButCont" v-if="item.status == 4 "> <text class="butRed" @click="goDetails(item)" >回车登记</text> </view>
</view>
<view class="botCont " v-show="type == 2">
<view class="timeCont finish">
<view class="tit"> <text>交货时间</text> </view>
<view class="time"> <text>{{item.actualArrivalTime}}</text> </view>
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 获取父组件值、方法
const props = defineProps({
data: {
type: Object,
default: () => {}
},
type: {
type: Number,
default: 0
},
src:{
type: String,
default: ''
}
});
const item = ref({...props.data})
// 去往详情页
function goDetails(item){
if(props.src){
uni.navigateTo({
url: props.src,
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
}
});
}
}
// 已完成详情
function goDetailsSucc(){
if (props.src && props.type == 2){
uni.navigateTo({
url: props.src,
// success: function(res) {
// // 通过eventChannel向被打开页面传送数据
// res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
// }
});
}
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.card{
padding: 30rpx 40rpx;
margin: 30rpx 0;
border-radius: 20rpx;
background: var(--neutral-color-white);
.topCont{
display: flex;
justify-content: space-between;
font-weight: 500;
line-height: 60rpx;
font-size: 32rpx;
color: #2A2929;
margin-bottom: 20rpx;
.label{
display: inline-block;
padding: 16rpx 10rpx 12rpx 10rpx;
border: 2rpx solid #EF4F3F;
border-radius: 6rpx;
font-weight: 400;
font-size: 28rpx;
line-height: 28rpx;
color: #EF4F3F;
letter-spacing: 0.32rpx;
}
}
.addrCont{
font-weight: 400;
font-size: 28rpx;
color: #818181;
letter-spacing: 0.32rpx;
padding-bottom: 40rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #EEEEEE;
position: relative;
&:before{
position: absolute;
left: 18rpx;
color:var(--neutral-color-white);
text-align: center;
content: '';
display: inline-block;
width: 0px;
height: 56%;
border-left: dashed 2px #D9D9D9;
border-radius: 11px;
}
.startAddr{
padding-left: 66rpx;
position: relative;
margin-bottom: 20rpx;
line-height: 44rpx;
&:before{
position: absolute;
font-size: 22rpx;
left: 0;
color:var(--neutral-color-white);
text-align: center;
content: '起';
display: inline-block;
width: 22px;
height: 22px;
background: #2A2929;
border-radius: 11px;
}
}
.endAddr{
padding-left: 66rpx;
position: relative;
line-height: 44rpx;
// height: 44rpx;
// overflow: hidden;
&:before{
font-size: 22rpx;
position: absolute;
left: 0;
color: var(--neutral-color-white);
text-align: center;
content: '止';
display: inline-block;
width: 22px;
height: 22px;
background: #EF4F3F;
border-radius: 11px;
}
}
}
.botCont{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
.timeCont{
.tit{
font-weight: 400;
font-size: 28rpx;
margin-bottom: 20rpx;
color: #818181;
}
.time{
font-size: 28rpx;
color: #2A2929;
}
}
.finish{
display: flex;
align-items: center;
.tit{
margin-bottom: 0;
margin-right: 18rpx;
}
}
.butRed, .butDis{
display: inline-block;
min-width: 80px;
line-height: 32px;
background: #EF4F3F;
border-radius: 16px;
font-size: var(--font-size-14);
text-align: center;
color: var(--neutral-color-white)
}
.butDis{
background: #DEDEDE;
}
.butAsh{
display: inline-block;
min-width: 80px;
line-height: 32px;
background: #EF4F3F;
border-radius: 16px;
text-align: center;
color: var(--neutral-color-white)
}
}
}
</style>

169
project-wl-siji-uniapp-vue3/components/CardCont/index.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<!-- 公用卡片 - 框架 -->
<view class="cardCont">
<view class="topCont" @click="openHandle()">
<view class="">
<text class="title">{{title}}</text>
<text class="label" v-show="label">{{label}}</text>
</view>
<view v-if="type == 'redio'" class="redioActionCont">
<image class="videoIcon" mode="aspectFit" :src="isOpen ? redioIconTrue : redioIconFalse"></image> <text>是</text>
<image class="videoIcon" mode="aspectFit" :src="!isOpen ? redioIconTrue : redioIconFalse"></image> <text>否</text>
</view>
<view v-else class="openHandle">
<image v-show="!isOpen" class="cardsIcon" mode="aspectFit" src="@/static/sj_add.png"></image>
<image v-show="isOpen" class="cardsIcon" mode="aspectFit" src="@/static/sj_red.png"></image>
</view>
</view>
<view class="content" :style="{height: (isOpen?height:0) +'px'}" ref="contEl">
<view :id="elId" style="padding-top: 20rpx;">
<slot></slot>
</view>
</view>
</view>
<!-- end -->
</template>
<script>
export default {
data() {
const elId = `wl_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
redioIconTrue: './../../static/sj_redio_true.png',
redioIconFalse: './../../static/sj_redio_false.png',
isOpen: this.open,
contHt: 'auto',
height: '',
elId,
}
},
props: {
// 列表标题
title: {
type: String,
default: ''
},
// 分类 默认加减号 的样式 redio 为单选形式
type: {
type: String,
default: ''
},
// 分类为redio的时候 可以设置 对应参数
redioKey: {
type: String,
default: 'redioKey'
},
//标题后面的说明文字
label: {
type: String,
default: ''
},
// 是否展开
open: {
type: Boolean,
default: false
},
},
updated(e) {
this.$nextTick(() => {
this.getCollapseHeight()
})
},
methods: {
// 展开关闭操作
openHandle(){
this.isOpen = this.isOpen ? false : true;
if(this.type == 'redio'){
let param = {key: this.redioKey, value: Number(this.isOpen) + 1}
this.$emit('redioChange',param)
}
},
// 获取内部容器的高度
getCollapseHeight(type, index = 0) {
const views = uni.createSelectorQuery().in(this)
views
.select(`#${this.elId}`)
.fields({
size: true
}, data => {
// TODO 百度中可能获取不到节点信息 ，需要循环获取
if (index >= 10) return
if (!data) {
index++
this.getCollapseHeight(false, index)
return
}
// #ifdef APP-NVUE
this.height = data.height + 1
// #endif
// #ifndef APP-NVUE
this.height = data.height
// #endif
this.isheight = true
})
.exec()
}
},
mounted() {
this.getCollapseHeight()
}
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.cardCont{
padding: 30rpx 40rpx;
margin: 30rpx 0;
border-radius: 20rpx;
background: var(--neutral-color-white);
.topCont{
display: flex;
justify-content: space-between;
font-weight: 500;
line-height: 60rpx;
font-size: 32rpx;
color: var(--neutral-color-main);
align-items: center;
// transition: 500ms;
// transform: rotate(0deg);
.title{
font-weight: 500;
font-size: 32rpx;
color: var(--neutral-color-main);
}
.label{
font-weight: 400;
padding-left: 20rpx;
font-size:var(--font-size-12);
color:var(--neutral-color-font);
}
.redioActionCont{
display: flex;
align-items: center;
.videoIcon{
width: 64rpx;
height: 64rpx;
}
}
.cardsIcon{
width: 48rpx;
height: 48rpx;
}
.openHandle{
display: flex;
align-items: center;
}
.open{
// transition: 500ms;
transform: rotate(180deg);
}
}
.content{
overflow: hidden;
transition-property: height, border-bottom-width;
transition-duration: 0.3s;
will-change: height;
}
}
</style>

56
project-wl-siji-uniapp-vue3/components/DetailsNav/index.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<!-- 公用 详情Nav -->
<view class="detailsHead">
<view class="head">
<!-- 详情页-返回头部 -->
<image style="width: 88rpx; height: 88rpx;" src="@/static/sj_back.png" @click="backHandle()" mode=""></image>
<view class="title">{{title}}</view>
<!-- end -->
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 获取父组件值、方法
const props = defineProps({
title: {
type: String,
default: ''
}
});
// ------定义变量------
const searchVal = ref('');
// ------方法------
// 返回上一页
const backHandle = () => {
uni.navigateBack({
delta: 1,
})
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
// 导航
.detailsHead {
.head{
padding-top: 10rpx;
/* #ifdef APP-PLUS */
padding-top: 44rpx;
/* #endif */
background-color: var(--neutral-color-white);
display: flex;
justify-content: space-between;
text-align: center;
.title{
flex: 1;
padding-right:90rpx;
line-height: 88rpx;
font-weight: 600;
font-size: 36rpx;
color: #2A2929;
}
}
}
</style>

31
project-wl-siji-uniapp-vue3/components/EmptyPage/index.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<view class="emptyBox">
<image src="../../static/sj_nodata.png" class="emptyImage" mode=""></image>
<view><text>{{emptyInfo}}</text></view>
</view>
</template>
<script setup>
// 获取父组件值、方法
const props = defineProps({
emptyInfo:{
type:String,
default: '',
}
})
</script>
<style>
@import url('@/styles/theme.scss');
.emptyBox{
padding: 288rpx 0 80rpx;
text-align: center;
color: var(--neutral-color-font);
font-size: var(--font-size-12);
}
.emptyImage {
width: 400rpx !important;
height: 240rpx !important;
}
</style>

88
project-wl-siji-uniapp-vue3/components/Footer/index.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<!-- 公用底部 -->
<view class="footBox">
<view class="uni-tabbar">
<view class="tabbar-item" :class="currentPage === index ? 'active' : ''" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item, index)">
<view v-if="true" class="uni-tabbar__bd">
<view class="uni-tabbar__icon" v-if="item.pagePath !== ''">
<img v-if="currentPage === index" class="item-img" :src="item.selectedIconPath" />
<img v-else class="item-img" :src="item.iconPath" />
</view>
<view v-else class="qrCode"><img :src="item.iconPath" /></view>
</view>
<view class="uni-tabbar__label" v-if="item.text !== ''">{{ item.text }}</view>
</view>
</view>
</view>
<!-- end -->
</template>
<script>
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
export default {
name: 'Footer',
components: {},
// 接收父组件的值
props: {
pagePath: {
type: String,
required: true
}
},
setup: props => {
const store = useStore();
const page = ref('contact');
const showPage = ref(false);
const containerHeight = ref(400);
const currentPage = ref(store.state.footStatus);
// 底部列表配置
const tabbar = ref([
{
pagePath: '/pages/index/index',
iconPath: 'static/sj_test_nor.png',
selectedIconPath: 'static/sj_test_sel.png',
text: '任务'
},
{
pagePath: '/pages/message/index',
iconPath: 'static/sj_mess_nor.png',
selectedIconPath: 'static/sj_mess_sel.png',
text: '消息'
},
{
pagePath: '/pages/user/index',
iconPath: 'static//sj_mine_nor.png',
selectedIconPath: 'static//sj_mine_sel.png',
text: '我的'
}
]);
// 切换事件
const changeTab = (item, index) => {
if (item.text !== '') {
currentPage.value = index;
store.commit('setFootStatus', index)
uni.redirectTo({
url: item.pagePath,
success: e => {},
fail: () => {}
});
}
};
return {
// ------变量------
page,
showPage,
containerHeight,
currentPage,
tabbar,
// ------方法------
changeTab
};
}
};
</script>
<style lang="scss" scoped>
.tabbar {
}
</style>

92
project-wl-siji-uniapp-vue3/components/ImageUpload/index.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<!-- 公用卡片 -->
<view class="upPicCont">
<view class="title">{{title}}</view>
<uni-file-picker
v-model="cargoPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="select" ></uni-file-picker>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
upload
} from '@/pages/api/index.js'
const cargoPicture = ref([])
const emit = defineEmits(['uploadImage'])
// 获取父组件值、方法
const props = defineProps({
title:{
type: String,
default: '请拍照上传货品照片'
},
tit:{
type: String,
default: ''
}
});
// 图片上传 - 请求
async function uploadHande(e){
await upload(e).then(res => {
if (res.code === 200 && res.data) {
emit('uploadImage', {key: props.tit, value: res.data})
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
}).catch(err => {
uni.showToast({
title: '图片上传失败！请联系管理员',
duration: 1000,
icon: 'none'
});
});
}
// 图片上传
async function select(e){
cargoPicture.value = []
const tempFiles = e.tempFiles[0]
if (tempFiles.size < 1024 * 5 && (tempFiles.extname == 'png' || tempFiles.extname == 'jpg' || tempFiles.extname == 'jpeg' || tempFiles.extname == 'gif')) {
uploadHande(e)
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none'
});
}
}
onMounted(()=>{
})
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.upPicCont{
margin-bottom: 32rpx;
padding-top: 30rpx;
.title{
font-weight: 400;
font-size: var(--font-size-14);
color: var(--neutral-color-font);
margin-bottom: 32rpx;
}
.file-picker__box-content{
border:none;
background: var(--neutral-color-cancel);
}
}
</style>

93
project-wl-siji-uniapp-vue3/components/Nav/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<!-- 公用nav -->
<view class="navBox">
<view class="nav-bg">
<!-- 头部自定义导航 -->
<text>任务</text>
<!-- end -->
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 获取父组件值、方法
const props = defineProps({
newVal: {
type: String,
default: ''
}
});
// ------定义变量------
const searchVal = ref('');
// ------方法------
const handleSearch = e => {
// 跳转到搜索页面
uni.navigateTo({
url: '/pages/search/index'
});
};
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
// 导航
.nav-bg {
background-image: linear-gradient(205deg, #f25c4d 2%, #e52d21 100%, #e52d21 100%);
line-height: 80rpx;
text-align: center;
color:var(--neutral-color-white);
::v-deep .uni-navbar__header-btns-left,
::v-deep .uni-navbar__header-btns-right {
display: none !important;
}
// 重置首页搜索图标样式
::v-deep .uni-icons {
background: url(@/static/search.png) 50% 50% no-repeat;
background-size: contain;
}
// 重置首页搜索placeholder样式
::v-deep .uni-input-placeholder {
color: #f9c5c0;
}
// 重置首页搜索input样式
::v-deep .uni-input-input {
background: rgba(250, 250, 250, 0.24);
color: #f9c5c0;
}
.uni-badge-absolute {
margin-left: 40px;
}
.rightText {
text-align: center;
padding-left: 28rpx;
}
.box {
width: 34rpx;
height: 34rpx;
// background: url(@/static/icon012.png) no-repeat;
background-size: contain;
}
.box-text {
text-align: center;
color: var(--neutral-color-white);
font-size: 12px;
}
::v-deep .uni-badge--error {
height: 24rpx;
line-height: 24rpx;
background: var(--neutral-color-white);
border-radius: 11rpx;
font-size: 18rpx;
color: #f25c4d;
right: -18px !important;
top: -3px !important;
}
.newInfo {
color: var(--neutral-color-white);
font-size: 20rpx;
line-height: 20rpx;
}
}
</style>

60
project-wl-siji-uniapp-vue3/components/Popup/changelog.md Normal file
View File

@@ -0,0 +1,60 @@
## 1.7.9（2022-04-02）
- 修复 弹出层内部无法滚动的bug
## 1.7.8（2022-03-28）
- 修复 小程序中高度错误的bug
## 1.7.7（2022-03-17）
- 修复 快速调用open出现问题的Bug
## 1.7.6（2022-02-14）
- 修复 safeArea 属性不能设置为false的bug
## 1.7.5（2022-01-19）
- 修复 isMaskClick 失效的bug
## 1.7.4（2022-01-19）
- 新增 cancelText \ confirmText 属性 ，可自定义文本
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
## 1.7.3（2022-01-13）
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2（2021-11-26）
- 优化 组件示例
## 1.7.1（2021-11-26）
- 修复 vuedoc 文字错误
## 1.7.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
## 1.6.2（2021-08-24）
- 新增 支持国际化
## 1.6.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.6.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.0（2021-06-23）
- 新增 mask-click 遮罩层点击事件
## 1.4.5（2021-06-22）
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.4（2021-06-18）
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.3（2021-06-08）
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容，再点击遮罩无法关闭的Bug
## 1.4.2（2021-05-12）
- 新增 组件示例地址
## 1.4.1（2021-04-29）
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
## 1.4.0 （2021-04-29）
- 新增 type 属性的 left\right 值，支持左右弹出
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性，是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能，优化动画卡顿问题
- 优化 更简单的组件自定义方式
## 1.2.9（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.2.8（2021-02-05）
- 调整为uni_modules目录规范
## 1.2.7（2021-02-05）
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端

45
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-dialog/keypress.js Normal file
View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif

271
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-dialog/uni-popup-dialog.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" v-if="title" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
</view>
<view v-if="mode === 'base'" class="uni-dialog-content">
<slot>
<text class="uni-dialog-content-text">{{content}}</text>
</slot>
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits:['confirm','close'],
props: {
value: {
type: [String, Number],
default: ''
},
placeholder: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'error'
},
mode: {
type: String,
default: 'base'
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
},
cancelText:{
type: String,
default: ''
},
confirmText:{
type: String,
default: ''
}
},
data() {
return {
dialogType: 'error',
focus: false,
val: ""
}
},
computed: {
okText() {
return this.confirmText || t("uni-popup.ok")
},
closeText() {
return this.cancelText || t("uni-popup.cancel")
},
placeholderText() {
return this.placeholder || t("uni-popup.placeholder")
},
titleText() {
return this.title || t("uni-popup.title")
}
},
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
this.val = val
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value
} else {
this.dialogType = this.type
}
},
mounted() {
this.focus = true
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input'){
this.$emit('confirm', this.val)
}else{
this.$emit('confirm')
}
if(this.beforeClose) return
this.popup.close()
},
/**
* 点击取消按钮
*/
closeDialog() {
this.$emit('close')
if(this.beforeClose) return
this.popup.close()
},
close(){
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-dialog {
width: 300px;
border-radius: 11px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 25px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6C6C6C;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 16px;
color: #333;
}
.uni-button-color {
color: #EF4F3F;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
border: 1px #eee solid;
height: 40px;
padding: 0 10px;
border-radius: 5px;
color: #555;
}
.uni-popup__success {
color: #4cd964;
}
.uni-popup__warn {
color: #f0ad4e;
}
.uni-popup__error {
color: #dd524d;
}
.uni-popup__info {
color: #909399;
}
</style>

143
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-message/uni-popup-message.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
<slot>
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
</slot>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
/**
* PopUp 弹出层-消息提示
* @description 弹出层-消息提示
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} message 消息提示文字
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
*/
export default {
name: 'uniPopupMessage',
mixins:[popup],
props: {
/**
* 主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'success'
},
/**
* 消息文字
*/
message: {
type: String,
default: ''
},
/**
* 显示时间，设置为 0 则不会自动关闭
*/
duration: {
type: Number,
default: 3000
},
maskShow:{
type:Boolean,
default:false
}
},
data() {
return {}
},
created() {
this.popup.maskShow = this.maskShow
this.popup.messageChild = this
},
methods: {
timerClose(){
if(this.duration === 0) return
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.popup.close()
},this.duration)
}
}
}
</script>
<style lang="scss" >
.uni-popup-message {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.uni-popup-message__box {
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
flex: 1;
}
@media screen and (min-width: 500px) {
.fixforpc-width {
margin-top: 20px;
border-radius: 4px;
flex: none;
min-width: 380px;
/* #ifndef APP-NVUE */
max-width: 50%;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500px;
/* #endif */
}
}
.uni-popup-message-text {
font-size: 14px;
padding: 0;
}
.uni-popup__success {
background-color: #e1f3d8;
}
.uni-popup__success-text {
color: #67C23A;
}
.uni-popup__warn {
background-color: #faecd8;
}
.uni-popup__warn-text {
color: #E6A23C;
}
.uni-popup__error {
background-color: #fde2e2;
}
.uni-popup__error-text {
color: #F56C6C;
}
.uni-popup__info {
background-color: #F2F6FC;
}
.uni-popup__info-text {
color: #909399;
}
</style>

187
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-share/uni-popup-share.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare',
mixins:[popup],
emits:['select'],
props: {
title: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx'
},
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
}
},
created() {},
computed: {
cancelText() {
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
}
},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-share {
background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>

7
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/en.json Normal file
View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}

8
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/index.js Normal file
View File

@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

7
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/zh-Hans.json Normal file
View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

7
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/zh-Hant.json Normal file
View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

45
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/keypress.js Normal file
View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif

26
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/popup.js Normal file
View File

@@ -0,0 +1,26 @@
export default {
data() {
return {
}
},
created(){
this.popup = this.getParent()
},
methods:{
/**
* 获取父元素实例
*/
getParent(name = 'uniPopup') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
}
}

474
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/uni-popup.vue Normal file
View File

@@ -0,0 +1,474 @@
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart">
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
:duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
:show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
<slot />
</view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress
// #endif
},
emits: ['change', 'maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
isMaskClick: {
type: Boolean,
default: null
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null
},
backgroundColor: {
type: String,
default: 'none'
},
safeArea: {
type: Boolean,
default: true
},
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.type]](true)
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
isMaskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
transClass: {
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
}
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
},
mounted() {
const fixSize = () => {
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible()
},
// #endif
created() {
// this.mkclick = this.isMaskClick || this.maskClick
if (this.isMaskClick === null && this.maskClick === null) {
this.mkclick = true
} else {
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
this.maskClass.backgroundColor = this.maskBackgroundColor
},
methods: {
setH5Visible() {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = 'visible'
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
clearTimeout(this.timer)
this.showPopup = false
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型：', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center'
this.ani = ['zoom-out', 'fade']
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center'
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
left(type) {
this.popupstyle = 'left'
this.ani = ['slide-left']
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
right(type) {
this.popupstyle = 'right'
this.ani = ['slide-right']
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
}
}
}
</script>
<style lang="scss">
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>

90
project-wl-siji-uniapp-vue3/components/Popup/package.json Normal file
View File

@@ -0,0 +1,90 @@
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.7.9",
"description": " Popup 组件，提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

17
project-wl-siji-uniapp-vue3/components/Popup/readme.md Normal file
View File

@@ -0,0 +1,17 @@
## Popup 弹出层
> **组件名：uni-popup**
> 代码块： `uPopup`
> 关联组件：`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

48
project-wl-siji-uniapp-vue3/components/SearchInput/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<!-- 公用搜索框 -->
<view class="search">
<uni-icons class="searchIcon" @click="searchHandle()" type="search"></uni-icons>
<input v-model="searchKey" class="searchInput" @confirm="searchHandle()" focus placeholder="请输入运单号" />
</view>
<!-- end -->
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
itemData: {
inputKey: String,
default: 'value'
}
});
const searchKey = ref('');
const emit = defineEmits(['searchHandle'])
const searchHandle = () => {
emit('searchHandle', searchKey.value)
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.search{
margin-bottom: 20rpx;
position: relative;
.searchIcon{
position: absolute;
left: 20rpx;
top: 18rpx;
}
.searchInput{
background-color: var(--neutral-color-cancel);
border-radius: 32rpx;
font-size: var(--font-size-12);
line-height: 64rpx;
height: 64rpx;
padding: 0 20rpx 0 60rpx;
}
}
</style>

113
project-wl-siji-uniapp-vue3/components/Select/index.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<!-- 下拉组件 -->
<view class="select" >
<view class="selHead" @click="toggle('bottom')"> 请选择 </view>
<uni-popup ref="popup" background-color="#fff" @change="change">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
<view class="title">
<span>选择类型</span>
<image @click="close()" class="colse" src="@/static/sj_clone.png" mode=""></image>
</view>
<view class="options" v-for="(item, index) in options" @click="selectHandle(item.value)">
<text>{{item.title}}</text>
<view class="redioActionCont">
<image class="videoIcon" mode="aspectFit" :src="value == item.value ? redioIconTrue : redioIconFalse"></image>
</view>
</view>
<view class="butCont">
<text @click="selectSubmit" class="button" style="width: 59%;">确定</text>
</view>
</view>
</uni-popup>
</view>
<!-- end -->
</template>
<script>
import { ref, reactive, onMounted } from 'vue';
export default {
data (){
return {
redioIconTrue: './../../static/sj_redio_true.png',
redioIconFalse: './../../static/sj_redio_false.png',
// value: 0
}
},
props:{
options: {
type: Array,
default: []
},
value: {
type: String || Number,
default: "1"
}
},
methods:{
toggle(type) {
this.type = type
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(type)
},
selectHandle(value){
console.log(value)
// this.close()
},
selectSubmit(){
},
change(){
// this.close()
},
// 关闭弹层
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
this.$refs.popup.close()
},
}
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.select{
.title{
display: flex;
padding: 40rpx;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size:var(--font-size-16);
color: var(--neutral-color-main);
letter-spacing: 0;
line-height: 42rpx;
border-bottom: solid 2rpx var(--neutral-color-background);
.colse{
width: 26rpx;
height: 26rpx;
}
}
.options{
display: flex;
justify-content: space-between;
line-height: 120rpx;
padding:0 40rpx;
color: var(--neutral-color-main);
border-bottom: solid 2rpx var(--neutral-color-background);
}
.butCont{
padding: 40rpx 0;
display: flex;
justify-content: center;
}
.redioActionCont{
display: flex;
align-items: center;
.videoIcon{
width: 64rpx;
height: 64rpx;
}
}
}
</style>

33
project-wl-siji-uniapp-vue3/components/TextArea/index.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<!-- 公用卡片 -->
<textarea class="textInput" placeholder-style="color:#818181" :placeholder="placeholder"/>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 获取父组件值、方法
const props = defineProps({
placeholder:{
type: String,
default: ''
}
});
onMounted(()=>{
})
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.textInput{
font-size: var(--font-size-14);
background-color: var(--neutral-color-cancel);
width: 100%;
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
}
</style>

39
project-wl-siji-uniapp-vue3/components/reach-bottom/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<!-- <view class="bottom-box">
<view class="bottom-item">
<text class="title">{{loadingText}}</text>
</view>
</view> -->
<uni-load-more :status="status" :content-text="contentText" />
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 获取父组件值、方法
const props = defineProps({
// contentText: {
// type: Object,
// default:() => ({})
// },
// status:{
// type:String,
// default:''
// }
});
// ------定义变量------
let status = ref('more'); //loading 的状态 more(加载前)/loading(加载中)/noMore(没有更多数据)
const contentText = ref({ //加载状态说明
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
});
//把数据、方法暴漏给父组件
defineExpose({
status,
contentText
});
</script>
<style></style>

37
project-wl-siji-uniapp-vue3/components/uni-search/index.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<!-- 公用nav -->
<view class="navBox">
<view class="search">
<!-- 头部自定义导航 -->
<uni-nav-bar right-text="取消" @clickRight="handleCancel">
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input confirm-type="search" class="nav-bar-input" type="text" v-model="searchVal" placeholder="输入运单号/手机号/姓名查询" @confirm="handleSearch" @input="handleSearch" />
<view class="scanIcon" @click="handleQr"></view>
</view>
</uni-nav-bar>
<!-- end -->
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref } from 'vue';
// ------定义变量------
const emit =defineEmits(['handleSearch']) //子组件向父组件事件传递
const searchVal =ref('')
// -----方法------
// 取消搜索
const handleCancel=()=>{
searchVal.value = ''
}
// 搜索
const handleSearch=()=>{
emit('handleSearch',searchVal)
}
// 扫二维码
const handleQr =()=>{
}
</script>

140
project-wl-siji-uniapp-vue3/components/uni-section/uni-section.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<view class="uni-section">
<view class="uni-section-header" nvue>
<view v-if="type" class="uni-section__head">
<view :class="type" class="uni-section__head-tag"/>
</view>
<view class="uni-section__content">
<text :class="{'distraction':!subTitle}" :style="{color:color}" class="uni-section__content-title">{{ title }}</text>
<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
</view>
</view>
<view :style="{padding: padding ? '10px' : ''}">
<slot/>
</view>
</view>
</template>
<script>
/**
* Section 标题栏
* @description 标题栏
* @property {String} type = [line|circle] 标题装饰类型
* @value line 竖线
* @value circle 圆形
* @property {String} title 主标题
* @property {String} subTitle 副标题
*/
export default {
name: 'UniSection',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
color:{
type: String,
default: '#333'
},
subTitle: {
type: String,
default: ''
},
padding: {
type: Boolean,
default: false
}
},
data() {
return {}
},
watch: {
title(newVal) {
if (uni.report && newVal !== '') {
uni.report('title', newVal)
}
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" >
$uni-primary: #2979ff !default;
.uni-section {
background-color: #fff;
// overflow: hidden;
margin-top: 10px;
}
.uni-section-header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 12px 10px;
// height: 50px;
font-weight: normal;
}
.uni-section__head {
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.line {
height: 12px;
background-color: $uni-primary;
border-radius: 10px;
width: 4px;
}
.circle {
width: 8px;
height: 8px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
background-color: $uni-primary;
}
.uni-section__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
color: #333;
}
.uni-section__content-title {
font-size: 14px;
color: $uni-primary;
}
.distraction {
flex-direction: row;
align-items: center;
}
.uni-section__content-sub {
font-size: 12px;
color: #999;
line-height: 16px;
margin-top: 2px;
}
</style>