pk-mall/src/view/user/order/pay/index.vue

<template>
    <div>
      <indexHeaders/>
    </div>
  <RightSliderBar/>

  <el-dialog class="address" :show-close="true"  center v-model="addressFlags" title="上传打款凭证">
    <el-form ref="loginFormRefss" :model="addressStates" :rules="ruless">
      <div class="address-content">
<!--        <div class="address-view" style="margin-left: 16px">-->
<!--          <div class="star">*</div>-->
<!--          <div >打款银行卡号：</div>-->
<!--          <div>-->
<!--            <el-form-item prop="bankCard">-->
<!--              <el-input-->
<!--                  v-model.trim="addressStates.bankCard"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="address-view" style="margin-left: 16px">-->
<!--          <div class="star">*</div>-->
<!--          <div >银行卡开户行：</div>-->
<!--          <div>-->
<!--            <el-form-item prop="bankName">-->
<!--              <el-input-->
<!--                  v-model.trim="addressStates.bankName"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="address-view" style="margin-left: 30px">-->
<!--          <div class="star">*</div>-->
<!--          <div>银行卡户名：</div>-->
<!--          <div>-->
<!--            <el-form-item prop="userName">-->
<!--              <el-input-->
<!--                  v-model.trim="addressStates.userName"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </div>-->
        <div class="address-view" style="margin-left: 30px">

          <div class="star">*</div>
          <div>打款凭证：</div>
          <div>
            <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-change="handleChange"
                :file-list="fileList"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div>{{fileSrc}}</div>
            <div  class="upload-s" @click="uploads" style="margin-top: 40px">立即上传</div>
          </div>
        </div>
      </div>
      <div class="button-s">
        <div class="style" @click="addressFlags=false">取消</div>
        <div class="style colors" @click="addressTap()">确认添加</div>
      </div>
    </el-form>
  </el-dialog>
    <div>
      <div class="login-wrapper">
      <div class="order-tops">
        <div class="line-s">

        </div>
        <div class="line-s-right">

        </div>
        <div class="order-flex">
          <div class="order-views">
            <div class="img-icon">
              <img src="@/assets/img/order-s.png" >
            </div>
            <div class="name" >第一步：提交订单</div>
          </div>
          <div class="order-views">
            <div class="img-icon">
              <img src="@/assets/img/pay-icons1.png" >
            </div>
            <div class="name">第二步：支付订单</div>
          </div>
        </div>
      </div>
        <div class="submit">
          <div class="title">订单信息</div>
          <div class="submit-content">
            <div class="submit-view" v-if="payOrder.arr.address">
              <div class="submit-name">收货地址：</div>
              <div class="boxs" style="display:flex;">
                 <span>
                    {{payOrder.arr.address.name}}
              </span>
                <span style="margin-left: 10px">
                    {{payOrder.arr.address.address}}
              </span>
                <span style="margin-left: 10px">
                    {{payOrder.arr.address.mobile}}
              </span>
              </div>
            </div>
            <div class="submit-view" style="margin-top: 15px">
              <div class="submit-name">发票信息：</div>
              <div class="" v-if="payOrder.arr.tax==null">未开票</div>
              <div v-else>
                <div class="boxs" v-if="payOrder.arr.tax.u_type==1" style="display: flex">
<!--                  <span></span>-->
                  <div class="spans">
                    {{payOrder.arr.tax.name}}/
                  </div>
                  <div class="spans">
                    {{payOrder.arr.tax.id}}
                  </div>
                </div>
                <div class="boxs" style="padding-top: 5px;display: flex" v-if="payOrder.arr.tax.u_type==2 && payOrder.arr.tax.self_type==2">
                  <div class="spans">{{payOrder.arr.tax.com_name}}/</div>
                  <div class="spans">{{payOrder.arr.tax.tax_no}}/</div>
                </div>
                <div class="boxs" style="padding-top: 5px;display: flex" v-if="payOrder.arr.tax.u_type==2 && payOrder.arr.tax.self_type==1">
                  <div class="spans">{{payOrder.arr.paperType==1?'电子发票':'纸质发票'}}/</div>
                  <div class="spans">{{payOrder.arr.selfType==1?'专票':'普票'}}/</div>
                  <div class="spans">{{payOrder.arr.tax.com_name}}/</div>
                  <div class="spans">{{payOrder.arr.tax.bank_no}}</div>
                </div>
              </div>

            </div>
            <div class="invoice-contents" v-if="invoiceFlags">
              <div  class="flex-s">
                <div style="color: #333">发票信息</div>
                <div style="color: #4171B3" @click="updates">修改</div>
              </div>
              <div class="flex-content" v-if="typeIndex==0">
                <div class="divs">
                  <div>姓名：</div>
                  <div>{{FormState.name}}</div>
                </div>
              </div>
              <div class="flex-content" v-else>
                <div class="divs">
                  <div>开户名称：</div>
                  <div>{{FormState.cardName}}</div>
                </div>
                <div class="divs">
                  <div>开户行：</div>
                  <div>{{FormState.cardBank}}</div>
                </div>
                <div class="divs">
                  <div>税号：</div>
                  <div>{{FormState.cardNumber}}</div>
                </div>
              </div>
            </div>
            <div class="invoice-from" v-if="invoiceIndex!=2 && flags">
              <div class="invoiceSource">
                <div class="source" v-for="(item,index) in invoiceSource" @click="sourceIndex=index;clearIndex()" :class="sourceIndex==index?'colorStyle':''">
                  {{item}}
                </div>
                <div class="source-right">
                  选择开票信息
                </div>
              </div>
              <div class="invoiceSource">
                <div class="name">发票类型：</div>
                <div class="source" v-for="(item,index) in invoiceType" @click="typeIndex=index;clearIndex()" :class="typeIndex==index?'colorStyle':''">
                  {{item}}
                </div>
              </div>

              <el-form ref="loginFormRef" :model="FormState" :rules="rules">
                <div class="content" v-if="typeIndex==0">
                  <div class="invoice-texts">
                    <div class="invoice-view">
                      <div class="name">真实姓名：</div>
                      <el-form-item prop="name">
                        <el-input
                            v-model.trim="FormState.name"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="content" v-if="typeIndex==1">
                  <div class="invoice-texts">
                    <div class="invoice-view">
                      <div class="name">开户名称：</div>
                      <el-form-item prop="cardName">
                        <el-input
                            v-model.trim="FormState.cardName"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="invoice-texts">
                    <div class="invoice-view">
                      <div class="name" style="margin-left: 16px">开户行：</div>
                      <el-form-item prop="cardBank">
                        <el-input
                            v-model.trim="FormState.cardBank"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="invoice-texts">
                    <div class="invoice-view">
                      <div class="name" style="margin-left: 30px">税号：</div>
                      <el-form-item prop="cardNumber">
                        <el-input
                            v-model.trim="FormState.cardNumber"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="button">
                  <div class="style">取消</div>
                  <div class="style colors" @click="submittVolice">保存</div>
                </div>
              </el-form>

            </div>

          </div>
          <div class="shopping">
            <div class="shopping-title">
              <div>订单信息</div>
              <div>商品单价</div>
              <div>安装单价</div>
              <div>商品数量</div>
              <div>安装数量</div>
              <div>小计</div>
            </div>
            <div class="shopping-contents">
              <div class="shopping-lists" v-for="(item,index) in payOrder.arr.info">
                <div class="img" style="margin-left: 40px">
                  <img :src="item.goods.logo[0]" style="margin: 5px 0">
                  <div class="name overflow1">{{item.goods.name}};

                    {{item.sku.name}}
                  </div>
                </div>
                <div class="price">
                  ¥{{item.amount}}
                </div>
                <div class="price">
                  ¥{{item.amount_install_single}}
                </div>
                <div class="price">
                  {{item.num}}
                </div>
                <div class="price">
                  {{item.num_install}}
                </div>
                <div class="price" style="color: rgb(234, 40, 19);width: 200px">
                  ¥{{item.amount_total}}
                </div>
<!--                <div class="oper" @click="delGoods(index,item)">-->
<!--                  <img src="@/assets/img/del-goods.png" alt="">-->
<!--                </div>-->
              </div>
            </div>
          </div>
          <div class="shopping-total" v-if="payOrder.arr" style="margin-top: 20px">
            <div v-if="payOrder.arr.amount_coupon>0">优惠券：-{{payOrder.arr.amount_coupon||0}}</div>
            <div>商品件数： {{ payOrder.arr.num||0 }}</div>
            <div>安装件数： {{ payOrder.arr.num_install||0 }}</div>
            <div style="border-bottom: 1px solid #F1F1F1;padding-bottom: 20px">合计金额： {{ payOrder.arr.amount_total||0 }}</div>
            <div style="color: #EA2813">总计：{{ payOrder.arr.amount_pay ||0}}</div>

          </div>
<!--          <div class="shopping-total" v-else>-->
<!--            <div>商品件数：0</div>-->
<!--            <div>安装件数：0</div>-->
<!--            <div style="border-bottom: 1px solid #F1F1F1;padding-bottom: 20px">合计金额： 0</div>-->
<!--            <div style="color: #EA2813">总计：0</div>-->
<!--            <div class="buttons">-->
<!--              <div class="button" @click="returnSub" style="background:none;border: 1px solid #4171B3;color:#4171B3 ">-->
<!--                上一步-->
<!--              </div>-->
<!--              <div class="button">-->
<!--                去支付-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <div style="clear: both"></div>


        </div>
      <div class="submit">

        <div class="title">支付订单</div>

        <div class="submit-content">
          <div class="order-colors">
            支付到期时间<span style="margin-left: 20px">{{detailTime(payOrder.arr.continue_expire_time)}}</span>
          </div>
          <div class="submit-view">
              <div class="submit-name">订单状态：</div>
              <div>未支付</div>
          </div>
          <div class="submit-view" style="margin-top: 0" v-if="payOrder.arr.address">
            <div class="submit-name">收货信息：</div>
            <div>
              {{payOrder.arr.address.name}}
              {{payOrder.arr.address.mobile}}
              {{payOrder.arr.address.address}}
            </div>
          </div>
          <div class="submit-view">期望发货时间:<span style="margin-left: 10px;color: #333">{{dates(payOrder.arr.customer_send_time)}}</span></div>
          <div class="submit-view">
            <div class="submit-name">订单编号：</div>
            <div>
              {{ payOrder.arr.order_no }}
            </div>
          </div>
          <div class="submit-view">
            <div class="submit-name">付款金额：</div>
            <div style="color: #3172B9;font-size: 22px">
              ¥{{ payOrder.arr.amount_pay }}
            </div>
          </div>
          <div class="submit-view">
            <div class="submit-name">付款方式：</div>
            <div class="pay-list" @click="paySel(index)" v-for="(item,index) in payList" :class="payIndex==index?'payStyle':''">
              <div class="img">
                <img :src="item.src">
              </div>
              <div>{{item.name}}</div>
            </div>
          </div>
          <div class="base64" >
<!--           {{qrCode}}-->
            <!-- <img v-if="qrCode.qr.qr!='' && payIndex==1 || payIndex==2" :src="qrCode.qr.qr"> -->
            <div class="code_right" v-if="qrCode.qr.qr!='' && payIndex==1 || payIndex==2">
              <div class="left">
                <div class="title">{{payIndex == 1?'微信支付':'支付宝支付'}}</div>
                <div class="pay">应付金额<span class="money">{{ payOrder.arr.amount_pay ||0}}</span>元</div>
              </div>
              <div class="center">
                <div class="info">订单提交成功，请尽快付款！</div>
                <img :src="qrCode.qr.qr">
                <div class="bottom">
                  <img src="@/assets/img/sys.png" alt="" style="width: 25px;height: 25px;">
                  <div class="text">扫描二维码支付</div>
                </div>
              </div>
              <div class="right">
                <img src="@/assets/img/wx_pay_way.png" alt="" style="width: 150px;height: 200px" v-if="payIndex == 1">
                <img src="@/assets/img/zfb_pay_way.png" alt="" style="width: 150px;height: 200px" v-if="payIndex == 2">
              </div>
            </div>
          </div>
          <div v-if="payIndex==3 || payIndex==0" class="pay-s" @click="paySubmit()">立即支付</div>
          <div v-if="payIndex==4" class="pay-s" @click="copyUrl()">复制链接</div>
          <div v-if="payIndex==5">
            <div class="box">
                <div class="name">收款信息</div>
                <div class="view">
                  公司名称：{{info.account_name}}
                </div>
                <div class="view">
                  银行名称：{{info.bank_name}}
                </div>
                <div class="view">
                  银行账号：{{splices(info.bank_no)}}
                </div>
            </div>
            <div style="display: flex">
              <div class="submits" v-if="!flags" @click="submit_s()">提交</div>
              <div class="submits" style="margin-left: 20px" v-if="!flags" @click="addressFlags=true">上传打款凭证</div>
            </div>

            <div v-if="flags" style="display: flex;margin-left:355px">
              <div style="margin-left: 0" class="submits" @click="addressFlags=true">重新上传</div>
              <div  style="margin-left: 40px!important;"  class="submits">审核中...</div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
    <div>
    <RightSliderBar/>
    </div>
  <Footer/>
</template>
<script setup>
const splices=(value)=>{
  let value1=value
  if(value){
    let values=value.split("");
    values.splice(4,0,' ')
    values.splice(9,0,' ')
    values.splice(14,0,' ')
    values.splice(19,0,' ')
    let value1=values.join("")
    return value1
  }
  // return value.split('').join(' ')
}
const dates=(value)=>{
  var data = new Date(value);
  var month =data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
  var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
  return data.getFullYear() + "-" + month + "-" + date
}
//记录访问次数
const submit_s=()=>{
  let data={
    id:payOrder.arr.id,
    bank_no:addressStates.bankCard,
    bank_name:addressStates.bankName,
    bank_username:addressStates.userName,
    // image:imageUrl.value
  }
  po_complete(data).then((res)=>{
    if(res.code==1){
      ElMessage.success('提交成功')
    }else{
      ElMessage.error(res.msg)

    }
  })
}
if(localStorage.getItem('USER__INFO__')){
  user_lsp().then((res)=>{
  })
}
import { useRouter } from 'vue-router'
import { provide, reactive, ref,onMounted,onUnmounted } from 'vue'
import UserNav from '@/components/User/UserNav.vue'
import indexHeaders from '@/components/Index/indexHeaders.vue'

import ShoppingCart from '@/components/User/ShoppingCart.vue'
import LeftSliderBar from '@/components/Index/LeftSliderBar.vue'
import RightSliderBar from '@/components/Index/RightSliderBar.vue'
import CountDate from '@/components/Index/CountDate.vue'
import Footer from '@/components/Tool/Footer.vue'
import DynamicYzm from '@/components/form/DynamicYzm.vue'
import {router} from "@/router";
const urlTap=ref('')
const imageUrl=ref('')
const flags=ref(false)
const flag_s=ref(false)
import { ElMessage, ElMessageBox } from 'element-plus'
const addressFlags=ref(false)
const loginFormRefss=ref('')
const timer=ref(null)
const m1=mitt();
onUnmounted(()=>{
  clears()
})

onMounted(()=>{
  orderInfo()
})
const copyUrl=()=>{
  let url=window.location.href
  //创建input标签
  let input = document.createElement('input')
  //将input的值设置为需要复制的内容
  input.value = '【屏酷】打开链接就可以帮我付款啦,订单号'+payOrder.arr.order_no+' , '+'订单金额'+payOrder.arr.amount_pay+'   '+url;
  //添加input标签
  document.body.appendChild(input)
  //选中input标签
  input.select()
  //执行复制
  document.execCommand('copy')
  //移除input标签
  document.body.removeChild(input)
  ElMessage.success('复制成功')

}
m1.on('set_interval',()=>{
  if(flag_s.value==false){
	  flag_s.value=true;
	  console.error(flag_s.value)
	  timer.value=setInterval(()=>{
	    orderDetail({id:payOrder.arr.id}).then((res)=>{
	      if(res.data.status==5){
	        router.push({path:'/user/order/success'})
	  		clears();
	      }
	    })
	  },1000)
  }
})
const returnSub=()=>{
  router.push({ path: '/user/order/submit' })
}
const clears=()=>{
	clearInterval(timer.value)
	m1.off('setInterVals')
}
const addressTap=()=>{
  // loginFormRefss.value.validate(valid => {
  //   if (!valid) {
  //     return false
  //   }
  // })
  // if(imageUrl.value==''){
  //   ElMessage({
  //     message: '请上传打款凭证',
  //     type: 'warning'
  //   })
  //   return;
  // }
  let data={
    id:payOrder.arr.id,
    bank_no:addressStates.bankCard,
    bank_name:addressStates.bankName,
    bank_username:addressStates.userName,
    image:imageUrl.value
  }
  po_complete(data).then((res)=>{
    if(res.code==1){
      ElMessage.success('上传打款凭证成功')
      addressFlags.value=false
      flags.value=true
    }else{
      ElMessage.error(res.msg)

    }
  })
}
const paySubmit=()=>{
  window.location.href=urlTap.value.url
}
const uploads=()=>{
  let fd = new FormData();
  fd.append("file",files.file.raw);
  console.error(fd)
  upload_s(fd).then((res)=>{
    imageUrl.value=res.data.url
  })
}
const qrCode=reactive({
  qr:''
})
const addressStates = reactive({
  bankCard: '',
  bankName:'',
  userName:'',
})
const ruless = {
  bankCard: formRules('must'),
  bankName: formRules('must'),
  userName: formRules('must')
}
const { t } = useI18n()
const payOrder=reactive({
  arr:[]
})
const orderInfo=()=>{
  let url=getUrlParams2(window.location.href);
  //如果用户没登录的时候记录地址
  if(localStorage.getItem("USER__INFO__")){
  }else{
    localStorage.setItem("redirectUrl",JSON.stringify(url))

  }
  orderDetail({"id":url.id}).then((res)=>{
    payOrder.arr=res.data
	 pay_order(res.data.id,1);
  })

}
let info=ref('')

const pay_order=(id,indexs)=>{
  let data={
    id:id||payOrder.arr.id,
    pay_type:indexs
  }

  payOrders(data).then((res)=>{
	  console.error(res)
      if(res.code==1 &&res.data!=null){
        qrCode.qr=res.data
        urlTap.value=res.data
        info.value=res.data
      }else if(res.code==1 &&res.data==null){
        qrCode.value=null
        qrCode.qr.qr=''
      }
  })
}
const payIndex=ref(0)
const FormState = reactive({
  name: '',
  cardName:'',
  cardBank:'',
  cardNumber:'',
})
const paySel=(index)=>{
  payIndex.value=index;
  pay_order('',index+1)
  setTimeout(()=>{
	  if(payIndex.value==1 || payIndex.value==2){
	    m1.emit('set_interval')
		flag_s.value=true;
	  }else{
		flag_s.value=false
	    clears();
	  }
  },50)
}
const payList= [
  { name: '企业网银', src: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/index/pay1.png' },
  { name: '微信', src: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/index/pay5.png' },
  { name: '支付宝', src: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/index/pay6.png',},
  { name: '银联', src: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/index/pay3.png'},
  { name: '代付',  src: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/index/pay4.png' },
  { name: '线下支付',  src: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/index/pay2.png' },
  ]

const rules = {
  name: [{ required: true, message: t('home.login.form.nameRequired'), trigger: 'blur' }],
  cardName: [{ required: true, message: t('home.login.form.cardNameRequired'), trigger: 'blur' }],
  cardBank: [{ required: true, message: t('home.login.form.cardBankRequired'), trigger: 'blur' }],
  cardNumber: [{ required: true, message: t('home.login.form.cardNumberRequired'), trigger: 'blur' }],
  address: [{ required: true, message: t('home.login.form.addressRequired'), trigger: 'blur' }],
  addressDetail: [{ required: true, message: t('home.login.form.addressDetailRequired'), trigger: 'blur' }],
  userName: [{ required: true, message: t('home.login.form.userNameRequireds'), trigger: 'blur' }],
  userPhone: [{ required: true, message: t('home.login.form.phoneRequired'), trigger: 'blur' }],
}
const addressState = reactive({
  address: '',
  addressDetail:'',
  userName:'',
  userPhone:'',
})
import {useI18n} from "@/hooks/web/useI18n";
import {detailTime, getUrlParams2, isLogin} from "@/utils";
import {orderDetail, payOrders, po_complete, upload_s, user_lsp} from "@/api/menu1";
import {formRules} from "@/utils/config";
import mitt from "mitt";
const invoice=['电子发票','纸质发票','不需要']
const invoiceType=['个人','企业']
const invoiceSource=['专票','普票']
let addressFlag=ref(false)
let addressSel=ref(false)
let couponFlag=ref(false)
let invoiceFlag=ref(false)
let typeIndex=ref(0)
let sourceIndex=ref(0)
let invoiceIndex=ref(0)
const clearIndex=()=>{
  FormState.name=''
  FormState.cardName=''
  FormState.cardBank=''
  FormState.cardNumber=''
}
const handleAvatarSuccess=(res)=>{
  console.error(res)
}
const fileSrc=ref('')
const files=ref({
  file:{}
})
const handleChange=(file,fileList)=>{
  files.file=file
  fileSrc.value=file.name
}
isLogin()

</script>

<style lang="less" scoped >
.pay-s{
  width: 122px;
  height: 40px;
  background: #4171B3;
  border-radius: 2px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 16px;
  margin:50px 0 0 400px;
  cursor: pointer;
}
.upload-s{
  cursor: pointer;
  width: 100px;
  height: 30px;
  background: #FFFFFF;
  color: #3171B8;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  margin-right: 25px;
  margin-bottom: 30px;
  border: 1px solid #3171B8;
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  border: 1px solid #f4f4f4;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  //width: 100px;
  //height: 100px;
  text-align: center;
  border: 1px solid #f1f1f1;
  padding: 40px;
}
.submits{
  width: 122px;
  height: 40px;
  background: #4171B3;
  border-radius: 2px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 16px;
  margin: 20px 0 0 510px;
  cursor: pointer;
}
.box{
  width: 480px;
  border:1px solid #3171B8;
  //height: 174px;
  //background: #D8D8D8;
  padding: 30px;
  margin-left: 100px;
  //opacity: 0.18;
  .name{
    color:#333;
    font-size: 18px;
    text-align: center;
  }
  .view{
    color: #999;
    font-size: 16px;
    margin-top: 20px;
    text-align: center;
  }

}
.base64{
  display: flex;
  img{
    width: 200px;
    height: 200px;
  }
  .code_right {
    //margin-left: 20px;
    margin: 20px 0 20px 20px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px 40px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 25px;
        background: #fff;
      }
      .pay {
        font-size: 20px;
      }
      .money {
        color: #EA2813;
      }
    }
    .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px 0;
      .info {
        font-size: 12px;
      }
      .bottom {
        margin-top: 10px;
        background: #ff7673;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 5px 0;
        .text {
          font-size: 14px;
          color: #fff;
          padding-left: 5px;
        }
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 0 0 40px;
    }
  }
}
.payStyle{
  border: 1px solid #3172B9!important;
}
.list {

  .list-contents {
    width: 314px;
    height: 100px;
    float: left;
    margin-bottom: 30px;
    margin-left:20px;

    .coupon {

    }

    .coupon-content {
      position: relative;

      .coupon-bottom {
        padding: 0 20px;
        height: 20px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        margin-top: 0;

        .buttons {
          color: #E3E3E3 !important;
          border: 1px solid #E3E3E3 !important;
        }

        .coupon-button {
          width: 84px;
          height: 26px;
          background: #F9F9F9;
          border-radius: 18px;
          border: 1px solid #74D2D4;
          text-align: center;
          line-height: 26px;
          color: #74D2D4;
          font-size: 12px;
          margin-top: 10px;
        }

        .coupon-time {
          color: #238183;
          font-size: 12px;
        }
      }

      .coupon-info {
        display: flex;
        padding: 25px 20px 0 20px;

        .coupon-money {
          font-size: 30px;
          color: #fff;

          .coupon-color {
            color: #fff;
          }

          .color-s {
            color: #238183;
          }
        }

        .coupon-condition {
          font-size: 12px;
          color: #fff;
          margin: 15px 0 0 20px;
        }
      }

      .coupon-id {
        color: #999999;
        font-size: 12px;
        margin: 0px 0 0 220px;
        padding-top: 10px;
        position: absolute;
        top: 20px;
      }
    }
  }
}
.coupon{
  img{
    width: 314px;
    height: 100px;
    position: absolute;
  }
}
.coupon-s{
  padding: 60px 0;
}
.address-sels{
  padding: 40px  80px;
  .address-views{
    margin-bottom: 20px;
    display: flex;
    font-size: 18px;
    color: #333;
    .checks{
      img{
        width: 20px;
        height:20px;
      }
    }
    .check{
      width: 16px;
      height: 16px;
      border: 1px solid #999999;
      border-radius: 10px;
      margin-top: 2px;
      margin-right: 10px;
    }
  }
}
.button-s{
  display: flex;
  justify-content: center;
  .colors{
    background-color: #3171B8!important;
    color: #fff!important;
  }
  .style{
    cursor: pointer;
    width: 140px;
    height: 30px;
    background: #FFFFFF;
    color: #3171B8;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    margin-right: 25px;
    border: 1px solid #3171B8;
  }
}
.address-content{
  padding: 0 70px;
  .star{
    color: #EE341A;
    margin: 0 10px 0 0px;
  }
  .address-view{
    display: flex;
    line-height: 36px;
  }
}
/deep/ .el-textarea__inner{
  width: 387px;
}
/deep/ .address-view .el-input{
  width: 387px;
  height: 36px;
  background: #FFFFFF;
  font-size: 16px;
}
.el-dialog__header{
  text-align: center;
}
/deep/ .message .el-input{
  width: 540px;
  height: 68px;
  background: #FFFFFF;
  font-size: 16px;
}
/deep/ .message .el-input .el-input__inner{
  height: 68px;
}
  /deep/ .el-form-item__error{
    margin-left: 10px;
  }
  /deep/ .invoice-view .el-input{
    width: 298px;
    height: 33px;
    background: #FFFFFF;
    margin-left: 10px;
  }
  /deep/ .sum .el-input{
    width: 66px;
    height: 30px;
    background: #F0F2F5;
    //border-radius: 2px;
  }
  /deep/ .sum .el-input .el-input__inner{
    background: #F0F2F5;
    border: none;
    height: 36px;
  }
    .login-wrapper{
      background-color: #F7F8FA;
      padding: 0 260px;
      .order-tops{
        // height: 193px;
        background: #FFFFFF;
        border-radius: 2px;
        width: 100%;
        position: relative;
        .line-s{
          width: 100%;
          position: absolute;
          height: 1px;
          background-color: #4171B3;
          top: 50%;
        }
        .order-flex{
          display: flex;
        .order-views{
          padding: 23px 0 13px 0;
          width: 50%;
          text-align: center;
          .name{
            color: #3171B8;
            font-size: 18px;
            margin-top: 10px;
          }
          .img-icon{
            position: relative;
            img{

              width: 50px;
              height: 50px;
            }
          }
        }
        }
      }
      .shopping-total{
        .buttons{
          width: 160px;
          height: 46px;
          background: #4171B3;
          border-radius: 2px;
          text-align: center;
          line-height: 46px;
          color: #fff;
          font-size: 16px;
          margin: 30px auto;
          cursor: pointer;
        }
        width: 339px;
        //height: 1px;
        float: right;
        text-align: center;
        color: #333333;
        font-size: 18px;
        div{
          margin-bottom: 20px;
        }
      }
      .submit{
        .order-colors{
          //width: 334px;
          max-width: 270px;
          margin-bottom: 10px;
          height: 43px;
          font-size: 14px;
          line-height: 43px;
          background: #EE341A;
          border-radius: 12px;
          color: #fff;
          text-align: center;
        }
        .message{
          padding: 0;
        }
        .coupon{
          display: flex;
          padding: 30px 0;
          line-height: 20px;
          .texts{
            margin-left: 10px;
          }
          .checks{
            img{
              width: 20px;
              height:20px;
            }
          }
          .check{
            width: 16px;
            height: 16px;
            border: 1px solid #999999;
            border-radius: 10px;
            margin-top: 2px;
          }
        }
        .shopping{
          .shopping-contents{
            .shopping-lists{
              background-color: #fff;
              display: flex;
              height: 110px;
              width: 100%;
              border-bottom: 1px solid #f4f4f4;
              .price{
                width: 170px;
                text-align: center;
                line-height: 110px;
                border-right: 1px solid #f4f4f4;
              }
              .oper{
                cursor: pointer;
                img{
                  width: 30px;
                  height: 30px;
                  margin: 60px 0 0 100px;
                }
              }
              .sum{
                width: 200px;
                text-align: center;
                border-right: 1px solid #f4f4f4;
                display: flex;
                //line-height: 150px;
                justify-content: center;
                padding: 60px 0;
                .add{
                  width: 36px;
                  height: 36px;
                  background: #F0F2F5;
                  //border-radius: 2px;
                  line-height: 36px;
                }

              }
              .img{
                width: 500px;
                border-right: 1px solid #f4f4f4;
                display: flex;
                .name{
                  color: #333;
                  font-size: 15px;
                  padding:35px 20px;
                  width: 300px;
                  height: 40px;
                  line-height: 40px;
                }
                .checks{
                  margin:45px 20px;
                  img{
                    width: 20px;
                    height: 20px;
                  }
                }
                .check{
                  width: 16px;
                  height: 16px;
                  border: 1px solid #999999;
                  border-radius: 10px;
                  margin: 60px 20px;
                }
                img{
                  width: 100px;
                  height: 100px;
                  margin: 15px 0;
                }
              }
            }
          }
          .shopping-title{
            display: flex;
            height: 50px;
            background: #F0F2F5;
            border-radius: 2px;
            border: 1px solid #D7DBE0;
            line-height: 50px;
            padding: 0 0 0 60px;
            justify-content: space-between;
            div:nth-child(1){
              flex:0 0 420px;
              //flex: 1;
            }
            div:nth-child(2){
              flex: 0 0 130px;
              text-align: center;
              margin-left: 0;
            }
            div:nth-child(3){
              flex: 0 0 100px;
              text-align: center;

            }
            div:nth-child(4){
              flex: 0 0 120px;
              text-align: center;
              margin-right: 20px;
            }
            div:nth-child(5){
              flex: 0 0 130px;
              text-align: left;
            }
            div:nth-child(6){
              flex: 0 0 120px;
              text-align: left;
            }
            div:nth-child(7){
              flex: 0 0 120px;
              text-align: left;
            }
            div:nth-child(8){
              flex: 0 0 150px;
              text-align: left;
            }
          }
        }
        .invoice-from{
          .button{
            display: flex;
            justify-content: center;
            .colors{
              background-color: #3171B8!important;
              color: #fff!important;
            }
            .style{
              width: 140px;
              height: 30px;
              background: #FFFFFF;
              color: #3171B8;
              font-size: 16px;
              text-align: center;
              line-height: 30px;
              margin-right: 25px;
            }
          }
          width: 480px;
          //height: 215px;
          background: #D8D8D8;
          padding: 20px;
          margin-left: 90px;
          .invoice-texts{
            .name{
              color: #999999;
              font-size: 16px;
            }
            .invoice-view{
              display: flex;
              line-height: 33px;
            }
          }
          .invoiceSource{
            display: flex;
            margin-bottom: 20px;
            .name{
              color: #999;
              font-size: 16px;
              margin-top: 8px;
            }
            .colorStyle{
              border: 1px solid #4171B3;
              color: #333!important;
            }
            .source-right{
              color: #4171B3;
              font-size: 14px;
              margin-left: 200px;
              margin-top: 5px;
            }
            .source{
              box-sizing: border-box;
              cursor: pointer;
              width: 58px;
              border-radius: 2px;
              height: 33px;
              text-align: center;
              line-height: 33px;
              color: #999;
              font-size: 16px;
              margin-right: 40px;
            }
          }
        }
        .title{
          height: 50px;
          background: #F0F2F5;
          border-radius: 2px;
          //border: 1px solid #D7DBE0;
          line-height: 50px;
          text-align: center;
        }
        .boxs{
          border: 1px solid #CECECE;
          padding: 0 20px;
          font-size: 14px;
          span{
            color:#999;
            font-size: 14px!important;
          }
          .spans{
            color:#999;
            font-size: 14px;
            height: 30px;
            line-height: 24px;
          }
        }
        .submit-content{
          background: #FFFFFF;
          padding: 30px 40px 10px;

          .submit-view{
            cursor: pointer;
            margin-bottom: 5px;
            font-size: 14px;
            span{
              color: #999;
              font-size: 16px;

            }
            .pay-list{
              text-align: center;
              margin-right: 40px;
              padding: 0 20px;
              img{
                width: 40px;
                height: 40px;
                margin-top:10px;
              }
            }
            .texts{
              box-sizing: border-box;
            }
            .submit-name{
              margin-right: 10px;
            }
            .check{
              color: #999;
              font-size: 14px;
            }
            .submit-button{
              width: 155px;
              height: 30px;
              background: #3171B8;
              text-align: center;
              line-height: 30px;
              color: #fff;
              font-size: 16px;
              margin: 5px 20px 0 0;
            }
            .address-right{
              width: 155px;
              height: 40px;
              background: #3171B8;
              text-align: center;
              line-height: 40px;
              color: #fff;
              font-size: 16px;
              margin: 0 0 0 680px;
            }
            .address-add{
              width: 164px;
              height: 40px;
              border-radius: 2px;
              border: 1px solid #CECECE;
              color: #999;
              font-size: 18px;
              text-align: center;
              line-height: 40px;
              margin: -7px 0 0 0;
            }
            .boxStyle{
              border: 1px solid #4171B3!important;
              padding: 0 8px;
              color: #333!important;

            }
            display: flex;
            line-height: 40px;
            .submit-lable{
              color: #999;
              font-size: 16px;
              margin-right: 30px;
            }
            .name{
              color: #333;
              font-size: 18px;
            }
            .classStyle{
              border: 1px solid #4171B3;
              width: 70px;
              height: 30px;
              border-radius: 2px;
              text-align: center;
              line-height: 30px;
              color: #333;
            }
          }
        }
      }
    }
</style>