xt / xcx-book · Commits

Go to a project

Commit a655eff241dfd509831276829804cbe2bccda982

Authored by vking
2 parents 0fa2a88a 6b341723
build: skipped

blue ui

Inline Side-by-side
Showing 70 changed files with 6187 additions and 1981 deletions
... ... @@ -132,16 +132,12 @@
"text": "订座"
},
{
"pagePath": "pages/me/follow",
"text": "关注"
"pagePath": "pages/reserve/search",
"text": "查找"
},
{
"pagePath": "pages/customer/list",
"text": "日程"
},
{
"pagePath": "pages/me/index",
"text": "我的"
"pagePath": "pages/me/list",
"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: #FF7A00;
--yellow: #FFC9AA;
--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: #f2f2f2;
--white: #ffffff;
/* 浅色 */
--redLight: #fadbd9;
--orangeLight: #fde6d2;
--yellowLight: #fef2ce;
--oliveLight: #e8f4d9;
--greenLight: #d7f0db;
--cyanLight: #d2f1f0;
--blueLight: #E6F3FF;
--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: 20rpx;
}
/* ==================
图片
==================== */
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: 2rpx 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: 99999;
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);
}
.bg-blue-blue{
background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
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-22{
font-size: 22rpx;
}
.text-sm {
font-size: 24rpx;
}
.text-26{
font-size: 26rpx;
}
.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/showModal/showModal.js
import util from '../../../utils/util'
const properties = {
cancelText: {type: String, value: ''},
cancelColor: {type: String, value: '#000'},
confirmText: {type: String, value: '确认'},
confirmColor: {type: String, value: '#fff'},
header: {type: String, value: '确认信息'},
body: {type: String, value: '确认信息'},
cla: String,
};
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: properties,
/**
* 组件的初始数据
*/
data: {
hasShow: false,
},
attached() {
let opt = {};
Object.keys(properties).forEach((k) => {
opt[k] = this.data[k]
})
this.setData({
opt: opt
})
},
/**
* 组件的方法列表
*/
methods: {
options(obj) {
let opt = this.data.opt;
this.setData({
opt: {
...opt,
...obj
}
})
return this;
},
show() {
console.log(this.data.opt)
this.setData({
hasShow: true,
})
},
tapButton(e) {
if(util.attr(e, 'type')=='confirm'){
this.triggerEvent('event', {type: util.attr(e, 'type')})
}
this.hide();
},
hide() {
this.setData({
hasShow: false,
})
}
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/showModal/showModal.wxml-->
<view class="cu-modal bottom-modal {{hasShow?'show':''}}" bindtap="hide">
<view class="cu-dialog confirm bg-white" catchtap="catchtap">
<view class="view padding-lg">
{{opt.header}}
</view>
<view class="view margin-bottom-xl">
{{opt.body}}
</view>
<view class="flex justify-center margin-bottom-lg margin-top">
<button class="view cu-btn margin-right-xl round bg-ghostWhite" wx:if="{{opt.cancelText}}"
bindtap="tapButton" data-type="cancel"
style="color:{{opt.cancelColor}};">{{opt.cancelText}}</button>
<button class="view cu-btn round bg-blue"
bindtap="tapButton" data-type="confirm"
style="color:{{opt.confirmColor}};">{{opt.confirmText}}</button>
</view>
</view>
</view>
... ...
/* components/showModal/showModal.wxss */
@import "../../../colorui/main.wxss";
.confirm{
border-radius: 40rpx 40rpx 0rpx 0rpx !important;
}
.bg-ghostWhite{
background-color: var(--ghostWhite);
}
\ No newline at end of file
... ...
// components/actionSheet/phone.js
import util from '../../../utils/util';
Component({
/**
* 组件的属性列表
*/
properties: {
//items: Array,//电话列表
//seller:Object,//商家信息
hasTip:{
type:Boolean,
value:true,
},
},
/**
* 组件的初始数据
*/
data: {
actionSheetHidden: true,
hasOnlineReserve:false,
},
/**
* 组件的方法列表
*/
methods: {
show(seller){
this.seller=seller
let seller_tel = this.seller.seller_tel;
// if(this.seller.is_online_reserve==1 && this.seller.is_tele==0){
// //开通在线预订，但无商家接单设备，拨打运营电话
// seller_tel = ['400-000-9690']
// }else{
// if (seller_tel.length < 1) {
// seller_tel = [this.seller.phone]
// }
// }
console.log('seller_tel',seller_tel)
if (seller_tel.length < 1) {
seller_tel = [this.seller.phone]
}
this.setData({
actionSheetHidden: false,
items:seller_tel,
hasOnlineReserve:this.seller.is_online_reserve==1
})
},
hide(){
this.setData({
actionSheetHidden: true,
})
},
bindItemTap(e){
this.hide();
let index=util.attr(e,'index')
if(index=='reserve'){//跳转到预订页
let pages=getCurrentPages();
let p=pages[pages.length-1];
if(p.route=='pages/reserve/detail'){
p.setData({
activeTab:'reserve'
})
}else{
let url=util.http_build_query({id:this.seller.id,activeTab:'reserve'},'/pages/reserve/detail')
wx.navigateTo({
url:url,
})
}
return;
}else{
let value=util.attr(e,'value')
wx.makePhoneCall({
phoneNumber: value.replace(/[^\d]/g, '')
})
}
},
actionSheetChange(){
this.hide();
}
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/actionSheet/phone.wxml-->
<view class="cu-modal bottom-modal {{!actionSheetHidden?'show':''}}" catchtap="hide">
<view class="cu-dialog bg-white" catchtap="catchtap" style="border-radius: 40rpx 40rpx 0rpx 0rpx">
<view class="view flex flex-direction justify-center align-center padding-lr-xl" >
<block wx:for="{{items}}" wx:key="itemskey">
<view class="view flex justify-center align-center phone-item" style="width: 100%;"
bindtap="bindItemTap" data-value="{{item}}" data-index="{{index}}">
<view class="view p2"></view>
<view class="margin-left-sm margin-tb-lg" style="font-size: 34rpx;">{{item}}</view>
</view>
</block>
<view class="action-sheet-cancel view" bindtap="hide">取消</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* components/actionSheet/phone.wxss */
@import "../../../colorui/main.wxss";
.p2{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2816%29.png");
width: 40rpx;
height: 40rpx;
}
.action-sheet-cancel{
height:80rpx;
background:#F5F5F5;
border-radius:42rpx;
width: 100%;
text-align: center;
font-size:34rpx;
font-weight:400;
color: #666666;
line-height:80rpx;
margin-top: 20rpx;
margin-bottom: 40rpx;
}
.phone-item+.phone-item{
border-top: 2rpx solid #E5E5E5;
}
... ...
// components/reserve/caixi.js
import util from '../../../utils/util';
Component({
/**
* 组件的属性列表
*/
properties: {
multiArray:{
type:Array,
value:[],
},
multiIndex:{
type:Array,
value:[],
},
},
/**
* 组件的初始数据
*/
data: {
hidden:true
},
/**
* 组件的方法列表
*/
methods: {
hide(){
this.setData({
hidden:true,
})
},
active(e){
this.triggerEvent('active',util.attr(e,'index'));
this.hide();
},
show(){
this.setData({
hidden:false,
})
},
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/reserve/caixi.wxml-->
<view class="caixi {{hidden?'':'animation-slide-top'}}" catchtap="hide" hidden="{{hidden}}">
<view class="caixi-view">
<view class="item {{index==multiIndex[0]?'active':''}}"
bindtap="active" data-index="{{index}}"
wx:for="{{multiArray[0]}}" wx:key="multiArraykey">
{{item}}
<view class="number" wx:if="{{index>=1 && index<4}}">{{index}}</view>
</view>
</view>
</view>
... ...
/* components/reserve/caixi.wxss */
@import "../../../app.wxss";
@import "../../../colorui/animation.wxss";
.caixi{
background-color: #fefefe;
position: absolute;
width: calc(100% - 80rpx);
border-radius: 0rpx 0rpx 40rpx 40rpx;
padding: 0rpx 40rpx 30rpx;
color: #666666;
padding-top: 20rpx;
}
.caixi-view{
}
.item{
background-color: #F1F1F1;
width: 150rpx;
height: 70rpx;
overflow: hidden;
white-space:nowrap;
border-radius: 4rpx;
line-height: 70rpx;
font-size: 24rpx;
text-align: center;
margin-bottom: 30rpx;
position: relative;
display: inline-block;
margin-right: calc((100% - 600rpx) / 3);
}
.item:nth-child(4n){
margin-right:0;
}
.item.active{
background: #E6F3FF;
color:#42A5FF;
font-weight: 400;
}
.item .number{
width: 28rpx;
height: 28rpx;
background: linear-gradient(180deg, #FFC140 0%, #FFA000 100%);
border-radius: 0px 0px 10rpx 0px;
position: absolute;
top:0;
left: 0;
height: 28rpx;
font-size: 20rpx;
font-weight: 600;
color: #FFFFFF;
line-height: 28rpx;
}
... ...
// components/2.0/filter/filter-group.js
import DA from '../../../pages/reserve/data';
import util from '../../../utils/util'
Component({
/**
* 组件的属性列表
*/
properties: {
height:Number,
disabled:Boolean,
},
/**
* 组件的初始数据
*/
data: {
multiArray: ['全部菜系'],
multiIndex: [0],
tags: [
{id: 1, name: '环境好'},
{id: 2, name: '菜品有特色'},
{id: 3, name: '超大包间'},
],
caixiOpened:false,
filterOpened:false,
},
attached(){
this.init()
this.filterParams= null
this.paramsData={}//过滤参数集合
},
/**
* 组件的方法列表
*/
methods: {
async init(){
this.setData({
multiArray: [['全部菜系'].concat(await DA.getCates())]
})
},
caixiActive(e) {
console.log('caixiActive', e);
this.setData({
multiIndex: [e.detail]
})
if(e.detail>0){
DA.getCatesID(parseInt(e.detail) - 1).then(cuisine=>{
this.paramsData.cuisine=cuisine
this.eventPush()
})
}else{
this.paramsData.cuisine=""
this.eventPush()
}
this.hide()
},
caixiShow() {
if(this.data.multiArray[0].length==1){
return this.init()
}
if(this.data.disabled) return;
if(this.data.caixiOpened){
this.selectComponent('#caixi').hide();
this.setData({
caixiOpened:false,
})
}else{
this.selectComponent('#filter').hide();
this.selectComponent('#caixi').show();
this.setData({
caixiOpened:true,
filterOpened:false,
})
}
},
filterShow() {
if(this.data.disabled) return;
if(this.data.filterOpened){
this.selectComponent('#filter').hide();
this.setData({
filterOpened:false,
})
}else{
this.selectComponent('#caixi').hide();
this.selectComponent('#filter').show(this.filterParams);
this.setData({
filterOpened:true,
caixiOpened:false,
})
}
},
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,
})
}
this.paramsData.filterParams=this.filterParams
this.paramsData.average=""
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)
}
this.paramsData.average = filterParams
}
this.eventPush()
this.hide()
},
tagsChange(e) {
if(this.data.disabled) return;
let id = util.attr(e, 'id');
let tags = this.data.tags;
let tagsIds=[];
tags.forEach(t => {
if (t.id == id) {
t.active = !t.active
}
if (t.active) {
tagsIds.push(t.id)
}
})
this.setData({
tags:tags,
})
this.paramsData.tags=tagsIds.toString()
this.eventPush()
this.hide()
},
hide(){
this.selectComponent('#caixi').hide();
this.selectComponent('#filter').hide();
this.setData({
filterOpened:false,
caixiOpened:false,
})
},
eventPush(){
this.triggerEvent('event',this.paramsData);
},
}
})
... ...
{
"component": true,
"usingComponents": {
"caixi":"./caixi",
"filter":"./filter"
}
}
\ No newline at end of file
... ...
<!--components/2.0/filter/filter-group.wxml-->
<view class="view filter-group-view {{caixiOpened || filterOpened?'mask':''}}"
bindtap="hide"
style="height: {{caixiOpened || filterOpened?height+'px':'auto'}};">
<view catchtap="catchtap"
class="view bg-white flex flex-sub filter-group padding-top-sm padding-left-lg padding-right-lg padding-bottom-sm {{caixiOpened || filterOpened?'filter-group-opened':''}}">
<view class="view cu-tag round {{caixiOpened?'opened text-blue':''}} {{multiIndex[0]>0?'bg-blue light':''}} " bindtap="caixiShow">
<block wx:if="{{multiIndex[0]==0}}">菜系</block>
<block wx:else="">{{multiArray[0][multiIndex[0]]}}</block>
<view class="more view"></view>
</view>
<block wx:for="{{tags}}" wx:key="tagskey">
<view class="view cu-tag round {{item.active?'bg-blue light':''}}"
bindtap="tagsChange"
data-id="{{item.id}}">{{item.name}}</view>
</block>
<view class="view cu-tag round {{filterOpened?'opened text-blue':''}} {{filterParams.consumeStr?'bg-blue light':''}}" bindtap="filterShow">
{{filterParams.consumeStr?filterParams.consumeStr:'筛选'}}
<view class="more view"></view>
</view>
</view>
<view class="opened-block bg-white" catchtap="catchtap">
<caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"
bindactive="caixiActive" id="caixi"
></caixi>
<filter id="filter" bindevent="filterEvent"></filter>
</view>
</view>
... ...
/* components/2.0/filter/filter-group.wxss */
@import "../../../colorui/main.wxss";
.cu-tag+.cu-tag{
margin-left: 20rpx;
}
.more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2815%29.png");
width: 12rpx;
height: 6rpx;
margin-left: 6rpx;
}
.light .more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2814%29.png");
}
.opened .more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2813%29.png");
}
.opened-block{
position: relative;
}
.filter-group-view{
position: relative;
z-index: 10000;
}
.filter-group{
position: relative;
z-index: 10000;
overflow-x: auto;
}
.filter-group:after{
display: block;
content: "";
min-width: 40rpx;
height: 40rpx;
}
.filter-group-opened{}
.mask:before{
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% - 120rpx);
background-color: rgba(0,0,0,0.5);
}
\ No newline at end of file
... ...
// components/reserve/search/filter.js
import util from '../../../utils/util'
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
consumeStr:'',
hasDisplay:false,
},
attached(){
this.min=0
this.max=300
},
/**
* 组件的方法列表
*/
methods: {
consumeEvent(e){
console.log('consumeEvent',e)
let data={
hasChange:true,
}
if(e.detail.type=='once'){
this.min=e.detail.min
this.max=e.detail.max
}else{
this[e.detail.type]=e.detail.value
}
let consumeStr=''
if(this.min==0){
if(this.max>this.min){
consumeStr='¥'+this.max+'以下'
}
}else{
if(this.min<300){
consumeStr='¥'+this.min+'-'+this.max
}else{
consumeStr='¥'+this.min+'以上'
}
}
let obj={
consumeStr:consumeStr,
}
if(e.detail.type!='once'){
obj.active=''
}
this.setData(obj)
},
changeVal(e){
let active=util.attr(e,'val')
let val=active.split(',')
this.min=val[0]
this.max=val[1]
this.setData({
active:active,
})
this.selectComponent('#consume').changeVal(this.min,this.max);
},
hide(){
this.setData({
hasDisplay:false,
})
},
show(filterParams=null){
let obj={
hasDisplay:true,
}
if(filterParams){
if(filterParams.active){
obj.active=filterParams.active
}
this.min=filterParams.min
this.max=filterParams.max
obj.consumeStr=filterParams.consumeStr||''
}
this.setData(obj)
if(filterParams){
setTimeout(()=>{
this.selectComponent('#consume').changeVal(this.min,this.max);
},0)
}else{
setTimeout(()=>{
this.selectComponent('#consume').changeVal(0,300);
this.setData({
active:'',
consumeStr:'',
})
},0)
}
},
submit(){
this.triggerEvent('event',{
type:'set',
data:{
consumeStr:this.data.consumeStr||'',
min:this.min,
max:this.max,
active:this.data.active||'',
},
})
this.hide()
},
reset(){
this.selectComponent('#consume').changeVal(0,300);
this.setData({
active:'',
consumeStr:'',
})
this.triggerEvent('event',{type:'clean'})
this.hide()
},
}
})
... ...
{
"component": true,
"usingComponents": {
"consume":"/components/stat/zyslider"
}
}
\ No newline at end of file
... ...
<!--components/reserve/search/filter.wxml-->
<view class="filter {{hasDisplay?'animation-slide-top':''}}" catchtap="catchtap" wx:if="{{hasDisplay}}">
<view class="part flex-ll">
人均消费
<view class="txt" wx:if="{{consumeStr}}">{{consumeStr}}</view>
</view>
<view class="flex-lr tips">
<view class="content">¥0</view>
<view class="content">¥300以上</view>
</view>
<view class="consume flex-vc">
<consume style="width:99%;" id="consume"
cla="slider20"
minValue="0" maxValue="300" min="0" max="300"
step="10"
blockColor="#ffffff"
backgroundColor="#D8D8D8"
selectedColor="#42A5FF"
bindevent="consumeEvent">
</consume>
</view>
<view class="flex-lr split">
<view class="item {{active=='0,100'?'active':''}}" bindtap="changeVal" data-val="0,100">¥100以下</view>
<view class="item {{active=='100,200'?'active':''}}" bindtap="changeVal" data-val="100,200">¥100-200</view>
<view class="item {{active=='200,300'?'active':''}}" bindtap="changeVal" data-val="200,300">¥200-300</view>
<view class="item {{active=='300,300'?'active':''}}" bindtap="changeVal" data-val="300,300">¥300以上</view>
</view>
<view class="flex-lr buttons">
<view class="reset" bindtap="reset">重置</view>
<view class="submit" bindtap="submit">完成</view>
</view>
</view>
... ...
/* components/reserve/search/filter.wxss */
@import "../../../app.wxss";
@import "../../../colorui/animation.wxss";
.filter{
position: absolute;
width: 100%;
background-color: #fefefe;
z-index: 9999;
padding: 20rpx 40rpx 0;
box-sizing: border-box;
border-radius: 0px 0px 40rpx 40rpx;
}
.part{
height: 48rpx;
font-size: 34rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #353535;
line-height: 48rpx;
}
.part .txt{
height: 48rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #42A5FF;
line-height: 48rpx;
margin-left: 30rpx;
}
.tips{
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 40rpx;
margin-top: 40rpx;
}
.tips .content{
width: 130rpx;
text-align: center;
}
.consume{
margin: 0rpx auto;
width: calc(100% - 60rpx);
height: 80rpx;
overflow: hidden;
}
.split{
margin-top: 60rpx;
}
.split .item{
width: calc(calc(100% - 66rpx) / 4);
margin-right: 22rpx;
height: 84rpx;
background: #F1F1F1;
border-radius: 6rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 84rpx;
text-align: center;
}
.split .item:last-child{
margin-right: 0;
}
.split .item.active{
background: #E6F3FF;
color: #42A5FF;
}
.buttons{
width: calc(100% + 100rpx);
margin-left: -50rpx;
margin-top: 60rpx;
box-shadow: 0px 0px 8rpx 0px #EEF0F2;
border-radius: 0px 0px 40rpx 40rpx;
padding: 20rpx 50rpx;
box-sizing: border-box;
}
.buttons .reset,.buttons .submit{
width: calc(50% - 25rpx);
height: 80rpx;
background: #F2F2F2;
border-radius: 40rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #42A5FF;
line-height: 80rpx;
text-align: center;
box-sizing: border-box;
}
.buttons .submit{
margin-left: 50rpx;
background: #42A5FF;
color: #FFFFFF;
}
\ No newline at end of file
... ...
// components/2.0/reserve/card.js
import util from '../../../utils/util';
import RS from '../../../utils/reserveStatus'
Component({
/**
* 组件的属性列表
*/
properties: {
detail:Object,
},
/**
* 组件的初始数据
*/
data: {
},
attached(){
//this.init()
},
observers: {
'detail': function() {
this.init()
},
},
/**
* 组件的方法列表
*/
methods: {
init(){
let detail=RS.reserve(this.data.detail)
console.log('detail.init',detail)
let tableSubInfo = ''
let tableFirst = '';
if (detail.tableFirst) {
tableSubInfo = (detail.tableFirst || '') + ' ' + (detail.tableSubInfo || '');
tableFirst = detail.tableFirst
} else if(detail.tables && detail.tables.length>0) {
tableFirst = detail.tables[0].name
tableSubInfo = detail.tables[0].name;
if (detail.tables.length > 1) {
tableSubInfo += ' 等' + (detail.tables.length) + '个'
+ (detail.tables[0].tid == 2 ? '包间' : '');
tableFirst += '等';
}
}
detail.tableFirst=tableFirst
detail.tableSubInfo=tableSubInfo
this.setData({
reserve:detail,
})
}
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/2.0/reserve/card.wxml-->
<wxs src="../../../utils/util.wxs" module="util" />
<view class="view margin-lr-lg margin-top-sm solid radius padding padding-bottom-lg" style="box-shadow: 0px 0px 20rpx 0px #EEF0F2;">
<view class="view flex padding-bottom-sm solid-bottom">
<view class="view round margin-right-sm"
style="width: 44rpx;height: 44rpx; background-image: url('{{reserve.seller.seller_image}}');">
</view>
<view class="view text-cut flex-treble">
<view class="view text-lg text-cut" style="margin-bottom: 16rpx;">{{reserve.seller.sellername}}</view>
<view class="view text-df bg-white text-cut">{{reserve.seller.map_address}}</view>
</view>
<view class="view margin-left-sm text-blue text-lg" style="min-width: 100rpx;">
{{reserve.getStatusStr}}
</view>
</view>
<view class="view margin-top-sm">
<view class="view flex margin-bottom-sm align-center">
<view class="view flex-sub bg-white">预订时间</view>
<view class="view flex-treble text-bold" style="font-size: 36rpx;">
<view class="value" wx:if="{{reserve.hasOnlineReserve || reserve.hasUpdateDate}}">
<text wx:if="{{reserve.ddate>0}}">{{util.unixtoTime(reserve.ddate||'','MM月DD日')}}　{{reserve.soltName}}</text>
</view>
<view class="value" wx:else="">{{reserve.rdateStr}}</view>
</view>
</view>
<view class="view flex align-center">
<view class="view flex-sub bg-white" style="min-width: 140rpx;">包间类型</view>
<view class="view flex-treble text-bold text-cut" style="font-size: 36rpx;">
{{reserve.tableFirst||util.getRoomName(reserve.room_demand)}}
</view>
</view>
</view>
</view>
... ...
/* components/2.0/reserve/card.wxss */
@import "../../../colorui/main.wxss";
\ No newline at end of file
... ...
// components/2.0/seller/card.js
import util from '../../../utils/util'
Component({
/**
* 组件的属性列表
*/
properties: {
seller:Object,
activeSellerID:String,
},
/**
* 组件的初始数据
*/
data: {
},
attached(){
//this.initSeller()
},
observers: {
'seller': function() {
this.initSeller()
}
},
/**
* 组件的方法列表
*/
methods: {
initSeller(){
let seller=this.data.seller
if(seller.cate && seller.cate.length>0){
seller.cateStr=[];
seller.cate.some(cate=>{
seller.cateStr.push(cate.name);
if(seller.cateStr.length>2){return true}
})
seller.cateStr=seller.cateStr.join('/')
}
this.setData({
sellerx:seller,
})
},
reserve(e){
if(this.data.seller.is_online_reserve==1){
let url=util.http_build_query({id:this.data.seller.id,activeTab:'reserve'},'/pages/reserve/detail')
let cid=util.attr(e,'cid')
if(cid){
url=util.http_build_query({
classID:cid,
className:util.attr(e,'cname'),
},url)
}
return wx.navigateTo({
url:url,
})
}else{
this.triggerEvent('event',{type:'phone',seller:this.data.seller})
}
},
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/2.0/seller/card.wxml-->
<wxs src="../../../utils/util.wxs" module="util" />
<view class="view seller padding-sm padding-bottom-xs margin-sm {{activeSellerID==sellerx.id?'active':''}}">
<view class="view flex avatar-block">
<view class="view avatar">
<image src="{{sellerx.seller_image?sellerx.seller_image+'?imageView2/2/w/320/interlace/0/q/100':'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png'}}" class="avatar-image" mode="aspectFill" lazy-load></image>
<view class="avatar-txt text-white text-xs text-center text-cut" wx:if="{{sellerx.brand.name}}">{{sellerx.brand.name}}</view>
</view>
<view class="view detail margin-left-sm flex-treble margin-top-sm text-cut">
<view class="view flex align-center justify-between" style="height: 52rpx;">
<view class="view title text-bold text-cut margin-right-sm">{{sellerx.sellername}}</view>
<view class="view text-gray" style="font-size: 26rpx;">{{util.distance(sellerx.distance||sellerx.distance_centre)}}</view>
</view>
<view class="view flex align-center justify-between text-gray margin-top-xs" style="height: 36rpx;">
<view class="view caixi text-cut">
<view class="view text-cut">{{sellerx.cateStr}}</view>
</view>
<view class="view renjun flex margin-left-lg align-center" wx:if="{{sellerx.average>0}}">
<view class="text-22">¥</view>
<view class="text-26" style="margin: 0 4rpx;">{{sellerx.average}}</view>
<view class="text-22">/人</view>
</view>
</view>
<view class="view flex align-center margin-top-xs active" style="height: 36rpx;">
<block wx:for="{{sellerx.activity}}" wx:key="selleractivitykey" wx:if="{{index<3}}">
<view class="cu-tag line-yellow view">
<text class="text-orange">{{(item.type==2?'满赠':item.title)}}</text>
</view>
</block>
</view>
</view>
</view>
<view class="view flex align-center justify-between margin-top-sm reserve-view" catchtap="catchtap">
<view class="view rooms flex-treble flex" style="overflow-x: auto">
<block wx:for="{{sellerx.class}}" wx:key="seclass">
<view
bindtap="reserve" data-cid="{{item.id}}" data-cname="{{item.name}}"
class="cu-tag round line-blue text-blue view">{{item.name}}</view>
</block>
<view class="cu-tag round line-white text-blue view cu-tag-end"></view>
</view>
<view class="view button-view flex justify-end" bindtap="reserve">
<view class="cu-btn bg-blue text-white round reserve-button text-df text-bold view padding-xs">订包间</view>
</view>
</view>
</view>
... ...
/* components/2.0/seller/card.wxss */
@import "../../../colorui/main.wxss";
.seller{
height: 304rpx;
background: #FFFFFF;
box-shadow: 0px 0px 30rpx 0px #E5E5E5;
border-radius: 20rpx;
position: relative;
border: 2rpx solid #FFFFFF;
}
.seller.active{
border: 2rpx solid #FFC9AA;
}
.avatar{
position: relative;
}
.avatar-image{
width: 200rpx;
height: 188rpx;
background: #D8D8D8;
border-radius: 10rpx;
}
.avatar-txt{
background: linear-gradient(180deg, #FFC140 0%, #FFA000 100%);
width: 96rpx;
height: 37rpx;
border-radius: 10rpx 4rpx 20rpx 0px;
position: absolute;
top:0;
left:0;
line-height: 37rpx;
}
.title{
font-size: 38rpx;
font-weight: 600;
height: 52rpx;
line-height: 52rpx;
}
.active .cu-tag{
height: 36rpx;
line-height: 36rpx;
border-radius: 4rpx;
padding: 0 10rpx;
}
.reserve-view .cu-tag{
height: 52rpx;
border-color: #5EB2FF;
padding: 0 20rpx;
line-height: 52rpx;
}
.reserve-view .cu-tag {
margin-right: 20rpx;
margin-left: 0;
}
.cu-tag-end{
}
.button-view{
width: 144rpx;
height: 56rpx;
position: relative;
}
.button-shadow{
width: 82rpx;
height: 60rpx;
background: #FFFFFF;
box-shadow: 0px 0px 20rpx 0px #CCCCCC;
position: absolute;
right:82rpx;
bottom:16rpx;
}
.button-view:before{
position: absolute;
left:0;
top:0rpx;
height: 60rpx;
width: 20rpx;
background: #FFFFFF;
box-shadow: 0px 0px 20rpx 0px #CCCCCC;
content: "";
display: block;
}
.button-view:after{
position: absolute;
left:0;
top:-20rpx;
width: 50rpx;
height: 90rpx;
background-color: #ffffff;
content: "";
display: block;
}
.seller.active .button-view:after{
top:-26rpx;
}
.reserve-button{
width: 124rpx;
height: 56rpx;
background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
border-radius: 28rpx;
z-index: 1;
}
.avatar-block{
height: 188rpx;
overflow: hidden;
}
\ No newline at end of file
... ...
// components/userinfo/getpos.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {},
attached(){
},
/**
* 组件的方法列表
*/
methods: {
getPosDo(timeout=3000){
return new Promise(function(success,fail){
let timer1=setTimeout(()=>{
fail('timeout')
},timeout)
wx.getLocation({
type: 'gcj02',
success: (res) => {
getApp().location=res
success(res)
},
fail: (res) => {
fail(res)
},
complete:()=>{
if(timer1) clearTimeout(timer1)
}
});
})
},
getPos(fouce=false){
wx.getSetting({
success: res => {
console.log('getPos.scope.userLocation',res.authSetting)
let timeout=3000;
if(typeof res.authSetting['scope.userLocation']=='undefined'){
timeout=86400;
}
if(res.authSetting['scope.userLocation']===false){
if(fouce){
this.selectComponent('#confirm').options({
header: '定位失败',
body: '请开启定位，为您查询附近餐厅。'
}).show();
}else{
this.triggerEvent("pos",{
latitude: '',
longitude: '',
});
}
}else{//
console.log('getApp().location',getApp().location)
if(getApp().location && getApp().location.latitude){
return this.triggerEvent("pos",{
latitude: getApp().location.latitude,
longitude: getApp().location.longitude,
});
}
this.getPosDo(timeout).then(res=>{
console.log('getPos.then',res)
this.triggerEvent("pos",{
latitude: res.latitude,
longitude: res.longitude,
});
}).catch(res=>{
console.log('getPos.catch',res)
this.triggerEvent("pos",{
latitude: '',
longitude: '',
});
})
}
}
})
},
confirmEvent(e){
wx.openSetting({
success:res=>{
console.log('getPos.openSetting',res)
this.getPos();
}
})
},
}
})
... ...
{
"component": true,
"usingComponents": {
"confirm":"/components/2.0/dialog/confirm"
}
}
\ No newline at end of file
... ...
<!--components/userinfo/getpos.wxml-->
<confirm id="confirm"
confirmText="去开启"
confirmColor="#FFFFFF"
cancelText="再想想"
cancelColor="#42A5FF"
bindevent="confirmEvent"></confirm>
... ...
/* components/userinfo/getpos.wxss */
\ No newline at end of file
... ...
... ... @@ -21,10 +21,10 @@
<view class="context flex-lr">
<view class="left info Medium">
<view class="label">时间</view>
<view class="value" wx:if="{{hasOnlineReserve || detail.hasUpdateDate}}">
<view class="value" wx:if="{{detail.hasUpdateDate}}">
<text wx:if="{{detail.ddate>0}}">{{util.unixtoTime(detail.ddate||'','MM月DD日')}}　{{util.reserveTimeSpace(detail.ddate_solt||detail.section)}}</text>
</view>
<view class="value" wx:else="">{{rdateStr}}</view>
<view class="value" wx:else="">{{detail.rdateStr}}</view>
</view>
<view class="line"></view>
<view class="right info Medium" wx:if="{{(detail.type==1 && (detail.status==4 || detail.status==0)) || hasOnlineReserve || detail.status==0 || detail.status==6}}">
... ...
... ... @@ -6,6 +6,7 @@ Component({
*/
properties: {
/** slider 最小值 */
cla:String,//额外样式名称
min: {
type: Number
},
... ...
<!--component/zyslider.wxml-->
<slot></slot>
<view class="container {{hideOption}}">
<view class="container {{cla}} {{hideOption}}">
<view class="slider-item min" style="left:{{leftValue}}rpx;background-color:{{blockColor}};" catchtouchmove="sliderMove" data-type="min"></view>
<view class="slider-item max" style="left:{{rightValue}}rpx;background-color:{{blockColor}};" catchtouchmove="sliderMove" data-type="max"></view>
... ...
... ... @@ -34,11 +34,15 @@
width: 60rpx;
height: 60rpx;
background: #FFFFFF;
box-shadow: 0px 4rpx 8rpx 0rpx #F4DAB9;
border: 2rpx solid #E9BE94;
box-shadow: 0px 4rpx 8rpx 0rpx #E6F3FF;
border: 2rpx solid #E6F3FF;
border-radius: 50%;
z-index: 2;
}
.slider20 .slider-item{
box-shadow: 0px 4prx 8rpx 0rpx #E6F3FF;
border: 2rpx solid #E6F3FF;
}
.min {
position: relative;
... ...
... ... @@ -32,6 +32,7 @@ Component({
this.hide();
}else{
let p=getCurrentPages()
console.log('add-to-lite.attached',p)
if(p.length==1){
this.show();
}
... ... @@ -45,7 +46,7 @@ Component({
show(){
this.triggerEvent("show");
//导航栏自适应
if(this.data.type=='yellow'){
if(this.data.type=='black20'){
let systemInfo = wx.getSystemInfoSync();
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
... ...
... ... @@ -2,15 +2,13 @@
<view class="tip {{type}}" style="top:{{statusBarHeightFull}}px;" bindtap="hide" hidden="{{hidden}}">
<view class="jian"></view>
<view class="content flex-lr" bindtap="hide">
<view class="flex-vc" wx:if="{{type=='yellow'}}">
<view class="flex-ll text">
<view class="flex-vc" wx:if="{{type=='black20'}}">
<view class="flex-ll text title">
点击
<view class="more"></view>
添加到我的小程序
</view>
<view class="text flex-ll">微信下拉即可快速
<view class="Semibold">订包间</view>
</view>
<view class="text">微信下拉即可快速订包间</view>
</view>
<view class="flex-ll" wx:else="">
<view class="flex-ll text">
... ...
... ... @@ -89,4 +89,53 @@
}
.tip.black .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201911181208294.png");
}
.tip.black20{
width: 436rpx;
right: 20rpx;
font-size:20rpx;
font-weight:500;
position: fixed;
z-index: 99;
}
.tip.black20 .content{
height:114rpx;
line-height: 100rpx;
background:rgba(0,0,0,0.7);
border-radius:20rpx;
color:#FFFFFF;
}
.tip.black20 .more{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%282%29.png");
width: 32rpx;
height: 12rpx;
}
.tip.black20 .close{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%283%29.png");
width: 20rpx;
height: 20rpx;
}
.tip.black20 .jian{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%281%29.png");
width: 72rpx;
height: 54rpx;
margin-left: 230rpx;
}
.tip.black20 .text{
height: 32rpx;
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 32rpx;
}
.tip.black20 .title{
height: 36rpx;
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 36rpx;
margin-bottom: 6rpx;
}
\ No newline at end of file
... ...
... ... @@ -31,6 +31,13 @@ Component({
*/
methods: {
getPos(fouce=false){
console.log('getPos')
if(getApp().location && getApp().location.latitude){
return this.triggerEvent("pos",{
latitude: getApp().location.latitude,
longitude: getApp().location.longitude,
});
}
this._getPos().then(res => {
console.log('wx.getLocation.then', res);
failCount=0;
... ... @@ -76,9 +83,9 @@ Component({
if(this.data.hasAllowLoading) wx.hideLoading()
return;
}
this.selectComponent('#showModal').options({
this.selectComponent('#confirm').options({
header: '定位失败',
body: '需要地理位置授权'
body: '请开启定位，为您查询附近餐厅。'
}).show();
} else {
failCount=failCount+1;
... ... @@ -127,7 +134,7 @@ Component({
},2000)
})
},
showModal(e){
confirmEvent(e){
wx.openSetting()
},
}
... ...
{
"component": true,
"usingComponents": {
"showModal":"/components/showModal/showModal"
"confirm":"/components/2.0/dialog/confirm"
}
}
\ No newline at end of file
... ...
<!--components/userinfo/getpos.wxml-->
<showModal id="showModal" confirmText="去授权" bindshowModal="showModal"></showModal>
<confirm id="confirm"
confirmText="去开启"
confirmColor="#FFFFFF"
cancelText="再想想"
cancelColor="#42A5FF"
bindevent="confirmEvent"></confirm>
... ...
// 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: 40rpx;
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");
}
... ...
<view class="page flex-vc">
<image src="http://nosqn.colorcun.com/qidong/1.png?imageView2/2/w/640" class="zhuozi"></image>
<image src="http://nosqn.colorcun.com/2.0/home%20%2819%29.png?imageView2/2/w/640" class="zhuozi"></image>
<view class="qingke"></view>
<view class="zhoudao"></view>
<view class="animation">正在加载中</view>
... ...
/* pages/customer/index.wxss */
page{
background:rgba(255,209,66,0.1);
background:rgba(66, 165, 255,0.1);
}
.zhuozi{
width: 750rpx;
... ... @@ -8,17 +8,17 @@ page{
margin-top: 240rpx;
}
.qingke{
width: 280rpx;
height: 74rpx;
width: 274rpx;
height: 52rpx;
background-size: 100% 100%;
background-image: url("http://nosqn.colorcun.com/qidong/21.png");
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2820%29.png");
margin-top: 40rpx;
}
.zhoudao{
width: 280rpx;
height: 52rpx;
background-size: 100% 100%;
background-image: url("http://nosqn.colorcun.com/qidong/3.png");
background-image: url("http://nosqn.colorcun.com/2.0/home%20%2821%29.png");
margin-top: 30rpx;
}
@keyframes dododo
... ... @@ -43,7 +43,7 @@ page{
font-size:28rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(192,163,105,1);
color:#629BCF;
line-height:40rpx;
text-align: left;
position: fixed;
... ...
... ... @@ -170,4 +170,9 @@ Page({
this.location=e.detail
this.GetCollectionSellerList();
},
sellerCardEvent(e){
if(e.detail.type=='phone'){
this.selectComponent('#as').show(e.detail.seller);
}
},
})
\ No newline at end of file
... ...
... ... @@ -3,10 +3,14 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText":"周到安排",
"usingComponents": {
"formids":"/components/formids/formids",
"getpos":"/components/userinfo/getpos",
"sb-tr":"/components/reserve/seller-box-transverse/seller-box",
"nav":"/components/nav/nav",
"hr":"/components/hr"
"hr":"/components/hr",
"getpos":"/components/2.0/userinfo/getpos",
"a2l":"/components/tips/add-to-lite",
"filter-group":"/components/2.0/filter/filter-group",
"seller-card":"/components/2.0/seller/card",
"chatbot":"/components/userinfo/chatbot",
"as-phone":"/components/2.0/dialog/phone"
}
}
\ No newline at end of file
... ...
<!--pages/me/follow.wxml-->
<nav>订好座，就用周到安排</nav>
<nav>关注</nav>
<view class="pages">
<view class="flex-vc empty" wx:if="{{sellers.length<1}}">
<block wx:if="{{!hasFirstShow}}">
<image src="http://nosqn.colorcun.com/custom/lite-online/image/follow-empty.png"></image>
<view>您还没有收藏任何餐厅哦</view>
</block>
<image src="http://nosqn.colorcun.com/2.0/home%20%2818%29.png" style="width: 520rpx;height: 348rpx;"></image>
<view style="font-size: 28rpx;margin-top: 40rpx;">暂时没有关注的店铺哦</view>
</view>
<view class="follow" wx:else="">
<view class="seller" wx:for="{{sellers}}" wx:key="sellers.key"
bindtap="gotoDetail" data-sid="{{item.id}}" wx:if="{{item.hasFollow}}">
<sb-tr seller="{{item}}"
hasActivityTags="{{false}}"
hasActivityShort="{{true}}"
hasBrand="true" hasActivityRed="true"
hasSlogan="{{false}}"
sellerStyle="noborder"></sb-tr>
</view>
<hr class="seller flex-vc" wx:if="{{!hasMore}}" style="margin-top: 20rpx;">我是有底线的</hr>
<block wx:for="{{sellers}}" wx:key="sellers" >
<navigator url="/pages/reserve/detail?id={{item.id}}" hover-class="navigator-hover">
<seller-card class="seller-card" id="seller-{{item.id}}"
activeSellerID="{{activeSellerID}}"
seller="{{item}}" bindevent="sellerCardEvent" ></seller-card>
</navigator>
</block>
<hr class="seller flex-vc margin-bottom" wx:if="{{!hasMore}}" style="margin-top: 20rpx;">我是有底线的</hr>
</view>
</view>
<getpos bindpos="onpos" id="getpos" hasAllowFail></getpos>
\ No newline at end of file
<getpos bindpos="onpos" id="getpos" hasAllowFail></getpos>
<as-phone id="as"></as-phone>
\ No newline at end of file
... ...
/* pages/me/follow.wxss */
.pages{
width: 90%;
margin: 0 auto;
font-size: 30rpx;
padding-bottom: 98rpx;
}
.empty{margin-top: 230rpx;}
.empty image{
width: 191px;
height: 158px;
}
.empty view{
font-size: 28rpx;
margin-top: 86rpx;
}
.follow {
padding-bottom: 50rpx;
}
.follow .seller{
padding-top:20rpx;
}
\ No newline at end of file
@import "/colorui/main.wxss";
.empty{margin-top: 172rpx;}
... ...
... ... @@ -98,7 +98,8 @@ Page({
},
gotoList(e){
wx.navigateTo({
getApp().meListType=util.attr(e,'type')
wx.switchTab({
url:'/pages/me/list?type='+util.attr(e,'type')
})
}
... ...
... ... @@ -12,6 +12,12 @@
</view>
<view class="pages">
<view class="block-rev money flex-lr">
<navigator url="/pages/me/follow" class="money-item">
<view class="flex-vc">
<view class="money-value">{{user.collection||0}}</view>
<view class="money-title">关注</view>
</view>
</navigator>
<navigator url="/pack-activity/pages/money" class="money-item">
<view class="flex-vc">
<view class="money-value">￥{{user.balance.price||0}}</view>
... ... @@ -26,7 +32,7 @@
</navigator>
</view>
<view class="block-rev">
<navigator url="/pages/me/list">
<navigator url="/pages/me/list" open-type="switchTab">
<view class="title flex-lr">
<view >我的订单</view>
<view class="more"></view>
... ...
... ... @@ -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({
... ... @@ -24,13 +25,13 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if(options.type){
this.tabType=options.type
if(getApp().meListType){
this.tabType=getApp().meListType
this.setData({
tabType:this.tabType
})
}
this.selectComponent('#getpos').getPos();
this.getListData();
},
/**
... ... @@ -44,7 +45,7 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow: function () {
PubSub.emit('custom-tab-bar')
},
/**
... ... @@ -78,9 +79,9 @@ Page({
[`list[`+tabType+`]`]: this.data.list[tabType].concat(data),
hasMore:this.hasMore
})
if(res.data.length==0){
this.GetRecommendSellerLists()
}
// if(res.data.length==0){
// this.GetRecommendSellerLists()
// }
})
},
formatList(list) {
... ... @@ -88,9 +89,9 @@ Page({
let dlist = [];
let openid = getApp().openid;
list.forEach(row => {
row.rdateStr = util.unixtoTime(row.ddate, 'MM月DD日 WW HH:II');
//row.rdateStr = util.unixtoTime(row.ddate, 'MM月DD日 WW HH:II');
row.navigator = row.openid == openid ? 'detail_owner' : 'detail_customer';
row=RS.reserve(row)
//row=RS.reserve(row)
dlist.push(row);
})
return dlist;
... ...
... ... @@ -9,6 +9,7 @@
"sb-tr":"/components/reserve/seller-box-transverse/seller-box",
"getpos":"/components/userinfo/getpos",
"as-phone":"/components/actionSheet/phone",
"card":"/components/seller-card/seller-card"
"card-bak":"/components/seller-card/seller-card",
"card":"/components/2.0/reserve/card"
}
}
\ No newline at end of file
... ...
<!--pages/customer/list.wxml-->
<nav hasHome>我的订单</nav>
<view class="tabs flex-lr">
<view class="item {{tabType==1?'active':''}}" data-type="1" bindtap="switchType">等待确认</view>
<view class="item {{tabType==2?'active':''}}" data-type="2" bindtap="switchType">预订成功</view>
<view class="item {{tabType==3?'active':''}}" data-type="3" bindtap="switchType">历史订单</view>
<view class="item {{tabType==4?'active':''}}" data-type="4" bindtap="switchType">无效预订</view>
<nav>我的订单</nav>
<view class="view tabs flex padding-lg padding-top-xs">
<view class="view item {{tabType==1?'active':''}}" data-type="1" bindtap="switchType">等待确认</view>
<view class="view item {{tabType==2?'active':''}}" data-type="2" bindtap="switchType">预订成功</view>
<view class="view item {{tabType==3?'active':''}}" data-type="3" bindtap="switchType">历史订单</view>
<view class="view item {{tabType==4?'active':''}}" data-type="4" bindtap="switchType">无效预订</view>
</view>
<view class="page">
<view class="view pages">
<block wx:if="{{list[tabType].length==0}}">
<view class="flex-vc empry">
<image src="http://nosqn.colorcun.com/reserve/images/order-empty.png"></image>
<view class="Medium">暂无订单</view>
<image src="http://nosqn.colorcun.com/2.0/home%20%2817%29.png"></image>
<view class="Medium">暂无订单哦</view>
</view>
</block>
<block wx:else="">
<block wx:for="{{list[tabType]}}" wx:key="success.key" wx:for-item="detail" wx:for-index="dateIndex">
<view class="card">
<card
hasShowStatus bindevent="gotoDetail"
seller="{{detail.seller}}" detail="{{detail}}"></card>
</view>
<navigator url="/pages/customer/{{detail.navigator}}?id={{detail.id}}">
<card
hasShowStatus bindevent="gotoDetail"
seller="{{detail.seller}}" detail="{{detail}}"></card>
</navigator>
</block>
<view class="view" style="height: 192rpx;"></view>
</block>
</view>
<block wx:if="{{list[tabType].length==0 && rsl.length>0}}">
<view class="rsl-block">
<view class="line-push">为你推荐</view>
<view class="transverse-list">
<swiper
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{15}}px" next-margin="{{15}}px" style="height: 350rpx;"
current="{{current}}" bindchange="bindtransition" bindanimationfinish="bindtransition">
<block wx:for="{{rsl}}" wx:key="rsl.key">
<swiper-item bindtap="gotoSellerDetail" id="{{item.id}}">
<view class="seller" id="seller-{{item.id}}">
<sb-tr seller="{{item}}"
hasInSwiper bindevent="sbtrEvent"
hasActivityTags="{{false}}"
hasActivityShort="{{true}}"
hasBrand="true" hasActivityTese="true"
hasSlogan="{{false}}"></sb-tr>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</block>
<getpos bindpos="onpos" id="getpos" hasAllowFail hasAllowLoading="{{false}}"></getpos>
<as-phone id="as"></as-phone>
\ No newline at end of file
</view>
\ No newline at end of file
... ...
/* pages/customer/list.wxss */
.page{
width: 90%;
margin: 90rpx 5% 0;
color:#353535;
padding-bottom: 60rpx;
@import "../../colorui/main.wxss";
.pages{
margin-top: 100rpx;
}
.card{
/*border-radius: 0 10rpx;*/
box-shadow: 2rpx 2rpx 14rpx 6rpx rgba(231,228,228,.5);
margin-bottom: 44rpx;
}
.card .top{
min-height: 140rpx;
padding: 0 48rpx;
}
.card .title{
line-height: 140rpx;
font-size: 30rpx;
font-weight: bold;
color:#AD7644;
}
.card .bottom{
background-color: #EAECEE;
box-shadow: 2rpx 2rpx 14rpx 0rpx rgba(231,228,228,.5);
padding: 54rpx 50rpx 50rpx;
}
.card .bottom .rdateStr{
font-size: 30rpx;
}
.card .bottom .name{
margin-top: 28rpx;
margin-bottom: 8rpx;
font-size: 30rpx;
}
.card .bottom .addr{
font-size: 26rpx;
color:#999999;
}
.share-but-view button{
border-radius: 0;
}
.share-but,.share-but-write{
color:#FEFEFE;
background: #262628;
width: 120rpx;
height: 48rpx;
line-height: 48rpx;
font-size: 30rpx;
text-align: center;
}
.share-but-write{
border: 2rpx solid #353535;
background-color: #fefefe;
color:#262628;
}
.tabs{
font-size: 30rpx;
color:##353535;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 44rpx;
position: fixed;
width: 90%;
padding: 0 5%;
background-color: #fff;
z-index: 9;
width: 100%;
}
.tabs .item{
position: relative;
width: 25%;
border: 2rpx solid #E0E0E0;
height: 56rpx;
line-height: 56rpx;
text-align: center;
border-right-width: 0;
}
.tabs .item:last-child{
border-right-width: 2rpx;
}
.tabs .active{
color:#FFFFFF;
background-color: #C8B16D;
border-color: #C8B16D;
font-weight: 600;
color: #42A5FF;
}
.tabs .active:after{
display: block;
position: absolute;
content: "";
bottom: -10rpx;
left:calc(50% - 30rpx);
width: 60rpx;
height: 6rpx;
background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
border-radius: 3rpx;
}
.empry{
font-size: 28rpx;
... ...
// 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;
const mapScale = 15//18;
const def_latitude = 39.684670;
const def_longitude = 118.176300;
const cates_version = '?1.2';
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:{
map:{},
height:1000,
meTop:20,
hasLoading:true,
activeSellerID:'',//高亮商家
scrollSellerID:'',//滚动到商家
},
user:{},
/**
* 生命周期函数--监听页面加载
*/
hasOnLoad:false,
hasGetLocation:false,//定位信息
hasAppHide:false,//app切至后台
param:{},
onLoad: async function (options) {
this.reportTime=new Date()
this.hasOnLoad=true;
// this.qqmapsdk=new QQMapWX({
// key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
// });
this.setData({
multiArray:[['全部菜系'].concat(await DA.getCates())]
onLoad: function (options) {
wx.getSystemInfo({
success:res=>{
console.log('wx.getSystemInfo',res)
this.setData({
height:res.windowHeight-180
})
},
})
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)
// }
// })
this.selectComponent('#getpos').getPos();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: async function (e) {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
onShow: function () {
PubSub.emit('custom-tab-bar')
if(wx.getMenuButtonBoundingClientRect){
let rect=wx.getMenuButtonBoundingClientRect()
this.setData({
meTop:rect.top-5,
})
}
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();
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function (e) {
util.elog(null,'离开地图页')
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
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=[]
onpos(e) {
let res = e.detail;
console.log('onpos.res', res);
let map = this.data.map;
map.latitude = res.latitude;
map.longitude = res.longitude;
map.scale=mapScale;
if (!res.latitude){
map.latitude = def_latitude;
map.longitude = def_longitude;
}else{
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={
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;
}
},
});
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();
},
setLoacl(e){
let pos=util.attr(e,'val').split(',');
let map = this.data.map
map.latitude = pos[0];
map.longitude = pos[1];
this.setData({
map:map
})
},
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();
},
})
reduceMapScale(){
let map = this.data.map
map.scale=parseInt(map.scale)-1
this.setData({
hasBoost:true,
map:map
})
},
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)
moveToLocation() {
console.log('moveToLocation')
this.selectComponent('#getpos').getPos(true);
},
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};
debounceTimer:null,
debounce(func,wait){
if(this.debounceTimer){
clearTimeout(this.debounceTimer)
}
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:'视野不匹配'};
this.debounceTimer=setTimeout(()=>{
this.debounceTimer=null;
func()
},wait);
},
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}`
regionChange(e){
if(e.type=='end'){
console.log('regionChange', e)
this.debounce(this.regionChangeDo,800)
}
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);
}
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='';
}
})
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();
mapCtx:null,
mapData: {
latitude: 0,
longitude: 0,
scale: 30,
hasRegionchange: false,
region: {
southwest: {},
northeast: {},
},
},
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,
regionChangeDo(){
console.log('regionChangeDo')
if(!this.mapCtx){
this.mapCtx = wx.createMapContext('map')
}
if(!this.hasSellerConcat){
sdobj.markers=[]
}
this.setData(sdobj)
this.mapCtx.moveToLocation({
success:(res)=>{
console.log('moveToLocation',res)
}
if(!this.mapCtx) return;
this.mapCtx.getRegion({
success: (res) => {
if (res.southwest.latitude) {
this.mapData.region = res
}
this.selectComponent('#filter-group').hide();
this.getSellers();
},
})
},
bindMultiPickerChange(e){
console.log(e);
let val=util.val(e);
hasSellers:0,
sellers:[],
getSellers(){
console.log('getSellers',this.mapScale,this.mapData)
this.setData({
multiIndex:val
hasLoading:true,
})
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
let param = {
lat: this.user.latitude == def_latitude ? '' : this.user.latitude,
lng: this.user.longitude == def_longitude ? '' : this.user.longitude,
offset: 0,
rows: 200,
distance: 100000,
map: JSON.stringify({...this.mapData.region, scale: 50})
}
this.sellersIds=[]
this.sellers=[]
let sdobj={
map: map,
hasSuggestion:true,
suggestion:suggestion,
hasGetSellersEnd:false,
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.hasSellerConcat){
sdobj.markers=[]
this.hasFilterData=false
if(this.filterGroupData.tags){
param.tags = this.filterGroupData.tags;
this.hasFilterData=true
}
//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)
if (this.filterGroupData.cuisine) {
param.cuisine = this.filterGroupData.cuisine;
this.hasFilterData=true
}
let that=this;
setTimeout(function(){
that.getClassNameFlag=true;
},300)
},
bindtransition(e){
if(this.hasMarkertap){
this.hasMarkertap=false;
return;
if(this.filterGroupData.average){
param.average = this.filterGroupData.average;
this.hasFilterData=true
}
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,
})
this.param = param;
App.Customer.SellerList(param).then(async res => {
if (res.ret == 200) {
this.hasSellers=res.data.flag
this.sellers=res.data.list
this.makeMarker();
this.makeSellers();
this.debounce(this.makeDefMarker,300)
}
}).catch(e=>{
this.debounce(this.getSellers,300)
})
},
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()
makeMarker(){
this.mapCtx.getScale({
success: (res) => {
this.mapData.scale = res.scale;
let markers=[]
let sellersLength=this.sellers.length
this.sellers.forEach((seller,si)=>{
if(seller.scale>this.mapData.scale) return;
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,
};
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;
}
})
}
markers.push(marker)
})
}else{
fail()
}
})
},
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 []
}
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,
markers.push({
id: 'local',
iconPath: "http://nosqn.colorcun.com/2.0/home%20%288%29.png" + cates_version,
latitude: (this.user.latitude||def_latitude)+'',
longitude: (this.user.longitude||def_longitude)+'',
width: 25,
height: 41,
zIndex: 9999,
zIndexBak:9999,
})
this.setData({
markers:markers,
})
},
})
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++
}
})
makeSellers(){
this.setData({
tags:tags,
sellers:this.sellers,
hasSellers:(this.hasSellers==1 || this.sellers.length>0) || this.hasFilterData,
hasLoading:false,
hasFilterData:this.hasFilterData,
})
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]
makeDefMarker(){
if(!this.activeSellerID && this.data.markers.length>0){
this.markertap({markerId:this.data.markers[0].id})
}
},
hasScrollToIng:false,
markertap(e,scrollTo=true){
if(!e.markerId || e.markerId=='local') return;
let markers=this.data.markers
this.activeSellerID = e.markerId
let bl = 1.2;
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;
}
})
},
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)
if (m.width == 12) {
m.width = 8;
m.height = 8;
}
});
},
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)
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;
}
res.eventChannel.on('findSellerData',findSellerData=>{
console.log('findSellerData',findSellerData)
this.findSellerData=findSellerData
setTimeout(()=>{this.getMarkers();},0)
})
m.zIndex = 9999
}
})
},
boostEvent(e){
util.elog(e.detail,'强提醒')
if(e.detail.act=='hide'){
this.setData({
hasGetPos:true,
})
this.selectComponent('#getpos').getPos();
let obj = {
markers: markers,
activeSellerID:this.activeSellerID,
};
this.hasScrollToIng=false
if(scrollTo){
obj.scrollSellerID=this.activeSellerID
this.hasScrollToIng=true
}
this.setData(obj)
setTimeout(()=>{this.hasScrollToIng=false},800)
},
elog(e){
util.elog({attr:util.attr(e),detail:e.detail},util.attr(e,'ename')||'点击')
filterGroupData:{},
filterGroupEvent(e){
console.log('filterGroupEvent',e.detail)
this.filterGroupData=e.detail
this.debounce(this.getSellers,500)
},
sbtrEvent(e){
console.log(e);
if(e.detail.act=='oncall'){
sellerCardEvent(e){
if(e.detail.type=='phone'){
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);
scrollTop:0,
scrollEvent(e){
if(this.hasScrollToIng)return;
//console.log(e.detail.scrollTop)
this.scrollTop=e.detail.scrollTop
this.debounce(()=>{
this.scrollEventActive()
},300)
},
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,
})
scrollEventActive(){
let idx=parseInt(this.scrollTop/170)
if(this.sellers[idx]){
//this.activeSellerID=this.sellers[idx].id
this.markertap({markerId:this.sellers[idx].id},false)
}
setTimeout(()=>{this.getMarkers();},0)
},
})
\ No newline at end of file
})
... ...
... ... @@ -3,16 +3,11 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText":"周到安排",
"usingComponents": {
"formids":"/components/formids/formids",
"nav":"/components/nav/nav",
"getpos":"/components/userinfo/getpos",
"sb-tr":"/components/reserve/seller-box-transverse/seller-box",
"getpos":"/components/2.0/userinfo/getpos",
"a2l":"/components/tips/add-to-lite",
"boost":"/components/tips/boost",
"caixi":"/components/reserve/caixi",
"activity-enter":"/components/activity/enter",
"as-phone":"/components/actionSheet/phone",
"activity-tips":"/components/tips/discount",
"filter":"/components/reserve/search/filter"
"filter-group":"/components/2.0/filter/filter-group",
"seller-card":"/components/2.0/seller/card",
"chatbot":"/components/userinfo/chatbot",
"as-phone":"/components/2.0/dialog/phone"
}
}
\ No newline at end of file
... ...
<!--pages/reservr/index.wxml-->
<view class="pages">
<view class="flex-vc map">
<map id="map" scale="{{map.scale}}"
longitude="{{map.longitude}}" latitude="{{map.latitude}}"
markers="{{markers}}" polygons="{{polygons}}"
bindmarkertap="markertap"
bindcallouttap="markertap"
bindregionchange="regionchange"
bindupdated="mapUpdated"
show-location="{{false}}"
enable-3D="{{false}}"
enable-zoom
enable-scroll
enable-rotate
subkey="SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ"
layer-style="2"
style="width: 100%; height: {{map.height}}px;"></map>
<map id="map" scale="{{map.scale}}"
longitude="{{map.longitude||118.170300}}" latitude="{{map.latitude||39.65273}}"
markers="{{markers}}" polygons="{{polygons}}"
bindmarkertap="markertap"
bindcallouttap="markertap"
bindregionchange="regionChange"
bindupdated="mapUpdated"
show-location="{{false}}"
enable-3D="{{false}}"
enable-zoom
enable-scroll
enable-rotate
subkey="SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ"
layer-style="2"
style="width: 100%; height: 30vh;position: relative;">
<view bindtap="moveToLocation" class="view moveToLocation flex align-center justify-center">
<image class="moveToLocation-image" src="http://nosqn.colorcun.com/2.0/home%20%2811%29.png"></image>
</view>
<movable-area class="seller-view">
<movable-view direction="vertical" out-of-bounds
bindchange="movableChange"
class="movable-view">
<navigator url="./search"
bindtap="elog" data-ename="点击搜索框" hover-class="navigator-hover">
<view class="flex-ll transverse-view-search">
<view class="searchAddr flex-ll">
<image class="icon" src="http://nosqn.colorcun.com/custom/lite-online/image/search26.png"></image>
<view class="title">{{hasSuggestion?suggestion.title:'搜索餐厅/位置'}}</view>
<view class="clean" catchtap="moveToLocation" wx:if="{{hasSuggestion}}"></view>
</view>
<view class="searchList flex-tb" catchtap="listShow">
<image class="icon" src="http://nosqn.colorcun.com/mapmenu/maplist.png"></image>
<view class="title">列表模式</view>
</view>
</view>
</navigator>
<view class="transverse-search">
<view
bindtap="caixiShow"
class="tags {{multiIndex[0]>0?'active':''}}"
>
<view class="picker flex-lr">
<view class="input">
<block wx:if="{{multiIndex[0]==0}}">菜系</block>
<block wx:else="">{{multiArray[0][multiIndex[0]]}}</block>
</view>
<view class="more"></view>
</view>
</view>
<block wx:for="{{tags}}" wx:key="tagskey">
<view class="tags {{item.active?'active':''}}"
bindtap="tagsChange"
data-id="{{item.id}}">{{item.name}}</view>
</block>
<view
bindtap="filterShow"
class="tags {{filterParams.consumeStr?'active':''}}"
>
<view class="picker flex-lr">
<view class="input">
{{filterParams.consumeStr?filterParams.consumeStr:'筛选'}}
</view>
<view class="more"></view>
</view>
</view>
<!--
<view class="fingSeller flex-ll" bindtap="findSeller">
<view class="icon"></view>
<view>查找餐厅</view>
</view>
-->
</map>
<view class="view content padding-top-xs" style="height: 70vh;">
<filter-group height="{{height}}"
id="filter-group"
bindevent="filterGroupEvent"
disabled="{{(sellers.length<1 && !hasFilterData) || hasLoading}}"></filter-group>
<block wx:if="{{hasLoading}}">
<view class="view flex flex-direction justify-center align-center" wx:if="{{hasLoading}}">
<image class="view" src="http://nosqn.colorcun.com/2.0/timg.gif" style="width: 40rpx;height: 40rpx;margin-top: 260rpx;"></image>
<view class="view bg-white text-sm margin-top">包间查找中，请稍后…</view>
</view>
</block>
<block wx:elif="{{sellers.length<1}}">
<view class="view flex flex-direction justify-center align-center empty-box margin-sm" wx:if="{{!hasSellers}}">
<view class="view text-lg">该地区没有可提供服务的餐厅</view>
<view class="view" style="margin-top: 16rpx;">您可以切换到其他城市看看</view>
<view style="margin-top: 80rpx;"
bindtap="setLoacl" data-val="39.684670,118.176300"
class="cu-btn round view text-def text-white bg-blue-blue">去唐山市</view>
</view>
<view class="view flex flex-direction justify-center align-center empty-box margin-sm" wx:elif="{{hasFilterData}}">
<view class="view text-lg">未找到符合要求的餐厅</view>
<view class="view" style="margin-top: 16rpx;">修改或减少条件，获得更多餐厅</view>
<chatbot>
<view style="margin-top: 80rpx;"
bindtap="setLoacl" data-val="39.684670,118.176300"
class="cu-btn round view text-def text-white bg-blue-blue">人工抢订</view>
</chatbot>
</view>
<view class="view flex flex-direction justify-center align-center empty-box empty-box-move margin-sm"
wx:else="">
<view class="view flex text-df tips align-center text-orange">
<view class="view icon"></view>
<view class="view">往任意方向拖动地图，可查找不同范围的餐厅</view>
</view>
<view class="transverse-list" wx:if="{{hasGetSellersEnd}}">
<swiper wx:if="{{hasSellers || listMoreCount>0}}"
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{15}}px" next-margin="{{15}}px" style="height: 350rpx;"
current="{{current}}" bindchange="bindtransition">
<block wx:for="{{markers}}" wx:key="markerskey" wx:if="{{item.id!='location' && item.id!='locationMe'}}">
<swiper-item bindtap="gotoDetail"
data-sid="{{item.id}}" wx:if="{{item.display!='none'}}">
<view class="seller" id="seller-{{item.id}}">
<sb-tr seller="{{item.seller}}"
hasInSwiper bindevent="sbtrEvent"
hasActivityTags="{{false}}"
hasActivityShort="{{true}}"
hasBrand="true" hasActivityRed="true"
hasSuggestion="{{hasSuggestion}}" hasShafa
hasSlogan="{{false}}"></sb-tr>
</view>
</swiper-item>
</block>
<swiper-item bindtap="gotoDetail2">
<view class="seller seller-last" id="seller-last">
<view class="empty">
<view class="info">
<view class="info-msg Semibold">缩放地图发现更多餐厅</view>
<view class="info-txt">往任意方向拖动地图，可搜索不同范围</view>
</view>
<view class="icon"></view>
</view>
</view>
</swiper-item>
</swiper>
<view class="empty-txt flex-vc" wx:else="">
<view class="seller">
<view class="empty">
<view class="info" wx:if="{{listMoreCount>0}}" bindtap="listShow">
<view class="info-msg Semibold" style="margin-top: 58rpx;">已扩大范围为你找到餐厅</view>
<view class="info-txt">当前范围没有找到符合条件的餐厅</view>
<view class="info-button flex-lr" style="display: flex;margin-top: 50rpx;margin-left: 0;">
<view>去挑选</view>
<view class="info-button-gt"></view>
</view>
</view>
<view class="info" wx:elif="{{hasSearchLimit}}">
<view class="info-msg Semibold" style="margin-top: 58rpx;">未找到符合要求的餐厅</view>
<view class="info-txt">修改或减少条件，获取更多餐厅</view>
<button class="button-none flex-lr info-button"
style="display: flex;margin-top: 50rpx;margin-left: 0;"
open-type="contact">
<view>人工帮订</view>
<view class="info-button-gt"></view>
</button>
</view>
<view class="info" wx:else="" bindtap="setTSLocal">
<view class="info-msg Semibold">你可以切换到其他城市看看</view>
<view class="info-button full flex-lr">
<view>唐山市</view>
<view class="info-button-gt"></view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="transverse-list" wx:else="">
<swiper
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{15}}px" next-margin="{{15}}px" style="height: 350rpx;"
current="{{current}}" bindchange="bindtransition">
<swiper-item bindtap="gotoDetail2" >
<view class="seller seller-last" id="seller-last">
<view class="empty">
<view class="info">
<view class="info-msg Semibold">缩放地图发现更多餐厅</view>
<view class="info-txt">往任意方向拖动地图，可搜索不同范围</view>
</view>
<view class="icon"></view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</movable-view>
</movable-area>
</view>
<view bindtap="moveToLocation" class="moveToLocation">
<image src="http://nosqn.colorcun.com/reserve/images/golocal.png"></image>
<view class="view text-lg">地图显示范围无餐厅</view>
<view style="margin-top: 80rpx;"
bindtap="reduceMapScale" data-val="39.684670,118.176300"
class="cu-btn round view text-def text-white bg-blue-blue">扩大搜索范围</view>
</view>
</block>
<block wx:else="">
<scroll-view class="view scroll-view" scroll-y="true"
scroll-into-view="seller-{{scrollSellerID}}"
scroll-with-animation
bindscroll="scrollEvent"
style="width:100%;height: calc(70vh - 50px);">
<block wx:for="{{sellers}}" wx:key="sellers" >
<navigator url="/pages/reserve/detail?id={{item.id}}" hover-class="navigator-hover">
<seller-card class="seller-card" id="seller-{{item.id}}"
activeSellerID="{{activeSellerID}}"
seller="{{item}}" bindevent="sellerCardEvent" ></seller-card>
</navigator>
</block>
<view class="view" style="height: 192rpx;"></view>
</scroll-view>
</block>
</view>
<getpos bindpos="onpos" id="getpos" hasAllowLoading="{{false}}"></getpos>
<navigator url="/pages/me/index" hover-class="navigator-hover">
<view style="top:{{meTop}}px;"
class="me view flex flex-direction align-center justify-center bg-white round">
<view class="icon view"></view>
<view class="text">我的</view>
</view>
</navigator>
<!--
<view class="toast" wx:if="{{hasGetSellersEnd && listMoreCount<1 && !hasSearchLimit}}">该地区没有可供预订的餐厅哦！努力开通中</view>
<view class="toast" wx:if="{{hasGetSellersEnd && markers.length<3 && listMoreCount>0}}">移动或缩放地图，获取更多餐厅</view>
<getpos bindpos="onpos" id="getpos"></getpos>
<seller-box id="seller-box" bindevent="sellerBoxEvent"></seller-box>
<cover-view class="tab-patch"></cover-view>
<a2l bindshow="a2lshow" bindhide="a2lshow" key="INDEX"></a2l>
... ... @@ -173,4 +99,7 @@
<boost bindevent="boostEvent" wx:if="{{hasBoost}}"></boost>
<activity-tips wx:if="{{hasSetActivity}}" map="{{map}}"></activity-tips>
<as-phone id="as"></as-phone>
<filter id="filter" bindevent="filterEvent"></filter>
\ No newline at end of file
<filter id="filter" bindevent="filterEvent"></filter>
-->
<a2l bindshow="a2lshow" bindhide="a2lshow" key="INDEX" type="black20"></a2l>
<as-phone id="as"></as-phone>
\ No newline at end of file
... ...
/* pages/reservr/index.wxss */
@import "/colorui/main.wxss";
page{
background-color: #efefef;
--barHeight: calc(98rpx + env(safe-area-inset-bottom));
}
.pages{
width: 100%;
margin: 0 0 0;
color:#353535;
}
.map{
}
.tab-patch{
position: fixed;
background-color: #fefefe;
height: 20rpx;
width: 100%;
bottom: -120rpx;
/*--barHeight: calc(98rpx + env(safe-area-inset-bottom));*/
}
.moveToLocation{
position: fixed;
bottom: calc(520rpx + var(--barHeight));
right: 20rpx;
width: 62rpx;
height: 62rpx;
}
.moveToLocation image{
width: 62rpx;
height: 62rpx;
}
.transverse-view{
position: relative;
height: 464rpx;
width: 100%;
background-color: #fefefe;
overflow: hidden;
}
.transverse-list{
background-color: #fefefe;
/*height: 264rpx;*/
width: 100%;
margin-top: -360rpx;
}
.transverse-list .seller{
width: 98%;
margin: 0 auto;
}
.transverse-list .seller .empty{
height: 300rpx;
overflow: hidden;
color: #353535;
width: 86%;
border: 2rpx solid #E0E0E0;
border-left: 6rpx solid #F05522;
border-radius: 6rpx;
box-shadow: 0 4rpx 8rpx 0 #E0E0E0;
position: relative;
}
.transverse-list .seller-last .empty{
width: 99%;
}
.seller .empty .info{
height: 124rpx;
font-size: 28rpx;
margin-left: 34rpx;
margin-top: 88rpx;
}
.seller .empty .info .info-msg{
font-size: 32rpx;
color:#F05522;
margin-bottom: 40rpx;
height: 44rpx;
line-height: 44rpx;
position: absolute;
width: 80rpx;
height: 80rpx;
right:0rpx;
bottom:0;
}
.info-txt{
line-height: 40rpx;
.moveToLocation-image{
width: 40rpx;
height: 40rpx;
}
.seller .empty .icon{
background-image: url("http://nosqn.colorcun.com/reserve/images/hasClick.png");
background-size: 100% 100%;
width: 54rpx;
height: 56rpx;
position: absolute;
top:82rpx;
right:40rpx;
}
.seller-last .empty .icon{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E7%BC%A9%E6%94%BE.png");
background-size: 100% 100%;
width: 98rpx;
height: 76rpx;
position: absolute;
.me{
width: 84rpx;
height: 84rpx;
box-shadow: 0px 0px 10rpx 0rpx #E5E5E5;
position: fixed;
left:30rpx;
top:40rpx;
right:68rpx;
}
.picker{
height: 50rpx;
line-height: 50rpx;
padding-left: 8rpx;
padding-right: 10rpx;
}
.picker .input{
height: 50rpx;
line-height: 50rpx;
margin-right: 10rpx;
}
.picker .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB.png");
width: 12rpx;
height: 16rpx;
min-width:12rpx;
}
.disabled .tags{
color: #999;
}
.enabled .tags{
color: #353535;
}
.disabled .fingSeller{
color: #999;
}
.disabled .fingSeller .icon{
position: relative;
background: none;
}
.disabled .fingSeller .icon:after{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('http://nosqn.colorcun.com/reserve/images/find-black.png');
background-size: 100% 100%;
opacity: 0.5;
}
.enabled .fingSeller,.fingSeller{
height: 70rpx;
line-height: 70rpx;
width: 172rpx;
box-shadow:-12rpx 0 10rpx -8rpx rgba(178,177,177,0.5);
box-sizing: border-box;
padding-left: 28rpx;
font-weight:600;
color:rgba(240,85,34,1);
}
.enabled .fingSeller .icon,.fingSeller .icon{
.me .icon{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%284%29.png");
width: 32rpx;
height: 30rpx;
margin-right: 6rpx;
background-image: url("http://nosqn.colorcun.com/reserve/images/find.png");
background-size: 100% 100%;
}
.enabled .fingSeller .icon:after{
opacity: 0;
background:none;
height: 32rpx;
}
.tags.active .picker .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB%E9%80%89%E4%B8%AD.png");
}
.disabled .picker .more{
background-image: url("http://nosqn.colorcun.com/custom/lite-yd/image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190925174046.png");
}
.enabled .picker .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB%E9%80%89%E4%B8%AD.png");
}
.searchAddr {
margin-left: 15rpx;
width: 400rpx;
height: 64rpx;
background-color: #fefefe;
line-height: 64rpx;
font-weight:400;
color:rgba(153,153,153,1);
font-size: 28rpx;
border-radius:32rpx;
border:2rpx solid rgba(204,204,204,1);
width: 100%;
box-sizing: border-box;
}
.searchAddr .icon{
min-width: 22rpx;
width: 22rpx;
height: 22rpx;
margin: 0 10rpx 0 40rpx;
}
.searchAddr .title{
line-height: 60rpx;
height: 60rpx;
overflow: hidden;
width: 100%;
text-align: left;
}
.searchList{
margin-left: 30rpx;
width:72rpx;
min-width: 72rpx;
align-items: center;
}
.searchList .icon{
width:40rpx;
height:36rpx;
margin-bottom: 4rpx;
}
.searchList .title{
height:26rpx;
font-size:18rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(192,163,105,1);
line-height:26rpx;
}
.empty-txt{
height: 300rpx;
line-height: 300rpx;
font-size: 34rpx;
}
.empty-txt .seller{
}
.empty-txt .seller .empty{
background-image: url("http://nosqn.colorcun.com/reserve/images/empty-seller.png");
background-size: 100% 100%;
border-left-width: 0;
margin: 0 auto;
width: 90%;
}
.empty-txt .seller .empty .info{
margin-top: 52rpx;
margin-left: 30rpx;
}
.empty-txt .seller .empty .info .info-msg{
margin-bottom: 14rpx;
font-size: 34rpx;
margin-top: 78rpx;
height: 48rpx;
line-height: 48rpx;
}
.empty-txt .seller .empty .info .info-txt{
font-size: 24rpx;
}
.info-button{
border: 2rpx solid #F05522;
border-radius: 28rpx;
height: 56rpx;
line-height: 56rpx;
padding: 0 20rpx;
color: #F05522;
font-size: 28rpx;
min-width: 146rpx;
max-width: 170rpx;
box-sizing: border-box;
}
.info-button-gt{
background-image: url("http://nosqn.colorcun.com/reserve/images/gt-cheng.png");
background-size: 100% 100%;
width: 10rpx;
height: 20rpx;
}
.info-button.full{
background-color: #F05522;
color:#fefefe;
}
.info-button.full .info-button-gt{
background-image: url("http://nosqn.colorcun.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190925175650.png");
}
.transverse-search .tags{
height: 50rpx;
line-height: 50rpx;
background-color: #F0F0F9;
border-radius: 4rpx;
margin-right: 30rpx;
padding: 0 16rpx;
}
.transverse-search .tags:last-child{
margin-right: 0;
}
.transverse-search .tags.active{
background:linear-gradient(to bottom ,#F4DAB9,#E9BE94);
color:#8B5318;
font-weight: 900;
.me .text{
font-size: 20rpx;
font-weight: 400;
color: #5EB2FF;
line-height: 28rpx;
white-space:nowrap;
}
/* seller-view start*/
.seller-view{
position:fixed;
bottom: calc(0rpx + var(--barHeight));
.content{
width: 100%;
background-color: #fefefe;
border-radius: 20rpx 20rpx 0 0;
box-shadow: -4rpx 0 4rpx 2rpx #C5C1C1;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 20rpx 0rpx #E5E5E5;
border-radius: 40rpx 40rpx 0rpx 0rpx;
overflow: hidden;
padding: 30rpx 0 20rpx;
height: 506rpx;
box-sizing: border-box;
}
.seller-view.disabled{
height: 410rpx;
.empty-box{
height: 416rpx;
background: #FFFFFF;
box-shadow: 0px 0px 30rpx 0px #E5E5E5;
border-radius: 20rpx;
}
.transverse-view-top{
height: 58rpx;
overflow: hidden;
background-color:#FFFFFF;
border-radius: 20rpx 20rpx 0 0;
position: fixed;
width: 100%;
}
.transverse-view-top .line{
height: 6rpx;
width: 70rpx;
margin-top: 14rpx;
background-color: #E0E0E0;
}
.transverse-view-top .text{
height: 34rpx;
line-height: 34rpx;
font-size: 24rpx;
color: #999999;
margin-top: 6rpx;
}
.transverse-search{
background-color: #fefefe;
/*height: 90rpx;*/
height: 450rpx;
font-size: 24rpx;
padding-left: 16rpx;
line-height: 90rpx;
width: calc(100% - 16rpx);
overflow-x: auto;
white-space:nowrap;
}
.transverse-search view{
display: inline-block;
}
.disabled .transverse-search{
padding-top: 0;
}
.toast{
background-color: #000;
width: 534rpx;
position: fixed;
bottom:calc(520rpx + var(--barHeight));
color: #fefefe;
height:60rpx;
font-size:26rpx;
line-height:60rpx;
left: calc(50% - 267rpx);
text-align: center;
border-radius:30rpx;
opacity:0.64;
}
.disabled .toast{
background-color: #000;
width: calc(100% - 72rpx);
position: fixed;
bottom:calc(430rpx + var(--barHeight));
color: #fefefe;
height:60rpx;
font-size:26rpx;
line-height:60rpx;
left: 36rpx;
text-align: center;
border-radius:30rpx;
opacity:0.64;
}
.transverse-view-search{
width:100%;
height:66rpx;
padding: 0 20rpx;
background:rgba(254,254,254,1);
box-sizing: border-box;
}
.movable-view{
width: 100%;
padding-top: 20rpx;
height: 426rpx;
}
.searchAddr .clean{
.empty-box-move{
position: relative;
width: 100rpx;
height: 60rpx;
min-width: 100rpx;
}
.searchAddr .clean:after{
background-image: url("http://nosqn.colorcun.com/clean.png");
background-size: 100% 100%;
display: block;
content: "";
width:28rpx;
height:28rpx;
.empty-box-move .tips{
position: absolute;
top:16rpx;
left:32rpx;
width:100%;
height: 64rpx;
background: #FDF9F5;
border-radius: 20rpx 20rpx 0px 0px;
top:0;
left:0;
}
.empty-box-move .tips .icon{
background-image: url("http://nosqn.colorcun.com/2.0/home%20%289%29.png");
width:42rpx;
height:36rpx;
margin-left: 44rpx;
margin-right: 20rpx;
}
\ No newline at end of file
... ...
... ... @@ -17,13 +17,14 @@ Page({
{id:2,name:'菜品有特色'},
{id:3,name:'超大包间'},
],
markers:[],
sellers:[],
hasMore:true,
hasDisabled:true,
hasSuggestion:false,
placeholder:'您好，几位，什么时候',
search_placeholder:"搜索餐厅/位置，快速订包间",
hasLoading:true,
height:1000,
},
/**
... ... @@ -41,6 +42,14 @@ Page({
* &keyword=
* &filterParams={"consumeStr":"¥200-300","min":"200","max":"300","active":"200,300"}
*/
wx.getSystemInfo({
success:res=>{
console.log('wx.getSystemInfo',res)
this.setData({
height:res.windowHeight-80
})
},
})
this.filterParams=null
if(options.filterParams){
this.filterParams=JSON.parse(options.filterParams)
... ... @@ -170,6 +179,9 @@ Page({
hasGetSellerEnd:false,
hasCleanSuggestion:false,
async getList(){
this.setData({
hasLoading:true,
})
let mapParam=this.options
this.offset=1 //page
this.size=20 //page size
... ... @@ -228,51 +240,28 @@ Page({
}
}
if(this.data.multiIndex[0]>0){
this.param.cuisine=await DA.getCatesID(this.data.multiIndex[0]-1);
this.hasFilterData=false
if(this.filterGroupData.tags){
this.param.tags = this.filterGroupData.tags;
this.hasFilterData=true
}
let tags=[];
this.data.tags.forEach(t=>{
if(t.active){
tags.push(t.id)
}
})
if(tags.length>0){
this.param.tags=tags;
if (this.filterGroupData.cuisine) {
this.param.cuisine = this.filterGroupData.cuisine;
this.hasFilterData=true
}
let placeholder='您好，几位，什么时候';
if(this.findSellerData){
console.log(this.findSellerData)
this.param=Object.assign(this.param,this.findSellerData.paramObj)
//4位 今天 午餐
let sp=this.findSellerData.params
if(sp.pnum.val>30){
placeholder = '30 位以上 '
}else{
placeholder = sp.pnum.val+' 位 '
}
placeholder += util.unixtoTime(sp.date.val,' `DAY/MM-DD` ')
if(sp.dur){
placeholder+=' '+['','早餐','午餐','晚餐','夜宵'][sp.dur.val]
}
}
this.setData({
placeholder:placeholder,
})
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)
}
this.param.average=filterParams
if(this.filterGroupData.average){
this.param.average = this.filterGroupData.average;
this.hasFilterData=true
}
App.Customer.SellerLists(this.param).then(res=>{
this.setData({
rsl:[],
hasMore:res.data.length==this.size,
markers:this.sellerFormat(res.data),
sellers:this.sellerFormat(res.data),
hasLoading:false,
hasDisabled:this.getHasDisabled(res.data.length>0,this.data.multiIndex[0]>0 || tags.length>0 || this.findSellerData)
//hasDisabled:this.getHasDisabled(res.data.length>0,this.data.multiIndex[0]>0 || tags.length>0 || this.findSellerData)
hasFilterData:this.hasFilterData,
})
this.hasGetSellerEnd=true
this.triggerEvent('event',{type:'getListEnd',total:res.data.length})
... ... @@ -293,11 +282,11 @@ Page({
},
getListMore(){
this.param.offset+=1;
let markers=this.data.markers;
let sellers=this.data.sellers;
App.Customer.SellerLists(this.param).then(res=>{
this.setData({
hasMore:res.data.length==this.size,
markers:markers.concat(this.sellerFormat(res.data)),
sellers:sellers.concat(this.sellerFormat(res.data)),
})
})
},
... ... @@ -400,9 +389,9 @@ Page({
this.onpos(e)
},500)
}
if(this.data.markers.length<1){
this.GetRecommendSellerList()
}
// if(this.data.sellers.length<1){
// this.GetRecommendSellerList()
// }
},
GetRecommendSellerList(){
let param={sid:'sid'}
... ... @@ -503,4 +492,25 @@ Page({
)
}
},
debounceTimer:null,
debounce(func,wait){
if(this.debounceTimer){
clearTimeout(this.debounceTimer)
}
this.debounceTimer=setTimeout(()=>{
this.debounceTimer=null;
func()
},wait);
},
filterGroupData:{},
filterGroupEvent(e){
console.log('filterGroupEvent',e.detail)
this.filterGroupData=e.detail
this.debounce(this.getList,500)
},
sellerCardEvent(e){
if(e.detail.type=='phone'){
this.selectComponent('#as').show(e.detail.seller);
}
},
})
\ No newline at end of file
... ...
... ... @@ -5,12 +5,17 @@
"usingComponents": {
"formids":"/components/formids/formids",
"nav":"/components/nav/nav",
"getpos":"/components/userinfo/getpos",
"sb-tr":"/components/reserve/seller-box-transverse/seller-box",
"caixi":"/components/reserve/caixi",
"search-how":"/components/reserve/search/how/index",
"as-phone":"/components/actionSheet/phone",
"hr":"/components/hr",
"filter":"/components/reserve/search/filter"
"filter":"/components/reserve/search/filter",
"getpos":"/components/2.0/userinfo/getpos",
"a2l":"/components/tips/add-to-lite",
"filter-group":"/components/2.0/filter/filter-group",
"seller-card":"/components/2.0/seller/card",
"chatbot":"/components/userinfo/chatbot",
"as-phone":"/components/2.0/dialog/phone"
}
}
\ No newline at end of file
... ...
<!--pages/reserve/indexList.wxml-->
<nav>周到安排</nav>
<view class="header">
<!--
<view class="searchAddrView" bindtap="dispalySearchHow">
<view class="searchAddr flex-ll">
<image class="icon" src="http://nosqn.colorcun.com/reserve/images/find-black.png"></image>
<input style="width: 100%;" placeholder="{{placeholder}}"
type="text" disabled
value="{{keyword}}"/>
</view>
</view>
-->
<view class="searchAddrView searchKeyword" bindtap="gotoSearch">
<view class="view content" style="height: calc(100vh - 65px);">
<view class="searchAddrView searchKeyword bg-white" bindtap="gotoSearch">
<view class="searchAddr flex-ll">
<image class="icon" src="http://nosqn.colorcun.com/custom/lite-online/image/search26.png"></image>
<input style="width: 100%;" placeholder="{{search_placeholder}}"
... ... @@ -20,105 +10,40 @@
<view class="clean" catchtap="moveToLocation" wx:if="{{keyword && hasSuggestion}}"></view>
</view>
</view>
<view class="transverse-search {{hasDisabled?'disabled':''}}">
<view
bindtap="caixiShow"
class="tags {{multiIndex[0]>0?'active':''}}"
>
<view class="picker flex-lr">
<view class="input">
<block wx:if="{{multiIndex[0]==0}}">菜系</block>
<block wx:else="">{{multiArray[0][multiIndex[0]]}}</block>
</view>
<view class="more"></view>
</view>
<filter-group height="{{height}}"
id="filter-group"
bindevent="filterGroupEvent"
disabled="{{(sellers.length<1 && !hasFilterData) || hasLoading}}"></filter-group>
<block wx:if="{{hasLoading}}">
<view class="view flex flex-direction justify-center align-center" wx:if="{{hasLoading}}">
<image class="view" src="http://nosqn.colorcun.com/2.0/timg.gif" style="width: 40rpx;height: 40rpx;margin-top: 260rpx;"></image>
<view class="view bg-white text-sm margin-top">包间查找中，请稍后…</view>
</view>
<block wx:for="{{tags}}" wx:key="tags.key">
<view class="tags {{item.active?'active':''}}"
bindtap="tagsChange"
data-id="{{item.id}}">{{item.name}}</view>
</block>
<view
bindtap="filterShow"
class="tags {{filterParams.consumeStr?'active':''}}"
>
<view class="picker flex-lr">
<view class="input">
{{filterParams.consumeStr?filterParams.consumeStr:'筛选'}}
</view>
<view class="more"></view>
</view>
</block>
<block wx:elif="{{sellers.length<1}}">
<view class="view flex flex-direction justify-center align-center empty-box margin-sm">
<image class="margin-top"
src="http://nosqn.colorcun.com/2.0/home%20%2818%29.png" style="width: 520rpx; height: 384rpx;"></image>
<view class="view margin-top-lg text-df">抱歉，没有找到符合的内容</view>
<view class="view margin-top-xs text-df">试试搜搜别的</view>
</view>
</view>
</view>
<view class="pages" wx:if="{{hasLoading}}">
<view class="flex-vc empty">
<view class="timg"></view>
<view class="timg-txt">更多餐厅加载中…</view>
</view>
</view>
<view class="pages" wx:else="">
<view class="flex-vc empty" wx:if="{{markers.length<1}}">
<block wx:if="{{!hasFirstShow}}">
<image src="http://nosqn.colorcun.com/custom/lite-online/image/follow-empty.png"></image>
<block wx:if="{{hasDisabled}}">
<view>该地区没有可供预订的餐厅，努力开通中</view>
</block>
<block wx:else="">
<view class="empry-info1">未找到符合要求的餐厅</view>
<view class="empry-info2">修改或减少条件，获取更多餐厅</view>
</block>
<button class="button-none info-button"
open-type="contact">
人工帮订
</button>
</block>
</view>
</block>
<block wx:else="">
<view class="follow" >
<view class="seller" wx:for="{{markers}}" wx:key="sellers.key"
bindtap="gotoDetail" data-sid="{{item.id}}">
<sb-tr seller="{{item}}"
hasActivityTags="{{false}}"
hasActivityShort="{{true}}"
hasBrand="true" hasActivityRed="true"
hasSlogan="{{false}}" hasShafa
hasSuggestion="{{hasSuggestion}}"
sellerStyle="noborder noshadow noradius"></sb-tr>
</view>
</view>
<hr class="flex-vc nomore" wx:if="{{!hasMore}}" bgColor="#ffffff">我是有底线的</hr>
<scroll-view class="view scroll-view" scroll-y="true"
scroll-into-view="seller-{{scrollSellerID}}"
scroll-with-animation
bindscrolltolower="getListMore"
style="width:100%;height: calc(100vh - 150px);">
<block wx:for="{{sellers}}" wx:key="sellers" >
<navigator url="/pages/reserve/detail?id={{item.id}}" hover-class="navigator-hover">
<seller-card class="seller-card" id="seller-{{item.id}}"
activeSellerID="{{activeSellerID}}"
seller="{{item}}" bindevent="sellerCardEvent" ></seller-card>
</navigator>
</block>
<view class="view" style="height: 50rpx;"></view>
</scroll-view>
</block>
</view>
<caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"
bindactive="caixiActive" id="caixi"
></caixi>
<search-how id="search-how" findSellerData="{{findSellerData}}" bindevent="howEvent"></search-how>
<block wx:if="{{rsl.length>0}}">
<view class="transverse-flxed">
<view class="line-push">为你推荐</view>
<view class="transverse-list">
<swiper
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{10}}px" next-margin="{{10}}px" style="height: 330rpx;"
current="{{current}}" bindchange="bindtransition" bindanimationfinish="bindtransition">
<block wx:for="{{rsl}}" wx:key="rsl.key">
<swiper-item bindtap="gotoDetail" data-sid="{{item.id}}">
<view class="seller" id="seller-{{item.id}}">
<sb-tr seller="{{item}}"
hasInSwiper bindevent="sbtrEvent"
hasActivityTags="{{false}}"
hasActivityShort="{{true}}"
hasBrand="true" hasActivityTese="true"
hasSlogan="{{false}}"></sb-tr>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</block>
<getpos bindpos="onpos" id="getpos" hasAllowLoading="{{false}}"></getpos>
<as-phone id="as"></as-phone>
<filter id="filter" bindevent="filterEvent"></filter>
\ No newline at end of file
<as-phone id="as"></as-phone>
\ No newline at end of file
... ...
/* pages/reserve/indexList.wxss */
@import "/colorui/main.wxss";
.content{
overflow: hidden;
}
.searchAddrView{
position: relative;
z-index: 99998;
}
.header{
height: 81rpx;
position: fixed;
... ... @@ -111,7 +119,6 @@
width: 100%;
height: 70rpx;
background-color: #ffffff;
z-index: 9;
}
.searchAddr {
width: 90%;
... ... @@ -181,7 +188,7 @@
.searchKeyword{
height: 64rpx;
line-height: 64rpx;
margin-bottom: 15rpx;
margin-bottom: 0rpx;
}
.searchKeyword .searchAddr{
height:64rpx;
... ...
... ... @@ -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
... ...
... ... @@ -73,28 +73,16 @@
}
},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"gamePlugin": {
"current": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": [
{
"id": 0,
... ... @@ -478,10 +466,9 @@
"scene": null
},
{
"id": 52,
"name": "pages/reserve/indexList",
"pathName": "pages/reserve/indexList",
"query": "lat=34.216529&lng=108.891677&map={\"errMsg\":\"getMapRegion:ok\",\"southwest\":{\"longitude\":108.85949049182128,\"latitude\":34.18927020234597},\"northeast\":{\"longitude\":108.9238635081787,\"latitude\":34.24377898163213},\"scale\":14}&multiIndex=0&tags=1,2",
"query": "lat=39.65157&lng=118.15044&keyword=西安&multiIndex=0",
"scene": null
},
{
... ... @@ -520,10 +507,9 @@
"scene": null
},
{
"id": -1,
"name": "pages/me/list 我的订单",
"pathName": "pages/me/list",
"query": "id=1017&act=quanzi",
"query": "type=2",
"scene": null
},
{
... ...