opms_wechat/pages/project/create.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-22 13:56:08
 * @Description: file content
 * @FilePath: \oms\pages\project\create.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" @click="goBack()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>项目创建</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="step1" v-if="step == 1">
        <u-form :model="addForm" :rules="rules" ref="addForm" label-width="0">
          <u-form-item prop="custName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="$refs.cust.open()">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              选择客户
            </view>
            <u-input
              v-model="addForm.custName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择关联客户"
              border="none"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item prop="nboName" borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              项目名称
            </view>
            <u-input
              placeholder="输入项目名称"
              v-model="addForm.nboName"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item
            prop="nboSourceVal"
            borderBottom
            customStyle="padding:40rpx 0 30rpx"
            @click="showNboSource = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              项目来源
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择项目来源"
              v-model="addForm.nboSourceVal"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item prop="contactName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="openContactUser()">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              主要联系人
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择主要联系人"
              v-model="addForm.contactName"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">职位</view>
            <u-input
              placeholder="请输入职位"
              v-model="addForm.contactPostion"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">联系电话</view>
            <u-input
              placeholder="请输入联系电话"
              v-model="addForm.contactTelephone"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <!-- <u-form-item prop="saleName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="$refs.user.open()">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              销售工程师
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择销售工程师"
              v-model="addForm.saleName"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item> -->
          <u-form-item prop="salesVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showModel = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              销售模式
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择销售模式"
              v-model="addForm.salesVal"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="$refs.dealer.open()">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              经销商/代理商
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择经销商/代理商"
              v-model="addForm.distributorName"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item prop="productLineVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showLine = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              产品线
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择产品线"
              v-model="addForm.productLineVal"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showSource = true">
            <view class="form-label flex_l">项目预算</view>
            <u-input
              type="number"
              placeholder="输入项目预算"
              v-model="addForm.nboBudget"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item prop="isBigVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showLarge = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              是否大项目
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择是否大项目"
              v-model="addForm.isBigVal"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showEstTransDate = true">
            <view class="form-label flex_l">预计成交时间</view>
            <u-input
              :readonly="true"
              placeholder="请选择预计成交时间"
              v-model="addForm.estTransTime"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showPlanDate = true">
            <view class="form-label flex_l">计划采购时间</view>
            <u-input
              :readonly="true"
              placeholder="请选择计划采购时间"
              v-model="addForm.planPurchaseTime"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
            <view class="form-label flex_l">风险情况</view>
            <u-input
              placeholder="输入风险情况"
              v-model="addForm.riskProfile"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
            <view class="form-label flex_l">困难点</view>
            <u-input
              placeholder="输入困难点"
              v-model="addForm.difficulty"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
            <view class="form-label flex_l">竞争公司</view>
            <u-input
              placeholder="输入竞争公司"
              v-model="addForm.competitor"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showDate = true">
            <view class="form-label flex_l">介入情况</view>
            <u-input
              placeholder="输入介入情况"
              v-model="addForm.intervention"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              备注
            </view>
            <u-input
              placeholder="输入备注"
              v-model="addForm.remark"
              border="none"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
        </u-form>
      </view>
      <view class="step2" v-else-if="step == 2">
        <view class="step-tit">添加产品</view>
        <view class="add-btn" @click="$refs.product.open()">+</view>
        <view class="product-wrap">
          <view class="product-item" v-for="(v, i) in productList" :key="v.id">
            <view class="product-label flex_l">
              产品编码:
              <view class="product-val">{{ v.prodCode }}</view>
            </view>
            <view class="product-label flex_l">
              产品名称:
              <view class="product-val">{{ v.prodName }}</view>
            </view>
            <view class="product-label flex_l">
              产品类别:
              <view class="product-val">{{ v.prodClass }}</view>
            </view>
            <view class="product-label flex_l">
              产品单价:
              <view class="product-val">
                <u-input v-model="productList[i].guidPrice" clearable></u-input>
              </view>
            </view>
            <view class="product-label flex_l">
              产品数量:
              <view class="product-val">
                <u-input v-model="productList[i].prodNum" clearable></u-input>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="step3" v-else-if="step == 3">
        <u-form :model="addForm" :rules="rules" ref="addForm" label-width="0">
          <u-form-item
            prop="followTime"
            borderBottom
            customStyle="padding:40rpx 0 30rpx"
            @click="showFollowDate = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              跟进时间
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择跟进时间"
              v-model="addForm.followTime"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item
            prop="followUserName"
            borderBottom
            customStyle="padding:40rpx 0 30rpx"
            @click="$refs.allUser.open()">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              负责人员
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择负责人员"
              v-model="addForm.followUserName"
              border="none"
              suffixIcon="arrow-down"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item prop="followContent" borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              跟进内容
            </view>
            <u-input
              placeholder="请输入跟进内容"
              v-model="addForm.followContent"
              border="none"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
        </u-form>
      </view> -->
      <view class="center">
        <view class="handle-btn" v-if="step > 1" @click="previousStep">上一步</view>
        <view class="handle-btn" v-if="step < 2" @click="nextStep">下一步</view>
        <view class="handle-btn" v-if="step == 2" @click="handleAdd">保存</view>
      </view>
    </view>
    <!-- 选择下次时间 -->
    <u-datetime-picker
      v-if="showEstTransDate"
      :show="showEstTransDate"
      mode="date"
      v-model="addForm.estTransTime"
      @cancel="showEstTransDate = false"
      @confirm="pickEstTransDate"></u-datetime-picker>
    <!-- 计划采购时间 -->
    <u-datetime-picker
      v-if="showPlanDate"
      :show="showPlanDate"
      mode="date"
      v-model="addForm.planPurchaseTime"
      @cancel="showPlanDate = false"
      @confirm="pickPlanDate"></u-datetime-picker>
    <!-- 跟进时间 -->
    <u-datetime-picker
      v-if="showFollowDate"
      :show="showFollowDate"
      mode="date"
      v-model="addForm.followTime"
      @cancel="showFollowDate = false"
      @confirm="pickFollowDate"></u-datetime-picker>
    <!-- 选择客户 -->
    <select-customer ref="cust" @close="closeCust()"></select-customer>
    <!-- 选择客户联系人 -->
    <customer-contact ref="contact" @close="closeContact()"></customer-contact>
    <!-- 选择销售 -->
    <select-user ref="user" :query-params="{ roles: ['Sales', 'SalesManager'] }" @close="closeUser()"></select-user>
    <!-- 选择经销商 -->
    <select-dealer ref="dealer" @close="closeDealer()"></select-dealer>
    <!-- 选择用户 -->
    <select-user ref="allUser" @close="closeAllUser()"></select-user>
    <!-- 选择产品 -->
    <select-product ref="product" @close="closeProduct()"></select-product>
    <!-- 项目来源 -->
    <u-picker
      :show="showNboSource"
      :columns="nboSourceColumns"
      keyName="value"
      @cancel="showNboSource = false"
      @confirm="pickSource"></u-picker>
    <!-- 产品线 -->
    <u-picker
      :show="showLine"
      :columns="productLineColumns"
      keyName="value"
      @cancel="showLine = false"
      @confirm="pickLine"></u-picker>
    <!-- 销售模式 -->
    <u-picker
      :show="showModel"
      :columns="salesModelColumns"
      keyName="value"
      @cancel="showModel = false"
      @confirm="pickModel"></u-picker>
    <!-- 大项目 -->
    <u-picker
      :show="showLarge"
      :columns="yesOrNoColumns"
      keyName="value"
      @cancel="showLarge = false"
      @confirm="pickLarge"></u-picker>
    <u-notify ref="uNotify"></u-notify>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
  import { mapGetters } from 'vuex'

  import projectApi from 'api/project'
  import customerApi from '../../api/customer'
  import to from 'await-to-js'
  import SelectCustomer from 'components/SelectCustomer'
  import CustomerContact from 'components/CustomerContact'
  import SelectUser from 'components/SelectUser'
  import SelectDealer from 'components/SelectDealer'
  import SelectProduct from 'components/SelectProduct'
  export default {
    name: 'omsIndex',
    components: { SelectCustomer, CustomerContact, SelectUser, SelectDealer, SelectProduct },
    data() {
      const validateDistributor = (rule, value, callback) => {
        if ('' === value && this.form.salesModel !== '10')
          callback(
            new Error(
              this.$refs.uNotify.show({
                top: this.height + this.paddingTop + 10,
                type: 'warning',
                message: '请选择经销商/代理商',
                duration: 1000 * 3,
              })
            )
          )
        else callback()
      }
      return {
        step: 1,
        height: '',
        paddingTop: '',
        showNboSource: false, //项目来源选择
        showModel: false, //销售模式选择
        showLine: false, //产品线选择
        showLarge: false, //是否是大项目选择
        nboSourceColumns: [], //项目来源
        salesModelColumns: [], //销售模式
        productLineColumns: [], //产品线
        yesOrNoColumns: [], //是否是大项目
        showEstTransDate: false, //选择预计成交时间
        showPlanDate: false, //计划采购时间
        showFollowDate: false, //计划采购时间
        addForm: {
          nboName: '', //项目名称
          custId: '', //关联客户id
          custName: '', //关联客户
          nboSource: '', //项目来源
          nboSourceVal: '', //项目来源文字
          contactId: '', //联系人id
          contactName: '', //联系人姓名
          contactPostion: '', //联系人职位
          contactTelephone: '', //联系人电话
          saleName: '', //销售工程师
          saleId: '', //销售工程师id
          salesModel: '', //销售模式（10直销20经销30代理）
          salesVal: '', //销售模式文字
          distributorId: '', //经销商/代理商ID
          distributorName: '', //经销商/代理商名称
          productLine: '', //产品线来源
          productLineVal: '', //产品线文字
          nboBudget: '', //项目预算
          isBig: '', //是否是大项目
          isBigVal: '', //是否是大项目文字
          estTransTime: this.parseTime(new Date(), '{y}-{m}-{d}'), //预计成交时间
          planPurchaseTime: this.parseTime(new Date(), '{y}-{m}-{d}'), //计划采购时间
          riskProfile: '', //风险情况
          difficulty: '', //困难点
          competitor: '', //竞争公司
          intervention: '', //介入情况
          remark: '', //备注
          // followTime: this.parseTime(new Date(), '{y}-{m}-{d}'), //跟进时间
          // followUserId: '', //跟进用户id
          // followUserName: '', //跟进用户id
          // followContent: '', //跟进内容
        },
        rules: {
          nboName: [{ required: true, trigger: ['blur', 'change'], message: '请输入项目名称' }],
          custName: [{ required: true, trigger: ['blur', 'change'], message: '请选择关联客户' }],
          nboSourceVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择项目来源' }],
          contactName: [{ required: true, trigger: ['blur', 'change'], message: '请选择主要联系人' }],
          // saleName: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售工程师' }],
          salesModelVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售模式' }],
          distributorName: [
            { validator: validateDistributor, trigger: ['blur', 'change'], message: '请选择经销商/代理商' },
          ],
          isBigVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择是否大项目' }],
          productLineVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择产品线' }],
          // 跟进
          // followTime: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进时间' }],
          // followContent: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进内容' }],
        },
        productList: [],
      }
    },
    computed: {
      ...mapGetters(['userId', 'username']),
    },
    onLoad(option) {
      this.addForm.custId = parseInt(option.id)
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    onShow() {
      if (this.addForm.custId) {
        this.getCustomerDetail()
      }
      this.getOptions()
    },
    methods: {
      getOptions() {
        Promise.all([
          this.getDicts('proj_nbo_source'),
          this.getDicts('proj_sales_model'),
          this.getDicts('sys_product_line'),
          this.getDicts('sys_yes_no'),
        ]).then(([nboSource, salesModel, productLine, yesOrNo]) => {
          this.nboSourceColumns = [nboSource.data.values] || []
          this.salesModelColumns = [salesModel.data.values] || []
          this.productLineColumns = [productLine.data.values] || []
          this.yesOrNoColumns = [yesOrNo.data.values] || []
        })
      },
      async getCustomerDetail() {
        const [err, res] = await to(customerApi.getDetail({ ids: [this.addForm.custId] }))
        if (err) return
        if (res && res.code == 200) {
          this.addForm.custName = res.data.list[0].custName
          this.addForm.nboName = this.addForm.custName
        }
      },
      // 打开主要联系人
      openContactUser() {
        if (!this.addForm.custId) {
          this.$refs.uNotify.show({
            top: this.height + this.paddingTop + 10,
            type: 'warning',
            message: '请先选择客户',
            duration: 1000 * 3,
          })
        } else {
          this.$refs.contact.open(this.addForm.custId)
        }
      },
      // 关闭选择客户
      closeCust(user) {
        if (user) {
          this.addForm.custId = user.id
          this.addForm.custName = user.name
        }
      },
      // 经销商
      closeDealer(dealer) {
        if (dealer) {
          this.addForm.distributorId = dealer.id
          this.addForm.distributorName = dealer.name
        }
      },
      // 关闭选择客户联系人
      closeContact(user) {
        if (user) {
          this.addForm.contactId = user.id
          this.addForm.contactName = user.label
          this.addForm.contactPostion = user.postion
          this.addForm.contactTelephone = user.telephone
        }
      },
      // 关闭选择销售
      closeUser(user) {
        if (user) {
          this.addForm.saleId = user.id
          this.addForm.saleName = user.label
        }
      },
      // 全部用户
      closeAllUser(user) {
        if (user) {
          this.addForm.followUserId = user.id
          this.addForm.followUserName = user.label
        }
      },
      closeProduct(product) {
        let data = [...this.productList, ...product]
        this.productList = data
      },
      // 选择来源
      pickSource(e) {
        this.addForm.nboSource = e.value[0].key
        this.addForm.nboSourceVal = e.value[0].value
        this.showNboSource = false
      },
      // 选择产品线
      pickLine(e) {
        this.addForm.productLine = e.value[0].key
        this.addForm.productLineVal = e.value[0].value
        this.showLine = false
      },
      // 选择销售类型
      pickModel(e) {
        this.addForm.salesModel = e.value[0].key
        this.addForm.salesVal = e.value[0].value
        this.showModel = false
      },
      // 是否大项目
      pickLarge(e) {
        this.addForm.isBig = e.value[0].key
        this.addForm.isBigVal = e.value[0].value
        this.showLarge = false
      },
      // 选择预计成交时间
      async pickEstTransDate(e) {
        this.showEstTransDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd')
        this.addForm.estTransTime = timeValue
      },
      // 计划采购时间
      async pickPlanDate(e) {
        this.showPlanDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd')
        this.addForm.planPurchaseTime = timeValue
      },
      // 跟进时间
      async pickFollowDate(e) {
        this.showFollowDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd')
        this.addForm.followTime = timeValue
      },
      nextStep() {
        if (this.step == 1) {
          this.$refs.addForm
            .validate()
            .then(async () => {
              this.step++
            })
            .catch((err) => {
              this.$refs.uNotify.show({
                top: this.height + this.paddingTop + 10,
                type: 'warning',
                message: err[0].message,
                duration: 1000 * 3,
              })
            })
        } else if (this.step == 2) {
          if (this.productList.length == 0) {
            this.$refs.uNotify.show({
              top: this.height + this.paddingTop + 10,
              type: 'warning',
              message: '请选择产品',
              duration: 1000 * 3,
            })
            return
          }
          this.step++
        }
      },
      previousStep() {
        if (this.step > 1) {
          this.step--
        }
      },
      handleAdd() {
        this.$refs.addForm
          .validate()
          .then(async () => {
            let params = this.addForm
            params.nboBudget = Number(params.nboBudget)
            params.saleName = this.username
            params.saleId = this.userId
            let products = this.productList.map((item) => ({
              ProdId: item.id,
              ProdName: item.prodName,
              ProdCode: item.prodCode,
              ProdClass: item.prodClass,
              ProdNum: Number(item.prodNum),
              ProdPrice: Number(item.guidPrice),
            }))
            params.products = products
            const [err, res] = await to(projectApi.create(params))
            if (err) return
            if (res && res.code == 200) {
              this.$refs.uToast.show({
                type: 'success',
                message: '创建成功',
                complete: () => {
                  this.goBack()
                },
              })
            }
          })
          .catch((err) => {
            console.log(err)
            this.$refs.uNotify.show({
              top: this.height + this.paddingTop + 10,
              type: 'warning',
              message: err[0].message,
              duration: 1000 * 3,
            })
          })
      },
      goBack() {
        uni.navigateBack({
          //关闭当前页面，返回上一页面或多级页面。
          delta: 1,
        })
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3c9cff;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 188rpx);
      background: #ffffff;
      box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
      border-radius: 31rpx 31rpx 0 0;
      padding: 0 32rpx;
      overflow: auto;
      padding-bottom: 64rpx;
      .step-tit {
        text-align: center;
        line-height: 60rpx;
        font-size: 26rpx;
        color: #000;
      }
      .form-label {
        font-size: 32rpx;
        font-weight: bold;
        color: #323232;
        padding-bottom: 18rpx;
        .label-tag {
          width: 15rpx;
          height: 15rpx;
          background: #ff4d4f;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }
      .handle-btn {
        width: 234rpx;
        height: 92rpx;
        background: #3c9cff;
        border-radius: 31rpx;
        margin: 30rpx auto 0;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        line-height: 92rpx;
      }
    }
    .step1 {
      width: 100%;
      height: calc(100% - 124rpx);
      overflow: auto;
    }
    .step2 {
      width: 100%;
      height: calc(100% - 124rpx);
      .product-wrap {
        width: 100%;
        margin-top: 30rpx;
        height: calc(100% - 150rpx);
        overflow: auto;
        .product-item {
          margin: 30rpx 0;
          padding: 20rpx;
          border-radius: 10px;
          box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
          .product-label {
            padding: 20rpx 0 20rpx 20rpx;
          }
        }
      }
      .add-btn {
        color: #fff;
        width: 120rpx;
        height: 60rpx;
        padding: 0rpx 8rpx;
        font-size: 12rpx;
        background: #3c9cff;
        border-radius: 3px;
        text-align: center;
        line-height: 58rpx;
        font-size: 44rpx;
      }
    }
  }
</style>