opms_wechat/pages/project/upgrade.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-06-07 11:07:33
 * @Description: file content
 * @FilePath: \oms\pages\project\upgrade.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">
      <u-form :model="addForm" :rules="rules" ref="addForm" label-width="0">
        <!-- 项目级别 -->
        <u-form-item prop="nboType" borderBottom customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            项目级别
          </view>
          <u-radio-group v-model="addForm.nboType" placement="row" @change="changeLevel">
            <u-radio
              customStyle="margin-right:40rpx"
              :disabled="projectDetails.nboType === '10'"
              label="A"
              name="10"></u-radio>
            <u-radio
              customStyle="margin-right:40rpx"
              :disabled="projectDetails.nboType === '20'"
              label="B"
              name="20"></u-radio>
            <u-radio
              :disabled="['10', '20', '30'].includes(projectDetails.nboType)"
              customStyle="margin-right:40rpx"
              label="C"
              name="30"></u-radio>
          </u-radio-group>
        </u-form-item>
        <!-- C - B 必填项：项目类别、项目预算、渠道销售人员、渠道销售电话、微信、预计出货金额（不填）、添加产品、上传报价单  -->
        <view v-if="addForm.nboType !== '30'">
          <u-form-item prop="nboBudget" borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              项目预算
            </view>
            <u-input
              placeholder="输入项目预算"
              v-model.number="addForm.nboBudget"
              border="none"
              type="number"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <!-- v-if="projectDetails.salesModel !== '10'" -->
          <view v-if="projectDetails.salesModel !== '10'">
            <u-form-item
              prop="dealerSalesName"
              borderBottom
              customStyle="padding:40rpx 0 30rpx"
              @click="$refs.distrConcat.open()">
              <view class="form-label flex_l">
                <view class="label-tag"></view>
                渠道销售人员
              </view>
              <u-input
                :readonly="true"
                placeholder="请选择渠道销售人员"
                v-model="addForm.dealerSalesName"
                border="none"
                suffixIcon="arrow-down"
                suffixIconStyle="color:#CDCDCD"
                clearable
                customStyle="padding: 0 30rpx 0 12rpx"></u-input>
            </u-form-item>
            <u-form-item prop="dealerSalesContact" borderBottom customStyle="padding:40rpx 0 30rpx">
              <view class="form-label flex_l">
                <view class="label-tag"></view>
                渠道销售电话/微信
              </view>
              <u-input
                placeholder="请选择渠道销售人员"
                v-model="addForm.dealerSalesContact"
                border="none"
                clearable
                customStyle="padding: 0 30rpx 0 12rpx"></u-input>
            </u-form-item>
          </view>
          <!-- 上传报价单文件 -->
          <u-form-item prop="quotationFile" borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              报价单
            </view>
            <uni-file-picker
              file-mediatype="all"
              mode="grid"
              @select="chooseFile($event, 'baojia')"
              @delete="delQuotationFile"
              ref="upload"
              limit="1">
              <view class="upload-btn">
                <u-icon name="plus-circle-fill" color="blue" size="28"></u-icon>
              </view>
            </uni-file-picker>
          </u-form-item>
          <view>
            <view class="step-tit center">
              <text class="margin20">添加产品</text>
              <view class="add-btn" @click="$refs.product.open()">+</view>
            </view>
            <view class="product-wrap">
              <view class="product-item" v-for="(v, i) in productList" :key="v.id">
                <u-text
                  type="primary"
                  text="删除"
                  customStyle="margin-left:20rpx"
                  @click="removeProductItem(i)"></u-text>
                <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.number="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>
        <!--    B-A    必填项：采购方式、资金来源、计划 计划采购时间、客户联系人、客户决策部分、客户联系人姓名、客户联系人电话/微信、是否采纳我司技术参数（是/否）、竞争公司、客户倾向厂家  -->
        <view v-if="addForm.nboType == '10'">
          <u-form-item
            prop="purchasingWayVal"
            borderBottom
            customStyle="padding:40rpx 0 30rpx"
            @click="showChasingWay = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              采购方式
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择采购方式"
              v-model="addForm.purchasingWayVal"
              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 class="label-tag"></view>
              资金来源
            </view>
            <u-input
              placeholder="输入资金来源"
              v-model="addForm.capitalSource"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item
            prop="planPurchaseTime"
            borderBottom
            customStyle="padding:40rpx 0 30rpx"
            @click="showPurchasingDate = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              计划采购时间
            </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" prop="makerName">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              客户决策人
            </view>
            <u-input
              placeholder="输入客户联系人"
              v-model="addForm.makerName"
              border="none"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" prop="makerDept">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              客户决策部门
            </view>
            <u-input
              placeholder="输入客户决策部门"
              v-model="addForm.makerDept"
              border="none"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="selectContact()">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              客户联系人
            </view>
            <u-input
              :readonly="true"
              placeholder="输入客户联系人"
              v-model="addForm.contactName"
              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" prop="contactTelephone">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              客户联系人电话/微信
            </view>
            <u-input
              placeholder="输入客户联系人电话/微信"
              v-model="addForm.contactTelephone"
              border="none"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" prop="competitor">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              竞争公司
            </view>
            <u-input
              placeholder="输入竞争公司"
              v-model="addForm.competitor"
              border="none"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" prop="customerIntentionFactory">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              客户倾向厂家
            </view>
            <u-input
              placeholder="输入客户倾向厂家"
              v-model="addForm.customerIntentionFactory"
              border="none"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item prop="isAdoptDashoo" borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              是否采纳大数技术参数
            </view>
            <u-radio-group v-model="addForm.isAdoptDashoo" placement="row" @change="chooseRadio">
              <u-radio customStyle="margin-right:40rpx" label="是" name="10"></u-radio>
              <u-radio customStyle="margin-right:40rpx" label="否" name="20"></u-radio>
            </u-radio-group>
          </u-form-item>
          <!-- 上传大数参数文件 -->
          <u-form-item
            prop="dashooParamFile"
            borderBottom
            customStyle="padding:40rpx 0 30rpx"
            v-if="addForm.isAdoptDashoo == '10'">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              文件
            </view>
            <uni-file-picker
              file-mediatype="all"
              mode="grid"
              @delete="deldashooParamFile"
              @select="chooseFile($event)"
              ref="upload"
              limit="1">
              <view class="upload-btn">
                <u-icon name="plus-circle-fill" color="blue" size="28"></u-icon>
              </view>
            </uni-file-picker>
          </u-form-item>
        </view>
        <view v-if="addForm.nboType === '30'">
          <u-form-item
            prop="projConversionReason"
            customStyle="padding:40rpx 0 30rpx"
            v-if="addForm.isAdoptDashoo != '30'">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              转化原因
            </view>
            <u-textarea
              fontSize="26rpx"
              v-model="addForm.projConversionReason"
              placeholder="请输入转化原因"
              height="180"
              :count="true"
              maxlength="300"></u-textarea>
          </u-form-item>
        </view>
        <view v-else>
          <u-form-item prop="remark" customStyle="padding:40rpx 0 30rpx" v-if="addForm.isAdoptDashoo != '30'">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              升级原因
            </view>
            <u-textarea
              fontSize="26rpx"
              v-model="addForm.remark"
              placeholder="请输入升级原因"
              height="180"
              :count="true"
              maxlength="300"></u-textarea>
          </u-form-item>
        </view>
      </u-form>
      <view class="save" @click="handleUpgrade">提交</view>
    </view>
    <!--  计划采购时间 -->
    <u-datetime-picker
      v-if="showPurchasingDate"
      :show="showPurchasingDate"
      mode="date"
      v-model="addForm.planPurchaseTime"
      @cancel="showPurchasingDate = false"
      @confirm="pickPurchasingDate"></u-datetime-picker>
    <!-- 采购方式 -->
    <u-picker
      :show="showChasingWay"
      :columns="[purchasingWayOptions]"
      keyName="value"
      @cancel="showChasingWay = false"
      @confirm="pickModel"></u-picker>
    <!-- 经销商代理商联系人 -->
    <distr-contact ref="distrConcat" @close="closeConcat" :distrType="targetType"></distr-contact>
    <!-- 客户联系人 -->
    <customer-contact ref="contact" @close="closeContact($event)"></customer-contact>
    <!-- 选择产品 -->
    <select-product ref="product" :selectedRows="productList" @close="closeProduct($event)"></select-product>
    <u-notify ref="uNotify"></u-notify>
    <u-toast ref="uToast"></u-toast>
    <u-modal
      :asyncClose="true"
      :show="showModal"
      content="确认进行项目升级？"
      :showCancelButton="true"
      @cancel="this.showModal = false"
      @confirm="this.handleUpgradeApi()"></u-modal>
  </view>
</template>
<script>
  import {
    multipartUpload as upload,
    uploadTask as task, //上传任务对象，同requestTask js_sdk\xp-multipart\xp-multipart\xp-multipart.js
  } from '@/js_sdk/xp-multipart/xp-multipart/xp-multipart'
  import projectApi from '../../api/project'
  import to from 'await-to-js'
  import CustomerContact from '../../components/CustomerContact'
  import DistrContact from '@/components/DistrContact'
  import SelectProduct from 'components/SelectProduct'

  export default {
    name: 'omsIndex',
    components: { CustomerContact, DistrContact, SelectProduct },
    data() {
      return {
        flag: true,
        height: '',
        paddingTop: '',
        showSupportDate: false, //技术支持时间
        showBudgetDate: false, //项目预算时间
        showPurchasingDate: false, // 计划采购时间
        showChasingWay: false,
        purchasingWayOptions: [],
        addForm: {
          nboType: '', //项目及别
          nboBudget: 0, //项目预算
          dealerSalesName: '', //经销商销售人员
          dealerSalesId: '', //经销商销售人员
          capitalSource: '', //资金来源
          purchasingWay: '', //采购方式id
          purchasingWayVal: '', //采购方式
          planPurchaseTime: this.parseTime(new Date(), '{y}-{m}-{d}'), // 计划采购时间
          makerName: '', //客户决策人
          contactName: '', //客户联系人
          contactId: '', //客户联系人
          contactTelephone: '', //客户联系人电话
          competitor: '', //竞争公司
          customerIntentionFactory: '', //客户倾向厂家
          makerDept: '', //客户决策部门
          isAdoptDashoo: '', //是否采纳大数技术参数
          remark: '', //转化原因
          projConversionReason: '', //转化原因
          id: 0, //项目id
          dashooParamFile: '',
          dashooParamFilePaths: '',
          quotationFilePaths: '',
          quotationFile: '',
        },
        showModal: false,
        projectDetails: {},
        rules: {
          nboType: [{ required: true, trigger: ['blur', 'change'], message: '请选择项目类别' }],
          // C => B
          nboBudget: [
            { required: true, trigger: ['blur', 'change'], message: '请输入项目预算' },
            {
              validator: (rule, value, callback) => {
                return parseInt(value) <= 0
              },
              trigger: ['blur', 'change'],
              message: '项目预算应大于0',
            },
          ],
          dealerSalesId: [{ required: true, trigger: ['blur', 'change'], message: '请选择渠道销售' }],
          dealerSalesName: [{ required: true, trigger: ['blur', 'change'], message: '请选择项渠道销售人员' }],
          dealerSalesContact: [{ required: true, trigger: ['blur', 'change'], message: '请输入渠道销售电话/微信' }],
          estTransPrice: [{ required: true, trigger: ['blur', 'change'], message: '请选择预计出货金额' }],
          dashooParamFile: {
            type: 'object',
            required: true,
            message: '请上传文件',
            trigger: ['change'],
          },
          quotationFile: {
            type: 'object',
            required: true,
            message: '请上传报价单',
            trigger: ['change'],
          },
          products: [{ required: true, trigger: ['blur', 'change'], message: '请选择产品' }],
          // B => A
          purchasingWay: [{ required: true, trigger: ['blur', 'change'], message: '请选择采购方式' }],
          capitalSource: [{ required: true, trigger: ['blur', 'change'], message: '请输入资金来源' }],
          planPurchaseTime: [{ required: true, trigger: ['blur', 'change'], message: '请选择计划采购时间' }],
          contactId: [{ required: true, trigger: ['blur', 'change'], message: '请选择客户联系人' }],
          contactName: [{ required: true, trigger: ['blur', 'change'], message: '请选择客户联系人姓名' }],
          contactTelephone: [{ required: true, trigger: ['blur', 'change'], message: '请输入客户联系人电话/微信' }],
          makerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择客户决策人' }],
          makerName: [{ required: true, trigger: ['blur', 'change'], message: '请选择客户决策人姓名' }],
          makerDept: [{ required: true, trigger: ['blur', 'change'], message: '请选择客户决策部门' }],
          customerIntentionFactory: [{ required: true, trigger: ['blur', 'change'], message: '请输入客户倾向厂家' }],
          competitor: [{ required: true, trigger: ['blur', 'change'], message: '请输入竞争公司' }],
          isAdoptDashoo: [{ required: true, trigger: ['blur', 'change'], message: '请选择是或否' }],
          projConversionReason: [{ required: true, trigger: ['blur', 'change'], message: '请输入转化原因' }],
          remark: [{ required: true, trigger: ['blur', 'change'], message: '请输入原因' }],
        },
        productList: [],
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    onLoad(option) {
      console.log(option.id) //打印出上个页面传递的参数。
      this.addForm.id = parseInt(option.id)
    },
    mounted() {
      this.getDetails()
      this.getOptions()
    },
    methods: {
      getOptions() {
        Promise.all([this.getDicts('proj_purchasing_way')])
          .then(([purchasing]) => {
            this.purchasingWayOptions = purchasing.data.values || []
          })
          .catch((err) => console.log(err))
      },
      async getDetails() {
        const [err, res] = await to(projectApi.getDetail({ id: this.addForm.id }))
        if (err) return
        if (res.code == 200) {
          this.projectDetails = res.data
          this.addForm = Object.assign(this.addForm, this.projectDetails)
          this.addForm.nboType = ''
          this.addForm.projConversionReason = ''
          this.addForm.remark = ''
          this.productList = res.data.products.map((item) => ({
            id: item.prodId,
            prodCode: item.prodCode,
            prodName: item.prodName,
            prodClass: item.prodClass,
            guidPrice: item.guidPrice,
            prodPrice: item.marketPrice,
            prodNum: 1,
          }))
          console.log(this.productList)
        }
      },
      closeProduct(product) {
        if (product.length > 0) {
          const combinedArray = [...this.productList, ...product]
          this.productList = Array.from(new Set(combinedArray.map((item) => item.id))).map((id) => {
            return combinedArray.find((item) => item.id === id)
          })
          console.log(this.productList)
        }
      },
      removeProductItem(idx) {
        this.productList.splice(idx, 1)
      },
      changeLevel(e) {
        if (e == '20') {
          this.addForm.dashooParamFile = ''
          this.addForm.dashooParamFilePaths = ''
        } else if (e == '30') {
          this.addForm.dashooParamFile = ''
          this.addForm.dashooParamFilePaths = ''
          this.addForm.quotationFile = ''
          this.addForm.quotationFilePaths = ''
        }
      },
      // 选择采购方式
      pickModel(e) {
        this.addForm.purchasingWay = e.value[0].key
        this.addForm.purchasingWayVal = e.value[0].value
        this.showChasingWay = false
      },
      // 经销商代理商联系人
      closeConcat(user) {
        this.addForm.dealerSalesId = user.id
        this.addForm.dealerSalesName = user.name
        if (user.phone !== '' && user.wechat !== '') {
          this.addForm.dealerSalesContact = user.phone + '/' + user.wechat
        }
        if (user.phone !== '') {
          this.addForm.dealerSalesContact = user.phone
        }
        if (user.wechat !== '') {
          this.addForm.dealerSalesContact = user.wechat
        }
      },
      selectContact() {
        if (!this.addForm.custId) {
          this.$refs.uNotify.show({
            top: this.height + this.paddingTop + 10,
            type: 'warning',
            message: '请先选择客户',
            duration: 1000 * 3,
          })
          return
        }
        this.$refs.contact.open(this.addForm.custId)
      },
      // 关闭选择客户联系人
      closeContact(user) {
        if (user) {
          this.addForm.contactId = user.id
          this.addForm.contactName = user.cuctName
        }
      },
      //  计划采购时间
      async pickPurchasingDate(e) {
        this.showPurchasingDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
        this.addForm.planPurchaseTime = timeValue
      },
      // 选择是否采用大数参数
      chooseRadio(e) {
        if (e == '20') {
          this.addForm.dashooParamFile = ''
          this.addForm.dashooParamFilePaths = ''
        }
      },
      // // 选择上传触发函数
      chooseFile(e, type = null) {
        if (type == 'baojia') {
          this.addForm.quotationFile = e.tempFiles[0].file
          this.addForm.quotationFilePaths = e.tempFilePaths[0]
        } else {
          this.addForm.dashooParamFile = e.tempFiles[0].file
          this.addForm.dashooParamFilePaths = e.tempFilePaths[0]
        }
      },
      // 删除报价单
      delQuotationFile() {
        this.addForm.quotationFile = ''
        this.addForm.quotationFilePaths = ''
      },
      // 删除大数参数文件
      deldashooParamFile() {
        this.addForm.dashooParamFile = ''
        this.addForm.dashooParamFilePaths = ''
      },
      // 上传函数
      async upgradeAorB(data) {
        const basePath = process.uniEnv.VUE_APP_MicroSrvProxy_API + process.uniEnv.VUE_APP_ParentPath
        upload({
          url: basePath, //后端接口
          fields: data,
          files: {
            quotationFile: this.addForm.quotationFilePaths,
            dashooParamFile: this.addForm.dashooParamFilePaths,
          },
          header: {
            Tenant: process.uniEnv.VUE_APP_TENANT,
            Authorization: 'Bearer ' + uni.getStorageSync('opms_token') || '',
            'X-RPCX-SerializeType': '1',
            'X-RPCX-ServicePath': 'BusinessHandler',
            'X-RPCX-ServiceMethod': 'BusinessUpgradeAorB',
            SrvEnv: 'dev',
          },
          success: (res) => {
            if (res.data.code == 200) {
              this.$refs.uToast.show({
                type: 'success',
                message: '提交成功',
                complete: () => {
                  this.goBack()
                },
              })
            } else {
              this.$refs.uToast.show({
                type: 'warning',
                message: res.data.msg,
              })
            }
          },
          fail: (err) => {
            this.$refs.uToast.show({
              type: 'error',
              message: '提交失败',
            })
          },
          complete: (ret) => {
            this.flag = true
            this.showModal = false
          },
        })
      },
      handleUpgrade() {
        this.$refs.addForm
          .validate()
          .then(async () => {
            this.showModal = true
          })
          .catch((err) => {
            this.$refs.uNotify.show({
              top: this.height + this.paddingTop + 10,
              type: 'warning',
              message: err[0].message,
              duration: 1000 * 3,
            })
          })
      },
      async handleUpgradeApi() {
        if (!this.flag) return
        let params = this.addForm
        params.nboBudget = Number(params.nboBudget)
        params.products = this.productList
        this.flag = false
        const [err, res] = await to(projectApi.upgrade(params))
        this.flag = true
        this.showModal = false
        if (err) return
        if (res && res.code == 200) {
          this.$refs.uToast.show({
            type: 'success',
            message: '提交成功',
            complete: () => {
              this.goBack()
            },
          })
        }
      },
      goBack() {
        uni.navigateBack({
          //关闭当前页面，返回上一页面或多级页面。
          delta: 1,
        })
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;
    .step-tit {
      margin-top: 40rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 26rpx;
      color: #000;
    }
    .product-wrap {
      width: 100%;
      margin-top: 30rpx;
      height: calc(100% - 150rpx);
      overflow: auto;
      padding: 0 10rpx;
      .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;
    }
    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3e7ef8;
      .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;
      .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;
        }
      }
      .save {
        width: 569rpx;
        height: 92rpx;
        background: #3e7ef8;
        border-radius: 31rpx;
        margin: 116rpx auto 0;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        line-height: 92rpx;
      }
    }
  }
</style>