Skip to content

7
7-Eleven
Commit 57acef2a by 高淑倩
Options

add: 关联商品弹框_输入框

parent b3526761
Showing with 219 additions and 162 deletions
src/component/selectRelatedGoods/selectRelatedGoods.wxml
<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup" />
<view class="modal-content{{show ? ' active' : ''}}">
<view class="modal-header">
<image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix"></image>
<text class="modal-title">选择优惠券</text>
<image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/close.png" bindtap="hidePopup"></image>
</view>
<view class="modal-info">
<view class="coupon-list" bindtap="selectCoupon">
<image wx:if="{{false}}" class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<image class="coupon-bg" src="/assets/imgs/7_1_0/disabled-coupon.png" mode="widthFix"></image>
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>￥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view class="select-radio">
<view class="{{isSelect ? 'theme-color' : ''}} coupon-radio" >
<image wx:if="{{isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="empty-coupon">
暂无可用优惠券
<view class="modal-header">
<image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix" />
<text class="modal-title">选择订单商品</text>
<image
class="modal-close"
mode="widthFix"
src="/assets/imgs/7_1_0/close.png"
bindtap="hidePopup"
/>
</view>
<view class="modal-info">
<view class="order-input weui-flex weui-progress">
<input class="order-name border_box" placeholder=" 请输入商品名称" auto-focus />
<text class="order-search">搜索</text>
</view>
</view>
<view class="coupon-list" bindtap="selectCoupon">
<image
wx:if="{{false}}"
class="coupon-bg"
src="/assets/imgs/7_1_0/coupon-bg.png"
mode="widthFix"
/>
<image class="coupon-bg" src="/assets/imgs/7_1_0/disabled-coupon.png" mode="widthFix" />
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>￥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view class="select-radio">
<view class="{{isSelect ? 'theme-color' : ''}} coupon-radio">
<image
wx:if="{{isSelect}}"
class="tick-success"
src="/assets/imgs/7_1_0/tick-success.png"
mode="widthFix"
/>
</view>
</view>
</view>
</view>
<view class="empty-coupon">
暂无订单
</view>
</view>
<view class="post-notes fixed-bottom0">确认添加</view>
</view>
src/component/selectRelatedGoods/selectRelatedGoods.wxss
/* component/selectRelatedGoods/selectRelatedGoods.wxss */
@import "/app.wxss";
@import '/app.wxss';
@import './../../base/base.wxss';
.order-input {
height: 112rpx;
line-height: 112rpx;
background-color: rgba(246, 246, 246, 1);
}
.order-name {
width: 550rpx;
height: 60rpx;
border-radius: 5rpx;
margin: 0 20rpx;
background-color: rgba(255, 255, 255, 1);
}
.order-search {
width: 122rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 5rpx;
background-color: rgba(203, 60, 60, 1);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: left;
font-family: PingFangSC-Regular;
text-align: center;
}
.modal-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
opacity: 0;
transition: opacity 200ms;
z-index: 98;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
opacity: 0;
transition: opacity 200ms;
z-index: 98;
}
.post-notes {
text-align: center;
height: 88rpx;
line-height: 88rpx;
background-color: rgba(203, 60, 60, 1);
color: rgba(255, 255, 255, 1);
font-size: 25rpx;
font-family: PingFangSC-Medium;
}
.modal-container.active {
opacity: 1;
transform: translateY(0); }
opacity: 1;
transform: translateY(0);
}
.modal-content.active {
transform: translateY(0); }
transform: translateY(0);
}
.modal-content {
position: fixed;
z-index: 99;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
transition: transform 300ms;
transform: translateY(100%);
height: 1000rpx;
}
position: fixed;
z-index: 99;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
transition: transform 300ms;
transform: translateY(100%);
height: 1000rpx;
}
.modal-content .modal-close {
position: absolute;
right: 24rpx;
top: 35rpx;
width: 25rpx;
}
.modal-to-back{
width: 18rpx;
position: absolute;
left: 24rpx;
top: 35rpx;
transform: rotate(180deg);
}
.modal-title{
color: #333333;
font-size: 32rpx;
position: absolute;
left: 295rpx;
top: 28rpx;
}
.coupon-list{
width: 702rpx;
height: 174rpx;
position: relative;
margin-bottom: 25rpx;
}
.coupon-bg{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.modal-info{
padding: 0 24rpx;
margin-top: 95rpx;
}
.left-price,.right-info{
display: inline-block;
}
.left-price{
font-size: 18rpx;
color:#CB3C3C;
position: absolute;
top: 36rpx;
left: 48rpx;
}
.amount{
font-size: 54rpx;
}
.right-info{
position: absolute;
top: 33rpx;
left: 205rpx;
}
.coupon-title{
font-size: 28rpx;
color: #333333;
}
.coupon-time{
color: #aaaaaa;
font-size: 20rpx;
}
.coupon-desc{
color: #aaaaaa;
font-size: 22rpx;
margin-top: 12rpx;
}
.modal-info{
max-height: 900rpx;
overflow: scroll;
}
.empty-coupon{
width: 100%;
color: #aaaaaa;
margin-top:211rpx ;
text-align: center;
}
.coupon-radio{
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 1rpx solid rgba(0, 0, 0, 0.2);
line-height: 26rpx;
text-align: center;
}
.tick-success{
width: 18rpx;
position: absolute;
right: 24rpx;
top: 35rpx;
width: 25rpx;
}
.select-radio{
position: absolute;
top: 71rpx;
right: 30rpx;
.modal-to-back {
width: 18rpx;
position: absolute;
left: 24rpx;
top: 35rpx;
transform: rotate(180deg);
}
.modal-title {
color: #333333;
font-size: 32rpx;
position: absolute;
left: 295rpx;
top: 28rpx;
}
.coupon-list {
width: 702rpx;
height: 174rpx;
position: relative;
margin-bottom: 25rpx;
}
.coupon-bg {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.modal-info {
padding: 0 24rpx;
margin-top: 95rpx;
}
.left-price,
.right-info {
display: inline-block;
}
.left-price {
font-size: 18rpx;
color: #cb3c3c;
position: absolute;
top: 36rpx;
left: 48rpx;
}
.amount {
font-size: 54rpx;
}
.right-info {
position: absolute;
top: 33rpx;
left: 205rpx;
}
.coupon-title {
font-size: 28rpx;
color: #333333;
}
.coupon-time {
color: #aaaaaa;
font-size: 20rpx;
}
.coupon-desc {
color: #aaaaaa;
font-size: 22rpx;
margin-top: 12rpx;
}
.modal-info {
max-height: 900rpx;
overflow: scroll;
}
.empty-coupon {
width: 100%;
color: #aaaaaa;
margin-top: 211rpx;
text-align: center;
}
.coupon-radio {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 1rpx solid rgba(0, 0, 0, 0.2);
line-height: 26rpx;
text-align: center;
}
.tick-success {
width: 18rpx;
}
.select-radio {
position: absolute;
top: 71rpx;
right: 30rpx;
}
.theme-color {
border: none;
}
.theme-color{
border: none;
}
\ 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