<template>
|
<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="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" :badge="gwcBadge" style="margin-top: 10px;" />
|
</div>
|
<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: #f56c6c; font-size: 1rem;">{{item.itemPrice}}￥</span>
|
</template>
|
<template #thumb>
|
<van-image
|
fit="contain"
|
width="100%"
|
height="100%"
|
:src="item.itemPhoto"
|
/>
|
</template>
|
<template #tags>
|
<!-- <van-tag plain type="danger">卡片</van-tag> -->
|
</template>
|
|
<template #footer>
|
<van-icon @click="goumai(item)" size="20" color="#F56C6C" name="shopping-cart-o" />
|
</template>
|
</van-card>
|
</div>
|
</template>
|
</van-tree-select>
|
</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-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;">
|
<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-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>
|
<template #price>
|
<span style="color: #f56c6c; font-size: 1rem;">{{setItem.itemPrice}}￥</span>
|
</template>
|
<template #thumb>
|
<van-image
|
style="border: 1px solid #ebedf0;"
|
fit="contain"
|
width="100%"
|
height="100%"
|
:src="setItem.itemPhoto"
|
/>
|
</template>
|
<template #tags>
|
<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" />
|
</span>
|
<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: #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="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 @fanhui-fun="feihuDizhi" ref="dizhiRef"></dizhi>
|
</div>
|
<div>
|
<gouwuche ref="gouwucheRef" @fanhui-fun="feihuGwc"></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>
|
<van-tabbar-item name="jifen" icon="cart-circle-o">积分商城</van-tabbar-item>
|
<van-tabbar-item name="my" icon="manager">我的</van-tabbar-item>
|
</van-tabbar>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
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 feihuGwc=()=>{
|
getListGwc()
|
}
|
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>
|
