Skip to content

肖康 / iedgeMini

Go to a project
Commit a4c92606 by 肖康
Options

init

parent 801f7d54
Expand all
Inline Side-by-side
Showing with 4910 additions and 0 deletions
App.vue 0 → 100644
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@import './assets/css/font/iconfont.css';
page{
padding-top:175rpx;
}
/* #ifdef H5 */
page{
padding-top:90rpx;
}
/* #endif */
</style>
\ No newline at end of file
README.md
## uniapp popup自定义弹窗组件【增强版】
> **组件名：uaPop**
> 代码块： `<ua-pop>`
uaPop弹层组件是基于uniapp自定义跨端升级版弹窗组件。支持多种动画效果、多弹窗类型，可编译运行在h5+小程序+App端。
### 引入方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，只需将组件放在components目录，在页面`template`中即可直接使用。
### 基本用法
**示例**
- 引入弹框模板
```html
<ua-pop ref="uniPop" />
```
- 基础用法
```js
// msg提示
handleMsg(){
this.$refs.uniPop.show({
content: 'msg消息提示框（5s后窗口关闭）',
shade: true,
shadeClose: false,
time: 5,
anim: 'fadeIn',
})
}
```
- 询问框样式
```js
// 询问框
handleConfirm(){
let uniPop = this.$refs.uniPop
uniPop.show({
title: '提示',
content: '询问框 （弹窗内容，用于告知当前状态、提示信息和解决方法，描述文字/文案尽量控制在三行内）',
shadeClose: false,
anim: 'fadeIn',
btns: [
{
text: '取消',
onTap() {
console.log('您点击了取消！');
uniPop.close();
}
},
{
text: '确定',
style: 'color: #41a863',
onTap() {
console.log('您点击了确定！');
}
}
]
})
}
```
- 抽屉弹框(上/下/左/右)
```js
// 抽屉弹窗
handleDrawer(){
this.$refs.uniPop.show({
title: '抽屉弹窗(左侧)',
content: '抽屉弹窗（弹窗内容，用于告知当前状态、提示信息和解决方法，描述文字/文案尽量控制在三行内）',
anim: 'left',
position: 'left',
})
}
```
- 自定义弹框内容
```js
// 自定义Template内容
handleTemplate(){
let uniPop = this.$refs.uniPop
uniPop.show({
content: `
<div class="aboutme" style="text-align: center;padding:20px 0;">
<img src="/static/logo.png" style="height:72px;width:72px;" />
<div style="color: #ff4350; font-size:16px;margin-top:10px;">Hello uni-pop</div>
<div style="color:#999;font-family:simsun;margin-top:10px;">uniPop自定义模板内容，支持富文本。</div>
</div>
`,
shadeClose: false,
xclose: true,
anim: 'shake',
btns: [
{
text: 'click close',
style: 'color: #41a863;font-size:12px;',
onTap() {
uniPop.close()
console.log("click close");
}
}
]
})
}
```
### API参数说明
```js
isVisible: false //是否显示弹窗
title: '' //标题
content: '' //内容
contentStyle: '' //内容样式
style: null //自定义弹窗样式
skin: '' //弹窗风格
icon: '' //弹窗图标
xclose: false //自定义关闭按钮
shade: true //遮罩层
shadeClose: true //点击遮罩关闭
opacity: '' //遮罩透明度
time: 0 //自动关闭秒数
end: null //销毁弹窗回调函数
anim: 'scaleIn' //弹窗动画 scaleIn(默认) | fadeIn | shake | top | right | bottom | left
follow: null //跟随定位（长按菜单）
position: '' //弹窗位置 top | right | bottom | left
btns: null //弹窗按钮
```
### 💝最后
基于`uniapp+vue3短视频直播商城`同步上架工房，感兴趣的可以去了解一下哟！
[https://gf.bilibili.com/item/detail/1105131011](https://gf.bilibili.com/item/detail/1105131011)
开发不易，希望各位小伙伴们多多支持下哈~~ ☕️☕️
assets/css/font/demo.css 0 → 100644
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
assets/css/font/iconfont.css 0 → 100644
@font-face {
font-family: "iconfont"; /* Project id 4820597 */
src: url('iconfont.woff2?t=1738995266674') format('woff2'),
url('iconfont.woff?t=1738995266674') format('woff'),
url('iconfont.ttf?t=1738995266674') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fang:before {
content: "\e6a5";
}
.icon-arrowshang:before {
content: "\e6a0";
}
.icon-del:before {
content: "\e6a1";
}
.icon-arrowright:before {
content: "\e694";
}
.icon-arrowleft:before {
content: "\e6a2";
}
.icon-adderss:before {
content: "\e6a3";
}
.icon-arrowdown:before {
content: "\e6a4";
}
.icon-user:before {
content: "\e698";
}
.icon-search:before {
content: "\e697";
}
.icon-searchclose:before {
content: "\e699";
}
.icon-saixuan:before {
content: "\e696";
}
.icon-home:before {
content: "\e69a";
}
.icon-jia:before {
content: "\e69b";
}
.icon-jian:before {
content: "\e69c";
}
.icon-choose:before {
content: "\e695";
}
.icon-car:before {
content: "\e69d";
}
.icon-arrowxia:before {
content: "\e69e";
}
.icon-caca:before {
content: "\e69f";
}
assets/css/font/iconfont.json 0 → 100644
{
"id": "4820597",
"name": "爱智小程序",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "爱智小程序",
"glyphs": [
{
"icon_id": "43278633",
"name": "fang",
"font_class": "fang",
"unicode": "e6a5",
"unicode_decimal": 59045
},
{
"icon_id": "43252595",
"name": "arrowshang",
"font_class": "arrowshang",
"unicode": "e6a0",
"unicode_decimal": 59040
},
{
"icon_id": "43252594",
"name": "del",
"font_class": "del",
"unicode": "e6a1",
"unicode_decimal": 59041
},
{
"icon_id": "43252592",
"name": "arrowright",
"font_class": "arrowright",
"unicode": "e694",
"unicode_decimal": 59028
},
{
"icon_id": "43252591",
"name": "arrowleft",
"font_class": "arrowleft",
"unicode": "e6a2",
"unicode_decimal": 59042
},
{
"icon_id": "43252590",
"name": "adderss",
"font_class": "adderss",
"unicode": "e6a3",
"unicode_decimal": 59043
},
{
"icon_id": "43252589",
"name": "arrowdown",
"font_class": "arrowdown",
"unicode": "e6a4",
"unicode_decimal": 59044
},
{
"icon_id": "43252605",
"name": "user",
"font_class": "user",
"unicode": "e698",
"unicode_decimal": 59032
},
{
"icon_id": "43252604",
"name": "search",
"font_class": "search",
"unicode": "e697",
"unicode_decimal": 59031
},
{
"icon_id": "43252603",
"name": "searchclose",
"font_class": "searchclose",
"unicode": "e699",
"unicode_decimal": 59033
},
{
"icon_id": "43252602",
"name": "saixuan",
"font_class": "saixuan",
"unicode": "e696",
"unicode_decimal": 59030
},
{
"icon_id": "43252601",
"name": "home",
"font_class": "home",
"unicode": "e69a",
"unicode_decimal": 59034
},
{
"icon_id": "43252600",
"name": "jia",
"font_class": "jia",
"unicode": "e69b",
"unicode_decimal": 59035
},
{
"icon_id": "43252599",
"name": "jian",
"font_class": "jian",
"unicode": "e69c",
"unicode_decimal": 59036
},
{
"icon_id": "43252598",
"name": "choose",
"font_class": "choose",
"unicode": "e695",
"unicode_decimal": 59029
},
{
"icon_id": "43252597",
"name": "car",
"font_class": "car",
"unicode": "e69d",
"unicode_decimal": 59037
},
{
"icon_id": "43252596",
"name": "arrowxia",
"font_class": "arrowxia",
"unicode": "e69e",
"unicode_decimal": 59038
},
{
"icon_id": "43252593",
"name": "caca",
"font_class": "caca",
"unicode": "e69f",
"unicode_decimal": 59039
}
]
}
assets/css/font/iconfont.ttf 0 → 100644
No preview for this file type
assets/css/font/iconfont.woff 0 → 100644
No preview for this file type
assets/css/font/iconfont.woff2 0 → 100644
No preview for this file type
assets/css/index/index.scss 0 → 100644
.indexPage{
.header{
height:230rpx;
background: #BF0009;
position: relative;
.menber{
width: 116rpx;
height: 38rpx;
background: linear-gradient( 48deg, rgba(213,75,52,0.82) 0%, rgba(143,51,5,0) 100%);
border-radius: 100rpx 0rpx 0rpx 100rpx;
border: 1rpx solid #F2AE6B;
font-size: 22rpx;
color: #f4b76b;
line-height: 35rpx;
text-align: center;
position: absolute;
right:0rpx;
top:28rpx;
}
.logo{
width: 300rpx;
height: 92rpx;
display: block;
margin:0 auto;
}
}
.input-box{
width: 690rpx;
height: 83rpx;
padding-left:30rpx;
background: #FFFFFF;
border-radius: 15rpx;
margin:0 auto;
margin-top:24rpx;
.iconfont{
font-size: 40rpx;
color:#D0121B;
}
input{
height:50rpx;
border-right:1rpx solid #D0121B;
padding-right:30rpx;
margin-right: 22rpx;
margin-left:18rpx;
line-height: 50rpx;
font-size: 26rpx;
width:500rpx;
}
.kfbtn{
background: url(/static/images/kf.png) no-repeat;
background-size: 100% 100%;
width:55rpx;
height:55rpx;
}
}
.bannert{
width: 690rpx;
height: 250rpx;
display: block;
margin:0 auto;
margin-top:39rpx;
image{
width:100%;
height:100%;
border-radius: 8rpx;
}
}
.cate-box{
flex-wrap: wrap;
width:662rpx;
margin-left:44rpx;
margin-top:49rpx;
padding-bottom:10rpx;
.item{
margin-bottom: 23rpx;
margin-right: 38rpx;
&:nth-child(5n){
margin-right: 0rpx;
}
image{
width:102rpx;
height:102rpx;
display: block;
margin-bottom: 11rpx;
}
text{
display: block;
width:102rpx;
height:28rpx;
font-size: 20rpx;
color: #000;
line-height: 28rpx;
}
}
}
.recommend-box{
.tit{
font-weight: 600;
font-size: 30rpx;
color: #000000;
line-height: 42rpx;
margin-bottom:51rpx;
padding-left:30rpx;
}
.itembox{
width:654rpx;
margin-left:48rpx;
flex-wrap: wrap;
.item{
margin-bottom: 62px;
image{
width: 296rpx;
height: 264rpx;
}
.title{
width: 296rpx;
height: 70rpx;
font-weight: 400;
font-size: 22rpx;
color: #000;
line-height: 35rpx;
margin-top:60rpx;
margin-bottom: 11rpx;
}
.price{
font-weight: 600;
font-size: 30rpx;
color: #F61500;
line-height: 30rpx;
text{
font-size: 22rpx;
}
}
}
}
}
.fixed-search{
width: 100%;
height: 112rpx;
background: #BF0009;
position: fixed;
top:175rpx;
left:0rpx;
padding-top:14rpx;
z-index: 1;
.input-box{
margin-top:0rpx;
input{
border-right:0rpx;
}
}
}
/* #ifdef H5 */
.fixed-search{
top:90rpx;
}
/* #endif */
}
\ No newline at end of file
assets/css/search/nav.scss 0 → 100644
.searchNavPage{
.hot-search{
margin-top:40rpx;
.content-box{
padding-left:75rpx;
padding-right: 28rpx;
flex-wrap: wrap;
position: relative;
&.hidex{
height:160rpx;
overflow: hidden;
}
&::after{
content:"";
position: absolute;
background: url(/static/images/hot.png) no-repeat;
background-size: 100% 100%;
width:30rpx;
height:30rpx;
left:33rpx;
top:10rpx;
}
// .item{
// height: 30rpx;
// font-weight: 400;
// font-size: 22rpx;
// color: #555555;
// line-height: 30rpx;
// margin-right:40rpx;
// margin-bottom: 30rpx;
// }
.item{
border-radius: 5rpx;
height: 50rpx;
line-height: 50rpx;
font-weight: 400;
font-size: 22rpx;
color: #555555;
margin-right:20rpx;
margin-bottom: 30rpx;
padding-left:20rpx;
padding-right: 20rpx;
&:hover{
background: #F4F4F4;
}
}
}
}
.history-search{
padding-top:20rpx;
.content-box-item{
padding-left:31rpx;
padding-right: 31rpx;
flex-wrap: wrap;
&.hidex{
height:160rpx;
overflow: hidden;
}
.item{
border-radius: 5rpx;
height: 50rpx;
line-height: 50rpx;
font-weight: 400;
font-size: 22rpx;
color: #555555;
margin-right:20rpx;
margin-bottom: 30rpx;
padding-left:20rpx;
padding-right: 20rpx;
&:hover{
background: #F4F4F4;
}
}
}
}
.tit{
height:35rpx;
margin-bottom:46rpx;
padding-left:31rpx;
padding-right:28rpx;
font-size: 22rpx;
.word-name{
color: #000000;
}
.rt{
height:35rpx;
color:#D1D1D1;
.status-name{
color: #999999;
margin-right:4rpx;
}
.icon-arrowxia,.icon-arrowshang{
font-size: 18rpx;
}
.line{
width: 1rpx;
height: 29rpx;
background:#D1D1D1;
margin-left:20rpx;
margin-right:20rpx;
}
.icon-del{
font-size: 35rpx;
}
}
}
}
\ No newline at end of file
assets/css/search/search.scss 0 → 100644
.searchPage{
.shiftbox{
padding: 38rpx 36rpx 38rpx 30rpx;
font-size: 24rpx;
color: #000000;
.rank{
.icon{
font-size: 16rpx;
margin-left: 12rpx;
}
&.act{
color:#D0121B;
}
}
.sxbox{
height:30rpx;
border-left:1rpx solid #D1D1D1;
padding-left:24rpx;
margin-left: 168rpx;
.icon-saixuan{
font-size: 26rpx;
color:#979797;
margin-left: 12rpx;
}
}
}
.cons{
}
.pagebot{
height: 80rpx;
line-height: 80rpx;
font-size: 24rpx;
text-align: center;
color:#C6C7CC;
}
.no-data-box{
padding-top:200rpx;
font-size: 22rpx;
color: #000000;
padding-bottom:100rpx;
image{
margin:0 auto;
width:442rpx;
height:254rpx;
margin-bottom: 50rpx;
display: block;
}
view{
margin:0 auto;
text-align: center;
}
.backs{
margin-top:55rpx;
width: 300rpx;
height: 70rpx;
background: #FFFFFF;
border-radius: 5rpx;
border: 1rpx solid #D0121B;
color:#D0121B;
line-height: 70rpx;
text-align: center;
}
}
}
.pop-consx{
width: 610rpx;
height: 100%;
background: #FFFFFF;
padding-top:175rpx;
.section{
padding:30rpx;
overflow-y: auto;
height:calc(100vh - 305rpx);
.item-group{
margin-bottom: 20rpx;
.item-t{
height:38rpx;
margin-bottom: 40rpx;
.names{
color:#000;
font-size: 26rpx;
width:450rpx;
}
.status-box{
height:38rpx;
}
.status-name{
font-size: 24rpx;
color:#666;
margin-right:10rpx;
}
.iconfont{color:#d1d1d1;font-size: 16rpx;}
}
.item-c{
flex-wrap: wrap;
}
.citem{
width: 170rpx;
height: 46rpx;
background: #FFF5F5;
border-radius: 5rpx;
border: 1rpx solid #FFF5F5;
font-size: 20rpx;
color: #000000;
text-align: center;
line-height: 44rpx;
padding:0 8rpx;
margin-right: 20rpx;
margin-bottom:30rpx;
&:nth-child(3n){
margin-right: 0rpx;
}
&.act{
border: 1rpx solid #D0121B;
color: #D0121B;
}
}
}
}
.foot{
border-top:1rpx solid #E7E7E7;
padding:0 30rpx;
padding-top:20rpx;
.cz{
width: 210rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #F6F7F8;
border-radius: 5rpx;
font-size: 26rpx;
color: #000000;
}
.cx{
width: 312rpx;
line-height: 80rpx;
text-align: center;
background: #D0121B;
border-radius: 5rpx;
font-size: 26rpx;
color: #FFFFFF;
}
}
}
/* #ifdef H5 */
.pop-consx{
padding-top:90rpx;
.section{
padding:30rpx;
overflow-y: auto;
height:calc(100vh - 220rpx);
}
}
/* #endif */
\ No newline at end of file
components/barx.vue 0 → 100644
<template>
<view class="custom-nav " :class="{'type1':type==1}">
<view class="cons row verCenter" >
<text class="icon-leftsp icon iconfont icon-fang" :class="{'type1':type==1}" @click="goHome"></text>
<view class="nav-title" :class="{'type1':type==1}">{{pageTitle}}</view>
</view>
</view>
</template>
<script>
export default {
name: 'barx',
props: {
pageTitle: {
type: String,
default: '爱智工业品平台'
},
type: {
type: Number,
default: 0
}
},
created() {
},
data() {
return {
}
},
methods: {
goHome() {
uni.redirectTo({
url: '/pages/index/index'
});
}
}
};
</script>
<style scoped lang="scss">
.custom-nav {
position: fixed;
left:0rpx;
top:0rpx;
width:100%;
height:175rpx;
z-index: 999;
background: #fff;
&.type1{
background:#BF0009;
}
.cons{
padding-left:30rpx;
height:42rpx;
position: relative;
top:110rpx;
.icon-leftsp {
color:#000000;
font-size: 40rpx;
&.type1{
color:#ffffff;
}
}
.nav-title {
width: 410rpx;
font-size: 30rpx;
color: #000;
text-align: center;
margin-left:80rpx;
&.type1{
color:#ffffff;
}
}
}
}
/* #ifdef H5 */
.custom-nav{
height:90rpx;
.cons{
top:27rpx;
}
}
/* #endif */
</style>
\ No newline at end of file
components/bottom_nav.vue 0 → 100644
<template>
<view class="bottom-nav-fixed row">
<navigator url="/" class="navitem" :class="{ act: actval == 1 }">
<text class="icon iconfont icon-home"></text>
<view>首页</view>
</navigator>
<navigator url="/" class="navitem" :class="{ act: actval == 2 }">
<text class="icon iconfont icon-choose"></text>
<view>选型</view>
</navigator>
<navigator url="/joincart" class="cartbgo navitem" :class="{ act: actval == 3 }">
<text class="icon iconfont icon-car"></text>
<view>
购物车
<text class="counts">{{ count }}</text>
</view>
</navigator>
<navigator url="/user" class="navitem" :class="{ act: actval == 4 }">
<text class="icon iconfont icon-user"></text>
<view>个人中心</view>
</navigator>
</view>
</template>
<script>
// import { Ichunt_Api, Api_Url } from '@/util/api.js';
export default {
name: 'bottom_nav',
props: {
actval: {
type: String,
default: 1
},
carcount: {
type: Number,
default: 0
}
},
created() {
this.getData();
},
data() {
return {
count: 0
};
},
methods: {
getData() {
// this.request(Api_Url + '/cart/count', 'POST', {}, false, true).then(res => {
// if (res.err_code === 0) {
// this.count = res.data;
// if (this.carcount) {
// this.count = this.carcount;
// }
// }
// });
},
updateCar(){
this.getData()
}
}
};
</script>
<style scoped lang="scss">
.bottom-nav-fixed {
width: 100%;
height: 98rpx;
background: #fff;
position: fixed;
bottom: 0rpx;
left: 0;
right: 0;
z-index: 6;
padding-top: 14rpx;
z-index: 9;
.navitem {
display: block;
color: #666;
font-size: 20rpx;
width: 25%;
text-align: center;
transition: all 0.4s ease;
.iconfont {
font-size: 44rpx;
color:#cdcdcd;
}
&.act {
color: #D0121B;
text {
color:#D0121B;
}
}
&.cartbgo {
position: relative;
.counts {
width: 46rpx;
height: 32rpx;
background: #ff3700;
border-radius: 16rpx;
border: 2rpx solid #ffffff;
position: absolute;
right: 40rpx;
top: -5rpx;
color: #fff;
font-size: 24rpx;
line-height: 28rpx;
text-align: center;
}
}
}
}
</style>
components/customBarx.vue/customBarx.vue 0 → 100644
<template>
<view class="custom-nav " :class="{'type1':type==1}">
<view class="cons row verCenter" >
<text class="icon-leftsp icon iconfont icon-fang" :class="{'type1':type==1}" @click="goHome"></text>
<view class="nav-title" :class="{'type1':type==1}">{{pageTitle}}</view>
</view>
</view>
</template>
<script>
export default {
name: 'barx',
props: {
pageTitle: {
type: String,
default: '爱智工业品平台'
},
type: {
type: Number,
default: 0
}
},
created() {
},
data() {
return {
}
},
methods: {
goHome() {
uni.redirectTo({
url: '/pages/index/index'
});
}
}
};
</script>
<style scoped lang="scss">
.custom-nav {
position: fixed;
left:0rpx;
top:0rpx;
width:100%;
height:175rpx;
z-index: 999;
background: #fff;
&.type1{
background:#BF0009;
}
.cons{
padding-left:30rpx;
height:42rpx;
position: relative;
top:110rpx;
.icon-leftsp {
color:#000000;
font-size: 40rpx;
&.type1{
color:#ffffff;
}
}
.nav-title {
width: 410rpx;
font-size: 30rpx;
color: #000;
text-align: center;
margin-left:80rpx;
&.type1{
color:#ffffff;
}
}
}
}
</style>
\ No newline at end of file
components/one_item.vue 0 → 100644
<template>
<navigator url="" class="one-data-item row">
<view class="imgbox">
<view class="ictag"></view>
<image class="imagep" src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
</view>
<view class="trg">
<view class="name elep2">海康机器人HIKROBOT工业面阵相机MV-CS023-10GM海康机器人HIKROBOT工业面阵相机MV-CS023-10GM</view>
<view class="tags row">
<view class="item tag1">{{obj.a}}</view>
<view class="item tag2">顺丰包邮</view>
</view>
<view class="price-box row">
<text class="price0">¥1,052.00</text>
<text class="price1">¥986.00</text>
<text class="qytag">企业价</text>
</view>
</view>
</navigator>
</template>
<script>
export default {
name: 'one_item',
props: {
obj:{
type:Object,
}
},
created() {
},
data() {
return {
};
},
methods: {
}
};
</script>
<style scoped lang="scss">
.one-data-item{
border-bottom: 1rpx solid #D1D1D1;
padding:30rpx;
.imgbox{
position: relative;
.ictag{
width: 74rpx;
height: 30rpx;
background: url("https://img.ichunt.com/images/ichunt/202502/08/ac35be31bb560408eca3a059c26147dd.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left:0rpx;
top:16rpx;
}
}
.imagep{
width: 182rpx;
height: 182rpx;
border-radius: 20rpx;
margin-right:40rpx;
}
.trg{
.name{
width: 475rpx;
height: 90rpx;
font-size: 24rpx;
color: #000000;
line-height: 45rpx;
margin-bottom: 10rpx;
}
.tags{
min-height: 32rpx;
.item{
height: 32rpx;
border-radius: 5rpx;
border: 1rpx solid #1969F9;
line-height: 32rpx;
color:#1969F9;
font-size: 20rpx;
text-align: center;
margin-right: 15rpx;
padding:0 15rpx;
margin-bottom: 20rpx;
&.tag2{
border: 1rpx solid #38B114;
color:#38B114;
}
}
}
.price-box{
height:42rpx;
.price0{
margin-right: 22rpx;
font-weight: 600;
font-size: 30rpx;
color: #D91800;
}
.price1{
font-size: 28rpx;
color: #1969F9;
}
.qytag{
width: 76rpx;
height: 26rpx;
background: #1969F9;
border-radius: 5rpx;
color:#fff;
line-height: 27rpx;
text-align: center;
margin-left: 10rpx;
font-size: 18rpx;
}
}
}
}
</style>
components/search_head.vue 0 → 100644
<template>
<view class="top-box row bothSide verCenter">
<text class="icon iconfont icon-arrowleft" @click="goBack"></text>
<view class="search-box row verCenter">
<text class="icon iconfont icon-search"></text>
<input class="uni-input" placeholder="请输入商品名称、品牌、型号、商品编码" :value="inputClearValue" @input="clearInput"
confirm-type="search" @confirm="onConfirm" />
<text class="icon iconfont icon-searchclose" v-if="showClearIcon" @click="clearIcon()"></text>
</view>
<view class="kfbtn" ></view>
</view>
</template>
<script>
export default {
name: 'search_head',
props: {
searchVal: {
type: String,
default: ""
},
backurl:{
type: String,
default: ""
}
},
created() {
this.inputClearValue = this.searchVal;
},
watch: {
searchVal(newVal) {
this.inputClearValue = newVal;
if (this.inputClearValue.length > 0) {
this.showClearIcon = true;
} else {
this.showClearIcon = false;
}
},
backurl(newVal){
this.backurl = newVal;
}
},
data() {
return {
inputClearValue: "",
inputValue: '',
showClearIcon: false,
};
},
methods: {
goBack() {
if(this.backurl){
uni.redirectTo({
url: this.backurl
});
return
}
this.$goBack()
},
onConfirm(e) {
this.$emit('confirm', e);
},
clearInput: function(event) {
this.inputClearValue = event.detail.value;
if (event.detail.value.length > 0) {
this.showClearIcon = true;
} else {
this.showClearIcon = false;
}
},
clearIcon: function() {
this.inputClearValue = '';
this.inputValue = '',
this.showClearIcon = false;
},
}
};
</script>
<style scoped lang="scss">
.top-box {
padding: 21rpx 36rpx 21rpx 30rpx;
.icon-arrowleft {
font-size: 35rpx;
color: #898989;
}
.search-box {
width: 545rpx;
height: 70rpx;
background: #FFFFFF;
border-radius: 5rpx;
border: 1rpx solid #D0121B;
margin-right: 15px;
padding-left: 20rpx;
margin-right: 34rpx;
input {
font-size: 22rpx;
line-height: 30rpx;
padding-left: 10rpx;
width: 450rpx;
}
.icon-searchclose {
font-size: 26rpx;
color: #898989;
cursor: pointer;
}
.icon-search {
font-size: 30rpx;
color: #d0121b;
}
}
.kfbtn {
background: url(/static/images/kf.png) no-repeat;
background-size: 100% 100%;
width: 55rpx;
height: 55rpx;
}
}
</style>
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
main.js 0 → 100644
import App from './App'
import { request } from '@/util/util.js'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
//挂载全局方法
//回退逻辑
app.config.globalProperties.$goBack = () => {
const pages = getCurrentPages();
console.log(pages)
if (pages.length == 1) {
uni.navigateTo({
url: '/pages/index/index'
});
} else {
uni.navigateBack({
delta: 1
});
}
};
//request
app.config.globalProperties.request= request
var globalData = {
SEARCH_SUPPLIER_SINGLE: '',
};
//读取全局变量配置
// request(Ichunt_Api + '/api/common/data', 'GET', {}, true, true).then(res => {
// if (res.err_code === 0) {
// globalData.SEARCH_SUPPLIER_SINGLE = res.data.SEARCH_SUPPLIER_SINGLE;
// globalData.global_contact_us = res.data.global_contact_us;
// globalData.h5_home_activity_recommend = res.data.h5_home_activity_recommend;
// globalData.h5_home_hide_menu = res.data.h5_home_hide_menu;
// globalData.h5_home_hot_search_goods = res.data.h5_home_hot_search_goods;
// globalData.kfqq_xk = res.data.kfqq_xk.data;
// globalData.wx_sign = res.data.wx_sign;
// Vue.prototype.$globalData = globalData;
// }
// });
return {
app
}
}
// #endif
\ No newline at end of file
manifest.json 0 → 100644
{
"name" : "iedgeMini",
"appid" : "__UNI__A0E3841",
"description" : "爱智商城小程序",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}
package.json 0 → 100644
{
"id": "ua-pop",
"name": "uniapp popup自定义增强版弹窗组件",
"displayName": "uniapp popup自定义增强版弹窗组件",
"version": "1.2.9",
"description": "基于uniapp封装多功能弹框组件(msg信息框|alert对话框|confirm确认框|toast弱提示框)，内置多种弹窗动画及样式，适用于h5+小程序+App端。",
"keywords": [
"uni-popup",
"uni-pop",
"ua-pop",
"popup"
],
"dcloudext": {
"category": [
"前端组件",
"通用组件"
]
}
}
\ No newline at end of file
pages.json 0 → 100644
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#BF0009",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/search/nav",
"style": {
"navigationBarTitleText": "爱智工业品平台"
}
},
{
"path": "pages/search/list",
"style": {
"navigationBarTitleText": "爱智工业品平台"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
// "navigationBarTitleText": "爱智工业品平台",
"navigationBarBackgroundColor": "#fff",
// "backgroundColor": "#fff"
"navigationStyle": "custom"
},
"uniIdRouter": {}
}
\ No newline at end of file
pages/index/index.vue 0 → 100644
<template>
<view class="indexPage">
<barX :pageTitle="pageTitle" :type="type"/>
<view class="header" >
<image class="logo" src="/static/images/logo.png" ></image>
<navigator url="" class="menber" >会员入口</navigator>
<view class="input-box row verCenter">
<text class="icon iconfont icon-search"></text>
<input type="text" @click="goSearch()" placeholder="请输入商品名称、品牌、型号、商品编码" />
<view class="kfbtn"></view>
</view>
</view>
<navigator url="/pages/search/search" class="bannert" >
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
</navigator>
<view class="cate-box row bothSide">
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<text class="elep">工控自动化</text>
</navigator>
</view>
<view class="recommend-box">
<view class="tit">为你推荐</view>
<view class="itembox row bothSide">
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<view class="title elep2">研华ADVANTECH工业通信网关ECU-1051E-R10AAE研华ADVANTECH工业通信网关ECU-1051E-R10AAE</view>
<view class="price">
<text>￥</text>1,500.00
</view>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<view class="title elep2">研华ADVANTECH工业通信网关ECU-1051E-R10AAE研华ADVANTECH工业通信网关ECU-1051E-R10AAE</view>
<view class="price">
<text>￥</text>1,500.00
</view>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<view class="title elep2">研华ADVANTECH工业通信网关ECU-1051E-R10AAE研华ADVANTECH工业通信网关ECU-1051E-R10AAE</view>
<view class="price">
<text>￥</text>1,500.00
</view>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<view class="title elep2">研华ADVANTECH工业通信网关ECU-1051E-R10AAE研华ADVANTECH工业通信网关ECU-1051E-R10AAE</view>
<view class="price">
<text>￥</text>1,500.00
</view>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<view class="title elep2">研华ADVANTECH工业通信网关ECU-1051E-R10AAE研华ADVANTECH工业通信网关ECU-1051E-R10AAE</view>
<view class="price">
<text>￥</text>1,500.00
</view>
</navigator>
<navigator url="" class="item">
<image src="https://imgscdn.ichunt.com/show/origin/076860f11hc0c800000hd3qpst7i1"></image>
<view class="title elep2">研华ADVANTECH工业通信网关ECU-1051E-R10AAE研华ADVANTECH工业通信网关ECU-1051E-R10AAE</view>
<view class="price">
<text>￥</text>1,500.00
</view>
</navigator>
</view>
</view>
<view class="fixed-search" v-show="scrollTop > 48">
<view class="input-box row verCenter">
<text class="icon iconfont icon-search"></text>
<input type="text" @click="goSearch()" placeholder="请输入商品名称、品牌、型号、商品编码" />
</view>
</view>
<bottomNavFixed actval="1" />
</view>
</template>
<script>
// import { Ichunt_Api, Api_Url } from '@/util/api.js';
import bottomNavFixed from '@/components/bottom_nav.vue';
import barX from '@/components/barx.vue';
export default {
data() {
return {
pageTitle:"",
type:1,
scrollTop: 0,
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (e.scrollTop > 48) {
this.pageTitle='爱智工业品平台'
this.type=0
uni.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff',
animation: {
duration: 300, // 动画持续时间（毫秒）
timingFunc: 'ease-in-out' // 动画效果
}
});
} else {
this.pageTitle=''
this.type=1
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#BF0009',
animation: {
duration: 300, // 动画持续时间（毫秒）
timingFunc: 'ease-in-out' // 动画效果
}
});
}
},
onLoad() {
},
methods: {
goSearch() {
uni.navigateTo({
url: '/pages/search/nav'
});
}
},
components: {
bottomNavFixed,
barX
}
}
</script>
<style scoped lang="scss">
@import '../../assets/css/index/index.scss';
</style>
\ No newline at end of file
pages/search/list.vue 0 → 100644
<template>
<view class="searchPage">
<barX/>
<searchHead @confirm="onConfirm" :searchVal="searchVal" />
<view class="shiftbox row bothSide verCenter">
<view class="rank1 rank row " @click="tab(1)" :class="{'act':tabType==1}">综合排序</view>
<view class="rank2 rank row verCenter" @click="tab(2)" :class="{'act':tabType==2}">库存<text :class="['icon','iconfont', stocksort?'icon-arrowshang':'icon-arrowxia']"></text></view>
<view class="rank3 rank row verCenter" @click="tab(3)" :class="{'act':tabType==3}">价格<text :class="['icon','iconfont', pricesort?'icon-arrowshang':'icon-arrowxia']"></text></view>
<view class="sxbox row verCenter" @click="open">筛选<text class="icon iconfont icon-saixuan"></text></view>
</view>
<view class="cons">
<view class="databox">
<oneItem v-for="(item,index) in list" :key="index" :obj="item"/>
<!-- <view class="pagebot" >—— 已经全部加载完 ——</view> -->
<!-- <view class="no-data-box" >
<image src="https://img.ichunt.com/images/ichunt/202502/07/676f987065320e89a68d473ec62c8cea.png"></image>
<view>抱歉，没有找到符合条件的产品！</view>
<view class="backs" @click="$goBack">返回</view>
</view> -->
</view>
</view>
<uni-popup ref="popupsx" type="right">
<view class="pop-consx" >
<view class="section">
<view class="item-group" v-for="(item,index) in [1,2,3,4,5,6,7]" :key="index">
<view class="item-t row bothSide verCenter">
<text class="names elep">CPU（6代～14代）</text>
<view class="row verCenter status-box">
<text class="status-name" >展开</text>
<text :class="['icon','iconfont','icon-arrowxia']" ></text>
</view>
</view>
<view class="item-c row">
<view class="citem elep">凌华主板</view>
<view class="citem elep">凌华主板</view>
<view class="citem elep">凌华主板</view>
<view class="citem elep">凌华主板</view>
<view class="citem elep">凌华主板</view>
<view class="citem elep act">凌华主板撒大苏打飒飒的</view>
</view>
</view>
</view>
<view class="foot row bothSide">
<view class="cz">重置</view>
<view class="cx" >确认</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { Api_Url } from '@/util/api.js'
import barX from '@/components/barx.vue';
import searchHead from '@/components/search_head.vue';
import oneItem from '@/components/one_item.vue';
export default {
data() {
return {
isInit:false,//记录是否加载了数据
searchVal: "", //搜索值
tabType:1,
stocksort:false,//库存升序 false 降序
pricesort:false,//价格升序 false 降序
list:[
{a:1,b:2},
{a:3,b:4},
]
}
},
onLoad: function(option) {
this.searchVal = option.k;
console.log(option)
this.setHistoryItems(this.searchVal)
},
methods: {
getData(){
this.request(Api_Url + '/api/search/getData', 'POST', {
'goods_name_ik/like':this.searchVal,
page_size: 15,
page: 1,
hcy_test: 1122
}, true).then(res => {
console.log(res.data.lists)
});
console.log("获取数据")
},
tab(type){
this.tabType=type;
if(type==2){
this.stocksort=!this.stocksort;
}else if(type==3){
this.pricesort=!this.pricesort
}
this.getData()
},
//创建历史搜索缓存 最大10个
setHistoryItems(keyword) {
let maxNum = 10;
keyword = keyword.trim();
let historyItems = uni.getStorageSync('historyItems');
if (historyItems === undefined) {
uni.setStorageSync('historyItems', keyword);
} else {
let onlyItem = historyItems.split('|').filter(function(e) {
return e != keyword;
});
if (onlyItem.length >= 10) {
onlyItem = onlyItem.splice(0, maxNum - 1);
}
if (onlyItem.length > 0) historyItems = keyword + '|' + onlyItem.join('|');
uni.setStorageSync('historyItems', historyItems);
}
},
onConfirm(e) {
let key_ = e.detail.value
if (key_.length < 2) {
uni.showToast({
title: '关键字不能小于2个字符',
duration: 2000,
icon: "none"
})
return
}
uni.redirectTo({
url: '/pages/search/list?k=' + key_
});
},
open() {
this.$refs.popupsx.open('right');
},
},
components: {
barX,
searchHead,
oneItem
}
}
</script>
<style scoped lang="scss">
@import '../../assets/css/search/search.scss';
</style>
pages/search/nav.vue 0 → 100644
<template>
<view class="searchNavPage">
<barX />
<searchHead @confirm="onConfirm" />
<view class="hot-search">
<view class="tit row bothSide verCenter">
<text class="word-name" >热搜</text>
<view class="rt row verCenter">
<text class="status-name" v-if="showToggle" @click="toggleContent">{{isExpanded?'收起':'展开'}}</text>
<text :class="['icon','iconfont',isExpanded?'icon-arrowshang':'icon-arrowxia']" v-if="showToggle"
@click="toggleContent"></text>
<!-- <view class="line"></view>
<text class="icon iconfont icon-del"></text> -->
</view>
</view>
<view :class="['content-box', 'row', { 'hidex': showToggle&&(!isExpanded) }]">
<navigator url="" class="item">工业相机asdasdas</navigator>
<navigator url="" class="item">工业相机asdasd</navigator>
<navigator url="" class="item">工业相机asdas</navigator>
<navigator url="" class="item">工业相机adas</navigator>
<navigator url="" class="item">工业相机asdas</navigator>
<navigator url="" class="item">工业相机asdas</navigator>
<navigator url="" class="item">工业相机asd</navigator>
<navigator url="" class="item">工业相机</navigator>
<navigator url="" class="item">工业相机</navigator>
</view>
</view>
<view class="history-search" v-if="searchHistory.length>0">
<view class="tit row bothSide verCenter">
<text class="word-name">历史搜索</text>
<view class="rt row verCenter">
<!-- <text class="status-name">展开</text>
<text class="icon iconfont icon-arrowxia"></text>
<view class="line"></view> -->
<text class="icon iconfont icon-del" @click="delsearchHistory"></text>
</view>
</view>
<view class="content-box-item row">
<navigator class="item" :url="'/pages/search/list?k='+item" v-for="(item,index) in searchHistory"
:key="index">{{item}}</navigator>
</view>
</view>
</view>
</template>
<script>
import searchHead from '@/components/search_head.vue';
import barX from '@/components/barx.vue';
export default {
data() {
return {
isExpanded: false, // 是否展开
showToggle: false,
searchHistory: [],
}
},
onReady() {
this.getContentHeight();
},
onShow: function() {
//获取历史记录
this.getsearchHistory()
},
methods: {
onConfirm(e) {
let key_ = e.detail.value
if (key_.length < 2) {
uni.showToast({
title: '关键字不能小于2个字符',
duration: 2000,
icon: "none"
})
return
}
uni.redirectTo({
url: '/pages/search/list?k=' + key_
});
},
getContentHeight() {
const query = uni.createSelectorQuery().in(this);
query.select('.content-box').boundingClientRect((data) => {
if (data) {
this.showToggle = data.height > 90;
}
}).exec();
},
toggleContent() {
this.isExpanded = !this.isExpanded;
},
getsearchHistory() {
let listhis_ = uni.getStorageSync('historyItems');
if (listhis_) {
this.searchHistory = listhis_.split("|")
} else {
this.searchHistory = []
}
},
delsearchHistory() {
uni.showModal({
title: '',
content: '您确定要删除最近搜索内容吗？',
success: res => {
if (res.confirm) {
uni.removeStorageSync('historyItems');
this.getsearchHistory()
}
}
});
},
},
components: {
searchHead,
barX
}
}
</script>
<style scoped lang="scss">
@import '../../assets/css/search/nav.scss';
</style>
\ No newline at end of file
uni.promisify.adaptor.js 0 → 100644
uni.addInterceptor({
returnValue (res) {
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (!res) return resolve(res)
return res[0] ? reject(res[0]) : resolve(res[1])
});
});
},
});
\ No newline at end of file
uni.scss 0 → 100644
view,
text,
input,
navigator{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Segoe UI,Arial,Roboto,"PingFang SC","miui","Hiragino Sans GB","Microsoft Yahei",sans-serif;
}
.navigator-hover {
background: none;
opacity: 1;
}
image {
vertical-align: middle;
}
/**单行省略**/
.elep {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/**2行省略**/
.elep2 {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.boxsiz {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 两侧对齐 */
.bothSide {
justify-content: space-between;
}
/* 平均分布 */
.avarage {
justify-content: space-around;
}
/* 水平居中 */
.rowCenter {
justify-content: center;
}
/* 垂直居中 */
.verCenter {
align-items: center;
}
uni_modules/uni-popup/changelog.md 0 → 100644
## 1.9.6（2025-01-08）
- 修复 示例中过期图片地址
## 1.9.5（2024-10-15）
- 修复 微信小程序中的getSystemInfo警告
## 1.9.2（2024-09-21）
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
## 1.9.1（2024-04-02）
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
## 1.9.0（2024-03-28）
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
## 1.8.9（2024-03-20）
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
## 1.8.8（2024-02-20）
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
## 1.8.7（2024-02-02）
- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
## 1.8.6（2024-01-30）
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
## 1.8.5（2024-01-26）
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
## 1.8.4（2023-11-15）
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
## 1.8.3（2023-04-17）
- 修复 uni-popup 重复打开时的 bug
## 1.8.2（2023-02-02）
- uni-popup-dialog 组件新增 inputType 属性
## 1.8.1（2022-12-01）
- 修复 nvue 下 v-show 报错
## 1.8.0（2022-11-29）
- 优化 主题样式
## 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 端
uni_modules/uni-popup/components/uni-popup-dialog/keypress.js 0 → 100644
// #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
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue 0 → 100644
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" :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" :maxlength="maxlength" v-model="val" :type="inputType"
:placeholder="placeholderText" :focus="focus">
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button" :class="showClose?'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 {Boolean} focus input模式下是否自动聚焦，默认为true
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @showClose {Boolean} 是否显示关闭按钮
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @property {Number} maxlength 输入
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits: ['confirm', 'close', 'update:modelValue', 'input'],
props: {
inputType: {
type: String,
default: 'text'
},
showClose: {
type: Boolean,
default: true
},
// #ifdef VUE2
value: {
type: [String, Number],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [Number, String],
default: ''
},
// #endif
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: ''
},
maxlength: {
type: Number,
default: -1,
},
focus: {
type: Boolean,
default: true,
}
},
data() {
return {
dialogType: 'error',
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) {
if (this.maxlength != -1 && this.mode === 'input') {
this.val = val.slice(0, this.maxlength);
} else {
this.val = val
}
},
val(val) {
// #ifdef VUE2
// TODO 兼容 vue2
this.$emit('input', val);
// #endif
// #ifdef VUE3
// TODO　兼容　vue3
this.$emit('update:modelValue', val);
// #endif
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value;
// #ifdef VUE3
this.val = this.modelValue;
// #endif
} else {
this.dialogType = this.type
}
},
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: #007aff;
}
.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>
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue 0 → 100644
<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>
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue 0 → 100644
<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 {
// TODO 替换为自己的图标
bottomData: [{
text: '微信',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
name: 'ali'
},
{
text: 'QQ',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.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>
uni_modules/uni-popup/components/uni-popup/i18n/en.json 0 → 100644
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}
uni_modules/uni-popup/components/uni-popup/i18n/index.js 0 → 100644
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
}
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json 0 → 100644
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json 0 → 100644
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
uni_modules/uni-popup/components/uni-popup/keypress.js 0 → 100644
// #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
uni_modules/uni-popup/components/uni-popup/popup.js 0 → 100644
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;
},
}
}
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue 0 → 100644
<template>
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
<view @click.stop>
<slot></slot>
</view>
</view>
</template>
<script>
type CloseCallBack = ()=> void;
let closeCallBack:CloseCallBack = () :void => {};
export default {
emits:["close","clickMask"],
data() {
return {
isShow:false,
isOpen:false
}
},
props: {
maskClick: {
type: Boolean,
default: true
},
},
watch: {
// 设置show = true 时，如果没有 open 需要设置为 open
isShow:{
handler(isShow) {
// console.log("isShow",isShow)
if(isShow && this.isOpen == false){
this.isOpen = true
}
},
immediate:true
},
// 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
isOpen:{
handler(isOpen) {
// console.log("isOpen",isOpen)
if(isOpen && this.isShow == false){
this.isShow = true
}
},
immediate:true
}
},
methods:{
open(){
// ...funs : CloseCallBack[]
// if(funs.length > 0){
// closeCallBack = funs[0]
// }
this.isOpen = true;
},
clickMask(){
if(this.maskClick == true){
this.$emit('clickMask')
this.close()
}
},
close(): void{
this.isOpen = false;
this.$emit('close')
closeCallBack()
},
hiden(){
this.isShow = false
},
show(){
this.isShow = true
}
}
}
</script>
<style>
.popup-root {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 100%;
flex: 1;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
z-index: 99;
}
</style>
\ No newline at end of file
uni_modules/uni-popup/package.json 0 → 100644
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.9.6",
"description": " Popup 组件，提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y",
"app-harmony": "u",
"app-uvue": "u"
},
"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"
}
}
}
}
}
uni_modules/uni-popup/readme.md 0 → 100644
## Popup 弹出层
> **组件名：uni-popup**
> 代码块： `uPopup`
> 关联组件：`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
uni_modules/uni-scss/changelog.md 0 → 100644
## 1.0.3（2022-01-21）
- 优化 组件示例
## 1.0.2（2021-11-22）
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1（2021-11-22）
- 修复 vue3中scss语法兼容问题
## 1.0.0（2021-11-18）
- init
uni_modules/uni-scss/index.scss 0 → 100644
@import './styles/index.scss';
uni_modules/uni-scss/package.json 0 → 100644
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"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": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"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"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
uni_modules/uni-scss/readme.md 0 → 100644
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
uni_modules/uni-scss/styles/index.scss 0 → 100644
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
uni_modules/uni-scss/styles/setting/_border.scss 0 → 100644
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_color.scss 0 → 100644
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
uni_modules/uni-scss/styles/setting/_radius.scss 0 → 100644
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
uni_modules/uni-scss/styles/setting/_space.scss 0 → 100644
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_styles.scss 0 → 100644
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
uni_modules/uni-scss/styles/setting/_text.scss 0 → 100644
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
uni_modules/uni-scss/styles/setting/_variables.scss 0 → 100644
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
uni_modules/uni-scss/styles/tools/functions.scss 0 → 100644
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
uni_modules/uni-scss/theme.scss 0 → 100644
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
uni_modules/uni-scss/variables.scss 0 → 100644
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
uni_modules/uni-transition/changelog.md 0 → 100644
## 1.3.3（2024-04-23）
- 修复 当元素会受变量影响自动隐藏的bug
## 1.3.2（2023-05-04）
- 修复 NVUE 平台报错的问题
## 1.3.1（2021-11-23）
- 修复 init 方法初始化问题
## 1.3.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-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
## 1.2.1（2021-09-27）
- 修复 init 方法不生效的 Bug
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.1（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的 Bug
## 1.1.0（2021-04-22）
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑，使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.2（2021-02-05）
- 调整为 uni_modules 目录规范
uni_modules/uni-transition/components/uni-transition/createAnimation.js 0 → 100644
// const defaultOption = {
// duration: 300,
// timingFunction: 'linear',
// delay: 0,
// transformOrigin: '50% 50% 0'
// }
// #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation')
// #endif
class MPAnimation {
constructor(options, _this) {
this.options = options
// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
this.animation = uni.createAnimation({
...options
})
this.currentStepAnimates = {}
this.next = 0
this.$ = _this
}
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next]
let styles = {}
if (!aniObj) {
styles = {
styles: {},
config: {}
}
} else {
styles = aniObj
}
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
}
let unit = ''
if(type === 'rotate'){
unit = 'deg'
}
styles.styles.transform += `${type}(${args+unit}) `
} else {
styles.styles[type] = `${args}`
}
this.currentStepAnimates[this.next] = styles
}
_animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref
if (!ref) return
return new Promise((resolve, reject) => {
nvueAnimation.transition(ref, {
styles,
...config
}, res => {
resolve()
})
})
}
_nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step]
if (obj) {
let {
styles,
config
} = obj
this._animateRun(styles, config).then(() => {
step += 1
this._nvueNextAnimate(animates, step, fn)
})
} else {
this.currentStepAnimates = {}
typeof fn === 'function' && fn()
this.isEnd = true
}
}
step(config = {}) {
// #ifndef APP-NVUE
this.animation.step(config)
// #endif
// #ifdef APP-NVUE
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
this.next++
// #endif
return this
}
run(fn) {
// #ifndef APP-NVUE
this.$.animationData = this.animation.export()
this.$.timer = setTimeout(() => {
typeof fn === 'function' && fn()
}, this.$.durationTime)
// #endif
// #ifdef APP-NVUE
this.isEnd = false
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0
// #endif
}
}
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ'
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) {
// #ifndef APP-NVUE
this.animation[type](...args)
// #endif
// #ifdef APP-NVUE
this._nvuePushAnimates(type, args)
// #endif
return this
}
})
export function createAnimation(option, _this) {
if(!_this) return
clearTimeout(_this.timer)
return new MPAnimation(option, _this)
}
uni_modules/uni-transition/components/uni-transition/uni-transition.vue 0 → 100644
<template>
<!-- #ifndef APP-NVUE -->
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
},
customClass:{
type: String,
default: ''
},
onceRender:{
type:Boolean,
default:false
},
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// 避免上来就执行 close,导致动画错乱
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
// 生成样式数据
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
// 动画默认配置
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj),this)
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
for (let i in obj) {
try {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
this.animation[i](obj[i])
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
this.animation.step(config)
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
// 开始过度动画
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
// 处理动画开始前的默认样式
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
// 处理内置组合动画
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 0 : 1,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
// 内置动画类型与实际动画对应字典
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 驼峰转中横线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
<style></style>
unpackage/dist/dev/.sourcemap/mp-weixin/common/vendor.js.map 0 → 100644
This diff could not be displayed because it is too large.
unpackage/dist/dev/mp-weixin/common/vendor.js 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment