<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>
|
