Skip to content

上
上药订单生命周期升级
Commit 9d1905a4 authored by LynnQi's avatar LynnQi
Browse files
Options

修改商品清单页面

parent 55d7158e
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 49 deletions
src/api/myOrder.js
View file @ 9d1905a4
......@@ -26,3 +26,14 @@ export function getOrderInvoiceList(params) {
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 @ 9d1905a4
<template>
<div class="goods-info-detail">
<div class="company">
<div v-for="(item, index) in companys" :key="index" class="item-total">
<div class="item-header">
<div class="item-name">{{ item.name }}</div>
<div v-for="(item, index) in goodList" :key="index" class="item-total">
<!-- <div class="item-header">
<div class="item-name">{{ goodList.manufacturer }}</div>
<div class="cold">冷</div>
</div>
</div> -->
<div class="item-image-title">
<img :src="item.icons" alt="" class="item-image" />
<div class="item-title">{{ item.title }}</div>
<div class="item-title">
{{ goodList.goodsDesc }}{{ goodList.goodsDesc }}
</div>
</div>
<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-packages">{{ item.packages }}<span>{{item.packagesNumber}}</span></div>
<div class="item-packages">
包装数量:<span
>{{ goodList.packageNum }}{{ goodList.unitName }}</span
>
</div>
</div>
<div class="dep-line"></div>
<div class="item-orders-deliveries">
<div class="item-orders">{{ item.orders }}<span>{{item.orderNumber}}</span></div>
<div class="item-deliveris">{{ item.deliveries }}<span>{{item.deliveriesNumber}}</span></div>
<div class="item-orders">
订单数量:<span>{{ item.orderNumber }}</span>
</div>
<div class="item-deliveris">
配送数量:<span>{{ item.deliveriesNumber }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getGoodInfoList } from "@/api/myOrder";
export default {
name: "goodsInfoDetail",
data() {
return {
companys: [
{
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件"
},
],
goodList: {}
};
},
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>
<style scoped lang="scss">
.goods-info-detail {
width: 100%;
// height: 100px;
// border-bottom: 1px solid #000;
.company {
border-bottom: 1px solid #eee;
......@@ -58,7 +108,7 @@ export default {
.item-name {
font-size: 14px;
font-weight: 700;
padding-top: 30px;
padding-top: 10px;
}
}
}
......@@ -94,35 +144,42 @@ export default {
.item-currency-amount {
display: flex;
padding-left: 40px;
margin-top: 10px;
.item-amount {
color: red;
padding-left: 2px;
}
.item-packages {
margin-left: 140px;
span{
margin-left: 10px;
span {
margin-left: 10px;
}
}
}
.item-orders{
span{
margin-left: 10px;
}
.item-orders {
span {
margin-left: 10px;
}
}
.item-orders-deliveries{
display: flex;
padding-left: 40px;
margin: 15px 0 20px 0;
.item-deliveris{
.item-orders-deliveries {
display: flex;
padding-left: 40px;
margin: 15px 0 20px 0;
.item-deliveris {
margin-left: 105px;
span{
margin-left: 10px;
}
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>
\ No newline at end of file
src/views/myOrder/detail/goodsInfo.vue
View file @ 9d1905a4
<template>
<div class="goods-info">
<div class="order-sum">
<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 class="sum-number">全部商品</div>
</div>
<div class="goods-info-details">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
......@@ -21,91 +18,97 @@
></goods-info-detail>
</van-list>
</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>
<goods-high-search v-model="showHighSearch" />
</div>
</template>
<script>
import goodsInfoDetail from '../goodsInfoDetail'
import GoodsHighSearch from '../components/goodsHighSearch'
import goodsInfoDetail from "../components/goodsInfoDetail";
import GoodsHighSearch from "../components/goodsHighSearch";
export default {
name: 'goodsInfo',
name: "goodsInfo",
components: {
GoodsHighSearch,
goodsInfoDetail
goodsInfoDetail,
},
data() {
return {
goodsInfos: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
goodsInfos: [1],
loading: false,
finished: false,
// error: false,
refreshing: false,
showHighSearch: false,
icons: {
inDelivery: require('@/assets/img/u546.svg'),
copy: require('@/assets/img/u533.svg')
}
}
inDelivery: require("@/assets/img/u546.svg"),
copy: require("@/assets/img/u533.svg"),
},
};
},
mounted() {
// 设置标题栏关闭返回按钮
this.$store.commit('setNavBar', {
this.$store.commit("setNavBar", {
show: true,
leftArrow: true,
rightIcon: true,
title: '',
leftText: '商品详情',
title: "商品清单",
leftText: "",
leftClick: this.onBrowserBack,
rightClick: this.onShowSearch
})
window.addEventListener('popstate', this.onBrowserBack, false)
rightClick: this.onShowSearch,
});
window.addEventListener("popstate", this.onBrowserBack, false);
},
destroyed() {
// 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
window.removeEventListener('popstate', this.onBrowserBack, false)
window.removeEventListener("popstate", this.onBrowserBack, false);
},
methods: {
onBrowserBack() {
this.$router.go(-1)
this.$router.go(-1);
},
onShowSearch() {
this.showHighSearch = !this.showHighSearch
this.showHighSearch = !this.showHighSearch;
},
onLoad() {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
if (this.refreshing) {
this.list = []
this.refreshing = false
this.list = [];
this.refreshing = false;
}
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) {
this.finished = true
this.finished = true;
}
}, 1000)
}, 1000);
},
onRefresh() {
// 清空列表数据
this.finished = false
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = false
this.onLoad()
}
}
}
this.loading = false;
this.onLoad();
},
},
};
</script>
<style scoped lang="scss">
......@@ -123,31 +126,45 @@ export default {
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 {
background-color: white;
width: 92%;
height: calc(100vh - 96px);
// height: calc(100vh - 96px);
height: 120px;
margin: 0 auto;
border-radius: 5px;
overflow: scroll;
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>
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