jsm-mall-h5-front/src/packageMaterial/pages/newSale/product.vue

<template>
  <zj-page-layout :hasFooter="true">
    <template slot="header">
      <view class="search-container">
        <u-search
          shape="round"
          :showAction="false"
          placeholder="输入分类名称进行搜索"
          v-model="keyword"
          @search="searchData"
          @clear="searchData"
        >
        </u-search>
      </view>
    </template>

    <view class="main-container">
      <view class="right-list">
        <scroll-view scroll-y style="height: 100%">
          <view class="item" v-for="(item, index) in rightList" :key="index" @click="selectId = item.goodsCode">
            <view class="name">{{ item.goodsName }}</view>
            <view class="text">代码：{{ item.goodsCode }}</view>
            <view class="text">师傅库存：{{ item.qty }}</view>
            <view class="bottom">
              <view class="price"
                >¥{{ item.goodsAmount | priceFilter }}<text>/{{ item.goodsUnit }}</text></view
              >
              <view
                :style="`width: 50rpx; height: 50rpx; border-radius: 50%;background: ${
                  selectId == item.goodsCode ? '#0379FF' : '#ebebeb'
                };display: flex;justify-content: center;align-items: center;color:#fff`"
                ><text>✔</text></view
              >
            </view>
          </view>
          <Loading :type="2" :loadStatus="loadStatus" :dataList="rightList" v-if="type == 'M'" />
          <view class="empty-container" v-if="type == 'P' && rightList.length < 1">
            <image src="@/packageMaterial/static/empty.jpg" mode="widthFix"></image>
            <view class="title">该产品大类下暂无可售配件商品</view>
            <view class="text">请联系网点在后台“辅材配件”-“配件资料管理”维护配件商品收费标准，再操作！</view>
          </view>
        </scroll-view>
      </view>
    </view>

    <template slot="footer">
      <view class="bottom-container">
        <u-button type="primary" text="保存" @click="submitData"></u-button>
      </view>
    </template>
  </zj-page-layout>
</template>

<script>
import { getStorage } from '@/common/utils/storage.js'
export default {
  data() {
    return {
      type: 'M',
      userMobile: '',
      orderNo: '',
      salesType: 'OUT',
      brandId: null,
      brandName: null,
      categoryId: null,
      categoryName: null,
      wbId: null, // 维保工单
      wbIsAllFee: null, // 维保工单是否包含全部费用
      wbPayType: null, // 维保工单费用支付方式
      keyword: '',
      leftList: [],
      rightList: [],
      loadStatus: 0,
      cartList: [],
      selectId: '',
      dijiIndex: 0,
      partsWebsitId: ''
    }
  },

  onLoad({
    partsWebsitId,
    dijiIndex,
    type,
    userMobile,
    orderNo,
    salesType,
    brandId,
    brandName,
    categoryId,
    categoryName,
    websitId,
    websitName,
    wbId,
    wbIsAllFee,
    wbPayType
  }) {
    this.dijiIndex = dijiIndex
    this.type = type
    this.userMobile = userMobile
    this.orderNo = orderNo
    this.categoryId = categoryId
    this.categoryName = categoryName
    this.partsWebsitId = partsWebsitId
    this.websitId = websitId
    this.websitName = websitName
    this.wbId = wbId
    this.wbIsAllFee = wbIsAllFee
    this.wbPayType = wbPayType
    uni.setNavigationBarTitle({
      title: '选择配件'
    })
    this.getRightList()
  },

  computed: {
    userInfo() {
      return getStorage('user')
    },
    idcard() {
      return this.userInfo.idCard
    }
  },

  methods: {
    // 获取右侧产品
    getRightList() {
      this.loadStatus = 1
      let url = '',
        params = {}
      url = '/app/parts/stock/exist/worker/stock/list'
      params = {
        partsAttr: 'NEW',
        identity: this.userInfo.idCard,
        partsWebsitId: this.partsWebsitId,
        websitId: this.websitId
      }

      this.$api
        .post(url, {
          pageNum: 1,
          pageSize: -1,
          partsName: this.keyword,
          ...params
        })
        .then(res => {
          this.loadStatus = 0
          console.log(res.data)
          let list = res.data.map(item => {
            return this.type === 'M'
              ? {
                  goodsId: item.normId,
                  goodsName: item.normName,
                  goodsCode: item.normCode,
                  goodsUnit: item.unit,
                  goodsAmount: item.normAmount,
                  num: 0,
                  qty: item.qty
                }
              : {
                  goodsId: item.goodsId,
                  goodsName: item.goodsName,
                  goodsCode: item.goodsId,
                  goodsUnit: item.goodsStockUnit,
                  goodsAmount: item.marketPrice,
                  normType: 'M',
                  num: 1,
                  qty: item.qty
                }
          })
          for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < this.cartList.length; j++) {
              if (list[i].goodsId == this.cartList[j].goodsId) {
                list[i].num = this.cartList[j].num
              }
            }
          }
          if (list.length < 1) {
            this.loadStatus = 2
          }
          this.rightList = list
        })
        .catch(() => {
          this.loadStatus = 2
        })
    },

    // 搜索
    searchData() {
      this.getRightList()
    },

    submitData() {
      var data = this.rightList.find(item => item.goodsCode == this.selectId)
      if (data) {
        this.$setStorage('materialSaleData', { ...data, dijiIndex: this.dijiIndex })
        this.$navToPage(
          {
            delta: 1
          },
          'navigateBack'
        )
      } else {
        this.$toast('请选择')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  background: #ffffff;
  padding: 0 20rpx 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #f7f8ff !important;
    }
    .u-search__content {
      background: #f7f8ff !important;
      height: 60rpx;
    }
  }
}
.empty-container {
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 100rpx;
  image {
    width: 300rpx;
    margin-top: 100rpx;
  }
  .title {
    font-size: 32rpx;
  }
  .text {
    margin-top: 20rpx;
    font-size: 28rpx;
    line-height: 32rpx;
    color: $sec-font;
    text-align: center;
  }
}
.main-container {
  display: flex;
  height: 100%;
  .left-list {
    width: 220rpx;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    flex-shrink: 0;
    .item {
      font-size: 28rpx;
      color: #333333;
      height: 88rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      &.current {
        color: #ffffff;
        background: $theme-color;
      }
    }
  }
  .right-list {
    flex: 1;
    background: #ffffff;
    background: #ffffff;
    height: 100%;
    box-sizing: border-box;
    .item {
      padding: 20rpx;
      border-bottom: 1px solid #f5f5f5;
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
      .text {
        font-size: 28rpx;
        color: $sec-font;
        margin-top: 12rpx;
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12rpx;
        .price {
          font-size: 28rpx;
          font-weight: 500;
          color: $minor-color;
          text {
            font-weight: normal;
            color: $sec-font;
            margin-left: 8rpx;
          }
        }
        .input {
          width: 50rpx;
          text-align: center;
          padding: 0 10px;
        }
        .ctrl {
          width: 40rpx;
          height: 40rpx;
          background-color: $theme-color;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
.bottom-container {
  display: flex;
  align-items: center;
  padding: 20rpx;
  .cart {
    flex-shrink: 0;
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    background: $theme-color;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -40rpx;
    .iconfont {
      font-size: 52rpx;
      color: #ffffff;
      font-weight: 600;
    }
  }
  .price {
    margin-left: 20rpx;
    flex: 1;
    font-size: 32rpx;
    color: $minor-color;
    font-weight: 500;
    text {
      font-weight: normal;
      color: $sec-font;
    }
  }
  .btn {
    width: 180rpx;
    // ::v-deep .u-button {
    //   height: 60rpx;
    // }
  }
}
.dialog-mark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.6);
}
.dialog-container {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  position: fixed;
  bottom: 100rpx;
  left: 0;
  padding: 30rpx;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      font-size: 32rpx;
      font-weight: 500;
    }
    .right {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: $sec-font;
      text {
        font-size: 32rpx;
        margin-right: 8rpx;
      }
    }
  }
  .list {
    max-height: 400rpx;
    overflow-y: scroll;
    margin-top: 20rpx;
    .item {
      padding: 20rpx 0;
      border-bottom: 1px solid #f5f5f5;
      &:last-child {
        border: none;
      }
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
      .text {
        font-size: 28rpx;
        color: $sec-font;
        margin-top: 12rpx;
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12rpx;
        .price {
          font-size: 28rpx;
          font-weight: 500;
          color: $minor-color;
          text {
            font-weight: normal;
            color: $sec-font;
            margin-left: 8rpx;
          }
        }
        .input {
          width: 50rpx;
          text-align: center;
          padding: 0 10px;
        }
        .ctrl {
          width: 40rpx;
          height: 40rpx;
          background-color: $theme-color;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>