Skip to content

D
doublescreen-front
Commit 558e1348 authored by jiangjiantao's avatar jiangjiantao
Browse files
Options

登录布局&空购物车布局

parent efb7e3c9
Hide whitespace changes
Inline Side-by-side
Showing with 368 additions and 99 deletions
custom_widgets/_util/fmtEvent.js 0 → 100644
View file @ 558e1348
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
custom_widgets/icon-input-item/index.acss 0 → 100644
View file @ 558e1348
.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
custom_widgets/icon-input-item/index.axml 0 → 100644
View file @ 558e1348
<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>
custom_widgets/icon-input-item/index.js 0 → 100644
View file @ 558e1348
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
pages/home/home.js
View file @ 558e1348
import { Page } from '../../utils/scan';
import { API_USE_COUPON } from '../../const/apiurl'
var api = require("../../utils/api.js");
......@@ -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) {
this.setData({scanDialogDisplay:2})
......
pages/login/login.acss
View file @ 558e1348
page {
display: flex;
flex-direction: column;
/* background-color: #ff7f30; */
/* 透明背景 */
.page {
width: 100%;
height: 100%;
position: absolute;
}
/* 透明背景 */
.pageBg2 {
width: 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%;
}
/* 透明背景 */
.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 {
margin-top: 113rpx;
margin-left: 38rpx;
width: 600rpx;
display: flex;
flex-direction: column;
width: 100%;
height: 170rpx;
line-height: 90rpx;
font-weight: bold;
color: white;
font-size: 66rpx;
margin-top: 100rpx;
align-content: center;
align-items: center;
font-size: 61rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(255, 255, 255, 1);
/* border: 2px solid red; */
}
.loginContent {
display: flex;
position: fixed;
flex-direction: column;
width: 674rpx;
align-content: center;
width: 100%;
height: 100%;
margin-top: 32rpx;
margin-left: 38rpx;
margin-right: 38rpx;
background: white;
align-content: center;
align-items: center;
/* border: 2px solid red; */
border-radius: 25rpx 25rpx 0 0;
}
.loginFont {
......@@ -42,12 +71,6 @@ page {
font-size: 36rpx;
}
.loginButton {
color: white;
font-size: 36rpx;
margin: 44rpx 56rpx 0 56rpx;
}
.loginButtonHover {
background-color: rgba(0, 0, 0, 0.1);
opacity: 0.7;
......
pages/login/login.axml
View file @ 558e1348
<!-- 解决背景图片被键盘向上顶 -->
<view class="pageTop">
</view>
<view class="pageBg" >
</view>
<view class="pageBg2">
</view>
<view class="page">
<!-- welcome text -->
<view class="welcomeText">
<text>欢迎使用\n米雅POS收银服务</text>
<text>欢迎使用</text>
<text style="margin-top:20rpx;">米雅POS收银服务</text>
</view>
<!-- white background -->
<view class="loginContent">
<view class="loginFont">
<text>账号登录</text>
<view style="width:590rpx;margin-top:48rpx;padding-left:30rpx; padding-right:60rpx;">
<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 style="margin-top:48rpx;padding-left:30rpx; padding-right:60rpx;">
<input-item type="text" placeholder="输入账号" value="{{name}}" onInput="onNameInput" clear="{{true}}" onClear="onNameClear"/>
</view>
<view style="margin-top:16rpx;padding-left:30rpx; padding-right:60rpx;">
<input-item password="{{true}}" placeholder="输入密码" value="{{password}}" onInput="onPasswordInput" clear="{{true}}" onClear="onPasswordClear"/>
<view style="width:590rpx;margin-top:16rpx;padding-left:30rpx; padding-right:60rpx;">
<icon-input-item password="{{true}}" placeholder="输入密码" value="{{password}}" onInput="onPasswordInput" clear="{{true}}" onClear="onPasswordClear">
<image mode="aspectFit" style="width:31rpx;height:32rpx;" src="/images/password.png"/>
</icon-input-item>
</view>
<!-- 错误提示 -->
<view class="errHint" hidden="{{errHidden}}">
<text>{{errHint}}</text>
</view>
<!-- 按钮 -->
<view class="loginButton">
<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>
<image mode="aspectFit" src="/images/btn_login.png" style="width:616rpx;height:181rpx;margin-top:30rpx" onTap="login"/>
</view>
</view>
\ No newline at end of file
</view>
pages/login/login.js
View file @ 558e1348
......@@ -103,6 +103,18 @@ Page({
},
login() {
if (this.data.loginDisabled) {
my.showToast({
type: 'fail',
content: '请输入账号或密码',
duration: 3000,
success: () => {
},
});
return;
}
my.showLoading({});
//本地存储登录信息
my.setStorageSync({
......
pages/login/login.json
View file @ 558e1348
......@@ -2,6 +2,7 @@
"transparentTitle": "always",
"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
pages/scan/scan.acss
View file @ 558e1348
/* 整个页面 */
.pagex {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: space-between;
align-items:center;
align-items: center;
position: absolute;
background: url(/images/scan_header_bg.png) no-repeat fixed top;
background-size:100% 200rpx;
background-size: 100% 200rpx;
}
/* 商品头部 */
.scan-header {
display: flex;
flex-direction: row;
......@@ -20,99 +23,142 @@
font-size: 36rpx;
line-height: 40rpx;
justify-content: space-between;
align-items:center;
align-items: center;
}
/* 中间商品列表整体样式 */
.scan-good-body {
width: 700rpx;
height: 100%;
background: transparent
}
/* 面板下方，总额，总数量，总优惠 */
.scan-bottom {
display: flex;
flex-direction: column;
width: 100%;
height: 175rpx;
justify-content: space-between;
align-items:center;
height: 168rpx;
justify-content: center;
align-items: center;
background-color: white
}
/* 面板下方，总额，总数量，总优惠 其中一排*/
.scan-bottom-item {
display: flex;
flex-direction: row;
width: 100%;
height: 175rpx;
align-items:center;
align-items: center;
}
/* 商品价格 */
.good-list-item-price-font{
.good-list-item-price-font {
color: #F96146;
font-size: 44rpx;
font-family: PingFangSC-Semibold,PingFang SC;
font-weight:600;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
margin-left: 24rpx;
}
/* 商品数量 */
.good-list-item-quantity-font{
.good-list-item-quantity-font {
color: #8C8C8C;
font-size: 32rpx;
font-family: PingFangSC-Semibold,PingFang SC;
font-weight:600;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
margin-right: 24rpx
}
/* 商品名称 */
.good-list-item-name-font{
.good-list-item-name-font {
color: #333333;
font-size: 32rpx;
font-family: PingFangSC-Semibold,PingFang SC;
font-weight:600;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
margin-left: 24rpx;
margin-top: 25rpx;
}
/* 商品列表项价格和数量 */
.scan-good-list-item{
.scan-good-list-item {
display: flex;
flex-direction: row;
width: 100%;
height: 80rpx;
justify-content: space-between;
align-items:center;
align-items: center;
}
/* 商品列表项背景 */
.scan-list-bg{
.scan-list-bg {
height: 158rpx;
border-radius:16px;
border-radius: 16px;
background-color: white;
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;
flex-direction: column;
}
/* 总额 */
.scan-price-total-propmt{
font-size: 32rpx;
color: #8C8C8C;
margin-left:24rpx
.scan-price-total-propmt {
font-size: 31rpx;
color: #8C8C8C;
margin-left: 24rpx
}
/* 总价 */
.scan-price-total{
font-size: 60rpx;
color: #F96146;
margin-left:24rpx
.scan-price-total {
font-size: 60rpx;
color: #F96146;
margin-left: 24rpx
}
/* 总的数量 */
.scan-price-quantity-propmt{
font-size: 32rpx;
color: #8C8C8C;
margin-left:12rpx
.scan-price-quantity-propmt {
font-size: 32rpx;
color: #8C8C8C;
margin-left: 12rpx
}
/* 已优惠总的金额 */
.scan-disc-total{
font-size: 40rpx;
color: #F96146;
margin-left:24rpx
.scan-disc-total {
font-size: 40rpx;
color: #F96146;
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
pages/scan/scan.axml
View file @ 558e1348
......@@ -7,7 +7,7 @@
积分：{{memberPoint}}
</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}}">
<view class="scan-list-bg">
<view class="good-list-item-name-font">
......@@ -22,6 +22,10 @@
</view>
</block>
</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 class="scan-bottom-item">
<view class="scan-price-total-propmt">
......@@ -34,13 +38,13 @@
（共{{totalQuantity}}件）
</view>
</view>
<!-- <view class="scan-bottom-item">
<view class="scan-bottom-item">
<view class="scan-price-total-propmt">
已优惠
</view>
<view class="scan-disc-total">
¥{{totalDisc}}
</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