Skip to content

上
上药订单生命周期升级
Commit a1a85628 authored by 琉璃丶c's avatar 琉璃丶c
Browse files
Options

1.完成订单详情所有页面 样式 

2.添加 和修改部分组件
parent 5aabfb0e
Hide whitespace changes
Inline Side-by-side
Showing with 461 additions and 18 deletions
src/assets/img/u47.svg 0 → 100644
View file @ a1a85628
<svg t="1605582752344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16315" width="200" height="200"><path d="M862.040816 192.261224c-4.702041-5.22449-9.404082-10.971429-14.106122-15.673469-76.8-76.8-198.008163-81.502041-280.555102-14.106122-5.22449 4.702041-10.971429 9.404082-15.67347 14.106122L349.518367 377.730612l-173.453061 173.453061C136.881633 590.367347 114.938776 643.134694 114.938776 699.559184c0 55.902041 21.942857 108.669388 61.12653 148.37551 40.75102 40.75102 94.563265 61.126531 148.37551 61.12653 53.812245 0 107.102041-20.37551 148.375511-61.12653l173.453061-173.453061 201.665306-201.665306c40.75102-40.75102 61.126531-94.563265 61.12653-148.375511 0-47.020408-15.673469-94.040816-47.020408-132.179592z" fill="#F9D7DF" p-id="16316"></path><path d="M646.269388 673.959184L349.518367 377.730612l201.665306-201.665306c81.502041-81.502041 214.726531-81.502041 296.228572 0 81.502041 81.502041 81.502041 214.726531 0 296.228572L646.269388 673.959184z" fill="#E5404F" p-id="16317"></path><path d="M645.746939 334.889796c-5.22449 0-9.926531-2.089796-14.106123-5.746939l-75.755102-75.755102c-7.836735-7.836735-7.836735-20.37551 0-28.212245 7.836735-7.836735 20.37551-7.836735 28.212245 0l75.755102 75.755102c7.836735 7.836735 7.836735 20.37551 0 28.212245-3.657143 4.179592-8.881633 5.746939-14.106122 5.746939zM569.991837 411.167347c-5.22449 0-9.926531-2.089796-14.106123-5.746939L480.130612 329.665306c-7.836735-7.836735-7.836735-20.37551 0-28.212245 7.836735-7.836735 20.37551-7.836735 28.212245 0l75.755102 75.755102c7.836735 7.836735 7.836735 20.37551 0 28.212245-4.179592 3.657143-9.404082 5.746939-14.106122 5.746939z" fill="#FFEEF0" p-id="16318"></path></svg>
src/assets/img/u533.svg 0 → 100644
View file @ a1a85628
<svg t="1605588774716" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33867" width="200" height="200"><path d="M0 521.386667a33.792 33.792 0 1 1 67.640889 0.113777A33.792 33.792 0 0 1 0 521.386667z m809.415111-98.759111a32.540444 32.540444 0 0 1 31.516445 32.995555c0 18.090667-14.222222 32.711111-31.516445 32.597333L482.417778 486.001778a32.540444 32.540444 0 0 1-31.573334-32.995556c0-18.090667 14.222222-32.711111 31.573334-32.597333l326.997333 2.218667zM482.417778 235.690667l270.108444 2.218666a32.540444 32.540444 0 0 1 31.516445 32.995556c0 18.090667-14.222222 32.711111-31.516445 32.597333L482.417778 301.283556a32.540444 32.540444 0 0 1-31.573334-32.995556c0-18.090667 14.222222-32.711111 31.573334-32.597333z m326.997333 377.344a32.540444 32.540444 0 0 1 31.516445 33.052444c0 18.090667-14.222222 32.824889-31.516445 32.597333l-326.997333-2.218666a32.540444 32.540444 0 0 1-31.573334-32.995556c0-18.090667 14.222222-32.711111 31.573334-32.597333l326.997333 2.161778zM810.552889 0L1024 219.477333v511.943111c0 80.440889-63.715556 146.261333-141.596444 146.261334h-71.850667c0 80.497778-63.715556 146.318222-141.596445 146.318222H141.653333C63.658667 1024 0 958.179556 0 877.681778v-146.602667c0-20.252444 16.042667-36.693333 35.726222-36.693333 19.683556 0 35.612444 16.440889 35.612445 36.693333v146.375111c0 40.220444 31.857778 73.159111 70.769777 73.159111h526.848c38.912 0 70.656-32.654222 70.769778-72.931555h-282.168889c-77.824 0-141.539556-65.820444-141.539555-146.261334V219.591111H142.108444c-38.912 0-70.769778 32.881778-70.769777 73.102222v146.090667c0 20.252444-15.928889 36.693333-35.612445 36.693333a36.010667 36.010667 0 0 1-35.612444-36.579555V292.579556c0-80.440889 63.715556-146.261333 141.596444-146.261334h174.307556C316.017778 65.820444 379.733333 0 457.614222 0h352.938667z m0.113778 72.476444h-0.227556v73.500445c0 40.220444 31.857778 73.159111 70.769778 73.159111h70.656L810.666667 72.476444z m70.769777 732.615112c38.912 0 70.769778-32.881778 70.769778-73.102223V291.555556h-72.078222c-77.937778 0-141.596444-65.820444-141.596444-146.261334v-72.817778H456.590222c-38.912 0-70.769778 32.881778-70.769778 73.159112v586.353777c0 40.220444 31.857778 73.102222 70.769778 73.102223h424.846222z" p-id="33868" fill="#1296db"></path></svg>
src/assets/img/u546.svg 0 → 100644
View file @ a1a85628
<svg t="1605589546788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12447" width="200" height="200"><path d="M23.897 132.197h662.565c11.671 0 21.158 9.546 21.158 21.321v62.559c-0.221 1.001-0.607 1.962-0.607 3.024v404.857h-20.549v1.679h-662.566v-1.679h-21.115v-470.442c0-11.774 9.445-21.318 21.115-21.318v0 0z" fill="#ea9518" p-id="12448"></path><path d="M735.846 735.761c12.054-31.639 37.873-56.494 70.096-66.836 10.659-3.415 21.965-5.298 33.678-5.298 11.755 0 23.061 1.883 33.699 5.298 32.221 10.339 58.038 35.197 70.096 66.836 2.59 6.825 4.517 13.961 5.756 21.339 1.014 6.095 1.66 12.325 1.66 18.689 0 0.897-0.105 1.756-0.121 2.612-1.401 60.647-50.62 109.6-111.091 109.6-60.47 0-109.668-48.953-111.090-109.6 0-0.857-0.121-1.717-0.121-2.612 0-6.359 0.649-12.593 1.68-18.689 1.218-7.378 3.164-14.511 5.757-21.339v0 0zM793.296 778.403c1.397 24.688 21.52 44.374 46.326 44.374 24.802 0 44.946-19.683 46.324-44.374 0.080-0.863 0.283-1.696 0.283-2.619 0-6.623-1.42-12.916-3.913-18.685-3.851-8.911-10.432-16.268-18.641-21.339-7.030-4.297-15.22-6.95-24.051-6.95-8.812 0-17.001 2.653-24.050 6.95-8.171 5.072-14.734 12.425-18.602 21.339-2.497 5.769-3.914 12.059-3.914 18.685-0.005 0.918 0.197 1.756 0.24 2.619v0 0z" fill="#ea9518" p-id="12449"></path><path d="M340.933 668.924c-7.277-6.278-15.178-11.854-23.65-16.558h403.833c3.363 0 6.363-1.349 8.777-3.351-0.023-0.489-0.143-0.933-0.143-1.428h1.74c2.231-2.494 3.711-5.765 3.711-9.404v-350.77c3.87-4.374 9.421-7.175 15.684-7.175h169.999c4.641 0 9.142 1.534 12.841 4.393 3.45 2.656 84.022 66.348 84.022 189.561v159.291c3.283 3.759 5.41 8.686 5.41 14.102v109.517c0 11.778-9.462 21.301-21.133 21.301h-23.142c0.036-0.86 0.139-1.717 0.139-2.619 0-6.336-0.544-12.549-1.397-18.683-0.953-7.28-2.396-14.429-4.42-21.341-7.778-26.33-23.020-49.422-43.246-66.843-10.006-8.62-21.235-15.82-33.412-21.335-9.018-4.091-18.545-7.319-28.515-9.403-9.154-1.965-18.661-2.985-28.412-2.985-9.727 0-19.25 1.019-28.41 2.985-9.949 2.084-19.455 5.312-28.517 9.403-12.096 5.477-23.262 12.63-33.252 21.175 0.506 0.039 0.973 0.161 1.44 0.161h-1.584c-20.222 17.419-35.461 40.516-43.242 66.843-2.049 6.913-3.488 14.060-4.442 21.341-0.831 6.129-1.397 12.346-1.397 18.683 0 0.899 0.1 1.759 0.117 2.619h-310.473c0.039-0.86 0.143-1.717 0.143-2.619 0-6.336-0.566-12.549-1.401-18.683-0.971-7.28-2.39-14.429-4.439-21.341-7.75-26.323-23.009-49.424-43.232-66.835v0 0zM772.020 447.639h201.812c-8.19-69.986-46.706-111.743-60.774-124.763h-141.038v124.763z" fill="#ea9518" p-id="12450"></path><path d="M146.842 735.761c12.052-31.639 37.873-56.494 70.095-66.836 10.619-3.415 21.925-5.298 33.678-5.298 11.753 0 23.042 1.883 33.682 5.298 32.221 10.339 58.037 35.197 70.094 66.836 2.593 6.825 4.537 13.961 5.756 21.339 1.054 6.095 1.683 12.325 1.683 18.689 0 0.897-0.102 1.756-0.121 2.612-1.398 60.647-50.62 109.6-111.089 109.6-60.47 0-109.673-48.953-111.090-109.6-0.023-0.857-0.121-1.717-0.121-2.612 0-6.359 0.646-12.593 1.686-18.689 1.228-7.378 3.169-14.511 5.747-21.339v0 0zM204.29 778.403c1.378 24.688 21.539 44.374 46.326 44.374 24.807 0 44.948-19.683 46.326-44.374 0.041-0.863 0.24-1.696 0.24-2.619 0-6.623-1.415-12.916-3.89-18.685-3.869-8.911-10.433-16.268-18.621-21.339-7.054-4.297-15.22-6.95-24.054-6.95-8.835 0-16.978 2.653-24.032 6.95-8.206 5.072-14.795 12.425-18.639 21.339-2.496 5.769-3.914 12.059-3.914 18.685-0.010 0.918 0.217 1.756 0.256 2.619v0 0z" fill="#ea9518" p-id="12451"></path><path d="M195.047 646.948c-0.464 0.187-0.889 0.453-1.377 0.638-3.284 1.514-6.567 3.024-9.724 4.779-8.475 4.701-16.359 10.281-23.63 16.558-20.243 17.412-35.483 40.512-43.244 66.836-2.065 6.913-3.487 14.064-4.46 21.343-0.81 6.132-1.397 12.346-1.397 18.686 0 0.897 0.142 1.756 0.142 2.614h-44.582c-11.673 0-21.114-9.523-21.114-21.3v-109.519c0-0.206 0.061-0.429 0.061-0.635h149.323z" fill="#ea9518" p-id="12452"></path></svg>
src/assets/img/u90.svg 0 → 100644
View file @ a1a85628
<svg t="1605584423913" class="icon" viewBox="0 0 1041 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22349" width="200" height="200"><path d="M819.415076 783.586486c135.91783-155.327169 128.626213-391.570298-20.799467-537.638688-143.445506-139.74724-365.892267-147.353603-518.071975-25.494428l538.871442 563.133116zM228.951513 270.786506c-134.396557 155.405855-126.659051 390.39 22.242053 535.881356 142.44881 139.196435 364.003791 147.222458 516.262186 26.937015L228.951513 270.786506z" fill="#7dc5eb" p-id="22350"></path></svg>
src/assets/styles/common.scss
View file @ a1a85628
......@@ -246,4 +246,34 @@ body{
line-height: 50px;
color: #969799;
}
.order-type-tip-cold {
border-radius: 10px;
color: $orderCold;
border: 1px solid $orderCold;
display: inline-block;
text-align: center;
font-size: 10px;
min-width:20px;
}
.order-type-tip-return {
border-radius: 10px;
color: $orderReturn;
border: 1px solid $orderReturn;
display: inline-block;
text-align: center;
font-size: 10px;
min-width:20px;
}
.order-type-tip-jm {
border-radius: 10px;
color: $orderJm;
border: 1px solid $orderJm;
display: inline-block;
font-size: 10px;
text-align: center;
min-width:20px;
}
/*-----------公共样式---------------------------结束*/
src/assets/styles/variable.scss
View file @ a1a85628
......@@ -29,3 +29,8 @@ $arrowC:#747782;
$txtBlack:#23262A;
$txtGray:#8792A4;
//订单状态颜色
$orderReturn:#D9001B;
$orderCold:#02a7f0;
$orderJm:#4b7902;
src/views/myOrder/components/goodsSimpleItem.vue 0 → 100644
View file @ a1a85628
<template>
<div class="goods-simple-content">
<div class="goods-company">
<span class="company-name">上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司</span>
<span class="state-type order-type-tip-cold">冷</span>
</div>
<div class="goods-info">
<van-icon :name="goodsIcon.pill" />
<div class="goods-info-text">
<div class="goods-name">【132521】阿西匹林/0.25g*200s/浙江浙江浙江浙江浙江浙江</div>
<div class="goods-num-price">
¥<span >10.5</span>
共8件
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'goodsSimpleItem',
data () {
return {
goodsIcon: {
pill: require('@/assets/img/u47.svg'),
normal: require('@/assets/img/u90.svg')
}
}
}
}
</script>
<style lang="scss" scoped>
.goods-simple-content {
border-bottom: 1px solid #eeeeee;
padding:0 10px 5px;
.goods-company {
margin-top:5px;
display: flex;
align-items: center;
.company-name{
font-size: 12px;
font-weight:650;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 70%;
display: inline-block;
}
.state-type {
display: inline-block;
line-height: 16px;
transform: scale(0.85);
height: 16px;
padding: 0 6px;
margin-left: 15px;
}
}
.goods-info {
display: flex;
margin-top: 10px;
i {
font-size:30px;
}
.goods-info-text {
flex: 1;
width: 80%;
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods-num-price {
display: flex;
margin: 6px 0 0 10px;
span {
flex: 1;
color:red;
}
}
}
}
}
</style>
src/views/myOrder/components/invoiceSimpleItem.vue 0 → 100644
View file @ a1a85628
<template>
<div class="invoice-simple-content">
<div class="invoice-company">
上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司上药控股新药分公司
</div>
<div class="invoice-info"><span class="info-key">发票金额:</span><span class="info-value">¥<span>377,889.0</span></span></div>
<div class="invoice-info"><span class="info-key">发票号:</span><span class="info-value">1123123123</span></div>
<div class="invoice-info"><span class="info-key">发票日期:</span><span class="info-value">377,889.0</span></div>
</div>
</template>
<script>
export default {
name: 'invoiceSimpleItem'
}
</script>
<style lang="scss" scoped>
.invoice-simple-content {
border-bottom: 1px solid #eeeeee;
padding:0 10px 5px;
.invoice-company {
font-size: 12px;
font-weight:650;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 70%;
display: inline-block;
}
.invoice-info {
margin-top: 5px;
.info-key {
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #555555;
text-align: right;
width: 53px;
display: inline-block;
}
.info-value {
margin-left:20px;
font-size: 12px;
color: #555555;
span {
color:#D9001B;
font-size: 14px;
margin-left:6px;
}
}
}
}
</style>
src/views/myOrder/components/orderState.vue
View file @ a1a85628
......@@ -12,22 +12,20 @@ export default {
},
methods: {
calDashLineWidth() {
// let layout = document.getElementById('orderStateLayout')
let lineEle = document.getElementsByClassName('state-line')
let width = '88%'
switch (lineEle.length) {
case 2:
break
case 3:
width = '84%'
break
case 4:
width = '80%'
break
}
for (let index = 0; index < lineEle.length; index++) {
console.log(lineEle[index])
lineEle[index].setAttribute('style', 'width:50%')
lineEle[index].style.width = width
}
}
}
......@@ -37,13 +35,9 @@ export default {
<style lang="scss" scoped>
.order-state {
display: flex;
background-color: #16a7f0;
/deep/ .state-item {
flex: 1
}
.item-line__1 {
}
}
</style>
src/views/myOrder/components/orderStateItem.vue
View file @ a1a85628
......@@ -32,7 +32,7 @@ export default {
text-align: center;
i {
font-size: 23px;
font-size: 25px;
}
.state-icon {
position: relative;
......@@ -53,7 +53,7 @@ export default {
.state-line {
position: absolute;
top: 11px;
top: 14px;
width: 88%;
height: 1px;
background-size: 15px 3px;
......
src/views/myOrder/orderDetail.vue
View file @ a1a85628
<template>
<div class="order-detail">
<order-state>
<order-state-item text="已开单" />
<!-- 订单状态 -->
<order-state style="height: 120px;padding-top: 20px;background-color: #16a7f0;">
<order-state-item text="已开单"/>
<order-state-item text="已发货" state="normal"/>
<order-state-item text="运输中" state="select"/>
<order-state-item text="已收货" state="end"/>
</order-state>
<!-- 订单基本信息 -->
<div class="order-common order-info">
<div class="info-content">
<van-icon name="orders-o" class="order-icon info-icon"/>
<div class="info-text">
<div style="display: flex">
<span class="order-code">订单号: DDH2354323463463</span>
<span class="order-copy"><van-icon :name="icons.copy"/>复制</span>
</div>
下单时间: 2020-11-10 18:09:30
</div>
</div>
<div class="info-state">
<span class="state-type order-type-tip-return">退</span>
<span class="state-type order-type-tip-cold">冷</span>
<span class="state-type order-type-tip-jm">精麻</span>
</div>
<div class="info-arrival">
<div class="arrival-time">
<van-icon name="clock-o"/>
预计到达时间: 2020-11-13
</div>
</div>
</div>
<!-- 订单物流信息 -->
<div class="order-common order-logistics">
<div class="logistics-content">
<van-icon :name="icons.inDelivery" class="order-icon logistics-icon"/>
<div class="logistics-text">
<div style="display:flex">
<span class="logistics-speak">您的物流单：YDH4236272752430已从上海市绥德路发出 </span>
<van-icon class="logistics-arrow" name="arrow"/>
</div>
<span class="logistics-time">2020-11-10 18:09:30</span>
</div>
</div>
<div class="location-content">
<van-icon name="location-o" class="order-icon location-icon"/>
<div class="location-text">
华氏大药房 177****9133
<br/>
上海市浦东新区永春路6号
</div>
</div>
</div>
<!-- 订单商品 -->
<div class="order-common order-goods">
<div class="goods-all">
<span class="all-title">商品信息</span>
全部
<van-icon class="title-arrow" name="arrow"/>
</div>
<goods-simple-item />
<goods-simple-item />
</div>
<!-- 订单发票信息 -->
<div class="order-common order-invoice">
<div class="invoice-all">
<span class="all-title">发票信息</span>
全部
<van-icon class="title-arrow" name="arrow"/>
</div>
<invoice-simple-item />
</div>
</div>
</template>
<script>
import OrderStateItem from './components/orderStateItem'
import OrderState from './components/orderState'
import GoodsSimpleItem from './components/goodsSimpleItem'
import InvoiceSimpleItem from './components/invoiceSimpleItem'
export default {
name: 'orderDetail',
components: {OrderState, OrderStateItem},
components: {InvoiceSimpleItem, GoodsSimpleItem, OrderState, OrderStateItem},
data() {
return {}
return {
icons: {
inDelivery: require('@/assets/img/u546.svg'),
copy: require('@/assets/img/u533.svg')
}
}
},
mounted() {
// 设置标题栏关闭返回按钮
......@@ -30,14 +103,212 @@ export default {
rightClick: null
})
},
methods: {
}
methods: {}
}
</script>
<style lang="scss" scoped>
.order-detail {
.order-detail {
overflow: auto;
font-size:12px;
height: calc(100vh - 46px);
.order-common {
padding: 10px;
border-radius: 4px;
background-color: #fff;
margin: 5px 15px 1px 15px;
.order-icon {
width: 40px;
height: 40px;
font-size: 24px;
text-align: center;
line-height: 40px;
border-radius: 20px;
}
}
/*订单主信息区域*/
.order-info {
margin-top: -30px !important;
/*主信息内容*/
.info-content {
display: flex;
align-items: center;
/*主信息图标*/
.info-icon {
background-color: #c0e9fc;
color: #1296db;
}
/*主信息文本*/
.info-text {
margin-left: 8px;
flex: 1;
font-size: 12px;
font-weight: 400;
font-style: normal;
color: #7f7f7f;
/*主信息 订单号*/
.order-code {
font-size: 14px;
color: #000;
word-break: break-all;
flex: 1;
}
/*主信息 复制按钮*/
.order-copy {
font-size: 12px;
color: #555555;
display: flex;
align-items: center;
i {
color: #1296db;
font-size: 20px;
}
}
}
}
/*订单状态*/
.info-state {
margin: 10px 0 0 60px;
.state-type {
display: inline-block;
text-align: center;
font-size: 12px;
min-width: 40px;
margin: 0 4px;
}
}
/*订单到达信息*/
.info-arrival {
text-align: center;
margin: 18px 0 0 0;
.arrival-time {
background-color: #fdead0;
color: #B8741A;
font-size: 12px;
padding: 6px 10px;
text-align: center;
border-radius: 20px;
display: inline-block;
i {
vertical-align: text-bottom;
font-size: 18px;
}
}
}
}
/*订单物流信息*/
.order-logistics {
/*物流信息内容*/
.logistics-content {
display: flex;
border-bottom: 1px solid #eeeeee;
padding-bottom: 6px;
/*物流图标*/
.logistics-icon {
background-color: #fbdbb0;
color: #ea9518;
}
/*物流说明*/
.logistics-text {
margin-left: 8px;
color: #555555;
flex: 1;
/*文字*/
.logistics-speak {
margin-right: 20px;
font-size: 12px;
}
/*箭头*/
.logistics-arrow {
font-size: 15px;
margin-top: 1px;
}
.logistics-time {
font-size: 12px;
color: #7f7f7f;
}
}
}
.location-content {
display: flex;
margin-top: 10px;
/*物流图标*/
.location-icon {
background-color: #c0e9fc;
color: #1c9bdd;
}
/*物流说明*/
.location-text {
margin-left: 8px;
color: #555555;
flex: 1;
.location-phone {
}
.location-receive {
}
}
}
}
/*订单商品*/
.order-goods {
.goods-all {
display: flex;
align-items: center;
margin-bottom:10px;
.all-title {
flex: 1;
font-size: 14px;
color:#000;
font-weight: 400;
}
.title-arrow {
font-size: 15px;
//margin-top: 1px;
margin-left:6px;
}
}
}
/*订单发票*/
.order-invoice {
margin-bottom:20px;
.invoice-all {
display: flex;
align-items: center;
margin-bottom:10px;
.all-title {
flex: 1;
font-size: 14px;
color:#000;
font-weight: 400;
}
.title-arrow {
font-size: 15px;
//margin-top: 1px;
margin-left:6px;
}
}
}
}
</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