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

<template>
  <!-- #ifdef H5 -->
  <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="left-list" v-if="type == 'M'">
        <block v-for="(item, index) in leftList" :key="index">
          <view
            class="item ellipsis"
            :class="leftCurrent == item.categoryId ? 'current' : ''"
            @tap="changeLeft(item.categoryId)"
            >{{ item.categoryName }}</view
          >
        </block>
      </view>
      <view class="right-list">
        <scroll-view scroll-y style="height: 100%">
          <view class="item" v-for="(item, index) in rightList" :key="index">
            <view class="name">{{ item.goodsName }}</view>
            <view class="text">代码：{{ item.goodsCode }}</view>
            <view class="bottom">
              <view class="price"
                >¥{{ item.goodsAmount | priceFilter }}<text>/{{ item.goodsUnit }}</text></view
              >
              <u-number-box
                min="0"
                :step="item.goodsUnit == '米' ? 1 : 1"
                :name="item.goodsId"
                v-model="item.num"
                @change="changeNum"
              >
                <view slot="minus" class="ctrl">
                  <u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
                </view>
                <text slot="input" class="input">
                  <u--input
                    :type="item.goodsUnit == '米' ? 'digit' : 'number'"
                    placeholder="0"
                    inputAlign="center"
                    border="none"
                    v-model="item.num"
                    @blur="changeNum({ name: item.goodsId, value: item.num, unit: item.goodsUnit })"
                  ></u--input>
                </text>
                <view slot="plus" class="ctrl">
                  <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
                </view>
              </u-number-box>
            </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>

    <u-transition class="dialog-mark" mode="fade" :show="isShowDialog" @tap="isShowDialog = false"></u-transition>
    <u-transition class="dialog-container" mode="slide-up" :show="isShowDialog">
      <view class="top">
        <view class="left">购物车</view>
        <view class="right" @tap="clearCart"><text class="iconfont icon-shanchu"></text>清空购物车</view>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in cartList" :key="index">
          <view class="name">{{ item.goodsName }}</view>
          <view class="bottom">
            <view class="price"
              >¥{{ item.goodsAmount | priceFilter }}<text>/{{ item.goodsUnit }}</text></view
            >
            <u-number-box
              :step="item.goodsUnit == '米' ? 1 : 1"
              :min="item.goodsUnit == '米' ? 0.1 : 1"
              :name="item.goodsId"
              v-model="item.num"
              @change="changeCartNum"
              @overlimit="overlimitFun(index)"
            >
              <view slot="minus" class="ctrl">
                <u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
              </view>
              <text slot="input" class="input">
                <u--input
                  :type="item.goodsUnit == '米' ? 'digit' : 'number'"
                  placeholder="0"
                  inputAlign="center"
                  border="none"
                  v-model="item.num"
                  @blur="changeCartNum({ name: item.goodsId, value: item.num, unit: item.goodsUnit })"
                ></u--input>
              </text>
              <view slot="plus" class="ctrl">
                <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
              </view>
            </u-number-box>
          </view>
        </view>
      </view>
    </u-transition>

    <template slot="footer">
      <view class="bottom-container">
        <view class="cart" @tap="isShowDialog = !isShowDialog">
          <text class="iconfont icon-gouwuche1"></text>
          <u-badge max="99" :value="totalNum" :offset="[1, 1]" absolute></u-badge>
        </view>
        <view class="price"><text>合计：</text>¥{{ totalPrice | priceFilter }}</view>
        <view class="btn">
          <u-button type="primary" text="提交" @click="submitData"></u-button>
        </view>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMaterial/pages/sale/product`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
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: [],
		leftCurrent: 0,
		rightList: [],
      loadStatus: 0,
      isShowDialog: false,

      cartList: [],
    }
  },

  computed: {
    totalNum() {
      // let val = 0;
      // this.cartList.forEach(item => {
      //   val = val + item.num;
      // })
      return this.cartList.length;
    },
    totalPrice() {
      let val = 0;
      this.cartList.forEach(item => {
        val = val + (item.num * (item.goodsAmount * 100) / 100);
      })
      return val;
    },
  },

  onLoad({type, userMobile, orderNo, salesType, brandId, brandName, categoryId, categoryName, websitId, websitName, wbId, wbIsAllFee, wbPayType}) {
    this.type = type;
    this.userMobile = userMobile;
    this.orderNo = orderNo;
    // this.salesType = salesType;
    // this.brandId = brandId;
    // this.brandName = brandName;
    this.categoryId = categoryId;
    this.categoryName = categoryName;
    this.websitId = websitId;
    this.websitName = websitName;
    this.wbId = wbId;
    this.wbIsAllFee = wbIsAllFee;
    this.wbPayType = wbPayType;

    uni.setNavigationBarTitle({
    　title: type == 'M' ? '选择辅材' : '选择配件'
    })
    if(type === 'M') {
      this.getLeftList();
    }else {
      this.getRightList();
    }
  },

  methods: {
    // 获取左侧分类
    getLeftList() {
    	this.$api.post('/pay/websitCategoryList', {
        pageNum: 1,
        pageSize: -1,
      }).then(res => {
    		this.leftList = res.data.records;
    		this.leftCurrent = res.data.records.length > 0 ? res.data.records[0].categoryId : 0;
    		this.getRightList();
    	})
    },

    // 获取右侧产品
    getRightList() {
    	this.loadStatus = 1;
      let url = '', params = {};
      if(this.type === 'M') {
        url = '/pay/chargeList';
        params = {
          categoryId: this.leftCurrent,
          orderId: this.orderNo,
        }
      }else {
        url = '/pay/websitGoodsList';
        params = {
          categoryName: this.categoryName,
          brand: this.brandName,
          orderId: this.orderNo,
          // normType: 'M'
        }
      }

    	this.$api.post(url, {
        pageNum: 1,
        pageSize: -1,
        name: this.keyword,
        ...params
    	}).then(res => {
    		this.loadStatus = 0;
        let list = res.data.records.map(item => {
          return this.type === 'M' ? {
            goodsId: item.normId,
            goodsName: item.normName,
            goodsCode: item.normCode,
            goodsUnit: item.unit,
            goodsAmount: item.normAmount,
            num: 0
          } : {
            goodsId: item.goodsId,
            goodsName: item.goodsName,
            goodsCode: item.goodsCode,
            goodsUnit: item.goodsSalesUnit,
            goodsAmount: item.normAmount,
            normType: item.normType,
            num: 0
          }
        });
        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;
    	})
    },

    // 切换一级菜单
    changeLeft(pid) {
    	this.leftCurrent = pid;
    	this.getRightList();
    },

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

    changeNum(e) {
      let obj = this.rightList.find((item) => item.goodsId === e.name);
      if(e.unit && e.unit != '米') {
        e.value = Math.floor(e.value);
        obj.num = Math.floor(obj.num);
      }
      // 判断对象数组中是否存在该对象
      let index = this.cartList.findIndex((item) => item.goodsId === obj.goodsId);
      // 如果是0，就删除
      if(index !== -1 && e.value == 0) {
        this.cartList.splice(index, 1);
      }
      // 如果有就替换，没有就添加
      else if (index !== -1) {
      	this.cartList.splice(index, 1, obj);
      }
      else {
        if(e.value > 0) {
          this.cartList.push(obj);
        }
      }
    },

    changeCartNum(e) {
      let obj = this.cartList.find((item) => item.goodsId === e.name);
      if(e.unit && e.unit != '米') {
        e.value = Math.floor(e.value);
        obj.num = Math.floor(obj.num);
      }
      let index = this.cartList.findIndex((item) => item.goodsId === obj.goodsId);
      this.cartList.splice(index, 1, obj);

      this.getRightList();
    },

    overlimitFun(index) {
      this.$modal({
        content: '把该产品从购物车移除？'
      }).then(() => {
        this.cartList.splice(index, 1);
        this.getRightList();
      }).catch(() => {})
    },

    clearCart() {
      this.$modal({
        content: '确定清空购物车？'
      }).then(() => {
        this.cartList = [];
        this.getRightList();
      }).catch(() => {})
    },

    submitData() {
      if(this.cartList.length < 1) return this.$toast('请选择');
      this.$setStorage('materialSaleData', {
        type: this.type,
        salesType: this.salesType,
        brandId: this.brandId,
        brandName: this.brandName,
        categoryId: this.type == 'P' ? this.categoryId : '',
        categoryName: this.type == 'P' ? this.categoryName : '',
        websitId: this.websitId,
        websitName: this.websitName,
        userMobile: this.userMobile,
        orderNo: this.orderNo,
        wbIsAllFee: this.wbIsAllFee,
        wbPayType: this.wbPayType,
        goodsList: this.cartList
      });
      this.$navToPage({
        url: `/packageMaterial/pages/sale/order`
      })
    },

  },
}

// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;
  }
}
// #endif
</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>