creatCustomInfo.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. <template>
  2. <view class="pages flex flex_column">
  3. <view class="forms" v-if="carInfo">
  4. <view class="forms-tits">车辆信息</view>
  5. <view class="flex align_center">
  6. <view class="labes">车辆品牌:</view>
  7. <view class="inputs">{{carInfo.carBrand}}</view>
  8. </view>
  9. <view class="flex align_center">
  10. <view class="labes">车型:</view>
  11. <view class="inputs">{{carInfo.carModel}}</view>
  12. </view>
  13. <view class="flex align_center">
  14. <view class="labes">里程数:</view>
  15. <view class="inputs">{{carInfo.mileage}}KM</view>
  16. </view>
  17. <view class="flex align_center">
  18. <view class="labes">车牌号:</view>
  19. <view class="inputs">{{carInfo.vehicleNumber}}</view>
  20. </view>
  21. </view>
  22. <view class="forms">
  23. <view class="forms-tits">客户联系方式</view>
  24. <view class="flex align_center">
  25. <view class="labes"><text>*</text>客户姓名:</view>
  26. <view class="inputs"><u-input :focus="focusInput" v-model="form.customName" maxlength="30" border clearable type="text" placeholder="请输入客户姓名"></u-input></view>
  27. </view>
  28. <view class="flex align_center">
  29. <view class="labes"><text>*</text>手机号码:</view>
  30. <view class="inputs"><u-input v-model="form.customMobile" type="number" maxlength="11" border clearable placeholder="请输入手机号码"></u-input></view>
  31. </view>
  32. <view class="flex align_center">
  33. <view class="labes"><text>*</text>验证码:</view>
  34. <view class="inputs"><u-input v-model="form.vericode" type="number" maxlength="6" border clearable placeholder="请输入验证码"></u-input></view>
  35. <view class="btns" @click="checkMobile()" >{{codeText}}</view>
  36. </view>
  37. <view class="forms-foot flex align_center" @click="readXy()">
  38. <u-checkbox v-model="checkedXy">您已知晓</u-checkbox>
  39. <text class="links">《箭冠轮胎质保法律条款》</text>
  40. </view>
  41. </view>
  42. <view class="buttons flex align_center">
  43. <u-button type="default" @click="toBack">上一步</u-button>
  44. <u-button type="primary" :loading="loading" @click="saveForm">确定</u-button>
  45. </view>
  46. <!-- 图文验证码 -->
  47. <uni-popup @change="changeModal" ref="imageTxtPopup" type="center">
  48. <popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
  49. </uni-popup>
  50. </view>
  51. </template>
  52. <script>
  53. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  54. import popupCon from '@/components/uni-popup/popup-con.vue'
  55. import {
  56. sendPhoneVerifyCode,
  57. verifyPhoneCode
  58. } from '@/api/data.js'
  59. import {
  60. isvalidPhone
  61. } from '@/libs/validate.js'
  62. import{ traceWarrantySave, getTraceCodeQueryList } from '@/api/trace.js'
  63. export default {
  64. components: {
  65. uniPopup,
  66. popupCon
  67. },
  68. data() {
  69. return {
  70. changeImg: false, // 是否重新更换图形验证码
  71. randomCode: '', // 图片验证码随机码
  72. popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
  73. codeText: '获取验证码',
  74. getCodeing: false,
  75. totalTime: 60,
  76. isDisabled: false ,// 倒计时按钮是否禁用
  77. checkedXy: false,
  78. carInfo:{
  79. vin: '',
  80. mileage: '',
  81. vehicleNumber: '',
  82. carBrand: '',
  83. carModel: '',
  84. },
  85. form:{
  86. customName: '',
  87. customMobile: '',
  88. vericode: ''
  89. },
  90. uuid: [],
  91. loading: false
  92. }
  93. },
  94. onLoad() {
  95. const tempData = this.$store.state.vuex_uuidTempData
  96. this.uuid = tempData&&tempData.traceCodeList ? tempData.traceCodeList : [],
  97. this.carInfo = Object.assign(this.carInfo, tempData.carInfo)
  98. this.form = Object.assign(this.form,tempData&&tempData.customerInfo ? tempData.customerInfo : {})
  99. this.form.vericode = ''
  100. },
  101. methods: {
  102. toBack(){
  103. uni.redirectTo({
  104. url: "/pagesA/qualityPolicy/creatCarInfo"
  105. })
  106. },
  107. readXy(){
  108. const baseUrl = getApp().globalData.baseUrl
  109. uni.navigateTo({
  110. url: "/pagesA/h5Page/index?src="+baseUrl.replace('/saas/clz/','/')+'/zbd/clause.html'
  111. })
  112. },
  113. // 获取验证码
  114. getCode() {
  115. let sid = null
  116. sid = setInterval(() => {
  117. if (this.totalTime > 0) {
  118. this.totalTime = this.totalTime - 1
  119. this.codeText = '已发送' + this.totalTime + 's'
  120. if (this.totalTime < 60) {
  121. this.isDisabled = true
  122. }
  123. } else {
  124. this.isDisabled = false
  125. clearInterval(sid)
  126. this.getCodeing = false
  127. this.codeText = '获取验证码'
  128. this.totalTime = 60
  129. }
  130. }, 1000)
  131. },
  132. // 验证手机
  133. checkMobile() {
  134. if(this.isDisabled){return}
  135. if (!this.getCodeing) {
  136. if (this.form.customMobile) {
  137. console.log(!isvalidPhone(this.form.customMobile))
  138. if (!isvalidPhone(this.form.customMobile)) {
  139. uni.showToast({
  140. title: '请输入正确的手机号码',
  141. icon: 'none'
  142. })
  143. return false
  144. } else {
  145. this.getCodeing = true
  146. this.retsetCode()
  147. // 图文验证码
  148. this.$refs.imageTxtPopup.open()
  149. }
  150. }else{
  151. uni.showToast({
  152. title: '请输入手机号码',
  153. icon: 'none'
  154. })
  155. }
  156. }
  157. },
  158. changeModal(val) {
  159. if (val.show == false) {
  160. this.getCodeing = false
  161. }
  162. },
  163. // 验证图片验证码
  164. captchaVerify(code, nowRandomCode) {
  165. const _this = this
  166. let obj = {}
  167. obj.mobile = this.form.customMobile
  168. obj.random = nowRandomCode
  169. obj.code = code
  170. obj.signName = '修配易码通'
  171. // 发送短信验证码
  172. sendPhoneVerifyCode(obj).then(res => {
  173. console.log(JSON.stringify(res.data))
  174. if (res.status == 200) { // 验证码输入正确
  175. _this.randomCode = nowRandomCode // 图片验证码随机码
  176. // 关闭 图形验证码 弹框
  177. _this.$refs.imageTxtPopup.close()
  178. // 开启倒计时
  179. _this.getCode()
  180. uni.showToast({
  181. icon: 'none',
  182. title: '验证码发送成功'
  183. })
  184. } else { // 验证码输入错误
  185. _this.retsetCode()
  186. uni.showToast({
  187. icon: 'none',
  188. title: res.message,
  189. duration: 5000
  190. })
  191. }
  192. })
  193. },
  194. // 重新触发获取图片验证码
  195. retsetCode() {
  196. const _this = this
  197. _this.code = ''
  198. _this.randomCode = ''
  199. // 切换验证码重新校验
  200. _this.changeImg = false
  201. _this.$nextTick(function() {
  202. _this.changeImg = true
  203. })
  204. },
  205. async saveForm(){
  206. if(this.form.customName == ''){
  207. uni.showToast({
  208. icon: 'none',
  209. title: '请输入客户名称'
  210. })
  211. return
  212. }
  213. if(this.form.customMobile == ''){
  214. uni.showToast({
  215. icon: 'none',
  216. title: '请输入电话号码'
  217. })
  218. return
  219. }
  220. if(this.form.vericode == ''){
  221. uni.showToast({
  222. icon: 'none',
  223. title: '请输入验证码'
  224. })
  225. return
  226. }
  227. if(!this.checkedXy){
  228. uni.showToast({
  229. icon: 'none',
  230. title: '请勾选已知晓并阅读《箭冠轮胎质保法律条款》'
  231. })
  232. return
  233. }
  234. this.$store.state.vuex_uuidTempData.customerInfo = this.form
  235. const formData = this.$store.state.vuex_uuidTempData
  236. console.log(formData)
  237. // 验证验证码是否正确
  238. const phoneCodeIsOk = await verifyPhoneCode({mobile: this.form.customMobile, code: this.form.vericode })
  239. if(phoneCodeIsOk.status == 200){
  240. const params = {...formData.carInfo,...formData.customerInfo}
  241. const uuidList = []
  242. formData.traceCodeList.map(item => {
  243. uuidList.push(item.traceCode)
  244. })
  245. params.traceCodeList = uuidList
  246. params.clientFlag = 'applet'
  247. console.log(params)
  248. // 保存数据
  249. this.loading = true
  250. const res = await traceWarrantySave(params)
  251. uni.showToast({
  252. icon: 'none',
  253. title: res.message
  254. })
  255. if(res.status == 200){
  256. uni.redirectTo({
  257. url: "/pagesA/qualityPolicy/resultOrder"
  258. })
  259. }
  260. this.loading = false
  261. }else{
  262. uni.showToast({
  263. icon: 'none',
  264. title: '验证码不正确'
  265. })
  266. this.form.vericode = ''
  267. }
  268. }
  269. }
  270. }
  271. </script>
  272. <style lang="less">
  273. .pages{
  274. height: 100vh;
  275. background: #f8f8f8;
  276. padding-bottom: 6rem;
  277. overflow: auto;
  278. .buttons{
  279. padding: 1rem 2rem 2rem;
  280. position: fixed;
  281. width: 100%;
  282. bottom: 0;
  283. left: 0;
  284. background: #fff;
  285. z-index: 10000;
  286. border-top: 1px solid #eee;
  287. justify-content: space-around;
  288. /deep/ .u-btn{
  289. width: 7rem;
  290. }
  291. }
  292. }
  293. .forms{
  294. background: #fff;
  295. margin-bottom: 0.5rem;
  296. .forms-tits{
  297. font-weight: bold;
  298. color: #333;
  299. }
  300. .forms-foot{
  301. padding-left: 1.5rem;
  302. color: #999;
  303. .links{
  304. color: #55aaff;
  305. }
  306. /deep/.u-checkbox__label{
  307. margin-right: 0;
  308. }
  309. }
  310. > view{
  311. border-bottom: 1px solid #eee;
  312. padding: 0.6rem 1rem;
  313. }
  314. .labes{
  315. width: 5.2rem;
  316. text{
  317. color: red;
  318. margin-right: 5px;
  319. }
  320. }
  321. .inputs{
  322. flex-grow: 1;
  323. }
  324. .btns{
  325. padding: 0 0.3rem;
  326. text-align: center;
  327. color: dodgerblue;
  328. font-size: 0.8rem;
  329. width: 5rem;
  330. }
  331. }
  332. </style>