Skip to content

D
doublescreen-back
Commit ed85a4b2 authored by pengguangpu's avatar pengguangpu
Browse files
Options

landscan、payresult页面整合；

parent 7d76a24a
Hide whitespace changes
Inline Side-by-side
Showing with 845 additions and 7 deletions
app.json
View file @ ed85a4b2
{ {
"pages": [ "pages": [
"pages/index/index",
"pages/landscan/landscan", "pages/landscan/landscan",
"pages/payresult/payresult", "pages/payresult/payresult"
"pages/index/index"
], ],
"window": { "window": {
"defaultTitle": "My App", "defaultTitle": "My App",
......
pages/index/index.acss
View file @ ed85a4b2
/**
支付结果页样式css
*/
.topView {
position: relative;
width: 768rpx;
height: 60rpx;
background: #ffffff;
/* border: 2px solid red; */
}
.backButton {
color: #333333;
font-size: 19rpx;
line-height: 60rpx;
height: 60rpx;
width: 110rpx;
text-align: center;
/* border: 2px solid red; */
position: relative;
}
.bottomView {
position: relative;
width: 100%;
height: 372rpx;
/* border: 2px solid red; */
}
.leftView {
display: flex;
position: absolute;
left: 0rpx;
top: 0rpx;
width: 406rpx;
flex-direction: column;
align-items: center;
height: 372rpx;
/* border: 2px solid red; */
}
.rightView {
display: flex;
right: 0rpx;
top: 0rpx;
position: absolute;
flex-direction: column;
align-items: center;
width: 362rpx;
background: #ffffff;
height: 372rpx;
/* border: 2px solid red; */
}
/**
商品扫码页样式css
*/
/* 整个页面 */
.pageland {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
}
/* 带有高斯模糊的效果 */
.pfilter {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
filter: blur(3px);
}
/* 扫商品页面上方 */
.land-scan-top {
display: flex;
flex-direction: row;
width: 100%;
height: 60rpx;
justify-content: space-between;
align-items: center;
background-color: white;
box-shadow: 0px 4px 12px 0px rgba(153, 153, 153, 0.16);
}
/* 会员登陆 */
.land-scan-top-member-login {
width: 120rpx;
height: 38rpx;
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 19rpx;
font-size: 19rpx
}
/* 顶部收银字体样式 */
.cashier-text {
font-size: 21rpx;
color: #333333;
font-weight: 600;
}
/* 顶部收银字体样式 */
.go-home-icon {
width: 19rpx;
height: 19rpx;
margin-top: 6rpx;
}
/* 顶部收银字体样式 */
.go-home-text {
font-size: 19rpx;
color: #333333;
margin-right: 21rpx;
margin-left: 8rpx
}
/* 下部分 */
.land-scan-boottom {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
}
/* 购物车 */
.shopcart-list {
height: 100%;
width: 66%;
margin-left: 2%;
}
/* 顶部空白 */
.shopcart-cart-top-blank {
height: 7rpx;
width: 100%
}
/* 商品列表项背景 */
.scan-list-bg {
width: 95%;
height: 95rpx;
border-radius: 16px;
background-color: white;
margin-bottom: 24rpx;
box-shadow: 0px 2px 10px 0px rgba(77, 81, 102, 0.1);
display: flex;
flex-direction: column;
}
/* 右操作区 */
.more-operating {
height: 100%;
width: 32%;
background: white;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 空购物车 */
.shopcart-list-empty {
height: 100%;
width: 68%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 提示文字 */
.empty-remind-text {
font-size: 26rpx;
color: #8C8C8C
}
/* 提示图片 */
.empty-remind-icon {
height: 247rpx;
width: 430rpx;
}
/* 下方 */
.operating-top {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* 手输条码，使用券，清空购物车 */
.operat-icon {
width: 120rpx;
height: 102rpx;
}
/* 下方 */
.operating-bottom {
display: flex;
flex-direction: column;
}
/* 数量 */
.total-num {
font-size: 18rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
line-height: 18rpx;
}
/* 付款金额 */
.pay-price {
font-size: 36rpx;
font-family: AlibabaPuHuiTiB;
color: rgba(0, 122, 255, 1);
line-height: 49px;
}
/* 去付款 */
.go-pay {
width: 100%;
height: 60rpx;
}
/* 商品条目上半部分 */
.good-top {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: space-between
}
/* 商品条目下班部分 */
.good-bottom {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
/* 商品名称 */
.good-name {
width: 100%;
height: 90%;
font-size: 19rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 22px;
text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
margin-left: 18rpx;
margin-top: 15rpx;
}
/* 删除商品的按钮 */
.good-del {
width: 30rpx;
height: 30rpx;
}
/* 商品价格 */
.good-price {
font-size: 26px;
font-family: Helvetica;
color: rgba(249, 97, 70, 1);
line-height: 26px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
margin-left: 18rpx;
}
/* 加减商品 */
.good-operat {
height: 100%;
width: 120rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-right: 18rpx
}
/* 减商品 */
.good-decrease {
width: 28rpx;
height: 28rpx;
}
/* 商品数量 */
.good-num {
font-size: 22rpx;
font-family: Helvetica;
color: rgba(51, 51, 51, 1);
line-height: 22rpx
}
/* 加商品 */
.good-increase {
width: 28rpx;
height: 28rpx;
}
/* 用券page */
.page-coupon {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
background: white
}
/* 券顶部 */
.coupon-top {
width: 100%;
height: 60rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 7px 0px rgba(153, 153, 153, 0.16)
}
/* 券底部 */
.coupon-bottom {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around
}
/* 返回 */
.coupon-back-container {
width: 95rpx;
height: 100%;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row
}
/* 返回icon */
.coupon-back-icon{
width: 9rpx;
height: 18rpx;
}
/* 返回text */
.coupon-back-text {
font-size: 19rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 22rpx;
margin-left: 5rpx
}
/* 标题 */
.coupon-title {
font-size: 22rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 22rpx;
}
/* 扫券码提示 */
.scan-coupon-text {
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 0.85);
line-height: 26rpx;
}
/* 取消用券 */
.cancel-use-coupon {
border-radius: 5px;
width: 252rpx;
height: 60rpx;
}
/* 扫券引导图 */
.scan-coupon-guide{
width: 180rpx;
height: 155rpx;
}
\ No newline at end of file
pages/index/index.axml
View file @ ed85a4b2
<view>
<!--扫码页-->
<view hidden="{{!pageShow['landscan']}}">
<view class="{{scene != 0 ? 'pfilter' : 'pageland' }}">
<view class="land-scan-top">
<button class="land-scan-top-member-login" size="default" type="ghost">会员登陆</button>
<text class="cashier-text">收银</text>
<view>
<image class="go-home-icon" mode="aspectFit" src="/images/icon_home.png"/>
<text class="go-home-text">首页</text>
</view>
</view>
<view class="land-scan-boottom">
<!-- 空购物车 -->
<view class="shopcart-list-empty" hidden="{{goods.length > 0}}">
<view class="empty-remind-text">请扫描商品条码添加商品</view>
<image class="empty-remind-icon" mode="aspectFit" src="/images/scan_good_guide.png"/>
</view>
<!-- 购物车有数据 -->
<scroll-view class="shopcart-list" scroll-y="{{true}}" a:if="{{goods.length > 0}}">
<view class="shopcart-cart-top-blank">
</view>
<block a:for="{{goods}}">
<view class="scan-list-bg">
<view class="good-top">
<view class="good-name">
{{item.name}}
</view>
<image id="{{item.barcode}}" class="good-del" mode="aspectFit" src="/images/harf_delete.png" catchTap="deleteGood" />
</view>
<view class="good-bottom">
<view class="good-price">¥{{item.price}}</view>
<view class="good-operat">
<image id="{{item.barcode}}" class="good-decrease" mode="scaleToFill" src="/images/good_decrease.png" catchTap="decreaseGood"/>
<text class="good-num">{{item.quantity}}</text>
<image id="{{item.barcode}}" class="good-increase" mode="scaleToFill" src="/images/good_increase.png" catchTap="increaseGood"/>
</view>
</view>
</view>
</block>
</scroll-view>
<view class="more-operating">
<view class="operating-top">
<image class="operat-icon" mode="aspectFit" src="/images/manual_barcode.png" catchTap="manualBarcode"/>
<image class="operat-icon" mode="aspectFit" src="/images/use_coupon.png" catchTap="useCoupon"/>
<image class="operat-icon" mode="aspectFit" src="/images/clear_shop_list.png" catchTap="clearGood"/>
</view>
<view class="operating-bottom">
<text class="total-num">共{{totalQuantity}}件商品，合计金额</text>
<text class="pay-price">¥{{totalPrice}}</text>
<button class="go-pay" size="default" type="primary" onTap="goPay">收款</button>
</view>
</view>
</view>
</view>
<!-- 扫描优惠券 -->
<view class="page-coupon" a:if="{{couponUseing}}">
<view class="coupon-top">
<view class="coupon-back-container" onTap="couponBack">
<image class="coupon-back-icon" mode="aspectFit" src="/images/icon_back.png"/>
<text class="coupon-back-text">返回</text>
</view>
<view class="coupon-title">优惠券</view>
<view></view>
</view>
<view class="coupon-bottom">
<text class="scan-coupon-text">等待顾客扫描优惠券码…</text>
<image class="scan-coupon-guide" mode="aspectFit" src="/images/scan_guide.png"/>
<button class="cancel-use-coupon" size="default" type="ghost" onTap="couponBack">取消</button>
</view>
</view>
<!-- 键盘 -->
<land-keybord scene="{{scene}}" onKeyBordFinished="onKeyBordFinished" onKeyBordClose="onKeyBordClose">
</land-keybord>
</view>
<!--支付结果页-->
<view hidden="{{!pageShow['payresult']}}">
<!--top view-->
<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>
<!--bottom view-->
<view class="bottomView">
<!--left view-->
<view class="leftView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<image mode="aspectFit" style="width:101rpx;height:101rpx;margin-top:43rpx;" src="/images/icon_success.png"/>
<text style="font-size:26rpx;color:#007AFF;font-weight:bold;margin-top:14rpx;">收款成功</text>
<text style="font-size:48rpx;color:#000000;font-weight:bold;margin-top:48rpx;text-align:center;">￥{{payPriceYuan}}</text>
</block>
<block a:else>
<!--错误按钮-->
<image mode="aspectFit" style="width:101rpx;height:101rpx;margin-top:43rpx;" src="/images/icon_failed.png"/>
<text style="font-size:26rpx;color:#FF0000;font-weight:bold;margin-top:14rpx;">收款失败</text>
<text style="font-size:19rpx;color:#000000;margin-top:24rpx;width:292rpx;text-align:center;">失败原因：{{payFailedReason}}</text>
</block>
</view>
<!--right view-->
<view class="rightView">
<block a:if="{{isPaySuccess}}">
<!--支付成功-->
<text style="font-size:26rpx;color:#333333;font-weight:bold;margin-top:35rpx;">{{printResult}}</text>
<view style="position: relative;margin-top:17rpx;width:277rpx;height:196rpx;align-items: center;align-items: center;">
<image mode="aspectFit" style="position:absolute;width:277rpx;height:196rpx;" src="/images/bg_paper.png"/>
<view style="position: absolute;top:88rpx;text-align: center;align-items: center;width:277rpx;">
<block a:if="{{isPrintSuccess}}">
<text>提示顾客带好小票</text>
</block>
<block a:else>
<view hidden="{{isPrinting}}">
<button type="ghost" style="height:40rpx;margin:0 auto;border-radius:20rpx;border-color:#FF7F19;color:#FF7F19;width:166rpx;" hover-class="loginButtonHover" onTap="onReprint">重新打印</button>
</view>
</block>
</view>
</view>
<view hidden="{{isPrinting}}">
<button type="primary" style="height:60rpx;margin-top:8rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;" hover-class="loginButtonHover" onTap="">继续付款</button>
</view>
</block>
<block a:else>
<text style="font-size:26rpx;color:#333333;font-weight:bold;margin-top:35rpx;">请重新支付...</text>
<image mode="aspectFit" style="width:166rpx;height:143rpx;margin-top:39rpx;" src="/images/img_scan_guide.png"/>
<button type="primary" style="height:60rpx;margin-top:32rpx;border-radius:5rpx;background-color:#007AFF;border-color:#007AFF;opacity: 0.7;width:252rpx;" hover-class="loginButtonHover" onTap="">重新付款</button>
</block>
</view>
</view>
</view>
</view>
\ No newline at end of file
pages/index/index.js
View file @ ed85a4b2
var api = require("../../utils/api.js");
import { API_SCAN } from '../../const/apiurl'
import { ACTION_GOODS } from '../../const/actioncmd'
import { ACTION_GO_BALANCE } from '../../const/actioncmd'
import { ACTION_REQUEST_GOOD_INFO } from '../../const/actioncmd'
import { ACTION_PRINT_RESULT } from '../../const/actioncmd'
import { ACTION_REPRINT } from '../../const/actioncmd'
Page({ Page({
data: {
//页面控制相关参数
pageShow: {
"landscan": true,
"payresult": false
},
/**支付结果页相关参数 */
payFailedReason: "xxxxxxxxxxx",
isPaySuccess: true,
payPriceYuan: "--.--",
printResult: "正在打印小票...",
isPrinting: false,
isPrintSuccess: true,
/**商品扫码页相关参数 */
//是否正在用券
couponUseing: false,
//0代表弹窗关闭 1代表手动输入条码弹窗 2代表会员 3.收款 4.退款
scene: 0,
//总数量
totalQuantity: 0,
//折后价格
totalPrice: 0.00,
//折扣
totalDisc: 0.00,
goods: [
]
},
/**跳转页面方法 */
goPage(pageName) {
//遍历pageShow
for (var key in this.data.pageShow) {
if (key == pageName) {
this.data.pageShow[key] = true;
} else {
this.data.pageShow[key] = false;
}
}
},
onLoad(query) { onLoad(query) {
// 页面加载 // 页面加载
console.info(`Page onLoad with query: ${JSON.stringify(query)}`); console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
...@@ -8,9 +58,35 @@ Page({ ...@@ -8,9 +58,35 @@ Page({
}, },
onShow() { onShow() {
// 页面显示 // 页面显示
//开启后屏监听
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() { onHide() {
// 页面隐藏 // 页面隐藏
//关闭后屏监听
my.ix.offBuddyMessage();
}, },
onUnload() { onUnload() {
// 页面被关闭 // 页面被关闭
...@@ -24,6 +100,7 @@ Page({ ...@@ -24,6 +100,7 @@ Page({
onReachBottom() { onReachBottom() {
// 页面被拉到底部 // 页面被拉到底部
}, },
onShareAppMessage() { onShareAppMessage() {
// 返回自定义分享信息 // 返回自定义分享信息
return { return {
...@@ -32,4 +109,197 @@ Page({ ...@@ -32,4 +109,197 @@ Page({
path: 'pages/index/index', path: 'pages/index/index',
}; };
}, },
/**payresult页面逻辑方法 */
onReprint() {
//通知前屏重新打印
my.ix.sendBuddyMessage({
// 填入目标小程序的 AppID
target: "****************",
data: {
action: ACTION_REPRINT,
data: null
},
success: (res) => {
console.info(`sendBuddyMessage success: ${JSON.stringify(res)}`);
},
fail: (res) => {
console.info(`sendBuddyMessage failed: ${JSON.stringify(res)}`);
}
});
},
/**landscan页面逻辑方法 */
//把所有的商品数据发送到后屏
sendGoodInfoToFront() {
let context = this;
var commonRequest = {
action: ACTION_GOODS,
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();
}
})
},
//键盘完成
onKeyBordFinished(barcode) {
this.onKeyBordClose();
my.showLoading({});
var commonRequest = {
action: ACTION_REQUEST_GOOD_INFO,
data: barcode
};
my.ix.sendBuddyMessage({
target: getApp().globalData.frontScreenAppId,
data: commonRequest,
success: (res) => {
console.log("发送商品条码到前屏小程序成功 ===》" + JSON.stringify(res));
},
fail: (res) => {
console.log("发送商品条码到前屏小程序 失败 ===》 " + JSON.stringify(res));
my.hideLoading();
my.showToast({
type: 'fail',
content: '发送商品条码到后屏失败',
duration: 3000,
success: () => {
},
});
}
})
},
// 键盘关闭
onKeyBordClose() {
this.setData({ scene: 0 })
},
// 手动输入码
manualBarcode(e) {
this.setData({ scene: 1 })
},
//清空商品信息
clearGood(e) {
this.setData({ goods: [] })
this.calculation([]);
},
//删除商品
deleteGood(e) {
let barcode = e.target.id;
let lastgoods = this.data.goods;
let newGoods = []
lastgoods.forEach(function (item, index, array) {
if (barcode != item.barcode) {
newGoods.push(item);
}
})
this.setData({ goods: newGoods })
this.calculation(newGoods);
},
//减少商品
decreaseGood(e) {
let barcode = e.target.id;
let lastgoods = this.data.goods;
let newGoods = []
lastgoods.forEach(function (item, index, array) {
if (barcode == item.barcode) {
if (item.quantity != 1) {
let quantitytemp = item.quantity
item.quantity = quantitytemp - 1
newGoods.push(item);
}
} else {
newGoods.push(item);
}
})
this.setData({ goods: newGoods })
this.calculation(newGoods);
},
//增加商品
increaseGood(e) {
console.log(e);
let barcode = e.target.id;
let lastgoods = this.data.goods;
let newGoods = []
lastgoods.forEach(function (item, index, array) {
if (barcode == item.barcode) {
let quantitytemp = item.quantity
item.quantity = quantitytemp + 1
newGoods.push(item);
} else {
newGoods.push(item);
}
})
this.setData({ goods: newGoods })
this.calculation(newGoods);
},
//计算总价格 总数量 总优惠
calculation(goods) {
let quantitytemp = 0;
let pricetemp = 0;
goods.forEach(function (item, index, array) {
quantitytemp = quantitytemp + item.quantity
pricetemp = pricetemp + item.price * item.quantity
})
this.setData({ totalQuantity: quantitytemp, totalPrice: pricetemp })
//数据同步到前屏
this.sendGoodInfoToFront()
},
//跳转到支付结果页面
goPay(e) {
var commonRequest = {
action: ACTION_GO_BALANCE,
data: ""
};
my.ix.sendBuddyMessage({
target: getApp().globalData.frontScreenAppId,
data: commonRequest,
success: (res) => {
console.log("通知前屏跳转到结算页面 成功 ===》" + JSON.stringify(res));
},
fail: (res) => {
console.log("通知前屏跳转到结算页面 失败 ===》 " + JSON.stringify(res));
my.showToast({
type: 'fail',
content: '结算失败',
duration: 3000,
success: () => {
},
});
}
})
},
//用券返回
couponBack(e) {
this.setData({ couponUseing: false })
},
//使用券
useCoupon(e) {
this.setData({ couponUseing: true })
}
}); });
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