pet_uni/pages/UserCoupons/index.vue

<template>
	<HeaderNav title="优惠在这" :is-back="true" :nav-to-url="navToUrl"></HeaderNav>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')',
		paddingBottom:couponType===1?'200rpx':'50rpx'
		}">

		<view class="capsule-container row">
			<view class="capsule col-6" :class="{active:item.value === couponType}" @click="couponTypeToggle(item)" v-for="item in types">
				{{ item.title }}
			</view>
		</view>
		<view class="coupons-list">
			<view v-for="item in couponsList" class="coupons-item-container" :style="{
					backgroundImage:'url('+(item.status > 0?staticImage.couponsGrayBackground:staticImage.couponsBackground)+')'
					}">
				<view class="coupons-item row">
					<view class="coupons-left ">
						<view class="coupons-big-title-group row">
							<view class="coupons-big-title">{{item.price}}</view>
							<view class="coupons-big-desc">元</view>
						</view>
						<view class="coupons-cause">
							{{item.cause}}
						</view>
					</view>
					<view class="coupons-right col row">
						<view class=" ">
							<view class="coupons-title col-12">{{item.title}}</view>
							<view class="coupons-desc col-12">{{item.time}}</view>
						</view>
						<view class="coupons-gq " v-show="item.status === 2">
							<image class="img" :src="staticImage.couponsGQ" mode="aspectFill" />
						</view>
						<view class="coupons-gq " v-show="item.status === 1">
							<image class="img" :src="staticImage.couponsUse" mode="aspectFill" />
						</view>
						<view class="coupons-bottom col-12 row">
							<view class="coupons-rule row col" @click="showCoupons(item)">查看使用规则 <u-icon class="arrow-right" size="24rpx" color="#999999" name="arrow-right"></u-icon></view>
							<view class="coupons-button">
								<MzButton
                    :title="couponType===1?(item.checked?'取消选择':'选择'):'立即使用'"
                    @click="couponType===1?item.checked = !item.checked:clickCoupons(item)"
                    button-width="145rpx"
                    :button-color="(item.status > 0 || item.checked) ?'#CACACA':'#4DC3B8'"
                    font-color="#fff"
                    font-size="26rpx"
                    :is-background="false"
                    padding-tb="2rpx"
                    :btn-style="{
                      boxShadow:(item.status > 0?'2rpx -5rpx 0rpx 0rpx rgba(199,199,199,0.35)':'2rpx -5rpx 0rpx 0rpx rgba(77,195,184,0.35)')
                    }"></MzButton>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" fontSize="28"
								color="#ACB4B6"
								line
								line-color="#ACB4B6"
								marginBottom="30" marginTop="30" @loadmore="getCouponsList(++this.page)"/>
	</view>
  <view class="footer-menu row" v-if="couponType===1">
    <view class="footer-button col-12">
      <MzButton
          title="确认"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="100%"
          style="width:90%;"
          @click="cardCouponsConfirm()"
      >
      </MzButton>
    </view>
  </view>
  <uv-popup ref="agreement" mode="bottom" round="20rpx" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
    <view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
      <view class="value col" style="position: relative;text-align: center;">

        <!--        <u-text text="协议内容" size="38" color="#191919"></u-text>-->
        <view class="" style="position: relative;display:inline-block;">
          <view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">使用说明</view>
          <view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
        </view>
      </view>
    </view>
    <view style="padding:30rpx;max-height:700rpx;overflow: auto;" v-if="couponsContent!==''">
      <u-parse :content="couponsContent"></u-parse>
    </view>
  </uv-popup>
	<!-- <RightNav></RightNav> -->
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '@/components/MzButton/Index.vue';
  import {userCoupons} from "../../api/user";
  import {getConfig} from "@/api/other";
  import log from "@/utils/log";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				staticImage: {
					screenActiveImg: imghost + '/order-screen-active.png',
					orderCardBackground: imghost + '/order-card-background.png',
					wallpaperBgImage: imghost + '/background.png',
					couponsBackground: imghost + '/coupons-bg.png',
					couponsGrayBackground: imghost + '/coupons-gray-bg.png',
					couponsGQ: imghost + '/coupons-gq.png',
					couponsUse: imghost + '/coupons-use.png',
				},
				indexBanner: [{
					image: imghost + '/banner.png',
					url: '',
				}],
				user: {
					avatar: imghost + '/banner.png',
					nickname: '清晨的风',
					coupons: 221,
					id: 88685
				},
				isTop: false,

				petImage: imghost + '/pet_avatar1.jpeg',
				couponsList: [],
        type:'lists',
				couponType:2,
        types:[
					{title:'省点银子', value: 2},
					{title:'豪门大户卡', value: 1},
				],
				page:1,
				status:'loadmore',
        navToUrl:'',
        couponsContent:'',
			}
		},
		onLoad(option) {
      this.type = option.type||'lists'
      console.log(this.type)
      this.navToUrl = option.url || ''
		},
		methods: {
      cardCouponsConfirm(){
        let checkedCoupons = this.couponsList.filter(item => {
          return item.checked
        });
        uni.setStorageSync('userCoupons',checkedCoupons);
        uni.navigateBack();
      },
      showCoupons(item){
        console.log(item)
        console.log(item.use_info)
          this.couponsContent = item.use_info;
        this.$refs.agreement.open();
      },
      clickCoupons(item){
        if(item.status === 0){
          uni.setStorageSync('userCoupons',[item]);
          uni.navigateBack();
        }

      },
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
      getCouponsList(page = 1){
				if (this.status === 'nomore'){
					return;
				}else{
					this.status = 'loading';
				}
        userCoupons({
          page:page,
					limit:10,
					is_buy:this.couponType
        }).then((res) => {
					let couponsList = res.data.map((row) => {
						return {
							id:row.id,
							price:parseFloat(row.deduction),
							title:row.title,
							time: '有效期至 '+row.end_time,
							cause:'满'+parseFloat(row.min_price)+'使用',
              status: row.status,
              use_info: row.use_info,
						}
					});
					this.status = couponsList.length < 10 ? 'nomore' : 'loadmore';

					if (page === 1) {
						this.couponsList = couponsList;
						return;
					}
          this.couponsList.push(...couponsList);
        })
      },
			couponTypeToggle(item){
				this.couponType = item.value;
				this.page = 1;
				this.status = 'loadmore';
				this.getCouponsList();
			}
		},
		onPageScroll(res) {
			if (res.scrollTop <= 20) {
				uni.$emit('isTop', true);
			} else {
				uni.$emit('isTop', false);
			}
		},
		onReachBottom() {
			this.getCouponsList(++this.page);
		},
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop +
			// api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		},
    mounted() {
      this.getCouponsList();
    }
  }
</script>

<style lang="scss">
	@import './components/index.scss';
</style>