Skip to content

上
上药订单生命周期升级
Commit 1dda526e authored by xiejb's avatar xiejb
Browse files
Options

Merge branch 'master' of http://gitlab.jiucaiyun.cn/sph/SH_OrderLifeCycleU

parents 763ca4b6 62bf388b
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 49 deletions
src/api/myOrder.js
View file @ 1dda526e
...@@ -26,3 +26,14 @@ export function getOrderInvoiceList(params) { ...@@ -26,3 +26,14 @@ export function getOrderInvoiceList(params) {
loading: true loading: true
}) })
} }
// 获取商品详情列表
export function getGoodInfoList(params) {
return fetch({
url: 'OrderLife/GoodsInfo',
method: 'post',
data: params,
loading: true
})
}
src/views/myOrder/goodsInfoDetail.vue → src/views/myOrder/components/goodsInfoDetail.vue
View file @ 1dda526e
<template> <template>
<div class="goods-info-detail"> <div class="goods-info-detail">
<div class="company"> <div class="company">
<div v-for="(item, index) in companys" :key="index" class="item-total"> <div v-for="(item, index) in goodList" :key="index" class="item-total">
<div class="item-header"> <!-- <div class="item-header">
<div class="item-name">{{ item.name }}</div> <div class="item-name">{{ goodList.manufacturer }}</div>
<div class="cold">冷</div> <div class="cold">冷</div>
</div> </div> -->
<div class="item-image-title"> <div class="item-image-title">
<img :src="item.icons" alt="" class="item-image" /> <img src="../../../assets/img/u47.svg" alt="" class="item-image" />
<div class="item-title">{{ item.title }}</div> <div class="item-title">
{{ goodList.goodsDesc }}{{ goodList.goodsDesc }}
</div>
</div> </div>
<div class="item-currency-amount"> <div class="item-currency-amount">
<div class="item-currency">{{ item.currency }}</div> <div class="item-currency">￥</div>
<div class="item-amount">{{ item.amount }}</div> <div class="item-amount">{{ item.price }}</div>
<div class="item-packages">{{ item.packages }}<span>{{item.packagesNumber}}</span></div> <div class="item-packages">
包装数量:<span
>{{ goodList.packageNum }}{{ goodList.unitName }}</span
>
</div>
</div> </div>
<div class="dep-line"></div>
<div class="item-orders-deliveries"> <div class="item-orders-deliveries">
<div class="item-orders">{{ item.orders }}<span>{{item.orderNumber}}</span></div> <div class="item-orders">
<div class="item-deliveris">{{ item.deliveries }}<span>{{item.deliveriesNumber}}</span></div> 订单数量:<span>{{ item.orderNumber }}</span>
</div>
<div class="item-deliveris">
配送数量:<span>{{ item.deliveriesNumber }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getGoodInfoList } from "@/api/myOrder";
export default { export default {
name: "goodsInfoDetail", name: "goodsInfoDetail",
data() { data() {
return { return {
companys: [ goodList: {}
{
name: "上药控股新药分公司",
icons: require("@/assets/img/u47.svg"),
title: "【132521】阿西匹林/0.25g*200s/浙江.....",
currency: "￥",
amount: "10.5",
packages: "包装数:",
packagesNumber:"8件/箱",
orders: "订单数:",
orderNumber:"80件",
deliveries: "配送数:",
deliveriesNumber:"80件"
},
],
}; };
}, },
methods: {
getGoodInfoListReq() {
let data = {
"sourceDb": "SHYY",
"supplierId": ["305", "879", "301"],
"clientID": ["3168"],
"mdmClientCode": "",
"ownerId": "1",
"goodsId": "",
"goodsCode": "",
"goodsName": "",
"goodsSpec": "",
"manufacturer": "",
"goodsDesc": "",
"approvalNumber": "",
"orderId": "",
"orderNo": "",
"pickingId": "",
"startDate": "2021-03-08",
"endDate": "2021-03-15",
"mdmGoodsCode": "",
"goodsPermission": "",
"pageSize": 1,
"pageNum": 10,
"order": "",
"sort": "",
};
getGoodInfoList(data)
.then((res) => {
console.log(res);
if (
res.code === 200 &&
res.data &&
res.data.code === "00000" &&
res.data.entity &&
res.data.entity.goodsInfoList &&
res.data.entity.goodsInfoList.length > 0
) {
this.goodList = res.data.entity.goodsInfoList[0];
} else {
console.log("请求失败");
}
})
.catch((err) => {
console.log(err);
});
},
},
mounted() {
this.getGoodInfoListReq();
},
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.goods-info-detail { .goods-info-detail {
width: 100%; width: 100%;
// border-bottom: 1px solid #000;
.company { .company {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
.item-total { .item-total {
...@@ -58,7 +106,7 @@ export default { ...@@ -58,7 +106,7 @@ export default {
.item-name { .item-name {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
padding-top: 30px; padding-top: 10px;
} }
} }
} }
...@@ -84,8 +132,8 @@ export default { ...@@ -84,8 +132,8 @@ export default {
display: flex; display: flex;
padding-top: 10px; padding-top: 10px;
.item-image { .item-image {
width: 25px; width: 30px;
height: 25px; height: 30px;
} }
.item-title { .item-title {
padding-left: 10px; padding-left: 10px;
...@@ -94,35 +142,42 @@ export default { ...@@ -94,35 +142,42 @@ export default {
.item-currency-amount { .item-currency-amount {
display: flex; display: flex;
padding-left: 40px; padding-left: 40px;
margin-top: 10px;
.item-amount { .item-amount {
color: red; color: red;
padding-left: 2px; padding-left: 2px;
} }
.item-packages { .item-packages {
margin-left: 140px; margin-left: 140px;
span{ span {
margin-left: 10px; margin-left: 10px;
} }
} }
} }
.item-orders{ .item-orders {
span{ span {
margin-left: 10px;
}
}
.item-orders-deliveries{
display: flex;
padding-left: 40px;
margin: 15px 0 20px 0;
.item-deliveris{
margin-left: 105px;
span{
margin-left: 10px; margin-left: 10px;
}
} }
.item-orders-deliveries {
display: flex;
padding-left: 40px;
margin: 15px 0 20px 0;
.item-deliveris {
margin-left: 95px;
span {
margin-left: 10px;
} }
}
}
.dep-line {
width: 78%;
text-align: center;
height: 1px;
border: 1px solid #eee;
margin-top: 10px;
transform: scaleY(0.5);
margin-left: 30px;
// border-radius: 50%;
} }
</style> </style>
\ No newline at end of file
src/views/myOrder/detail/goodsInfo.vue
View file @ 1dda526e
<template> <template>
<div class="goods-info"> <div class="goods-info">
<div class="order-sum"> <div class="order-sum">
<div class="sum-number">总订单数:</div> <div class="sum-number">全部商品</div>
<div class="sum-number-detail">480件</div>
<div class="sum-amount">总金额:</div>
<div class="sum-account"><span>￥</span>2,900.00</div>
</div> </div>
<div class="goods-info-details"> <div class="goods-info-details">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
...@@ -21,91 +18,97 @@ ...@@ -21,91 +18,97 @@
></goods-info-detail> ></goods-info-detail>
</van-list> </van-list>
</van-pull-refresh> </van-pull-refresh>
</div>
<div class="goods-sum">
<div class="sum-number-detail">共1个商品</div>
<div class="sum-amount">金额总计:</div>
<div class="sum-account"><span>￥</span>18,500.00</div>
</div> </div>
<goods-high-search v-model="showHighSearch" /> <goods-high-search v-model="showHighSearch" />
</div> </div>
</template> </template>
<script> <script>
import goodsInfoDetail from '../goodsInfoDetail' import goodsInfoDetail from "../components/goodsInfoDetail"
import GoodsHighSearch from '../components/goodsHighSearch' import GoodsHighSearch from "../components/goodsHighSearch"
export default { export default {
name: 'goodsInfo', name: "goodsInfo",
components: { components: {
GoodsHighSearch, GoodsHighSearch,
goodsInfoDetail goodsInfoDetail,
}, },
data() { data() {
return { return {
goodsInfos: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], goodsInfos: [],
loading: false, loading: false,
finished: false, finished: false,
// error: false, // error: false,
refreshing: false, refreshing: false,
showHighSearch: false, showHighSearch: false,
icons: { icons: {
inDelivery: require('@/assets/img/u546.svg'), inDelivery: require("@/assets/img/u546.svg"),
copy: require('@/assets/img/u533.svg') copy: require("@/assets/img/u533.svg"),
} },
} };
}, },
mounted() { mounted() {
// 设置标题栏关闭返回按钮 // 设置标题栏关闭返回按钮
this.$store.commit('setNavBar', { this.$store.commit("setNavBar", {
show: true, show: true,
leftArrow: true, leftArrow: true,
rightIcon: true, rightIcon: true,
title: '', title: "商品清单",
leftText: '商品详情', leftText: "",
leftClick: this.onBrowserBack, leftClick: this.onBrowserBack,
rightClick: this.onShowSearch rightClick: this.onShowSearch,
}) });
window.addEventListener('popstate', this.onBrowserBack, false) window.addEventListener("popstate", this.onBrowserBack, false);
}, },
destroyed() { destroyed() {
// 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件 // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
window.removeEventListener('popstate', this.onBrowserBack, false) window.removeEventListener("popstate", this.onBrowserBack, false);
}, },
methods: { methods: {
onBrowserBack() { onBrowserBack() {
this.$router.go(-1) this.$router.go(-1);
}, },
onShowSearch() { onShowSearch() {
this.showHighSearch = !this.showHighSearch this.showHighSearch = !this.showHighSearch;
}, },
onLoad() { onLoad() {
// 异步更新数据 // 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求 // setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => { setTimeout(() => {
if (this.refreshing) { if (this.refreshing) {
this.list = [] this.list = [];
this.refreshing = false this.refreshing = false;
} }
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1) this.list.push(this.list.length + 1);
} }
// 加载状态结束 // 加载状态结束
this.loading = false this.loading = false;
// 数据全部加载完成 // 数据全部加载完成
if (this.list.length >= 20) { if (this.list.length >= 20) {
this.finished = true this.finished = true;
} }
}, 1000) }, 1000);
}, },
onRefresh() { onRefresh() {
// 清空列表数据 // 清空列表数据
this.finished = false this.finished = false;
// 重新加载数据 // 重新加载数据
// 将 loading 设置为 true，表示处于加载状态 // 将 loading 设置为 true，表示处于加载状态
this.loading = false this.loading = false;
this.onLoad() this.onLoad();
} },
} },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -123,31 +126,45 @@ export default { ...@@ -123,31 +126,45 @@ export default {
padding-left: 10px; padding-left: 10px;
} }
.sum-number-detail {
padding-right: 25px;
}
.sum-account {
padding-left: 10px;
font-size: 16px;
line-height: 18px;
color: #555;
span {
font-size: 12px;
color: #666;
}
}
} }
.goods-info-details { .goods-info-details {
background-color: white; background-color: white;
width: 92%; width: 92%;
height: calc(100vh - 96px); // height: calc(100vh - 96px);
height: 120px;
margin: 0 auto; margin: 0 auto;
border-radius: 5px; border-radius: 5px;
overflow: scroll; overflow: scroll;
padding-left: 10px; padding-left: 10px;
} }
} }
.goods-sum{
width:100%;
height: 50px;
background-color: #4496EC;
z-index: 1000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
color: white;
display: flex;
line-height: 48px;
padding-left: 10px;
.sum-number-detail {
margin-right: 180px;
}
.sum-amount {
// margin-left: 100px;
margin-right: 5px;
span {
font-size: 12px;
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment