award-information.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. <template>
  2. <view >
  3. <navbar :config="config" backColor="#999999"></navbar>
  4. <view class="info-page">
  5. <view class="info-item">
  6. <view class="info-title">
  7. 领奖人名称:
  8. </view>
  9. <view class="info-value">
  10. <input v-model="formData.receivePrizePersonName" class="info-value-input" placeholder="请输入姓名" />
  11. </view>
  12. </view>
  13. <view class="info-item" v-if="prizeType === 4">
  14. <view class="info-title">
  15. 收获地址:
  16. </view>
  17. <view class="province" @click.stop="areaShow = true">
  18. <view :class="['province-item zw-one-row',formData.receiveProvinceName ? '' : 'input-placeholder']">
  19. {{formData.receiveProvinceName || '请选择'}}
  20. <text class="province-item-icon iconfont_yige">&#xe65f;</text>
  21. </view>
  22. <view :class="['province-item zw-one-row',formData.receiveCityName ? '' : 'input-placeholder']">
  23. {{formData.receiveCityName || '请选择'}}
  24. <text class="province-item-icon iconfont_yige">&#xe65f;</text>
  25. </view>
  26. <view :class="['province-item zw-one-row',formData.receiveAreaName ? '' : 'input-placeholder']">
  27. {{formData.receiveAreaName || '请选择'}}
  28. <text class="province-item-icon iconfont_yige">&#xe65f;</text>
  29. </view>
  30. </view>
  31. <view class="info-value">
  32. <input v-model="formData.receiveAddress" class="info-value-input" placeholder="请输入详细地址" />
  33. </view>
  34. </view>
  35. <view class="info-item">
  36. <view class="info-title">
  37. 领奖人手机号码:
  38. </view>
  39. <view class="info-value">
  40. <input v-model="formData.receivePrizePersonMobile" type="tel" class="info-value-input"
  41. placeholder="请输入电话号码" />
  42. </view>
  43. <view class="info-value">
  44. <input type="tel" v-model="formData.captcha" class="info-value-input" placeholder="请输入验证码" />
  45. <text class="info-value-code" @click.stop="getCode()">{{codeText}}</text>
  46. </view>
  47. </view>
  48. <view class="submit-btn-box">
  49. <view class="submit-btn" @click.stop="onSubmit()">
  50. 确认提交
  51. </view>
  52. </view>
  53. <u-select v-model="areaShow" mode="mutil-column-auto" :list="newProvinceDataList"
  54. @confirm="areaConfirm"></u-select>
  55. </view>
  56. </view>
  57. </template>
  58. <script>
  59. import {
  60. setSupplement
  61. } from "@/api/Lottery.js"
  62. import {
  63. smsCode
  64. } from "@/api/government.js"
  65. export default {
  66. data() {
  67. return {
  68. config: {
  69. back: true,
  70. title: '填写领奖信息',
  71. color: 'black',
  72. backgroundColor: [1, '#fff'],
  73. statusBarFontColor: 'black'
  74. },
  75. areaShow: false,
  76. activityJoinRecordId: null,
  77. prizeType: null, // 0谢谢参与,1积分,2优惠券,3线下虚拟商品,4线下实物商品
  78. newProvinceDataList: [],
  79. provinceValue: {
  80. area_name: '',
  81. area_code: ''
  82. },
  83. codeText: "获取验证码",
  84. codeInterval: null,
  85. formData: {
  86. receivePrizePersonMobile: '',
  87. captcha: '',
  88. receivePrizePersonName: '',
  89. receiveProvinceName: '',
  90. receiveProvinceCode: '',
  91. receiveCityName: '',
  92. receiveCityCode: '',
  93. receiveAreaName: '',
  94. receiveAreaCode: '',
  95. receiveAddress: '',
  96. },
  97. submitLoading: false
  98. }
  99. },
  100. onLoad(opt) {
  101. this.activityJoinRecordId = opt.activityJoinRecordId || null;
  102. this.prizeType = Number(opt.prizeType) || null;
  103. // this.prizeType = 4;
  104. this.getAreaList2()
  105. },
  106. methods: {
  107. getCode() {
  108. if (this.codeText === '获取验证码') {
  109. if (!this.formData.receivePrizePersonMobile.match(this.$mConfig.telRegex)) {
  110. this.$mUtil.toast('请输入正确手机号');
  111. return false;
  112. }
  113. try {
  114. clearInterval(this.codeInterval);
  115. this.codeInterval = null;
  116. } catch (e) {
  117. //TODO handle the exception
  118. };
  119. let codeNum = 60;
  120. this.codeInterval = setInterval(() => {
  121. codeNum -= 1
  122. this.codeText = `${codeNum}s`;
  123. if (codeNum <= 0) {
  124. clearInterval(this.codeInterval);
  125. this.codeInterval = null;
  126. this.codeText = "获取验证码"
  127. }
  128. }, 1000);
  129. console.log('请求验证码接口')
  130. smsCode({
  131. mobile: this.formData.receivePrizePersonMobile
  132. }).then(res => {
  133. this.$u.toast('验证码已发送');
  134. }).finally(e => {
  135. uni.hideLoading();
  136. })
  137. }
  138. },
  139. // 获取省市区
  140. getAreaList2() {
  141. let that = this;
  142. let req = this.$http.get('/cnarea/tree-lbs', {});
  143. req.then(res => {
  144. console.log('getAreaList2 = ', res)
  145. let provincesList = res.tree.children;
  146. let multiIndex = [0, 0, 0];
  147. // for (let i = 0; i < provincesList.length; i++) {
  148. // this.newProvinceDataList[0].push(provincesList[i]);
  149. // if (provincesList[i].value == this.dataform.province_code) {
  150. // multiIndex[0] = i;
  151. // }
  152. // for (let c = 0; c < provincesList[i].children.length; c++) {
  153. // this.newProvinceDataList[1].push(provincesList[i].children[c]);
  154. // if (provincesList[i].children[c].value == this.dataform.city_code) {
  155. // multiIndex[1] = c;
  156. // }
  157. // if (provincesList[i].children[c].children) {
  158. // for (let a = 0; a < provincesList[i].children[c].children.length; a++) {
  159. // this.newProvinceDataList[2].push(provincesList[i].children[c].children[a]);
  160. // if (provincesList[i].children[c].children[a].value == this.dataform
  161. // .area_code) {
  162. // multiIndex[2] = a;
  163. // }
  164. // }
  165. // } else {
  166. // this.newProvinceDataList[2] = [];
  167. // }
  168. // }
  169. // }
  170. this.newProvinceDataList = provincesList
  171. // console.log(this.newProvinceDataList)
  172. // that.oldpProvinceDataList = provincesList;
  173. // that.multiIndex = multiIndex;
  174. // that.getAreaList(that.newProvinceDataList[2][that.multiIndex[2]].value, 'street');
  175. })
  176. return req;
  177. },
  178. // 获取地区
  179. areaConfirm(e) {
  180. console.log('areaConfirm = ', e)
  181. if (e.length > 0) {
  182. this.formData.receiveProvinceName = e[0].label;
  183. this.formData.receiveProvinceCode = e[0].value;
  184. this.formData.receiveCityName = e[1].label;
  185. this.formData.receiveCityCode = e[1].value;
  186. this.formData.receiveAreaName = e[2].label;
  187. this.formData.receiveAreaCode = e[2].value;
  188. // this.getAreaList(this.dataform.area_code, 'street');
  189. // this.dataform.street_name = "";
  190. // this.dataform.street_code = "";
  191. // this.dataform.community_name = "";
  192. // this.dataform.community_code = ""
  193. }
  194. },
  195. onSubmit() {
  196. const params = {}
  197. try {
  198. if (!this.formData.receivePrizePersonName) {
  199. throw new Error('请输入领奖人名称')
  200. }
  201. params.receivePrizePersonName = this.formData.receivePrizePersonName;
  202. if (this.prizeType === 4) {
  203. if (!this.formData.receiveProvinceName) {
  204. throw new Error('请选择省')
  205. }
  206. if (!this.formData.receiveCityName) {
  207. throw new Error('请选择市')
  208. }
  209. if (!this.formData.receiveAreaName) {
  210. throw new Error('请选择区')
  211. }
  212. if (!this.formData.receiveAddress) {
  213. throw new Error('请填写详细地址')
  214. }
  215. params.receiveProvinceName = this.formData.receiveProvinceName;
  216. params.receiveProvinceCode = this.formData.receiveProvinceCode;
  217. params.receiveCityName = this.formData.receiveCityName;
  218. params.receiveCityCode = this.formData.receiveCityCode;
  219. params.receiveAreaName = this.formData.receiveAreaName;
  220. params.receiveAreaCode = this.formData.receiveAreaCode;
  221. params.receiveAddress = this.formData.receiveAddress;
  222. }
  223. if (!this.formData.receivePrizePersonMobile.match(this.$mConfig.telRegex)) {
  224. throw new Error('请输入正确手机号')
  225. }
  226. params.receivePrizePersonMobile = this.formData.receivePrizePersonMobile;
  227. if (!this.formData.captcha || this.formData.captcha.length !== 4) {
  228. throw new Error('请输入验证码')
  229. }
  230. params.captcha = this.formData.captcha;
  231. params.activityJoinRecordId = this.activityJoinRecordId;
  232. this.submitLoading = true
  233. setSupplement(params).then(res => {
  234. uni.showToast({
  235. title: '提交成功',
  236. icon: 'none'
  237. })
  238. try {
  239. const app = getCurrentPages()
  240. const PrevPage = app[app.length - 2]
  241. if (PrevPage && PrevPage.route === "pages/game/winning-list") {
  242. PrevPage.getMyWinningVal()
  243. }
  244. } catch (e) {
  245. //TODO handle the exception
  246. }
  247. setTimeout(() => {
  248. uni.navigateBack()
  249. }, 500)
  250. }).finally(() => {
  251. this.submitLoading = false
  252. })
  253. } catch (e) {
  254. //TODO handle the exception
  255. console.log(e.message)
  256. uni.showToast({
  257. title: e.message,
  258. icon: 'none'
  259. })
  260. }
  261. }
  262. }
  263. }
  264. </script>
  265. <style lang="scss" scoped>
  266. .info-page {
  267. padding: 0 60rpx;
  268. .info-item {
  269. .info-title {
  270. width: 100%;
  271. height: 75rpx;
  272. display: flex;
  273. flex-direction: row;
  274. align-items: flex-end;
  275. font-size: 28rpx;
  276. // font-weight: 300;
  277. text-align: left;
  278. color: #1a1a1a;
  279. }
  280. .province {
  281. padding-top: 20rpx;
  282. width: 100%;
  283. display: flex;
  284. justify-content: space-between;
  285. border-bottom: 1rpx solid #D9D9D9;
  286. .province-item {
  287. width: 32%;
  288. height: 70rpx;
  289. // border: 1rpx solid #ccc;
  290. border-radius: 10rpx;
  291. // display: flex;
  292. position: relative;
  293. // background-color: red;
  294. padding: 0 24rpx 0 10rpx;
  295. line-height: 70rpx;
  296. text-align: center;
  297. font-size: 28rpx;
  298. font-family: PingFang SC, PingFang SC-Light;
  299. color: #666666;
  300. .province-item-icon {
  301. position: absolute;
  302. right: 0;
  303. top: 50%;
  304. transform: translateY(-50%) rotate(90deg);
  305. }
  306. }
  307. }
  308. .info-value {
  309. height: 87rpx;
  310. border-bottom: 1rpx solid #D9D9D9;
  311. display: flex;
  312. align-items: center;
  313. .info-value-input {
  314. flex: 1;
  315. height: 100%;
  316. font-size: 28rpx;
  317. font-size: 28rpx;
  318. font-family: PingFang SC, PingFang SC-Light;
  319. color: #666666;
  320. // background-color: red;
  321. }
  322. .info-value-code {
  323. width: 175rpx;
  324. height: 54rpx;
  325. background: linear-gradient(90deg, #3db8d2 2%, #46c8d5 97%);
  326. border-radius: 27rpx;
  327. text-align: center;
  328. line-height: 54rpx;
  329. font-size: 24rpx;
  330. font-family: PingFang SC, PingFang SC-Regular;
  331. font-weight: 400;
  332. color: #ffffff;
  333. }
  334. }
  335. }
  336. }
  337. .submit-btn-box {
  338. width: 100%;
  339. height: 148rpx;
  340. position: fixed;
  341. left: 0;
  342. bottom: 0;
  343. right: 0;
  344. z-index: 1;
  345. .submit-btn {
  346. width: 690rpx;
  347. height: 80rpx;
  348. background: linear-gradient(92deg, #3cb7d2 2%, #44c5d5 98%);
  349. border-radius: 40rpx;
  350. text-align: center;
  351. line-height: 80rpx;
  352. margin: 34rpx auto;
  353. font-size: 32rpx;
  354. font-family: PingFang SC, PingFang SC-Regular;
  355. font-weight: 400;
  356. text-align: center;
  357. color: #ffffff;
  358. }
  359. }
  360. /deep/ .input-placeholder {
  361. font-size: 28rpx;
  362. color: #cccccc !important;
  363. }
  364. </style>