index.vue
2.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!-- 运费查询页 -->
<template>
<!-- 自定义头部 -->
<view class="navHead"><UniNav :title="title" @goBack="goBack"></UniNav></view>
<!-- end -->
<!-- 列表 -->
<view class="pageBox freightBox">
<!-- 地址 -->
<UniAddress ref="address" @handleCity="handleCity"></UniAddress>
<!-- end -->
<!-- 重量、体积计算 -->
<view class="boxBg">
<GoodsInfo ref="goods"></GoodsInfo>
</view>
<!-- end -->
<!-- 查询按钮 -->
<view class="btnBox"
><button
class="btn-default"
:class="isCityId ? '' : 'btn-forbid'"
@click="handleSubmit"
>
立即查询
</button></view
>
<!-- end -->
<!-- 查询结果 -->
<Result :baseData="baseData.value" v-if="isShow"></Result>
<!-- end -->
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive } from "vue";
// 接口 api
import { calculateFreight } from "@/pages/api/freight.js";
// 导入组件
// 导航组件
import UniNav from "@/components/uni-nav/index.vue";
// 地址选择组件
import UniAddress from "./components/address.vue";
// 物品信息组件
import GoodsInfo from "@/components/uni-goods/index.vue";
// 查询结果
import Result from "./components/result.vue";
// ------定义变量------
const title = ref("运费查询");
const isShow = ref(false);//是否显示查询结果
let baseData = reactive({});//储存数据
const goods = ref(); //定义子组件的ref,可以调取子组件的值
const address = ref(); //定义子组件的ref,可以调取子组件的值
const isCityId = ref(false);
// ------定义方法------
// 立即查询
const handleSubmit = async () => {
// 显示查询结果
const senderCountyId = address.value.mailCity.areaId; // 寄件id
const receiverCountyId = address.value.consigneeCity.areaId; // 收件id
const goodData = goods.value;
if (!senderCountyId) {
return uni.showToast({
title: "请选择寄件城市",
duration: 1000,
icon: "none",
});
}
if (!receiverCountyId) {
return uni.showToast({
title: "请选择收件城市",
duration: 1000,
icon: "none",
});
}
isShow.value = true;
let data = {
senderCountyId: senderCountyId,
receiverCountyId: receiverCountyId,
volume: goodData.volume === 0 ? 1 : goodData.volume * 1000000,
weight: goodData.weight,
measureLong: goodData.measureLong,
measureWidth: goodData.measureWidth,
measureHigh: goodData.measureHigh,
};
const res = await calculateFreight(data);
if (res.code === 200) {
baseData.value = {
volumeValue: goodData.volume,
...res.data,
};
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: "none",
});
}
};
// 是否选择了寄件地址和收件地址
const handleCity = (val) => {
isCityId.value = val;
};
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: "/pages/index/index",
});
};
</script>
<style src="./index.scss" lang="scss" scoped></style>