add.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
  6. <uni-forms-item label="姓名" required name="name">
  7. <uni-easyinput type="text" v-model="form.name" placeholder="请输入真实姓名" />
  8. </uni-forms-item>
  9. <uni-forms-item label="身份证号" required name="card">
  10. <uni-easyinput type="text" v-model="form.card" placeholder="请输入身份证号" />
  11. </uni-forms-item>
  12. <uni-forms-item label="手机号" required name="phone">
  13. <uni-easyinput type="text" v-model="form.phone" placeholder="请输入手机号" />
  14. </uni-forms-item>
  15. <uni-forms-item label="确认" required name="is_affirm">
  16. <uni-data-checkbox v-model="form.is_affirm" :localdata="affirmList"
  17. style="position: relative;top: 7px;" />
  18. </uni-forms-item>
  19. </uni-forms>
  20. <view class="btn">
  21. <button type="primary" @click="onSubmit('form')" size="mini">提交</button>
  22. <button type="primary" @click="toApply" size="mini">申请记录</button>
  23. </view>
  24. <view class="config">
  25. <rich-text :nodes="config&&config.leader_rule"></rich-text>
  26. </view>
  27. </view>
  28. </view>
  29. </mobile-frame>
  30. </template>
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. // 系统设置
  36. config: {},
  37. form: {},
  38. rules: {
  39. name: {
  40. rules: [{
  41. required: true,
  42. errorMessage: '请填写真实姓名',
  43. }]
  44. },
  45. card: {
  46. rules: [{
  47. required: true,
  48. errorMessage: '请填写身份证',
  49. }]
  50. },
  51. phone: {
  52. rules: [{
  53. required: true,
  54. errorMessage: '请填写手机号码',
  55. }]
  56. },
  57. is_affirm: {
  58. rules: [{
  59. required: true,
  60. errorMessage: '请确认团长申请',
  61. }]
  62. },
  63. },
  64. // 是否确认
  65. affirmList: [ //
  66. {
  67. text: '是',
  68. value: 0
  69. }, {
  70. text: '否',
  71. value: 1
  72. }
  73. ]
  74. };
  75. },
  76. onLoad: function(e) {
  77. const that = this;
  78. that.watchLogin();
  79. },
  80. methods: {
  81. watchLogin() {
  82. const that = this;
  83. uni.getStorage({
  84. key: 'token',
  85. success: async (res) => {
  86. let user = that.$jwt(res.data);
  87. if (user) {
  88. that.$set(that, `form`, {
  89. user_id: user.id,
  90. openid: user.openid,
  91. phone: user.phone
  92. })
  93. }
  94. // 系统设置
  95. let config = await that.$api(`/config`, 'GET', {});
  96. if (config.errcode == '0') {
  97. if (config.data.leader_rule) config.data.leader_rule = config.data.leader_rule.replace(/\<img/gi,
  98. '<img class="rich-img"');
  99. that.$set(that, `config`, config.data);
  100. }
  101. },
  102. fail: (err) => {}
  103. })
  104. },
  105. // 提交保存
  106. onSubmit(ref) {
  107. const that = this;
  108. that.$refs[ref].validate().then(async params => {
  109. if (params.is_affirm == '1') {
  110. uni.showToast({
  111. title: '请确认团长申请',
  112. icon: 'none'
  113. })
  114. } else {
  115. const arr = await that.$api(`/userleader`, 'POST', that.form);
  116. if (arr.errcode == '0') {
  117. uni.showToast({
  118. title: `团长身份申请成功`,
  119. icon: 'success',
  120. });
  121. that.back();
  122. } else {
  123. uni.showToast({
  124. title: arr.errmsg,
  125. })
  126. }
  127. }
  128. })
  129. },
  130. // 团长记录
  131. toApply() {
  132. uni.navigateTo({
  133. url: `/pagesMy/apply/index`
  134. })
  135. },
  136. // 返回
  137. back() {
  138. uni.navigateBack({
  139. delta: 1
  140. })
  141. },
  142. },
  143. }
  144. </script>
  145. <style lang="scss">
  146. .main {
  147. display: flex;
  148. flex-direction: column;
  149. width: 100vw;
  150. height: 100vh;
  151. .one {
  152. padding: 2vw;
  153. .uni-input {
  154. border: #f1f1ff 1px solid;
  155. padding: 2vw 2vw;
  156. border-radius: 1vw;
  157. }
  158. .btn {
  159. text-align: center;
  160. margin: 0 0 1vw 0;
  161. button {
  162. margin: 0 2vw 2vw 2vw;
  163. background-color: #23B67A;
  164. color: var(--fffColor);
  165. }
  166. .name {
  167. color: var(--f85Color);
  168. font-size: var(--font14Size);
  169. }
  170. }
  171. .config{
  172. .rich-img {
  173. width: 100% !important;
  174. display: block;
  175. }
  176. }
  177. }
  178. }
  179. .uni-forms-item {
  180. margin-bottom: 6vw !important;
  181. display: flex;
  182. flex-direction: row;
  183. }
  184. </style>