45

chenyc

2023-05-29 4ebb7babe7e392d62662d09f97f48647c114cc5f

 src/views/jifenShangCheng/components/gouwuche.vue

@@ -0,0 +1,317 @@
<template>
    <div>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '90%' }">
            <van-loading style="top: 100px;" v-if="loading" type="spinner" size="24px" vertical>
                加载中。。。。
            </van-loading>
            <div v-if="gwcList.length > 0" style="height: 100%; padding-left: 10px;padding-right: 10px; background: #f5f7fa;">
                <div>
                    <van-row style="padding-top: 10px;padding-bottom: 10px;">
                        <van-col @click="show = false" :span="7" style="height: 30px; line-height: 30px; font-size: 20px; font-weight: 600; color: #409eff;">
                            <van-icon name="arrow-left" />购物车<span style="font-size: 10px;">({{gwcList.length}})</span>

                        </van-col>
                        <van-col
                            :span="13" style="color: #e6a23c; height: 30px; line-height: 30px;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;
                        overflow: hidden;">
                            <van-icon name="location-o" />
                            <span v-if="defaultDizhi.code === ''" @click="setDizhi">设置地址</span>
                            <span v-else @click="setDizhi">{{defaultDizhi.patientAddress}}</span>
                        </van-col>
                        <van-col :span="4" style=" height: 30px; line-height: 30px;text-align: right;">
                            <span v-if="!isAdmin" @click="adminFun" style="color: #409eff;">管理</span>
                            <span v-else @click="adminFunCols" style="color: #f56c6c;">取消</span>
                        </van-col>
                    </van-row>
                </div>
                <div class="parent " v-for="(item,index) in gwcList" :key="index">
                    <div class="checkboxclss">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                    </div>
                    <div class="parentzi">
                        <div>
                            <van-image
                                fit="contain"
                                width="100%"
                                height="100%"
                                :src="item.itemInfo.itemPhoto"
                            />
                        </div>
                        <div style="padding-left: 10px;">
                            <div style="height: 2rem; line-height: 2rem; color: #409eff;">{{item.itemInfo.itemName}}</div>
                            <div style="height: 2rem;">
                                <van-tag type="primary">{{item.itemInfo.itemCategory}}</van-tag>
                            </div>
                            <div style="height: 2rem;">
                                <van-row>
                                    <van-col :span="12" style="color: #f56c6c;">￥{{item.itemInfo.itemPrice}}</van-col>
                                    <van-col :span="12" style="text-align: right; padding-right: 10px;">
                                        <span><van-icon name="plus" @click="item.itemCount++" /></span>
                                        <span style="margin-left: 10px; margin-right: 10px;">x{{item.itemCount}}</span>
                                        <span><van-icon name="minus" v-if="item.itemCount > 1" @click="item.itemCount--" /></span>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="gwcList.length === 0" style="margin-top: 200px; text-align: center; color: #409eff;">
                <van-icon name="cart-o" />
                你的购物车空空如也
                <br />
                <br />
                <span @click="show = false">
                    <van-icon name="revoke" />返回
                </span>
            </div>
            <div>
                <div class="divcaozuo">
                    <van-row>
                        <van-col :span="10" style="line-height: 50px;padding-left: 10px;">
                            <van-checkbox v-model="AllChecked" style="margin-top: 20px;">全选</van-checkbox>
                        </van-col>
                        <van-col :span="14" style="line-height: 50px; text-align: right; padding-right: 10px;">
                            <div style="float: right;">
                                <van-button v-if="!isAdmin" round style="width: 100px;" @click="jieshuan" type="danger">结 算</van-button>
                                <van-button v-if="isAdmin" round @click="delrows" style="width: 100px;" type="danger">删 除</van-button>

                            </div>
                            <div v-if="!isAdmin" style="float: right; margin-top: 5px;margin-right: 5px;">
                                合计:<span style="font-size: 20px;color: #f56c6c;">￥{{functionHj}}</span></div>

                        </van-col>
                    </van-row>
                </div>
                <div>
                    <dizhi @fanhuiFun="feihuDizhi" ref="dizhiRef"></dizhi>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
    import { ajaxPost } from '@/utils/axios'
    import {  Toast } from 'vant'
    import { watch } from 'vue'
    import { computed } from 'vue'
    import { ref } from 'vue'
    import dizhi from '../components/dizhi.vue'
    import { userInfoStore } from '@/stores/userInfo'
    const userInfo = userInfoStore()
    const AllChecked=ref(false)
    const loading = ref(false)
    const isAdmin=ref(false)
    const dizhiRef=ref()
    const defaultDizhi=ref({
        id:0,
        code:'',
        receivePersonName:'',
        receivePersonMobile:'',
        patientAddress:'',
    })
    const functionHj =computed(()=>{
        let num=0
        gwcList.value.forEach(el=>{
            if ( el.checked===true){
                num+=el.itemCount*el.itemInfo.itemPrice
            }

        })
        return num
    })
    watch(()=>AllChecked.value,()=>{
        if (AllChecked.value){
            gwcList.value.forEach(el=>{
                el.checked=true
            })
        } else {
            gwcList.value.forEach(el=>{
                el.checked=false
            })
        }
    })

    const gwcList = ref([
        {
            id:0,
            code:'',
            itemCount:1,
            checked:false,
            patientCode:'',
            itemCode:'',
            itemInfo:{
                itemName:'',
                itemPhoto:'',
                itemCategory:'',
                itemPrice:0,
            }
        }
    ])
    const show = ref(false)
    const getPages = () => {
        loading.value = true
        ajaxPost('/eshop/cart/list', '').then((re: any) => {
            console.log(re)
            gwcList.value=[]
            re.list.forEach((element:any) => {
                gwcList.value.push({
                    id:element.id,
                    code:element.code,
                    itemCount:element.itemCount,
                    checked:false,
                    itemCode:element.itemCode,
                    itemInfo:element.itemInfo,
                    patientCode:element.patientCode
                })
            })
        // gwcList.value = re.list
        }).finally(() => {
            loading.value = false
        })
    }
    const openShow = () => {
        show.value = true
        isAdmin.value=false
        AllChecked.value=false
        getPages()
        getDefDizhi()
    }
    const adminFun=()=>{
        gwcList.value.forEach(el=>{
            el.checked=false
        })
        AllChecked.value=false
        isAdmin.value=true
    }
    const adminFunCols=()=>{
        AllChecked.value=false
        gwcList.value.forEach(el=>{
            el.checked=false
        })
        isAdmin.value=false
    }
    const delrows=()=>{
        console.log(gwcList.value)
        const list: number[]=[]
        gwcList.value.forEach(el=>{
            if (el.checked){
                list.push(el.id)
            }
        })
        if (list.length===0){
            Toast.fail('没有选中删除项')
            return false
        }
        const ids=list.join(',')
        console.log(ids)
        ajaxPost('/eshop/cart/deleteAll', 'ids='+ids).then((re: any) => {
            Toast.success('删除成功')
            console.log(re)
            isAdmin.value=false
            getPages()
        })

    }

    const jieshuan=()=>{
        console.log(gwcList.value,defaultDizhi.value)
        const listCode: any[]=[]
        gwcList.value.forEach((el:any)=>{
            if (el.checked){
                listCode.push(el.code)
            }
        })
        if (listCode.length===0){
            Toast('没有选中要结算的商品')
            return false
        }
        const pasm=`cartCodes=${listCode.toString()}&addressCode=${defaultDizhi.value.code}`
        console.log(pasm)
        ajaxPost('/eshop/order/checkout',pasm)
            .then((re:any)=>{
                console.log(re)
                if (re==='OK'){
                    Toast.success('您已经兑换成功')
                } else {
                    Toast('兑换失败')
                }

            }).catch((error)=>{
                console.log(error)
                Toast('兑换失败')
            })

    }
    const getDefDizhi=()=>{
        const pasm=`page=0&size=0&wherecondition=patient_is_default=1 and patient_code="${userInfo.patient.patientInfo.code}"`
        ajaxPost('/patient/address/list', pasm).then((re: any) => {
            console.log('默认地址')
            console.log(re)
            if (re.list.length===0){
                Toast('你还没有设置你的收货地址哦')
            } else {
                defaultDizhi.value=re.list[0]
            }
            console.log(defaultDizhi.value)
        })
    }
    const setDizhi=()=>{
        dizhiRef.value.openShow(defaultDizhi.value.id)
    }
    // 返回地址
    const feihuDizhi=(row:any)=>{
        defaultDizhi.value={
            id:row.id,
            code:row.code,
            receivePersonName:row.name,
            receivePersonMobile:row.tel,
            patientAddress:row.address,
        }
    }

    defineExpose({
        openShow
    })

</script>
<style scoped lang="css">
.parent {
    margin-top: 10px;
    background: #fff;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;
    border: 1px solid #cdd0d6;

    /* background: red; */
    height: 6rem;
    display: grid;
    grid-template-columns: minmax(30px, 30px) 1fr;
}

.parentzi {
    padding-left: 5px;

    /* background: red; */
    height: 6rem;
    display: grid;
    grid-template-columns: minmax(30%, 30%) 1fr;
}

.checkboxclss {
    padding-top: 2.6rem;
    height: 6rem;
    line-height: 6rem;
}

.divcaozuo {
    height: 60px;
    width: 100%;

    /* background-color: yellow; */
    position: absolute;
    bottom: 10px;
    border-top: solid 1px #cdd0d6;
}
 </style>