front-end/ghsPad/src/pages/home/components/leftGroup.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="true" @scrolltolower="reachBottom" lower-threshold="50">
            <view v-for="item in list.data" :key="item.id" class="show-item_box">
                <view class="item-body_box not-active" @click="getDetail(item)">
                    <view class="flower-name_box">
                        <view class="current-item-title">
                            <text class="name">{{item.name}}</text>
                        </view>
                        <image class="flower-image" :src="item.cover"></image>
                    </view>
                    <view class="item-price-num"> <view>￥{{parseFloat(item.price)}}</view> <view>{{item.num}}次</view> <view>快捷开单</view>  <view><text @click.stop="delCombination(item.id)" class="del">删除</text></view> </view>
                </view>
            </view>
        </scroll-view>

        <!-- 结算弹框 -->
        <uni-popup ref="settlePopRef" background-color="#fff" type="center" :animation="false">
            <settlePop @settleCommit="settleCommit" @cancelSettle="cancelSettle" ref="settlePop" :groupInfo.sync="groupInfo" :settleOpenStatus.sync="settleOpenStatus" :custom.sync="custom"></settlePop>
        </uni-popup>

        <!-- 扫码付款 -->
        <uni-popup ref="toPayRef" background-color="#fff" type="center" :animation="false" :is-mask-click="false">
            <toPayWay @cancelPay="cancelPay()" @closePay="closeToPay()" @payFinish="payFinish()" @selectPayWayBack="selectPayWayBack" :orderId.sync="orderId" :price.sync="price"></toPayWay>
        </uni-popup>

    </view>
</template>
<script>
import { mapGetters } from "vuex";
import settlePop from './settlePop'
import toPayWay from './toPay'
import { list } from "@/mixins"
import { createOrder} from '@/api/order'
import productMins from "@/mixins/product"
export default {
    name:'leftItem',
    components:{settlePop,toPayWay},
	mixins: [list,productMins],
	props: {
		customId: {
			type: Number,
			default: 0
		}
    },
    data(){
        return {
            totalShop:{ bigUnit: 0, smallUnit:0, totalPrice: 0 },
            itemList:[],
            currentJobType:'bill',
            currentJobId:0,
            groupList:[],
            settleOpenStatus:0,
            groupInfo:{},
            orderId:0,
            price:0,
            custom:{}
        }
    },
	computed:{
		...mapGetters(["getMyShopInfo"]),
	},
    watch:{
        customId:{
            handler(newCustomId){
                this.currentJobId = newCustomId
            },
            immediate:true
        },
        custom:{
            handler(newCustom){
                this.custom = newCustom
            },
            immediate:true
        }
    },
    created(){
        
    },
    methods:{
		payFinish(){
			this.$util.hitVoice()
			this.$refs.toPayRef.close()
			this.listenScanItem()
		},
		selectPayWayBack(){
			this.$util.hitVoice()
		},
        getDetail(item){

        },
		settleCommit(params){
			uni.showLoading({mask:true})
			createOrder({...params,groupId:this.groupInfo.id,isCashier:1}).then(res=>{
				uni.hideLoading()
				if(res.code == 1){
					if(res.data.status == 1){
						this.orderId = res.data.id
                        this.price = res.data.mainPay ? Number(res.data.mainPay) : 0
						this.$refs.toPayRef.open('center')
					}
					this.settleOpenStatus = 0
					this.$refs.settlePopRef.close()
				}
			})
		},
		cancelPay(){
			this.$util.hitVoice()
			this.$refs.toPayRef.close()
			this.listenScanItem()
		},
		/** 仅关闭付款弹层，不取消订单 */
		closeToPay(){
			this.cancelPay()
		},
        reachBottom() {

        },
		cancelSettle(){
			this.$util.hitVoice()
			this.settleOpenStatus = 0
			this.$refs.settlePopRef.close()
		},
        delCombination(itemId){

        }
    }
}
</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:75upx;
        overflow-y: auto;
        flex: 1;
        border: 1px solid #eee;
        & .show-item_box {
            padding: 2upx;
            & .item-body_box {
                border-radius: 2upx;
                padding: 2upx;
                font-size: 14upx;
                color:#666666;
                height:58upx;
                &.active {
                    background-color: #d4d6d6;
                }
                &.not-active {
                    background-color: #e7e9e9;
                }
                & .flower-name_box {
                    padding: 0 5upx;
                    position: relative;
                    .current-item-title {
                        .name{
                            color: #333333;
                            font-weight: bold;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                            width:60upx;
                            font-size:11upx;
                        }
                    }
                    .flower-image{
                        position: absolute;
                        right:1upx;
                        top:1upx;
                        width:32upx;
                        height:32upx;
                        border-radius:5upx;
                    }
                }
                .item-price-num{
                    color:#428369;
                    font-size:10upx;
                    display: flex;
                    margin-top:5upx;
                    align-items: center;
                    justify-content: space-between;
                    padding: 15upx 2upx 0 2upx;

                    .del{
                        color:orange;
                        font-size:12upx; 
                    }
                }
            }
        }
    }
    & .itemList-footer_box {
        height: 20upx;
        border: 1px solid #eee;
        font-size: 10upx;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
</style>