|
|
@@ -1,367 +0,0 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-navbar :border="true" :placeholder="true" :autoBack="true" bgColor="#ffffff" :title="title"></u-navbar>
|
|
|
- <view class="screen-coin">
|
|
|
- <view class="flex screen-coin-select">
|
|
|
- <view @click="ascSelect" class="flex">
|
|
|
- <view class="title">
|
|
|
- <text>{{ ascListsingle.text}}</text>
|
|
|
- </view>
|
|
|
- <u-icon name="arrow-up" color="#333" size="18" v-if="ascShow"></u-icon>
|
|
|
- <u-icon name="arrow-down" color="#333" size="18" v-else></u-icon>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- <view @click="openSelect" class="flex">
|
|
|
- <view class="title">
|
|
|
- <text v-if="actionInfo.min">{{ actionInfo.min }}</text>
|
|
|
- <text v-if="actionInfo.max">-{{ actionInfo.max }}</text>
|
|
|
- <text>{{ actionInfo.desc }}</text>
|
|
|
- </view>
|
|
|
- <u-icon name="arrow-up" color="#333" size="18" v-if="coinShow"></u-icon>
|
|
|
- <u-icon name="arrow-down" color="#333" size="18" v-else></u-icon>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- <view class="screen-coin-list" v-if="ascShow" @touchmove.prevent.stop>
|
|
|
- <view class="flex screen-coin-list-item" v-for="(item, index) in ascList" :key="index" @click="selectCoinTwo(item, index)">
|
|
|
- <text :class="{ 'action': ascListIndex == index }">{{ item.text }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="screen-coin-list" v-if="coinShow" @touchmove.prevent.stop>
|
|
|
- <view class="flex screen-coin-list-item" v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
|
|
|
- <text v-if="item.min" :class="{ 'action': actionIndex == index }">{{ item.min }}</text>
|
|
|
- <text v-if="item.max" :class="{ 'action': actionIndex == index }">-{{ item.max }}</text>
|
|
|
- <text :class="{ 'action': actionIndex == index }">{{ item.desc }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="core">
|
|
|
- <view class="flex core-list">
|
|
|
- <navigator :url="`/packageGoods/goods/detail?id=${ item.goodsId }`" class="core-list-item"
|
|
|
- hover-class="navigator-hover" v-for="(item, index) in list" :key="index">
|
|
|
- <view class="flex iamge-wrap">
|
|
|
- <image :src="item.picUrl" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="title">{{ item.title }}</view>
|
|
|
- <view class="bean">
|
|
|
- <image src="../../static/icon/bean.png" mode="aspectFill"></image>
|
|
|
- <view>× {{ item.exchangePrice }}</view>
|
|
|
- </view>
|
|
|
- </navigator>
|
|
|
- <view class="core-list-item"></view>
|
|
|
- </view>
|
|
|
- <view class="flex empty" v-if="!list.length">
|
|
|
- <u-empty text="数据为空" mode="order" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <custom-tab-bar :activeValue="'core'" />
|
|
|
-
|
|
|
- <u-overlay :show="coinShow" @click="coinShow = false" zIndex="1" @touchmove.prevent.stop></u-overlay>
|
|
|
- <u-overlay :show="ascShow" @click="ascShow = false" zIndex="1" @touchmove.prevent.stop></u-overlay>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import env from '../../config/env.js'
|
|
|
- import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
|
|
|
- import $http from '@/utils/request.js'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- CustomTabBar,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- title:"兑换大厅",
|
|
|
- pageNum: 1,
|
|
|
- total: 0,
|
|
|
- list: [],
|
|
|
- coinShow: false,
|
|
|
- coinList:[
|
|
|
- {
|
|
|
- min: null,
|
|
|
- max: null,
|
|
|
- desc: '全部价格'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 1,
|
|
|
- max: 100,
|
|
|
- desc: '盲豆'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 101,
|
|
|
- max: 200,
|
|
|
- desc: '盲豆'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 201,
|
|
|
- max: 500,
|
|
|
- desc: '盲豆'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 501,
|
|
|
- max: 1000,
|
|
|
- desc: '盲豆'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 1001,
|
|
|
- max: 5000,
|
|
|
- desc: '盲豆'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 5000,
|
|
|
- max: null,
|
|
|
- desc: '盲豆以上'
|
|
|
- },
|
|
|
- ],
|
|
|
- actionInfo:{},
|
|
|
- actionIndex: 0,
|
|
|
- coinNum:{
|
|
|
- startPrice: null,
|
|
|
- endPrice: null
|
|
|
- },
|
|
|
- tagIds:'',//标签
|
|
|
- categoryId:'',//链接
|
|
|
-
|
|
|
- orderByColumn:'',//默认exchangePrice
|
|
|
- isAsc:'',//从低到高asc isAsc:'desc'从高到低
|
|
|
- ascShow:false,
|
|
|
- ascList:[
|
|
|
- {
|
|
|
- data:'',
|
|
|
- text:'默认排序'
|
|
|
- },
|
|
|
- {
|
|
|
- data:'asc',
|
|
|
- text:'价格从低到高'
|
|
|
- },
|
|
|
- {
|
|
|
- data:'desc',
|
|
|
- text:'价格从高到低'
|
|
|
- },
|
|
|
- ],
|
|
|
- ascListsingle:{},
|
|
|
- ascListIndex:0,
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- // 跳转接参数
|
|
|
- onLoad(opthios) {
|
|
|
- this.title = opthios.name
|
|
|
- if(opthios.type == 'category'){
|
|
|
- this.categoryId = opthios.data
|
|
|
- }else{
|
|
|
- this.tagIds = opthios.data
|
|
|
- }
|
|
|
-
|
|
|
- this.pageList()
|
|
|
- this.actionInfo = this.coinList[this.actionIndex]
|
|
|
- this.ascListsingle = this.ascList[this.ascListIndex]
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- toBackCore(){
|
|
|
- uni.navigateBack({
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- getList() {
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- let data = {
|
|
|
- categoryId: this.categoryId,
|
|
|
- tagIds: this.tagIds,
|
|
|
- ...this.coinNum,
|
|
|
- noToken: true
|
|
|
- }
|
|
|
- $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20&orderByColumn=${this.orderByColumn}&isAsc=${this.isAsc}`, data).then(
|
|
|
- res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 0) {
|
|
|
- res.rows.forEach(item => {
|
|
|
- let picUrlArr = item.picUrl.split(',')
|
|
|
- item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
|
|
|
- })
|
|
|
- this.total = res.total
|
|
|
- this.list = this.list.concat(res.rows)
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- pageList() {
|
|
|
- this.pageNum = 1
|
|
|
- this.total = 0
|
|
|
- this.list = []
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- pageListTwo() {
|
|
|
- this.pageNum = 1
|
|
|
- this.total = 0
|
|
|
- this.list = []
|
|
|
- this.getList()
|
|
|
- },
|
|
|
-
|
|
|
- openSelect(){
|
|
|
- if(this.coinShow == false){
|
|
|
- this.coinShow = true
|
|
|
- this.ascShow = false
|
|
|
- }else{
|
|
|
- this.coinShow = false
|
|
|
- }
|
|
|
- },
|
|
|
- //排序切换
|
|
|
- ascSelect(){
|
|
|
- if(this.ascShow == false){
|
|
|
- this.ascShow = true
|
|
|
- this.coinShow = false
|
|
|
- }else{
|
|
|
- this.ascShow = false
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- selectCoin(item, index){
|
|
|
- this.actionIndex = index
|
|
|
- this.actionInfo = this.coinList[this.actionIndex]
|
|
|
- this.coinShow = false
|
|
|
- this.coinNum.startPrice = item.min
|
|
|
- this.coinNum.endPrice = item.max
|
|
|
- this.pageList()
|
|
|
- },
|
|
|
- selectCoinTwo(item, index){
|
|
|
- this.ascListIndex = index
|
|
|
- this.ascListsingle = this.ascList[this.ascListIndex]
|
|
|
- this.ascShow = false
|
|
|
-
|
|
|
- if(item.data == ''){
|
|
|
- this.orderByColumn = ''
|
|
|
- this.isAsc = ''
|
|
|
- }else{
|
|
|
- this.isAsc = item.data
|
|
|
- this.orderByColumn = 'exchangePrice'
|
|
|
- }
|
|
|
-
|
|
|
- this.pageListTwo()
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- onReachBottom() {
|
|
|
- // 判断是否有数据
|
|
|
- if (this.total > this.pageNum * 20) {
|
|
|
- setTimeout(() => {
|
|
|
- ++this.pageNum
|
|
|
- this.getList()
|
|
|
- }, 500)
|
|
|
- } else {
|
|
|
- uni.$u.toast('已经到底了')
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.screen-coin {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- z-index: 10;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-top: 1px solid #F8F8F8;
|
|
|
- box-shadow: 0 4rpx 10rpx 0 rgba(151, 151, 151, 0.24);
|
|
|
-
|
|
|
- &-select {
|
|
|
- height: 86rpx;
|
|
|
- line-height: 86rpx;
|
|
|
- width: 100%;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- .title {
|
|
|
- padding-left: 40rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- &-list {
|
|
|
- width: 100%;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-top: 1px solid #F8F8F8;
|
|
|
-
|
|
|
- &-item{
|
|
|
- height: 86rpx;
|
|
|
- line-height: 86rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-bottom: 1px solid #F8F8F8;
|
|
|
- }
|
|
|
- &-item:last-child{
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- .action{
|
|
|
- color: $uni-text-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .core {
|
|
|
- margin: 20rpx 0;
|
|
|
-
|
|
|
- &-list {
|
|
|
- justify-content: space-evenly;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding-top: 96rpx;
|
|
|
-
|
|
|
- &-item {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 340rpx;
|
|
|
- height: 502rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .iamge-wrap {
|
|
|
- image {
|
|
|
- border-top-left-radius: 10rpx;
|
|
|
- border-top-right-radius: 10rpx;
|
|
|
- width: 340rpx;
|
|
|
- height: 340rpx;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- padding: 0 14rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .bean {
|
|
|
- padding: 0 14rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- color: rgba(235, 112, 9, 100);
|
|
|
- margin-top: 12rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 42rpx;
|
|
|
- height: 42rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-item:last-child {
|
|
|
- padding: 0;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .empty {
|
|
|
- height: 60vh;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
hwb0
