3 changed files with 202 additions and 2 deletions
Unified 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> | |||||