|
@@ -0,0 +1,361 @@
|
|
|
+<template>
|
|
|
+ <view class="pages flex flex_column">
|
|
|
+ <uniNavBar title="创建质保单-客户信息" statusBar :shadow="false" @click-left="toBack"></uniNavBar>
|
|
|
+ <view class="forms" v-if="carInfo">
|
|
|
+ <view class="forms-tits">车辆信息</view>
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="labes">车辆品牌:</view>
|
|
|
+ <view class="inputs">{{carInfo.carBrand}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="labes">车型:</view>
|
|
|
+ <view class="inputs">{{carInfo.carModel}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="labes" @click="showTip">里程数<u-icon color="#ff8100" size="30" name="question-circle-fill"></u-icon>:</view>
|
|
|
+ <view class="inputs">{{carInfo.mileage}}KM</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="labes">车牌号:</view>
|
|
|
+ <view class="inputs">{{carInfo.vehicleNumber||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="forms">
|
|
|
+ <view class="forms-tits">客户联系方式</view>
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="labes"><text>*</text>客户姓名:</view>
|
|
|
+ <view class="inputs"><u-input :focus="focusInput" v-model="form.customName" maxlength="30" border clearable type="text" placeholder="请输入客户姓名"></u-input></view>
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="labes"><text>*</text>手机号码:</view>
|
|
|
+ <view class="inputs"><u-input v-model="form.customMobile" type="number" maxlength="11" border clearable placeholder="请输入手机号码"></u-input></view>
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="labes"><text>*</text>验证码:</view>
|
|
|
+ <view class="inputs"><u-input v-model="form.vericode" type="number" maxlength="6" border clearable placeholder="请输入验证码"></u-input></view>
|
|
|
+ <view class="btns" @click="checkMobile()" >{{codeText}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="forms-foot flex align_center">
|
|
|
+ <u-checkbox v-model="checkedXy">您已知晓</u-checkbox>
|
|
|
+ <text class="links" @click="readXy()">《箭冠轮胎质保法律条款》</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="buttons flex align_center">
|
|
|
+ <u-button type="default" @click="toBack">上一步</u-button>
|
|
|
+ <u-button type="primary" :loading="loading" @click="saveForm">确定</u-button>
|
|
|
+ </view>
|
|
|
+ <!-- 图文验证码 -->
|
|
|
+ <uni-popup @change="changeModal" ref="imageTxtPopup" type="center">
|
|
|
+ <popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
|
|
+ import popupCon from '@/components/uni-popup/popup-con.vue'
|
|
|
+ import {
|
|
|
+ sendPhoneVerifyCode,
|
|
|
+ verifyPhoneCode
|
|
|
+ } from '@/api/data.js'
|
|
|
+ import {
|
|
|
+ isvalidPhone
|
|
|
+ } from '@/libs/validate.js'
|
|
|
+ import{ traceWarrantySave, getTraceCodeQueryList } from '@/api/trace.js'
|
|
|
+ import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ uniPopup,
|
|
|
+ popupCon,
|
|
|
+ uniNavBar
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ changeImg: false, // 是否重新更换图形验证码
|
|
|
+ randomCode: '', // 图片验证码随机码
|
|
|
+ popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
|
|
|
+ codeText: '获取验证码',
|
|
|
+ getCodeing: false,
|
|
|
+ totalTime: 60,
|
|
|
+ isDisabled: false ,// 倒计时按钮是否禁用
|
|
|
+ checkedXy: false,
|
|
|
+ carInfo:{
|
|
|
+ vin: '',
|
|
|
+ mileage: '',
|
|
|
+ vehicleNumber: '',
|
|
|
+ carBrand: '',
|
|
|
+ carModel: '',
|
|
|
+ },
|
|
|
+ form:{
|
|
|
+ customName: '',
|
|
|
+ customMobile: '',
|
|
|
+ vericode: ''
|
|
|
+ },
|
|
|
+ uuid: [],
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ const tempData = this.$store.state.vuex_uuidTempData
|
|
|
+ this.uuid = tempData&&tempData.traceCodeList ? tempData.traceCodeList : [],
|
|
|
+ this.carInfo = Object.assign(this.carInfo, tempData.carInfo)
|
|
|
+ this.form = Object.assign(this.form,tempData&&tempData.customerInfo ? tempData.customerInfo : {})
|
|
|
+ this.form.vericode = ''
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ this.$store.state.vuex_uuidTempData.customerInfo = this.form
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toBack(){
|
|
|
+ uni.redirectTo({
|
|
|
+ url: "/pagesA/qualityPolicy/creatCarInfo"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showTip(){
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "使用超过3年或者行驶超过5万公里则不在质保期内。",
|
|
|
+ showCancel: false,
|
|
|
+ confirmText: "知道了"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ readXy(){
|
|
|
+ const baseUrl = getApp().globalData.baseUrl
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pagesA/h5Page/index?src="+baseUrl.replace('/saas/clz/','/')+'zbd/clause.html?t='+new Date().getTime()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getCode() {
|
|
|
+ let sid = null
|
|
|
+ sid = setInterval(() => {
|
|
|
+ if (this.totalTime > 0) {
|
|
|
+ this.totalTime = this.totalTime - 1
|
|
|
+ this.codeText = '已发送' + this.totalTime + 's'
|
|
|
+ if (this.totalTime < 60) {
|
|
|
+ this.isDisabled = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isDisabled = false
|
|
|
+ clearInterval(sid)
|
|
|
+ this.getCodeing = false
|
|
|
+ this.codeText = '获取验证码'
|
|
|
+ this.totalTime = 60
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ // 验证手机
|
|
|
+ checkMobile() {
|
|
|
+ if(this.isDisabled){return}
|
|
|
+ if (!this.getCodeing) {
|
|
|
+ if (this.form.customMobile) {
|
|
|
+ console.log(!isvalidPhone(this.form.customMobile))
|
|
|
+ if (!isvalidPhone(this.form.customMobile)) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入正确的手机号码',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+ this.getCodeing = true
|
|
|
+ this.retsetCode()
|
|
|
+ // 图文验证码
|
|
|
+ this.$refs.imageTxtPopup.open()
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入手机号码',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeModal(val) {
|
|
|
+ if (val.show == false) {
|
|
|
+ this.getCodeing = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 验证图片验证码
|
|
|
+ captchaVerify(code, nowRandomCode) {
|
|
|
+ const _this = this
|
|
|
+ let obj = {}
|
|
|
+ obj.mobile = this.form.customMobile
|
|
|
+ obj.random = nowRandomCode
|
|
|
+ obj.code = code
|
|
|
+ obj.signName = '修配易码通'
|
|
|
+ // 发送短信验证码
|
|
|
+ sendPhoneVerifyCode(obj).then(res => {
|
|
|
+ console.log(JSON.stringify(res.data))
|
|
|
+ if (res.status == 200) { // 验证码输入正确
|
|
|
+ _this.randomCode = nowRandomCode // 图片验证码随机码
|
|
|
+ // 关闭 图形验证码 弹框
|
|
|
+ _this.$refs.imageTxtPopup.close()
|
|
|
+ // 开启倒计时
|
|
|
+ _this.getCode()
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '验证码发送成功'
|
|
|
+ })
|
|
|
+ } else { // 验证码输入错误
|
|
|
+ _this.retsetCode()
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.message,
|
|
|
+ duration: 5000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 重新触发获取图片验证码
|
|
|
+ retsetCode() {
|
|
|
+ const _this = this
|
|
|
+ _this.code = ''
|
|
|
+ _this.randomCode = ''
|
|
|
+ // 切换验证码重新校验
|
|
|
+ _this.changeImg = false
|
|
|
+ _this.$nextTick(function() {
|
|
|
+ _this.changeImg = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async saveForm(){
|
|
|
+ if(this.form.customName == ''){
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入客户名称'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.form.customMobile == ''){
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入电话号码'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.form.vericode == ''){
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入验证码'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.checkedXy){
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请勾选已知晓并阅读《箭冠轮胎质保法律条款》'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$store.state.vuex_uuidTempData.customerInfo = this.form
|
|
|
+ const formData = this.$store.state.vuex_uuidTempData
|
|
|
+ console.log(formData)
|
|
|
+
|
|
|
+ // 验证验证码是否正确
|
|
|
+ const phoneCodeIsOk = await verifyPhoneCode({mobile: this.form.customMobile, code: this.form.vericode })
|
|
|
+ if(phoneCodeIsOk.status == 200){
|
|
|
+ const params = {...formData.carInfo,...formData.customerInfo}
|
|
|
+ const uuidList = []
|
|
|
+ formData.traceCodeList.map(item => {
|
|
|
+ uuidList.push(item.traceCode)
|
|
|
+ })
|
|
|
+ params.traceCodeList = uuidList
|
|
|
+ params.clientFlag = 'applet'
|
|
|
+ console.log(params)
|
|
|
+ // 保存数据
|
|
|
+ this.loading = true
|
|
|
+ const res = await traceWarrantySave(params)
|
|
|
+
|
|
|
+ if(res.status == 200){
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.message
|
|
|
+ })
|
|
|
+ this.$store.state.vuex_tempData = null
|
|
|
+ uni.redirectTo({
|
|
|
+ url: "/pagesA/qualityPolicy/resultOrder"
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: res.message,
|
|
|
+ confirmText: "知道了",
|
|
|
+ showCancel: false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '验证码不正确'
|
|
|
+ })
|
|
|
+ this.form.vericode = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.pages{
|
|
|
+ background: #f8f8f8;
|
|
|
+ padding-bottom: 6rem;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .buttons{
|
|
|
+ padding: 1rem 2rem 2rem;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 90;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ justify-content: space-around;
|
|
|
+ /deep/ .u-btn{
|
|
|
+ width: 7rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.forms{
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ .forms-tits{
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .forms-foot{
|
|
|
+ padding-left: 1.5rem;
|
|
|
+ color: #999;
|
|
|
+ .links{
|
|
|
+ color: #55aaff;
|
|
|
+ }
|
|
|
+ /deep/.u-checkbox__label{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > view{
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ padding: 0.6rem 1rem;
|
|
|
+ }
|
|
|
+ .labes{
|
|
|
+ width: 5.2rem;
|
|
|
+ text{
|
|
|
+ color: red;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .inputs{
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .btns{
|
|
|
+ padding: 0 0.3rem;
|
|
|
+ text-align: center;
|
|
|
+ color: dodgerblue;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ width: 5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|