apply.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  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="merchant_name" placeholder="请输入店铺名称"/>
  75. </view>
  76. </view>
  77. </view>
  78. <view class="up-wrapper">
  79. 身份证正反面
  80. <view class="imgs">
  81. <view class="imgs-item">
  82. <image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg('sfzz')"></image>
  83. <image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg('sfzz')"></image>
  84. </view>
  85. <view class="imgs-item">
  86. <image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg('sfzf')"></image>
  87. <image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg('sfzf')"></image>
  88. </view>
  89. </view>
  90. </view>
  91. <view class="up-wrapper">
  92. 营业执照
  93. <view class="imgs">
  94. <view class="imgs-item">
  95. <image :src="sfzz" mode="" v-if="yyzz" @click.stop="upImg('yyzz')"></image>
  96. <image src="../../static/img/add.png" mode="" v-if="!yyzz" @click.stop="upImg('yyzz')"></image>
  97. </view>
  98. </view>
  99. </view>
  100. <view class="btn-tc">
  101. </view>
  102. <view class="sub-btn" @click="sub">
  103. 提交申请
  104. </view>
  105. </template>
  106. </view>
  107. </template>
  108. <script>
  109. import { register, verify } from '@/api/login.js';
  110. import { upload ,enter} from '@/api/user.js';
  111. export default {
  112. data() {
  113. return {
  114. time: '', //保存倒计时对象
  115. countDown: 0,//倒计时
  116. isStep: 1,
  117. name: '',
  118. speed_id: '',
  119. phone: '',
  120. // code: '',
  121. sfzz: '', //身份证正面
  122. sfzf: '', //身份证反面
  123. yyzz: '',//营业执照
  124. merchant_name: '',//店铺名称
  125. };
  126. },
  127. watch:{
  128. countDown(i) {
  129. if (i == 0) {
  130. clearInterval(this.time);
  131. }
  132. }
  133. },
  134. methods: {
  135. changeStep() {
  136. this.isStep = 2;
  137. },
  138. upImg(item) {
  139. let obj = this;
  140. upload({
  141. filename: ''
  142. }).then(res => {
  143. console.log(res[0].url);
  144. obj[item] = res[0].url
  145. }).catch( err => {
  146. console.log(err)
  147. })
  148. },
  149. //发送验证码
  150. verification() {
  151. let obj = this;
  152. if (this.phone == '') {
  153. this.$api.msg('请输入电话号码');
  154. return;
  155. }
  156. if (this.phone.length < 11) {
  157. this.$api.msg('请输入正确的手机号');
  158. return;
  159. }
  160. // 判断是否在倒计时
  161. if (obj.countDown > 0) {
  162. return false;
  163. } else {
  164. obj.countDown = 60;
  165. obj.time = setInterval(() => {
  166. obj.countDown--;
  167. }, 1000);
  168. //调用验证码接口
  169. verify({
  170. phone: obj.phone,
  171. type: 'register'
  172. })
  173. .then(({ data }) => {})
  174. .catch(err => {
  175. console.log(err);
  176. });
  177. }
  178. },
  179. //提交
  180. sub() {
  181. let obj = this
  182. if(obj.name == '') {
  183. obj.$api.msg('请输入姓名')
  184. return
  185. }
  186. if(obj.phone == '') {
  187. obj.$api.msg('请输入联系方式')
  188. return
  189. }
  190. if (this.phone.length < 11) {
  191. this.$api.msg('请输入正确的手机号');
  192. return;
  193. }
  194. if(obj.sfzz == '') {
  195. obj.$api.msg('请上传身份证证件照')
  196. return
  197. }
  198. if(obj.sfzf == '') {
  199. obj.$api.msg('请上传身份证证件照')
  200. return
  201. }
  202. if(obj.yyzz == '') {
  203. obj.$api.msg('请上传营业执照')
  204. return
  205. }
  206. if(obj.merchant_name == '') {
  207. obj.$api.msg('请输入店铺名称')
  208. return
  209. }
  210. let card_id = obj.sfzz + ',' + obj.sfzf
  211. uni.showLoading({
  212. title: '提交中...',
  213. mask: true
  214. })
  215. enter({
  216. type: 1,
  217. merchant_name: obj.merchant_name,
  218. link_user: obj.name,
  219. link_tel: obj.phone,
  220. spread_uid: obj.speed_id,
  221. charter: obj.yyzz,
  222. card_id: card_id
  223. }).then( res => {
  224. uni.hideLoading()
  225. uni.showToast({
  226. title: '提交成功',
  227. duration: 2000
  228. });
  229. setTimeout(()=> {
  230. uni.navigateBack({})
  231. },2000)
  232. console.log(res)
  233. }).catch( err => {
  234. uni.hideLoading()
  235. console.log(err)
  236. })
  237. }
  238. }
  239. };
  240. </script>
  241. <style lang="scss" scoped>
  242. .wrapper {
  243. height: 100%;
  244. }
  245. .top {
  246. position: relative;
  247. z-index: 2;
  248. margin: 0 auto 49rpx;
  249. width: 674rpx;
  250. height: 231rpx;
  251. background: linear-gradient(-23deg, #ffe7be, #fed591);
  252. border-radius: 10rpx;
  253. .top-tit {
  254. padding-top: 80rpx;
  255. text-align: center;
  256. font-size: 49rpx;
  257. font-family: Source Han Sans CN;
  258. font-weight: 500;
  259. color: #6A4714;
  260. }
  261. .top-btm {
  262. margin-top: 35rpx;
  263. font-size: 19rpx;
  264. font-family: Source Han Sans CN;
  265. font-weight: 400;
  266. color: #6A4714;
  267. text-align: center;
  268. display: flex;
  269. justify-content: center;
  270. align-items: center;
  271. text {
  272. display: inline-block;
  273. padding: 0 4rpx;
  274. }
  275. .hx {
  276. width: 66rpx;
  277. height: 1rpx;
  278. background: #81504A;
  279. }
  280. }
  281. }
  282. .item {
  283. margin: 44rpx auto;
  284. width: 674rpx;
  285. // height: 176rpx;
  286. box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  287. border-radius: 10rpx;
  288. padding-bottom: 40rpx;
  289. .item-top {
  290. width: 85rpx;
  291. line-height: 36rpx;
  292. background-color: #fed591;
  293. border-radius: 10rpx 18rpx 18rpx 0;
  294. text-align: center;
  295. font-size: 20rpx;
  296. font-family: Source Han Sans CN;
  297. font-weight: 400;
  298. color: #975f4a;
  299. }
  300. .item-tit {
  301. display: inline-block;
  302. padding: 0 10rpx;
  303. font-size: 26rpx;
  304. font-family: Source Han Sans CN;
  305. font-weight: 500;
  306. color: #202020;
  307. margin-left: 68rpx;
  308. margin-top: 20rpx;
  309. .line {
  310. // width: 197rpx;
  311. margin-top: -10rpx;
  312. height: 15rpx;
  313. background: #FFF0C5;
  314. }
  315. }
  316. .item-info {
  317. display: flex;
  318. align-items: flex-start;
  319. padding-left: 68rpx;
  320. padding-top: 15rpx;
  321. // align-items: center;
  322. font-size: 21rpx;
  323. font-family: Source Han Sans CN;
  324. font-weight: 400;
  325. color: #6F6F6F;
  326. line-height: 40rpx;
  327. .info-y {
  328. width: 24rpx;
  329. height: 24rpx;
  330. background: #343238;
  331. border-radius: 50%;
  332. margin-right: 14rpx;
  333. margin-top: 8rpx;
  334. flex-shrink: 0;
  335. }
  336. .info {
  337. padding-right: 20rpx;
  338. }
  339. }
  340. }
  341. .btn {
  342. margin: 20rpx auto;
  343. width: 606rpx;
  344. height: 80rpx;
  345. background: linear-gradient(-23deg, #ffe7be, #fed591);
  346. border-radius: 40rpx;
  347. font-size: 35rpx;
  348. font-family: Source Han Sans CN;
  349. font-weight: 400;
  350. color: #704e1c;
  351. line-height: 80rpx;
  352. text-align: center;
  353. }
  354. .tab-wrapper {
  355. padding: 20rpx 30rpx;
  356. background-color: #f2f3f5;
  357. .itemx {
  358. margin: 0 auto;
  359. width: 100%;
  360. background-color: #fff !important;
  361. height: 100rpx;
  362. display: flex;
  363. // width: 690px;
  364. border: 1px #f4f4f4 solid;
  365. .code {
  366. width: 150rpx;
  367. flex-shrink: 0;
  368. text-align: center;
  369. font-size: 28rpx;
  370. font-family: PingFang SC;
  371. font-weight: 500;
  372. color: #FF4C4C;
  373. line-height: 100rpx;
  374. }
  375. .item-tit {
  376. height: 100rpx;
  377. line-height: 100rpx;
  378. padding-left: 30rpx;
  379. width: 250rpx;
  380. font-size: 30rpx;
  381. font-family: PingFang SC;
  382. font-weight: 500;
  383. color: #666666;
  384. flex-shrink: 0;
  385. }
  386. input {
  387. width: 440rpx;
  388. padding-right: 20rpx;
  389. height: 100rpx;
  390. line-height: 100rpx;
  391. font-size: 30rpx;
  392. font-family: PingFang SC;
  393. font-weight: 500;
  394. color: #333333;
  395. }
  396. }
  397. }
  398. .up-wrapper {
  399. margin: auto;
  400. padding: 38rpx 21rpx;
  401. width: 690rpx;
  402. // height: 250rpx;
  403. background: #ffffff;
  404. border-radius: 10rpx;
  405. font-size: 28rpx;
  406. font-family: PingFang SC;
  407. font-weight: 500;
  408. color: #333333;
  409. .imgs {
  410. padding: 27rpx 70rpx;
  411. display: flex;
  412. justify-content: space-around;
  413. .imgs-item {
  414. height: 160rpx;
  415. width: 160rpx;
  416. image {
  417. width: 100%;
  418. height: 100%;
  419. }
  420. }
  421. }
  422. }
  423. .sub-btn {
  424. position: fixed;
  425. bottom: 0;
  426. width: 750rpx;
  427. height: 98rpx;
  428. background: linear-gradient(180deg, #FD4646, #FF3535);
  429. font-size: 36rpx;
  430. font-family: PingFang SC;
  431. font-weight: 500;
  432. color: #FFFFFF;
  433. line-height: 98rpx;
  434. text-align: center;
  435. }
  436. .btn-tc {
  437. height: 98rpx;
  438. }
  439. .top-box {
  440. position: relative;
  441. z-index: 1;
  442. image {
  443. width: 750rpx;
  444. height: 236rpx;
  445. position: absolute;
  446. top: 0;
  447. }
  448. }
  449. .more {
  450. display: flex;
  451. align-items: center;
  452. justify-content: center;
  453. font-size: 21rpx;
  454. font-family: Source Han Sans CN;
  455. font-weight: 400;
  456. color: #6F6F6F;
  457. height: 40rpx;
  458. line-height: 40rpx;
  459. image {
  460. height: 15rpx;
  461. width: 40rpx;
  462. }
  463. view {
  464. padding: 0 8rpx;
  465. }
  466. }
  467. </style>