creatCustomInfo.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <template>
  2. <view class="pages flex flex_column">
  3. <view class="forms">
  4. <view class="forms-tits">车辆信息</view>
  5. <view class="flex align_center">
  6. <view class="labes">车辆品牌:</view>
  7. <view class="inputs">日产(东风)</view>
  8. </view>
  9. <view class="flex align_center">
  10. <view class="labes">车型:</view>
  11. <view class="inputs">轩逸</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.carNo}}</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.customerName" 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.phone" 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">
  38. <u-checkbox v-model="checkedXy"></u-checkbox>
  39. <text class="links">您已知晓《XXX轮胎质保法律条款》</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" @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. isvalidPhone
  57. } from '@/libs/validate.js'
  58. export default {
  59. components: {
  60. uniPopup,
  61. popupCon
  62. },
  63. data() {
  64. return {
  65. changeImg: false, // 是否重新更换图形验证码
  66. randomCode: '', // 图片验证码随机码
  67. popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
  68. codeText: '获取验证码',
  69. getCodeing: false,
  70. totalTime: 60,
  71. isDisabled: false ,// 倒计时按钮是否禁用
  72. checkedXy: true,
  73. carInfo:{
  74. vinCode: '',
  75. mileage: '',
  76. carNo: ''
  77. },
  78. form:{
  79. customerName: '',
  80. phone: '',
  81. vericode: ''
  82. },
  83. uuid: [],
  84. }
  85. },
  86. onLoad() {
  87. const tempData = this.$store.state.vuex_uuidTempData
  88. this.uuid = tempData&&tempData.uuid ? tempData.uuid : [],
  89. this.carInfo = Object.assign(this.carInfo, tempData.carInfo)
  90. },
  91. methods: {
  92. toBack(){
  93. uni.navigateBack()
  94. },
  95. // 获取验证码
  96. getCode() {
  97. let sid = null
  98. sid = setInterval(() => {
  99. if (this.totalTime > 0) {
  100. this.totalTime = this.totalTime - 1
  101. this.codeText = '已发送' + this.totalTime + 's'
  102. if (this.totalTime < 60) {
  103. this.isDisabled = true
  104. }
  105. } else {
  106. this.isDisabled = false
  107. clearInterval(sid)
  108. this.getCodeing = false
  109. this.codeText = '获取验证码'
  110. this.totalTime = 60
  111. }
  112. }, 1000)
  113. },
  114. // 验证手机
  115. checkMobile() {
  116. if(this.isDisabled){return}
  117. if (!this.getCodeing) {
  118. if (this.form.phone) {
  119. console.log(!isvalidPhone(this.form.phone))
  120. if (!isvalidPhone(this.form.phone)) {
  121. uni.showToast({
  122. title: '请输入正确的手机号码',
  123. icon: 'none'
  124. })
  125. return false
  126. } else {
  127. this.getCodeing = true
  128. this.retsetCode()
  129. // 图文验证码
  130. this.$refs.imageTxtPopup.open()
  131. }
  132. }else{
  133. uni.showToast({
  134. title: '请输入手机号码',
  135. icon: 'none'
  136. })
  137. }
  138. }
  139. },
  140. changeModal(val) {
  141. if (val.show == false) {
  142. this.getCodeing = false
  143. }
  144. },
  145. // 验证图片验证码
  146. captchaVerify(code, nowRandomCode) {
  147. const _this = this
  148. let obj = {}
  149. obj.mobile = this.form.phone
  150. obj.random = nowRandomCode
  151. obj.code = code
  152. obj.signName = '修配易码通'
  153. obj.openid = this.$store.state.vuex_openid
  154. // 发送短信验证码
  155. sendLoginVerifyCode(obj).then(res => {
  156. console.log(JSON.stringify(res.data))
  157. if (res.status == 200) { // 验证码输入正确
  158. _this.randomCode = nowRandomCode // 图片验证码随机码
  159. // 关闭 图形验证码 弹框
  160. _this.$refs.imageTxtPopup.close()
  161. // 开启倒计时
  162. _this.getCode()
  163. uni.showToast({
  164. icon: 'none',
  165. title: '验证码发送成功'
  166. })
  167. } else { // 验证码输入错误
  168. _this.retsetCode()
  169. uni.showToast({
  170. icon: 'none',
  171. title: res.message,
  172. duration: 5000
  173. })
  174. }
  175. })
  176. },
  177. // 重新触发获取图片验证码
  178. retsetCode() {
  179. const _this = this
  180. _this.code = ''
  181. _this.randomCode = ''
  182. // 切换验证码重新校验
  183. _this.changeImg = false
  184. _this.$nextTick(function() {
  185. _this.changeImg = true
  186. })
  187. },
  188. saveForm(){
  189. if(this.form.customerName == ''){
  190. uni.showToast({
  191. icon: 'none',
  192. title: '请输入客户名称'
  193. })
  194. return
  195. }
  196. if(this.form.phone == ''){
  197. uni.showToast({
  198. icon: 'none',
  199. title: '请输入电话号码'
  200. })
  201. return
  202. }
  203. if(this.form.vericode == ''){
  204. uni.showToast({
  205. icon: 'none',
  206. title: '请输入验证码'
  207. })
  208. return
  209. }
  210. this.$store.state.vuex_uuidTempData.customerInfo = this.form
  211. uni.navigateTo({
  212. url: "/pagesA/qualityPolicy/resultOrder"
  213. })
  214. }
  215. }
  216. }
  217. </script>
  218. <style lang="less">
  219. .pages{
  220. height: 100vh;
  221. background: #f8f8f8;
  222. padding-bottom: 6rem;
  223. overflow: auto;
  224. .buttons{
  225. padding: 1rem 2rem 2rem;
  226. position: fixed;
  227. width: 100%;
  228. bottom: 0;
  229. left: 0;
  230. background: #fff;
  231. z-index: 10000;
  232. border-top: 1px solid #eee;
  233. justify-content: space-around;
  234. /deep/ .u-btn{
  235. width: 7rem;
  236. }
  237. }
  238. }
  239. .forms{
  240. background: #fff;
  241. .forms-tits{
  242. font-weight: bold;
  243. color: #333;
  244. }
  245. .forms-foot{
  246. padding-left: 1.5rem;
  247. .links{
  248. color: #999;
  249. }
  250. /deep/.u-checkbox__label{
  251. margin-right: 0;
  252. }
  253. }
  254. > view{
  255. border-bottom: 1px solid #eee;
  256. padding: 0.6rem 1rem;
  257. }
  258. .labes{
  259. width: 5.2rem;
  260. text{
  261. color: red;
  262. margin-right: 5px;
  263. }
  264. }
  265. .inputs{
  266. flex-grow: 1;
  267. }
  268. .btns{
  269. padding: 0 0.3rem;
  270. text-align: center;
  271. color: dodgerblue;
  272. font-size: 0.8rem;
  273. }
  274. }
  275. </style>