front-end/ghsPad/src/pages/home/components/leftArea.vue

<template>
    <view class="itemList-box">
        <view class="title">
            列表
            <text style="float:right;">{{ getMyShopInfo.shopName=='首店'? getMyShopInfo.merchantName: getMyShopInfo.merchantName+' '+getMyShopInfo.shopName}}</text>
        </view>
        <scroll-view
            class="itemList-item_box"
            scroll-y
            scroll-with-animation
            :scroll-into-view="activeScrollIntoView"
        >
            <view
                v-for="item in selectList"
                :key="getItemKey(item)"
                :id="getItemScrollId(item)"
                :data-item-key="getItemKey(item)"
                class="show-item_box"
                @touchstart="onItemTouchStartByEvent"
                @touchmove="onItemTouchMoveByEvent"
                @touchend="onItemTouchEndByEvent"
                @touchcancel="onItemTouchEndByEvent"
            >
                <view class="delete-btn" :data-item-key="getItemKey(item)" @click.stop="delItemByEvent">删除</view>
                <view
                    class="item-body_box not-active"
                    :data-item-key="getItemKey(item)"
                    :class="{'is-swiped': swipeItemId === item.id, 'is-operated': activeItemKey === getItemKey(item)}"
                    @click="handleItemClickByEvent"
                >
                    <view class="flower-name_box">
                        <view class="current-item-title">
                            <text class="name">{{item.name}}</text>
                            <view class="num-action_box">
                                <view class="num-btn" :data-item-key="getItemKey(item)" @click.stop="changeItemNumByEvent($event, -1)">
                                    <zui-svg-icon icon="general-sub" :width="38" :height="38" color="#8abf8a" />
                                </view>
                                <view class="num-btn" :data-item-key="getItemKey(item)" @click.stop="changeItemNumByEvent($event, 1)">
                                    <zui-svg-icon icon="general-plus" :width="38" :height="38" color="#8abf8a" />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="item-price-num">
                        <template v-if="item.property && item.property == 1">
                            <view>{{parseFloat(item.unitPrice)}}元/{{item.unitName}}</view>
                            <view>{{item.currentNum}}{{item.unitName}}</view>
                        </template>
                        <template v-else>
                            <view>{{parseFloat(item.unitPrice)}}元/份</view>
                            <view>{{item.currentNum}}份</view>
                        </template>
                        <view>￥{{parseFloat((item.currentNum * item.unitPrice).toFixed(2))}}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="itemList-footer_box">
            <view> 数量
                <text style="margin-left:5upx;">
                    <text v-if="Number(allCount.bigNum)>0">{{allCount.bigNum}}扎</text><text v-if="Number(allCount.smallNum)>0">{{allCount.smallNum}}支</text>
                </text>
            </view>
            <view> 合计 <text style="margin-left:5upx;">￥{{allPrice}}</text> </view>
        </view>

        <!-- 开单选花材输入数量和金额 -->
        <uni-popup ref="selectNumPriceRef" background-color="#fff" type="center" :animation="false">
            <selectNumPrice @confirmAddItemModel="confirmAddItemModel" :customData.sync="customData" @cancelKdSelectNumPrice="addItemModelHidden"></selectNumPrice>
        </uni-popup>

        <!-- 花材网格选择弹框 -->
        <uni-popup ref="selectFlowerGridRef" background-color="#fff" type="center" :animation="false">
            <selectFlowerGrid :flowerData="globalGridFlowerList" @globalClearXj="globalClearXj" @globalConfirmChangeXj="globalConfirmChangeXj" @globalCloseXjPop="globalCloseXjPop" :customData.sync="customData"></selectFlowerGrid>
        </uni-popup>

    </view>
</template>
<script>
import productMins from "@/mixins/product";
import selectNumPrice from './selectNumPrice.vue'
import { mapGetters } from "vuex";
import selectFlowerGrid from './selectFlowerGrid.vue'
export default {
    name:'leftItem',
    components:{selectNumPrice,selectFlowerGrid},
	mixins: [productMins],
	props: {
        changeCurrentJobType:{
			type: String,
			default: 'bill'
        },
        changeCurrentJobId:{
			type: Number,
			default: 0
        },
        activeItemMark:{
            type: Object,
            default(){
                return { key:'', time:0 }
            }
        }
    },
    data(){
        return {
            totalShop:{ bigUnit: 0, smallUnit:0, totalPrice: 0 },
            itemList:[],
            swipeItemId: '',
            activeItemKey: '',
            activeScrollIntoView: '',
            touchStartX: 0,
            touchStartY: 0,
            isHorizontalSwipe: false,
            lastSwipeTime: 0
        }
    },
	computed:{
		...mapGetters(["getMyShopInfo"]),
	},
    watch:{
        changeCurrentJobType:{
            handler(id){
                this.currentJobType = id
            },
            immediate:true
        },
        changeCurrentJobId:{
            handler(id){
                this.currentJobId = id
            },
            immediate:true
        },
        activeItemMark:{
            handler(mark){
                if(mark && mark.key){
                    this.activeItemKey = mark.key
                    this.scrollToActiveItemByKey(mark.key)
                }
            },
            immediate:true
        },
        selectList:{
            handler(){
                if(this.activeItemKey){
                    this.scrollToActiveItemByKey(this.activeItemKey)
                }
            },
            deep:true
        }
    },
    methods:{
        getTouchPoint(event) {
            const touches = event.changedTouches || event.touches || []
            return touches[0]
        },
        getItemKey(item) {
            const property = item.property !== undefined ? item.property : 1
            return `${item.id}_${property}`
        },
        getScrollIdByKey(key) {
            return `select-item-${key}`
        },
        getItemScrollId(item) {
            return this.getScrollIdByKey(this.getItemKey(item))
        },
        getEventItem(event) {
            const dataset = event && event.currentTarget && event.currentTarget.dataset
            const key = dataset && dataset.itemKey
            if (!key) return null
            return this.selectList.find(item => this.getItemKey(item) === key)
        },
        scrollToActiveItemByKey(key) {
            this.activeScrollIntoView = ''
            this.$nextTick(() => {
                this.activeScrollIntoView = this.getScrollIdByKey(key)
            })
        },
        setActiveItem(item) {
            const key = this.getItemKey(item)
            this.activeItemKey = key
            this.scrollToActiveItemByKey(key)
        },
        clearActiveItem(item) {
            if (this.activeItemKey === this.getItemKey(item)) {
                this.activeItemKey = ''
                this.activeScrollIntoView = ''
            }
        },
        hasEnoughStock(item, num) {
            if (!this.checkStock || num <= 0) return true
            if (item.unitType == 0) {
                return Number(num) <= Number(item.stock)
            }
            const stockNum = (Number(num) / Number(item.ratio)).toFixed(2)
            return Number(stockNum) <= Number(item.stock)
        },
        showNoStockTip(item) {
            this.$util.noStockRemind()
            this.$msg(item.unitType == 0 ? "库存不足呢" : "库存不足哦")
        },
        onItemTouchStart(item, event) {
            if (!item) return
            const touch = this.getTouchPoint(event)
            if (!touch) return
            this.touchStartX = touch.clientX
            this.touchStartY = touch.clientY
            this.isHorizontalSwipe = false
        },
        onItemTouchStartByEvent(event) {
            this.onItemTouchStart(this.getEventItem(event), event)
        },
        onItemTouchMove(item, event) {
            if (!item) return
            const touch = this.getTouchPoint(event)
            if (!touch) return
            const moveX = touch.clientX - this.touchStartX
            const moveY = touch.clientY - this.touchStartY
            if (Math.abs(moveX) <= Math.abs(moveY) || Math.abs(moveX) < 15) return
            this.isHorizontalSwipe = true
            this.swipeItemId = moveX < 0 ? item.id : ''
        },
        onItemTouchMoveByEvent(event) {
            this.onItemTouchMove(this.getEventItem(event), event)
        },
        onItemTouchEnd(item) {
            if (!item) return
            if (this.isHorizontalSwipe) {
                this.lastSwipeTime = Date.now()
            }
            this.touchStartX = 0
            this.touchStartY = 0
            this.isHorizontalSwipe = false
        },
        onItemTouchEndByEvent(event) {
            this.onItemTouchEnd(this.getEventItem(event))
        },
        handleItemClick(item) {
            if (!item) return
            if (this.swipeItemId === item.id) {
                if (Date.now() - this.lastSwipeTime < 300) return
                this.swipeItemId = ''
                return
            }
            this.popAddModelFn(item)
        },
        handleItemClickByEvent(event) {
            this.handleItemClick(this.getEventItem(event))
        },
		popAddModelFn(info) {
            this.setActiveItem(info)
            let currentNum = info.currentNum
            let unitPrice = info.unitPrice
            let unitType = info.unitType
            this.$util.hitVoice()
			this.showAddModelFn({ ...info, currentNum: currentNum, unitPrice: unitPrice,unitType:unitType,action:'update'})
		},
        delItem(item){
            if (!item) return
            this.$util.hitVoice()
            this.swipeItemId = ''
            this.clearActiveItem(item)
            item.currentNum = 0
            this.replaceItemFn(item)
        },
        delItemByEvent(event) {
            this.delItem(this.getEventItem(event))
        },
        changeItemNum(item, step) {
            if (!item) return
            this.$util.hitVoice()
            this.swipeItemId = ''
            const currentNum = Number(item.currentNum) || 0
            const nextNum = Math.max(0, currentNum + step)
            if (!this.hasEnoughStock(item, nextNum)) {
                this.showNoStockTip(item)
                return
            }
            item.currentNum = nextNum
            if (nextNum > 0) {
                this.setActiveItem(item)
            } else {
                this.clearActiveItem(item)
            }
            this.replaceItemFn(item)
        },
        changeItemNumByEvent(event, step) {
            this.changeItemNum(this.getEventItem(event), step)
        }
    }
}
</script>
<style lang="scss" scoped>
.itemList-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    & .title {
        padding: 3upx;
        font-size: 12upx;
        background-color: #3385FF;
        color: #FFFFFF;
    }
    & .itemList-item_box {
        margin-bottom:72upx;
        overflow-y: auto;
        flex: 1;
        height: 0;
        border: 1px solid #eee;
        background-color: #f3f6f4;
        & .show-item_box {
            padding: 3upx 4upx;
            position: relative;
            overflow: hidden;
            .delete-btn {
                position: absolute;
                top: 4upx;
                right: 5upx;
                bottom: 4upx;
                width: 40upx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFFFFF;
                font-size: 12upx;
                background-color: #f56c6c;
                border-radius: 4upx;
            }
            & .item-body_box {
                position: relative;
                border-radius: 4upx;
                padding: 2upx;
                font-size: 14upx;
                color:#666666;
                border-bottom: 3upx solid transparent;
                transition: transform 0.2s;
                z-index: 1;
                box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.08);
                &.is-swiped {
                    transform: translateX(-42upx);
                }
                &.is-operated {
                    border-bottom-color: #3385FF;
                }
                &.active {
                    background-color: #ffffff;
                }
                &.not-active {
                    background-color: #ffffff;
                }
                .item-price-num{
                    color:green;
                    font-size:11upx;
                    font-weight:bold;
                }
                & .flower-name_box {
                    padding: 0 5upx;
                    .current-item-title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .name{
                            color: #333333;
                            font-weight: bold;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                            width:90upx;
                            font-size:11upx;
                        }
                        .num-action_box {
                            display: flex;
                            align-items: center;
                            margin-top: 2upx;
                            .num-btn {
                                width: 20upx;
                                height: 20upx;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-left: 12upx;
                            }
                        }
                    }
                }
                & > view:nth-child(2) {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-top: 15upx;
                }
            }
        }
    }
    & .itemList-footer_box {
        height: 20upx;
        border: 1px solid #eee;
        font-size: 10upx;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
</style>