|
@@ -5,6 +5,24 @@
|
|
|
<text>兑换大厅</text>
|
|
|
</view>
|
|
|
</u-navbar>
|
|
|
+ <view class="screen-coin">
|
|
|
+ <view class="flex screen-coin-select" @click="openSelect">
|
|
|
+ <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-down" color="#333" size="18" v-if="coinShow"></u-icon>
|
|
|
+ <u-icon name="arrow-up" color="#333" size="18" v-else></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="screen-coin-list" v-if="coinShow">
|
|
|
+ <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="`/pages/goods/detail?id=${ item.goodsId }`" class="core-list-item"
|
|
@@ -25,6 +43,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<custom-tab-bar :activeValue="'core'" />
|
|
|
+
|
|
|
+ <u-overlay :show="coinShow" @click="coinShow = false" zIndex="1"></u-overlay>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -41,19 +61,99 @@
|
|
|
pageNum: 1,
|
|
|
total: 0,
|
|
|
list: [],
|
|
|
+ coinShow: false,
|
|
|
+ coinList:[
|
|
|
+ {
|
|
|
+ min: '',
|
|
|
+ max: '',
|
|
|
+ desc: '全部价格'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 1,
|
|
|
+ max: 20,
|
|
|
+ desc: '盲豆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 21,
|
|
|
+ max: 40,
|
|
|
+ desc: '盲豆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 41,
|
|
|
+ max: 60,
|
|
|
+ desc: '盲豆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 61,
|
|
|
+ max: 80,
|
|
|
+ desc: '盲豆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 81,
|
|
|
+ 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: '',
|
|
|
+ desc: '盲豆以上'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ actionInfo:{},
|
|
|
+ actionIndex: 0,
|
|
|
+ coinNum:{
|
|
|
+ startPrice: '',
|
|
|
+ endPrice: ''
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
|
|
this.pageList()
|
|
|
+ this.actionInfo = this.coinList[this.actionIndex]
|
|
|
},
|
|
|
methods: {
|
|
|
+ openSelect(){
|
|
|
+ this.coinShow = !this.coinShow
|
|
|
+ },
|
|
|
+
|
|
|
+ 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
|
|
|
+ console.log(this.coinNum);
|
|
|
+ this.pageList()
|
|
|
+ },
|
|
|
+
|
|
|
getList() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
});
|
|
|
let data = {
|
|
|
categoryId: '',
|
|
|
+ ...this.coinNum,
|
|
|
noToken: true
|
|
|
}
|
|
|
$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
|
|
@@ -98,12 +198,52 @@
|
|
|
|
|
|
</style>
|
|
|
<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;
|