parent
99cb2b8828
commit
5e2036c6ad
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<van-nav-bar title="超商取貨" left-text="返回" left-arrow @click-left="$router.replace('/checkout')" />
|
||||
<main class="main-wrap shipping-page">
|
||||
<van-collapse v-model="activeNames" accordion>
|
||||
<van-radio-group v-model="shippingId">
|
||||
<van-collapse-item title="7-ELEVEN" name="1">
|
||||
<div>
|
||||
<div class="logistic-block" v-for="v in myShipping[1]">
|
||||
<div>
|
||||
<van-radio :name="v.store_id" @click="handleChange(v)"
|
||||
>{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
|
||||
>
|
||||
</div>
|
||||
<div v-if="shippingId !== v.store_id">
|
||||
<i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<van-button plain type="success" block @click="handleGetMap(1)">+新增</van-button>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="全家" name="2">
|
||||
<div>
|
||||
<div class="logistic-block" v-for="v in myShipping[2]">
|
||||
<div>
|
||||
<van-radio :name="v.store_id" @click="handleChange(v)"
|
||||
>{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
|
||||
>
|
||||
</div>
|
||||
<div v-if="shippingId !== v.store_id">
|
||||
<i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<van-button plain type="success" block @click="handleGetMap(2)">+新增</van-button>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="萊爾富" name="3">
|
||||
<div>
|
||||
<div class="logistic-block" v-for="v in myShipping[3]">
|
||||
<div>
|
||||
<van-radio :name="v.store_id" @click="handleChange(v)"
|
||||
>{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
|
||||
>
|
||||
</div>
|
||||
<div v-if="shippingId !== v.store_id">
|
||||
<i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<van-button plain type="success" block @click="handleGetMap(3)">+新增</van-button>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="OK Mart" name="4">
|
||||
<div>
|
||||
<div class="logistic-block" v-for="v in myShipping[4]">
|
||||
<div>
|
||||
<van-radio :name="v.store_id" @click="handleChange(v)"
|
||||
>{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
|
||||
>
|
||||
</div>
|
||||
<div v-if="shippingId !== v.store_id">
|
||||
<i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<van-button plain type="success" block @click="handleGetMap(4)">+新增</van-button>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
</van-radio-group>
|
||||
</van-collapse>
|
||||
</main>
|
||||
<div ref="formContainer" :style="{ display: showForm }"></div>
|
||||
<footer class="footer-wrap footer-button">
|
||||
<a href="javascript:void(0);" class="font-md">確認</a>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
|
||||
import { getMap, getMyCvs, deleteLogistic } from "@/services/shipping";
|
||||
import { useOrderStore } from "@/store/Order";
|
||||
import { showToast } from "vant";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const orderStore = useOrderStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const showForm = ref("none");
|
||||
const formContainer = ref();
|
||||
|
||||
const activeNames = ref("1");
|
||||
const shippingId = ref("");
|
||||
|
||||
const myShipping = ref([]);
|
||||
|
||||
onMounted(async () => {
|
||||
let res = await getMyCvs();
|
||||
if (res.code === 200) {
|
||||
shippingId.value = res.data.default.store_id;
|
||||
activeNames.value = res.data.default.type;
|
||||
myShipping.value = res.data.data;
|
||||
|
||||
orderStore.initShippingData(res.data.default);
|
||||
|
||||
if (route.query.is_return == 1) {
|
||||
router.replace("/checkout");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleChange = (store) => {
|
||||
let res = orderStore.setDefaultStoreID(store);
|
||||
if (!res) {
|
||||
showToast("操作失敗");
|
||||
shippingId.value = oVal;
|
||||
}
|
||||
router.replace("/checkout");
|
||||
};
|
||||
|
||||
const handleDeleteLogistic = async (id) => {
|
||||
let res = await deleteLogistic(id);
|
||||
if (res.code === 200) {
|
||||
showToast("刪除成功");
|
||||
let res = await getMyCvs();
|
||||
if (res.code === 200) {
|
||||
shippingId.value = res.data.default.store_id;
|
||||
activeNames.value = res.data.default.type;
|
||||
myShipping.value = res.data.data;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleGetMap = async (type) => {
|
||||
let res = await getMap({ type });
|
||||
if (res.code === 200) {
|
||||
console.log(formContainer.value);
|
||||
formContainer.value.innerHTML = res.data;
|
||||
if (showForm.value === "none") {
|
||||
formContainer.value.querySelector("form").submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.van-radio {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.shipping-page {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.logistic-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
div:nth-child(2) {
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { setDefaultStoreId } from '@/services/order'
|
||||
|
||||
export const useOrderStore = defineStore('order', {
|
||||
state: () => {
|
||||
return {
|
||||
payment: {
|
||||
pay_id: null,
|
||||
pay_code: '',
|
||||
pay_fee: 0,
|
||||
},
|
||||
shipping: {
|
||||
shipping_id: null,
|
||||
shipping_code: '',
|
||||
shipping_fee: 0,
|
||||
extra_data: {
|
||||
},
|
||||
},
|
||||
goodsItems: [],
|
||||
discount: 0,
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
total_amount() {
|
||||
return this.sum_amount + this.shipping.shipping_fee + this.payment.pay_fee - this.discount
|
||||
// return this.sum_amount + this.shipping.shipping_fee + this.payment.pay_fee - this.discount
|
||||
},
|
||||
sum_amount() {
|
||||
let goods_total = this.goodsItems.reduce((total, item) => {
|
||||
return total + item.goods_price * item.goods_number
|
||||
}, 0)
|
||||
return goods_total
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async initShippingData(params) {
|
||||
this.shipping = {
|
||||
shipping_code: 'ecpay',
|
||||
extra_data: {
|
||||
type: params.type,
|
||||
store_id: params.store_id,
|
||||
store_name: params.store_name,
|
||||
store_address: params.store_address,
|
||||
store_tel: params.store_tel
|
||||
}
|
||||
}
|
||||
},
|
||||
async setDefaultStoreID(params) {
|
||||
let res = await setDefaultStoreId(params.store_id)
|
||||
if (res.code !== 200) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.shipping.extra_data = {
|
||||
type: params.type,
|
||||
store_id: params.store_id,
|
||||
store_name: params.store_name,
|
||||
store_address: params.store_address,
|
||||
store_tel: params.store_tel
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
})
|
||||
Loading…
Reference in new issue