ApplyTerm.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <template>
  2. <view class="apply-term">
  3. <image :src="distributionSet.image || default_img" mode="aspectFill" class="apply-img"></image>
  4. <!-- 无条件成为分销商 -->
  5. <view class="apply-cont" v-if="distributionSet.businessmanCondition === 0">
  6. <view class="apply-tip">
  7. <view class="audit-img"><image src="https://onlineimg.qianniao.vip/no_coll.jpg" mode="aspectFit"></image></view>
  8. <view class="tip-text">您还不是{{ text_set.name || '分销商' }},点击下方按钮立即{{ text_set.distributor || '成为分销商' }}</view>
  9. </view>
  10. <view @click="subApply" class="sub-btn">立即{{ text_set.distributor || '成为分销商' }}</view>
  11. </view>
  12. <!-- 申请成为分销商条件为填写资料申请 -->
  13. <view class="apply-cont" v-if="distributionSet.businessmanCondition === 1">
  14. <u-form label-width="140rpx">
  15. <block v-for="(item, index) in distributionSet.info" :key="index">
  16. <u-form-item :label="item.prop"><u-input :clearable="false" v-model="item.value" /></u-form-item>
  17. </block>
  18. </u-form>
  19. <view class="apply-agree" v-if='distributionSet.title'>
  20. 提交代表您同意
  21. <text @click="goPage('/pagesT/Distribution/Agreement')" class="apply-agree-text primary-color">《{{ distributionSet.title }}》</text>
  22. </view>
  23. <view @click="subApply" class="sub-btn">申请{{ text_set.distributor || '成为分销商' }}</view>
  24. </view>
  25. <!-- 申请成为分销商条件为累计消费次数或者累计消费金额 -->
  26. <view class="apply-cont" v-if="[2, 3].includes(distributionSet.businessmanCondition)">
  27. <view class="apply-num-cont">
  28. <view>您已累计消费</view>
  29. <view class="num-weight" v-if="distributionSet.businessmanCondition === 2">
  30. <text class="_number">0</text>
  31. <text>次</text>
  32. </view>
  33. <view class="num-weight" v-if="distributionSet.businessmanCondition === 3">
  34. <text class="_number">0</text>
  35. <text>元</text>
  36. </view>
  37. </view>
  38. <view class="apply-tip-view">
  39. 您还不是{{ text_set.name || '分销商' }},点击下方按钮申请{{ text_set.distributor || '成为分销商' }}
  40. </view>
  41. <view class="sub-btn" @click="subApply">申请成为分销商</view>
  42. <view class="user-discription">
  43. <view class="user-d-tit">
  44. 用户须知
  45. </view>
  46. <view class="user-d-info">
  47. 1、当您点击申请成为分销商按钮后,开始累计您在本店的{{distributionSet.businessmanCondition === 3?'消费金额':'消费次数'}}</text>;
  48. </view>
  49. <view class="user-d-info">
  50. 2、您在本店累计{{distributionSet.businessmanCondition === 3?'消费金额':'消费次数'}}</text>满<text class="_importent">{{distributionSet.businessmanCondition === 3?distributionSet.buyAmount+'元':distributionSet.buyNum+'次'}}</text>,<text v-if="distributionSet.audit===4">通过审核后</text>即可{{ text_set.distributor || '成为分销商' }}
  51. </view>
  52. </view>
  53. </view>
  54. <!-- 申请成为分销商条件为购买商品 -->
  55. <view class="apply-cont" v-if="distributionSet.businessmanCondition === 4">
  56. <view class="apply-tip-view">
  57. 您还不是{{ text_set.name || '分销商' }},点击下方按钮申请{{ text_set.distributor || '成为分销商' }}
  58. </view>
  59. <view class="sub-btn" @click="subApply">申请成为分销商</view>
  60. <view class="user-discription">
  61. <view class="user-d-tit">
  62. 用户须知
  63. </view>
  64. <view class="user-d-info">
  65. 当您点击申请成为分销商按钮后,购买指定商品,<text v-if="distributionSet.audit===4">通过审核后</text>即可{{ text_set.distributor || '成为分销商' }}
  66. </view>
  67. </view>
  68. </view>
  69. <AddCardModel :selAddress="now_sel_address" :skuId="goods_sku_id" @close="is_add_show = false" @change="cardModelPopChange" :isShow="is_add_show" :goodsId="goods_id" />
  70. </view>
  71. </template>
  72. <script>
  73. import AddCardModel from '@/components/AddCardModel';
  74. export default {
  75. components: {
  76. AddCardModel,
  77. },
  78. data() {
  79. return {
  80. default_img: 'https://onlineimg.qianniao.vip/931544405107da76ca2ec31cd63fae49/1596008994491apply_banner.png',
  81. is_add_show: false,
  82. isLoding: false,
  83. goods_id: 0,
  84. now_sel_address: {},
  85. goodsList: [],
  86. apply_form: {
  87. email: '',
  88. name: '',
  89. phone: ''
  90. },
  91. customerId: 0,
  92. userName: '',
  93. distributionSet: {
  94. image: '',
  95. info: [],
  96. businessmanCondition: 0
  97. },
  98. auditStatus: 0, // 审核状态
  99. applicationCondition: 0, // 申请成为分销商条件
  100. goods_sku_id: 0,
  101. text_set: {}
  102. };
  103. },
  104. onLoad(options) {
  105. if (options.auditStatus && options.applicationCondition) {
  106. this.auditStatus = parseInt(options.auditStatus);
  107. this.applicationCondition = parseInt(options.applicationCondition);
  108. } else {
  109. this.customerId = this.$store.state.userStatus.id;
  110. this.userName = this.$store.state.userStatus.name;
  111. this.distributionSet = this.$store.state.distributionSet;
  112. // 申请成为分销商条件为购买商品
  113. if (this.distributionSet.businessmanCondition === 4) {
  114. this.getBuyGoods();
  115. }
  116. }
  117. this.text_set = this.$store.state.distributionTextSet;
  118. },
  119. methods: {
  120. // 查询升级商品
  121. async getBuyGoods() {
  122. this.$u.api.getBuyGoods().then(({data})=>{
  123. this.goodsList = data;
  124. })
  125. },
  126. cardModelPopChange(obj) {
  127. if (!obj.show) {
  128. this.is_add_show = false;
  129. }
  130. },
  131. addCard(id, skuId) {
  132. this.goods_id = id;
  133. this.goods_sku_id = skuId;
  134. this.is_add_show = true;
  135. },
  136. async subApply() {
  137. let params = {
  138. customerId: this.customerId,
  139. auditStatus: 1
  140. };
  141. if (this.distributionSet.businessmanCondition === 1) {
  142. let isSub = true;
  143. for (let i in this.distributionSet.info) {
  144. if (!this.distributionSet.info[i].value) {
  145. isSub = false;
  146. break;
  147. }
  148. }
  149. if (!isSub) {
  150. this.$api.msg('请输入申请资料');
  151. return;
  152. }
  153. params.info = this.distributionSet.info;
  154. }
  155. this.$u.api.applicationBusinessman(params).then(res=>{
  156. if (this.distributionSet.businessmanCondition === 0) {
  157. // 无条件 点击按钮自动成为分销商
  158. this.$api.msg('恭喜您已成为分销商');
  159. setTimeout(() => {
  160. this.goPage('/pagesT/Distribution/Distribution');
  161. }, 500);
  162. } else if(this.distributionSet.businessmanCondition === 4){
  163. this.$api.msg('申请成功');
  164. setTimeout(() => {
  165. this.goPage('/pagesT/Distribution/ApplyAudit?auditStatus=1&applicationCondition=4','redirectTo');
  166. }, 500);
  167. }else {
  168. // 不需要审核,填写完了条件成为分销商
  169. if (this.distributionSet.audit === 4&&this.distributionSet.businessmanCondition === 1) {
  170. this.$api.msg('恭喜您已成为分销商');
  171. setTimeout(() => {
  172. this.goPage('/pagesT/Distribution/Distribution');
  173. }, 500);
  174. } else {
  175. // 不需要审核,填写完了等待审核
  176. this.$api.msg('申请成功,正在审核中');
  177. setTimeout(() => {
  178. uni.navigateBack();
  179. }, 500);
  180. }
  181. }
  182. })
  183. }
  184. }
  185. };
  186. </script>
  187. <style lang="scss">
  188. .apply-img {
  189. width: 100%;
  190. height: 322upx;
  191. display: block;
  192. }
  193. .apply-cont {
  194. padding: 20upx 30upx;
  195. .apply-agree {
  196. font-size: 24upx;
  197. color: #999;
  198. padding: 20upx 0;
  199. }
  200. .apply-tip-view {
  201. text-align: center;
  202. ._importent {
  203. color: #ff5a5f;
  204. }
  205. }
  206. .apply-tip {
  207. border-radius: 8upx;
  208. width: 650upx;
  209. margin: 26upx auto 46upx;
  210. box-shadow: 0 0 20upx 4upx #f5f5f5;
  211. padding: 50upx 0;
  212. .audit-img {
  213. image {
  214. display: block;
  215. width: 200upx;
  216. height: 200upx;
  217. margin: 0 auto;
  218. }
  219. }
  220. .tip-text {
  221. padding: 0 24upx;
  222. text-align: center;
  223. opacity: 0.9;
  224. line-height: 60upx;
  225. }
  226. }
  227. .sub-btn {
  228. font-size: 30upx;
  229. text-align: center;
  230. color: #ffffff;
  231. width: 645upx;
  232. height: 72upx;
  233. background-color: #fe582e;
  234. border-radius: 40px;
  235. line-height: 72upx;
  236. margin: 50upx auto 0;
  237. }
  238. .user-discription{
  239. font-size: 24upx;
  240. line-height: 40rpx;
  241. padding-top: 30rpx;
  242. .user-d-tit{
  243. color: #333;
  244. font-weight: bold;
  245. }
  246. .user-d-info{
  247. color: #666;
  248. ._importent{
  249. color: #fe582e;
  250. font-weight: bold;
  251. }
  252. }
  253. }
  254. }
  255. .apply-num-cont {
  256. width: 650upx;
  257. margin: 46upx auto;
  258. font-size: 24upx;
  259. color: #898c98;
  260. text-align: center;
  261. box-shadow: 0 0 20upx 4upx #f5f5f5;
  262. padding: 64upx 0;
  263. .num-weight {
  264. padding-top: 40upx;
  265. font-weight: bold;
  266. color: #3d404c;
  267. ._number {
  268. margin-right: 10upx;
  269. font-size: 66upx;
  270. }
  271. }
  272. }
  273. .goods-item-box {
  274. border-bottom: 1upx solid #eee;
  275. padding: 18upx 0;
  276. position: relative;
  277. .sale-end-icon {
  278. font-size: 90upx;
  279. color: $uni-color-error;
  280. display: block;
  281. position: absolute;
  282. right: 60upx;
  283. top: 80upx;
  284. }
  285. .right {
  286. width: calc(100% - 188upx);
  287. }
  288. .title {
  289. font-size: 28upx;
  290. color: #303133;
  291. width: 100%;
  292. height: 76upx;
  293. line-height: 36upx;
  294. text-overflow: -o-ellipsis-lastline;
  295. overflow: hidden;
  296. text-overflow: ellipsis;
  297. display: -webkit-box;
  298. -webkit-line-clamp: 2;
  299. line-clamp: 2;
  300. -webkit-box-orient: vertical;
  301. }
  302. .subTitle {
  303. font-size: 24upx;
  304. color: #666;
  305. white-space: nowrap;
  306. width: 100%;
  307. overflow: hidden;
  308. /* 默认溢出隐藏 */
  309. text-overflow: ellipsis;
  310. padding: 6upx 0;
  311. height: 48upx;
  312. line-height: 42upx;
  313. .gradeName {
  314. padding: 0 10upx;
  315. line-height: 32upx;
  316. color: #fe582e;
  317. border: 1upx solid #fe582e;
  318. border-radius: 20upx;
  319. display: inline-block;
  320. vertical-align: middle;
  321. height: 32upx;
  322. margin-right: 10upx;
  323. }
  324. }
  325. .price {
  326. display: inline-block;
  327. font-size: 28upx;
  328. color: #fe582e;
  329. font-weight: 500;
  330. }
  331. .price .icon-rmb {
  332. font-size: 22upx;
  333. }
  334. .imgStyle {
  335. padding-right: 24upx;
  336. }
  337. .imgStyle image {
  338. width: 160upx;
  339. height: 160upx;
  340. border: 1px solid #eee;
  341. border-radius: 4upx;
  342. display: block;
  343. }
  344. /* 选规格 */
  345. .add-cart-btn {
  346. position: absolute;
  347. right: 0;
  348. bottom: 45%;
  349. transform: translateY(50%);
  350. background-color: #fe582e;
  351. color: #fff;
  352. display: block;
  353. width: 50upx;
  354. height: 50upx;
  355. border-radius: 100%;
  356. font-size: 24upx;
  357. text-align: center;
  358. line-height: 50upx;
  359. }
  360. }
  361. </style>