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

<template>
  <zj-page-layout :hasFooter="true">
    <view class="form-container">
      <!-- <view class="item" @tap="isShowBrandDialog = true">
        <view class="label"><text>*</text>品牌</view>
        <view class="picker">
          <text class="value" v-if="brand">{{brand.brandName}}</text>
          <text class="placeholder" v-else>请选择</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view> -->
      <view class="item" v-if="type == 'P'" @tap="isShowCategoryDialog = true">
        <view class="label"><text>*</text>产品大类</view>
        <view class="picker">
          <text class="value" v-if="category">{{ category.name }}</text>
          <text class="placeholder" v-else>请选择</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
      <!-- <view class="item">
        <view class="label"><text>*</text>销售方式</view>
        <u-radio-group v-model="salesType">
          <u-radio shape="circle" label="外购" :name="'OUT'"></u-radio>
          <u-radio shape="circle" label="自有仓库" :name="'OWN'"></u-radio>
        </u-radio-group>
      </view> -->
      <u-gap height="10" bgColor="#F7F8FF"></u-gap>
      <view class="item">
        <view class="label"><text>*</text>客户电话</view>
        <!-- :readonly="hasOid" -->
        <u--input :maxlength="11" placeholder="请输入" border="none" inputAlign="right" v-model="userMobile"></u--input>
      </view>
      <view class="item">
        <view class="label">工单单号</view>
        <u--input
          :readonly="!!hasOid"
          placeholder="请输入"
          border="none"
          inputAlign="right"
          v-model="orderNo"
        ></u--input>
      </view>
      <view class="item" @tap="hasOid ? '' : (isShowWebsitDialog = true)">
        <view class="label"><text>*</text>所属网点</view>
        <view class="picker">
          <text class="value" v-if="websit">{{ websit.name }}</text>
          <text class="placeholder" v-else>请选择工单所属网点</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <!-- <u-button
          text="历史记录"
          @click="$navToPage({ url: `/packageMaterial/pages/sale/orderList?type=${type}` })"
        ></u-button> -->
        <u-button type="primary" text="选择产品" @click="toChooseProduct"></u-button>
      </view>
    </template>

    <zjDialogPicker
      ref="brandDialog"
      :isShow="isShowBrandDialog"
      :multiple="false"
      :styleType="2"
      :title="'品牌'"
      :list="brandList"
      :keyName="'brandName'"
      @cancel="isShowBrandDialog = false"
      @confirm="confirmBrandDialog"
    >
    </zjDialogPicker>

    <zjDialogPicker
      ref="categoryDialog"
      :isShow="isShowCategoryDialog"
      :multiple="false"
      :styleType="2"
      :title="'产品大类'"
      :list="categoryList"
      :keyName="'name'"
      @cancel="isShowCategoryDialog = false"
      @confirm="confirmCategoryDialog"
    >
    </zjDialogPicker>

    <zjDialogPicker
      ref="websitDialog"
      :isShow="isShowWebsitDialog"
      :multiple="false"
      :styleType="2"
      :title="'所属网点'"
      :list="websitList"
      :keyName="'name'"
      @cancel="isShowWebsitDialog = false"
      @confirm="confirmWebsitDialog"
    >
    </zjDialogPicker>
  </zj-page-layout>
</template>

<script>
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'

export default {
  components: {
    zjDialogPicker
  },

  data() {
    return {
      hasOid: false,
      wbId: null, // 维保工单
      wbIsAllFee: null, // 维保工单是否包含全部费用
      wbPayType: null, // 维保工单费用支付方式

      type: 'M',
      userMobile: '',
      orderNo: '',
      salesType: 'OUT',
      brand: null,
      brandList: [],
      isShowBrandDialog: false,
      category: null,
      categoryList: [],
      isShowCategoryDialog: false,
      websit: null,
      websitList: [],
      isShowWebsitDialog: false
    }
  },

  onLoad({ type, oid = '' }) {
    this.type = type
    this.hasOid = oid
    uni.setNavigationBarTitle({
      title: type == 'M' ? '辅材收款' : '配件收款'
    })
    this.getBrandList()
    this.getWebsitList()
    if (type == 'P') {
      this.getCategoryList()
    }
    if (this.hasOid) {
      this.$api
        .post('/pg/order/base/detail', {
          orderBaseId: oid
        })
        .then(res => {
          const data = res.data
          this.orderNo = oid
          this.userMobile = data.userMobile
          this.websit = {
            websitId: data.websitId,
            name: data.websitName
          }
          if (data.pgOrderProducts && data.pgOrderProducts.length > 0) {
            this.brand = {
              id: data.pgOrderProducts[0].brandId,
              brandName: data.pgOrderProducts[0].brandName
            }
          }
          this.wbId = data.rpProjectRepairId || ''
          this.wbIsAllFee = data.isAllFee || ''
          this.wbPayType = data.feePayMethod || ''
        })
    }
  },

  methods: {
    getBrandList() {
      this.$api.post('/pay/getBrand').then(res => {
        this.brandList = res.data
      })
    },

    getCategoryList() {
      this.$api.post('/pay/getCategoryList').then(res => {
        this.categoryList = res.data
      })
    },

    getWebsitList() {
      this.$api
        .get('/user/apply/websit', {
          examineStatus: ['OK', 'EXPIRED']
        })
        .then(res => {
          this.websitList = res.data
          if (this.websitList.length == 1) {
            this.websit = this.websitList[0]
          }
        })
    },

    confirmBrandDialog(e) {
      this.brand = this.brandList[e[0]]
      this.isShowBrandDialog = false
    },

    confirmCategoryDialog(e) {
      this.category = this.categoryList[e[0]]
      this.isShowCategoryDialog = false
    },

    confirmWebsitDialog(e) {
      this.websit = this.websitList[e[0]]
      this.isShowWebsitDialog = false
    },

    toChooseProduct() {
      //  if(!this.brand) return this.$toast('请选择品牌');
      if (this.type == 'P' && !this.category) return this.$toast('请选择产品大类')
      if (!this.websit) return this.$toast('请选择所属网点')
      if (!this.userMobile) return this.$toast('请输入客户电话')
      //  if(!(/^1[3456789]\d{9}$/.test(this.userMobile)) || this.userMobile.length != 11) return this.$toast('请填写正确的客户电话');
      //  this.$navToPage({
      //    url: `/packageMaterial/pages/sale/product?type=${this.type}&brandId=${this.brand.id}&brandName=${this.brand.brandName}&categoryId=${this.type=='P'?this.category.categoryId:''}&categoryName=${this.type=='P'?this.category.name:''}&salesType=${this.salesType}&userMobile=${this.userMobile}&orderNo=${this.orderNo}&websitId=${this.websit.websitId}&websitName=${this.websit.name}&wbId=${this.wbId||''}&wbIsAllFee=${this.wbIsAllFee||''}&wbPayType=${this.wbPayType||''}`
      //  })
      this.$navToPage({
        url: `/packageMaterial/pages/sale/product?type=${this.type}&categoryId=${
          this.type == 'P' ? this.category.categoryId : ''
        }&categoryName=${this.type == 'P' ? this.category.name : ''}&userMobile=${this.userMobile}&orderNo=${
          this.orderNo
        }&websitId=${this.websit.websitId}&websitName=${this.websit.name}&wbId=${this.wbId || ''}&wbIsAllFee=${
          this.wbIsAllFee || ''
        }&wbPayType=${this.wbPayType || ''}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  background: #ffffff;
  margin-top: 20rpx;
  border-top: 1px solid #f5f5f5;
  .item {
    height: 108rpx;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    .label {
      margin-right: 30rpx;
      min-width: 200rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
    ::v-deep .u-radio-group {
      flex: unset;
      .u-radio {
        margin-left: 50rpx;
      }
    }
  }
}
</style>