123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- <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">里程数:</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"
- })
- },
- readXy(){
- const baseUrl = getApp().globalData.baseUrl
- uni.navigateTo({
- url: "/pagesA/h5Page/index?src="+baseUrl.replace('/saas/clz/','/')+'zbd/clause.html'
- })
- },
- // 获取验证码
- 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)
- uni.showToast({
- icon: 'none',
- title: res.message
- })
- if(res.status == 200){
- uni.redirectTo({
- url: "/pagesA/qualityPolicy/resultOrder"
- })
- }
- this.loading = false
- }else{
- uni.showToast({
- icon: 'none',
- title: '验证码不正确'
- })
- this.form.vericode = ''
- }
- }
- }
- }
- </script>
- <style lang="less">
- .pages{
- height: 100vh;
- background: #f8f8f8;
- padding-bottom: 6rem;
- overflow: auto;
-
- .buttons{
- padding: 1rem 2rem 2rem;
- position: fixed;
- width: 100%;
- bottom: 0;
- left: 0;
- background: #fff;
- z-index: 10000;
- 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>
|