apply.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. <template>
  2. <view class="wrapper">
  3. <template v-if="isStep == 1">
  4. <view class="top-box" style="height: 135rpx;">
  5. <image src="../../static/img/vip-bg.png" mode=""></image>
  6. </view>
  7. <view class="top">
  8. <view class="top-tit">
  9. 鑫旺新零售VIP店长
  10. </view>
  11. <view class="top-btm">
  12. <text class="hx"></text><text>累计业绩达到12W可申请成为店长</text><text class="hx"></text>
  13. </view>
  14. </view>
  15. <view class="item">
  16. <view class="item-top">特权一</view>
  17. <view class="item-tit">
  18. 享受六折拿货价
  19. <view class="line"></view>
  20. </view>
  21. <view class="item-info">
  22. <view class="info-y"></view>
  23. <view class="info">所有商品享受六折的拿货价</view>
  24. </view>
  25. </view>
  26. <view class="item">
  27. <view class="item-top">特权二</view>
  28. <view class="item-tit">
  29. 销售奖励
  30. <view class="line"></view>
  31. </view>
  32. <view class="item-info">
  33. <view class="info-y"></view>
  34. <view class="info">推广更多会员享受更多销售奖励</view>
  35. </view>
  36. </view>
  37. <view class="item">
  38. <view class="item-top">特权三</view>
  39. <view class="item-tit">
  40. 区代业绩奖励
  41. <view class="line"></view>
  42. </view>
  43. <view class="item-info">
  44. <view class="info-y"></view>
  45. <view class="info">推广更多店长将有资格成为区代,享受更多业绩奖励</view>
  46. </view>
  47. </view>
  48. <view class="more">
  49. <image src="../../static/icon/i-left.png" mode=""></image>
  50. <view class="more-tit">
  51. 更多店长特权持续开放中,敬请期待
  52. </view>
  53. <image src="../../static/icon/i-right.png" mode=""></image>
  54. </view>
  55. <view class="btn" @click="changeStep">立即申请成为店长</view>
  56. </template>
  57. <template v-if="isStep == 2">
  58. <view class="tab-wrapper">
  59. <view class="tab-item">
  60. <view class="itemx">
  61. <view class="item-tit">姓名:</view>
  62. <input type="text" v-model="name" placeholder="请输入您的姓名"/>
  63. </view>
  64. <view class="itemx">
  65. <view class="item-tit">推荐人编号:</view>
  66. <input type="text" v-model="speed_id" placeholder="请输入推荐人编号"/>
  67. </view>
  68. <view class="itemx">
  69. <view class="item-tit">联系方式:</view>
  70. <input type="text" v-model="phone" placeholder="请输入您的手机号"/>
  71. </view>
  72. <view class="itemx">
  73. <view class="item-tit">验证码:</view>
  74. <input type="text" v-model="code" placeholder="请输入验证码"/>
  75. <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
  76. </view>
  77. </view>
  78. </view>
  79. <view class="up-wrapper">
  80. 身份证正反面
  81. <view class="imgs">
  82. <view class="imgs-item">
  83. <image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg('sfzz')"></image>
  84. <image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg('sfzz')"></image>
  85. </view>
  86. <view class="imgs-item">
  87. <image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg('sfzf')"></image>
  88. <image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg('sfzf')"></image>
  89. </view>
  90. </view>
  91. </view>
  92. <view class="up-wrapper">
  93. 营业执照
  94. <view class="imgs">
  95. <view class="imgs-item">
  96. <image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg(1)"></image>
  97. <image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg(1)"></image>
  98. </view>
  99. <view class="imgs-item">
  100. <image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg(2)"></image>
  101. <image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg(2)"></image>
  102. </view>
  103. </view>
  104. </view>
  105. <view class="btn-tc">
  106. </view>
  107. <view class="sub-btn">
  108. 提交申请
  109. </view>
  110. </template>
  111. </view>
  112. </template>
  113. <script>
  114. import { register, verify } from '@/api/login.js';
  115. import { upload } from '@/api/user.js';
  116. export default {
  117. data() {
  118. return {
  119. time: '', //保存倒计时对象
  120. countDown: 0,//倒计时
  121. isStep: 1,
  122. name: '',
  123. speed_id: '',
  124. phone: '',
  125. code: '',
  126. sfzz: '', //身份证正面
  127. sfzf: '' //身份证反面
  128. };
  129. },
  130. watch:{
  131. countDown(i) {
  132. if (i == 0) {
  133. clearInterval(this.time);
  134. }
  135. }
  136. },
  137. methods: {
  138. changeStep() {
  139. this.isStep = 2;
  140. },
  141. upImg(item) {
  142. let obj = this;
  143. upload({
  144. filename: ''
  145. }).then(res => {
  146. console.log(res[0].url);
  147. obj[item] = res[0].url
  148. }).catch( err => {
  149. console.log(err)
  150. })
  151. },
  152. //发送验证码
  153. verification() {
  154. let obj = this;
  155. if (this.phone == '') {
  156. this.$api.msg('请输入电话号码');
  157. return;
  158. }
  159. if (this.phone.length < 11) {
  160. this.$api.msg('请输入正确的手机号');
  161. return;
  162. }
  163. // 判断是否在倒计时
  164. if (obj.countDown > 0) {
  165. return false;
  166. } else {
  167. obj.countDown = 60;
  168. obj.time = setInterval(() => {
  169. obj.countDown--;
  170. }, 1000);
  171. //调用验证码接口
  172. verify({
  173. phone: obj.phone,
  174. type: 'register'
  175. })
  176. .then(({ data }) => {})
  177. .catch(err => {
  178. console.log(err);
  179. });
  180. }
  181. },
  182. }
  183. };
  184. </script>
  185. <style lang="scss" scoped>
  186. .wrapper {
  187. height: 100%;
  188. }
  189. .top {
  190. position: relative;
  191. z-index: 2;
  192. margin: 0 auto 49rpx;
  193. width: 674rpx;
  194. height: 231rpx;
  195. background: linear-gradient(-23deg, #ffe7be, #fed591);
  196. border-radius: 10rpx;
  197. .top-tit {
  198. padding-top: 80rpx;
  199. text-align: center;
  200. font-size: 49rpx;
  201. font-family: Source Han Sans CN;
  202. font-weight: 500;
  203. color: #6A4714;
  204. }
  205. .top-btm {
  206. margin-top: 35rpx;
  207. font-size: 19rpx;
  208. font-family: Source Han Sans CN;
  209. font-weight: 400;
  210. color: #6A4714;
  211. text-align: center;
  212. display: flex;
  213. justify-content: center;
  214. align-items: center;
  215. text {
  216. display: inline-block;
  217. padding: 0 4rpx;
  218. }
  219. .hx {
  220. width: 66rpx;
  221. height: 1rpx;
  222. background: #81504A;
  223. }
  224. }
  225. }
  226. .item {
  227. margin: 44rpx auto;
  228. width: 674rpx;
  229. // height: 176rpx;
  230. box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  231. border-radius: 10rpx;
  232. padding-bottom: 40rpx;
  233. .item-top {
  234. width: 85rpx;
  235. line-height: 36rpx;
  236. background-color: #fed591;
  237. border-radius: 10rpx 18rpx 18rpx 0;
  238. text-align: center;
  239. font-size: 20rpx;
  240. font-family: Source Han Sans CN;
  241. font-weight: 400;
  242. color: #975f4a;
  243. }
  244. .item-tit {
  245. display: inline-block;
  246. padding: 0 10rpx;
  247. font-size: 26rpx;
  248. font-family: Source Han Sans CN;
  249. font-weight: 500;
  250. color: #202020;
  251. margin-left: 68rpx;
  252. margin-top: 20rpx;
  253. .line {
  254. // width: 197rpx;
  255. margin-top: -10rpx;
  256. height: 15rpx;
  257. background: #FFF0C5;
  258. }
  259. }
  260. .item-info {
  261. display: flex;
  262. align-items: flex-start;
  263. padding-left: 68rpx;
  264. padding-top: 15rpx;
  265. // align-items: center;
  266. font-size: 21rpx;
  267. font-family: Source Han Sans CN;
  268. font-weight: 400;
  269. color: #6F6F6F;
  270. line-height: 40rpx;
  271. .info-y {
  272. width: 24rpx;
  273. height: 24rpx;
  274. background: #343238;
  275. border-radius: 50%;
  276. margin-right: 14rpx;
  277. margin-top: 8rpx;
  278. flex-shrink: 0;
  279. }
  280. .info {
  281. padding-right: 20rpx;
  282. }
  283. }
  284. }
  285. .btn {
  286. margin: 20rpx auto;
  287. width: 606rpx;
  288. height: 80rpx;
  289. background: linear-gradient(-23deg, #ffe7be, #fed591);
  290. border-radius: 40rpx;
  291. font-size: 35rpx;
  292. font-family: Source Han Sans CN;
  293. font-weight: 400;
  294. color: #704e1c;
  295. line-height: 80rpx;
  296. text-align: center;
  297. }
  298. .tab-wrapper {
  299. padding: 20rpx 30rpx;
  300. background-color: #f2f3f5;
  301. .itemx {
  302. margin: 0 auto;
  303. width: 100%;
  304. background-color: #fff !important;
  305. height: 100rpx;
  306. display: flex;
  307. // width: 690px;
  308. border: 1px #f4f4f4 solid;
  309. .code {
  310. width: 150rpx;
  311. flex-shrink: 0;
  312. text-align: center;
  313. font-size: 28rpx;
  314. font-family: PingFang SC;
  315. font-weight: 500;
  316. color: #FF4C4C;
  317. line-height: 100rpx;
  318. }
  319. .item-tit {
  320. height: 100rpx;
  321. line-height: 100rpx;
  322. padding-left: 30rpx;
  323. width: 250rpx;
  324. font-size: 30rpx;
  325. font-family: PingFang SC;
  326. font-weight: 500;
  327. color: #666666;
  328. flex-shrink: 0;
  329. }
  330. input {
  331. width: 440rpx;
  332. padding-right: 20rpx;
  333. height: 100rpx;
  334. line-height: 100rpx;
  335. font-size: 30rpx;
  336. font-family: PingFang SC;
  337. font-weight: 500;
  338. color: #333333;
  339. }
  340. }
  341. }
  342. .up-wrapper {
  343. margin: auto;
  344. padding: 38rpx 21rpx;
  345. width: 690rpx;
  346. // height: 250rpx;
  347. background: #ffffff;
  348. border-radius: 10rpx;
  349. font-size: 28rpx;
  350. font-family: PingFang SC;
  351. font-weight: 500;
  352. color: #333333;
  353. .imgs {
  354. padding: 27rpx 70rpx;
  355. display: flex;
  356. justify-content: space-around;
  357. .imgs-item {
  358. height: 160rpx;
  359. width: 160rpx;
  360. image {
  361. width: 100%;
  362. height: 100%;
  363. }
  364. }
  365. }
  366. }
  367. .sub-btn {
  368. position: fixed;
  369. bottom: 0;
  370. width: 750rpx;
  371. height: 98rpx;
  372. background: linear-gradient(180deg, #FD4646, #FF3535);
  373. font-size: 36rpx;
  374. font-family: PingFang SC;
  375. font-weight: 500;
  376. color: #FFFFFF;
  377. line-height: 98rpx;
  378. text-align: center;
  379. }
  380. .btn-tc {
  381. height: 98rpx;
  382. }
  383. .top-box {
  384. position: relative;
  385. z-index: 1;
  386. image {
  387. width: 750rpx;
  388. height: 236rpx;
  389. position: absolute;
  390. top: 0;
  391. }
  392. }
  393. .more {
  394. display: flex;
  395. align-items: center;
  396. justify-content: center;
  397. font-size: 21rpx;
  398. font-family: Source Han Sans CN;
  399. font-weight: 400;
  400. color: #6F6F6F;
  401. height: 40rpx;
  402. line-height: 40rpx;
  403. image {
  404. height: 15rpx;
  405. width: 40rpx;
  406. }
  407. view {
  408. padding: 0 8rpx;
  409. }
  410. }
  411. </style>