Commit 558e1348 authored by jiangjiantao's avatar jiangjiantao

登录布局&空购物车布局

parent efb7e3c9
export default function fmtEvent(props, e) {
var dataset = {};
for (var key in props) {
if (/data-/gi.test(key)) {
dataset[key.replace(/data-/gi, '')] = props[key];
}
}
return Object.assign({}, e, {
currentTarget: {
dataset: dataset
},
target: {
dataset: dataset,
targetDataset: dataset
}
});
}
\ No newline at end of file
.am-input-item {
display: flex;
align-items: center;
background: transparent;
padding-left: 15px;
}
.am-input-item .a-input-content {
padding-left: 2px;
}
.am-input-line {
position: relative;
flex: 1;
display: flex;
align-items: center;
padding-right: 15px;
min-height: 47px;
overflow: hidden;
}
.am-input-label {
min-width: 40px;
margin-right: 2px;
color: #333
}
.am-input-content {
flex: 1;
display: flex;
height: 33px;
color: #fff;
text-align: left;
background: transparent;
}
.am-input-content .a-input-wrap {
flex: 1
}
.am-input-clear {
display: flex;
height: 33px;
width: 33px;
justify-content: center;
align-items: center
}
.am-input-clear.show {
visibility: visible
}
.am-input-clear.hidden {
visibility: hidden;
pointer-events: none
}
.am-input-line-bottom::after {
content: '';
position: absolute;
background-color: #eee;
display: block;
top: auto;
right: 0;
bottom: 0;
left: 0;
height: 1px;
transform: scaleY(.5)
}
.am-input-item.last .am-input-line-bottom::after {
display: none
}
\ No newline at end of file
<view
class="am-input-item {{last ? 'last': ''}} {{className}}"
>
<view class="am-input-line">
<view a:if="{{$slots.$default}}" class="am-input-label {{labelCls}}">
<slot />
</view>
<input
enableNative="{{enableNative}}"
sync-input="{{syncInput}}"
class="am-input-content {{inputCls}}"
value="{{value}}"
name="{{name}}"
type="{{type}}"
password="{{password}}"
placeholder="{{placeholder}}"
placeholderClass="{{placeholderClass}}"
placeholderStyle="{{placeholderStyle}}"
disabled="{{disabled}}"
maxlength="{{maxlength}}"
focus="{{focus}}"
onInput="onInput"
onConfirm="onConfirm"
onFocus="onFocus"
onBlur="onBlur"
/>
<view class="am-input-clear {{clear && value.length > 0 && !disabled && _focus ? 'show' : 'hidden'}}" onTap="onClear">
<icon size="18" type="clear" />
</view>
<slot name="extra" />
<view class="am-input-line-bottom" />
</view>
</view>
import fmtEvent from '../_util/fmtEvent';
Component({
props: {
className: '',
labelCls: '',
inputCls: '',
last: false,
value: '',
name: '',
type: 'text',
password: false,
placeholder: '',
placeholderClass: '',
placeholderStyle: '',
disabled: false,
maxlength: 140,
focus: false,
clear: false,
// 是否带清除功能
syncInput: false,
enableNative: false,
// 兼容安卓input的输入bug
onInput: function onInput() {},
onConfirm: function onConfirm() {},
onFocus: function onFocus() {},
onBlur: function onBlur() {},
onClear: function onClear() {}
},
data: {
_focus: false
},
didMount: function didMount() {
this.setData({
_focus: this.props.focus
});
},
methods: {
onBlur: function onBlur(e) {
this.setData({
_focus: false
});
var event = fmtEvent(this.props, e);
this.props.onBlur(event);
},
onConfirm: function onConfirm(e) {
var event = fmtEvent(this.props, e);
this.props.onConfirm(event);
},
onFocus: function onFocus(e) {
this.setData({
_focus: true
});
var event = fmtEvent(this.props, e);
this.props.onFocus(event);
},
onInput: function onInput(e) {
var event = fmtEvent(this.props, e);
this.props.onInput(event);
},
onClear: function onClear(e) {
var event = fmtEvent(this.props, e);
this.props.onClear(event);
}
}
});
\ No newline at end of file
import { Page } from '../../utils/scan';
import { API_USE_COUPON } from '../../const/apiurl' import { API_USE_COUPON } from '../../const/apiurl'
var api = require("../../utils/api.js"); var api = require("../../utils/api.js");
...@@ -71,19 +70,6 @@ Page({ ...@@ -71,19 +70,6 @@ Page({
}, },
//外接扫码枪事件
onKeyPress(r) {
console.log(" onKeyPress==>" + r);
//核销券
if (this.data.scanDialogDisplay == 1) {
this.verifyCoupon(r)
return;
}
my.reLaunch({
url: "/pages/scan/scan?barcode=" + r,
});
},
//核销券 //核销券
verifyCoupon(code) { verifyCoupon(code) {
this.setData({scanDialogDisplay:2}) this.setData({scanDialogDisplay:2})
......
page {
display: flex; /* 透明背景 */
flex-direction: column;
/* background-color: #ff7f30; */ .page {
width: 100%;
height: 100%;
position: absolute;
}
/* 透明背景 */
.pageBg2 {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url(/images/bg_login.png) no-repeat fixed top; position: absolute;
}
/* 带有高斯模糊的效果 */
.pageBg {
width: 100%;
height: 1229rpx;
position: absolute;
filter: blur(5px);
background: url(/images/bg_home.png) no-repeat fixed top;
background-size: 100% 100%; background-size: 100% 100%;
} }
/* 透明背景 */
.pageBg2 {
width: 100%;
height: 100%;
background: black;
position: absolute;
background: rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
align-items: center
}
.welcomeText { .welcomeText {
margin-top: 113rpx; display: flex;
margin-left: 38rpx; flex-direction: column;
width: 600rpx; width: 100%;
height: 170rpx; height: 170rpx;
line-height: 90rpx; margin-top: 100rpx;
font-weight: bold; align-content: center;
color: white; align-items: center;
font-size: 66rpx; font-size: 61rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(255, 255, 255, 1);
/* border: 2px solid red; */ /* border: 2px solid red; */
} }
.loginContent { .loginContent {
display: flex; display: flex;
position: fixed;
flex-direction: column; flex-direction: column;
width: 674rpx; width: 100%;
align-content: center;
height: 100%; height: 100%;
margin-top: 32rpx; align-content: center;
margin-left: 38rpx; align-items: center;
margin-right: 38rpx;
background: white;
/* border: 2px solid red; */ /* border: 2px solid red; */
border-radius: 25rpx 25rpx 0 0;
} }
.loginFont { .loginFont {
...@@ -42,12 +71,6 @@ page { ...@@ -42,12 +71,6 @@ page {
font-size: 36rpx; font-size: 36rpx;
} }
.loginButton {
color: white;
font-size: 36rpx;
margin: 44rpx 56rpx 0 56rpx;
}
.loginButtonHover { .loginButtonHover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
opacity: 0.7; opacity: 0.7;
......
<!-- 解决背景图片被键盘向上顶 -->
<view class="pageTop">
</view>
<view class="pageBg" >
</view>
<view class="pageBg2">
</view>
<view class="page"> <view class="page">
<!-- welcome text --> <!-- welcome text -->
<view class="welcomeText"> <view class="welcomeText">
<text>欢迎使用\n米雅POS收银服务</text> <text>欢迎使用</text>
<text style="margin-top:20rpx;">米雅POS收银服务</text>
</view> </view>
<!-- white background --> <!-- white background -->
<view class="loginContent"> <view class="loginContent">
<view class="loginFont"> <view style="width:590rpx;margin-top:48rpx;padding-left:30rpx; padding-right:60rpx;">
<text>账号登录</text> <icon-input-item type="text" placeholder="输入账号" value="{{name}}" onInput="onNameInput" clear="{{true}}" onClear="onNameClear">
<image mode="aspectFit" style="width:31rpx;height:32rpx;" src="/images/username.png"/>
</icon-input-item>
</view> </view>
<view style="margin-top:48rpx;padding-left:30rpx; padding-right:60rpx;"> <view style="width:590rpx;margin-top:16rpx;padding-left:30rpx; padding-right:60rpx;">
<input-item type="text" placeholder="输入账号" value="{{name}}" onInput="onNameInput" clear="{{true}}" onClear="onNameClear"/> <icon-input-item password="{{true}}" placeholder="输入密码" value="{{password}}" onInput="onPasswordInput" clear="{{true}}" onClear="onPasswordClear">
</view> <image mode="aspectFit" style="width:31rpx;height:32rpx;" src="/images/password.png"/>
<view style="margin-top:16rpx;padding-left:30rpx; padding-right:60rpx;"> </icon-input-item>
<input-item password="{{true}}" placeholder="输入密码" value="{{password}}" onInput="onPasswordInput" clear="{{true}}" onClear="onPasswordClear"/>
</view> </view>
<!-- 错误提示 --> <!-- 错误提示 -->
<view class="errHint" hidden="{{errHidden}}"> <view class="errHint" hidden="{{errHidden}}">
<text>{{errHint}}</text> <text>{{errHint}}</text>
</view> </view>
<!-- 按钮 --> <!-- 按钮 -->
<view class="loginButton"> <image mode="aspectFit" src="/images/btn_login.png" style="width:616rpx;height:181rpx;margin-top:30rpx" onTap="login"/>
<block a:if="{{loginDisabled}}">
<button type="primary" style="border-radius:10rpx;background-color:#ff7f30;border-color:#ff7f30;opacity: 0.7;" hover-class="loginButtonHover" onTap="login" disabled="{{loginDisabled}}">登录</button>
</block>
<block a:else>
<button type="primary" style="border-radius:10rpx;background-color:#ff7f30;border-color:#ff7f30;" hover-class="loginButtonHover" onTap="login" disabled="{{loginDisabled}}">登录</button>
</block>
</view>
</view> </view>
</view> </view>
...@@ -103,6 +103,18 @@ Page({ ...@@ -103,6 +103,18 @@ Page({
}, },
login() { login() {
if (this.data.loginDisabled) {
my.showToast({
type: 'fail',
content: '请输入账号或密码',
duration: 3000,
success: () => {
},
});
return;
}
my.showLoading({}); my.showLoading({});
//本地存储登录信息 //本地存储登录信息
my.setStorageSync({ my.setStorageSync({
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"transparentTitle": "always", "transparentTitle": "always",
"usingComponents": { "usingComponents": {
"input-item": "mini-antui/es/input-item/index" "input-item": "mini-antui/es/input-item/index",
"icon-input-item":"/custom_widgets/icon-input-item/index"
} }
} }
\ No newline at end of file
/* 整个页面 */ /* 整个页面 */
.pagex { .pagex {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
align-items:center; align-items: center;
position: absolute; position: absolute;
background: url(/images/scan_header_bg.png) no-repeat fixed top; background: url(/images/scan_header_bg.png) no-repeat fixed top;
background-size:100% 200rpx; background-size: 100% 200rpx;
} }
/* 商品头部 */ /* 商品头部 */
.scan-header { .scan-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -20,99 +23,142 @@ ...@@ -20,99 +23,142 @@
font-size: 36rpx; font-size: 36rpx;
line-height: 40rpx; line-height: 40rpx;
justify-content: space-between; justify-content: space-between;
align-items:center; align-items: center;
} }
/* 中间商品列表整体样式 */ /* 中间商品列表整体样式 */
.scan-good-body { .scan-good-body {
width: 700rpx; width: 700rpx;
height: 100%; height: 100%;
background: transparent background: transparent
} }
/* 面板下方,总额,总数量,总优惠 */ /* 面板下方,总额,总数量,总优惠 */
.scan-bottom { .scan-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 175rpx; height: 168rpx;
justify-content: space-between; justify-content: center;
align-items:center; align-items: center;
background-color: white background-color: white
} }
/* 面板下方,总额,总数量,总优惠 其中一排*/ /* 面板下方,总额,总数量,总优惠 其中一排*/
.scan-bottom-item { .scan-bottom-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
height: 175rpx; align-items: center;
align-items:center;
} }
/* 商品价格 */ /* 商品价格 */
.good-list-item-price-font{
.good-list-item-price-font {
color: #F96146; color: #F96146;
font-size: 44rpx; font-size: 44rpx;
font-family: PingFangSC-Semibold,PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight:600; font-weight: 600;
margin-left: 24rpx; margin-left: 24rpx;
} }
/* 商品数量 */ /* 商品数量 */
.good-list-item-quantity-font{
.good-list-item-quantity-font {
color: #8C8C8C; color: #8C8C8C;
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Semibold,PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight:600; font-weight: 600;
margin-right: 24rpx margin-right: 24rpx
} }
/* 商品名称 */ /* 商品名称 */
.good-list-item-name-font{
.good-list-item-name-font {
color: #333333; color: #333333;
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Semibold,PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight:600; font-weight: 600;
margin-left: 24rpx; margin-left: 24rpx;
margin-top: 25rpx; margin-top: 25rpx;
} }
/* 商品列表项价格和数量 */ /* 商品列表项价格和数量 */
.scan-good-list-item{
.scan-good-list-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
justify-content: space-between; justify-content: space-between;
align-items:center; align-items: center;
} }
/* 商品列表项背景 */ /* 商品列表项背景 */
.scan-list-bg{
.scan-list-bg {
height: 158rpx; height: 158rpx;
border-radius:16px; border-radius: 16px;
background-color: white; background-color: white;
margin-bottom: 24rpx; margin-bottom: 24rpx;
box-shadow:0px 2px 10px 0px rgba(77,81,102,0.1); box-shadow: 0px 2px 10px 0px rgba(77, 81, 102, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* 总额 */ /* 总额 */
.scan-price-total-propmt{
font-size: 32rpx; .scan-price-total-propmt {
font-size: 31rpx;
color: #8C8C8C; color: #8C8C8C;
margin-left:24rpx margin-left: 24rpx
} }
/* 总价 */ /* 总价 */
.scan-price-total{
.scan-price-total {
font-size: 60rpx; font-size: 60rpx;
color: #F96146; color: #F96146;
margin-left:24rpx margin-left: 24rpx
} }
/* 总的数量 */ /* 总的数量 */
.scan-price-quantity-propmt{
.scan-price-quantity-propmt {
font-size: 32rpx; font-size: 32rpx;
color: #8C8C8C; color: #8C8C8C;
margin-left:12rpx margin-left: 12rpx
} }
/* 已优惠总的金额 */ /* 已优惠总的金额 */
.scan-disc-total{
.scan-disc-total {
font-size: 40rpx; font-size: 40rpx;
color: #F96146; color: #F96146;
margin-left:24rpx margin-left: 24rpx
}
/* 空购物车容器 */
.empty-shopcart-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 42rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.3);
line-height: 42rpx;
}
/* 空购物车图片 */
.empty-shopcart {
width: 468rpx;
height: 369rpx;
margin-top: 95rpx;
} }
\ No newline at end of file
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
积分:{{memberPoint}} 积分:{{memberPoint}}
</view> </view>
</view> </view>
<scroll-view class="scan-good-body" scroll-y > <scroll-view class="scan-good-body" scroll-y a:if="{{goods.length > 0}}" >
<block a:for="{{goods}}"> <block a:for="{{goods}}">
<view class="scan-list-bg"> <view class="scan-list-bg">
<view class="good-list-item-name-font"> <view class="good-list-item-name-font">
...@@ -22,6 +22,10 @@ ...@@ -22,6 +22,10 @@
</view> </view>
</block> </block>
</scroll-view> </scroll-view>
<view class="empty-shopcart-container" a:if="{{goods.length == 0}}">
等待收银员录入商品
<image class="empty-shopcart" mode="aspectFit" src="/images/empty_shopcart.png"/>
</view>
<view slot="footer" class="scan-bottom" > <view slot="footer" class="scan-bottom" >
<view class="scan-bottom-item"> <view class="scan-bottom-item">
<view class="scan-price-total-propmt"> <view class="scan-price-total-propmt">
...@@ -34,13 +38,13 @@ ...@@ -34,13 +38,13 @@
(共{{totalQuantity}}件) (共{{totalQuantity}}件)
</view> </view>
</view> </view>
<!-- <view class="scan-bottom-item"> <view class="scan-bottom-item">
<view class="scan-price-total-propmt"> <view class="scan-price-total-propmt">
已优惠 已优惠
</view> </view>
<view class="scan-disc-total"> <view class="scan-disc-total">
¥{{totalDisc}} ¥{{totalDisc}}
</view> </view>
</view> --> </view>
</view> </view>
</view> </view>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment