|
@@ -1,10 +1,13 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="header-box">
|
|
|
- <view class="status_bar"></view>
|
|
|
- <view class="title"><text>管配件,就用</text>修配易码通</view>
|
|
|
+ <UniStatusBar></UniStatusBar>
|
|
|
+ <view class="title">
|
|
|
+ <u-image src="/static/logo-h.png" width="349" height='40'></u-image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="body-box">
|
|
|
+ <view class="cbody">
|
|
|
+ <view class="body-box bg-blue">
|
|
|
<!-- 滚动区域 -->
|
|
|
<view class="scroll-list">
|
|
|
<scrollBox v-if="list.length" :list="list"></scrollBox>
|
|
@@ -12,17 +15,17 @@
|
|
|
<!-- 保证金 -->
|
|
|
<view class="notices flex align_center" v-if="bondRecord" @click="toPayBondAmount">
|
|
|
<view><u-icon name="volume" color="#f2a557" :size="28" :margin-right='15'></u-icon> 您有一笔保证金待支付 ¥{{bondRecord.bondAmount}}</view>
|
|
|
- <!-- <text>立即支付>></text> -->
|
|
|
+ <!-- <text class="text">立即支付>></text> -->
|
|
|
</view>
|
|
|
<!-- 待取货提醒 -->
|
|
|
<view class="notices flex align_center" v-if="!bondRecord&&orderTodo" @click="toOrder">
|
|
|
- <view><u-icon name="volume" color="#f2a557" :size="28" :margin-right='15'></u-icon> 您有待取货的货架订单哦!</view> <text>立即处理>></text>
|
|
|
+ <view><u-icon name="volume" color="#f2a557" :size="28" :margin-right='15'></u-icon> 您有待取货的货架订单哦!</view> <text class="text">立即处理>></text>
|
|
|
</view>
|
|
|
<!-- 名片 -->
|
|
|
<view class="userCard flex align_center justify_between" @click="toUser">
|
|
|
<view class="userCard-info flex align_center justify_between">
|
|
|
<view>
|
|
|
- <u-image v-if="!hasLogin" src="/static/def_personal_avatar.png" width="60" height="60"></u-image>
|
|
|
+ <u-image v-if="!hasLogin" src="/static/def_personal_avatar.png" width="90" height="90"></u-image>
|
|
|
<open-data v-else type="userAvatarUrl" class="user-photo"></open-data>
|
|
|
</view>
|
|
|
<view>
|
|
@@ -39,19 +42,24 @@
|
|
|
<u-icon name="arrow-right"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ <view class="body-box">
|
|
|
<!-- 扫描按钮 -->
|
|
|
<view class="scanButton flex align_center" @click="openCamera">
|
|
|
- <u-icon name="scan" size="40"></u-icon><text class="ml10">扫描VIN</text>
|
|
|
+ <u-icon name="scan" size="60"></u-icon><text class="ml10">扫描VIN</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center justify_center">
|
|
|
+ <u-image src="/static/banner1.png" width="645" height="504"></u-image>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ <!-- 扫描记录 -->
|
|
|
+ <view class="list-box">
|
|
|
<!-- 扫描记录 -->
|
|
|
<u-cell-group :border="false">
|
|
|
- <u-cell-item title="VIN查询历史" @click="toAllRecord" :title-style="{fontSize:'1.1em'}" :value="hasLogin?'查看全部':''">
|
|
|
- <u-icon slot="icon" size="38" v-if="hasLogin" color="#00aaff" style="margin-right: 0.3em;" name="order"></u-icon>
|
|
|
+ <u-cell-item title="VIN查询历史" @click="toAllRecord" :title-style="{fontSize:'1em'}" value="全部">
|
|
|
+ <u-icon slot="icon" size="38" color="#066cff" style="margin-right: 0.3em;" name="order"></u-icon>
|
|
|
</u-cell-item>
|
|
|
</u-cell-group>
|
|
|
- </view>
|
|
|
- <!-- 扫描记录 -->
|
|
|
- <view class="list-box">
|
|
|
<u-cell-group :border="false" v-if="hasLogin">
|
|
|
<u-cell-item v-for="item in vinList" @click="toChoosePart(item)" :key="item.id" :title="item.vinCode" :title-style="{fontSize:'1em'}" :label="item.brandName +' '+item.modelName">
|
|
|
<text slot="icon"></text>
|
|
@@ -61,9 +69,10 @@
|
|
|
<u-loadmore v-if="status=='loading'" :status="status" />
|
|
|
</view>
|
|
|
</u-cell-group>
|
|
|
- <view class="des" v-if="vinList.length&&hasLogin">仅展示最近10条记录,点击“全部”查看更多</view>
|
|
|
+ <view class="des" v-if="vinList.length&&hasLogin">仅展示最近5条记录,点击“全部”查看更多</view>
|
|
|
<view class="des" v-if="!hasLogin">请登录后查看历史记录</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -73,12 +82,14 @@
|
|
|
mapMutations,
|
|
|
} from 'vuex'
|
|
|
import scrollBox from '@/components/scrollBox.vue'
|
|
|
+ import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
|
|
|
import { shelfBondRecordWaitPayRecord, findStoreShelf, shelfGetTotalWaitQty } from '@/api/shelf.js'
|
|
|
import { listLookUp, getLookUpDatas } from '@/api/data.js';
|
|
|
import { scanVinLogQueryRoll, getScanVinLogList }from '@/api/car.js'
|
|
|
export default {
|
|
|
components: {
|
|
|
- scrollBox
|
|
|
+ scrollBox,
|
|
|
+ UniStatusBar
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -185,7 +196,7 @@
|
|
|
getVinLog(){
|
|
|
this.vinList = []
|
|
|
this.status = "loading"
|
|
|
- getScanVinLogList({pageNo:1,pageSize:10}).then(res => {
|
|
|
+ getScanVinLogList({pageNo:1,pageSize:5}).then(res => {
|
|
|
this.vinList = res.data.list || []
|
|
|
this.vinList = this.vinList.filter(item => item.vinCode)
|
|
|
this.status = 'nomore'
|
|
@@ -259,42 +270,82 @@
|
|
|
flex-direction: column;
|
|
|
background-image: linear-gradient(#86defa 0%,#cdeff9 25%,#ffffff 40%);
|
|
|
.header-box{
|
|
|
+ z-index: 5;
|
|
|
padding: 0.3em 1em;
|
|
|
- .status_bar {
|
|
|
- height: var(--status-bar-height);
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ background: #066cff;
|
|
|
.title{
|
|
|
- padding-top: 0.4em;
|
|
|
- font-size: 1.5em;
|
|
|
- color: #000;
|
|
|
- text{
|
|
|
- color: #0077fd;
|
|
|
- }
|
|
|
+ padding: 0.3em 0;
|
|
|
}
|
|
|
}
|
|
|
+ .cbody{
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
.body-box{
|
|
|
padding: 0.5em 1em;
|
|
|
+ z-index: 4;
|
|
|
.notices{
|
|
|
padding: 0.5em 0 0;
|
|
|
+ font-size: 1em;
|
|
|
view{
|
|
|
- color: #f2a557;
|
|
|
+ color: #ffaf46;
|
|
|
}
|
|
|
- text{
|
|
|
- color: #0077fd;
|
|
|
+ .text{
|
|
|
+ color: #ffffff;
|
|
|
margin-left: 1em;
|
|
|
}
|
|
|
}
|
|
|
+ .scanButton{
|
|
|
+ margin: 0.8em 0 0.5em;
|
|
|
+ padding: 0.5em;
|
|
|
+ background: #066cff;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 1.5em;
|
|
|
+ border-radius: 5em;
|
|
|
+ justify-content: center;
|
|
|
+ &:active{
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ml10{
|
|
|
+ margin-left: 0.4em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bg-blue{
|
|
|
+ position: relative;
|
|
|
+ > view{
|
|
|
+ z-index: 100;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ /* 这个伪类的作用就是一个圆弧的背景色 */
|
|
|
+ width: 130%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ /*设置水平居中*/
|
|
|
+ left: -15%;
|
|
|
+ /* 之所以left:20%,是因为width:140%,若width:160%,那么left:30%才能水平居中 */
|
|
|
+ top: -20%;
|
|
|
+ /*层叠顺序,最底层显示*/
|
|
|
+ content: '';
|
|
|
+ border-radius: 0 0 50% 50%;
|
|
|
+ /*分别对应 左上 右上 右下 左下 可以修改成其它颜色*/
|
|
|
+ background: linear-gradient(to bottom, #066cff, #1d77ff);
|
|
|
+ }
|
|
|
.userCard{
|
|
|
- margin-top: 0.8em;
|
|
|
+ position:relative;
|
|
|
+ left:0;
|
|
|
+ bottom:-1rem;
|
|
|
padding:0.8em;
|
|
|
background: #fff;
|
|
|
- border-radius: 1em;
|
|
|
- box-shadow: 0.2em 0.3em 0.8em #cdeff9;
|
|
|
+ border-radius: 0.5em;
|
|
|
+ box-shadow: 0.3em 0.3em 1em #c4e5ee;
|
|
|
.userCard-info{
|
|
|
> view{
|
|
|
&:last-child{
|
|
|
- margin-left: 0.5em;
|
|
|
+ margin-left: 1em;
|
|
|
+ line-height: 2em;
|
|
|
>view{
|
|
|
padding: 0.2em;
|
|
|
}
|
|
@@ -309,24 +360,8 @@
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
- .scanButton{
|
|
|
- margin: 0.6em 0;
|
|
|
- padding: 0.5em;
|
|
|
- background: #1283d4;
|
|
|
- color: #fff;
|
|
|
- font-size: 1.5em;
|
|
|
- border-radius: 5em;
|
|
|
- justify-content: center;
|
|
|
- &:active{
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
- .ml10{
|
|
|
- margin-left: 0.2em;
|
|
|
- }
|
|
|
}
|
|
|
.list-box{
|
|
|
- flex-grow: 1;
|
|
|
padding: 0 1em;
|
|
|
overflow: auto;
|
|
|
.des{
|