<template>
|
<div>
|
<div>
|
<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;" />
|
</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>
|
</template>
|
<template #price >
|
<span style="color: red; 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="red" name="shopping-cart-o" />
|
</template>
|
</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-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>
|
<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: red; font-size: 1rem;">{{setItem.itemPrice}}￥</span>
|
</template>
|
<template #thumb >
|
<van-image
|
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: red; 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>
|
</van-popup>
|
</div>
|
<!-- 地址弹框 -->
|
<div>
|
<dizhi :fanhuiFun="feihuDizhi" ref="dizhiRef"></dizhi>
|
</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 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)
|
|
})
|
})
|
</script>
|
