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>
|
||||||
@ -1,5 +1,21 @@
|
|||||||
import { request } from '@/utils/request'
|
import { request } from '@/utils/request'
|
||||||
|
|
||||||
export function getShippings() {
|
export function getShippings() {
|
||||||
return request('/shipping/getShippings','get')
|
return request('/shipping/getShippings', 'get')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMap(params) {
|
||||||
|
return request('/shipping/map', 'post', params)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMyCvs() {
|
||||||
|
return request('/shipping/getMyCvs', 'get')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getUserDefaultCvs() {
|
||||||
|
return request('/shipping/getUserDefaultCvs', 'get')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteLogistic(id) {
|
||||||
|
return request('/shipping/deleteLogistic', 'get', { id })
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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