apply.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. <!-- 申请分销商 -->
  2. <template>
  3. <s-layout title="申请分销商" class="apply-wrap" navbar="inner">
  4. <s-empty
  5. v-if="state.error === 1"
  6. paddingTop="0"
  7. icon="/static/comment-empty.png"
  8. text="未开启分销商申请"
  9. ></s-empty>
  10. <view v-if="state.error === 0" class="distribution-apply-wrap">
  11. <view class="apply-header">
  12. <view class="header-box ss-flex">
  13. <image
  14. class="bg-img"
  15. :src="sheep.$url.cdn(state.background)"
  16. mode="widthFix"
  17. @load="onImgLoad"
  18. ></image>
  19. <view class="heaer-title">申请分销商</view>
  20. </view>
  21. </view>
  22. <view class="apply-box bg-white" :style="{ marginTop: state.imgHeight + 'rpx' }">
  23. <uni-forms
  24. label-width="200"
  25. :model="state.model"
  26. :rules="state.rules"
  27. border
  28. class="form-box"
  29. >
  30. <view class="item-box">
  31. <uni-forms-item
  32. v-for="(item, index) in state.formList"
  33. :key="index"
  34. :label="item.name"
  35. :required="true"
  36. :label-position="item.type == 'image' ? 'top' : 'left'"
  37. >
  38. <uni-easyinput
  39. v-if="item.type !== 'image'"
  40. :inputBorder="false"
  41. :type="item.type"
  42. :styles="{ disableColor: '#fff' }"
  43. placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
  44. v-model="item.value"
  45. :placeholder="`请填写${item.name}`"
  46. />
  47. <s-uploader
  48. v-if="item.type === 'image'"
  49. v-model="item.aaa"
  50. v-model:url="item.value"
  51. fileMediatype="image"
  52. limit="1"
  53. mode="grid"
  54. :imageStyles="{ width: '168rpx', height: '168rpx' }"
  55. class="file-picker"
  56. />
  57. </uni-forms-item>
  58. </view>
  59. </uni-forms>
  60. <label class="ss-flex ss-m-t-20" @tap="onChange" v-if="state.protocol?.status == 1">
  61. <radio :checked="state.isAgree" color="var(--ui-BG-Main)" style="transform: scale(0.6)" />
  62. <view class="agreement-text ss-flex">
  63. <view class="ss-m-r-4">勾选代表同意</view>
  64. <view
  65. class="tcp-text"
  66. @tap.stop="
  67. sheep.$router.go('/pages/public/richtext', {
  68. id: state.protocol.id,
  69. title: state.protocol.title,
  70. })
  71. "
  72. >
  73. 《{{ state.protocol.title }}》
  74. </view>
  75. </view>
  76. </label>
  77. <su-fixed bottom placeholder>
  78. <view class="submit-box ss-flex ss-row-center ss-p-30">
  79. <button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="submit">
  80. {{ submitText }}
  81. </button>
  82. </view>
  83. </su-fixed>
  84. </view>
  85. </view>
  86. </s-layout>
  87. </template>
  88. <script setup>
  89. import sheep from '@/sheep';
  90. import { onLoad } from '@dcloudio/uni-app';
  91. import { computed, reactive } from 'vue';
  92. import { isEmpty } from 'lodash';
  93. const state = reactive({
  94. error: -1,
  95. status: '-',
  96. config: {},
  97. isAgree: false,
  98. formList: [],
  99. protocol: {},
  100. applyInfo: [],
  101. background: '',
  102. imgHeight: 400,
  103. });
  104. //勾选协议
  105. function onChange() {
  106. state.isAgree = !state.isAgree;
  107. }
  108. const submitText = computed(() => {
  109. if (state.status === 'normal') return '修改信息';
  110. if (state.status === 'needinfo') return '提交审核';
  111. if (state.status === 'reject') return '重新提交';
  112. return '';
  113. });
  114. async function getAgentForm() {
  115. const { error, data } = await sheep.$api.commission.form();
  116. state.error = error;
  117. if (error === 0) {
  118. state.status = data.status;
  119. state.background = data.background;
  120. state.formList = data.form;
  121. state.applyInfo = data.applyInfo;
  122. state.protocol = data.protocol;
  123. if (data.protocol.status != 1) {
  124. state.isAgree = true;
  125. }
  126. mergeFormList();
  127. }
  128. }
  129. function onImgLoad(e) {
  130. state.imgHeight = (e.detail.height / e.detail.width) * 750 - 88;
  131. }
  132. async function submit() {
  133. if (!state.isAgree) {
  134. sheep.$helper.toast('请同意申请协议');
  135. return;
  136. }
  137. const validate = state.formList.every((item) => {
  138. if (isEmpty(item.value)) {
  139. if (item.type !== 'image') {
  140. sheep.$helper.toast(`请填写${item.name}`);
  141. } else {
  142. sheep.$helper.toast(`请上传${item.name}`);
  143. }
  144. return false;
  145. }
  146. return true;
  147. });
  148. if (!validate) {
  149. return;
  150. }
  151. const { error } = await sheep.$api.commission.apply({
  152. data: state.formList,
  153. });
  154. if (error === 0) {
  155. sheep.$router.back();
  156. }
  157. }
  158. onLoad(() => {
  159. getAgentForm();
  160. });
  161. // 初始化formData
  162. function mergeFormList() {
  163. state.formList.forEach((form) => {
  164. const apply = state.applyInfo.find(
  165. (info) => info.type === form.type && info.name === form.name,
  166. );
  167. if (typeof apply !== 'undefined') form.value = apply.value;
  168. });
  169. }
  170. </script>
  171. <style lang="scss" scoped>
  172. :deep() {
  173. .uni-forms-item__label .label-text {
  174. font-size: 28rpx !important;
  175. color: #333333 !important;
  176. line-height: normal !important;
  177. }
  178. .file-picker__progress {
  179. height: 0 !important;
  180. }
  181. .uni-list-item__content-title {
  182. font-size: 28rpx !important;
  183. color: #333333 !important;
  184. line-height: normal !important;
  185. }
  186. .uni-icons {
  187. font-size: 40rpx !important;
  188. }
  189. .is-disabled {
  190. color: #333333;
  191. }
  192. }
  193. .distribution-apply-wrap {
  194. // height: 100vh;
  195. // width: 100vw;
  196. // position: absolute;
  197. // left: 0;
  198. // top: 0;
  199. // background-color: #fff;
  200. // overflow-y: auto;
  201. .submit-btn {
  202. width: 690px;
  203. height: 86rpx;
  204. border-radius: 43rpx;
  205. }
  206. .apply-header {
  207. position: absolute;
  208. left: 0;
  209. top: 0;
  210. }
  211. .header-box {
  212. width: 100%;
  213. position: relative;
  214. .bg-img {
  215. width: 750rpx;
  216. }
  217. .heaer-title {
  218. position: absolute;
  219. left: 30rpx;
  220. top: 50%;
  221. transform: translateY(-50%);
  222. font-size: 50rpx;
  223. font-weight: bold;
  224. color: #ffffff;
  225. z-index: 11;
  226. &::before {
  227. content: '';
  228. width: 51rpx;
  229. height: 8rpx;
  230. background: #ffffff;
  231. border-radius: 4rpx;
  232. position: absolute;
  233. z-index: 12;
  234. bottom: -20rpx;
  235. }
  236. }
  237. }
  238. .apply-box {
  239. padding: 0 40rpx;
  240. .item-box {
  241. border-bottom: 2rpx solid #eee;
  242. }
  243. }
  244. }
  245. .agreement-text {
  246. font-size: 24rpx;
  247. color: #c4c4c4;
  248. line-height: normal;
  249. .tcp-text {
  250. color: var(--ui-BG-Main);
  251. }
  252. }
  253. .card-image {
  254. width: 140rpx;
  255. height: 140rpx;
  256. border-radius: 50%;
  257. }
  258. </style>