3 changed files with 202 additions and 2 deletions
Split View
Diff Options
-
+195 -0components/user/couponList.vue
-
+4 -1pages.json
-
+3 -1pages_order/mine/recommend.vue
+ 195
- 0
components/user/couponList.vue
View File
| @ -0,0 +1,195 @@ | |||
| <template> | |||
| <scroll-view | |||
| scroll-y="true" | |||
| :style="{height: height}" | |||
| @scrolltolower="loadMoreData"> | |||
| <view class="list"> | |||
| <view class="item" | |||
| v-for="(item,index) in list" | |||
| @click="select(item)" | |||
| :key="index"> | |||
| <view class="price"> | |||
| <view class="num"> | |||
| <view class="icon"> | |||
| ￥ | |||
| </view> | |||
| {{ item.price }} | |||
| </view> | |||
| <view class="tiao"> | |||
| {{ item.useType_dictText }}满{{ item.conditionPrice }}可用 | |||
| </view> | |||
| </view> | |||
| <view class="date"> | |||
| <view> | |||
| 有效期{{ item.endTime || '不限' }} | |||
| </view> | |||
| <view> | |||
| {{ item.type_dictText }}使用 | |||
| </view> | |||
| </view> | |||
| <view class="status"> | |||
| <!-- 已 使 用 --> | |||
| <!-- 立 即 使 用 --> | |||
| {{ item.status_dictText }} | |||
| </view> | |||
| <view class="del" | |||
| v-if="isSelect(item)"> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <uv-empty | |||
| v-if="list.length == 0" | |||
| text="空空如也" | |||
| textSize="30rpx" | |||
| iconSize="200rpx" | |||
| icon="list"></uv-empty> | |||
| </scroll-view> | |||
| </template> | |||
| <script> | |||
| import mixinList from '@/mixins/list.js' | |||
| export default { | |||
| name:"couponList", | |||
| mixins : [mixinList], | |||
| props : { | |||
| height : { | |||
| default : 'auto' | |||
| // default : 'calc(90vh - 180rpx)' | |||
| }, | |||
| // 押金 | |||
| depositPrice : { | |||
| }, | |||
| washPrice: {//水洗费 | |||
| }, | |||
| rentPrice: {//租金 | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| mixinsListApi : 'couponPage' | |||
| }; | |||
| }, | |||
| methods : { | |||
| select(item){ | |||
| if(this.isSelect(item)){ | |||
| return | |||
| } | |||
| this.$emit('select', item) | |||
| }, | |||
| isSelect(item){ | |||
| if(!this.depositPrice && !this.rentPrice && !this.washPrice){ | |||
| return false | |||
| } | |||
| // 押金 | |||
| if(this.depositPrice && | |||
| item.useType == 0 && | |||
| this.depositPrice >= item.conditionPrice){ | |||
| return false | |||
| } | |||
| // 租金 | |||
| if(this.rentPrice && | |||
| item.useType == 1 && | |||
| this.rentPrice >= item.conditionPrice){ | |||
| return false | |||
| } | |||
| // 水洗 | |||
| if(this.washPrice && | |||
| item.useType == 2 && | |||
| this.washPrice >= item.conditionPrice){ | |||
| return false | |||
| } | |||
| return true | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .list{ | |||
| .item{ | |||
| color: #4FD3BC; | |||
| position: relative; | |||
| width: calc(100% - 40rpx); | |||
| height: 220rpx; | |||
| background: url(../../static/image/coupon/c.png); | |||
| background-size: 100% 100%; | |||
| margin: 20rpx; | |||
| box-sizing: border-box; | |||
| padding: 30rpx; | |||
| .status{ | |||
| position: absolute; | |||
| right: 20rpx; | |||
| top: 20rpx; | |||
| height: calc(100% - 40rpx); | |||
| width: 60rpx; | |||
| writing-mode:vertical-rl; | |||
| box-sizing: border-box; | |||
| padding: 20rpx; | |||
| background-color: #fff; | |||
| border-radius: 60rpx; | |||
| font-size: 26rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| .price{ | |||
| display: flex; | |||
| align-items: center; | |||
| .num{ | |||
| color: #4FD3BC; | |||
| font-weight: 900; | |||
| font-size: 70rpx; | |||
| display: flex; | |||
| align-items: flex-end; | |||
| .icon{ | |||
| color: #fff; | |||
| background-color: #4FD3BC; | |||
| width: 30rpx; | |||
| height: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| font-size: 20rpx; | |||
| border-radius: 14rpx; | |||
| margin-bottom: 14rpx; | |||
| margin-right: 10rpx; | |||
| } | |||
| } | |||
| .tiao{ | |||
| padding: 10rpx 20rpx; | |||
| background-color: #9ee3d1; | |||
| color: #25a28c; | |||
| font-size: 22rpx; | |||
| margin-left: 20rpx; | |||
| border-radius: 10rpx; | |||
| } | |||
| } | |||
| .date{ | |||
| display: flex; | |||
| font-size: 24rpx; | |||
| view{ | |||
| margin-right: 20rpx; | |||
| } | |||
| } | |||
| } | |||
| .del{ | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: #ffffff99; | |||
| z-index: 99; | |||
| } | |||
| } | |||
| </style> | |||