|
|
@@ -2,15 +2,15 @@
|
|
|
<view class="app-content">
|
|
|
<view class="billing_box_bg">
|
|
|
<view class="input-wrap" >
|
|
|
- <view style="padding:0upx 0upx 0upx 0upx;margin-right:15upx;" >
|
|
|
- <button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
|
|
|
+ <view class="header-action-wrap header-action-wrap--left">
|
|
|
+ <button class="admin-button-com blue header-action-btn" @click="selectFlowerNumFn()">图片分类</button>
|
|
|
</view>
|
|
|
<view class="search-bar">
|
|
|
<app-search-module ref="globalSearchRef" v-model="globalPy" placeholder="这里搜索" @input="globalSearch" />
|
|
|
</view>
|
|
|
- <view style="float:right;margin-left:15upx;">
|
|
|
- <button class="admin-button-com middle blue" @click="goItem()" style="margin-right:10upx;">花材</button>
|
|
|
- <button class="admin-button-com middle blue" @click="removeFromSave(option.customId)">清空购物</button>
|
|
|
+ <view class="header-action-wrap header-action-wrap--right">
|
|
|
+ <button class="admin-button-com blue header-action-btn" @click="goItem()">选花材</button>
|
|
|
+ <button class="admin-button-com blue header-action-btn" @click="removeFromSave(option.customId)">清空已选</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -95,7 +95,48 @@
|
|
|
</template>
|
|
|
</modal-module>
|
|
|
|
|
|
- <footer-cart :price="allPrice" :count="allCount" @confirm="confirmToSave" ></footer-cart>
|
|
|
+ <footer-cart :price="allPrice" :count="allCount" @confirm="confirmToSave" @showCartItem="showCartItem"></footer-cart>
|
|
|
+
|
|
|
+ <!-- 购物车弹框：参考 index2，左清空、右关闭 -->
|
|
|
+ <view v-if="cartItemShow == true" style="position: fixed;z-index: 190;top: 0;left: 0;width: 100vw;height: 145vh;background: rgba(0, 0, 0, 0.6);color: #fff;" @click="hideCartItem()">
|
|
|
+ <view style="position: fixed;bottom: 108upx;width:100vw;background-color:white;" @click.stop="">
|
|
|
+ <view class="commodity-view">
|
|
|
+ <view class="summary-bar">
|
|
|
+ <view class="summary-bar-left">
|
|
|
+ <button class="admin-button-com blue cart-bar-btn cart-bar-btn--clear" @click.stop="delMemory()">清空购物车</button>
|
|
|
+ </view>
|
|
|
+ <view class="summary-bar-right">
|
|
|
+ <view class="cart-popup-close" @click.stop="hideCartItem()">
|
|
|
+ <text class="iconfont iconclose cart-popup-close-icon"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="commodity-list">
|
|
|
+ <view class="commodity-item" v-for="(item, index) in selectList" :key="index">
|
|
|
+ <image class="item-icon" :src="item.cover" mode="aspectFill" />
|
|
|
+ <view class="item-info">
|
|
|
+ <view class="info-line">
|
|
|
+ <text class="item-name">{{ item.name }}</text>
|
|
|
+ <text class="item-price">
|
|
|
+ <text class="price">¥{{ item.userPrice ? parseFloat(item.userPrice) : 0 }}</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view style="text-align:right;">
|
|
|
+ <view class="open-bx">
|
|
|
+ <text class="iconfont iconjian" @click.stop="delCurrent(item)" v-if="item.bigCount > 0 || item.smallCount > 0"></text>
|
|
|
+ <text class="num" @click.stop="customUpdate(item)">
|
|
|
+ <text v-if="item.bigCount > 0" style="font-weight:bold;color:#3385ff;">{{ item.bigCount }}</text>
|
|
|
+ <text v-if="item.smallCount > 0"><text v-if="item.bigCount > 0">/</text>{{ item.smallCount }}</text>
|
|
|
+ </text>
|
|
|
+ <text class="iconfont iconzeng" @click.stop="addCurrent(item)"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
<uni-popup ref="globalClassImgRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
<view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
|
|
|
@@ -138,6 +179,7 @@ export default {
|
|
|
autoLoad: false,
|
|
|
xjData:{},
|
|
|
xjDataInfo:{},
|
|
|
+ cartItemShow: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -198,6 +240,36 @@ export default {
|
|
|
let customId = this.option.customId?this.option.customId:0
|
|
|
let reduceStock = this.option.reduceStock?this.option.reduceStock:0
|
|
|
this.$util.pageTo({url:'/admin/billing/index2?customId='+customId+'&customName='+customName+'&orderId='+orderId+'&book='+book+'&reduceStock='+reduceStock,type:2})
|
|
|
+ },
|
|
|
+ /** 点击底部购物车图标：展开/收起已选列表弹框 */
|
|
|
+ showCartItem(){
|
|
|
+ if(this.cartItemShow == true){
|
|
|
+ this.cartItemShow = false
|
|
|
+ }else{
|
|
|
+ if(!this.$util.isEmpty(this.selectList)){
|
|
|
+ this.cartItemShow = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideCartItem(){
|
|
|
+ this.cartItemShow = false
|
|
|
+ },
|
|
|
+ /** 弹框内清空购物车并关闭 */
|
|
|
+ delMemory(){
|
|
|
+ this.cartItemShow = false
|
|
|
+ this.removeFromSave(this.option.customId)
|
|
|
+ },
|
|
|
+ addCurrent(info){
|
|
|
+ if(info.$orig){ info = info.$orig }
|
|
|
+ this.replaceItemFn(info, 0, 'add')
|
|
|
+ },
|
|
|
+ delCurrent(info){
|
|
|
+ if(info.$orig){ info = info.$orig }
|
|
|
+ this.replaceItemFn(info, 0, 'sub')
|
|
|
+ },
|
|
|
+ customUpdate(info){
|
|
|
+ if(info.$orig){ info = info.$orig }
|
|
|
+ this.showAddModelFn(info)
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -211,9 +283,36 @@ export default {
|
|
|
flex-direction: column;
|
|
|
.input-wrap {
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
padding: 22upx 20upx 22upx 13upx;
|
|
|
.search-bar {
|
|
|
flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header-action-wrap {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ &--left {
|
|
|
+ margin-right: 15upx;
|
|
|
+ }
|
|
|
+ &--right {
|
|
|
+ margin-left: 15upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 与搜索框 map-search 同高 90upx，去掉 middle 上下 padding，文字水平垂直居中 */
|
|
|
+ .header-action-btn {
|
|
|
+ height: 90upx;
|
|
|
+ line-height: 90upx;
|
|
|
+ padding: 0 14upx;
|
|
|
+ margin: 0 0 0 10upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26upx;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
}
|
|
|
.scroll-middle_bx {
|
|
|
@@ -325,4 +424,116 @@ export default {
|
|
|
color:red;
|
|
|
font-weight:bold;
|
|
|
}
|
|
|
+.commodity-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .commodity-list {
|
|
|
+ overflow:scroll;
|
|
|
+ height:60vh;
|
|
|
+ padding: 20upx;
|
|
|
+ .commodity-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .item-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 140upx;
|
|
|
+ height: 140upx;
|
|
|
+ }
|
|
|
+ .item-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 20upx;
|
|
|
+ .info-line {
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ .item-name {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30upx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width:400upx;
|
|
|
+ }
|
|
|
+ .item-price {
|
|
|
+ color: #333;
|
|
|
+ font-size: 22upx;
|
|
|
+ .price {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .open-bx {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ & .iconfont {
|
|
|
+ color: #3385ff;
|
|
|
+ font-size: 60upx;
|
|
|
+ }
|
|
|
+ & > .num {
|
|
|
+ display: inline-block;
|
|
|
+ width: 130upx;
|
|
|
+ height:55upx;
|
|
|
+ line-height:55upx;
|
|
|
+ text-align:center;
|
|
|
+ margin: 0 8upx;
|
|
|
+ color: #868686;
|
|
|
+ border-radius: 22upx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .summary-bar {
|
|
|
+ padding: 0 20upx;
|
|
|
+ height: 90upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+ .summary-bar-left,
|
|
|
+ .summary-bar-right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .summary-bar-right {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .cart-bar-btn {
|
|
|
+ height: 70upx;
|
|
|
+ line-height: 70upx;
|
|
|
+ padding: 0 28upx;
|
|
|
+ margin: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28upx;
|
|
|
+ border: none;
|
|
|
+ &--clear {
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cart-popup-close {
|
|
|
+ width: 80upx;
|
|
|
+ height: 80upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ .cart-popup-close-icon {
|
|
|
+ color: #666;
|
|
|
+ font-size: 44upx;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
