<template> <view class="content"> <view class="header-box"> <UniStatusBar></UniStatusBar> <view class="title flex align_center" :style="{height:(navHeight+'px')}"> <u-image src="/static/logo-h.png" width="349" height='40'></u-image> </view> </view> <view class="cbody"> <view class="body-box bg-blue"> <!-- 滚动区域 --> <view class="scroll-list"> <scrollBox v-if="list.length" :list="list"></scrollBox> </view> <!-- 保证金 --> <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 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 class="text">立即处理>></text> </view> <!-- 门店审核不通过 --> <view class="notices flex align_center" v-if="storeApply.auditStatus=='REFUSE'&&storeApply.readFlag=='0'"> <view><u-icon name="volume" color="#f2a557" :size="28" :margin-right='15'></u-icon> 门店认证资料审核不通过,请重新提交审核!</view> <text class="text" @click="toKnow">知道了</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="90" height="90"></u-image> <u-image v-else :src="avatarUrl||'/static/def_personal_avatar.png'" width="90" height="90"></u-image> </view> <view class="user-info"> <view v-if="!hasLogin" style="font-size: 40rpx;"> 请点击登录 </view> <view v-else> <view class="user-name">{{userInfo.userNameCN || userInfo.mobile}}</view> <view>{{userInfo.orgName}}</view> </view> </view> </view> <view> <text v-if="hasLogin&&userInfo&&userInfo.sysUserFlag == '0'" class="user-rz"> {{storeApply.auditStatus=='WAIT'?'认证门店审核中':'认证成为门店'}} </text> <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="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:'1em'}" :value="userInfo&&userInfo.sysUserFlag == '0'?'':'全部'"> <u-icon slot="icon" size="38" color="#066cff" style="margin-right: 0.3em;" name="order"></u-icon> </u-cell-item> </u-cell-group> <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="userInfo&&userInfo.sysUserFlag == '0' ? '' : (item.brandName +' '+item.modelName)"> <text slot="icon"></text> </u-cell-item> <view style="padding: 20upx;"> <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="vinList.length==0 && status!='loading'" mode="list"></u-empty> <u-loadmore v-if="status=='loading'" :status="status" /> </view> </u-cell-group> <view class="des" v-if="vinList.length&&hasLogin">仅展示最近5条记录,点击“全部”查看更多</view> <view class="des" v-if="!hasLogin">请登录后查看历史记录</view> </view> </view> </view> </template> <script> import { mapState, 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 { xprhStoreApplyRead } from '@/api/xprh.js' import { listLookUp, getLookUpDatas } from '@/api/data.js'; import { scanVinLogQueryRoll, getScanVinLogList, getScanGetMaxQty }from '@/api/car.js' export default { components: { scrollBox, UniStatusBar }, data() { return { status: 'loading', noDataText: '暂无数据', bondRecord: null, // 保证金 list:[], vinList: [], orderTodo: null, avatarUrl:'', navHeight: '44', scanMaxNums: 10 } }, computed: { ...mapState(['hasLogin','vuex_vinScanNums']), hasShelf(){ return this.$store.state.vuex_storeShelf }, userInfo(){ return this.$store.state.vuex_userInfo }, storeApply(){ return this.$store.state.vuex_storeAuthInfo } }, onReady() { this.getScrollLog() // 获取导航栏高度 const res = uni.getSystemInfoSync() const system = res.platform if (system === 'android') { this.navHeight = 48 } else if (system === 'ios') { this.navHeight = 44 } }, onLoad() { // 检测是否登录 this.$store.dispatch('checkLogin',()=>{ // 获取数据字典 this.getListLookUp(); // 获取支付,收款方式 this.getLookUpList('PAY_PROCUCT_TYPE', 'vuex_paymentTypeList'); // 初始化页面 this.pageInit() }) // 刷新首页数据 uni.$on("refashHome",()=>{ this.pageInit() }) }, onUnload() { uni.$off('refashHome') }, // 下拉刷新 onPullDownRefresh(){ this.pageInit() setTimeout(function () { uni.stopPullDownRefresh(); }, 1000); }, onShareAppMessage() {}, onShow() { if(this.hasLogin){ // 查询门店认证信息 this.findLastApply() } }, methods: { pageInit(){ if(this.hasLogin){ this.avatarUrl = this.userInfo.extInfo&&this.userInfo.extInfo.userExtInfo ? this.userInfo.extInfo.userExtInfo.headImage : '' // 获取扫描记录 this.getVinLog() // 非游客 if(this.userInfo.sysUserFlag == '1'){ // 查询是否有数字货架 this.getStoreShelf() }else{ // 获取扫描次数 this.$store.dispatch("getScanNums") // 获取最大扫描次数 this.getMaxQty() // 查询门店认证信息 this.findLastApply() } }else{ uni.removeStorageSync('token') } }, // 获取数据字典 getListLookUp() { const _this = this; listLookUp({ pageNo: 1, pageSize: 1000 }).then(res => { if (res.status == 200) { _this.$store.state.vuex_allLookUp = res.data; } }); }, // 或某一项字典列表,参数code getLookUpList(code, vuexKey) { getLookUpDatas({ type: code }).then(res => { if (res.status == 200) { this.$store.state[vuexKey] = res.data || []; } }); }, // 获取最大扫描数 getMaxQty(){ getScanGetMaxQty().then(res => { this.scanMaxNums = res.data || 10 this.$store.state.vuex_scanMaxNums = this.scanMaxNums }) }, // 获取最新申请门店 findLastApply(){ const mobile = this.userInfo.mobile this.$store.dispatch('getSotreAuth',mobile) }, // 知道审核不通过 toKnow(){ uni.showLoading({ title: "正在提交" }) xprhStoreApplyRead({sn:this.storeApply.applySn}).then(res => { if(res.status == 200){ this.findLastApply() } uni.hideLoading() }) }, // 待取货数量合计 shelfGetTotalWaitQty(){ shelfGetTotalWaitQty({billState:'WAIT'}).then(res => { if(res.status == 200){ this.orderTodo = res.data; } }) }, // 货架订单列表 toOrder(){ if(this.hasShelf){ uni.navigateTo({ url: "/pages/digitalShelf/orderList" }) }else{ uni.showToast({ icon:'none', title: '门店没有关联数字货架,无法使用此功能!' }) } }, // 获取上方滚动扫描记录 getScrollLog(){ scanVinLogQueryRoll({pageNo:1,pageSize:1000}).then(res => { console.log(res) this.list = res.data.list || [] }) }, // 获取当前门店扫描记录 getVinLog(){ this.vinList = [] this.status = "loading" // VISITOR:游客,EMPLOYEE:雇员 getScanVinLogList({ pageNo:1, pageSize:5, identifyType: this.userInfo.identifyType }).then(res => { this.vinList = res.data&&res.data.list || [] this.vinList = this.vinList.filter(item => item.vinCode) this.status = 'nomore' }) }, // 查询是否支持数字货架 getStoreShelf(){ findStoreShelf().then(res => { console.log(res) this.$store.state.vuex_storeShelf = res.data; if(res.data){ // 保证金查询 this.getShelfBWPayRecord() // 获取订单信息 this.shelfGetTotalWaitQty() } }) }, // 获取保证金金额 getShelfBWPayRecord(){ const data = this.$store.state.vuex_storeShelf shelfBondRecordWaitPayRecord({shelfSn: data.shelfSn, storeSn: data.storeSn}).then(res => { console.log(res,'获取保证金金额') this.bondRecord = res.data }) }, // 保证金支付 toPayBondAmount(){ }, // 去扫描 openCamera(){ if(this.hasLogin){ if(this.userInfo.sysUserFlag == '0'){ if(this.vuex_vinScanNums < this.scanMaxNums){ uni.navigateTo({ url: "/pages/scan-frame/scan-frame" }) }else{ uni.showModal({ title: '提示', content: '个人用户扫描VIN限10次/天,您的次数已用完!', confirmText: '去认证', success(res) { if(res.confirm) { uni.navigateTo({ url: '/pages/storeManage/storeAuth' }) } } }) } }else{ uni.navigateTo({ url: "/pages/scan-frame/scan-frame" }) } }else{ uni.navigateTo({ url: '/pages/login/login' }) } }, // 查看扫描记录 toAllRecord(){ if(this.userInfo.sysUserFlag == '1'){ uni.navigateTo({ url: this.hasLogin ? "/pages/vinRecord/vinRecord" : '/pages/login/login' }) } }, toUser(){ if(this.hasLogin){ // 用户详细信息 或 门店认证 uni.navigateTo({ url: this.userInfo.sysUserFlag == '1' ? '/pages/personData/personData' : '/pages/storeManage/storeAuth' }) }else{ uni.navigateTo({ url: '/pages/login/login' }) } }, toChoosePart(item){ if(this.hasShelf){ item.text = item.modelInfo uni.navigateTo({ url: "/pages/digitalShelf/choosePart?vinNumber="+item.vinCode+"&carList="+encodeURIComponent(JSON.stringify(item)) }) }else{ uni.showToast({ icon:'none', title: '门店没有关联数字货架,无法使用此功能!' }) } } } } </script> <style lang="less"> .content { margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; background-image: linear-gradient(#86defa 0%,#cdeff9 25%,#ffffff 40%); .header-box{ z-index: 5; padding: 0em 1em; background: #066cff; .title{ padding: 0; } } .cbody{ flex-grow: 1; overflow-y: auto; overflow-x: hidden; } .body-box{ padding: 0em 1em 0.8em; z-index: 4; .notices{ padding: 0.5em 0 0; font-size: 1em; view{ color: #ffaf46; } .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{ position:relative; left:0; bottom:-1rem; padding:0.8em; background: #fff; border-radius: 0.5em; box-shadow: 0.3em 0.3em 1em #c4e5ee; .userCard-info{ > view{ &:last-child{ margin-left: 0.5em; line-height: 1.5em; .user-name{ font-size: 1rem; } >view{ padding: 0.2em; } } } } .user-rz{ font-size: 0.8rem; color:#58aff5; } } } .list-box{ padding: 0 1em; overflow: auto; .des{ text-align: center; padding: 1em 0; color: #999; font-size: 0.8em; } } } </style>