creatCustomInfo.vue 9.5 KB

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