45

chenyc

2023-05-29 4ebb7babe7e392d62662d09f97f48647c114cc5f

 src/views/jifenShangCheng/index.vue

@@ -1,28 +1,38 @@
<template>
    <div>
        <div>
        <van-loading style="top: 100px;" v-if="loading" type="spinner" size="24px" vertical>
            加载中。。。。
        </van-loading>
        <div v-else>
            <dizhi></dizhi>
            <van-tree-select
                :height="height"
                v-model:main-active-index="activeIndex"
                :items="items"
                >
                <template #content >
                    <div style="text-align: right; padding-right: 20px; height: 50px; line-height: 30px; color: #409EFF; font-size: 16px;">
                        <van-icon size="26px" name="cart-circle-o" style="margin-top: 20px;" />
            >
                <template #content>
                    <div
                        style="border-bottom: #e6e8eb solid 1px; text-align: right;
                    padding-right: 15px; height: 50px;
                    line-height: 30px; color: #409eff;
                    font-size: 16px;">
                        <!-- 订单 -->
                        <van-icon @click="openOrder" size="26px" name="balance-list-o" color="#67C23A" style="margin-top: 10px; margin-right: 20px;" />
                        <!-- 购物车 -->
                        <van-icon @click="openGwc" size="26px" name="cart-circle-o" color="#F56C6C" style="margin-top: 10px;" />
                    </div>
                    <div style="border-left: 1px solid rgb(229, 226, 225); background:#f7f8fa;">
                        <van-card 
                            style="background: #ffffff;"
                            v-for="(item) in items[activeIndex].items"
                            >
                            <template #desc >
                               <span style="color:#409EFF; font-size: 1rem;">{{item.itemName}}</span>
                    <div v-if="items.length > 0" style="border-left: 1px solid rgb(229, 226, 225); background: #f7f8fa;">
                        <van-card
                            style="background: #fff;"
                            v-for="(item,index) in items[activeIndex].items" :key="index"
                        >
                            <template #desc>
                                <span style="color: #409eff; font-size: 1rem;">{{item.itemName}}</span>
                            </template>
                            <template #price >
                               <span style="color: red; font-size: 1rem;">{{item.itemPrice}}￥</span>
                            <template #price>
                                <span style="color: #f56c6c; font-size: 1rem;">{{item.itemPrice}}￥</span>
                            </template>
                            <template #thumb >
                            <template #thumb>
                                <van-image
                                    fit="contain"
                                    width="100%"
@@ -35,43 +45,44 @@
                            </template>

                            <template #footer>
                                 <van-icon @click="goumai(item)" size="20" color="red" name="shopping-cart-o" />
                                <van-icon @click="goumai(item)" size="20" color="#F56C6C" name="shopping-cart-o" />
                            </template>
                            </van-card>
                        </van-card>
                    </div>
                </template>
            </van-tree-select>
        </div>
        <div>
          
        </div>
        <!-- 购买弹框 -->
        <div>
            <van-popup v-model:show="show" position="bottom" :style="{ height: '320px' }">
                <div style="padding-top: 20px;">
                    <van-row>
                        <van-col :span="2"  style="height: 60px; line-height: 60px; padding-top: 10px;">
                        <van-col :span="2" style="height: 60px; line-height: 60px; padding-top: 10px;">
                            <van-icon size="40px" color="#E6A23C" name="location-o" />
                        </van-col>
                        <van-col :span="20" style="font-size: 16px; padding-left: 10px; height: 60px; line-height: 30px;" >
                            王虎 燎原西路190弄3好107 
                            <br/>联系电话：17717853034
                        <van-col :span="20" style="font-size: 16px; padding-left: 10px; height: 60px; line-height: 30px;">
                            <div v-if="defaultDizhi.patientAddress !== ''">{{defaultDizhi.patientAddress}} </div>
                            <div v-if="defaultDizhi.patientAddress !== ''">联系电话：{{defaultDizhi.receivePersonMobile}} </div>
                            <div @click="openDizhi" v-else style="margin-top: 18px; color: #e6a23c;">
                                请设置你的收货地址
                            </div>
                        </van-col>
                        <van-col :span="2" style="height: 60px; line-height: 60px;"> 
                        <van-col :span="2" style="height: 60px; line-height: 60px;">
                            <van-icon size="20px" @click="openDizhi" name="arrow" />
                        </van-col>
                    </van-row>
                </div>
                <div style="padding-top: 20px;" class="setItem">
                    <van-card>
                        <template #desc >
                            <span style="color:#409EFF; font-size: 1rem;">{{setItem.itemName}}</span>
                        <template #desc>
                            <span style="color: #409eff; font-size: 1rem;">{{setItem.itemName}}</span>
                        </template>
                        <template #price >
                            <span style="color: red; font-size: 1rem;">{{setItem.itemPrice}}￥</span>
                        <template #price>
                            <span style="color: #f56c6c; font-size: 1rem;">{{setItem.itemPrice}}￥</span>
                        </template>
                        <template #thumb >
                        <template #thumb>
                            <van-image
                                style="border: 1px solid #ebedf0;"
                                fit="contain"
                                width="100%"
                                height="100%"
@@ -79,38 +90,44 @@
                            />
                        </template>
                        <template #tags>
                            <br/>
                            <br />
                            <van-tag style="margin-top: 10px;" plain type="danger">选择人数多</van-tag>
                        </template>

                        <template #footer>
                            <span>
                                <van-icon size="1rem" v-if="setItem.number>1" @click="setItem.number--" name="minus" />
                                <van-icon size="1rem" v-if="setItem.number > 1" @click="setItem.number--" name="minus" />
                            </span>
                            <span  style="font-size: 1.2rem; margin-left: 1rem; margin-right: 1rem;">
                            <span style="font-size: 1.2rem; margin-left: 1rem; margin-right: 1rem;">
                                {{setItem.number}}
                            </span>
                            <span>
                                <van-icon size="1rem" @click="setItem.number++" name="plus" />
                                

                            </span>
                        </template>
                    </van-card>
                </div>
                <div style="text-align: right; font-size: 18px; color: red; font-weight: 600; margin-top: 10px;padding-right: 20px;">
                    小计￥{{setItem.itemPrice*setItem.number}}
                <div style="text-align: right; font-size: 18px; color: #f56c6c; font-weight: 600; margin-top: 10px;padding-right: 20px;">
                    小计￥{{setItem.itemPrice * setItem.number}}
                </div>
                <van-action-bar>
                    <van-action-bar-icon icon="revoke" @click="show=false" text="返回" dot />
                    <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
                    <van-action-bar-button type="warning" text="加入购物车" />
                    <van-action-bar-button type="danger" text="立即购买" />
                    <van-action-bar-icon icon="revoke" @click="show = false" text="返回" dot />
                    <van-action-bar-icon icon="cart-o" text="购物车" :badge="gwcBadge" />
                    <van-action-bar-button @click="AddGwc" type="warning" text="加入购物车" />
                    <van-action-bar-button type="danger" @click="liJiGouMai" text="立即购买" />
                </van-action-bar>
            </van-popup>
        </div>
        <!-- 地址弹框 -->
        <div>
            <dizhi :fanhuiFun="feihuDizhi" ref="dizhiRef"></dizhi>
            <dizhi @fanhui-fun="feihuDizhi" ref="dizhiRef"></dizhi>
        </div>
        <div>
            <gouwuche ref="gouwucheRef"></gouwuche>
        </div>
        <div>
            <myOrder ref="myOrderRef"></myOrder>
        </div>
        <van-tabbar v-model="active" @change="tabChang">
            <van-tabbar-item name="home" icon="like">首页</van-tabbar-item>
@@ -120,79 +137,180 @@
    </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import {useRouter} from 'vue-router'
import { useWindowSize } from '@vant/use'
// import dizhiAdmin from '../jifenShangCheng/components/dizhiAdmin.vue'
import dizhi from '../jifenShangCheng/components/dizhi.vue'
import { userInfoStore } from '@/stores/userInfo'
const userInfo = userInfoStore()
import { ajaxGet ,ajaxPost} from '@/utils/axios'
import { onMounted } from 'vue'
const router=useRouter()
const { width, height } = useWindowSize();
const dizhiRef=ref()
const show=ref(false)
const patientInfo=computed(() => {
    return userInfo.patient
})
const setItem=ref({
    itemName:'dsd',
    itemPrice:0,
    itemPhoto:'',
    code:'',
    number:1,
    id:0
})
const activeIndex = ref(0);
const items=ref([
    {
        name:'',
        text:'',
        items:[]
    }
])
const active=ref('jifen')
const tabChang=(index:any)=>{
    if (index==='home'){
        router.push('/')
    } else if(index==='jifen') {
        router.push('jifenShangCheng')
    }else if(index==='my') {
        router.push('my')
    }
}
// 购买
const goumai=(item:any)=>{
    console.log(item)
    setItem.value={
        itemName:item.itemName,
        itemPrice:item.itemPrice,
        code:item.code,
        number:1,
        itemPhoto:item.itemPhoto,
        id:item.id
    }
    show.value=true
}
// 编辑地址
const openDizhi=()=>{
    dizhiRef.value.openShow()
}
// 返回地址
const feihuDizhi=()=>{
    console.log()
}
onMounted(()=>{
    ajaxPost('/eshop/listItems',`clientCode=${patientInfo.value.patientInfo.clientCode}`).then((re:any)=>{
        console.log(re.category)
        const list= re.category
        items.value =list.map((el:any)=>{
            el.text=el.name
            return el
        })
        console.log(items.value)
        
    import { computed, ref } from 'vue'
    import {useRouter} from 'vue-router'
    import { useWindowSize } from '@vant/use'
    import dizhi from '../jifenShangCheng/components/dizhi.vue'
    import gouwuche from './components/gouwuche.vue'
    import myOrder from './components/myOrder.vue'
    import { userInfoStore } from '@/stores/userInfo'
    const userInfo = userInfoStore()
    import { ajaxPost} from '@/utils/axios'
    import { onMounted } from 'vue'
    import { Toast } from 'vant'
    const router=useRouter()
    const { height } = useWindowSize()
    const dizhiRef=ref()
    const myOrderRef=ref()
    const gouwucheRef=ref()
    const show=ref(false)
    const loading=ref(true)
    const gwcBadge=ref(0)
    const gwcList=ref([])
    const defaultDizhi=ref({
        id:0,
        code:'',
        receivePersonName:'',
        receivePersonMobile:'',
        patientAddress:'',
    })
})
    const patientInfo=computed(() => {
        return userInfo.patient
    })
    const setItem=ref({
        itemName:'dsd',
        itemPrice:0,
        itemPhoto:'',
        code:'',
        number:1,
        id:0
    })
    const activeIndex = ref(0)
    const items=ref([
        {
            name:'',
            text:'',
            items:[]
        }
    ])
    const active=ref('jifen')
    const openGwc=()=>{
        gouwucheRef.value.openShow()
    }
    const openOrder=()=>{
        myOrderRef.value.openShow()
    }
    const tabChang=(index:any)=>{
        if (index==='home'){
            router.push('/')
        } else if (index==='jifen') {
            router.push('jifenShangCheng')
        } else if (index==='my') {
            router.push('my')
        }
    }
    const AddGwc=()=>{
        console.log(setItem.value)
        const row={
            code:'',
            id:0,
            itemCode:setItem.value.code,
            itemCount:setItem.value.number,
            patientCode:patientInfo.value.patientInfo.code
        }
        ajaxPost('/eshop/cart/add',row).then(re=>{
            console.log(re)
            Toast.success('已经加入购物车了')
            show.value=false
            getListGwc()
        }).catch(()=>{

        })
    }
    // 打开购买
    const goumai=(item:any)=>{
        console.log(item)
        setItem.value={
            itemName:item.itemName,
            itemPrice:item.itemPrice,
            code:item.code,
            number:1,
            itemPhoto:item.itemPhoto,
            id:item.id
        }
        AddGwc()
        // show.value=true
    }
    // 立即购买
    const liJiGouMai=()=>{
        if (defaultDizhi.value.id>0){
            console.log(setItem.value,defaultDizhi.value)
            const pasm={
                addressCode:defaultDizhi.value.code,
                cartCodes:setItem.value.code
            }
            console.log(pasm)
            ajaxPost('/eshop/order/checkout',`addressCode=${defaultDizhi.value.code}&cartCodes=${setItem.value.code}`)
                .then(re=>{
                    console.log(re)
                    if (re.data==='OK'){
                        Toast.success('您已经兑换成功')
                    } else {
                        Toast('兑换失败')
                    }

                }).catch((error)=>{
                    console.log(error)
                    Toast('兑换失败')
                })
        } else {
            Toast('请先选择您的收货地址')
        }

    }
    // 编辑地址
    const openDizhi=()=>{
        dizhiRef.value.openShow(defaultDizhi.value.id)
    }
    // 返回地址
    const feihuDizhi=(row:any)=>{
        console.log(row)
        defaultDizhi.value={
            id:row.id,
            code:row.code,
            receivePersonName:row.name,
            receivePersonMobile:row.tel,
            patientAddress:row.address,
        }
    }
    const getListGwc=()=>{
        ajaxPost('/eshop/cart/list',`page=0&size=0&wherecondition=patient_code=\'${patientInfo.value.patientInfo.code}\'`)
            .then((re:any)=>{
                console.log('购物车')
                console.log(re)
                gwcBadge.value=re.list.length
                gwcList.value=re.list
            })
    }
    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){
                console.log('没有默认地址')
            } else {
                defaultDizhi.value=re.list[0]
            }
            console.log(defaultDizhi.value)
        })
    }
    onMounted(()=>{
        getDefDizhi()
        loading.value=true
        ajaxPost('/eshop/listItems',`clientCode=${patientInfo.value.patientInfo.clientCode}`).then((re:any)=>{
            console.log(re.category)
            const list= re.category
            items.value =list.map((el:any)=>{
                el.text=el.name
                return el
            })
            console.log(items.value)

        }).finally(()=>{
            loading.value=false
        })
        getListGwc()

    })
</script>