|
@@ -0,0 +1,734 @@
|
|
|
+<template>
|
|
|
+ <view class="flex flex_column choosePartByVin">
|
|
|
+ <!-- 头部车辆信息 -->
|
|
|
+ <div class="flex align-center cpb_header" v-if="carInfo">
|
|
|
+ <div>
|
|
|
+ <u-image border-radius="30" :src="carInfo.icon" width="100" height="100" bg-color="#EBEBEB" ></u-image>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="flex align-center">
|
|
|
+ <div class="carTits ellipsis-two">{{modelLabel}}</div>
|
|
|
+ <!-- <div class="qhbtns flex align-center" v-if="carList.length>1" @click="openSelCarModel">
|
|
|
+ <u-image width="32" height="32" :src="`/static/${theme}/qiehuan.png`"></u-image> 切换车型
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="flex align-center">
|
|
|
+ <div>VIN码:{{vinNumber}}</div>
|
|
|
+ <div class="copyText" @click="copyVin"><span>复制</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 配件列表 -->
|
|
|
+ <div class="cpb_middle flex">
|
|
|
+ <div class="slider-bar">
|
|
|
+ <div class="tabs">
|
|
|
+ <view :class="[curLeve2 == 'all' ? 'active' : '']" @click="selLeve2('all')">
|
|
|
+ 全部
|
|
|
+ </view>
|
|
|
+ <view :class="[curLeve2 == item.id ? 'active' : '']" v-for="(item, index) in leve2Data" :key="index" @click="selLeve2(item.id)">
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-list">
|
|
|
+ <scroll-view
|
|
|
+ class="right-list-content"
|
|
|
+ scroll-y
|
|
|
+ @scrolltolower="onreachBottom">
|
|
|
+ <!-- vin适配配件 -->
|
|
|
+ <view>
|
|
|
+ <view class="nav-right-title">适配推荐</view>
|
|
|
+ <view class="nav-right-item flex" v-for="(item, index) in vinPartList" :key="item.productSn">
|
|
|
+ <view class="uni-col-2">
|
|
|
+ <u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" @click="viewImg(item)" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-col-10">
|
|
|
+ <view class="item-name">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail">
|
|
|
+ <view class="item-detail-info">
|
|
|
+ <view class="flex justify_between">
|
|
|
+ <text class="item-detail-text flex_1">{{item.code}}</text>
|
|
|
+ <text class="item-detail-text" v-if="item.affiliation=='SHELF'">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex justify_between">
|
|
|
+ <view class="item-detail-text flex_1">
|
|
|
+ <text class="item-price">¥{{item.price||0}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail-text" v-if="item.currentInven">
|
|
|
+ <u-button shape="circle" @click="addPart(item)" v-if="!item.checked" :custom-style="{width:'48upx',height:'48upx'}" type="primary" size="mini">
|
|
|
+ <u-icon name="plus" color="#fff" size="28"></u-icon>
|
|
|
+ </u-button>
|
|
|
+ <u-number-box v-else @change="updateNums" v-model="item.qty" :index="item.productSn" :min="0" :max="item.currentInven"></u-number-box>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail-text" v-if="item.affiliation=='SUPER_CATALOGUE'||!item.currentInven">
|
|
|
+ <text @click="toRuku(item)" class="phtxt">我要临配</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nav-right-item-btns flex align_center justify_between">
|
|
|
+ <view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="vinPartList&&vinPartList.length==0">
|
|
|
+ <u-empty v-if="status!='loading'" :src="`/static/nodata.png`" icon-size="180" text="暂无适配推荐" mode="list" :margin-top="30"></u-empty>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 其它配件 -->
|
|
|
+ <view class="nav-right-title" style="margin-top: 20rpx;">其它配件</view>
|
|
|
+ <view class="nav-right-item flex" v-for="(item, index) in partList" :key="item.productSn">
|
|
|
+ <view class="uni-col-2">
|
|
|
+ <u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" @click="viewImg(item)" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-col-10">
|
|
|
+ <view class="item-name">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail">
|
|
|
+ <view class="item-detail-info">
|
|
|
+ <view class="flex justify_between">
|
|
|
+ <text class="item-detail-text flex_1">{{item.code}}</text>
|
|
|
+ <text class="item-detail-text">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex justify_between">
|
|
|
+ <view class="item-detail-text flex_1">
|
|
|
+ <text class="item-price">¥{{item.price||0}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail-text" v-if="item.currentInven">
|
|
|
+ <u-button shape="circle" @click="addPart(item)" v-if="!item.checked" :custom-style="{width:'48upx',height:'48upx',background:'#1283d4'}" type="primary" size="mini">
|
|
|
+ <u-icon name="plus" color="#fff" size="28"></u-icon>
|
|
|
+ </u-button>
|
|
|
+ <u-number-box v-else @change="updateNums" v-model="item.qty" :index="item.productSn" :min="0" :max="item.currentInven"></u-number-box>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail-text" v-else>
|
|
|
+ <text @click="toRuku(item)" class="phtxt">我要临配</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nav-right-item-btns flex align_center justify_between">
|
|
|
+ <view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="partList&&partList.length==0">
|
|
|
+ <u-empty v-if="status!='loading'" :src="`/static/nodata.png`" icon-size="240" :text="noDataText" mode="list" :margin-top="150"></u-empty>
|
|
|
+ </view>
|
|
|
+ <view style="padding: 20upx;">
|
|
|
+ <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部提交按钮 -->
|
|
|
+ <div class="cpb_footer flex align-center" :class="isIphoneXup?'isIPXup':''">
|
|
|
+ <div>
|
|
|
+ <div class="cpb_cart" :style="{background: partListData.length==0?'#eee':''}" @click="openCart">
|
|
|
+ <u-badge type="error" :count="cartNums" :offset="[-4,-4]" bgColor="#FF5200"></u-badge>
|
|
|
+ <u-image width="44" height="44" :src="`/static/${theme}/icon_shopping@3x.png`"></u-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <u-button type="primary" @click="submitForm" :custom-style="{background:'#1283d4',fontSize:'32rpx'}" shape="circle">立即提交</u-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 已选配件 购物车 -->
|
|
|
+ <div class="cpb_cart-mask" v-if="showCart">
|
|
|
+ <div class="cpb_cart-box">
|
|
|
+ <div class="cpb_close flex align-center justify_center" @click="showCart=false"><u-icon name="close"></u-icon></div>
|
|
|
+ <div class="cpb_cart-tit">
|
|
|
+ 已选配件
|
|
|
+ </div>
|
|
|
+ <div class="cpb_cart-list">
|
|
|
+ <view class="nav-right-item flex" v-for="(item, index) in partListData" :key="item.productSn">
|
|
|
+ <view class="uni-col-2">
|
|
|
+ <u-image border-radius="30" :src="item.images" width="100" height="100" bg-color="#EBEBEB" ></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-col-10">
|
|
|
+ <view class="item-name">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail">
|
|
|
+ <view class="item-detail-info">
|
|
|
+ <view class="flex justify_between">
|
|
|
+ <text class="item-detail-text flex_1">{{item.code}}</text>
|
|
|
+ <text class="item-detail-text">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex justify_between">
|
|
|
+ <view class="item-detail-text flex_1">
|
|
|
+ <text class="item-price">¥{{item.price||0}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-detail-text">
|
|
|
+ <u-number-box @change="updateCartNums" v-model="item.qty" :index="'cart_'+item.productSn" :min="0" :max="item.currentInven"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getShelfProductList, getShelfProductType, queryPartCodeByVin, getShelfQueryList, saveShelfOrder } from '@/api/shelf'
|
|
|
+ import clipboard from "@/js_sdk/dc-clipboard/clipboard.js"
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ theme: '',
|
|
|
+ vinNumber: '',
|
|
|
+ leve2Data: [], // 二级菜单数据
|
|
|
+ curLeve2: '', // 当前所选二级菜单
|
|
|
+ carInfo: null,
|
|
|
+ status: 'loading',
|
|
|
+ noDataText: '暂无配件',
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0, // 列表总数
|
|
|
+ noMore: false ,// 没有更多
|
|
|
+ showCart: false, // 购物车
|
|
|
+ showSelCarModel: false, // 切换车型
|
|
|
+ carList:[], // 车型列表
|
|
|
+ partList: [], // 配件列表
|
|
|
+ partListData: [], // 已选配件
|
|
|
+ vinPartList: [],
|
|
|
+ isIphoneXup: false,
|
|
|
+ dealerPhone: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ modelLabel(){
|
|
|
+ // const data = this.carInfo
|
|
|
+ // const carModelLabel = [data.carBrand, data.vehicleSeriesNameCn, data.capacity, data.vehicleOfYear, data.vehicleNameCn +
|
|
|
+ // '(' + data.salesVersion + ')'
|
|
|
+ // ]
|
|
|
+ // return carModelLabel.join(' ')
|
|
|
+ return this.carInfo.text
|
|
|
+ },
|
|
|
+ cartNums(){
|
|
|
+ let ret = 0
|
|
|
+ this.partListData.map(item => {
|
|
|
+ ret = ret + item.qty
|
|
|
+ })
|
|
|
+ return ret
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opts) {
|
|
|
+ this.theme = getApp().globalData.theme
|
|
|
+ this.vinNumber = opts.vinNumber
|
|
|
+ this.carInfo = opts.carList?JSON.parse(decodeURIComponent(opts.carList)):null
|
|
|
+ // 获取vin 对应code
|
|
|
+ this.getCarCodeByVin()
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ const shelfInfo = this.$store.state.vuex_storeShelf
|
|
|
+ this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ var webView = this.$mp.page.$getAppWebview();
|
|
|
+ if(this.dealerPhone==''){
|
|
|
+ console.log(11)
|
|
|
+ webView.setTitleNViewButtonStyle(0,{text:"",color:"#FFFFFF"});
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ // 点击导航栏按钮
|
|
|
+ onNavigationBarButtonTap() {
|
|
|
+ if(this.dealerPhone!=''){
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.dealerPhone
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.$store.state.vuex_shelfChoosePart = []
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ viewImg(item){
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [item.images]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 复制
|
|
|
+ copyVin(){
|
|
|
+ clipboard.setText(this.vinNumber);
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: 'vin码已复制成功'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 格式化标签数据和配件分类数据一样
|
|
|
+ labelToPart(data){
|
|
|
+ let arr = []
|
|
|
+ data.map(item => {
|
|
|
+ arr.push({
|
|
|
+ id: item.id || item.productTypeSn,
|
|
|
+ label: item.name
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ getCarCodeByVin(){
|
|
|
+ queryPartCodeByVin({vinNumber:this.vinNumber}).then(res => {
|
|
|
+ console.log(res,'this.vinCode')
|
|
|
+ this.vinCode = res.data
|
|
|
+ this.getShelfProductType()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取数字货架分类作为二级分类
|
|
|
+ getShelfProductType(){
|
|
|
+ getShelfProductType({
|
|
|
+ codeList: this.vinCode,
|
|
|
+ shelfSn: this.$store.state.vuex_storeShelf.shelfSn
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res,'getShelfProductType')
|
|
|
+ this.leve2Data = this.labelToPart(res.data || [])
|
|
|
+ // 默认该车适用或全部
|
|
|
+ this.selLeve2('all')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 单击二级菜单
|
|
|
+ selLeve2 (v) {
|
|
|
+ this.pageNo = 1
|
|
|
+ this.partList = []
|
|
|
+ this.vinPartList = []
|
|
|
+ this.curLeve2 = v
|
|
|
+ if(this.vinNumber){
|
|
|
+ this.getVinShelfPartList()
|
|
|
+ }
|
|
|
+ this.getShelfProductList()
|
|
|
+ },
|
|
|
+ // 获取数字货架配件列表
|
|
|
+ getShelfProductList(){
|
|
|
+ const _this = this
|
|
|
+ let params = {
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ excludeCodeList: this.vinCode,
|
|
|
+ productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2
|
|
|
+ }
|
|
|
+ _this.status = 'loading'
|
|
|
+ getShelfProductList(params).then(res => {
|
|
|
+ console.log(res,'获取数字货架配件列表')
|
|
|
+ uni.hideLoading()
|
|
|
+ if(res.status == 200){
|
|
|
+ let list = res.data.list
|
|
|
+ if (list && list.length){
|
|
|
+ // 分页 拼接数据
|
|
|
+ if (_this.pageNo != 1) {
|
|
|
+ _this.partList = _this.partList ? _this.partList.concat(this.fiterChecked(list)) : this.fiterChecked(list)
|
|
|
+ } else {
|
|
|
+ _this.partList = this.fiterChecked(list)
|
|
|
+ }
|
|
|
+ this.total = res.data.count
|
|
|
+ if (_this.partList.length == res.data.count) {
|
|
|
+ _this.status = 'nomore'
|
|
|
+ } else {
|
|
|
+ _this.status = 'loadmore'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.partList = list || []
|
|
|
+ this.total = 0
|
|
|
+ _this.status = 'nomore'
|
|
|
+ }
|
|
|
+ _this.noDataText = '暂无配件'
|
|
|
+ }else{
|
|
|
+ _this.status = 'loadmore'
|
|
|
+ _this.partList = []
|
|
|
+ this.total = 0
|
|
|
+ _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 根据客户vin查询该车可用数字货架中的配件
|
|
|
+ getVinShelfPartList(){
|
|
|
+ let params = {
|
|
|
+ queryWord: this.queryWord,
|
|
|
+ productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2,
|
|
|
+ codeList: this.vinCode
|
|
|
+ }
|
|
|
+ getShelfQueryList(params).then(res => {
|
|
|
+ this.vinPartList = this.fiterChecked(res.data || [])
|
|
|
+ console.log(this.vinPartList)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 过滤已选择的
|
|
|
+ fiterChecked (list){
|
|
|
+ this.partListData.map(item => {
|
|
|
+ let p = list.find(k => {
|
|
|
+ return k.productSn == item.productSn
|
|
|
+ })
|
|
|
+ if (p){
|
|
|
+ p.checked = true
|
|
|
+ p.qty = item.qty
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return list
|
|
|
+ },
|
|
|
+ // 加载更多
|
|
|
+ onreachBottom () {
|
|
|
+ if(this.partList.length < this.total ){
|
|
|
+ this.pageNo++
|
|
|
+ this.getShelfProductList()
|
|
|
+ }else{
|
|
|
+ this.status = "nomore"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 打开切换车型弹窗
|
|
|
+ openSelCarModel(){
|
|
|
+ this.showSelCarModel = true
|
|
|
+ },
|
|
|
+ selCarModel(item){
|
|
|
+ this.showSelCarModel = false
|
|
|
+ this.carInfo = item
|
|
|
+ },
|
|
|
+ // 补货
|
|
|
+ toRuku(data){
|
|
|
+ this.$store.state.vuex_shelfChoosePart.push(data)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/digitalShelf/temproaryStockIn/temproaryStockIn?vinNumber='+this.vinNumber
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 添加到购物车
|
|
|
+ addPart(item){
|
|
|
+ item.checked = true
|
|
|
+ item.qty = 1
|
|
|
+ this.partListData.push({
|
|
|
+ id: item.id,
|
|
|
+ productSn: item.productSn,
|
|
|
+ name: item.name,
|
|
|
+ unit: item.unit,
|
|
|
+ price: item.price,
|
|
|
+ currentInven: item.currentInven,
|
|
|
+ code: item.code,
|
|
|
+ qty: item.qty,
|
|
|
+ images: item.images,
|
|
|
+ checked: true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 修改列表上数量
|
|
|
+ updateNums(data){
|
|
|
+ const prow = this.partList.find(item => item.productSn == data.index)
|
|
|
+ const index = this.partListData.findIndex(item => item.productSn == data.index)
|
|
|
+ // 删除
|
|
|
+ if(data.value == 0){
|
|
|
+ prow.checked = false
|
|
|
+ console.log(index,'+++')
|
|
|
+ if(index>=0){
|
|
|
+ this.partListData.splice(index,1)
|
|
|
+ }
|
|
|
+ if(this.partListData.length==0){
|
|
|
+ this.showCart = false
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.partListData[index].qty = data.value
|
|
|
+ this.partListData.splice()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击购物车修改数量
|
|
|
+ updateCartNums(data){
|
|
|
+ if(data.value == 0){
|
|
|
+ const index = this.partListData.findIndex(item => 'cart_'+item.productSn == data.index)
|
|
|
+ if(index>=0){
|
|
|
+ this.partListData.splice(index,1)
|
|
|
+ }
|
|
|
+ if(this.partListData.length==0){
|
|
|
+ this.showCart = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 同步更新配件列表上的
|
|
|
+ const prow = this.partList.find(item => 'cart_'+item.productSn == data.index)
|
|
|
+ prow.qty = data.value
|
|
|
+ prow.checked = !!data.value
|
|
|
+ },
|
|
|
+ // 打开购物车
|
|
|
+ openCart(){
|
|
|
+ if(this.partListData.length){
|
|
|
+ this.showCart=!this.showCart
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择配件'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 格式化数据
|
|
|
+ formatData(){
|
|
|
+ const partList = []
|
|
|
+ this.partListData.map(item => {
|
|
|
+ partList.push({
|
|
|
+ "productSn": item.productSn,
|
|
|
+ "totalQty": item.qty
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return partList
|
|
|
+ },
|
|
|
+ // 立即提交
|
|
|
+ submitForm(){
|
|
|
+ if(this.partListData.length==0){
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择配件'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 开始提交
|
|
|
+ const params = {
|
|
|
+ shelfOrderDetailList: this.formatData(),
|
|
|
+ vin: this.vinNumber,
|
|
|
+ vehicleModel: this.modelLabel,
|
|
|
+ vehicleLogo: this.carInfo.icon||'',
|
|
|
+ }
|
|
|
+ console.log(params,'立即提交')
|
|
|
+ saveShelfOrder(params).then(res => {
|
|
|
+ console.log(res,'saveShelfOrder')
|
|
|
+ if(res.status == 200){
|
|
|
+ // 提交成功
|
|
|
+ uni.redirectTo({
|
|
|
+ url:"/pages/digitalShelf/choosePartResult?data="+encodeURIComponent(JSON.stringify(res.data))+"&state=1"
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ // 或失败
|
|
|
+ uni.redirectTo({
|
|
|
+ url:"/pages/digitalShelf/choosePartResult?data="+encodeURIComponent(JSON.stringify({remindMessage:res.message}))+"&state=0"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.choosePartByVin{
|
|
|
+ height: 100vh;
|
|
|
+ .cpb_header{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 10rpx;
|
|
|
+ align-items: center;
|
|
|
+ > div{
|
|
|
+ padding: 10rpx;
|
|
|
+ align-items: center;
|
|
|
+ &:first-child{
|
|
|
+ padding-right: 20rpx;
|
|
|
+ }
|
|
|
+ > div{
|
|
|
+ &:first-child{
|
|
|
+ padding-right: 20rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+ color: #818b94;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .copyText{
|
|
|
+ background-color: #EBEBEB;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ color: #033692;
|
|
|
+ font-size: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .carTits{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #222222;
|
|
|
+ line-height: normal;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .qhbtns{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #0485F6;
|
|
|
+ border:2rpx solid #0485F6;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ background: rgba(88, 177, 255, 0.2);
|
|
|
+ width: 200rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cpb_middle{
|
|
|
+ flex-grow: 1;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ height: calc(100vh - 310rpx);
|
|
|
+ .slider-bar{
|
|
|
+ width: 25%;
|
|
|
+ background: #F5F6F7;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ .tabs{
|
|
|
+ > view{
|
|
|
+ border-left: 6rpx solid #F5F6F7;
|
|
|
+ padding: 30rpx 10rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666E75;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ border-color: #0485F6;
|
|
|
+ color: #0485F6;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-list{
|
|
|
+ flex-grow: 1;
|
|
|
+ background: #fff;
|
|
|
+ height: 100%;
|
|
|
+ width: 75%;
|
|
|
+ .right-list-content{
|
|
|
+ height: 100%;
|
|
|
+ .nav-right-title{
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 5upx 25upx;
|
|
|
+ }
|
|
|
+ .nav-right-item{
|
|
|
+ padding: 15upx 25upx;
|
|
|
+ border-bottom: 2rpx solid #f5f5f5;
|
|
|
+ .item-info{
|
|
|
+ padding-left: 20upx;
|
|
|
+ .item-name{
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #191919;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >image{
|
|
|
+ width: 38rpx;
|
|
|
+ height: 38rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ >text{
|
|
|
+ flex: 1;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-detail{
|
|
|
+ .item-detail-info{
|
|
|
+ padding: 10upx 0 4upx;
|
|
|
+ > view{
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ align-items: center;
|
|
|
+ .item-detail-text{
|
|
|
+ color: #999;
|
|
|
+ .phtxt{
|
|
|
+ color: #0485F6;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ .item-price{
|
|
|
+ color: #FB1E1E;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cpb_footer{
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .cpb_cart{
|
|
|
+ width: 84rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ background-color: #0485F6;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ > div{
|
|
|
+ &:last-child{
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cpb_cart-mask{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ z-index: 900;
|
|
|
+ bottom: 120rpx;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .cpb_cart-box{
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1000;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
+ max-height: 70vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .cpb_close{
|
|
|
+ position: absolute;
|
|
|
+ top: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .cpb_cart-tit{
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .cpb_cart-list{
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ overflow: auto;
|
|
|
+ flex-grow: 1;
|
|
|
+ > view{
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+ .item-name{
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .item-info{
|
|
|
+ border-bottom:2rpx solid #f8f8f8;
|
|
|
+ }
|
|
|
+ .item-detail{
|
|
|
+ .item-detail-info{
|
|
|
+ padding: 10upx 0 4upx;
|
|
|
+ > view{
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ align-items: center;
|
|
|
+ .item-detail-text{
|
|
|
+ color: #999;
|
|
|
+ .phtxt{
|
|
|
+ color: #0485F6;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ .item-price{
|
|
|
+ color: #FB1E1E;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|