123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
- <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>
|