xt / xcx-book · Commits

Go to a project

Commit 938e65a9ee7dc62b923734dabbc35babe9436e78

Authored by vking
1 parent c1dea71e
build: skipped

new 2.0

Inline Side-by-side
Showing 10 changed files with 5262 additions and 1083 deletions
... ... @@ -132,16 +132,12 @@
"text": "订座"
},
{
"pagePath": "pages/me/follow",
"pagePath": "pages/reserve/search",
"text": "关注"
},
{
"pagePath": "pages/customer/list",
"pagePath": "pages/me/list",
"text": "日程"
},
{
"pagePath": "pages/me/index",
"text": "我的"
}
]
},
... ...
/*
Animation 微动画
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
*/
/* css 滤镜 控制黑白底色gif的 */
.gif-black{
mix-blend-mode: screen;
}
.gif-white{
mix-blend-mode: multiply;
}
/* Animation css */
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
.animation-fade {
animation-name: fade;
animation-duration: .8s;
animation-timing-function: linear
}
.animation-scale-up {
animation-name: scale-up
}
.animation-scale-down {
animation-name: scale-down
}
.animation-slide-top {
animation-name: slide-top
}
.animation-slide-bottom {
animation-name: slide-bottom
}
.animation-slide-left {
animation-name: slide-left
}
.animation-slide-right {
animation-name: slide-right
}
.animation-shake {
animation-name: shake
}
.animation-reverse {
animation-direction: reverse
}
@keyframes fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0)
}
10% {
transform: translateX(-9px)
}
20% {
transform: translateX(8px)
}
30% {
transform: translateX(-7px)
}
40% {
transform: translateX(6px)
}
50% {
transform: translateX(-5px)
}
60% {
transform: translateX(4px)
}
70% {
transform: translateX(-3px)
}
80% {
transform: translateX(2px)
}
90% {
transform: translateX(-1px)
}
}
@keyframes slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
\ No newline at end of file
... ...
/*
ColorUi for MP-weixin v2.1.4 | by 文晓港 2019年4月25日19:15:42
仅供学习交流，如作它用所承受的法律责任一概与作者无关
使用ColorUi开发扩展与插件时，请注明基于ColorUi开发
（QQ交流群：240787041）
*/
/* ==================
初始化
==================== */
page {
/* Color 可以自定义相关配色 */
/* var属性兼容性 --> https://www.caniuse.com/#feat=css-variables */
/* 标准色 */
--red: #e54d42;
--orange: #f37b1d;
--yellow: #fbbd08;
--olive: #8dc63f;
--green: #39b54a;
--cyan: #1cbbb4;
--blue: #42A5FF;
--purple: #6739b6;
--mauve: #9c26b0;
--pink: #e03997;
--brown: #a5673f;
--grey: #8799a3;
--black: #333333;
--darkGray: #666666;
--gray: #999999;
--ghostWhite: #f1f1f1;
--white: #ffffff;
/* 浅色 */
--redLight: #fadbd9;
--orangeLight: #fde6d2;
--yellowLight: #fef2ce;
--oliveLight: #e8f4d9;
--greenLight: #d7f0db;
--cyanLight: #d2f1f0;
--blueLight: #cce6ff;
--purpleLight: #e1d7f0;
--mauveLight: #ebd4ef;
--pinkLight: #f9d7ea;
--brownLight: #ede1d9;
--greyLight: #e7ebed;
/* 渐变色 */
--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
/* 阴影透明色 */
--ShadowSize: 6rpx 6rpx 8rpx;
--redShadow: rgba(204, 69, 59, 0.2);
--orangeShadow: rgba(217, 109, 26, 0.2);
--yellowShadow: rgba(224, 170, 7, 0.2);
--oliveShadow: rgba(124, 173, 55, 0.2);
--greenShadow: rgba(48, 156, 63, 0.2);
--cyanShadow: rgba(28, 187, 180, 0.2);
--blueShadow: rgba(0, 102, 204, 0.2);
--purpleShadow: rgba(88, 48, 156, 0.2);
--mauveShadow: rgba(133, 33, 150, 0.2);
--pinkShadow: rgba(199, 50, 134, 0.2);
--brownShadow: rgba(140, 88, 53, 0.2);
--greyShadow: rgba(114, 130, 138, 0.2);
--grayShadow: rgba(114, 130, 138, 0.2);
--blackShadow: rgba(26, 26, 26, 0.2);
/*background-color: var(--ghostWhite);*/
font-size: 28rpx;
color: var(--black);
font-family: Helvetica Neue, Helvetica, sans-serif;
}
.view,
.scroll-view,
.swiper,
.button,
.input,
.textarea,
.label,
.navigator,
.image {
box-sizing: border-box;
background-size: 100% 100%;
}
.round {
border-radius: 5000rpx;
}
.radius {
border-radius: 6rpx;
}
/* ==================
图片
==================== */
image {
max-width: 100%;
display: inline-block;
position: relative;
z-index: 0;
}
image.loading::before {
content: "";
background-color: #f5f5f5;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: -2;
}
image.loading::after {
content: "\e7f1";
font-family: "cuIcon";
position: absolute;
top: 0;
left: 0;
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
right: 0;
bottom: 0;
z-index: -1;
font-size: 32rpx;
margin: auto;
color: #ccc;
-webkit-animation: cuIcon-spin 2s infinite linear;
animation: cuIcon-spin 2s infinite linear;
display: block;
}
.response {
width: 100%;
}
/* ==================
开关
==================== */
switch,
checkbox,
radio {
position: relative;
}
switch::after,
switch::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: var(--white) !important;
top: 0%;
left: 0rpx;
font-size: 26rpx;
line-height: 26px;
width: 50%;
text-align: center;
pointer-events: none;
transform: scale(0, 0);
transition: all 0.3s ease-in-out 0s;
z-index: 9;
bottom: 0;
height: 26px;
margin: auto;
}
switch::before {
content: "\e646";
right: 0;
transform: scale(1, 1);
left: auto;
}
switch[checked]::after,
switch.checked::after {
transform: scale(1, 1);
}
switch[checked]::before,
switch.checked::before {
transform: scale(0, 0);
}
switch[checked]::before {
transform: scale(0, 0);
}
radio::before,
checkbox::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: var(--white) !important;
top: 50%;
margin-top: -8px;
right: 5px;
font-size: 32rpx;
line-height: 16px;
pointer-events: none;
transform: scale(1, 1);
transition: all 0.3s ease-in-out 0s;
z-index: 9;
}
radio .wx-radio-input,
checkbox .wx-checkbox-input {
margin: 0;
width: 24px;
height: 24px;
}
checkbox.round .wx-checkbox-input {
border-radius: 100rpx;
}
switch .wx-switch-input {
border: none;
padding: 0 24px;
width: 48px;
height: 26px;
margin: 0;
border-radius: 100rpx;
}
switch .wx-switch-input:not([class*="bg-"]) {
background: var(--grey) !important;
}
switch .wx-switch-input::after {
margin: auto;
width: 26px;
height: 26px;
border-radius: 100rpx;
left: 0rpx;
top: 0rpx;
bottom: 0rpx;
position: absolute;
transform: scale(0.9, 0.9);
transition: all 0.1s ease-in-out 0s;
}
switch .wx-switch-input.wx-switch-input-checked::after {
margin: auto;
left: 22px;
box-shadow: none;
transform: scale(0.9, 0.9);
}
radio-group {
display: inline-block;
}
switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before {
border-radius: 10rpx;
}
switch .wx-switch-input::before,
radio.radio::before,
checkbox .wx-checkbox-input::before,
radio .wx-radio-input::before,
radio.radio::before {
display: none;
}
radio.radio[checked]::after {
content: "";
background-color: transparent;
display: block;
position: absolute;
width: 8px;
height: 8px;
z-index: 999;
top: 0rpx;
left: 0rpx;
right: 0;
bottom: 0;
margin: auto;
border-radius: 200rpx;
border: 8px solid var(--white) !important;
}
.switch-sex::after {
content: "\e71c";
}
.switch-sex::before {
content: "\e71a";
}
.switch-sex .wx-switch-input {
background: var(--red) !important;
border-color: var(--red) !important;
}
.switch-sex[checked] .wx-switch-input {
background: var(--blue) !important;
border-color: var(--blue) !important;
}
.switch-user::after {
content: "\e7f5";
}
.switch-user::before {
content: "\e78c";
}
.switch-user .wx-switch-input {
background-color: var(--red) !important;
border-color: var(--red) !important;
}
.switch-user[checked] .wx-switch-input {
background-color: var(--blue) !important;
border-color: var(--blue) !important;
}
switch.red[checked] .wx-switch-input,
checkbox.red[checked] .wx-checkbox-input,
radio.red[checked] .wx-radio-input {
border-color: var(--red) !important;
}
switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
border-color: var(--orange) !important;
}
switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
border-color: var(--yellow) !important;
}
switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input,
radio.olive[checked] .wx-radio-input {
border-color: var(--olive) !important;
}
switch.green[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input {
border-color: var(--green) !important;
}
switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input,
radio.cyan[checked] .wx-radio-input {
border-color: var(--cyan) !important;
}
switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input,
radio.blue[checked] .wx-radio-input {
border-color: var(--blue) !important;
}
switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
border-color: var(--purple) !important;
}
switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input,
radio.mauve[checked] .wx-radio-input {
border-color: var(--mauve) !important;
}
switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input,
radio.pink[checked] .wx-radio-input {
border-color: var(--pink) !important;
}
switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input,
radio.brown[checked] .wx-radio-input {
border-color: var(--brown) !important;
}
switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input,
radio.grey[checked] .wx-radio-input {
border-color: var(--grey) !important;
}
switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input,
radio.gray[checked] .wx-radio-input {
border-color: var(--grey) !important;
}
switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input,
radio.black[checked] .wx-radio-input {
border-color: var(--black) !important;
}
switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input,
radio.white[checked] .wx-radio-input {
border-color: var(--white) !important;
}
switch.red[checked] .wx-switch-input.wx-switch-input-checked,
checkbox.red[checked] .wx-checkbox-input,
radio.red[checked] .wx-radio-input {
background-color: var(--red) !important;
color: var(--white) !important;
}
switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
background-color: var(--orange) !important;
color: var(--white) !important;
}
switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
background-color: var(--yellow) !important;
color: var(--black) !important;
}
switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input,
radio.olive[checked] .wx-radio-input {
background-color: var(--olive) !important;
color: var(--white) !important;
}
switch.green[checked] .wx-switch-input,
switch[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input,
radio[checked] .wx-radio-input {
background-color: var(--green) !important;
color: var(--white) !important;
}
switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input,
radio.cyan[checked] .wx-radio-input {
background-color: var(--cyan) !important;
color: var(--white) !important;
}
switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input,
radio.blue[checked] .wx-radio-input {
background-color: var(--blue) !important;
color: var(--white) !important;
}
switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
background-color: var(--purple) !important;
color: var(--white) !important;
}
switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input,
radio.mauve[checked] .wx-radio-input {
background-color: var(--mauve) !important;
color: var(--white) !important;
}
switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input,
radio.pink[checked] .wx-radio-input {
background-color: var(--pink) !important;
color: var(--white) !important;
}
switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input,
radio.brown[checked] .wx-radio-input {
background-color: var(--brown) !important;
color: var(--white) !important;
}
switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input,
radio.grey[checked] .wx-radio-input {
background-color: var(--grey) !important;
color: var(--white) !important;
}
switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input,
radio.gray[checked] .wx-radio-input {
background-color: #f0f0f0 !important;
color: var(--black) !important;
}
switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input,
radio.black[checked] .wx-radio-input {
background-color: var(--black) !important;
color: var(--white) !important;
}
switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input,
radio.white[checked] .wx-radio-input {
background-color: var(--white) !important;
color: var(--black) !important;
}
/* ==================
边框
==================== */
/* -- 实线 -- */
.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left,
.solids,
.solids-top,
.solids-right,
.solids-bottom,
.solids-left,
.dashed,
.dashed-top,
.dashed-right,
.dashed-bottom,
.dashed-left {
position: relative;
}
.solid::after,
.solid-top::after,
.solid-right::after,
.solid-bottom::after,
.solid-left::after,
.solids::after,
.solids-top::after,
.solids-right::after,
.solids-bottom::after,
.solids-left::after,
.dashed::after,
.dashed-top::after,
.dashed-right::after,
.dashed-bottom::after,
.dashed-left::after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
}
.solid::after {
border: 1rpx solid rgba(0, 0, 0, 0.1);
}
.solid-top::after {
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
}
.solid-right::after {
border-right: 1rpx solid rgba(0, 0, 0, 0.1);
}
.solid-bottom::after {
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
.solid-left::after {
border-left: 1rpx solid rgba(0, 0, 0, 0.1);
}
.solids::after {
border: 8rpx solid #eee;
}
.solids-top::after {
border-top: 8rpx solid #eee;
}
.solids-right::after {
border-right: 8rpx solid #eee;
}
.solids-bottom::after {
border-bottom: 8rpx solid #eee;
}
.solids-left::after {
border-left: 8rpx solid #eee;
}
/* -- 虚线 -- */
.dashed::after {
border: 1rpx dashed #ddd;
}
.dashed-top::after {
border-top: 1rpx dashed #ddd;
}
.dashed-right::after {
border-right: 1rpx dashed #ddd;
}
.dashed-bottom::after {
border-bottom: 1rpx dashed #ddd;
}
.dashed-left::after {
border-left: 1rpx dashed #ddd;
}
/* -- 阴影 -- */
.shadow[class*='white'] {
--ShadowSize: 0 1rpx 6rpx;
}
.shadow-lg {
--ShadowSize: 0rpx 40rpx 100rpx 0rpx;
}
.shadow-warp {
position: relative;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.shadow-warp:before,
.shadow-warp:after {
position: absolute;
content: "";
top: 20rpx;
bottom: 30rpx;
left: 20rpx;
width: 50%;
box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
transform: rotate(-3deg);
z-index: -1;
}
.shadow-warp:after {
right: 20rpx;
left: auto;
transform: rotate(3deg);
}
.shadow-blur {
position: relative;
}
.shadow-blur::before {
content: "";
display: block;
background: inherit;
filter: blur(10rpx);
position: absolute;
width: 100%;
height: 100%;
top: 10rpx;
left: 10rpx;
z-index: -1;
opacity: 0.4;
transform-origin: 0 0;
border-radius: inherit;
transform: scale(1, 1);
}
/* ==================
按钮
==================== */
.cu-btn {
position: relative;
border: 0rpx;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 30rpx;
font-size: 28rpx;
height: 64rpx;
line-height: 1;
text-align: center;
text-decoration: none;
overflow: visible;
margin-left: initial;
transform: translate(0rpx, 0rpx);
margin-right: initial;
}
.cu-btn::after {
display: none;
}
.cu-btn:not([class*="bg-"]) {
background-color: #f0f0f0;
}
.cu-btn[class*="line"] {
background-color: transparent;
}
.cu-btn[class*="line"]::after {
content: " ";
display: block;
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1rpx solid currentColor;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 12rpx;
z-index: 1;
pointer-events: none;
}
.cu-btn.round[class*="line"]::after {
border-radius: 1000rpx;
}
.cu-btn[class*="lines"]::after {
border: 6rpx solid currentColor;
}
.cu-btn[class*="bg-"]::after {
display: none;
}
.cu-btn.sm {
padding: 0 20rpx;
font-size: 20rpx;
height: 48rpx;
}
.cu-btn.lg {
padding: 0 40rpx;
font-size: 32rpx;
height: 80rpx;
}
.cu-btn.icon.sm {
width: 48rpx;
height: 48rpx;
}
.cu-btn.icon {
width: 64rpx;
height: 64rpx;
border-radius: 500rpx;
padding: 0;
}
button.icon.lg {
width: 80rpx;
height: 80rpx;
}
.cu-btn.shadow-blur::before {
top: 4rpx;
left: 4rpx;
filter: blur(6rpx);
opacity: 0.6;
}
.cu-btn.button-hover {
transform: translate(1rpx, 1rpx);
}
.block {
display: block;
}
.cu-btn.block {
display: flex;
}
.cu-btn[disabled] {
opacity: 0.6;
color: var(--white);
}
/* ==================
徽章
==================== */
.cu-tag {
font-size: 24rpx;
vertical-align: middle;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0rpx 16rpx;
height: 48rpx;
font-family: Helvetica Neue, Helvetica, sans-serif;
white-space: nowrap;
}
.cu-tag:not([class*="bg"]):not([class*="line"]) {
background-color: var(--ghostWhite);
}
.cu-tag[class*="line-"]::after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1rpx solid currentColor;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
border-radius: inherit;
z-index: 1;
pointer-events: none;
}
.cu-tag.radius[class*="line"]::after {
border-radius: 12rpx;
}
.cu-tag.round[class*="line"]::after {
border-radius: 1000rpx;
}
.cu-tag[class*="line-"]::after {
border-radius: 0;
}
.cu-tag+.cu-tag {
margin-left: 10rpx;
}
.cu-tag.sm {
font-size: 20rpx;
padding: 0rpx 12rpx;
height: 32rpx;
}
.cu-capsule {
display: inline-flex;
vertical-align: middle;
}
.cu-capsule+.cu-capsule {
margin-left: 10rpx;
}
.cu-capsule .cu-tag {
margin: 0;
}
.cu-capsule .cu-tag[class*="line-"]:last-child::after {
border-left: 0rpx solid transparent;
}
.cu-capsule .cu-tag[class*="line-"]:first-child::after {
border-right: 0rpx solid transparent;
}
.cu-capsule.radius .cu-tag:first-child {
border-top-left-radius: 6rpx;
border-bottom-left-radius: 6rpx;
}
.cu-capsule.radius .cu-tag:last-child::after,
.cu-capsule.radius .cu-tag[class*="line-"] {
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
}
.cu-capsule.round .cu-tag:first-child {
border-top-left-radius: 200rpx;
border-bottom-left-radius: 200rpx;
text-indent: 4rpx;
}
.cu-capsule.round .cu-tag:last-child::after,
.cu-capsule.round .cu-tag:last-child {
border-top-right-radius: 200rpx;
border-bottom-right-radius: 200rpx;
text-indent: -4rpx;
}
.cu-tag.badge {
border-radius: 200rpx;
position: absolute;
top: -10rpx;
right: -10rpx;
font-size: 20rpx;
padding: 0rpx 10rpx;
height: 28rpx;
color: var(--white);
}
.cu-tag.badge:not([class*="bg-"]) {
background-color: #dd514c;
}
.cu-tag:empty:not([class*="cuIcon-"]) {
padding: 0rpx;
width: 16rpx;
height: 16rpx;
top: -4rpx;
right: -4rpx;
}
.cu-tag[class*="cuIcon-"] {
width: 32rpx;
height: 32rpx;
top: -4rpx;
right: -4rpx;
}
/* ==================
头像
==================== */
.cu-avatar {
font-variant: small-caps;
margin: 0;
padding: 0;
display: inline-flex;
text-align: center;
justify-content: center;
align-items: center;
background-color: #ccc;
color: var(--white);
white-space: nowrap;
position: relative;
width: 64rpx;
height: 64rpx;
background-size: cover;
background-position: center;
vertical-align: middle;
font-size: 1.5em;
}
.cu-avatar.sm {
width: 48rpx;
height: 48rpx;
font-size: 1em;
}
.cu-avatar.lg {
width: 96rpx;
height: 96rpx;
font-size: 2em;
}
.cu-avatar.xl {
width: 128rpx;
height: 128rpx;
font-size: 2.5em;
}
.cu-avatar .avatar-text {
font-size: 0.4em;
}
.cu-avatar-group {
direction: rtl;
unicode-bidi: bidi-override;
padding: 0 10rpx 0 40rpx;
display: inline-block;
}
.cu-avatar-group .cu-avatar {
margin-left: -30rpx;
border: 4rpx solid var(--ghostWhite);
vertical-align: middle;
}
.cu-avatar-group .cu-avatar.sm {
margin-left: -20rpx;
border: 1rpx solid var(--ghostWhite);
}
/* ==================
进度条
==================== */
.cu-progress {
overflow: hidden;
height: 28rpx;
background-color: #ebeef5;
display: inline-flex;
align-items: center;
width: 100%;
}
.cu-progress+view,
.cu-progress+text {
line-height: 1;
}
.cu-progress.xs {
height: 10rpx;
}
.cu-progress.sm {
height: 20rpx;
}
.cu-progress view {
width: 0;
height: 100%;
align-items: center;
display: flex;
justify-items: flex-end;
justify-content: space-around;
font-size: 20rpx;
color: var(--white);
transition: width 0.6s ease;
}
.cu-progress text {
align-items: center;
display: flex;
font-size: 20rpx;
color: var(--black);
text-indent: 10rpx;
}
.cu-progress.text-progress {
padding-right: 60rpx;
}
.cu-progress.striped view {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 72rpx 72rpx;
}
.cu-progress.active view {
animation: progress-stripes 2s linear infinite;
}
@keyframes progress-stripes {
from {
background-position: 72rpx 0;
}
to {
background-position: 0 0;
}
}
/* ==================
加载
==================== */
.cu-load {
display: block;
line-height: 3em;
text-align: center;
}
.cu-load::before {
font-family: "cuIcon";
display: inline-block;
margin-right: 6rpx;
}
.cu-load.loading::before {
content: "\e67a";
animation: cuIcon-spin 2s infinite linear;
}
.cu-load.loading::after {
content: "加载中...";
}
.cu-load.over::before {
content: "\e64a";
}
.cu-load.over::after {
content: "没有更多了";
}
.cu-load.erro::before {
content: "\e658";
}
.cu-load.erro::after {
content: "加载失败";
}
.cu-load.load-icon::before {
font-size: 32rpx;
}
.cu-load.load-icon::after {
display: none;
}
.cu-load.load-icon.over {
display: none;
}
.cu-load.load-modal {
position: fixed;
top: 0;
right: 0;
bottom: 140rpx;
left: 0;
margin: auto;
width: 260rpx;
height: 260rpx;
background-color: var(--white);
border-radius: 10rpx;
box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-size: 28rpx;
z-index: 9999;
line-height: 2.4em;
}
.cu-load.load-modal [class*="cuIcon-"] {
font-size: 60rpx;
}
.cu-load.load-modal image {
width: 70rpx;
height: 70rpx;
}
.cu-load.load-modal::after {
content: "";
position: absolute;
background-color: var(--white);
border-radius: 50%;
width: 200rpx;
height: 200rpx;
font-size: 10px;
border-top: 6rpx solid rgba(0, 0, 0, 0.05);
border-right: 6rpx solid rgba(0, 0, 0, 0.05);
border-bottom: 6rpx solid rgba(0, 0, 0, 0.05);
border-left: 6rpx solid var(--orange);
animation: cuIcon-spin 1s infinite linear;
z-index: -1;
}
.load-progress {
pointer-events: none;
top: 0;
position: fixed;
width: 100%;
left: 0;
z-index: 2000;
}
.load-progress.hide {
display: none;
}
.load-progress .load-progress-bar {
position: relative;
width: 100%;
height: 4rpx;
overflow: hidden;
transition: all 200ms ease 0s;
}
.load-progress .load-progress-spinner {
position: absolute;
top: 10rpx;
right: 10rpx;
z-index: 2000;
display: block;
}
.load-progress .load-progress-spinner::after {
content: "";
display: block;
width: 24rpx;
height: 24rpx;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid 4rpx transparent;
border-top-color: inherit;
border-left-color: inherit;
border-radius: 50%;
-webkit-animation: load-progress-spinner 0.4s linear infinite;
animation: load-progress-spinner 0.4s linear infinite;
}
@-webkit-keyframes load-progress-spinner {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load-progress-spinner {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* ==================
列表
==================== */
.grayscale {
filter: grayscale(1);
}
.cu-list+.cu-list {
margin-top: 30rpx
}
.cu-list>.cu-item {
transition: all .6s ease-in-out 0s;
transform: translateX(0rpx)
}
.cu-list>.cu-item.move-cur {
transform: translateX(-260rpx)
}
.cu-list>.cu-item .move {
position: absolute;
right: 0;
display: flex;
width: 260rpx;
height: 100%;
transform: translateX(100%)
}
.cu-list>.cu-item .move view {
display: flex;
flex: 1;
justify-content: center;
align-items: center
}
.cu-list.menu-avatar {
overflow: hidden;
}
.cu-list.menu-avatar>.cu-item {
position: relative;
display: flex;
padding-right: 10rpx;
height: 140rpx;
background-color: var(--white);
justify-content: flex-end;
align-items: center
}
.cu-list.menu-avatar>.cu-item>.cu-avatar {
position: absolute;
left: 30rpx
}
.cu-list.menu-avatar>.cu-item .flex .text-cut {
max-width: 510rpx
}
.cu-list.menu-avatar>.cu-item .content {
position: absolute;
left: 146rpx;
width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
line-height: 1.6em;
}
.cu-list.menu-avatar>.cu-item .content.flex-sub {
width: calc(100% - 96rpx - 60rpx - 20rpx);
}
.cu-list.menu-avatar>.cu-item .content>view:first-child {
font-size: 30rpx;
display: flex;
align-items: center
}
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
display: inline-block;
margin-left: 10rpx;
height: 28rpx;
font-size: 16rpx;
line-height: 32rpx
}
.cu-list.menu-avatar>.cu-item .action {
width: 100rpx;
text-align: center
}
.cu-list.menu-avatar>.cu-item .action view+view {
margin-top: 10rpx
}
.cu-list.menu-avatar.comment>.cu-item .content {
position: relative;
left: 0;
width: auto;
flex: 1;
}
.cu-list.menu-avatar.comment>.cu-item {
padding: 30rpx 30rpx 30rpx 120rpx;
height: auto
}
.cu-list.menu-avatar.comment .cu-avatar {
align-self: flex-start
}
.cu-list.menu>.cu-item {
position: relative;
display: flex;
padding: 0 30rpx;
min-height: 100rpx;
background-color: var(--white);
justify-content: space-between;
align-items: center
}
.cu-list.menu>.cu-item:last-child:after {
border: none
}
.cu-list.menu>.cu-item:after {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 200%;
height: 200%;
border-bottom: 1rpx solid #ddd;
border-radius: inherit;
content: " ";
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none
}
.cu-list.menu>.cu-item.grayscale {
background-color: #f5f5f5
}
.cu-list.menu>.cu-item.cur {
background-color: #fcf7e9
}
.cu-list.menu>.cu-item.arrow {
padding-right: 90rpx
}
.cu-list.menu>.cu-item.arrow:before {
position: absolute;
top: 0;
right: 30rpx;
bottom: 0;
display: block;
margin: auto;
width: 30rpx;
height: 30rpx;
color: var(--grey);
content: "\e6a3";
text-align: center;
font-size: 34rpx;
font-family: "cuIcon";
line-height: 30rpx
}
.cu-list.menu>.cu-item button.content {
padding: 0;
background-color: transparent;
justify-content: flex-start
}
.cu-list.menu>.cu-item button.content:after {
display: none
}
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
border-color: var(--white)
}
.cu-list.menu>.cu-item .content>view:first-child {
display: flex;
align-items: center
}
.cu-list.menu>.cu-item .content>text[class*=cuIcon] {
display: inline-block;
margin-right: 10rpx;
width: 1.6em;
text-align: center
}
.cu-list.menu>.cu-item .content>image {
display: inline-block;
margin-right: 10rpx;
width: 1.6em;
height: 1.6em;
vertical-align: middle
}
.cu-list.menu>.cu-item .content {
font-size: 30rpx;
line-height: 1.6em;
flex: 1
}
.cu-list.menu>.cu-item .content .cu-tag.sm {
display: inline-block;
margin-left: 10rpx;
height: 28rpx;
font-size: 16rpx;
line-height: 32rpx
}
.cu-list.menu>.cu-item .action .cu-tag:empty {
right: 10rpx
}
.cu-list.menu {
display: block;
overflow: hidden
}
.cu-list.menu.sm-border>.cu-item:after {
left: 30rpx;
width: calc(200% - 120rpx)
}
.cu-list.grid>.cu-item {
position: relative;
display: flex;
padding: 20rpx 0 30rpx;
transition-duration: 0s;
flex-direction: column
}
.cu-list.grid>.cu-item:after {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 200%;
height: 200%;
border-right: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1);
border-radius: inherit;
content: " ";
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none
}
.cu-list.grid>.cu-item text {
display: block;
margin-top: 10rpx;
color: #888;
font-size: 26rpx;
line-height: 40rpx
}
.cu-list.grid>.cu-item [class*=cuIcon] {
position: relative;
display: block;
margin-top: 20rpx;
width: 100%;
font-size: 48rpx
}
.cu-list.grid>.cu-item .cu-tag {
right: auto;
left: 50%;
margin-left: 20rpx
}
.cu-list.grid {
background-color: var(--white);
text-align: center
}
.cu-list.grid.no-border>.cu-item {
padding-top: 10rpx;
padding-bottom: 20rpx
}
.cu-list.grid.no-border>.cu-item:after {
border: none
}
.cu-list.grid.no-border {
padding: 20rpx 10rpx
}
.cu-list.grid.col-3>.cu-item:nth-child(3n):after,
.cu-list.grid.col-4>.cu-item:nth-child(4n):after,
.cu-list.grid.col-5>.cu-item:nth-child(5n):after {
border-right-width: 0
}
.cu-list.card-menu {
overflow: hidden;
margin-right: 30rpx;
margin-left: 30rpx;
border-radius: 20rpx
}
/* ==================
操作条
==================== */
.cu-bar {
display: flex;
position: relative;
align-items: center;
min-height: 100rpx;
justify-content: space-between;
}
.cu-bar .action {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
max-width: 100%;
}
.cu-bar .action.border-title {
position: relative;
top: -10rpx;
}
.cu-bar .action.border-title text[class*="bg-"]:last-child {
position: absolute;
bottom: -0.5rem;
min-width: 2rem;
height: 6rpx;
left: 0;
}
.cu-bar .action.sub-title {
position: relative;
top: -0.2rem;
}
.cu-bar .action.sub-title text {
position: relative;
z-index: 1;
}
.cu-bar .action.sub-title text[class*="bg-"]:last-child {
position: absolute;
display: inline-block;
bottom: -0.2rem;
border-radius: 6rpx;
width: 100%;
height: 0.6rem;
left: 0.6rem;
opacity: 0.3;
z-index: 0;
}
.cu-bar .action.sub-title text[class*="text-"]:last-child {
position: absolute;
display: inline-block;
bottom: -0.7rem;
left: 0.5rem;
opacity: 0.2;
z-index: 0;
text-align: right;
font-weight: 900;
font-size: 36rpx;
}
.cu-bar.justify-center .action.border-title text:last-child,
.cu-bar.justify-center .action.sub-title text:last-child {
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.cu-bar .action:first-child {
margin-left: 30rpx;
font-size: 30rpx;
}
.cu-bar .action text.text-cut {
text-align: left;
width: 100%;
}
.cu-bar .cu-avatar:first-child {
margin-left: 20rpx;
}
.cu-bar .action:first-child>text[class*="cuIcon-"] {
margin-left: -0.3em;
margin-right: 0.3em;
}
.cu-bar .action:last-child {
margin-right: 30rpx;
}
.cu-bar .action>text[class*="cuIcon-"],
.cu-bar .action>view[class*="cuIcon-"] {
font-size: 36rpx;
}
.cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] {
margin-left: 0.5em;
}
.cu-bar .content {
position: absolute;
text-align: center;
width: calc(100% - 340rpx);
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 60rpx;
font-size: 32rpx;
line-height: 60rpx;
cursor: none;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.cu-bar.ios .content {
bottom: 7px;
height: 30px;
font-size: 32rpx;
line-height: 30px;
}
.cu-bar.btn-group {
justify-content: space-around;
}
.cu-bar.btn-group button {
padding: 20rpx 32rpx;
}
.cu-bar.btn-group button {
flex: 1;
margin: 0 20rpx;
max-width: 50%;
}
.cu-bar .search-form {
background-color: #f5f5f5;
line-height: 64rpx;
height: 64rpx;
font-size: 24rpx;
color: var(--black);
flex: 1;
display: flex;
align-items: center;
margin: 0 30rpx;
}
.cu-bar .search-form+.action {
margin-right: 30rpx;
}
.cu-bar .search-form input {
flex: 1;
padding-right: 30rpx;
height: 64rpx;
line-height: 64rpx;
font-size: 26rpx;
background-color: transparent;
}
.cu-bar .search-form [class*="cuIcon-"] {
margin: 0 0.5em 0 0.8em;
}
.cu-bar .search-form [class*="cuIcon-"]::before {
top: 0rpx;
}
.cu-bar.fixed,
.nav.fixed {
position: fixed;
width: 100%;
top: 0;
z-index: 1024;
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}
.cu-bar.foot {
position: fixed;
width: 100%;
bottom: 0;
z-index: 1024;
box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
}
.cu-bar.tabbar {
padding: 0;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.cu-tabbar-height {
min-height: 100rpx;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
}
.cu-bar.tabbar.shadow {
box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
}
.cu-bar.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.cu-bar.tabbar.shop .action {
width: 140rpx;
flex: initial;
}
.cu-bar.tabbar .action.add-action {
position: relative;
z-index: 2;
padding-top: 50rpx;
background-color: inherit;
}
.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
position: absolute;
width: 70rpx;
z-index: 2;
height: 70rpx;
border-radius: 50%;
line-height: 70rpx;
font-size: 50rpx;
top: -35rpx;
left: 0;
right: 0;
margin: auto;
padding: 0;
}
.cu-bar.tabbar .action.add-action::after {
content: "";
position: absolute;
width: 100rpx;
height: 100rpx;
top: -50rpx;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08);
border-radius: 50rpx;
background-color: inherit;
z-index: 0;
}
.cu-bar.tabbar .action.add-action::before {
content: "";
position: absolute;
width: 100rpx;
height: 30rpx;
bottom: 30rpx;
left: 0;
right: 0;
margin: auto;
background-color: inherit;
z-index: 1;
}
.cu-bar.tabbar .btn-group {
flex: 1;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 10rpx;
}
.cu-bar.tabbar button.action::after {
border: 0;
}
.cu-bar.tabbar .action [class*="cuIcon-"] {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 40rpx;
}
.cu-bar.tabbar .action .cuIcon-cu-image {
margin: 0 auto;
}
.cu-bar.tabbar .action .cuIcon-cu-image image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
.cu-bar.tabbar .submit {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
position: relative;
flex: 2;
align-self: stretch;
}
.cu-bar.tabbar .submit:last-child {
flex: 2.6;
}
.cu-bar.tabbar .submit+.submit {
flex: 2;
}
.cu-bar.tabbar.border .action::before {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
transform: scale(0.5);
transform-origin: 0 0;
border-right: 1rpx solid rgba(0, 0, 0, 0.1);
z-index: 3;
}
.cu-bar.tabbar.border .action:last-child:before {
display: none;
}
.cu-bar.input {
padding-right: 20rpx;
background-color: var(--white);
}
.cu-bar.input input {
overflow: initial;
line-height: 64rpx;
height: 64rpx;
min-height: 64rpx;
flex: 1;
font-size: 30rpx;
margin: 0 20rpx;
}
.cu-bar.input .action {
margin-left: 20rpx;
}
.cu-bar.input .action [class*="cuIcon-"] {
font-size: 48rpx;
}
.cu-bar.input input+.action {
margin-right: 20rpx;
margin-left: 0rpx;
}
.cu-bar.input .action:first-child [class*="cuIcon-"] {
margin-left: 0rpx;
}
.cu-custom {
display: block;
position: relative;
}
.cu-custom .cu-bar .content {
width: calc(100% - 440rpx);
}
.cu-custom .cu-bar .content image {
height: 60rpx;
width: 240rpx;
}
.cu-custom .cu-bar {
min-height: 0px;
padding-right: 220rpx;
box-shadow: 0rpx 0rpx 0rpx;
z-index: 9999;
}
.cu-custom .cu-bar .border-custom {
position: relative;
background: rgba(0, 0, 0, 0.15);
border-radius: 1000rpx;
height: 30px;
}
.cu-custom .cu-bar .border-custom::after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 1rpx solid var(--white);
opacity: 0.5;
}
.cu-custom .cu-bar .border-custom::before {
content: " ";
width: 1rpx;
height: 110%;
position: absolute;
top: 22.5%;
left: 0;
right: 0;
margin: auto;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
opacity: 0.6;
background-color: var(--white);
}
.cu-custom .cu-bar .border-custom text {
display: block;
flex: 1;
margin: auto !important;
text-align: center;
font-size: 34rpx;
}
/* ==================
导航栏
==================== */
.nav {
white-space: nowrap;
}
::-webkit-scrollbar {
display: none;
}
.nav .cu-item {
height: 90rpx;
display: inline-block;
line-height: 90rpx;
margin: 0 10rpx;
padding: 0 20rpx;
}
.nav .cu-item.cur {
border-bottom: 4rpx solid;
}
/* ==================
时间轴
==================== */
.cu-timeline {
display: block;
background-color: var(--white);
}
.cu-timeline .cu-time {
width: 120rpx;
text-align: center;
padding: 20rpx 0;
font-size: 26rpx;
color: #888;
display: block;
}
.cu-timeline>.cu-item {
padding: 30rpx 30rpx 30rpx 120rpx;
position: relative;
display: block;
z-index: 0;
}
.cu-timeline>.cu-item:not([class*="text-"]) {
color: #ccc;
}
.cu-timeline>.cu-item::after {
content: "";
display: block;
position: absolute;
width: 1rpx;
background-color: #ddd;
left: 60rpx;
height: 100%;
top: 0;
z-index: 8;
}
.cu-timeline>.cu-item::before {
font-family: "cuIcon";
display: block;
position: absolute;
top: 36rpx;
z-index: 9;
background-color: var(--white);
width: 50rpx;
height: 50rpx;
text-align: center;
border: none;
line-height: 50rpx;
left: 36rpx;
}
.cu-timeline>.cu-item:not([class*="cuIcon-"])::before {
content: "\e763";
}
.cu-timeline>.cu-item[class*="cuIcon-"]::before {
background-color: var(--white);
width: 50rpx;
height: 50rpx;
text-align: center;
border: none;
line-height: 50rpx;
left: 36rpx;
}
.cu-timeline>.cu-item>.content {
padding: 30rpx;
border-radius: 6rpx;
display: block;
line-height: 1.6;
}
.cu-timeline>.cu-item>.content:not([class*="bg-"]) {
background-color: var(--ghostWhite);
color: var(--black);
}
.cu-timeline>.cu-item>.content+.content {
margin-top: 20rpx;
}
/* ==================
聊天
==================== */
.cu-chat {
display: flex;
flex-direction: column;
}
.cu-chat .cu-item {
display: flex;
padding: 30rpx 30rpx 70rpx;
position: relative;
}
.cu-chat .cu-item>.cu-avatar {
width: 80rpx;
height: 80rpx;
}
.cu-chat .cu-item>.main {
max-width: calc(100% - 260rpx);
margin: 0 40rpx;
display: flex;
align-items: center;
}
.cu-chat .cu-item>image {
height: 320rpx;
}
.cu-chat .cu-item>.main .content {
padding: 20rpx;
border-radius: 6rpx;
display: inline-flex;
max-width: 100%;
align-items: center;
font-size: 30rpx;
position: relative;
min-height: 80rpx;
line-height: 40rpx;
text-align: left;
}
.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
background-color: var(--white);
color: var(--black);
}
.cu-chat .cu-item .date {
position: absolute;
font-size: 24rpx;
color: var(--grey);
width: calc(100% - 320rpx);
bottom: 20rpx;
left: 160rpx;
}
.cu-chat .cu-item .action {
padding: 0 30rpx;
display: flex;
align-items: center;
}
.cu-chat .cu-item>.main .content::after {
content: "";
top: 27rpx;
transform: rotate(45deg);
position: absolute;
z-index: 100;
display: inline-block;
overflow: hidden;
width: 24rpx;
height: 24rpx;
left: -12rpx;
right: initial;
background-color: inherit;
}
.cu-chat .cu-item.self>.main .content::after {
left: auto;
right: -12rpx;
}
.cu-chat .cu-item>.main .content::before {
content: "";
top: 30rpx;
transform: rotate(45deg);
position: absolute;
z-index: -1;
display: inline-block;
overflow: hidden;
width: 24rpx;
height: 24rpx;
left: -12rpx;
right: initial;
background-color: inherit;
filter: blur(5rpx);
opacity: 0.3;
}
.cu-chat .cu-item>.main .content:not([class*="bg-"])::before {
background-color: var(--black);
opacity: 0.1;
}
.cu-chat .cu-item.self>.main .content::before {
left: auto;
right: -12rpx;
}
.cu-chat .cu-item.self {
justify-content: flex-end;
text-align: right;
}
.cu-chat .cu-info {
display: inline-block;
margin: 20rpx auto;
font-size: 24rpx;
padding: 8rpx 12rpx;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 6rpx;
color: var(--white);
max-width: 400rpx;
line-height: 1.4;
}
/* ==================
卡片
==================== */
.cu-card {
display: block;
overflow: hidden;
}
.cu-card>.cu-item {
display: block;
background-color: var(--white);
overflow: hidden;
border-radius: 10rpx;
margin: 30rpx;
}
.cu-card>.cu-item.shadow-blur {
overflow: initial;
}
.cu-card.no-card>.cu-item {
margin: 0rpx;
border-radius: 0rpx;
}
.cu-card .grid.grid-square {
margin-bottom: -20rpx;
}
.cu-card.case .image {
position: relative;
}
.cu-card.case .image image {
width: 100%;
}
.cu-card.case .image .cu-tag {
position: absolute;
right: 0;
top: 0;
}
.cu-card.case .image .cu-bar {
position: absolute;
bottom: 0;
width: 100%;
background-color: transparent;
padding: 0rpx 30rpx;
}
.cu-card.case.no-card .image {
margin: 30rpx 30rpx 0;
overflow: hidden;
border-radius: 10rpx;
}
.cu-card.dynamic {
display: block;
}
.cu-card.dynamic>.cu-item {
display: block;
background-color: var(--white);
overflow: hidden;
}
.cu-card.dynamic>.cu-item>.text-content {
padding: 0 30rpx 0;
max-height: 6.4em;
overflow: hidden;
font-size: 30rpx;
margin-bottom: 20rpx;
}
.cu-card.dynamic>.cu-item .square-img {
width: 100%;
height: 200rpx;
border-radius: 6rpx;
}
.cu-card.dynamic>.cu-item .only-img {
width: 100%;
height: 320rpx;
border-radius: 6rpx;
}
.cu-card.article {
display: block;
}
.cu-card.article>.cu-item {
padding-bottom: 30rpx;
}
.cu-card.article>.cu-item .title {
font-size: 30rpx;
font-weight: 900;
color: var(--black);
line-height: 100rpx;
padding: 0 30rpx;
}
.cu-card.article>.cu-item .content {
display: flex;
padding: 0 30rpx;
}
.cu-card.article>.cu-item .content>image {
width: 240rpx;
height: 6.4em;
margin-right: 20rpx;
border-radius: 6rpx;
}
.cu-card.article>.cu-item .content .desc {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cu-card.article>.cu-item .content .text-content {
font-size: 28rpx;
color: #888;
height: 4.8em;
overflow: hidden;
}
/* ==================
表单
==================== */
.cu-form-group {
background-color: var(--white);
padding: 1rpx 30rpx;
display: flex;
align-items: center;
min-height: 100rpx;
justify-content: space-between;
}
.cu-form-group+.cu-form-group {
border-top: 1rpx solid #eee;
}
.cu-form-group .title {
text-align: justify;
padding-right: 30rpx;
font-size: 30rpx;
position: relative;
height: 60rpx;
line-height: 60rpx;
}
.cu-form-group input {
flex: 1;
font-size: 30rpx;
color: #555;
padding-right: 20rpx;
}
.cu-form-group>text[class*="cuIcon-"] {
font-size: 36rpx;
padding: 0;
box-sizing: border-box;
}
.cu-form-group textarea {
margin: 32rpx 0 30rpx;
height: 4.6em;
width: 100%;
line-height: 1.2em;
flex: 1;
font-size: 28rpx;
padding: 0;
}
.cu-form-group.align-start .title {
height: 1em;
margin-top: 32rpx;
line-height: 1em;
}
.cu-form-group picker {
flex: 1;
padding-right: 40rpx;
overflow: hidden;
position: relative;
}
.cu-form-group picker .picker {
line-height: 100rpx;
font-size: 28rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
text-align: right;
}
.cu-form-group picker::after {
font-family: "cuIcon";
display: block;
content: "\e6a3";
position: absolute;
font-size: 34rpx;
color: var(--grey);
line-height: 100rpx;
width: 60rpx;
text-align: center;
top: 0;
bottom: 0;
right: -20rpx;
margin: auto;
}
.cu-form-group textarea[disabled],
.cu-form-group textarea[disabled] .placeholder {
color: transparent;
}
/* ==================
模态窗口
==================== */
.cu-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1110;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
transform: scale(1.185);
backface-visibility: hidden;
perspective: 2000rpx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
.cu-modal::before {
content: "\200B";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.cu-modal.show {
opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
}
.cu-dialog {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 680rpx;
max-width: 100%;
background-color: #f8f8f8;
border-radius: 10rpx;
overflow: hidden;
}
.cu-modal.bottom-modal::before {
vertical-align: bottom;
}
.cu-modal.bottom-modal .cu-dialog {
width: 100%;
border-radius: 0;
}
.cu-modal.bottom-modal {
margin-bottom: -1000rpx;
}
.cu-modal.bottom-modal.show {
margin-bottom: 0;
}
.cu-modal.drawer-modal {
transform: scale(1);
display: flex;
}
.cu-modal.drawer-modal .cu-dialog {
height: 100%;
min-width: 200rpx;
border-radius: 0;
margin: initial;
transition-duration: 0.3s;
}
.cu-modal.drawer-modal.justify-start .cu-dialog {
transform: translateX(-100%);
}
.cu-modal.drawer-modal.justify-end .cu-dialog {
transform: translateX(100%);
}
.cu-modal.drawer-modal.show .cu-dialog {
transform: translateX(0%);
}
.cu-modal .cu-dialog>.cu-bar:first-child .action{
min-width: 100rpx;
margin-right: 0;
min-height: 100rpx;
}
/* ==================
轮播
==================== */
swiper .a-swiper-dot {
display: inline-block;
width: 16rpx;
height: 16rpx;
background: rgba(0, 0, 0, .3);
border-radius: 50%;
vertical-align: middle;
}
swiper[class*="-dot"] .wx-swiper-dots {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
swiper.square-dot .wx-swiper-dot {
background-color: var(--white);
opacity: 0.4;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 0 8rpx !important;
}
swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
opacity: 1;
width: 30rpx;
}
swiper.round-dot .wx-swiper-dot {
width: 10rpx;
height: 10rpx;
position: relative;
margin: 4rpx 8rpx !important;
}
swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {
content: "";
position: absolute;
width: 10rpx;
height: 10rpx;
top: 0rpx;
left: 0rpx;
right: 0;
bottom: 0;
margin: auto;
background-color: var(--white);
border-radius: 20rpx;
}
swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
width: 18rpx;
height: 18rpx;
}
.screen-swiper {
min-height: 375rpx;
}
.screen-swiper image,
.screen-swiper video,
.swiper-item image,
.swiper-item video {
width: 100%;
display: block;
height: 100%;
margin: 0;
pointer-events: none;
}
.card-swiper {
height: 420rpx !important;
}
.card-swiper swiper-item {
width: 610rpx !important;
left: 70rpx;
box-sizing: border-box;
padding: 40rpx 0rpx 70rpx;
overflow: initial;
}
.card-swiper swiper-item .swiper-item {
width: 100%;
display: block;
height: 100%;
border-radius: 10rpx;
transform: scale(0.9);
transition: all 0.2s ease-in 0s;
overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item {
transform: none;
transition: all 0.2s ease-in 0s;
}
.tower-swiper {
height: 420rpx;
position: relative;
max-width: 750rpx;
overflow: hidden;
}
.tower-swiper .tower-item {
position: absolute;
width: 300rpx;
height: 380rpx;
top: 0;
bottom: 0;
left: 50%;
margin: auto;
transition: all 0.2s ease-in 0s;
opacity: 1;
}
.tower-swiper .tower-item.none {
opacity: 0;
}
.tower-swiper .tower-item .swiper-item {
width: 100%;
height: 100%;
border-radius: 6rpx;
overflow: hidden;
}
/* ==================
步骤条
==================== */
.cu-steps {
display: flex;
}
scroll-view.cu-steps {
display: block;
white-space: nowrap;
}
scroll-view.cu-steps .cu-item {
display: inline-block;
}
.cu-steps .cu-item {
flex: 1;
text-align: center;
position: relative;
min-width: 100rpx;
}
.cu-steps .cu-item:not([class*="text-"]) {
color: var(--grey);
}
.cu-steps .cu-item [class*="cuIcon-"],
.cu-steps .cu-item .num {
display: block;
font-size: 40rpx;
line-height: 80rpx;
}
.cu-steps .cu-item::before,
.cu-steps .cu-item::after,
.cu-steps.steps-arrow .cu-item::before,
.cu-steps.steps-arrow .cu-item::after {
content: "";
display: block;
position: absolute;
height: 0px;
width: calc(100% - 80rpx);
border-bottom: 1px solid #ccc;
left: calc(0px - (100% - 80rpx) / 2);
top: 40rpx;
z-index: 0;
}
.cu-steps.steps-arrow .cu-item::before,
.cu-steps.steps-arrow .cu-item::after {
content: "\e6a3";
font-family: "cuIcon";
height: 30rpx;
border-bottom-width: 0px;
line-height: 30rpx;
top: 0;
bottom: 0;
margin: auto;
color: #ccc;
}
.cu-steps.steps-bottom .cu-item::before,
.cu-steps.steps-bottom .cu-item::after {
bottom: 40rpx;
top: initial;
}
.cu-steps .cu-item::after {
border-bottom: 1px solid currentColor;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"]::after {
width: calc(100% - 80rpx);
color: currentColor;
}
.cu-steps .cu-item:first-child::before,
.cu-steps .cu-item:first-child::after {
display: none;
}
.cu-steps .cu-item .num {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
line-height: 40rpx;
margin: 20rpx auto;
font-size: 24rpx;
border: 1px solid currentColor;
position: relative;
overflow: hidden;
}
.cu-steps .cu-item[class*="text-"] .num {
background-color: currentColor;
}
.cu-steps .cu-item .num::before,
.cu-steps .cu-item .num::after {
content: attr(data-index);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: all 0.3s ease-in-out 0s;
transform: translateY(0rpx);
}
.cu-steps .cu-item[class*="text-"] .num::before {
transform: translateY(-40rpx);
color: var(--white);
}
.cu-steps .cu-item .num::after {
transform: translateY(40rpx);
color: var(--white);
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"] .num::after {
content: "\e645";
font-family: "cuIcon";
color: var(--white);
transform: translateY(0rpx);
}
.cu-steps .cu-item[class*="text-"] .num.err::after {
content: "\e646";
}
/* ==================
布局
==================== */
/* -- flex弹性布局 -- */
.flex {
display: flex;
}
.basis-xs {
flex-basis: 20%;
}
.basis-sm {
flex-basis: 40%;
}
.basis-df {
flex-basis: 50%;
}
.basis-lg {
flex-basis: 60%;
}
.basis-xl {
flex-basis: 80%;
}
.flex-sub {
flex: 1;
}
.flex-twice {
flex: 2;
}
.flex-treble {
flex: 3;
}
.flex-direction {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.align-center {
align-items: center;
}
.align-stretch {
align-items: stretch;
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: flex-center;
}
.self-end {
align-self: flex-end;
}
.self-stretch {
align-self: stretch;
}
.align-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
/* grid布局 */
.grid {
display: flex;
flex-wrap: wrap;
}
.grid.grid-square {
overflow: hidden;
}
.grid.grid-square .cu-tag {
position: absolute;
right: 0;
top: 0;
border-bottom-left-radius: 6rpx;
padding: 6rpx 12rpx;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.grid.grid-square>view>text[class*="cuIcon-"] {
font-size: 52rpx;
position: absolute;
color: var(--grey);
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.grid.grid-square>view {
margin-right: 20rpx;
margin-bottom: 20rpx;
border-radius: 6rpx;
position: relative;
overflow: hidden;
}
.grid.grid-square>view.bg-img image {
width: 100%;
height: 100%;
position: absolute;
}
.grid.col-1.grid-square>view {
padding-bottom: 100%;
height: 0;
margin-right: 0;
}
.grid.col-2.grid-square>view {
padding-bottom: calc((100% - 20rpx)/2);
height: 0;
width: calc((100% - 20rpx)/2);
}
.grid.col-3.grid-square>view {
padding-bottom: calc((100% - 40rpx)/3);
height: 0;
width: calc((100% - 40rpx)/3);
}
.grid.col-4.grid-square>view {
padding-bottom: calc((100% - 60rpx)/4);
height: 0;
width: calc((100% - 60rpx)/4);
}
.grid.col-5.grid-square>view {
padding-bottom: calc((100% - 80rpx)/5);
height: 0;
width: calc((100% - 80rpx)/5);
}
.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n){
margin-right: 0;
}
.grid.col-1>view {
width: 100%;
}
.grid.col-2>view {
width: 50%;
}
.grid.col-3>view {
width: 33.33%;
}
.grid.col-4>view {
width: 25%;
}
.grid.col-5>view {
width: 20%;
}
/* -- 内外边距 -- */
.margin-0 {
margin: 0;
}
.margin-xs {
margin: 10rpx;
}
.margin-sm {
margin: 20rpx;
}
.margin {
margin: 30rpx;
}
.margin-lg {
margin: 40rpx;
}
.margin-xl {
margin: 50rpx;
}
.margin-top-xs {
margin-top: 10rpx;
}
.margin-top-sm {
margin-top: 20rpx;
}
.margin-top {
margin-top: 30rpx;
}
.margin-top-lg {
margin-top: 40rpx;
}
.margin-top-xl {
margin-top: 50rpx;
}
.margin-right-xs {
margin-right: 10rpx;
}
.margin-right-sm {
margin-right: 20rpx;
}
.margin-right {
margin-right: 30rpx;
}
.margin-right-lg {
margin-right: 40rpx;
}
.margin-right-xl {
margin-right: 50rpx;
}
.margin-bottom-xs {
margin-bottom: 10rpx;
}
.margin-bottom-sm {
margin-bottom: 20rpx;
}
.margin-bottom {
margin-bottom: 30rpx;
}
.margin-bottom-lg {
margin-bottom: 40rpx;
}
.margin-bottom-xl {
margin-bottom: 50rpx;
}
.margin-left-xs {
margin-left: 10rpx;
}
.margin-left-sm {
margin-left: 20rpx;
}
.margin-left {
margin-left: 30rpx;
}
.margin-left-lg {
margin-left: 40rpx;
}
.margin-left-xl {
margin-left: 50rpx;
}
.margin-lr-xs {
margin-left: 10rpx;
margin-right: 10rpx;
}
.margin-lr-sm {
margin-left: 20rpx;
margin-right: 20rpx;
}
.margin-lr {
margin-left: 30rpx;
margin-right: 30rpx;
}
.margin-lr-lg {
margin-left: 40rpx;
margin-right: 40rpx;
}
.margin-lr-xl {
margin-left: 50rpx;
margin-right: 50rpx;
}
.margin-tb-xs {
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.margin-tb-sm {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.margin-tb {
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.margin-tb-lg {
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.margin-tb-xl {
margin-top: 50rpx;
margin-bottom: 50rpx;
}
.padding-0 {
padding: 0;
}
.padding-xs {
padding: 10rpx;
}
.padding-sm {
padding: 20rpx;
}
.padding {
padding: 30rpx;
}
.padding-lg {
padding: 40rpx;
}
.padding-xl {
padding: 50rpx;
}
.padding-top-xs {
padding-top: 10rpx;
}
.padding-top-sm {
padding-top: 20rpx;
}
.padding-top {
padding-top: 30rpx;
}
.padding-top-lg {
padding-top: 40rpx;
}
.padding-top-xl {
padding-top: 50rpx;
}
.padding-right-xs {
padding-right: 10rpx;
}
.padding-right-sm {
padding-right: 20rpx;
}
.padding-right {
padding-right: 30rpx;
}
.padding-right-lg {
padding-right: 40rpx;
}
.padding-right-xl {
padding-right: 50rpx;
}
.padding-bottom-xs {
padding-bottom: 10rpx;
}
.padding-bottom-sm {
padding-bottom: 20rpx;
}
.padding-bottom {
padding-bottom: 30rpx;
}
.padding-bottom-lg {
padding-bottom: 40rpx;
}
.padding-bottom-xl {
padding-bottom: 50rpx;
}
.padding-left-xs {
padding-left: 10rpx;
}
.padding-left-sm {
padding-left: 20rpx;
}
.padding-left {
padding-left: 30rpx;
}
.padding-left-lg {
padding-left: 40rpx;
}
.padding-left-xl {
padding-left: 50rpx;
}
.padding-lr-xs {
padding-left: 10rpx;
padding-right: 10rpx;
}
.padding-lr-sm {
padding-left: 20rpx;
padding-right: 20rpx;
}
.padding-lr {
padding-left: 30rpx;
padding-right: 30rpx;
}
.padding-lr-lg {
padding-left: 40rpx;
padding-right: 40rpx;
}
.padding-lr-xl {
padding-left: 50rpx;
padding-right: 50rpx;
}
.padding-tb-xs {
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.padding-tb-sm {
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.padding-tb {
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.padding-tb-lg {
padding-top: 40rpx;
padding-bottom: 40rpx;
}
.padding-tb-xl {
padding-top: 50rpx;
padding-bottom: 50rpx;
}
/* -- 浮动 -- */
.cf::after,
.cf::before {
content: " ";
display: table;
}
.cf::after {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
/* ==================
背景
==================== */
.line-red::after,
.lines-red::after {
border-color: var(--red);
}
.line-orange::after,
.lines-orange::after {
border-color: var(--orange);
}
.line-yellow::after,
.lines-yellow::after {
border-color: var(--yellow);
}
.line-olive::after,
.lines-olive::after {
border-color: var(--olive);
}
.line-green::after,
.lines-green::after {
border-color: var(--green);
}
.line-cyan::after,
.lines-cyan::after {
border-color: var(--cyan);
}
.line-blue::after,
.lines-blue::after {
border-color: var(--blue);
}
.line-purple::after,
.lines-purple::after {
border-color: var(--purple);
}
.line-mauve::after,
.lines-mauve::after {
border-color: var(--mauve);
}
.line-pink::after,
.lines-pink::after {
border-color: var(--pink);
}
.line-brown::after,
.lines-brown::after {
border-color: var(--brown);
}
.line-grey::after,
.lines-grey::after {
border-color: var(--grey);
}
.line-gray::after,
.lines-gray::after {
border-color: var(--gray);
}
.line-black::after,
.lines-black::after {
border-color: var(--black);
}
.line-white::after,
.lines-white::after {
border-color: var(--white);
}
.bg-red {
background-color: var(--red);
color: var(--white);
}
.bg-orange {
background-color: var(--orange);
color: var(--white);
}
.bg-yellow {
background-color: var(--yellow);
color: var(--black);
}
.bg-olive {
background-color: var(--olive);
color: var(--white);
}
.bg-green {
background-color: var(--green);
color: var(--white);
}
.bg-cyan {
background-color: var(--cyan);
color: var(--white);
}
.bg-blue {
background-color: var(--blue);
color: var(--white);
}
.bg-purple {
background-color: var(--purple);
color: var(--white);
}
.bg-mauve {
background-color: var(--mauve);
color: var(--white);
}
.bg-pink {
background-color: var(--pink);
color: var(--white);
}
.bg-brown {
background-color: var(--brown);
color: var(--white);
}
.bg-grey {
background-color: var(--grey);
color: var(--white);
}
.bg-gray {
background-color: #f0f0f0;
color: var(--black);
}
.bg-black {
background-color: var(--black);
color: var(--white);
}
.bg-white {
background-color: var(--white);
color: var(--darkGray);
}
.bg-shadeTop {
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
color: var(--white);
}
.bg-shadeBottom {
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
color: var(--white);
}
.bg-red.light {
color: var(--red);
background-color: var(--redLight);
}
.bg-orange.light {
color: var(--orange);
background-color: var(--orangeLight);
}
.bg-yellow.light {
color: var(--yellow);
background-color: var(--yellowLight);
}
.bg-olive.light {
color: var(--olive);
background-color: var(--oliveLight);
}
.bg-green.light {
color: var(--green);
background-color: var(--greenLight);
}
.bg-cyan.light {
color: var(--cyan);
background-color: var(--cyanLight);
}
.bg-blue.light {
color: var(--blue);
background-color: var(--blueLight);
}
.bg-purple.light {
color: var(--purple);
background-color: var(--purpleLight);
}
.bg-mauve.light {
color: var(--mauve);
background-color: var(--mauveLight);
}
.bg-pink.light {
color: var(--pink);
background-color: var(--pinkLight);
}
.bg-brown.light {
color: var(--brown);
background-color: var(--brownLight);
}
.bg-grey.light {
color: var(--grey);
background-color: var(--greyLight);
}
.bg-gradual-red {
background-image: var(--gradualRed);
color: var(--white);
}
.bg-gradual-orange {
background-image: var(--gradualOrange);
color: var(--white);
}
.bg-gradual-green {
background-image: var(--gradualGreen);
color: var(--white);
}
.bg-gradual-purple {
background-image: var(--gradualPurple);
color: var(--white);
}
.bg-gradual-pink {
background-image: var(--gradualPink);
color: var(--white);
}
.bg-gradual-blue {
background-image: var(--gradualBlue);
color: var(--white);
}
.shadow[class*="-red"] {
box-shadow: var(--ShadowSize) var(--redShadow);
}
.shadow[class*="-orange"] {
box-shadow: var(--ShadowSize) var(--orangeShadow);
}
.shadow[class*="-yellow"] {
box-shadow: var(--ShadowSize) var(--yellowShadow);
}
.shadow[class*="-olive"] {
box-shadow: var(--ShadowSize) var(--oliveShadow);
}
.shadow[class*="-green"] {
box-shadow: var(--ShadowSize) var(--greenShadow);
}
.shadow[class*="-cyan"] {
box-shadow: var(--ShadowSize) var(--cyanShadow);
}
.shadow[class*="-blue"] {
box-shadow: var(--ShadowSize) var(--blueShadow);
}
.shadow[class*="-purple"] {
box-shadow: var(--ShadowSize) var(--purpleShadow);
}
.shadow[class*="-mauve"] {
box-shadow: var(--ShadowSize) var(--mauveShadow);
}
.shadow[class*="-pink"] {
box-shadow: var(--ShadowSize) var(--pinkShadow);
}
.shadow[class*="-brown"] {
box-shadow: var(--ShadowSize) var(--brownShadow);
}
.shadow[class*="-grey"] {
box-shadow: var(--ShadowSize) var(--greyShadow);
}
.shadow[class*="-gray"] {
box-shadow: var(--ShadowSize) var(--grayShadow);
}
.shadow[class*="-black"] {
box-shadow: var(--ShadowSize) var(--blackShadow);
}
.shadow[class*="-white"] {
box-shadow: var(--ShadowSize) var(--blackShadow);
}
.text-shadow[class*="-red"] {
text-shadow: var(--ShadowSize) var(--redShadow);
}
.text-shadow[class*="-orange"] {
text-shadow: var(--ShadowSize) var(--orangeShadow);
}
.text-shadow[class*="-yellow"] {
text-shadow: var(--ShadowSize) var(--yellowShadow);
}
.text-shadow[class*="-olive"] {
text-shadow: var(--ShadowSize) var(--oliveShadow);
}
.text-shadow[class*="-green"] {
text-shadow: var(--ShadowSize) var(--greenShadow);
}
.text-shadow[class*="-cyan"] {
text-shadow: var(--ShadowSize) var(--cyanShadow);
}
.text-shadow[class*="-blue"] {
text-shadow: var(--ShadowSize) var(--blueShadow);
}
.text-shadow[class*="-purple"] {
text-shadow: var(--ShadowSize) var(--purpleShadow);
}
.text-shadow[class*="-mauve"] {
text-shadow: var(--ShadowSize) var(--mauveShadow);
}
.text-shadow[class*="-pink"] {
text-shadow: var(--ShadowSize) var(--pinkShadow);
}
.text-shadow[class*="-brown"] {
text-shadow: var(--ShadowSize) var(--brownShadow);
}
.text-shadow[class*="-grey"] {
text-shadow: var(--ShadowSize) var(--greyShadow);
}
.text-shadow[class*="-gray"] {
text-shadow: var(--ShadowSize) var(--grayShadow);
}
.text-shadow[class*="-black"] {
text-shadow: var(--ShadowSize) var(--blackShadow);
}
.bg-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bg-mask {
background-color: var(--black);
position: relative;
}
.bg-mask::after {
content: "";
border-radius: inherit;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.bg-mask view,
.bg-mask cover-view {
z-index: 5;
position: relative;
}
.bg-video {
position: relative;
}
.bg-video video {
display: block;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
z-index: 0;
pointer-events: none;
}
/* ==================
文本
==================== */
.text-xs {
font-size: 20rpx;
}
.text-sm {
font-size: 24rpx;
}
.text-df {
font-size: 28rpx;
}
.text-lg {
font-size: 32rpx;
}
.text-xl {
font-size: 36rpx;
}
.text-xxl {
font-size: 44rpx;
}
.text-sl {
font-size: 80rpx;
}
.text-xsl {
font-size: 120rpx;
}
.text-Abc {
text-transform: Capitalize;
}
.text-ABC {
text-transform: Uppercase;
}
.text-abc {
text-transform: Lowercase;
}
.text-price::before {
content: "¥";
font-size: 80%;
margin-right: 4rpx;
}
.text-cut {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.text-bold {
font-weight: bold;
}
.text-center {
text-align: center;
}
.text-content {
line-height: 1.6;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-red,
.line-red,
.lines-red {
color: var(--red);
}
.text-orange,
.line-orange,
.lines-orange {
color: var(--orange);
}
.text-yellow,
.line-yellow,
.lines-yellow {
color: var(--yellow);
}
.text-olive,
.line-olive,
.lines-olive {
color: var(--olive);
}
.text-green,
.line-green,
.lines-green {
color: var(--green);
}
.text-cyan,
.line-cyan,
.lines-cyan {
color: var(--cyan);
}
.text-blue,
.line-blue,
.lines-blue {
color: var(--blue);
}
.text-purple,
.line-purple,
.lines-purple {
color: var(--purple);
}
.text-mauve,
.line-mauve,
.lines-mauve {
color: var(--mauve);
}
.text-pink,
.line-pink,
.lines-pink {
color: var(--pink);
}
.text-brown,
.line-brown,
.lines-brown {
color: var(--brown);
}
.text-grey,
.line-grey,
.lines-grey {
color: var(--grey);
}
.text-gray,
.line-gray,
.lines-gray {
color: var(--gray);
}
.text-black,
.line-black,
.lines-black {
color: var(--black);
}
.text-white,
.line-white,
.lines-white {
color: var(--white);
}
... ...
// components/book/tabBar/tabBar.js
import util from '../utils/util'
import PubSub from '../utils/PubSub'
Component({
/**
* 组件的属性列表
... ... @@ -10,34 +11,17 @@ Component({
* 组件的初始数据
*/
data: {
pi: 0,
dot:0,
list: [
{
"pagePath": "pages/reserve/index",
"text": "订座",
"iconPath": "pages/image/tabicon1.png",
"selectedIconPath": "pages/image/tabicon1.active.png"
},
{
"pagePath": "pages/me/follow",
"text": "关注",
"iconPath": "pages/image/follow.png",
"selectedIconPath": "pages/image/follow.active.png"
},
{
"pagePath": "pages/customer/list",
"text": "日程",
"iconPath": "pages/image/tabicon3.png",
"selectedIconPath": "pages/image/tabicon3.active.png"
},
{
"pagePath": "pages/me/index",
"text": "我的",
"iconPath": "pages/image/tabicon4.png",
"selectedIconPath": "pages/image/tabicon4.active.png"
}
]
url:'pages/reserve/index'
},
pageLifetimes:{
show(){
console.log('custom-tab-bar.pageLifetimes.show')
//this.setStatus()
},
hide(){
console.log('custom-tab-bar.pageLifetimes.hide')
//this.setStatus()
},
},
lifetimes: {
ready(){
... ... @@ -46,6 +30,9 @@ Component({
attached: function() {
// 在组件实例进入页面节点树时执行
console.log('custom-tab-bar.attached')
PubSub.on('custom-tab-bar',()=>{
this.setStatus()
})
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
... ... @@ -53,22 +40,29 @@ Component({
},
moved:function() {
console.log('custom-tab-bar.moved')
PubSub.off('custom-tab-bar');
},
},
/**
* 组件的方法列表
*/
methods: {
redirectTo(e){
let url = util.attr(e, 'url');
setStatus(){
let pages = getCurrentPages();
let p = pages[pages.length - 1];
if (url.indexOf(p.route) < 0) {
wx.switchTab({
url: '/'+url,
})
}
console.log('custom-tab-bar.setStatus',p.route)
this.setData({
url:p.route,
})
},
redirectTo(e){
let url= util.attr(e, 'url');
this.setData({
url:url,
})
wx.switchTab({
url: '/'+url,
})
},
}
})
... ...
<!--components/book/tabBar/tabBar.wxml-->
<view class="tabBar flex-cc" >
<block wx:for="{{list}}" wx:key="list">
<view class="item flex-vc" bindtap="redirectTo" data-url="{{item.pagePath}}">
<view class="item-view {{(selected==index)?'checked':''}}">
<view class="icon tabicon{{index+1}}"></view>
<view class="text">{{item.text}}</view>
</view>
<view class="view tabBar flex align-center" >
<view class="view home flex justify-center align-center {{('pages/reserve/index'==url)?'checked':''}}"
bindtap="redirectTo" data-url="pages/reserve/index">
<view class="view icon"></view><view class="text">附近</view>
</view>
<view class="view search flex justify-center align-center {{('pages/reserve/search'==url)?'checked':''}}" bindtap="redirectTo" data-url="pages/reserve/search">
<view>
<view class="view icon"></view>
<view class="text">找包间</view>
</view>
</block>
</view>
<view class="view order flex justify-center align-center {{('pages/me/list'==url)?'checked':''}}" bindtap="redirectTo" data-url="pages/me/list">
<view class="view icon"></view>
<view class="text">订单</view>
</view>
</view>
... ...
/* components/book/tabBar/tabBar.wxss */
@import "../app.wxss";
@import "../colorui/main.wxss";
.tabBar{
height: calc(98rpx + env(safe-area-inset-bottom));
background:rgba(249,249,249,1);
box-shadow:0rpx 0rpx 8rpx 0rpx rgba(224,224,224,1);
width:100%;
position: fixed;
z-index: 9;
box-sizing: border-box;
bottom: 0;
bottom: 34rpx;
left: calc(50% - 232rpx);
width: 464rpx;
height: calc(100rpx + env(safe-area-inset-bottom));
background: #FFFFFF;
box-shadow: 0rpx 0rpx 10rpx 0rpx #E5E5E5;
border-radius: 50rpx;
border: 2rpx solid #E5E5E5;
}
.home,.order{
width:176rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #999999;
}
.tabBar .text{
height:32rpx;
font-size:22rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(102,102,102,1);
line-height:32rpx;
margin-left: 14rpx;
}
.tabBar .checked .text{
color: #C28C56;
}
.tabBar .item{
width: 33%;
min-width: 20%;
height: 100%;
color: #5EB2FF;
}
.tabBar .item-view{
height: 100%;
}
.dot{
position: absolute;
width: 16rpx;
height: 16rpx;
background-color: #F05522;
border-radius: 50%;
right:-14rpx;
top:-8rpx;
.tabBar .search.checked .text{
color: #FFFFFF;
}
.tabBar .icon{
width: 48rpx;
height: 48rpx;
background-size: 100%;
position: relative;
.home .icon{
width: 34rpx;
height: 40rpx;
background-image: url("http://nosqn.colorcun.com/2.0/home%20%287%29.png");
}
.tabBar .icon image{
width: 100%;
height: 100%;
.home.checked .icon{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%286%29.png");
}
.tabBar .tabicon1{
width: 46rpx;
height: 46rpx;
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon1.png");
margin-top: 8rpx;
margin-bottom: 4rpx;
.order .icon{
width: 40rpx;
height: 40rpx;
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2812%29.png");
}
.tabBar .checked .tabicon1{
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon1.active.png");
.order.checked .icon{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%285%29.png");
}
.tabBar .tabicon2{
width:40rpx;
height:39rpx;
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon2.png");
margin-top: 14rpx;
margin-bottom: 6rpx;
background-repeat: no-repeat;
.search{
width: 112rpx;
height: 112rpx;
background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
box-shadow: 0rpx 0rpx 6rpx 0rpx #42A5FF;
border-radius: 50%;
}
.tabBar .checked .tabicon2{
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon2.active.png");
.search .text{
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 28rpx;
height: 28rpx;
margin-left: 0;
}
.tabBar .tabicon3{
width:44rpx;
height:42rpx;
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon3.png");
margin-top: 12rpx;
.search .icon{
width: 48rpx;
height: 48rpx;
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2810%29.png");
margin-bottom: 4rpx;
background-repeat: no-repeat;
}
.tabBar .checked .tabicon3{
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon3.active.png");
}
.tabBar .tabicon4{
width:40rpx;
height:40rpx;
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon4.png");
margin-top: 12rpx;
margin-bottom: 6rpx;
}
.tabBar .checked .tabicon4{
background-image: url("http://nosqn.colorcun.com/mapmenu/tabicon4.active.png");
}
... ...
... ... @@ -2,6 +2,7 @@
import util from '../../utils/util';
import App from '../../utils/api';
import RS from '../../utils/reserveStatus'
import PubSub from '../../utils/PubSub'
const {regeneratorRuntime} = global
Page({
... ... @@ -44,7 +45,7 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow: function () {
PubSub.emit('custom-tab-bar')
},
/**
... ...
// pages/reservr/index.js
var mta = require('mta-wechat-analysis')
import util from '../../utils/util';
import App from '../../utils/api';
import DA from './data';
import reddot from '../../utils/reddot';
import PubSub from '../../utils/PubSub'
const {regeneratorRuntime} = global
const mapScale=15//18;
const barHeight=50;
const transverseViewHeight=253+barHeight;
const renNum=function(){
let arr=[]
for(let i=1;i<=30;i++){
arr.push(i+'位')
}
return arr;
}
const cates_version='?1.2';
const hasSellerConcat=false;//变量存储所有商户
const def_latitude=39.684670;
const def_longitude=118.176300;
Page({
/**
* 页面的初始数据
*/
data: {
map: {
latitude: def_latitude+0.0001,
longitude: def_longitude+0.0001,
scale: mapScale,
height: 300,
},
markers: [],
//polygons:{},
//sellers:[],
multiArray: ['全部菜系'],
multiIndex: [0],
//scrollIntoView:'',
suggestion:{},
hasSuggestion:false,//搜索返回
current:0,
hasSellers:false,
hasGetSellersEnd:false,
hasSetActivity:false,
tags:[
{id:1,name:'环境好'},
{id:2,name:'菜品有特色'},
{id:3,name:'超大包间'},
],
listMoreCount:0,
hasSearchLimit:false,
hasGetPos:false,
},
hasClickMoveToLocation:false,//点击回到我的位置
hasSellerConcat:hasSellerConcat,
transverseViewHeight:transverseViewHeight,//横向滚动高度,苹果要比安卓多20
//qqmapsdk:null,
sellers: [],
sellersIds:[],
sellersNow:[],//本次视图内商户
searchAddrTop:50,
user:{
latitude: def_latitude,
longitude: def_longitude,
},
data:{},
/**
* 生命周期函数--监听页面加载
*/
hasOnLoad:false,
hasGetLocation:false,//定位信息
hasAppHide:false,//app切至后台
param:{},
onLoad: async function (options) {
this.reportTime=new Date()
onLoad: function (options) {
this.hasOnLoad=true;
// this.qqmapsdk=new QQMapWX({
// key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
// });
this.setData({
multiArray:[['全部菜系'].concat(await DA.getCates())]
})
mta.Page.init({
"appID": "500667280",
"eventID": "500667287",
"statPullDownFresh": true,
"statShareApp": true,
"statReachBottom": true,
"lauchOpts": options, //渠道分析
});
PubSub.on(
'searchParam',
data=>{
console.log('searchParam.msg',data)
if(data.fun=='tagsChange'){
this.tagsChange(data.e);
}
if(data.fun=='caixiActive'){
this.caixiActive(data.e);
}
if(data.fun=='setSuggestion'){
this.setSuggestion(data.suggestion);
}
if(data.fun=='moveToLocation'){
this.moveToLocation();
}
if(data.fun=='filterEvent'){
this.filterEvent(data.e)
}
}
)
PubSub.on(
'appHide',
data=>{
console.log('appHide');
let pages=getCurrentPages();
if(pages.length==1){//用户停留在首页
this.hasGetLocation=false
this.hasClickMoveToLocation=false
this.hasAppHide=true
}
}
)
reddot.init()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
mapCtx: null,
mapData:{
lat:'',
lng:'',
latitude: 0,
longitude: 0,
scale: 18,
hasRegionchange:false,
region:{
southwest:{},
northeast:{},
},
},
mapDataLast:null,//最后一次成功视角，防止地图视角丢失
onReady: function () {
if (wx.canIUse('reportPerformance')) {
wx.reportPerformance(2002, new Date()-this.reportTime)
}
this.mapCtx = wx.createMapContext('map')
// this.mapCtx.moveToLocation({
// success:(res)=>{
// console.log('moveToLocation',res)
// }
// })
},
/**
* 生命周期函数--监听页面显示
*/
onShow: async function (e) {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
console.log({
'this.hasGetLocation':this.hasGetLocation,
'this.hasOnLoad':this.hasOnLoad,
'this.hasClickMoveToLocation':this.hasClickMoveToLocation,
'this.data.hasSuggestion':this.data.hasSuggestion,
})
this.getClassNameFlag=true;
//this.getPos();
if(this.data.hasSuggestion) return;
if(!this.hasOnLoad && this.hasGetLocation) return;
this.hasOnLoad=false;
//导航栏自适应
let systemInfo = wx.getSystemInfoSync();
console.log('systemInfo:',systemInfo)
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
let h = 44;//导航状态栏高度
if(reg.test(systemInfo.system)){
pt = systemInfo.statusBarHeight;
h = 44;
if(systemInfo.pixelRatio>2){
this.transverseViewHeight=transverseViewHeight+26;
}
}else{
if(/xiaomi/i.test(systemInfo.brand)){
this.transverseViewHeight=transverseViewHeight+15;
}else{
this.transverseViewHeight=transverseViewHeight-15;
}
pt = systemInfo.statusBarHeight;
h = 48;
}
console.log('onShow',systemInfo,systemInfo.windowHeight,systemInfo.windowHeight-this.transverseViewHeight)
this.setData({
[`map.height`]: systemInfo.windowHeight-this.transverseViewHeight,
statusBarHeight: pt,
titleBarHeight:h,
})
//this.getPos(systemInfo);
this.systemInfo=systemInfo
//this.selectComponent('#getpos').getPos();
if(!this.hasClickMoveToLocation){
//this.getMarkers();
//this.timeoutGetMarkers();
}
onShow: function () {
PubSub.emit('custom-tab-bar')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function (e) {
util.elog(null,'离开地图页')
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
PubSub.off('searchParam')
PubSub.off('appHide')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
back:function() {
/*
var mta = require('mta-wechat-analysis')
import util from '../../utils/util';
import App from '../../utils/api';
import DA from './data';
import reddot from '../../utils/reddot';
import PubSub from '../../utils/PubSub'
const {regeneratorRuntime} = global
const mapScale = 15//18;
const barHeight = 50;
const transverseViewHeight = 253 + barHeight;
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
const renNum = function () {
let arr = []
for (let i = 1; i <= 30; i++) {
arr.push(i + '位')
}
return arr;
}
const cates_version = '?1.2';
const hasSellerConcat = false;//变量存储所有商户
const def_latitude = 39.684670;
const def_longitude = 118.176300;
*/
Page({
},
/**
* 页面的初始数据
*/
data: {
map: {
latitude: def_latitude + 0.0001,
longitude: def_longitude + 0.0001,
scale: mapScale,
height: 300,
},
markers: [],
//polygons:{},
//sellers:[],
multiArray: ['全部菜系'],
multiIndex: [0],
//scrollIntoView:'',
suggestion: {},
hasSuggestion: false,//搜索返回
current: 0,
hasSellers: false,
hasGetSellersEnd: false,
hasSetActivity: false,
tags: [
{id: 1, name: '环境好'},
{id: 2, name: '菜品有特色'},
{id: 3, name: '超大包间'},
],
listMoreCount: 0,
hasSearchLimit: false,
hasGetPos: false,
},
hasClickMoveToLocation: false,//点击回到我的位置
hasSellerConcat: hasSellerConcat,
transverseViewHeight: transverseViewHeight,//横向滚动高度,苹果要比安卓多20
//qqmapsdk:null,
sellers: [],
sellersIds: [],
sellersNow: [],//本次视图内商户
searchAddrTop: 50,
user: {
latitude: def_latitude,
longitude: def_longitude,
},
/**
* 生命周期函数--监听页面加载
*/
hasOnLoad: false,
hasGetLocation: false,//定位信息
hasAppHide: false,//app切至后台
param: {},
onLoad: async function (options) {
this.reportTime = new Date()
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return{
title:'请客订包间，就上周到安排'
}
},
onpos(e){
console.log('onpos',e);
let res=e.detail;
if(!res.latitude) return this.timeoutGetMarkers();
this.hasGetLocation=true;
this.sellersIds=[]
this.sellers=[]
let map = this.data.map;
map.latitude = res.latitude;
map.longitude = res.longitude;
map.scale=mapScale;
this.user.latitude = res.latitude;
this.user.longitude = res.longitude;
map.height = this.systemInfo.windowHeight-this.transverseViewHeight
let sdobj={
map: map,
hasSuggestion:false,
}
if(!this.hasSellerConcat){
sdobj.markers=[]
}
this.setData(sdobj)
this.timeoutGetMarkers()
/*
if(this.mapCtx){
//this.mapCtx.moveToLocation();
this.mapCtx.getRegion({
success:(res)=>{
console.log('onpos.getRegion',res)
if(this.mapData.region.southwest.latitude) {
this.mapData.region = res
this.timeoutGetMarkers()
this.hasOnLoad = true;
// this.qqmapsdk=new QQMapWX({
// key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
// });
this.setData({
multiArray: [['全部菜系'].concat(await DA.getCates())]
})
mta.Page.init({
"appID": "500667280",
"eventID": "500667287",
"statPullDownFresh": true,
"statShareApp": true,
"statReachBottom": true,
"lauchOpts": options, //渠道分析
});
PubSub.on(
'searchParam',
data => {
console.log('searchParam.msg', data)
if (data.fun == 'tagsChange') {
this.tagsChange(data.e);
}
if (data.fun == 'caixiActive') {
this.caixiActive(data.e);
}
if (data.fun == 'setSuggestion') {
this.setSuggestion(data.suggestion);
}
if (data.fun == 'moveToLocation') {
this.moveToLocation();
}
if (data.fun == 'filterEvent') {
this.filterEvent(data.e)
}
}
)
PubSub.on(
'appHide',
data => {
console.log('appHide');
let pages = getCurrentPages();
if (pages.length == 1) {//用户停留在首页
this.hasGetLocation = false
this.hasClickMoveToLocation = false
this.hasAppHide = true
}
}
)
reddot.init()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
mapCtx: null,
mapData: {
lat: '',
lng: '',
latitude: 0,
longitude: 0,
scale: 18,
hasRegionchange: false,
region: {
southwest: {},
northeast: {},
},
})
}
*/
},
regionchange(e){
if(e.type!='end') return;
console.log('regionchange', e)
if(typeof this.mapCtx=='undefined' || !this.mapCtx) return;
this.getClassNameFlag=true;
this.mapCtx.getScale({
success: (res) => {
this.mapData.scale = res.scale;
console.log('regionchange.getScale', res, this.data.map.scale)
},
})
this.mapCtx.getCenterLocation({
success:(res)=>{
console.log('regionchange.getCenterLocation',res)
this.mapData.latitude=res.latitude;
this.mapData.longitude=res.longitude;
if(this.mapData.lat=='' && res.latitude.toString().length>6 && res.longitude.toString().length>6){
this.mapData.lat=res.latitude;
this.mapData.lng=res.longitude;
}
},
});
this.mapCtx.getRegion({
success:(res)=>{
console.log('regionchange.getRegion',res.southwest.latitude,this.mapData.region.southwest.latitude,res)
this.hasClickMoveToLocation=false
if(res.southwest.latitude) {
this.mapData.region = res
};
this.timeoutGetMarkers();
mapDataLast: null,//最后一次成功视角，防止地图视角丢失
onReady: function () {
if (wx.canIUse('reportPerformance')) {
wx.reportPerformance(2002, new Date() - this.reportTime)
}
this.mapCtx = wx.createMapContext('map')
// this.mapCtx.moveToLocation({
// success:(res)=>{
// console.log('moveToLocation',res)
// }
// })
},
})
},
setTimeoutGetMarkers:'',
timeoutGetMarkers(){//延时获取
if(this.setTimeoutGetMarkers){
clearTimeout(this.setTimeoutGetMarkers);
this.setTimeoutGetMarkers='';
}
this.setTimeoutGetMarkers=setTimeout(()=>{
this.getMarkers();
},300)
},
mapUpdated(e){
console.log('mapUpdated', e)
if(typeof this.mapCtx=='undefined' || !this.mapCtx) return;
this.getClassNameFlag=true;
this.mapCtx.getScale({
success:(res)=>{
this.mapData.scale=res.scale;
console.log('mapUpdated.getScale',res,this.data.map.scale)
/**
* 生命周期函数--监听页面显示
*/
onShow: async function (e) {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
console.log({
'this.hasGetLocation': this.hasGetLocation,
'this.hasOnLoad': this.hasOnLoad,
'this.hasClickMoveToLocation': this.hasClickMoveToLocation,
'this.data.hasSuggestion': this.data.hasSuggestion,
})
this.getClassNameFlag = true;
//this.getPos();
if (this.data.hasSuggestion) return;
if (!this.hasOnLoad && this.hasGetLocation) return;
this.hasOnLoad = false;
//导航栏自适应
let systemInfo = wx.getSystemInfoSync();
console.log('systemInfo:', systemInfo)
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
let h = 44;//导航状态栏高度
if (reg.test(systemInfo.system)) {
pt = systemInfo.statusBarHeight;
h = 44;
if (systemInfo.pixelRatio > 2) {
this.transverseViewHeight = transverseViewHeight + 26;
}
} else {
if (/xiaomi/i.test(systemInfo.brand)) {
this.transverseViewHeight = transverseViewHeight + 15;
} else {
this.transverseViewHeight = transverseViewHeight - 15;
}
pt = systemInfo.statusBarHeight;
h = 48;
}
console.log('onShow', systemInfo, systemInfo.windowHeight, systemInfo.windowHeight - this.transverseViewHeight)
this.setData({
[`map.height`]: systemInfo.windowHeight - this.transverseViewHeight,
statusBarHeight: pt,
titleBarHeight: h,
})
//this.getPos(systemInfo);
this.systemInfo = systemInfo
//this.selectComponent('#getpos').getPos();
if (!this.hasClickMoveToLocation) {
//this.getMarkers();
//this.timeoutGetMarkers();
}
},
})
this.mapCtx.getCenterLocation({
success:(res)=>{
console.log('mapUpdated.getCenterLocation',res)
this.mapData.latitude=res.latitude;
this.mapData.longitude=res.longitude;
if(this.mapData.lat=='' && res.latitude.toString().length>6 && res.longitude.toString().length>6){
this.mapData.lat=res.latitude;
this.mapData.lng=res.longitude;
}
},
});
this.mapCtx.getRegion({
success:(res)=>{
if(this.mapData.region.southwest.latitude=='' || !res.southwest.latitude) return;
console.log('mapUpdated.getRegion',[res.southwest.latitude,this.mapData.region.southwest.latitude])
this.mapData.region=res
//this.timeoutGetMarkers();
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function (e) {
util.elog(null, '离开地图页')
},
})
this.setData({
hasBoost:true,
})
},
hasMarkertap:false,
markertap(e,flag=true){
if(e.markerId=='location' || e.markerId=='locationMe')return;
this.hasMarkertap=false
let markers=this.data.markers;
console.log('markertap',e)
this.activeSellerID=e.markerId
let bl=1.2;
let current=0,hasCurrent=true;
markers.forEach((m,i)=>{
m.iconPath=m.iconPath.replace('/cates-active/','/cates/')
m.zIndex=m.zIndexBak
if(m.width==20*bl){
m.width=20;
m.height=25;
}
if(m.width==12){
m.width=8;
m.height=8;
}
if(m.callout){
m.callout.borderColor= '#cccccc';
m.callout.bgColor= '#fefefe';
m.callout.color= '#353535';
m.callout.display=m.calloutDisplay;
}
if(m.id==e.markerId){
m.iconPath=m.iconPath.replace('/cates/','/cates-active/')
if(m.width==20){
m.width=20*bl;
m.height=25*bl;
}else{
m.width=12;
m.height=12;
}
m.zIndex=9999
if(m.callout){
m.callout.borderColor= '#F05522';
m.callout.bgColor= '#F05522';
m.callout.color= '#fefefe';
m.callout.display='ALWAYS';
}
hasCurrent=false
if("markertap"==e.type){
util.elog({id:m.seller.id,sellername:m.seller.sellername},'点击地图区域的店铺标记')
}
}
if(m.display!='none' && hasCurrent){
current++
}
})
let obj={
markers:markers,
};
console.log('markertap::current,',current);
if(flag){
//obj.scrollIntoView='seller-'+e.markerId;
obj.current=current;
//this.hasMarkertap=true;
}
this.setData(obj)
},
hasInRegionFlag:false,
hasInRegion(){//定位是否在地图视野内
let map = this.mapData;
if(!map.region.northeast.latitude || !map.region.northeast.longitude) {//未获得视野
if(this.mapDataLast){
this.mapData=this.mapDataLast
}
return {flag:false,msg:'未获得视野',map:map,mapDataLast:this.mapDataLast};
}
if(!map.region.southwest.latitude || !map.region.southwest.longitude) {//未获得视野
if(this.mapDataLast){
this.mapData=this.mapDataLast
}
return {flag:false,msg:'未获得视野',map:map,mapDataLast:this.mapDataLast};
}
this.mapDataLast=JSON.parse(JSON.stringify(this.mapData));
if(this.hasInRegionFlag) return {flag:true,msg:'二次获取'};
if(!this.user.latitude) return {flag:false,msg:'用户无定位'};//用户无定位
//if(this.user.latitude==def_latitude && this.user.longitude==def_longitude) return false;//默认位置
///判断定位 首次 进入视野
if((this.user.latitude>map.region.southwest.latitude
&& this.user.longitude>map.region.southwest.longitude
&& this.user.latitude<map.region.northeast.latitude
&& this.user.longitude<map.region.northeast.longitude) || this.data.hasSuggestion){
this.hasInRegionFlag=true;
return {flag:true,msg:'用户首次或搜索地标'};
}else{
//视野不匹配
this.mapCtx.getRegion({
success:(res)=>{
console.log('hasInRegion.getRegion',res)
this.mapData.region=res
},
})
}
return {flag:false,msg:'视野不匹配'};
},
async getMarkers(){
let cmap=this.data.map;
let map = this.mapData;
//console.log('getMarkers',map.region);
let region=this.hasInRegion();
console.log('this.hasInRegion',region)
if(!region.flag) {
return setTimeout(()=>{
this.getMarkers();
},300)
}
let markers = [];
let param={
lat: this.user.latitude==def_latitude?'':this.user.latitude,
lng: this.user.longitude==def_longitude?'':this.user.longitude,
offset: 0,
rows: 50,
distance: 100000,
map:JSON.stringify({...this.mapData.region,scale:this.mapData.scale>=19?20:this.mapData.scale})
}
if(this.data.multiIndex[0]>0){
param.cuisine=await DA.getCatesID(this.data.multiIndex[0]-1);
}
let tags=[];
this.data.tags.forEach(t=>{
if(t.active){
tags.push(t.id)
}
})
if(tags.length>0){
param.tags=tags;
}
if(param.lat){
param.centre_pos=`${param.lat},${param.lng}`
}else{
let lat=(this.mapData.region.southwest.latitude+this.mapData.region.northeast.latitude)/2
let lng=(this.mapData.region.southwest.longitude+this.mapData.region.northeast.longitude)/2
param.centre_pos=`${lat},${lng}`
}
if(this.data.hasSuggestion){
param.centre_pos=`${this.data.suggestion.latitude},${this.data.suggestion.longitude}`
}
if(this.findSellerData){
param=Object.assign(param,this.findSellerData.paramObj)
}
if(this.filterParams){//人均过滤
let filterParams=this.filterParams.min+','+this.filterParams.max
if(this.filterParams.min==this.filterParams.max && this.filterParams.min==300){
filterParams=this.filterParams.min+','+parseInt(new Date()/1000)
}
param.average=filterParams
}
//this.selectComponent('#list').getList(param);
this.param=param;
let now_sid=[];
App.Customer.SellerList(param).then(async res => {
//this.mapData.region.southwest.latitude='';
if (res.ret == 200) {
let sellersList=res.data.list;
let sellersLength=sellersList.length;
sellersList.forEach((seller,si) => {
now_sid.push(seller.id);
let hasMark=false;
if(this.sellersIds._indexOf(seller.id)<0){
// if(seller.distance || seller.distance===0){
// seller.distance=parseInt(seller.distance);
// if(seller.distance>1000){
// seller.distance=(seller.distance/1000).toFixed(2)+'km'
// }else{
// seller.distance+='m';
// }
// }
if(this.hasSellerConcat){
this.sellersIds.push(seller.id);
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
PubSub.off('searchParam')
PubSub.off('appHide')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: '请客订包间，就上周到安排'
}
},
onpos(e) {
console.log('onpos', e);
let res = e.detail;
if (!res.latitude) return this.timeoutGetMarkers();
this.hasGetLocation = true;
this.sellersIds = []
this.sellers = []
let map = this.data.map;
map.latitude = res.latitude;
map.longitude = res.longitude;
map.scale = mapScale;
this.user.latitude = res.latitude;
this.user.longitude = res.longitude;
map.height = this.systemInfo.windowHeight - this.transverseViewHeight
let sdobj = {
map: map,
hasSuggestion: false,
}
if (!this.hasSellerConcat) {
sdobj.markers = []
}
this.setData(sdobj)
this.timeoutGetMarkers()
/*
if(this.mapCtx){
//this.mapCtx.moveToLocation();
this.mapCtx.getRegion({
success:(res)=>{
console.log('onpos.getRegion',res)
if(this.mapData.region.southwest.latitude) {
this.mapData.region = res
this.timeoutGetMarkers()
}
},
})
}
*/
},
regionchange(e) {
if (e.type != 'end') return;
console.log('regionchange', e)
if (typeof this.mapCtx == 'undefined' || !this.mapCtx) return;
this.getClassNameFlag = true;
this.mapCtx.getScale({
success: (res) => {
this.mapData.scale = res.scale;
console.log('regionchange.getScale', res, this.data.map.scale)
},
})
this.mapCtx.getCenterLocation({
success: (res) => {
console.log('regionchange.getCenterLocation', res)
this.mapData.latitude = res.latitude;
this.mapData.longitude = res.longitude;
if (this.mapData.lat == '' && res.latitude.toString().length > 6 && res.longitude.toString().length > 6) {
this.mapData.lat = res.latitude;
this.mapData.lng = res.longitude;
}
hasMark=true;
},
});
this.mapCtx.getRegion({
success: (res) => {
console.log('regionchange.getRegion', res.southwest.latitude, this.mapData.region.southwest.latitude, res)
this.hasClickMoveToLocation = false
if (res.southwest.latitude) {
this.mapData.region = res
}
;
this.timeoutGetMarkers();
},
})
},
setTimeoutGetMarkers: '',
timeoutGetMarkers() {//延时获取
if (this.setTimeoutGetMarkers) {
clearTimeout(this.setTimeoutGetMarkers);
this.setTimeoutGetMarkers = '';
}
this.setTimeoutGetMarkers = setTimeout(() => {
this.getMarkers();
}, 300)
},
mapUpdated(e) {
console.log('mapUpdated', e)
if (typeof this.mapCtx == 'undefined' || !this.mapCtx) return;
this.getClassNameFlag = true;
this.mapCtx.getScale({
success: (res) => {
this.mapData.scale = res.scale;
console.log('mapUpdated.getScale', res, this.data.map.scale)
},
})
this.mapCtx.getCenterLocation({
success: (res) => {
console.log('mapUpdated.getCenterLocation', res)
this.mapData.latitude = res.latitude;
this.mapData.longitude = res.longitude;
if (this.mapData.lat == '' && res.latitude.toString().length > 6 && res.longitude.toString().length > 6) {
this.mapData.lat = res.latitude;
this.mapData.lng = res.longitude;
}
},
});
this.mapCtx.getRegion({
success: (res) => {
if (this.mapData.region.southwest.latitude == '' || !res.southwest.latitude) return;
console.log('mapUpdated.getRegion', [res.southwest.latitude, this.mapData.region.southwest.latitude])
this.mapData.region = res
//this.timeoutGetMarkers();
},
})
this.setData({
hasBoost: true,
})
},
hasMarkertap: false,
markertap(e, flag = true) {
if (e.markerId == 'location' || e.markerId == 'locationMe') return;
this.hasMarkertap = false
let markers = this.data.markers;
console.log('markertap', e)
this.activeSellerID = e.markerId
let bl = 1.2;
let current = 0, hasCurrent = true;
markers.forEach((m, i) => {
m.iconPath = m.iconPath.replace('/cates-active/', '/cates/')
m.zIndex = m.zIndexBak
if (m.width == 20 * bl) {
m.width = 20;
m.height = 25;
}
if (m.width == 12) {
m.width = 8;
m.height = 8;
}
if(hasMark){
if(this.findSellerData){
seller.findSellerParamObj=this.findSellerData.paramObj
if (m.callout) {
m.callout.borderColor = '#cccccc';
m.callout.bgColor = '#fefefe';
m.callout.color = '#353535';
m.callout.display = m.calloutDisplay;
}
if (m.id == e.markerId) {
m.iconPath = m.iconPath.replace('/cates/', '/cates-active/')
if (m.width == 20) {
m.width = 20 * bl;
m.height = 25 * bl;
} else {
m.width = 12;
m.height = 12;
}
let marker={
id: seller.id,
iconPath: "http://nosqn.colorcun.com/custom/lite-online/cates/circle1x5.png"+cates_version,
latitude: seller.lat,
longitude: seller.long,
width: 8,
height: 8,
//title:seller.seller_name,
zIndex:sellersLength-si,
zIndexBak:sellersLength-si,
seller:seller,
};
marker.callout={
content: ' ' + seller.sellername + ' ',
color: '#353535',
fontSize: 12,
borderWidth: 1,
borderColor: '#cccccc',
borderRadius: 50,
bgColor: '#fefefe',
padding: 5,
textAlign: 'left',
display:'BYCLICK',
};
marker.calloutDisplay='BYCLICK';
if(seller.mode.length>0){
seller.mode.forEach(x=>{
if(x.id==1){//大图标
marker.iconPath="http://nosqn.colorcun.com/custom/lite-online/cates/其他菜品.png";
if(seller.cate.length>0){
marker.iconPath=seller.cate[0].icon
}
marker.iconPath=marker.iconPath.replace(/\/cates\/(.*)\.png/,function ($0,$1) {
return '/cates/'+encodeURI($1)+'.png'
})
marker.iconPath+=cates_version
marker.width=20;
marker.height=25;
m.zIndex = 9999
if (m.callout) {
m.callout.borderColor = '#F05522';
m.callout.bgColor = '#F05522';
m.callout.color = '#fefefe';
m.callout.display = 'ALWAYS';
}
hasCurrent = false
if ("markertap" == e.type) {
util.elog({id: m.seller.id, sellername: m.seller.sellername}, '点击地图区域的店铺标记')
}
}
if (m.display != 'none' && hasCurrent) {
current++
}
})
let obj = {
markers: markers,
};
console.log('markertap::current,', current);
if (flag) {
//obj.scrollIntoView='seller-'+e.markerId;
obj.current = current;
//this.hasMarkertap=true;
}
this.setData(obj)
},
hasInRegionFlag: false,
hasInRegion() {//定位是否在地图视野内
let map = this.mapData;
if (!map.region.northeast.latitude || !map.region.northeast.longitude) {//未获得视野
if (this.mapDataLast) {
this.mapData = this.mapDataLast
}
return {flag: false, msg: '未获得视野', map: map, mapDataLast: this.mapDataLast};
}
if (!map.region.southwest.latitude || !map.region.southwest.longitude) {//未获得视野
if (this.mapDataLast) {
this.mapData = this.mapDataLast
}
return {flag: false, msg: '未获得视野', map: map, mapDataLast: this.mapDataLast};
}
this.mapDataLast = JSON.parse(JSON.stringify(this.mapData));
if (this.hasInRegionFlag) return {flag: true, msg: '二次获取'};
if (!this.user.latitude) return {flag: false, msg: '用户无定位'};//用户无定位
//if(this.user.latitude==def_latitude && this.user.longitude==def_longitude) return false;//默认位置
///判断定位 首次 进入视野
if ((this.user.latitude > map.region.southwest.latitude
&& this.user.longitude > map.region.southwest.longitude
&& this.user.latitude < map.region.northeast.latitude
&& this.user.longitude < map.region.northeast.longitude) || this.data.hasSuggestion) {
this.hasInRegionFlag = true;
return {flag: true, msg: '用户首次或搜索地标'};
} else {
//视野不匹配
this.mapCtx.getRegion({
success: (res) => {
console.log('hasInRegion.getRegion', res)
this.mapData.region = res
},
})
}
return {flag: false, msg: '视野不匹配'};
},
async getMarkers() {
let cmap = this.data.map;
let map = this.mapData;
//console.log('getMarkers',map.region);
let region = this.hasInRegion();
console.log('this.hasInRegion', region)
if (!region.flag) {
return setTimeout(() => {
this.getMarkers();
}, 300)
}
let markers = [];
let param = {
lat: this.user.latitude == def_latitude ? '' : this.user.latitude,
lng: this.user.longitude == def_longitude ? '' : this.user.longitude,
offset: 0,
rows: 50,
distance: 100000,
map: JSON.stringify({...this.mapData.region, scale: this.mapData.scale >= 19 ? 20 : this.mapData.scale})
}
if (this.data.multiIndex[0] > 0) {
param.cuisine = await DA.getCatesID(this.data.multiIndex[0] - 1);
}
let tags = [];
this.data.tags.forEach(t => {
if (t.active) {
tags.push(t.id)
}
})
if (tags.length > 0) {
param.tags = tags;
}
if (param.lat) {
param.centre_pos = `${param.lat},${param.lng}`
} else {
let lat = (this.mapData.region.southwest.latitude + this.mapData.region.northeast.latitude) / 2
let lng = (this.mapData.region.southwest.longitude + this.mapData.region.northeast.longitude) / 2
param.centre_pos = `${lat},${lng}`
}
if (this.data.hasSuggestion) {
param.centre_pos = `${this.data.suggestion.latitude},${this.data.suggestion.longitude}`
}
if (this.findSellerData) {
param = Object.assign(param, this.findSellerData.paramObj)
}
if (this.filterParams) {//人均过滤
let filterParams = this.filterParams.min + ',' + this.filterParams.max
if (this.filterParams.min == this.filterParams.max && this.filterParams.min == 300) {
filterParams = this.filterParams.min + ',' + parseInt(new Date() / 1000)
}
param.average = filterParams
}
//this.selectComponent('#list').getList(param);
this.param = param;
let now_sid = [];
App.Customer.SellerList(param).then(async res => {
//this.mapData.region.southwest.latitude='';
if (res.ret == 200) {
let sellersList = res.data.list;
let sellersLength = sellersList.length;
sellersList.forEach((seller, si) => {
now_sid.push(seller.id);
let hasMark = false;
if (this.sellersIds._indexOf(seller.id) < 0) {
// if(seller.distance || seller.distance===0){
// seller.distance=parseInt(seller.distance);
// if(seller.distance>1000){
// seller.distance=(seller.distance/1000).toFixed(2)+'km'
// }else{
// seller.distance+='m';
// }
// }
if (this.hasSellerConcat) {
this.sellersIds.push(seller.id);
}
if(x.id==2){//商家名
marker.callout.display='ALWAYS';
marker.calloutDisplay='ALWAYS';
hasMark = true;
}
if (hasMark) {
if (this.findSellerData) {
seller.findSellerParamObj = this.findSellerData.paramObj
}
let marker = {
id: seller.id,
iconPath: "http://nosqn.colorcun.com/custom/lite-online/cates/circle1x5.png" + cates_version,
latitude: seller.lat,
longitude: seller.long,
width: 8,
height: 8,
//title:seller.seller_name,
zIndex: sellersLength - si,
zIndexBak: sellersLength - si,
seller: seller,
};
marker.callout = {
content: ' ' + seller.sellername + ' ',
color: '#353535',
fontSize: 12,
borderWidth: 1,
borderColor: '#cccccc',
borderRadius: 50,
bgColor: '#fefefe',
padding: 5,
textAlign: 'left',
display: 'BYCLICK',
};
marker.calloutDisplay = 'BYCLICK';
if (seller.mode.length > 0) {
seller.mode.forEach(x => {
if (x.id == 1) {//大图标
marker.iconPath = "http://nosqn.colorcun.com/custom/lite-online/cates/其他菜品.png";
if (seller.cate.length > 0) {
marker.iconPath = seller.cate[0].icon
}
marker.iconPath = marker.iconPath.replace(/\/cates\/(.*)\.png/, function ($0, $1) {
return '/cates/' + encodeURI($1) + '.png'
})
marker.iconPath += cates_version
marker.width = 20;
marker.height = 25;
}
if (x.id == 2) {//商家名
marker.callout.display = 'ALWAYS';
marker.calloutDisplay = 'ALWAYS';
}
})
}
})
markers.push(marker)
}
})
} else {
console.log('接口报错了');
}
this.sellersNow = now_sid;
let obj = {
hasSellers: now_sid.length > 0,
hasGetSellersEnd: true,
hasSearchLimit: (tags.length > 0 || this.data.multiIndex[0] > 0) || this.findSellerData,
listMoreCount: res.data.flag
}
if (this.hasSellerConcat) {
obj.markers = this.data.markers.concat(markers);
} else {
obj.markers = markers;
}
obj.markers.forEach(mk => {
//mk.display='none';
if (now_sid._indexOf(mk.id) > -1) {
mk.display = '';
}
markers.push(marker)
})
obj.markers = await this.setLocationMarker(obj.markers);
this.setData(obj)
if (now_sid.length > 0) {
setTimeout(() => {
this.markertap({
markerId: now_sid._indexOf(this.activeSellerID) < 0 ? now_sid[0] : this.activeSellerID
}, true)
}, 100)
}
this.IsSetActivity();
})
} else {
console.log('接口报错了');
}
this.sellersNow=now_sid;
let obj={
hasSellers:now_sid.length>0,
hasGetSellersEnd:true,
hasSearchLimit:(tags.length>0 || this.data.multiIndex[0]>0) || this.findSellerData,
listMoreCount:res.data.flag
}
if(this.hasSellerConcat){
obj.markers=this.data.markers.concat(markers);
}else{
obj.markers=markers;
}
obj.markers.forEach(mk=>{
//mk.display='none';
if(now_sid._indexOf(mk.id)>-1){
mk.display='';
}
})
obj.markers=await this.setLocationMarker(obj.markers);
this.setData(obj)
if(now_sid.length>0) {
setTimeout(() => {
this.markertap({
markerId: now_sid._indexOf(this.activeSellerID) < 0?now_sid[0]:this.activeSellerID
}, true)
}, 100)
}
this.IsSetActivity();
})
},
//seller box 通知
sellerBoxEvent(e){
wx.showTabBar();
},
moveToLocation(){
this.hasClickMoveToLocation=true
if(this.user.latitude==def_latitude && this.user.longitude==def_longitude){
this.selectComponent('#getpos').getPos(true);
return;
}
this.sellersIds=[]
this.sellers=[]
let map = this.data.map;
map.latitude = this.user.latitude;
map.longitude = this.user.longitude;
map.scale=mapScale;
map.height = this.systemInfo.windowHeight-this.transverseViewHeight
let sdobj={
map: map,
hasSuggestion:false,
hasGetSellersEnd:false,
}
if(!this.hasSellerConcat){
sdobj.markers=[]
}
this.setData(sdobj)
this.mapCtx.moveToLocation({
success:(res)=>{
console.log('moveToLocation',res)
}
})
},
bindMultiPickerChange(e){
console.log(e);
let val=util.val(e);
this.setData({
multiIndex:val
})
this.hasSellerConcat=hasSellerConcat;
this.sellersIds=[];
if(val[0]>0){
this.hasSellerConcat=false;
}else{
if(!this.hasSellerConcat){
},
//seller box 通知
sellerBoxEvent(e) {
wx.showTabBar();
},
moveToLocation() {
this.hasClickMoveToLocation = true
if (this.user.latitude == def_latitude && this.user.longitude == def_longitude) {
this.selectComponent('#getpos').getPos(true);
return;
}
this.sellersIds = []
this.sellers = []
let map = this.data.map;
map.latitude = this.user.latitude;
map.longitude = this.user.longitude;
map.scale = mapScale;
map.height = this.systemInfo.windowHeight - this.transverseViewHeight
let sdobj = {
map: map,
hasSuggestion: false,
hasGetSellersEnd: false,
}
if (!this.hasSellerConcat) {
sdobj.markers = []
}
this.setData(sdobj)
this.mapCtx.moveToLocation({
success: (res) => {
console.log('moveToLocation', res)
}
})
},
bindMultiPickerChange(e) {
console.log(e);
let val = util.val(e);
this.setData({
markers:[]
multiIndex: val
})
}
}
setTimeout(()=>{this.getMarkers();},0)
},
setSuggestion(suggestion){
let map=this.data.map;
//let pos=DA.gcj02towgs84(suggestion.longitude,suggestion.latitude)
map.latitude=suggestion.latitude
map.longitude=suggestion.longitude
if(suggestion.type==-1){//平台商户
this.activeSellerID=suggestion.id
map.scale=20
}else{
map.scale=mapScale
}
this.sellersIds=[]
this.sellers=[]
let sdobj={
map: map,
hasSuggestion:true,
suggestion:suggestion,
hasGetSellersEnd:false,
}
if(!this.hasSellerConcat){
sdobj.markers=[]
}
//this.findSellerData=null//清理搜索
this.setData(sdobj)
},
this.hasSellerConcat = hasSellerConcat;
this.sellersIds = [];
if (val[0] > 0) {
this.hasSellerConcat = false;
} else {
if (!this.hasSellerConcat) {
this.setData({
markers: []
})
}
}
setTimeout(() => {
this.getMarkers();
}, 0)
},
setSuggestion(suggestion) {
let map = this.data.map;
//let pos=DA.gcj02towgs84(suggestion.longitude,suggestion.latitude)
map.latitude = suggestion.latitude
map.longitude = suggestion.longitude
if (suggestion.type == -1) {//平台商户
this.activeSellerID = suggestion.id
map.scale = 20
} else {
map.scale = mapScale
}
this.sellersIds = []
this.sellers = []
let sdobj = {
map: map,
hasSuggestion: true,
suggestion: suggestion,
hasGetSellersEnd: false,
}
if (!this.hasSellerConcat) {
sdobj.markers = []
}
//this.findSellerData=null//清理搜索
this.setData(sdobj)
},
getClassNameFlag:true,
activeSellerID:'',
bindscroll(e){
if(!this.getClassNameFlag) return;
this.getClassNameFlag=false;
let w=e.detail.scrollWidth/this.sellers.length;
let i=Math.round(e.detail.scrollLeft/w);
console.log(e.detail,this.sellers,i);
if(this.activeSellerID!=this.sellers[i].id){
this.activeSellerID=this.sellers[i];
this.markertap({
markerId:this.sellers[i].id
},false)
}
let that=this;
setTimeout(function(){
that.getClassNameFlag=true;
},300)
},
bindtransition(e){
if(this.hasMarkertap){
this.hasMarkertap=false;
return;
}
let i=e.detail.current
if(typeof this.data.markers[i]=='undefined') return;
this.activeSellerID=this.data.markers[i].id
console.log('bindtransition',this.sellersNow,e.detail.current,this.sellersNow[e.detail.current],this.activeSellerID);
// this.activeSellerID=this.sellersNow[i];
// this.markertap({
// markerId:this.activeSellerID
// },false)
this.markertap({
markerId:this.activeSellerID
},false)
},
gotoDetail(e){
wx.navigateTo({
url:'/pages/reserve/detail?id='+util.attr(e,'sid')
})
util.elog({sid:util.attr(e,'sid')},'点击橱窗中的商家，进入店铺详情')
},
IsSetActivity(){
let cmap=this.data.map;
App.Customer.IsSetActivity({lat:cmap.latitude,lng:cmap.longitude,distance:50}).then(res=>{
this.setData({
hasSetActivity:res.data==1,
})
})
},
a2lshow(e){
//console.log('a2lshow',e)
let ds=this.selectComponent('#ds');
if(!ds){
return setTimeout(()=>{
this.a2lshow(e)
},500)
}
ds.setA2LHeight(e.type=='hide'?0:40);
},
async setMapRegion(){
return new Promise((success,fail)=>{
if(this.mapCtx){
this.mapCtx.getRegion({
success:(res)=>{
if(res.southwest.latitude) {
this.mapData.region = res
success()
}
},
fail:()=>{
getClassNameFlag: true,
activeSellerID: '',
bindscroll(e) {
if (!this.getClassNameFlag) return;
this.getClassNameFlag = false;
let w = e.detail.scrollWidth / this.sellers.length;
let i = Math.round(e.detail.scrollLeft / w);
console.log(e.detail, this.sellers, i);
if (this.activeSellerID != this.sellers[i].id) {
this.activeSellerID = this.sellers[i];
this.markertap({
markerId: this.sellers[i].id
}, false)
}
let that = this;
setTimeout(function () {
that.getClassNameFlag = true;
}, 300)
},
bindtransition(e) {
if (this.hasMarkertap) {
this.hasMarkertap = false;
return;
}
let i = e.detail.current
if (typeof this.data.markers[i] == 'undefined') return;
this.activeSellerID = this.data.markers[i].id
console.log('bindtransition', this.sellersNow, e.detail.current, this.sellersNow[e.detail.current], this.activeSellerID);
// this.activeSellerID=this.sellersNow[i];
// this.markertap({
// markerId:this.activeSellerID
// },false)
this.markertap({
markerId: this.activeSellerID
}, false)
},
gotoDetail(e) {
wx.navigateTo({
url: '/pages/reserve/detail?id=' + util.attr(e, 'sid')
})
util.elog({sid: util.attr(e, 'sid')}, '点击橱窗中的商家，进入店铺详情')
},
IsSetActivity() {
let cmap = this.data.map;
App.Customer.IsSetActivity({lat: cmap.latitude, lng: cmap.longitude, distance: 50}).then(res => {
this.setData({
hasSetActivity: res.data == 1,
})
})
},
a2lshow(e) {
//console.log('a2lshow',e)
let ds = this.selectComponent('#ds');
if (!ds) {
return setTimeout(() => {
this.a2lshow(e)
}, 500)
}
ds.setA2LHeight(e.type == 'hide' ? 0 : 40);
},
async setMapRegion() {
return new Promise((success, fail) => {
if (this.mapCtx) {
this.mapCtx.getRegion({
success: (res) => {
if (res.southwest.latitude) {
this.mapData.region = res
success()
}
},
fail: () => {
fail()
}
})
} else {
fail()
}
})
}else{
fail()
}
})
},
async setLocationMarker(markers){
try{
await this.setMapRegion();
}catch (e){
this.timeoutGetMarkers()
return []
}
},
async setLocationMarker(markers) {
try {
await this.setMapRegion();
} catch (e) {
this.timeoutGetMarkers()
return []
}
let map = this.mapData;
let mks=[]
let matchPosNum=1
if(markers.length>0){
markers.forEach(mk=>{
if(mk.id!='location' && mk.id!='locationMe'
&& mk.latitude>map.region.southwest.latitude
&& mk.longitude>map.region.southwest.longitude
&& mk.latitude<map.region.northeast.latitude
&& mk.longitude<map.region.northeast.longitude){
mks.push(mk);
}
})
}
if(mks.length-markers.length<0){
this.timeoutGetMarkers()
return []
}
let map = this.mapData;
let mks = []
let matchPosNum = 1
if (markers.length > 0) {
markers.forEach(mk => {
if (mk.id != 'location' && mk.id != 'locationMe'
&& mk.latitude > map.region.southwest.latitude
&& mk.longitude > map.region.southwest.longitude
&& mk.latitude < map.region.northeast.latitude
&& mk.longitude < map.region.northeast.longitude) {
mks.push(mk);
}
})
}
if (mks.length - markers.length < 0) {
this.timeoutGetMarkers()
return []
}
if(this.data.hasSuggestion){
map=this.data.suggestion
mks.push({
id: 'location',
iconPath: "http://nosqn.colorcun.com/reserve/images/location.png"+cates_version,
latitude: map.latitude,
longitude: map.longitude,
width: 20,
height: 25,
})
}
mks.push({
id: 'locationMe',
iconPath: "http://nosqn.colorcun.com/reserve/images/lme.png"+cates_version,
latitude: this.user.latitude,
longitude: this.user.longitude,
width: 18,
height: 30,
})
return mks;
},
tagsChange(e){
if(this.data.listMoreCount<1 && !this.data.hasSearchLimit) return
let id=util.attr(e,'id');
let tags=this.data.tags;
let activeNum=0;
tags.forEach(t=>{
if(t.id==id){
t.active=!t.active
}
if(t.active){
activeNum++
}
})
this.setData({
tags:tags,
})
this.hasSellerConcat=hasSellerConcat;
this.sellersIds=[];
if(activeNum>0){
this.hasSellerConcat=false;
}else{
if(!this.hasSellerConcat){
if (this.data.hasSuggestion) {
map = this.data.suggestion
mks.push({
id: 'location',
iconPath: "http://nosqn.colorcun.com/reserve/images/location.png" + cates_version,
latitude: map.latitude,
longitude: map.longitude,
width: 20,
height: 25,
})
}
mks.push({
id: 'locationMe',
iconPath: "http://nosqn.colorcun.com/reserve/images/lme.png" + cates_version,
latitude: this.user.latitude,
longitude: this.user.longitude,
width: 18,
height: 30,
})
return mks;
},
tagsChange(e) {
if (this.data.listMoreCount < 1 && !this.data.hasSearchLimit) return
let id = util.attr(e, 'id');
let tags = this.data.tags;
let activeNum = 0;
tags.forEach(t => {
if (t.id == id) {
t.active = !t.active
}
if (t.active) {
activeNum++
}
})
this.setData({
markers:[]
tags: tags,
})
}
}
setTimeout(()=>{this.getMarkers();},0)
this.hasSellerConcat = hasSellerConcat;
this.sellersIds = [];
if (activeNum > 0) {
this.hasSellerConcat = false;
} else {
if (!this.hasSellerConcat) {
this.setData({
markers: []
})
}
}
setTimeout(() => {
this.getMarkers();
}, 0)
},
caixiActive(e){
console.log('caixiActive',e);
this.bindMultiPickerChange({
detail:{
value:[e.detail]
}
})
},
caixiShow(){
if(this.data.listMoreCount<1 && !this.data.hasSearchLimit) return
this.selectComponent('#caixi').show();
},
listEvent(e){
let d=e.detail
console.log('listEvent',e);
if(d.type=="getListEnd"){
this.setData({
listMoreCount:d.total
});
}else if(d.type=='caixiShow'){
this.caixiShow();
}else if(d.type=='tagsChange'){
this.tagsChange(d.e);
}
},
listShow(){
//this.selectComponent('#list').show();
if(!this.param.map) return;
this.movableChangeInit()
wx.navigateTo({
url:util.http_build_query({
lat:this.param.lat==def_latitude?'':this.param.lat,
lng:this.param.lng==def_longitude?'':this.param.lng,
map:this.param.map,
multiIndex:this.data.multiIndex,
tags:this.param.tags,
centre_pos:this.param.centre_pos,
hasSuggestion:this.data.hasSuggestion?1:'',
keyword:this.data.hasSuggestion?this.data.suggestion.title:'',
filterParams:this.filterParams?JSON.stringify(this.filterParams):null,
},'./indexList'),
success: res=> {
// 通过eventChannel向被打开页面传送数据
if(this.findSellerData){
res.eventChannel.emit('acceptDataFromMapPage', this.findSellerData)
}
res.eventChannel.on('findSellerData',findSellerData=>{
console.log('findSellerData',findSellerData)
this.findSellerData=findSellerData
setTimeout(()=>{this.getMarkers();},0)
},
caixiActive(e) {
console.log('caixiActive', e);
this.bindMultiPickerChange({
detail: {
value: [e.detail]
}
})
setTimeout(()=>{
this.movableChangeInit()
this.hasListShow=false
},1500)
}
});
},
setTSLocal(){
let map=this.data.map;
map.latitude=def_latitude
map.longitude=def_longitude
map.scale=mapScale
this.sellersIds=[]
this.sellers=[]
let sdobj={
map: map,
hasGetSellersEnd:false,
hasSuggestion:false,
suggestion:{},
}
if(!this.hasSellerConcat){
sdobj.markers=[]
}
this.setData(sdobj)
},
findSellerData:null,
findSeller(){
if(this.data.listMoreCount<1 && !this.data.hasSearchLimit) return
wx.navigateTo({
url: './findSeller',
success: res=> {
// 通过eventChannel向被打开页面传送数据
if(this.findSellerData){
res.eventChannel.emit('acceptDataFromMapPage', this.findSellerData)
}
res.eventChannel.on('findSellerData',findSellerData=>{
console.log('findSellerData',findSellerData)
this.findSellerData=findSellerData
setTimeout(()=>{this.getMarkers();},0)
},
caixiShow() {
if (this.data.listMoreCount < 1 && !this.data.hasSearchLimit) return
this.selectComponent('#caixi').show();
},
listEvent(e) {
let d = e.detail
console.log('listEvent', e);
if (d.type == "getListEnd") {
this.setData({
listMoreCount: d.total
});
} else if (d.type == 'caixiShow') {
this.caixiShow();
} else if (d.type == 'tagsChange') {
this.tagsChange(d.e);
}
},
listShow() {
//this.selectComponent('#list').show();
if (!this.param.map) return;
this.movableChangeInit()
wx.navigateTo({
url: util.http_build_query({
lat: this.param.lat == def_latitude ? '' : this.param.lat,
lng: this.param.lng == def_longitude ? '' : this.param.lng,
map: this.param.map,
multiIndex: this.data.multiIndex,
tags: this.param.tags,
centre_pos: this.param.centre_pos,
hasSuggestion: this.data.hasSuggestion ? 1 : '',
keyword: this.data.hasSuggestion ? this.data.suggestion.title : '',
filterParams: this.filterParams ? JSON.stringify(this.filterParams) : null,
}, './indexList'),
success: res => {
// 通过eventChannel向被打开页面传送数据
if (this.findSellerData) {
res.eventChannel.emit('acceptDataFromMapPage', this.findSellerData)
}
res.eventChannel.on('findSellerData', findSellerData => {
console.log('findSellerData', findSellerData)
this.findSellerData = findSellerData
setTimeout(() => {
this.getMarkers();
}, 0)
})
setTimeout(() => {
this.movableChangeInit()
this.hasListShow = false
}, 1500)
}
});
},
setTSLocal() {
let map = this.data.map;
map.latitude = def_latitude
map.longitude = def_longitude
map.scale = mapScale
this.sellersIds = []
this.sellers = []
let sdobj = {
map: map,
hasGetSellersEnd: false,
hasSuggestion: false,
suggestion: {},
}
if (!this.hasSellerConcat) {
sdobj.markers = []
}
this.setData(sdobj)
},
findSellerData: null,
findSeller() {
if (this.data.listMoreCount < 1 && !this.data.hasSearchLimit) return
wx.navigateTo({
url: './findSeller',
success: res => {
// 通过eventChannel向被打开页面传送数据
if (this.findSellerData) {
res.eventChannel.emit('acceptDataFromMapPage', this.findSellerData)
}
res.eventChannel.on('findSellerData', findSellerData => {
console.log('findSellerData', findSellerData)
this.findSellerData = findSellerData
setTimeout(() => {
this.getMarkers();
}, 0)
})
}
})
}
},
boostEvent(e) {
util.elog(e.detail, '强提醒')
if (e.detail.act == 'hide') {
this.setData({
hasGetPos: true,
})
this.selectComponent('#getpos').getPos();
}
},
elog(e) {
util.elog({attr: util.attr(e), detail: e.detail}, util.attr(e, 'ename') || '点击')
},
sbtrEvent(e) {
console.log(e);
if (e.detail.act == 'oncall') {
this.selectComponent('#as').show(e.detail.seller);
}
},
movableY0: 99,
movableY1: 0,
hasListShow: false,
movableChangeInit() {
this.movableY0 = 99
this.movableY1 = 0
},
movableChange(e) {
if (this.hasListShow) return;
if (this.movableY0 == 99) {
this.movableY0 = e.detail.y
} else {
if (e.detail.y != this.movableY0) {
console.log('movableChange', '上拉');
this.listShow();
this.movableChangeInit()
this.hasListShow = true
}
}
},
filterShow() {
this.selectComponent('#filter').show(this.filterParams);
},
filterParams: null,
filterEvent(e) {
console.log('filterEvent', e)
if (e.detail.type == 'clean') {
this.filterParams = null
this.setData({
filterParams: null,
})
} else {
this.filterParams = e.detail.data
this.setData({
filterParams: this.filterParams,
})
}
setTimeout(() => {
this.getMarkers();
}, 0)
},
})
},
boostEvent(e){
util.elog(e.detail,'强提醒')
if(e.detail.act=='hide'){
this.setData({
hasGetPos:true,
})
this.selectComponent('#getpos').getPos();
}
},
elog(e){
util.elog({attr:util.attr(e),detail:e.detail},util.attr(e,'ename')||'点击')
},
sbtrEvent(e){
console.log(e);
if(e.detail.act=='oncall'){
this.selectComponent('#as').show(e.detail.seller);
}
},
movableY0:99,
movableY1:0,
hasListShow:false,
movableChangeInit(){
this.movableY0=99
this.movableY1=0
},
movableChange(e){
if(this.hasListShow) return;
if(this.movableY0==99){
this.movableY0=e.detail.y
}else{
if(e.detail.y!=this.movableY0){
console.log('movableChange','上拉');
this.listShow();
this.movableChangeInit()
this.hasListShow=true
}
}
},
filterShow(){
this.selectComponent('#filter').show(this.filterParams);
},
filterParams:null,
filterEvent(e){
console.log('filterEvent',e)
if(e.detail.type=='clean'){
this.filterParams=null
this.setData({
filterParams:null,
})
}else{
this.filterParams=e.detail.data
this.setData({
filterParams:this.filterParams,
})
}
setTimeout(()=>{this.getMarkers();},0)
},
})
\ No newline at end of file
}
})
... ...
... ... @@ -41,6 +41,7 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow: function () {
PubSub.emit('custom-tab-bar')
this.getHistory();
this.setData({
navHeight:this.selectComponent('#nav').getHeight()
... ... @@ -302,6 +303,7 @@ Page({
}
},
setSuggestion(data){//只通知前页变更数据
/*
let pages = getCurrentPages();
let p = pages[pages.length - 2];
if(p.route=='pages/reserve/index'){
... ... @@ -309,5 +311,17 @@ Page({
}else{
PubSub.emit('searchParamList',data)
}
*/
let suggestion=data.suggestion
wx.navigateTo({
url:util.http_build_query({
hasSuggestion:1,
keyword:suggestion.title,
lat:suggestion.latitude,
lng:suggestion.longitude,
centre_pos:`${suggestion.latitude},${suggestion.longitude}`,
multiIndex:0,
},'/pages/reserve/indexList')
})
},
})
\ No newline at end of file
... ...
... ... @@ -74,15 +74,12 @@
},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"game": {
... ... @@ -90,11 +87,9 @@
"list": []
},
"gamePlugin": {
"current": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": [
{
"id": 0,
... ...