<template>
|
<div>
|
<van-popup v-model:show="show" position="bottom" :style="{ height: '100%' }">
|
<van-nav-bar
|
title="我的订单"
|
left-text="返回"
|
left-arrow
|
@click-left="show = false"
|
/>
|
<div style="padding: 10px;">
|
<van-tabs v-model:active="active">
|
<van-tab :name="0" title="待发货"></van-tab>
|
<van-tab :name="1" title="已发货"></van-tab>
|
<van-tab :name="2" title="已签收"></van-tab>
|
<van-tab :name="-1" title="已取消"></van-tab>
|
</van-tabs>
|
<div class="parent " v-for="(order,index) in orderList" :key="index">
|
<div class="parentzi" v-for="(item) in order.items" :key="item.id">
|
<div>
|
<van-image
|
fit="contain"
|
width="100%"
|
height="3.5rem"
|
:src="item.itemPhoto"
|
/>
|
</div>
|
<div style="padding-left: 10px;">
|
<div style="height: 2rem; line-height: 2rem; color: #409eff;">{{item.itemName}}x{{item.itemCount}}</div>
|
|
<div style="height: 2rem;">
|
<van-row>
|
<van-col :span="12" style="color: #f56c6c;">￥{{Number(item.itemPrice) * Number(item.itemCount)}}</van-col>
|
</van-row>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div style="height: 2rem; padding-left: 10px;">
|
<van-row style="color: #e6a23c;">
|
<van-icon size="20px" color="#E6A23C" name="free-postage" />{{order.recvName}}-{{order.recvMobile}}-{{ order.recvAddress}}
|
</van-row>
|
</div>
|
<div style="height: 2rem; padding-left: 10px;">
|
<van-row>
|
<van-col :span="12" style="padding-left: 10px; color: #f56c6c;">
|
合计：{{funheji(order)}}
|
</van-col>
|
<van-col :span="12" v-if="order.orderStatus === 0" style="text-align: right;padding-right: 20px; color: #909399;">
|
<span @click="quxiao(order)">取消</span>
|
</van-col>
|
</van-row>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import { ajaxPost } from '@/utils/axios'
|
import { userInfoStore } from '@/stores/userInfo'
|
import { watch } from 'vue'
|
import { Dialog, Toast } from 'vant'
|
const userInfo = userInfoStore()
|
const show=ref(false)
|
const active=ref(0)
|
const orderList=ref(<any>[])
|
const openShow=()=>{
|
show.value=true
|
getOrders()
|
}
|
const quxiao=(item:any)=>{
|
Dialog.confirm({
|
title: '提示',
|
message:
|
'您确认要取消该条订单',
|
})
|
.then(() => {
|
const pasm={
|
code:item.code,
|
id:item.id,
|
orderStatus:-1
|
}
|
ajaxPost('/eshop/order/update',pasm).then((re:any)=>{
|
console.log(re)
|
Toast.success('订单取消成功')
|
getOrders()
|
})
|
})
|
.catch(() => {
|
Toast('已取消操作')
|
})
|
|
}
|
const getOrders=()=>{
|
const pasm=`page=0&size=0&wherecondition=patient_code=\'${userInfo.patient.patientInfo.code}\' and order_status=${active.value}`
|
ajaxPost('/eshop/order/list',pasm).then((re:any)=>{
|
console.log(re)
|
orderList.value=re.list
|
})
|
|
}
|
watch(()=>active.value,()=>{
|
getOrders()
|
})
|
const funheji=(row:any)=>{
|
let numb=0
|
row.items.forEach((e:any)=>{
|
numb+= Number(e.itemPrice)*Number(e.itemCount)
|
})
|
return numb
|
}
|
defineExpose({
|
openShow
|
})
|
</script>
|
<style>
|
.parent {
|
border: 1px solid #cdd0d6;
|
border-radius: 10px;
|
margin-top: 10px;
|
}
|
|
.parentzi {
|
padding-top: 10px;
|
padding-left: 5px;
|
height: 4rem;
|
display: grid;
|
grid-template-columns: minmax(30%, 30%) 1fr;
|
}
|
|
</style>
|
