Skip to content

D
doublescreen-back
Commit 0984ffa6 authored by jiangjiantao's avatar jiangjiantao
Browse files
Options

后屏扫商品页面布局

parent f57c0b9a
Hide whitespace changes
Inline Side-by-side
Showing with 363 additions and 0 deletions
pages/landscan/landscan.acss 0 → 100644
View file @ 0984ffa6
/* 整个页面 */
.pageland {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
}
/* 扫商品页面上方 */
.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;
}
\ No newline at end of file
pages/landscan/landscan.axml 0 → 100644
View file @ 0984ffa6
<view class="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 class="good-del" mode="aspectFit" src="/images/harf_delete.png"/>
</view>
<view class="good-bottom">
<view class="good-price">¥{{item.price}}</view>
<view class="good-operat">
<image class="good-decrease" mode="scaleToFill" src="/images/good-decrease.png"/>
<text class="good-num">{{item.quantity}}</text>
<image class="good-increase" mode="scaleToFill" src="/images/good-increase.png"/>
</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"/>
<image class="operat-icon" mode="aspectFit" src="/images/use_coupon.png"/>
<image class="operat-icon" mode="aspectFit" src="/images/clear_shop_list.png"/>
</view>
<view class="operating-bottom">
<text class="total-num">共{{totalNum}}件商品，合计金额</text>
<text class="pay-price">¥{{payPrice}}</text>
<button class="go-pay" size="default" type="primary">收款</button>
</view>
</view>
</view>
</view>
\ No newline at end of file
pages/landscan/landscan.js 0 → 100644
View file @ 0984ffa6
Page({
data: {
//总数量
totalNum:0,
//应付款
payPrice:"0.00",
goods:[
{
name:"Beats Studio3 头戴式耳机-魅影灰",
price:298.6,
quantity:20,
},{
name:"Beats Studio3 头戴式耳机-魅影灰",
price:298.6,
quantity:20,
},{
name:"Beats Studio3 头戴式耳机-魅影灰",
price:298.6,
quantity:20,
},{
name:"Beats Studio3 头戴式耳机-魅影灰",
price:298.6,
quantity:20,
},{
name:"Beats Studio3 头戴式耳机-魅影灰",
price:298.6,
quantity:20,
},{
name:"Beats Studio3 头戴式耳机-魅影灰",
price:298.6,
quantity:20,
},{
name:"Beats Studio3 头戴式耳机-魅影灰",
price:298.6,
quantity:20,
}
]
},
onLoad() {},
});
pages/landscan/landscan.json 0 → 100644
View file @ 0984ffa6
{}
\ 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