|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="商品列表" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
|
|
|
+ <!-- 固定nav -->
|
|
|
+ <view class="fixed-top">
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <view class="fixed-top-search flex">
|
|
|
+ <u--input v-model="title" @blur="pageList()" placeholder="请输入商品名称" border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
|
|
|
+ </view>
|
|
|
+ <!-- 选择 -->
|
|
|
+ <view class="fixed-top-choice flex">
|
|
|
+ <view class="fixed-top-choice-item" :class="{ 'action': choiceIndex == 1 }" @click="changeChice(1)">
|
|
|
+ <text>综合</text>
|
|
|
+ </view>
|
|
|
+ <view class="fixed-top-choice-item" :class="{ 'action': choiceIndex == 2 }" @click="changeChice(2)">
|
|
|
+ <text>销量</text>
|
|
|
+ </view>
|
|
|
+ <view class="fixed-top-choice-item flex" :class="{ 'action': choiceIndex == 3 }" @click="changeChice(3)">
|
|
|
+ <text>价格</text>
|
|
|
+ <view class="icon flex" v-if="choiceIndex == 3">
|
|
|
+ <image src="../static/list_up.png" mode="" v-if="priceShow" />
|
|
|
+ <image src="../static/list_down.png" mode="" v-else />
|
|
|
+ </view>
|
|
|
+ <view class="icon flex" v-else>
|
|
|
+ <image src="../static/list_null.png" mode="" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="none"></view>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view class="goods">
|
|
|
+ <view class="goods-list flex">
|
|
|
+ <view class="goods-list-item flex" v-for="(item, index) in list" :key="index" @click="toGoodsDetail(item)">
|
|
|
+ <view class="image-wrap flex">
|
|
|
+ <image :src="item.picUrl" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="content-title ells-one">{{ item.title }}</view>
|
|
|
+ <view class="content-coin flex">
|
|
|
+ <view class="content-coin__left flex">
|
|
|
+ <image src="../../static/public/goods_coin.png" mode=""></image>
|
|
|
+ <view class="num">×{{ item.exchangePrice }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-coin__right" v-if="item.originPrice">原价：{{ item.originPrice }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-price">￥{{ $numberFormat(item.value) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-list-item"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ title: '',
|
|
|
+ choiceIndex: 1,
|
|
|
+ priceSort: null,
|
|
|
+ saleSort: null,
|
|
|
+ priceShow: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad(opthios) {
|
|
|
+ console.log(opthios);
|
|
|
+ this.title = opthios.title
|
|
|
+ },
|
|
|
+
|
|
|
+ onShow() {
|
|
|
+ this.pageList()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ pageList() {
|
|
|
+ this.pageNum = 1
|
|
|
+ this.total = 0
|
|
|
+ this.list = []
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品列表
|
|
|
+ getList() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ let data = {
|
|
|
+ goodsName: this.title,
|
|
|
+ priceSort: this.priceSort,
|
|
|
+ saleSort: this.saleSort,
|
|
|
+ noToken: true
|
|
|
+ }
|
|
|
+ $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`,data).then(
|
|
|
+ res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ console.log("res: ",res);
|
|
|
+ res.rows.forEach(item => {
|
|
|
+ item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/340'
|
|
|
+ })
|
|
|
+ this.total = res.total
|
|
|
+ this.list = this.list.concat(res.rows)
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品详情
|
|
|
+ toGoodsDetail(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageGoods/goods/detail?id=${ item.goodsId }`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 筛选
|
|
|
+ changeChice(num) {
|
|
|
+ this.choiceIndex = num
|
|
|
+ if(num == 1) {
|
|
|
+ this.priceSort = null
|
|
|
+ this.saleSort = null
|
|
|
+ } else if (num == 2) {
|
|
|
+ this.saleSort = 2
|
|
|
+ this.priceSort = null
|
|
|
+ } else if (num == 3) {
|
|
|
+ this.saleSort = null
|
|
|
+ this.priceShow = !this.priceShow
|
|
|
+ this.priceSort = this.priceShow ? 1 : 2
|
|
|
+ }
|
|
|
+ this.pageList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ onReachBottom() {
|
|
|
+ // 判断是否有数据
|
|
|
+ if (this.total > this.pageNum * 20) {
|
|
|
+ setTimeout(() => {
|
|
|
+ ++this.pageNum
|
|
|
+ this.getList()
|
|
|
+ }, 500)
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('已经到底了')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ // 固定
|
|
|
+ .fixed-top {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 34rpx;
|
|
|
+ z-index: 100;
|
|
|
+ box-shadow: 0 5rpx 5rpx #ececec;
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ &-search {
|
|
|
+ height: 72rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 34px;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选择
|
|
|
+ &-choice {
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 18rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ color: #FA822C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .none {
|
|
|
+ height: 240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表
|
|
|
+ .goods {
|
|
|
+ padding: 0 34rpx;
|
|
|
+
|
|
|
+ &-list {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: 48%;
|
|
|
+ padding-bottom: 36rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .image-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 320rpx;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 22rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ height: 28rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-coin {
|
|
|
+ height: 30rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ margin-right: 24rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 34rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ color: #666666;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-price {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-item:last-child {
|
|
|
+ box-shadow: none;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
hwb0
