|
@@ -0,0 +1,138 @@
|
|
|
+<template>
|
|
|
+ <view style="height: 100vh">
|
|
|
+ <view class="good-list">
|
|
|
+ <view class="good" v-for="item in list" @click="navto('/pages/goods_details/indexs?id=' + item.product_id + '&server_card_id=' + item.id)">
|
|
|
+ <image :src="item.image" mode="" class="good-image"></image>
|
|
|
+ <view class="good-name ">
|
|
|
+ <view class="clamp2">
|
|
|
+ {{item.card_name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="good-price">
|
|
|
+ <view class="price">
|
|
|
+ {{item.card_price}}
|
|
|
+ </view>
|
|
|
+ <!-- <view class="xl">
|
|
|
+ 销量:{{item.sold}}
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-loadmore :status="loadingType" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getSeverCardList
|
|
|
+ } from '@/api/store.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ loaded: false,
|
|
|
+ loadingType: 'loadmore',
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList(type) {
|
|
|
+ let that = this
|
|
|
+
|
|
|
+ if (type == 'tab' && that.loaded) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (that.loadingType == 'loading' || that.loadingType == 'nomore') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ that.loadingType = 'loading'
|
|
|
+
|
|
|
+ getSeverCardList({
|
|
|
+ page: that.page,
|
|
|
+ limit: that.pageSize,
|
|
|
+ }).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ that.list = that.list.concat(data.list)
|
|
|
+ that.page++
|
|
|
+ if (data.list.length == that.pageSize) {
|
|
|
+ that.loadingType = 'loadmore'
|
|
|
+ } else {
|
|
|
+ that.loadingType = 'nomore'
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ navto(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url,
|
|
|
+ fail() {
|
|
|
+ uni.switchTab({
|
|
|
+ url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .good-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 20rpx 28rpx;
|
|
|
+ .good {
|
|
|
+ width: 336rpx;
|
|
|
+ height: 482rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 14rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ .good-image {
|
|
|
+ width: 336rpx;
|
|
|
+ height: 336rpx;
|
|
|
+ border-radius: 14rpx 14rpx 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-price {
|
|
|
+ display: flex;
|
|
|
+ width: 336rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF1A1A;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ .xl{
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|