index.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. <template>
  2. <view :style="colorStyle">
  3. <view class="points-swiper">
  4. <image class="bag" src="static/jf-head.png" mode=""></image>
  5. <view class="swiper">
  6. <swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
  7. :duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
  8. <block v-for="(item, index) in imgUrls" :key="index">
  9. <swiper-item>
  10. <image :src="item.img" class="slide-image" @click="goPages(item)"></image>
  11. </swiper-item>
  12. </block>
  13. </swiper>
  14. </view>
  15. </view>
  16. <view class="model">
  17. <view class="model-list" v-for="(model,index) in modelList" :key="index" @click="jump(model.url)">
  18. <image class="img" :src="model.imgUrl" mode=""></image>
  19. <text>{{model.title}}</text>
  20. </view>
  21. </view>
  22. <view class="body">
  23. <view class="body-title">
  24. <text class="title">大家都在换</text>
  25. <text class="jump-trip" @click="jumpMore">查看更多
  26. <text class="iconfont icon-xiangyou"></text></text>
  27. </view>
  28. <view class="product-list" v-if="goodList.length">
  29. <view class="product-item" v-for="(item, index) in goodList" @click="goGoodsDetail(item)">
  30. <image :src="item.image"></image>
  31. <view class="info">
  32. <view class="title line1">{{ item.title }}</view>
  33. <view class="price-box">
  34. {{ item.price }}积分
  35. </view>
  36. <view class="sales">{{item.sales}}人兑换</view>
  37. </view>
  38. </view>
  39. </view>
  40. <view v-else class="no-goods">
  41. <image :src="imgHost + '/statics/images/no-thing.png'" mode=""></image>
  42. <view class="fontimg">暂无商品,去看点别的吧</view>
  43. </view>
  44. <view class="footer">
  45. <view class="body-title">
  46. <text class="title">轻松赚积分</text>
  47. <text></text>
  48. </view>
  49. <view class="footer-list">
  50. <view class="list-left">
  51. <image class="icon-sty" src="static/go-shoping.png" mode=""></image>
  52. <view class="list-left-right">
  53. <view class="title">
  54. 购买商品
  55. </view>
  56. <view class="trip">
  57. 购买商品可获得积分奖励
  58. </view>
  59. </view>
  60. </view>
  61. <navigator url="/pages/index/index" open-type="switchTab">
  62. <text class="go-jump">
  63. 去完成
  64. </text>
  65. </navigator>
  66. </view>
  67. <view class="footer-list">
  68. <view class="list-left">
  69. <image class="icon-sty" src="static/everyday.png" mode=""></image>
  70. <view class="list-left-right">
  71. <view class="title">
  72. 每日签到活动
  73. </view>
  74. <view class="trip">
  75. 每日签到可获得积分奖励
  76. </view>
  77. </view>
  78. </view>
  79. <navigator url="/pages/users/user_sgin/index">
  80. <text class="go-jump">
  81. 去完成
  82. </text>
  83. </navigator>
  84. </view>
  85. <view class="footer-list">
  86. <view class="list-left">
  87. <image class="icon-sty" src="static/luck-draw.png" mode=""></image>
  88. <view class="list-left-right">
  89. <view class="title">
  90. 九宫格抽奖活动
  91. </view>
  92. <view class="trip">
  93. 幸运抽奖可获得积分奖励
  94. </view>
  95. </view>
  96. </view>
  97. <navigator url="/pages/goods/lottery/grids/index?type=1">
  98. <text class="go-jump">
  99. 去完成
  100. </text>
  101. </navigator>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. </template>
  107. <script>
  108. // import swipers from './components/swiper.vue';
  109. import {
  110. mapGetters
  111. } from 'vuex';
  112. import {
  113. getStoreIntegral
  114. } from '@/api/points_mall.js'
  115. import {
  116. goShopDetail
  117. } from '@/libs/order.js';
  118. import colors from "@/mixins/color";
  119. import {HTTP_REQUEST_URL} from '@/config/app';
  120. export default {
  121. components: {
  122. // swipers
  123. },
  124. mixins: [colors],
  125. data() {
  126. return {
  127. autoplay: true,
  128. circular: true,
  129. interval: 3000,
  130. duration: 500,
  131. imgUrls: [],
  132. goodList: [],
  133. modelList: [{
  134. title: '我的积分',
  135. imgUrl: 'static/my-point.png',
  136. url: "/pages/users/user_integral/index"
  137. },
  138. {
  139. title: '每日签到',
  140. imgUrl: 'static/sign-in.png',
  141. url: '/pages/users/user_sgin/index'
  142. }, {
  143. title: '积分抽奖',
  144. imgUrl: 'static/points-lottery.png',
  145. url: '/pages/goods/lottery/grids/index?type=1'
  146. }, {
  147. title: '兑换记录',
  148. imgUrl: 'static/exchange.png',
  149. url: "/pages/points_mall/exchange_record"
  150. },
  151. ],
  152. imgHost:HTTP_REQUEST_URL
  153. }
  154. },
  155. computed: mapGetters(['isLogin']),
  156. onLoad() {
  157. this.getStoreIntegral()
  158. },
  159. watch: {
  160. isLogin: {
  161. handler: function(newV, oldV) {
  162. if (newV == true) {
  163. this.getStoreIntegral();
  164. }
  165. },
  166. deep: true
  167. },
  168. },
  169. onShow(){
  170. uni.removeStorageSync('form_type_cart');
  171. },
  172. methods: {
  173. getStoreIntegral() {
  174. getStoreIntegral().then(res => {
  175. this.imgUrls = res.data.banner
  176. this.goodList = res.data.list
  177. })
  178. },
  179. // 去商品详情
  180. goGoodsDetail(item) {
  181. goShopDetail(item).then(res => {
  182. uni.navigateTo({
  183. url: `/pages/points_mall/integral_goods_details?id=${item.id}`
  184. });
  185. });
  186. },
  187. jumpMore() {
  188. uni.navigateTo({
  189. url: '/pages/points_mall/integral_goods_list'
  190. })
  191. },
  192. goPages(item) {
  193. let url = item.link;
  194. if (url.indexOf("http") != -1) {
  195. // #ifdef H5
  196. location.href = url
  197. // #endif
  198. } else {
  199. if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index', '/pages/index/index']
  200. .indexOf(url) == -1) {
  201. uni.navigateTo({
  202. url: url
  203. })
  204. } else {
  205. uni.switchTab({
  206. url: url
  207. })
  208. }
  209. }
  210. },
  211. jump(url) {
  212. uni.navigateTo({
  213. url
  214. })
  215. }
  216. }
  217. }
  218. </script>
  219. <style lang="scss" scoped>
  220. .swiper,
  221. swiper,
  222. swiper-item,
  223. .slide-image {
  224. width: 100%;
  225. height: 280rpx;
  226. }
  227. /deep/ .uni-swiper-wrapper {
  228. border-radius: 10rpx;
  229. }
  230. .swiper {
  231. padding: 40rpx;
  232. }
  233. .points-swiper {
  234. position: relative;
  235. width: 100%;
  236. background-color: #fff;
  237. .bag {
  238. position: absolute;
  239. width: 100%;
  240. height: 285rpx;
  241. }
  242. .points-swiper-sty {
  243. padding: 20rpx 26rpx;
  244. }
  245. }
  246. .model {
  247. display: flex;
  248. justify-content: space-between;
  249. padding: 56rpx 42rpx;
  250. background-color: #fff;
  251. }
  252. .model-list {
  253. display: flex;
  254. flex-direction: column;
  255. align-items: center;
  256. justify-content: center;
  257. font-size: 26rpx;
  258. color: #333;
  259. margin-top: 27rpx;
  260. font-weight: 500;
  261. .img {
  262. width: 84rpx;
  263. height: 84rpx;
  264. margin-bottom: 19rpx;
  265. }
  266. }
  267. .body {
  268. background-color: #fff;
  269. padding: 0 30rpx;
  270. margin-top: 20rpx;
  271. .body-title {
  272. display: flex;
  273. justify-content: space-between;
  274. padding: 30rpx 0 10rpx 0;
  275. .title {
  276. font-size: 32rpx;
  277. font-family: PingFang SC;
  278. font-weight: bold;
  279. }
  280. .jump-trip,
  281. .icon-xiangyou {
  282. font-size: 24rpx;
  283. color: #999999;
  284. }
  285. }
  286. .product-list {
  287. display: flex;
  288. flex-wrap: wrap;
  289. justify-content: space-between;
  290. margin-top: 30rpx;
  291. .product-item {
  292. position: relative;
  293. width: 334rpx;
  294. background: #fff;
  295. border-radius: 10rpx;
  296. margin-bottom: 20rpx;
  297. box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.06);
  298. image {
  299. width: 100%;
  300. height: 344rpx;
  301. border-radius: 10rpx 10rpx 0 0;
  302. }
  303. .info {
  304. padding: 14rpx 16rpx;
  305. .title {
  306. font-size: 28rpx;
  307. }
  308. .price-box {
  309. font-size: 26rpx;
  310. font-weight: 700;
  311. margin-top: 8px;
  312. color: var(--view-theme);
  313. }
  314. .sales {
  315. font-size: 22rpx;
  316. color: #999999;
  317. }
  318. }
  319. }
  320. }
  321. }
  322. .footer {
  323. margin-top: 20rpx;
  324. .footer-list {
  325. display: flex;
  326. justify-content: space-between;
  327. padding: 26rpx 0;
  328. .list-left {
  329. display: flex;
  330. align-items: center;
  331. .icon-sty {
  332. width: 80rpx;
  333. height: 80rpx;
  334. margin-right: 18rpx;
  335. }
  336. .list-left-right {
  337. .title {
  338. font-size: 28rpx;
  339. font-weight: bold;
  340. color: #333333;
  341. }
  342. .trip {
  343. font-size: 22rpx;
  344. color: #999999;
  345. }
  346. }
  347. }
  348. .go-jump {
  349. display: flex;
  350. align-items: center;
  351. background-color: #E93323;
  352. border-radius: 26rpx;
  353. color: #fff;
  354. font-size: 28rpx;
  355. height: 48rpx;
  356. line-height: 48rpx;
  357. padding: 6rpx 24rpx;
  358. }
  359. }
  360. }
  361. .no-goods {
  362. display: flex;
  363. flex-direction: column;
  364. height: 472rpx;
  365. image{
  366. width: 100%;
  367. display: block;
  368. margin: 0 auto;
  369. }
  370. .fontimg{
  371. text-align: center;
  372. color: #bebebe;
  373. }
  374. }
  375. </style>