web-base-pc/src/views/shareConfirm/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-16 13:54:04
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2023-01-29 17:32:44
-->
<template>
  <div>
    <!-- 用户头 -->
    <personInfo></personInfo>
    <!-- <div class="rt dis_flex">
      <div class="rti dis_flex">
        积分会员信息
      </div>
    </div> -->
    <!-- 表单 -->
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-position="top"
             status-icon
             class="demo-ruleForm">
      <!-- <el-row :gutter="40"
              class="padRow">
       
        <el-col :span="6">
          <el-form-item :label="'会员编号'"
                        prop="upgradeMemberCode">
            <el-input v-model="ruleForm.upgradeMemberCode"
                      placeholder="请输入会员编号"></el-input>
            
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="会员姓名"
                        prop="upgradeMemberName">
            <el-input v-model="ruleForm.upgradeMemberName"
                      placeholder="请输入会员姓名"
                      disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发货方式"
                        prop="deliveryWay">
            <el-select v-model="ruleForm.deliveryWay"
                       @change="selDelivery"
                       :disabled="this.userInfo.pkCountry == 1"
                       placeholder="请选择发货方式">
              <el-option v-for="item in deliList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运输方式"
                        :required="isDeliveryWay"
                        prop="transType">
            <el-select v-model="ruleForm.transType"
                       :disabled="this.userInfo.pkCountry == 1"
                       placeholder="请选择运输方式">
              <el-option v-for="item in transList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
      <div v-show="isDeliveryWay">
        <div class="xian1">
          <div class="title">{{ '收货人信息' }}</div>
          <div class="lan"
               @click="openAddress">{{ '新增收货人地址' }}</div>
        </div>
        <el-row :gutter="40"
                class="padRow">
          <el-col :span="6">
            <el-form-item :label="'收货人'"
                          prop="recName">
              <el-input v-model="ruleForm.recName"
                        :placeholder="'请输入收货人'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'联系方式'"
                          prop="recPhone">
              <el-input v-model="ruleForm.recPhone"
              :maxlength="userInfo.pkSettleCountry == 1?11:20"
                        :placeholder="'请输入联系方式'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'收货地址'"
                          class="dizhi"
                          prop="dizhi">
              <el-cascader v-model="ruleForm.dizhi"
                           @change="setDizhi"
                           :options="areaData"
                           :props="regionParams"
                           :placeholder="'请选择收货地址'"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'详细地址'"
                          prop="recAddress">
              <el-input v-model="ruleForm.recAddress"
                        maxlength="200"
                        :placeholder="'请输入详细地址'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40"
                class="padRow">
          <el-col :span="6">
            <el-form-item :label="'邮费'">
              <el-input v-model="ruleForm.postage"
                        disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'备注'">
              <el-input v-model="ruleForm.remark"
                        :placeholder="'请输入备注'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div class="nox"
         v-show="addressList.length>0">
      <div class="title">{{ '历史地址' }}</div>
    </div>
    <div class="local"
         v-show="isDeliveryWay">
      <div :class="['local_i',item.pkId==moren?'local_a':'']"
           v-for="item in addressList"
           :key="item.pkId">
        <el-radio v-model="moren"
                  @input="checkRadio"
                  :label="item.pkId">{{  }}</el-radio>
        <div class="local1">{{ item.recArea }}{{ item.recAddress }}({{ item.recName }} 收)</div>
        <div class="local2"
             v-show="item.isDefault == 1">{{ '默认地址' }}</div>
        <div class="local2 local3"
             v-show="item.isDefault == 0"
             @click="setDefaultAds(item.pkId)">{{ '设置默认地址' }}</div>
        <div class="local2"
             @click="changeAds(item.pkId)">{{ '编辑' }}</div>
        <div class="local3"
             @click="delAds(item.pkId)">{{ '删除' }}</div>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="nox">
      <div class="title">{{ '产品信息' }}</div>
    </div>
    <el-table :data="goodList"
              :row-style="{ height: '60px', fontSize: '15px', color: '#333333' }"
              :cell-style="{ padding: '0' }"
              :fit="true"
              :header-cell-style="{
          background: 'var(--primary-color)',
          color: '#fff',
          fontWeight: 'bold',
          fontSize: '15px',
        }"
              :row-class-name="tableRowClassName">
      <el-table-column align="center"
                       prop="waresName"
                       width="400"
                       :label="'商品名称'">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.goodsPrice | numberToCurrency}}</span> -->
          <div class="goods">
            <div class="goods_t">
              <img :src="scope.row.cover"
                   alt="">
              <div>
                <div>{{ scope.row.productName }}</div>

                <div class="goods_tit"
                     v-for="item in scope.row.waresSkuList"
                     :key="item.pkId">
                  {{ item.specValueNames }}
                </div>
              </div>
            </div>

          </div>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="waresPrice"
                       :label="'商品单价'">
        <template slot-scope="scope">
          <span>{{ scope.row.waresPrice | numberToCurrency}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="pv"
                       :label="'商品业绩'+'(PV)'">
        <template slot-scope="scope">
          <span>{{ scope.row.pv | numberToCurrency}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="quantity"
                       :label="'商品数量'">
      </el-table-column>
      <el-table-column align="center"
                       prop="pvAmount"
                       :label="'业绩小计'+'PV'">
        <template slot-scope="scope">
          <span>{{
              scope.row.pvAmount | numberToCurrency
            }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="priceAmount"
                       :label="'金额小计'">
        <template slot-scope="scope">
          <span>{{ scope.row.priceAmount | numberToCurrency}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tab_b">
      <!-- <div>{{ '商品金额总计' }}:¥{{ allGoodsData.priceAmount | numberToCurrency }}</div> -->
      <div>{{ '邮费' }}:{{ userInfo.currencyIcon }}{{ ruleForm.postage | numberToCurrency }}</div>
    </div>
    <AddAddress ref="addAddress"
                @getAdList="getAddressList"></AddAddress>
    <div class="zhan"></div>
    <!-- 购买 -->
    <div class="tfooter">
      <div class="footer_t">
        <div class="footer_tt ">
          <div class="dis_flex">
            <div class="f1">{{ '总价' }}:</div>
            <div class="f2">{{ userInfo.currencyIcon }}{{ totalAmont  | numberToCurrency}}</div>
          </div>
          <!-- <div class="dis_flex">
            <div class="f1">{{ '业绩' }}:</div>
            <div class="f3">¥{{ allGoodsData.achieveAmount  | numberToCurrency}}</div>
          </div> -->
        </div>
        <div class="footer_tt"
             v-show="ruleForm.recAddress&&ruleForm.recName&&ruleForm.recPhone&&ruleForm.nameList">
          <div class="f2 f4">{{ '寄送至' }}：{{ruleForm.nameList}}{{ ruleForm.recAddress }}</div>
          <div class="f4">{{ '收货人' }}：{{ ruleForm.recName }} {{ ruleForm.recPhone }}</div>
        </div>
      </div>
      <div class="footer_b">
        <!-- 协议 -->
        <agreement :isShow="agreementShow"
                   ref="agree"
                   @agree="agree"></agreement>
        <div class="btn"
             @click="submitRegister('ruleForm')">{{ '购买' }}</div>
      </div>
    </div>
    <!-- 强制阅读协议 -->
    <!-- <mustAgreeMent :waresCodeList='waresCodeList'></mustAgreeMent> -->
    <Pay :isPay="isPay"
         @closePay="closePay"
         :paramsPost="paramsPost"></Pay>
  </div>
</template>

<script>
import personInfo from '@/components/personInfo.vue'
import AddAddress from '@/components/AddAddress.vue'
import agreement from '@/components/agreement.vue'
import { mapGetters } from 'vuex'
import * as api from '@/api/register.js'
import { setTokenMi } from '@/util/auth'
import Pay from '@/components/Pay.vue'
import mustAgreeMent from '@/components/mustAgreeMent.vue'

export default {
  components: {
    personInfo,
    AddAddress,
    agreement,
    Pay,
    mustAgreeMent,
  },
  data() {
    let validateRecTransType = (rule, value, callback) => {
      if (this.ruleForm.transType == '' && this.isDeliveryWay) {
        callback(new Error('请选择运输方式'))
      } else {
        callback()
      }
    }
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!this.isvalidPhone(value)) {
        //判断用户输入的值是否符合规则
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      waresCodeList: [],
      isPay: false,
      paramsPost: '',
      isClick: 0,
      ruleForm: {
        dizhi: [],
        fwzx: '',
        postage: '',
        recName: '',
        recPhone: '',
        recAddress: '',
        deliveryWay: '',
        transType: '',
      },
      rules: {
        gradeName: [
          { required: true, message: '请输入申请级别', trigger: 'change' },
        ],
        upgradeMemberName: [
          { required: true, message: '请输入会员姓名', trigger: 'change' },
        ],
        recName: [
          { required: true, message: '请输入收件人', trigger: 'blur' },
        ],
        recPhone: [{ required: true, validator: validPhone, trigger: 'blur' }],
        recAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ],
        deliveryWay: [
          {
            required: true,
            message: '请选择发货方式',
            trigger: 'change',
          },
        ],
        // transType: [
        //   {
        //     required: true,
        //     message: '请选择运输方式',
        //     trigger: 'change',
        //   },
        // ],
        transType: [{ validator: validateRecTransType }],
      },
      addressList: [],
      moren: '',
      allGoodsData: {},
      allData: [],
      agreementShow: true,
      countryList: [],
      transList: [
        {
          value: 1,
          label: '陆运',
        },
        {
          value: 2,
          label: '空运',
        },
        {
          value: 3,
          label: '海运',
        },
      ],
      deliList: [],
      bankLists: [],
      areaData: [],
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover',
      },
      totalPrice: 0,
      totalAchive: 0,
      isLoading: '',
      isDeliveryWay: true,
      shoppingArr: [],
      totalAmont: 0,
      allDataObj: {
        pgpList: [],
      },
      allData: [],
      postList: [],
      goodList: [],
      hasChecked: '',
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted() {
    // // 数据源
    this.allData = JSON.parse(this.$route.query.allData)
    console.log(
      '%c [ this.allData ]-409',
      'font-size:13px; background:#c8340b; color:#ff784f;',
      this.allData
    )
    let confirmOrderWaresInfoParamsList = []
    this.hasChecked = this.$route.query.hasChecked || ''
    this.allData.forEach((item) => {
      item.waresSkuList.forEach((ctem) => {
        confirmOrderWaresInfoParamsList.push({
          pkTWares: ctem.pkTWares,
          pkTWaresSku: ctem.pkTWaresSku || ctem.pkThWaresSku,
          quantity: item.quantity,
          source: 0,
        })
      })
    })
    // waresSkuList
    // this.allGoodsData[0].orderItemsParams.forEach((item) => {
    //   item.goodsPrice = 0
    //   item.goodsAchive = 0
    //   item.waresItemsParamList.forEach((ctem) => {
    //     item.goodsPrice += parseFloat(ctem.priceTotal)
    //     item.goodsAchive += parseFloat(ctem.achieveTotal)
    //   })
    // })
    // let totalPrice = 0
    // let totalAchive = 0
    // this.allGoodsData[0].orderItemsParams.forEach((item) => {
    //   totalPrice += parseFloat(item.goodsPrice * item.quantity)
    //   totalAchive += parseFloat(item.goodsAchive * item.quantity)
    // })
    // this.totalPrice = totalPrice
    // this.totalAchive = totalAchive
    // this.allData = this.allGoodsData[0].orderItemsParams
    // // 服务中心赋值
    // this.getUserName()

    // // 获取运输方式
    // this.getTransList()
    // // 获取发货方式
    // this.getDeliveryList()
    this.getAllArea()
    // // 获取会员等级
    // // this.getMember()
    // 数据源
    this.shoppingArr = JSON.parse(localStorage.getItem('allGoods'))
    // 获取购物车详情
    this.getCatDetail(confirmOrderWaresInfoParamsList)
    // 幂等性
    api.generate().then((res) => {
      setTokenMi(res.msg)
    })
    if (this.userInfo.pkCountry == 1) {
      this.ruleForm.transType = 1
      this.ruleForm.deliveryWay = 1
    }
  },
  methods: {
    isvalidPhone(phone) {
      const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
      return reg.test(phone)
    },
    // this.allData
    getCatDetail(confirmOrderWaresInfoParamsList) {
      api
        .waresinfo({
          confirmOrderWaresInfoParamsList: confirmOrderWaresInfoParamsList,
        })
        .then((res) => {
          this.goodList = res.data
          let price = 0
          this.goodList.forEach((item) => {
            item.waresItemsParamList = []
            price += Number(item.priceAmount)
            item.waresSkuList.forEach((ctem) => {
              item.waresItemsParamList.push({
                pkWaresSpecsSku: ctem.pkId,
              })
            })
          })
          this.allDataObj.price = price
          this.totalAmont = this.allDataObj.price
          let arr = []
          this.goodList.forEach((item) => {
            arr.push({
              channel: item.source,
              pkId: item.pkId,
              quantity: item.quantity,
              waresItemsParamList: item.waresItemsParamList,
            })
          })
          this.postList = arr
          this.allGoodsData.specialArea = 21
          // 获取地址
          this.getAddressList()
          // 获取运输方式
          this.getTransList()
          // 获取发货方式
          this.getDeliveryList()
          // 获取省市县
          this.getAllArea()
          // 获取地址
          // this.getAddressList()
          // 获取会员等级
          // this.getMember()
        })
    },
    selDelivery(e) {
      if (e == 2 || e == 3) {
        this.isDeliveryWay = false
      } else {
        this.isDeliveryWay = true
      }
    },
    openLoading() {
      this.isLoading = this.$loading({
        lock: true,
        text: '订单生成中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
    },
    resetAll() {
      this.ruleForm.parent = ''
      this.ruleForm.deliveryWay = ''
      this.ruleForm.transType = ''
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    // getUserName() {
    //   api
    //     .upgRel({
    //       upgradeMemberCode: this.ruleForm.upgradeMemberCode,
    //     })
    //     .then((res) => {
    //       if (res.code == 200) {
    //         this.ruleForm.upgradeMemberName = res.data.upgradeMemberName
    //         this.$forceUpdate()
    //       }
    //     })
    // },
    closePay(val) {
      if (val) {
        this.isPay = false
        this.$store.dispatch('GetInfo').then((response) => {
          this.$router.push({
            path: '/vipCenter',
            query: { id: 1 },
          })
        })
      } else {
        this.$confirm('确认取消支付' + '?')
          .then((_) => {
            this.isPay = false
            this.$router.push({
              path: '/vipCenter',
              query: { id: 1 },
            })
          })
          .catch((_) => {})
      }
    },
    // 注册
    submitRegister(formName) {
      let deleteList = []
      if (this.isDeliveryWay && !this.ruleForm.recPhone) {
        this.$message({
          message: '请选择收货人信息',
          type: 'warning',
        })
        return
      }
      if (!this.agreementShow) {
        this.$message({
          message: '请阅读并同意购买协议',
          type: 'warning',
        })
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.openLoading()
          let obj = Object.assign(
            {},
            this.ruleForm,
            {
              recProvince: this.allGoodsData.recProvince,
              recCounty: this.allGoodsData.recCounty,
              recCity: this.allGoodsData.recCity,
            },
            {
              orderItemsParams: this.postList,
              specialArea: 21,
            }
          )
          api
            .confirmShareOrder(obj)
            .then((res) => {
              this.isLoading.close()
              if (res.code == 200) {
                // 下单成功，领取礼包
                // this.getGifts()
                this.isPay = true
                this.paramsPost = res.data
              }
            })
            .catch((err) => {
              this.isLoading.close()
            })
        } else {
          return false
        }
      })
    },
    // 领取礼包
    getGifts() {
      let obj = {
        pkMember: this.userInfo.memberCode,
        pkBaseId: this.allDataObj.pkBaseId,
        pkNewPeople: this.allDataObj.pkNewPeople,
      }
      api.peoplePick(obj).then((res) => {})
    },
    flatten(arr) {
      return arr.reduce((result, item) => {
        return result.concat(
          item,
          Array.isArray(item.children) ? this.flatten(item.children) : []
        )
      }, [])
    },
    setDizhi(e, val) {
      let arr = this.flatten(this.areaData)
      let nameList = ''
      arr.forEach((item) => {
        this.ruleForm.dizhi.forEach((ctem) => {
          if (ctem == item.id) {
            nameList += item.name
          }
        })
      })
      this.ruleForm.nameList = nameList
      this.allGoodsData.recProvince = this.ruleForm.dizhi[0]
      this.allGoodsData.recCity = this.ruleForm.dizhi[1]
      this.allGoodsData.recCounty = this.ruleForm.dizhi[2] || ''
      this.allGoodsData.recName = this.ruleForm.recName
      this.allGoodsData.recPhone = this.ruleForm.recPhone
      this.allGoodsData.recAddress = this.ruleForm.recAddress
      this.allGoodsData.deliveryWay = this.ruleForm.deliveryWay
      this.allGoodsData.transType = this.ruleForm.transType
      this.getPostAge()
    },
    checkRadio() {
      this.$set(this.ruleForm, 'dizhi', [])
      let arr = []
      this.addressList.forEach((item) => {
        if (item.pkId == this.moren) {
          this.ruleForm.recName = item.recName
          this.ruleForm.nameList = item.recArea
          this.ruleForm.recPhone = item.recPhone
          this.ruleForm.recAddress = item.recAddress
          arr = [
            item.recProvince + '',
            item.recCity + '',
            (item.recCounty || '') + '',
          ]
        }
      })
      arr = arr.filter((s) => {
        return s && s.trim()
      })
      this.$set(this.ruleForm, 'dizhi', arr)
      this.allGoodsData.deliveryWay = this.ruleForm.deliveryWay
      this.allGoodsData.transType = this.ruleForm.transType
      this.allGoodsData.recProvince = this.ruleForm.dizhi[0]
      this.allGoodsData.recCity = this.ruleForm.dizhi[1]
      this.allGoodsData.recCounty = this.ruleForm.dizhi[2]
      this.allGoodsData.recName = this.ruleForm.recName
      this.allGoodsData.recPhone = this.ruleForm.recPhone
      this.allGoodsData.recAddress = this.ruleForm.recAddress
      this.getPostAge()
      this.$forceUpdate()
    },
    getPostAge() {
      if (this.userInfo.registerShare == 0 || this.userInfo.registerFans == 0) {
        this.setGoodlistType()
        this.queryAdressPostage()
      } else {
        let deleteList = []
        this.shoppingArr.forEach((item) => {
          deleteList.push({
            shoppingId: item,
          })
        })
        this.allGoodsData.deleteList = deleteList
        api.queryPostage(this.allGoodsData).then((res) => {
          this.ruleForm.postage = Number(res.data.postage).toFixed(2)
          this.totalAmont =
            parseFloat(this.allDataObj.price) + parseFloat(res.data.postage)
            this.totalAmont = this.totalAmont.toFixed(2)
        })
      }
    },
    setGoodlistType() {
      let carList = {
        channel: this.allData.source,
        pkId: this.allData.pkId,
        quantity: this.goodsNum,
        waresItemsParamList: [
          {
            pkWaresSpecsSku: this.hasChecked,
          },
        ],
      }
      this.orderItemsParams = [carList]
    },
    queryAdressPostage() {
      api
        .queryAdressPostage(
          Object.assign({}, this.allGoodsData, {
            orderItemsParams: this.postList,
          })
        )
        .then((res) => {
          this.ruleForm.postage = res.data.postage
          this.totalAmont =
            parseFloat(this.allDataObj.price) + parseFloat(res.data.postage)
        })
    },
    // getMember() {
    //   this.allGoodsData.upgradeMemberCode = this.ruleForm.upgradeMemberCode
    //   api.memLevel(this.allGoodsData).then((res) => {
    //     if (res.data.isEnough) {
    //       this.ruleForm.gradeName = res.data.gradeName
    //     } else {
    //       this.isLoading.close()
    //     }
    //   })
    // },
    getTransList() {
      api.transportList().then((res) => {
        this.transList = res.data
      })
    },
    getDeliveryList() {
      api.deliveryList().then((res) => {
        this.deliList = res.data
      })
    },
    delAds(id) {
      this.$confirm('确定要删除该收货地址吗' + '?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api.delAddress(id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功' + '!',
          })
          this.getAddressList()
        })
      })
    },
    getAllArea() {
      api.allArea().then((res) => {
        this.areaData = res.data
      })
    },
    changeAds(id) {
      this.$refs.addAddress.isShowAddress(true, this.areaData, id)
    },
    setDefaultAds(id) {
      api.addressDefault(id).then((res) => {
        this.getAddressList()
      })
    },
    // 同意协议
    agree(val) {
      this.agreementShow = val
    },
    openAddress() {
      this.$refs.addAddress.isShowAddress(true, this.areaData)
    },
    getAddressList() {
      api.addressList({}).then((res) => {
        this.addressList = res.data
        this.addressList.forEach((item) => {
          if (item.isDefault == 1) {
            this.moren = item.pkId
            this.checkRadio()
          }
        })
        // this.moren = this.addressList[0].pkId
      })
    },
    // 斑马线
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'warning-row'
      } else if (rowIndex % 2 == 1) {
        return 'success-row'
      }
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}
.rt {
  border-bottom: 5px solid rgba(7, 7, 7, 0.05);
  padding: 45px 60px 15px 60px;
  .rti {
    margin-right: 80px;
  }
  .zc {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-right: 20px;
  }
  .zca {
    font-size: 18px;
    font-weight: bold;
    color: #00417C;
  }
}
.demo-ruleForm {
  margin-top: 20px;
  overflow: hidden;
}
.padRow {
  padding: 0 60px;
}
::v-deep .el-input__suffix {
  right: auto;
  .el-input__validateIcon {
    position: absolute;
  }
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-select .el-input__suffix {
  right: 0;
}
::v-deep .el-icon-circle-check {
  color: #009900;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 28px;
}
.xian1 {
  padding: 10px 60px;
  border-bottom: 5px solid rgba(7, 7, 7, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.nox {
  padding: 10px 60px;
}
.title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}
.lan {
  font-size: 18px;
  font-weight: 400;
  color: #3499ff;
  cursor: pointer;
}
.local {
  padding: 0px 60px;
  .local_i {
    display: flex;
    align-items: center;
    padding: 30px 90px;
  }
  .local_a {
    background: #eeeeee;
    border-radius: 8px 8px 8px 8px;
  }
  .local1 {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-right: 50px;
  }
  .local2 {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin-right: 70px;
    cursor: pointer;
  }
  .local3 {
    font-size: 14px;
    font-weight: 400;
    color: #f92a28;
    cursor: pointer;
  }
}
::v-deep .el-radio {
  margin-right: 0;
}
.guoqi {
  .el-select-dropdown__item {
    height: 26px;
    // text-align: center;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .shortName {
    margin-left: 10px;
  }
}
.guoqikang {
  ::v-deep input {
    // height: 100px;
  }
}

.imgSize {
  height: 20px;
}
.dizhi {
  ::v-deep .el-cascader {
    width: 100%;
  }
}
::v-deep .el-cascader .el-input__suffix {
  right: 0;
}
.zhan {
  height: 250px;
}
.tfooter {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 10;
  .footer_t {
    padding: 5px 60px 15px 60px;
    background: #ededed;
    .footer_tt {
      justify-content: right;
      display: flex;
      margin-top: 10px;
    }
  }
  .footer_b {
    text-align: right;
    padding: 10px 60px 10px 60px;
    background: #fff;
  }
}
.f1 {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.f2 {
  font-size: 18px;
  font-weight: 500;
  color: #f43c3a;
  margin-right: 40px;
}
.f3 {
  font-size: 14px;
  font-weight: 400;
  color: #384a8a;
}
.f4 {
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.btn {
  background: var(--primary-color);
  border-radius: 8px 8px 8px 8px;
  padding: 12px 40px;
  display: inline-block;
  color: #fff;
  font-size: 18px;
  margin-top: 10px;
  cursor: pointer;
}
.goods {
  padding: 20px 0;

  img {
    width: 88px;
    height: 88px;
  }
}
.goods_t {
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  // justify-content: center;
  img {
    width: 88px;
    height: 88px;
    margin-right: 10px;
  }
}
.goods_tit {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-top: 10px;
  display: flex;

  .goods_tit_l {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .goods_tit_r {
    // width: 150px;
  }
}
.tab_b {
  text-align: right;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  padding: 20px 60px 0 0;
}
</style>