index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. <template>
  2. <view :style="colorStyle" class="pages">
  3. <view class="header">
  4. <view class="rule" @click="goRule(info)">规则</view>
  5. <image src="../static/newcomers.png" mode="" class="img"></image>
  6. <countDown :is-day="true" :tip-text="'剩余时间:'" :day-text="'天'" :hour-text="'时'" :minute-text="'分'"
  7. :second-text="''" :isSecond="false" :datatime="info.last_time" v-if="info.last_time"></countDown>
  8. <view class="list" :class="info.last_time?'':'marginList'">
  9. <view class="list-item">
  10. <image src="../static/order1.png" mode="" class="icon"></image>
  11. <text class="text">赠送积分</text>
  12. <text class="text">{{info.register_give_integral || 0}}</text>
  13. </view>
  14. <view class="list-item">
  15. <image src="../static/order2.png" mode="" class="icon"></image>
  16. <text class="text">赠送余额</text>
  17. <text class="text">{{info.register_give_money || 0}}</text>
  18. </view>
  19. <view class="list-item">
  20. <image src="../static/order3.png" mode="" class="icon"></image>
  21. <text class="text">优惠券</text>
  22. <text class="text">{{info.coupon_count || 0}}</text>
  23. </view>
  24. <view v-if="info.first_order_status" class="list-item">
  25. <image src="../static/order4.png" mode="" class="icon"></image>
  26. <text class="text">首单优惠</text>
  27. <text class="text">{{parseFloat(info.first_order_discount)/10 || 10}}折</text>
  28. </view>
  29. <view class="list-item">
  30. <image src="../static/order5.png" mode="" class="icon"></image>
  31. <text class="text">新人商品</text>
  32. <text class="text">{{info.product_count || 0}}件</text>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="content" :class="info.last_time?'':'marginCon'">
  37. <!-- 新人红包 -->
  38. <view class="red-envelopes" v-if="info.register_give_coupon?info.register_give_coupon.length:false">
  39. <view class="title">
  40. <text class="red-text">新人红包</text>
  41. <text class="text">新人专享红包,优惠不容错过</text>
  42. </view>
  43. <scroll-view scroll-x="true" class="scroll" show-scrollbar="false">
  44. <!-- 优惠券列表 -->
  45. <view class="scroll-item" :class="item._type==0?'on':''" v-for="(item,index) in info.register_give_coupon" :key="index">
  46. <image src="../static/box-use.png" v-if="item._type==0" mode="" class="img" />
  47. <image src="../static/box.png" v-else mode="" class="img" />
  48. <view class="condition">
  49. <view class='money font-color'>
  50. <text v-if="item.coupon_type==1"></text>
  51. <text class='num'
  52. v-if="item.coupon_type==1">{{item.coupon_price.toString().split(".")[0]}}</text>
  53. <text class="nums"
  54. v-if="item.coupon_price.toString().split('.').length>1 && item.coupon_type==1">.{{item.coupon_price.toString().split(".")[1]}}</text>
  55. <text class='num' v-if="item.coupon_type==2">{{parseFloat(item.coupon_price)/10}}</text>
  56. <text v-if="item.coupon_type==2"></text>
  57. </view>
  58. <view class="num2" v-if="item.use_min_price > 0">{{item.use_min_price}}可用</view>
  59. <view class="num2" v-else>无门槛券</view>
  60. </view>
  61. <view class="use" v-if="item._type==0">
  62. {{item._msg}}
  63. </view>
  64. <view class="use" v-else @click="goGoodList">
  65. {{item._msg}}
  66. <text class="iconfont icon-xiangyou"></text>
  67. </view>
  68. </view>
  69. </scroll-view>
  70. </view>
  71. <!-- 首单优惠 -->
  72. <view v-if="info.first_order_status" class="first-order">
  73. <view class="title">
  74. <text class="red-text">首单优惠</text>
  75. <text class="text">优惠仅此一次,建议尽快使用</text>
  76. </view>
  77. <view class="order acea-row row-middle">
  78. <view class="pictrue acea-row row-center-wrapper">
  79. <text class="iconfont icon-shoudanyouhui"></text>
  80. </view>
  81. <view class="order-content">
  82. <view class="order-text">新人首单{{parseFloat(info.first_order_discount)/10 || 10}}折</view>
  83. <view class="text">新人首次下单立享{{parseFloat(info.first_order_discount)/10 || 10}}折优惠哦~</view>
  84. </view>
  85. <view class="btn" @click="goGoodList">
  86. 去逛逛
  87. </view>
  88. </view>
  89. </view>
  90. <!-- 新人专享价 -->
  91. <view class="exclusive" v-if="newList.length">
  92. <view class="title">
  93. <text class="red-text">新人专享价</text>
  94. <text class="text">新人专享特价商品,仅限购买一个</text>
  95. </view>
  96. <view class="box acea-row row-middle">
  97. <view class="list" v-for="(item,index) in newList" :key="index" @click="goDetail(item)">
  98. <view class="img">
  99. <image :src="item.image" mode="aspectFill"></image>
  100. </view>
  101. <view class="name line1">
  102. {{item.store_name}}
  103. </view>
  104. <view class="price">¥{{item.price}}</view>
  105. <view class="y_price">¥{{item.ot_price}}</view>
  106. </view>
  107. </view>
  108. </view>
  109. <view class='loadingicon acea-row row-center-wrapper' v-if="newList.length">
  110. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
  111. </view>
  112. </view>
  113. <home v-if="navigation"></home>
  114. </view>
  115. </template>
  116. <script>
  117. import home from '@/components/home';
  118. import countDown from '@/components/countDown';
  119. import colors from "@/mixins/color";
  120. import {
  121. newcomerInfo,
  122. newcomerList
  123. } from '@/api/new_store.js';
  124. export default {
  125. mixins: [colors],
  126. components: {
  127. countDown,
  128. home
  129. },
  130. data() {
  131. return {
  132. info: {},
  133. newList:[],
  134. loading: false,
  135. loadend: false,
  136. loadTitle: '加载更多',
  137. page: 1,
  138. limit: 9,
  139. };
  140. },
  141. onLoad() {
  142. this.getNewcomerInfo();
  143. this.productList();
  144. },
  145. onReady() {
  146. },
  147. onShow() {
  148. },
  149. methods: {
  150. goDetail(item){
  151. uni.navigateTo({
  152. url: `/pages/goods_details/index?id=${item.id}&fromPage='newVip'`
  153. });
  154. },
  155. goRule(e){
  156. let that = this;
  157. uni.setStorageSync('infos', this.info.newcomer_agreement);
  158. uni.navigateTo({
  159. url: `/pages/store/ruleInfo/index`
  160. });
  161. },
  162. getNewcomerInfo() {
  163. newcomerInfo().then(res => {
  164. res.data.last_time = parseInt(res.data.last_time);
  165. this.info = res.data;
  166. }).catch(err => {
  167. this.$util.Tips({
  168. title: err
  169. });
  170. })
  171. },
  172. productList() {
  173. let that = this;
  174. if (that.loading) return;
  175. if (that.loadend) return;
  176. that.loading = true;
  177. that.loadTitle = '';
  178. newcomerList({
  179. page: that.page,
  180. limit: that.limit
  181. }).then(res=>{
  182. let list = res.data;
  183. let loadend = list.length < that.limit;
  184. that.newList = that.$util.SplitArray(list, that.newList);
  185. that.$set(that, 'newList', that.newList);
  186. that.loadend = loadend;
  187. that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
  188. that.page = that.page + 1;
  189. that.loading = false;
  190. }).catch(err=>{
  191. that.loading = false;
  192. that.loadTitle = '加载更多';
  193. this.$util.Tips({
  194. title: err
  195. });
  196. })
  197. },
  198. goGoodList(){
  199. uni.navigateTo({
  200. url: `/pages/goods/goods_list/index`
  201. });
  202. }
  203. },
  204. onReachBottom() {
  205. this.productList();
  206. }
  207. }
  208. </script>
  209. <style lang="scss">
  210. .marginCon{
  211. top: 410rpx !important;
  212. }
  213. .marginList{
  214. top: 170rpx !important;
  215. }
  216. .box {
  217. width: 640rpx;
  218. margin: 16rpx auto 0 auto;
  219. .list {
  220. margin-right: 10rpx;
  221. margin-top: 20rpx;
  222. &:nth-of-type(3n){
  223. margin-right: 0;
  224. }
  225. .img {
  226. width: 206rpx;
  227. height: 206rpx;
  228. border-radius: 11rpx 11rpx 0 0;
  229. image{
  230. width: 100%;
  231. height: 100%;
  232. border-radius: 11rpx 11rpx 0 0;
  233. }
  234. }
  235. .name {
  236. margin-top: 12rpx;
  237. width: 178rpx;
  238. font-size: 26rpx;
  239. font-weight: 400;
  240. color: #333333;
  241. overflow: hidden;
  242. white-space: nowrap;
  243. text-overflow: ellipsis;
  244. -o-text-overflow: ellipsis;
  245. }
  246. .price {
  247. margin-top: 8rpx;
  248. font-size: 28rpx;
  249. font-weight: 600;
  250. color: var(--view-theme);
  251. }
  252. .y_price{
  253. font-weight: 400;
  254. color: #CCCCCC;
  255. font-size: 20rpx;
  256. text-decoration: line-through;
  257. }
  258. }
  259. }
  260. /deep/.time {
  261. .red {
  262. color: #fff;
  263. }
  264. .styleAll {
  265. width: 36rpx;
  266. height: 36rpx;
  267. text-align: center;
  268. line-height: 36rpx;
  269. background-color: #fff;
  270. border-radius: 4rpx;
  271. color: var(--view-theme);
  272. }
  273. .timeTxt {
  274. margin: 0 12rpx;
  275. }
  276. }
  277. .header {
  278. width: 100%;
  279. height: 580rpx;
  280. background-color: var(--view-theme);
  281. border-radius: 0rpx 0rpx 100rpx 100rpx;
  282. position: relative;
  283. .rule{
  284. position: absolute;
  285. background-color: rgba(0,0,0,0.15);
  286. width: 74rpx;
  287. height: 34rpx;
  288. top:20rpx;
  289. right: 0;
  290. color: #fff;
  291. font-size: 20rpx;
  292. border-radius: 17rpx 0 0 17rpx;
  293. text-align: center;
  294. line-height: 34rpx;
  295. z-index: 9;
  296. }
  297. .img {
  298. width: 100%;
  299. height: 580rpx;
  300. }
  301. .time {
  302. position: absolute;
  303. top: 150rpx;
  304. left: 188rpx;
  305. font-size: 26rpx;
  306. font-weight: 400;
  307. color: #FFFFFF;
  308. display: flex;
  309. .time-box {
  310. width: 36rpx;
  311. height: 36rpx;
  312. background: #FFFFFF;
  313. border-radius: 4rpx;
  314. color: var(--view-theme);
  315. text-align: center;
  316. line-height: 36rpx;
  317. margin: 0 12rpx;
  318. }
  319. }
  320. .list {
  321. position: absolute;
  322. top: 230rpx;
  323. left: 24rpx;
  324. width: 702rpx;
  325. height: 220rpx;
  326. background: #FFFFFF;
  327. border-radius: 12rpx;
  328. display: flex;
  329. justify-content: space-between;
  330. padding: 34rpx 38rpx;
  331. .list-item {
  332. display: flex;
  333. flex-direction: column;
  334. align-items: center;
  335. .icon {
  336. width: 86rpx;
  337. height: 86rpx;
  338. background: #FDE9BC;
  339. border-radius: 50%;
  340. margin-bottom: 10rpx;
  341. }
  342. .text {
  343. font-size: 22rpx;
  344. font-weight: 400;
  345. color: #C47C16;
  346. }
  347. }
  348. }
  349. }
  350. .content {
  351. position: absolute;
  352. top: 470rpx;
  353. width: 702rpx;
  354. background: #fff;
  355. border-radius: 12rpx;
  356. padding-top: 36rpx;
  357. padding-bottom: 20rpx;
  358. left:50%;
  359. margin-left: -351rpx;
  360. .title {
  361. padding: 0 30rpx;
  362. .red-text {
  363. font-size: 30rpx;
  364. font-weight: 600;
  365. color: var(--view-theme);
  366. }
  367. .text {
  368. margin-left: 12rpx;
  369. font-size: 22rpx;
  370. font-weight: 400;
  371. color: #999999;
  372. }
  373. }
  374. .red-envelopes {
  375. margin-bottom: 36rpx;
  376. .scroll {
  377. white-space: nowrap;
  378. margin-top: 20rpx;
  379. height: 150rpx;
  380. padding-left: 30rpx;
  381. box-sizing: border-box;
  382. .scroll-item {
  383. margin-top: 30rpx;
  384. display: inline-block;
  385. width: 174rpx;
  386. height: 112rpx;
  387. background: var(--view-theme);
  388. border-radius: 12px;
  389. margin-right: 10rpx;
  390. position: relative;
  391. text-align: center;
  392. &.on{
  393. background: #ccc;
  394. .condition{
  395. color: #ccc;
  396. .money{
  397. color: #ccc !important;
  398. }
  399. }
  400. }
  401. .img {
  402. width: 156rpx;
  403. height: 88rpx;
  404. position: absolute;
  405. left: 10rpx;
  406. top: -16rpx;
  407. }
  408. .condition {
  409. width: 156rpx;
  410. height: 88rpx;
  411. position: absolute;
  412. top: -13rpx;
  413. left: 10rpx;
  414. color: var(--view-theme);
  415. .money {
  416. font-size: 20rpx;
  417. }
  418. .num {
  419. font-size: 36rpx;
  420. font-weight: 600;
  421. }
  422. .num2 {
  423. font-size: 20rpx;
  424. font-weight: 400;
  425. }
  426. .nums {
  427. font-size: 20rpx;
  428. font-weight: 600;
  429. }
  430. }
  431. .use {
  432. margin-top: 75rpx;
  433. font-size: 20rpx;
  434. font-family: PingFangSC-Regular, PingFang SC;
  435. font-weight: 400;
  436. color: #FFFFFF;
  437. .icon-xiangyou {
  438. font-size: 12rpx;
  439. }
  440. }
  441. }
  442. .use-item {
  443. border-radius: 0 !important;
  444. background: none !important;
  445. margin-top: 30rpx !important;
  446. .imghh {
  447. width: 174rpx;
  448. height: 132rpx;
  449. }
  450. }
  451. }
  452. }
  453. .first-order {
  454. .order {
  455. width: 642rpx;
  456. height: 128rpx;
  457. background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 30%);
  458. border-radius: 8rpx;
  459. display: flex;
  460. margin: 20rpx 30rpx 0 30rpx;
  461. .pictrue {
  462. width: 64rpx;
  463. height: 64rpx;
  464. background: #FFFFFF;
  465. border-radius: 50%;
  466. margin-left: 30rpx;
  467. .iconfont{
  468. font-size: 34rpx;
  469. color: var(--view-theme);
  470. }
  471. }
  472. .order-content {
  473. margin-left: 20rpx;
  474. color: #FFFFFF;
  475. .order-text {
  476. font-size: 28rpx;
  477. font-weight: 500;
  478. }
  479. .text {
  480. font-size: 22rpx;
  481. font-weight: 400;
  482. }
  483. }
  484. }
  485. .btn {
  486. width: 132rpx;
  487. height: 48rpx;
  488. background: #FFFFFF;
  489. border-radius: 24rpx;
  490. font-size: 26rpx;
  491. font-weight: 400;
  492. line-height: 48rpx;
  493. text-align: center;
  494. color: var(--view-theme);
  495. margin-left: 40rpx;
  496. }
  497. }
  498. // 新人专享
  499. .first-order + .exclusive {
  500. margin-top: 36rpx;
  501. }
  502. }
  503. </style>