Skip to content

D
doublescreen-back
Commit e52078b1 authored by gaodapeng's avatar gaodapeng
Browse files
Options

增加了首页和结算页的UI

parent ed85a4b2
Show whitespace changes
Inline Side-by-side
Showing with 594 additions and 6 deletions
app.json
View file @ e52078b1
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/waitoperate/waitoperate",
"pages/landscan/landscan",
"pages/payresult/payresult"
],
"window": {
"defaultTitle": "My App",
......
const/actioncmd.js
View file @ e52078b1
......@@ -12,3 +12,9 @@ export const ACTION_GO_BALANCE = "ACTION_GO_BALANCE";
//请求商品条码
export const ACTION_REQUEST_GOOD_INFO = "ACTION_REQUEST_GOOD_INFO";
//去扫码页面
export const ACTION_GO_SCAN = "ACTION_GO_SCAN";
//获取店铺信息
export const ACTION_STORE_INFO = "ACTION_STORE_INFO";
pages/home/home.acss 0 → 100644
View file @ e52078b1
page {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
background: #F3F7F9;
box-shadow:0rpx 2rpx 7rpx 0rpx rgba(153,153,153,0.16);
}
.topView {
position: relative;
width: 768rpx;
height: 60rpx;
background: #ffffff;
/* border: 2px solid red; */
}
.store{
display: flex;
flex-direction: row;
height: 60rpx;
width: auto;
}
.bodyView {
position: relative;
width: 768rpx;
height: 372rpx;
background: #ffffff;
padding-top: 15rpx;
padding-left: 36rpx;
padding-right: 36rpx;
padding-bottom: 28rpx;
}
.gridItem{
display: flex;
flex-direction: column;
width: 96rpx;
align-items: center;
margin-top: 15rpx;
margin-bottom: 15rpx;
margin-left: 39rpx;
margin-right: 39rpx;
}
.itemImage{
width: 96rpx;
height: 96rpx;
}
.itemText{
font-size:19rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(0,0,0,1);
line-height:27rpx;
margin-top: 12rpx;
}
\ No newline at end of file
pages/home/home.axml 0 → 100644
View file @ e52078b1
<view class="page">
<view class="topView">
<!--back button-->
<!-- <view class="store">
<image mode="aspectFit" style="position:absolute;width:24rpx;height:21rpx;left: 19rpx;top:19rpx;" src="/images/icon_store.png"/>
<text style="position:absolute;font-size:19rpx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(0,0,0,0.85);line-height:22rpx;left:55rpx;top:19rpx;">{{storeName}}</text>
</view> -->
<view style="position:absolute;font-size:22rpx;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(51,51,51,1);line-height:22rpx;top:19rpx;width:100%;text-align:center;">首页</view>
<view style="display:flex;flex-direction:row-reverse;position:absolute;right:19rpx;top:19rpx;">
<view style="font-size:19rpx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(51,51,51,1);line-height:22rpx;">退出</view>
<image mode="aspectFit" src="/images/icon_exit.png" style="position:relative;width:19rpx;height:19rpx;margin-right:8rpx;margin-top:1rpx;"/>
</view>
</view>
<view class="bodyView">
<!-- 还需要加一层swiper -->
<view class="gridItem" onTap="collections">
<image mode="aspectFit" src="/images/collections.png" class="itemImage"/>
<view class="itemText">收银</view>
</view>
</view>
</view>
\ No newline at end of file
pages/home/home.js 0 → 100644
View file @ e52078b1
import { ACTION_GO_SCAN } from '../../const/actioncmd'
Page({
data: {
storeName:"--",
},
onLoad() {
my.ix.onBuddyMessage({
success: (res) => {
console.info(`onBuddyMessage success: ${JSON.stringify(res)}`);
// if (res.action == ACTION_PRINT_RESULT) {
// //获取到打印结果
// var printResult = res.data;
// } else if (res.action == ACTION_GOODS) {
// //商品信息同步
// my.hideLoading();
// let viewGoodsInfo = res.data
// if (viewGoodsInfo.goods != null && viewGoodsInfo.goods.length > 0) {
// context.setData({
// goods: viewGoodsInfo.goods,
// totalPrice: viewGoodsInfo.totalPrice,
// totalQuantity: viewGoodsInfo.totalQuantity,
// totalDisc: viewGoodsInfo.totalDisc,
// })
// }
// } else {
// //未知指令
// }
}
});
},
onHide(){
my.ix.offBuddyMessage();
},
collections(){
//发送跳转到收银页面的命令
var commonRequest = {
action:ACTION_GO_SCAN,
data:this.data
};
my.ix.sendBuddyMessage({
target: getApp().globalData.frontScreenAppId,
data: commonRequest,
success: (res) => {
console.log("发送商品数据到前屏小程序成功 ===》" + JSON.stringify(res));
},
fail: (res) => {
// console.log("发送商品数据到前屏小程序 失败 ===》 " + JSON.stringify(res));
// //发送失败重试
// context.sendGoodInfoToFront();
}
});
},
});
pages/home/home.json 0 → 100644
View file @ e52078b1
{
"transparentTitle": "always",
"usingComponents":{
"grid": "mini-antui/es/grid/index"
}
}
\ No newline at end of file
pages/index/index.acss
View file @ e52078b1
/**
支付结果页样式css
*/
/* 公共样式 */
.topView {
position: relative;
width: 768rpx;
height: 60rpx;
background: #ffffff;
box-shadow:0rpx 2rpx 7rpx 0rpx rgba(153,153,153,0.16);
/* border: 2px solid red; */
}
/* home样式 */
.homePage {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
background: #F3F7F9;
}
.store{
display: flex;
flex-direction: row;
height: 60rpx;
width: auto;
}
.homeBodyView {
position: relative;
width: 768rpx;
height: 372rpx;
background: #ffffff;
padding-top: 15rpx;
padding-left: 36rpx;
padding-right: 36rpx;
padding-bottom: 28rpx;
}
.homeGridItem{
display: flex;
flex-direction: column;
width: 96rpx;
align-items: center;
margin-top: 15rpx;
margin-bottom: 15rpx;
margin-left: 39rpx;
margin-right: 39rpx;
}
.homeItemImage{
width: 96rpx;
height: 96rpx;
}
.homeItemText{
font-size:19rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(0,0,0,1);
line-height:27rpx;
margin-top: 12rpx;
}
/**
支付结果页样式css
*/
.backButton {
color: #333333;
font-size: 19rpx;
......@@ -438,3 +500,124 @@
width: 180rpx;
height: 155rpx;
}
/* 结算页 */
page{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-sizing: border-box;
align-items: center;
}
.topView{
position: relative;
width: 768rpx;
height: 60rpx;
background:rgba(255,255,255,1);
/* border: 2px solid red; */
box-shadow:0rpx 2rpx 7rpx 0rpx rgba(153,153,153,0.16);
}
.backButton {
color: #333333;
font-size: 19rpx;
line-height: 60rpx;
height: 60rpx;
width: 110rpx;
text-align: center;
/* border: 2px solid red; */
position: relative;
}
.bodyContainer {
display: flex;
flex-direction: row;
position:relative;
width: 768rpx;
height: 372rpx;
box-sizing: border-box;
align-items: center;
background: #F3F7F9;
}
.leftBody {
display: flex;
flex-direction: column;
position: relative;
width: 52.8%;
height: 100%;
box-sizing: border-box;
}
.contentLine{
position: relative;
display: flex;
flex-direction: row;
align-items: baseline;
width: 100%;
height:auto;
padding-left: 29rpx;
}
.rightBody{
display: flex;
flex-direction: column;
position: relative;
width: 47.2%;
height: 100%;
align-items: center;
background: #ffffff;
}
.remindText{
font-size:26rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,0.85);
line-height:26rpx;
margin-top:35rpx;
}
.totalPrice{
font-size:22rpx;
font-family:Helvetica;
color:rgba(51,51,51,0.85);
line-height:22rpx;
}
.totalCoupon{
font-size:22rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,0,0,1);
line-height:22rpx;
}
.moneySign{
font-size:38rpx;
font-family:AlibabaPuHuiTiB;
color:rgba(0,122,255,1);
line-height:53rpx;
}
.payPrice{
font-size:36rpx;
font-family:DINAlternate-Bold,DINAlternate;
font-weight:bold;
color:rgba(0,122,255,1);
line-height:26rpx;
letter-spacing:1rpx;
}
.descText{
font-size:19rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(0,0,0,0.65);
line-height:27rpx;
}
pages/index/index.axml
View file @ e52078b1
<view>
<view class="homePage" hidden="{{!pageShow['home']}}">
<view class="topView">
<view class="store">
<image mode="aspectFit" style="position:absolute;width:24rpx;height:21rpx;left: 19rpx;top:19rpx;" src="/images/icon_store.png"/>
<text style="position:absolute;font-size:19rpx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(0,0,0,0.85);line-height:22rpx;left:55rpx;top:19rpx;">{{storeName}}</text>
</view>
<view style="position:absolute;font-size:22rpx;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(51,51,51,1);line-height:22rpx;top:19rpx;width:100%;text-align:center;">首页</view>
<view style="display:flex;flex-direction:row-reverse;position:absolute;right:19rpx;top:19rpx;">
<view style="font-size:19rpx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(51,51,51,1);line-height:22rpx;">退出</view>
<image mode="aspectFit" src="/images/icon_exit.png" style="position:relative;width:19rpx;height:19rpx;margin-right:8rpx;margin-top:1rpx;"/>
</view>
</view>
<view class="homeBodyView">
<!-- 还需要加一层swiper -->
<view class="homeGridItem" onTap="collections">
<image mode="aspectFit" src="/images/collections.png" class="homeItemImage"/>
<view class="homeItemText">收银</view>
</view>
</view>
</view>
<!--扫码页-->
<view hidden="{{!pageShow['landscan']}}">
<view class="{{scene != 0 ? 'pfilter' : 'pageland' }}">
......@@ -73,6 +96,46 @@
<land-keybord scene="{{scene}}" onKeyBordFinished="onKeyBordFinished" onKeyBordClose="onKeyBordClose">
</land-keybord>
</view>
<!-- 结算页 -->
<view class="balance" hidden="{{!pageShow['waitoperate']}}">
<view class="topView">
<!--back button-->
<view class="backButton">
<image mode="aspectFit" style="position:absolute;width:11rpx;height:17rpx;left: 18rpx;top:22rpx;" src="/images/icon_back.png"/>
<text>返回</text>
</view>
</view>
<!-- 界面主体 -->
<view class="bodyContainer">
<view class="leftBody">
<view class="contentLine" style="margin-top:29rpx;">
<view class="descText">合计金额：</view>
<view class="totalPrice">￥{{totalPrice}}</view>
</view>
<view class="contentLine" style="margin-top: 14.5rpx;">
<view class="descText">商家优惠：</view>
<view class="totalCoupon">￥{{totalDisct}}</view>
</view>
<view style="position: absolute;display: flex;flex-direction: row;align-items: baseline;bottom:22rpx;left:0rpx;padding-left: 29rpx;">
<view class="descText">应收款：</view>
<view class="moneySign">￥</view>
<view class="payPrice">{{totalDisct}}</view>
<view class="descText">（共{{quantity}}件）</view>
</view>
</view>
<view class="rightBody">
<view class="remindText">等待顾客付款…</view>
<image mode="aspectFit" style="width:166rpx;height:143rpx;margin-top:39rpx;" src="/images/icon_wait_operate.png"/>
<view style="width:252rpx;height:60rpx;background:rgba(255,255,255,1);border-radius:5rpx;border:2rpx solid rgba(0,122,255,1);position:relative;box-sizing: border-box;margin-top:32rpx;">
<view onTap="cancelCollect" style="width:100%;height:60rpx;margin:0 auto;text-align:center;font-size:24rpx;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(0,122,255,1);line-height:60rpx;">取消收款</view>
</view>
</view>
</view>
</view>
<!--支付结果页-->
<view hidden="{{!pageShow['payresult']}}">
<!--top view-->
......
pages/index/index.js
View file @ e52078b1
......@@ -10,9 +10,12 @@ Page({
data: {
//页面控制相关参数
pageShow: {
"landscan": true,
"home": true,
"landscan": false,
"waitoperate":false,
"payresult": false
},
storeName:"--",
/**支付结果页相关参数 */
payFailedReason: "xxxxxxxxxxx",
isPaySuccess: true,
......@@ -77,7 +80,7 @@ Page({
totalDisc: viewGoodsInfo.totalDisc,
})
}
} else {
} else if(res.action == ACTION){
//未知指令
}
}
......
pages/waitoperate/waitoperate.acss 0 → 100644
View file @ e52078b1
page{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-sizing: border-box;
align-items: center;
}
.topView{
position: relative;
width: 768rpx;
height: 60rpx;
background:rgba(255,255,255,1);
/* border: 2px solid red; */
box-shadow:0rpx 2rpx 7rpx 0rpx rgba(153,153,153,0.16);
}
.backButton {
color: #333333;
font-size: 19rpx;
line-height: 60rpx;
height: 60rpx;
width: 110rpx;
text-align: center;
/* border: 2px solid red; */
position: relative;
}
.bodyContainer {
display: flex;
flex-direction: row;
position:relative;
width: 768rpx;
height: 372rpx;
box-sizing: border-box;
align-items: center;
background: #F3F7F9;
}
.leftBody {
display: flex;
flex-direction: column;
position: relative;
width: 52.8%;
height: 100%;
box-sizing: border-box;
}
.contentLine{
position: relative;
display: flex;
flex-direction: row;
align-items: baseline;
width: 100%;
height:auto;
padding-left: 29rpx;
}
.rightBody{
display: flex;
flex-direction: column;
position: relative;
width: 47.2%;
height: 100%;
align-items: center;
background: #ffffff;
}
.remindText{
font-size:26rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,0.85);
line-height:26rpx;
margin-top:35rpx;
}
.totalPrice{
font-size:22rpx;
font-family:Helvetica;
color:rgba(51,51,51,0.85);
line-height:22rpx;
}
.totalCoupon{
font-size:22rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,0,0,1);
line-height:22rpx;
}
.moneySign{
font-size:38rpx;
font-family:AlibabaPuHuiTiB;
color:rgba(0,122,255,1);
line-height:53rpx;
}
.payPrice{
font-size:36rpx;
font-family:DINAlternate-Bold,DINAlternate;
font-weight:bold;
color:rgba(0,122,255,1);
line-height:26rpx;
letter-spacing:1rpx;
}
.descText{
font-size:19rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(0,0,0,0.65);
line-height:27rpx;
}
pages/waitoperate/waitoperate.axml 0 → 100644
View file @ e52078b1
<view class="page">
<view class="topView">
<!--back button-->
<view class="backButton">
<image mode="aspectFit" style="position:absolute;width:11rpx;height:17rpx;left: 18rpx;top:22rpx;" src="/images/icon_back.png"/>
<text>返回</text>
</view>
</view>
<!-- 界面主体 -->
<view class="bodyContainer">
<view class="leftBody">
<view class="contentLine" style="margin-top:29rpx;">
<view class="descText">合计金额：</view>
<view class="totalPrice">￥{{totalPrice}}</view>
</view>
<view class="contentLine" style="margin-top: 14.5rpx;">
<view class="descText">商家优惠：</view>
<view class="totalCoupon">￥{{totalDisct}}</view>
</view>
<view style="position: absolute;display: flex;flex-direction: row;align-items: baseline;bottom:22rpx;left:0rpx;padding-left: 29rpx;">
<view class="descText">应收款：</view>
<view class="moneySign">￥</view>
<view class="payPrice">{{totalDisct}}</view>
<view class="descText">（共{{quantity}}件）</view>
</view>
</view>
<view class="rightBody">
<view class="remindText">等待顾客付款…</view>
<image mode="aspectFit" style="width:166rpx;height:143rpx;margin-top:39rpx;" src="/images/icon_wait_operate.png"/>
<view style="width:252rpx;height:60rpx;background:rgba(255,255,255,1);border-radius:5rpx;border:2rpx solid rgba(0,122,255,1);position:relative;box-sizing: border-box;margin-top:32rpx;">
<view onTap="cancelCollect" style="width:100%;height:60rpx;margin:0 auto;text-align:center;font-size:24rpx;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(0,122,255,1);line-height:60rpx;">取消收款</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
pages/waitoperate/waitoperate.js 0 → 100644
View file @ e52078b1
Page({
data: {
totalPrice:0.00,
totalDisct:0.00,
payPrice:0.00,
quantity:0,
},
onLoad() {},
cancelCollect(){
//这里增加取消收款的操作
}
});
pages/waitoperate/waitoperate.json 0 → 100644
View file @ e52078b1
{
"transparentTitle": "always"
}
\ 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