123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <template>
- <view class="content">
- <view v-if="goldLimit>0" class="info">该类商品需购满{{goldLimit}}乐豆才能下单哦!</view>
- <view v-if="goodsList.length">
- <uni-coods :list="goodsList"></uni-coods>
- <view class="loadmore"><u-loadmore @loadmore="loadmore" :status="status" /></view>
- </view>
- <!-- 购物车 -->
- <uni-cart-fix :dragPic="dragPic"></uni-cart-fix>
- </view>
- </template>
- <script>
- import {
- getGoodsList
- } from '@/api/goods.js'
- export default {
- data() {
- return {
- clsId: '',
- goldLimit:0,
- goodsName: '',
- pageNo: 1,
- pageSize: 10,
- goodsList:[],
- status: 'loadmore',
- count: 0,
- dragPic: '/static/cart.png', // 购物车图标
- };
- },
- onLoad(opts) {
- this.goodsName = opts.name
- this.clsId = opts.goodsTypeNo
- this.goldLimit = opts.goldLimit
- uni.setNavigationBarTitle({
- title: this.goodsName
- })
- this.getGoods()
- },
- onUnload() {
- uni.$off('addCart')
- },
- // 下拉刷新
- onPullDownRefresh() {
- console.log('refresh')
- this.pageNo = 1
- this.getGoods()
- setTimeout(function () {
- uni.stopPullDownRefresh()
- }, 200)
- },
- methods: {
- // 查询商品
- getGoods(item,index){
- getGoodsList({
- pageNo: this.pageNo,
- pageSize: this.pageSize,
- goodsTypeNo:this.clsId,
- }).then(res => {
- console.log(res,'goodsList')
- if(res.status == 200){
- this.count = res.data.count
- if(this.pageNo == 1){
- this.goodsList = res.data.list
- if(res.data.list.length == this.count){
- this.status = 'nomore'
- }else{
- this.status = 'loadmore'
- }
- }else{
- this.goodsList = this.goodsList.concat(res.data.list)
- this.goodsList.splice()
- this.status = 'loadmore'
- }
- }
- })
- },
- loadmore(){
- if(this.count <= this.goodsList.length) {
- this.status = 'nomore'
- }else{
- this.status = 'loading'
- this.pageNo = ++ this.pageNo
- this.getGoods()
- }
- }
- },
- onReachBottom() {
- this.loadmore()
- }
- }
- </script>
- <style lang="scss">
- .content {
- width: 100%;
- .goods{
- padding: 20upx 0;
- }
- .goods-list{
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- padding: 20upx 20upx 0;
- background: #FFFFFF;
- >view{
- margin-bottom: 20upx;
- }
- }
- .info{
- text-align: center;
- color: #DD524D;
- margin-bottom: 20upx;
- }
- .loadmore{
- padding: 20upx 0;
- }
- }
- </style>
|