index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <view class="main">
  3. <navbar ref="navbar" :config="config" backColor="#666">
  4. <!-- <text slot="right" class="page-tip" @click="showTip()">
  5. <text class="tip">免费领:{{count}}次</text>
  6. <text class="iconfont2">&#xe66b;</text>
  7. </text> -->
  8. </navbar>
  9. <welfareGoods :listData="listData" @tabChange="tabChange"></welfareGoods>
  10. <u-loadmore :status="loadStatus" />
  11. <uni-popup class="tip-popup" ref="tipPopup" type="center" :mask-click="false" z-index="1000">
  12. <view class="content-box" style="width: 630rpx;">
  13. <view class="title">申领物资说明</view>
  14. <view class="content">
  15. <scroll-view scroll-y class="tip" style="width: 510rpx;max-height: 50vh;overflow-y: auto;">
  16. <view class="ql-editor-box">
  17. <jyf-parser :html="$mUtil.formatRichText(applyRule)" ref="article"></jyf-parser>
  18. </view>
  19. </scroll-view>
  20. <button class="btn" @click="closePopup()">知道了</button>
  21. </view>
  22. </view>
  23. </uni-popup>
  24. </view>
  25. </template>
  26. <script>
  27. import jyfParser from "@/components/jyf-parser/jyf-parser";
  28. export default {
  29. components: {
  30. jyfParser
  31. },
  32. data() {
  33. return {
  34. config: {
  35. back: true,
  36. title: '激活区商品',
  37. color: '#1a1a1a',
  38. backgroundColor: [1, '#fff'],
  39. statusBarFontColor: 'black',
  40. rightSlot: true
  41. },
  42. applyRule: '',
  43. count: '', // 免费领次数
  44. pageParams: {
  45. page: 1,
  46. limit: 10,
  47. order_type: 1, // 1是综合(设置的顺序),2是新品,3价格,4销量
  48. order_mode: '',
  49. area_feature: 1 // 0,普通商品,1服务体系礼包,2新人惠选区,3公益申领)
  50. },
  51. hxCategoryId: null,
  52. listData: [],
  53. loadStatus: 'loadmore', //loading / nomore
  54. }
  55. },
  56. onShow() {
  57. // this.getCount();
  58. },
  59. onLoad(options) {
  60. if (options && options.hxCategoryId) {
  61. this.hxCategoryId = options.hxCategoryId
  62. this.$set(this.config, 'title', options.title || '商品列表');
  63. } else {
  64. this.$set(this.config, 'title', '复购区');
  65. }
  66. this.getList(true);
  67. this.getApplyProtocol();
  68. this.$refs.navbar.init();
  69. },
  70. onPullDownRefresh() {
  71. this.getList(true);
  72. this.getApplyProtocol();
  73. uni.stopPullDownRefresh();
  74. },
  75. methods: {
  76. showTip() {
  77. this.$refs.tipPopup.open();
  78. },
  79. closePopup() {
  80. this.$refs.tipPopup.close();
  81. },
  82. //物质申领协议
  83. getApplyProtocol() {
  84. return this.$http.get('/protocolConfig/info/claiming-rules')
  85. .then(res => {
  86. if (res.code == 200) {
  87. this.applyRule = res.data.content
  88. }
  89. })
  90. },
  91. //获取免费领次数
  92. // getCount(){
  93. // this.$http.get('/freebaggive/limit',{})
  94. // .then(res=>{
  95. // if (res.code == 200) {
  96. // this.count = res.data;
  97. // }
  98. // })
  99. // },
  100. // 获取列表
  101. getList(isRefresh, needLoading = false) {
  102. let that = this;
  103. if (!isRefresh && this.loadStatus == 'nomore') {
  104. return false;
  105. }
  106. this.pageParams.page = isRefresh ? 1 : this.pageParams.page + 1;
  107. this.listData = isRefresh ? [] : this.listData;
  108. if (needLoading) {
  109. uni.showLoading({
  110. title: '努力加载中...',
  111. mask: true
  112. });
  113. }
  114. this.loadStatus = 'loading';
  115. if (this.hxCategoryId) {
  116. this.pageParams.hx_category_id = this.hxCategoryId
  117. }
  118. this.$http.get('/goodsareafeature/page', this.pageParams)
  119. .then(res => {
  120. if (res.code == 200) {
  121. let listData = that.listData;
  122. listData.push(...res.page.list);
  123. that.listData = listData;
  124. that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
  125. }
  126. })
  127. .finally(() => {
  128. if (needLoading) {
  129. uni.hideLoading();
  130. }
  131. })
  132. },
  133. tabChange(tab) {
  134. this.pageParams = {
  135. ...this.pageParams,
  136. order_type: tab.index + 1,
  137. order_mode: tab.sort
  138. }
  139. this.getList(true);
  140. }
  141. },
  142. onReachBottom() {
  143. this.getList();
  144. }
  145. }
  146. </script>
  147. <style lang="scss" scoped>
  148. .main {
  149. padding: 0 0 30rpx 0;
  150. .page-tip {
  151. margin-right: 30rpx;
  152. .tip {
  153. font-size: 28rpx;
  154. font-family: PingFang SC, PingFang SC-Regular;
  155. font-weight: 400;
  156. color: #999999;
  157. vertical-align: middle;
  158. margin-right: 13rpx;
  159. }
  160. .iconfont2 {
  161. font-size: 45rpx;
  162. color: #666666;
  163. vertical-align: middle;
  164. }
  165. }
  166. .ql-editor-box {
  167. // 重写全局的 富文本样式,减去左右内边距(padding)
  168. /deep/ .ql-indent-3 {
  169. margin-left: calc(288rpx - 240rpx);
  170. }
  171. /deep/ .ql-indent-4 {
  172. margin-left: calc(384rpx - 240rpx);
  173. }
  174. /deep/ .ql-indent-5 {
  175. margin-left: calc(480rpx - 240rpx);
  176. }
  177. /deep/ .ql-indent-6 {
  178. margin-left: calc(576rpx - 240rpx);
  179. }
  180. /deep/ .ql-indent-7 {
  181. margin-left: calc(672rpx - 240rpx);
  182. }
  183. /deep/ .ql-indent-8 {
  184. margin-left: calc(768rpx - 240rpx);
  185. }
  186. /deep/ .ql-indent-4 {
  187. margin-left: calc(240rpx - 240rpx);
  188. }
  189. /deep/ .ql-indent-5 {
  190. margin-left: calc(300rpx - 240rpx);
  191. }
  192. }
  193. }
  194. </style>