index.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <!-- 砍价列表模块 -->
  3. <view class="box">
  4. <view class='bargain-list'>
  5. <view class='header' :style="'background-image: url('+imgHost+'/statics/images/bargain-list-bg.png);'">
  6. <!-- #ifndef MP -->
  7. <text class="iconfont icon-ic_leftarrow" @click="goarrow"></text>
  8. <!-- #endif -->
  9. <!-- #ifdef MP -->
  10. <view class="bargainTitle">
  11. <view :style="{height:getHeight.barTop+'px'}"></view>
  12. <view class="sysTitle acea-row row-center-wrapper" :style="{height:getHeight.barHeight+'px'}">
  13. <text class="iconfont icon-ic_leftarrow" @click="goarrow"></text>
  14. </view>
  15. </view>
  16. <!-- #endif -->
  17. </view>
  18. <view class='list' v-if="bargainList.length">
  19. <block v-for="(item,index) in bargainList" :key="index">
  20. <view class='item flex justify-between relative'
  21. @tap="openSubscribe('/pages/activity/goods_bargain_details/index?id='+ item.id +'&spid='+ userInfo.uid)">
  22. <!-- <image class="w-240 h-240 rd-16rpx" :src='item.image'></image> -->
  23. <easy-loadimage
  24. mode="widthFix"
  25. :image-src="item.image"
  26. width="240rpx"
  27. height="240rpx"
  28. borderRadius="20rpx"></easy-loadimage>
  29. <view class='w-410 fs-28 flex-col justify-between'>
  30. <view>
  31. <view class='w-410 lh-40rpx line2'>{{item.title}}</view>
  32. <view class='fs-22 fw-500 mt-8 red'>
  33. <text class='iconfont icon-ic_fire fs-22 mr-8'></text>
  34. {{item.people}}人正在参与
  35. </view>
  36. </view>
  37. <view class="flex-between-center">
  38. <view>
  39. <view class='flex items-baseline red'>
  40. <text class="fs-22 lh-30rpx fw-500">最低: </text>
  41. <baseMoney :money="item.min_price" symbolSize="24" integerSize="40" decimalSize="24" incolor="#E93323" weight></baseMoney>
  42. </view>
  43. <view class="otPrice">{{item.ot_price}}</view>
  44. </view>
  45. <view class='cutBnt w-144 h-56 rd-30rpx flex-center fs-24 text--w111-fff'>参与砍价</view>
  46. </view>
  47. </view>
  48. </view>
  49. </block>
  50. </view>
  51. <view class="list no-goods" v-if="!bargainList.length && !loading">
  52. <image :src="imgHost + '/statics/images/noActivity.gif'" mode=""></image>
  53. <text class="fs-26 text--w111-999 pt-16">暂无砍价商品,去看看其他商品吧~</text>
  54. </view>
  55. </view>
  56. </view>
  57. </template>
  58. <script>
  59. let app = getApp();
  60. import { HTTP_REQUEST_URL } from '@/config/app';
  61. import { getBargainList } from '@/api/activity.js';
  62. import { openBargainSubscribe } from '@/utils/SubscribeMessage.js';
  63. import { getUserInfo } from '@/api/user.js';
  64. import { toLogin } from '@/libs/login.js';
  65. import { mapGetters } from "vuex";
  66. export default {
  67. data() {
  68. return {
  69. bargainList: [],
  70. page: 1,
  71. limit: 20,
  72. loading: false,
  73. loadend: false,
  74. userInfo: {},
  75. isAuto: false, //没有授权的不会自动授权
  76. isShowAuth: false, //是否隐藏授权
  77. imgHost:HTTP_REQUEST_URL,
  78. // #ifdef MP
  79. getHeight: this.$util.getWXStatusHeight()
  80. // #endif
  81. };
  82. },
  83. computed: mapGetters(['isLogin']),
  84. watch: {
  85. isLogin: {
  86. handler: function(newV, oldV) {
  87. if (newV) {
  88. // #ifndef MP
  89. this.getUserInfo();
  90. // #endif
  91. }
  92. },
  93. deep: true
  94. }
  95. },
  96. onLoad: function(options) {
  97. uni.setNavigationBarTitle({
  98. title: "砍价列表"
  99. })
  100. this.getBargainList();
  101. if (this.isLogin) {
  102. this.getUserInfo();
  103. }
  104. },
  105. onShow(){
  106. uni.removeStorageSync('form_type_cart');
  107. },
  108. onPageScroll(object) {
  109. uni.$emit('scroll');
  110. },
  111. methods: {
  112. // 授权关闭
  113. authColse: function(e) {
  114. this.isShowAuth = e
  115. },
  116. goarrow(){
  117. uni.navigateBack()
  118. },
  119. /*
  120. * 获取用户信息
  121. */
  122. getUserInfo: function() {
  123. let that = this;
  124. getUserInfo().then(res => {
  125. that.$set(that, 'userInfo', res.data);
  126. });
  127. },
  128. openSubscribe: function(e) {
  129. if(this.isLogin){
  130. let page = e;
  131. // #ifndef MP
  132. uni.navigateTo({
  133. url: page
  134. });
  135. // #endif
  136. // #ifdef MP
  137. uni.showLoading({
  138. title: '正在加载',
  139. })
  140. openBargainSubscribe().then(res => {
  141. uni.hideLoading();
  142. uni.navigateTo({
  143. url: page,
  144. });
  145. }).catch((err) => {
  146. uni.hideLoading();
  147. });
  148. // #endif
  149. }else{
  150. toLogin()
  151. }
  152. },
  153. getBargainList: function() {
  154. let that = this;
  155. if (that.loadend) return;
  156. if (that.loading) return;
  157. that.loading = true;
  158. getBargainList({
  159. page: that.page,
  160. limit: that.limit
  161. }).then(function(res) {
  162. that.$set(that, 'bargainList', that.bargainList.concat(res.data));
  163. that.$set(that, 'page', that.page + 1);
  164. that.$set(that, 'loadend', that.limit > res.data.length);
  165. that.$set(that, 'loading', false);
  166. }).catch(res => {
  167. that.loading = false;
  168. });
  169. },
  170. },
  171. onReachBottom: function() {
  172. this.getBargainList();
  173. },
  174. }
  175. </script>
  176. <style lang="scss">
  177. .bargainTitle{
  178. position: fixed;
  179. left:0;
  180. top:0;
  181. width: 100%;
  182. z-index: 99;
  183. .sysTitle{
  184. width: 100%;
  185. position: relative;
  186. .iconfont{
  187. position: absolute;
  188. font-size: 36rpx;
  189. left:11rpx;
  190. width: 80rpx;
  191. color:#fff;
  192. }
  193. }
  194. }
  195. .no-goods{
  196. text-align: center;
  197. padding-bottom: 60rpx!important;
  198. color: #999;
  199. image{
  200. width: 440rpx;
  201. height: 360rpx;
  202. margin: 40rpx auto 0 auto;
  203. display: block;
  204. }
  205. }
  206. .bargain-list .header {
  207. background-repeat: no-repeat;
  208. background-size: 100% 100%;
  209. width: 750rpx;
  210. height: 926rpx;
  211. padding-top: 55rpx;
  212. box-sizing: border-box;
  213. .iconfont{
  214. color: #fff;
  215. font-size: 40rpx;
  216. margin-left: 15rpx;
  217. }
  218. }
  219. .bargain-list .list {
  220. background-color: #fff;
  221. border-radius: 24rpx;
  222. margin: -510rpx 20rpx 66rpx 20rpx;
  223. padding: 32rpx 20rpx;
  224. }
  225. .item~.item{
  226. margin-top: 40rpx;
  227. }
  228. .red{
  229. color: #E93323;
  230. }
  231. .otPrice{
  232. font-size: 26rpx;
  233. font-family: Regular;
  234. color: #999;
  235. text-decoration: line-through;
  236. margin-top: 4rpx;
  237. }
  238. .cutBnt {
  239. background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
  240. }
  241. .bargain-list .list .load {
  242. font-size: 24rpx;
  243. height: 85rpx;
  244. text-align: center;
  245. line-height: 85rpx;
  246. }
  247. </style>