material-shop-user/pages_category_page2/channelCoupon/index.vue

<template>
	<view class="channel-coupon">
		<GlobalLoading />
		<view class="details">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="(imgItem, index) in channelCouponData.productImageList" :key="index">
					<image class="swiper-img" :src="imgItem"></image>
				</swiper-item>
			</swiper>
			<view class="info">
				<view class="price-box">
					<view class="icon">
						<img class="icon-img" src="../../static/images/origin/icon-coupon.png" alt="" mode="widthFix" />
					</view>
					<label class="price">¥{{ channelCouponData.price }}</label>
					<label class="original-price">¥{{ channelCouponData.originalPrice }}</label>
					<label class="buy-count">{{ channelCouponData.buyUserCount }}人付款</label>
				</view>
				<text class="name" @click="jumpProductDetail(channelCouponData)">{{ channelCouponData.productName }}</text>
			</view>
			<view class="coupon">
				<view class="price">
					<text v-if="channelCouponData.couponType === 1" class="unit">¥</text>
					<text class="val">{{ channelCouponData.reduceMoney }}</text>
					<text v-if="channelCouponData.couponType === 2" class="unit">折</text>
				</view>
				<view class="coupon-content">
					<view class="time">
						<text class="text">有效期</text>
						<text class="val">{{ channelCouponData.startTime.slice(0, 10) }} - {{ channelCouponData.endTime.slice(0, 10) }}</text>
					</view>
					<view v-if="channelCouponData.state === 3" class="btn" @click="receiveCoupon(channelCouponData)">立即领取</view>
					<view v-if="channelCouponData.state === 0" class="btn">已领取</view>
					<view v-if="channelCouponData.state === 1" class="btn">已使用</view>
					<view v-if="channelCouponData.state === 2" class="btn">已过期</view>
				</view>
			</view>
		</view>
		<div v-if="productList && productList.length > 0" class="pro-list">
			<div class="title">
				<img class="title-img" src="../../static/images/origin/img-title.png" alt="商品推荐" mode="widthFix" />
			</div>
			<div class="product-list">
				<div class="product-list-box">
					<div v-for="(item, index) in productList" :key="index" class="product-list-item-warp" @click="jumpProductDetail(item)">
						<div class="product-list-item">
							<div class="product-list-img">
								<img v-show="item.image" class="img" :src="item.image">
							</div>
							<div class="product-list-info">
								<label class="product-name">{{ item.productName }}</label>
								<div class="flex">
									<div class="shop-box" @click.stop="jumpStore(item)">
										<label class="shop-name">{{ item.shopName }}</label>
										<div class="shop-logo">
											<img :src="item.shopLogo">
										</div>
									</div>
									<label class="buy-count">{{ item.users ? item.users : 0 }}人付款</label>
								</div>
								<div class="price-warp">
									<img v-if="item.activityType == 1" class="iconImg" src="../../static/images/origin/groupBuyIcon.png">
									<img v-if="item.activityType == 2" class="iconImg" src="../../static/images/origin/spikeIcon.png">
									<img v-if="item.activityType == 4" class="iconImg" src="../../static/images/origin/spikeIcon.png">
									<img v-if="item.activityType == 3" class="iconImg" src="../../static/images/origin/discountListIcon.png">
									<img v-if="item.activityType == 5" class="iconImg" src="../../static/images/origin/discountListIcon.png">
									<img v-if="item.activityType == 8" class="iconImg" src="../../static/images/origin/memberCenterIcon.png">
									<div class="price">
										¥ {{ item.price }}
									</div>
									<div class="original-price">
										¥ {{ item.originalPrice }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import GlobalLoading from '../../components/diyLoading/index'
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	name: 'ChannelCoupon',
	components: { GlobalLoading },
	data() {
		return {
			channelCouponData: {},
			productList: [],
			isLogin: false,
			params: {
				productId: 0,
				shopCouponId: 0,
				shopId: 0
			}
		}
	},
	onLoad(options) {
		this.params.productId = options.productId
		this.params.shopCouponId = options.shopCouponId
		this.params.shopId = options.shopId
		const res = uni.getStorageSync('storage_key'); const token = res.token
		this.isLogin = !!token
		this.getChannelCoupon()
		this.getProductList()
	},
	methods: {
		// 获取渠道优惠券
		getChannelCoupon() {
			// uni.showLoading({
			//   mask: true,
			//   title: '加载中...'
			// })
			NET.request(API.getChannelCoupon, this.params, 'GET').then((res) => {
				this.channelCouponData = res.data
				// uni.hideLoading()
			})
				.catch((res) => {
					// uni.hideLoading()
					uni.showToast({
						title: '失败',
						icon: 'none'
					})
				})
		},
		// 获取推荐产品
		getProductList() {
			// uni.showLoading({
			//   mask: true,
			//   title: '加载中...'
			// })
			var params = {
				page: 1,
				pageSize: 10,
				timestamp: new Date().getTime()
			}
			NET.request(API.getRandomProduct, params, 'GET').then((res) => {
				this.productList = res.data.list
				// uni.hideLoading()
			})
				.catch((res) => {
				// uni.hideLoading()
				})
		},
		// 领取优惠券
		receiveCoupon(item) {
			if (this.isLogin) {
				var paramsData = {
					shopCouponId: item.shopCouponId,
					shopId: this.params.shopId
				}
				NET.request(API.ReceiveCoupon, paramsData, 'POST').then((res) => {
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					})
					const data = {
						shopId: this.channelCouponData.shopId,
						productId: this.channelCouponData.productId,
						skuId: this.channelCouponData.skuId
					}
					setTimeout(() => {
						this.jumpProductDetail(data)
					}, 2000)
				})
					.catch((res) => {
						if (res.data.code !== '200') {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					})
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				uni.navigateTo({
					url: '/pages_category_page2/userModule/login'
				})
			}
		},
		// 跳转到店铺主页
		jumpStore(item) {
			uni.navigateTo({
				url: `/pages_category_page1/store/index?storeId=${item.shopId}`
			})
		},
		// 跳转到商品详情
		jumpProductDetail(item) {
			uni.navigateTo({
				url: '/pages_category_page1/goodsModule/goodsDetails?shopId=' + item.shopId + '&productId=' + item.productId + '&skuId=' + item
					.skuId
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.channel-coupon{
  .details{
    background-color: #fff;
    padding-bottom: 48rpx;
    .swiper{
      height: 750rpx;
      &-img{
        width: 100%;
        height: 100%;
      }
    }
    .info{
      padding: 0 20rpx;
      margin-top: 20rpx;
      .price-box{
        display: flex;
        align-items: center;
        position: relative;
        .icon{
          padding-right: 8rpx;
          width: 66rpx;
          height: 46rpx;
          &-img{
            width: 100%;
            height: 100%;
          }
        }
        .price{
          color: #C83732;
          font-weight: bold;
          font-size: 60rpx;
          margin-right: 10rpx;
        }
        .original-price{
          padding-top: 20rpx;
          font-size: 24px;
          color: #CCCCCC;
          text-decoration:line-through;
        }
        .buy-count{
          position: absolute;
          right: 0;
          font-size: 26rpx;
          color: #CCCCCC;
        }
      }
      .name{
        margin-top: 20rpx;
        font-size: 32rpx;
        line-height: 48rpx;
        color: #333333;
      }
    }
    .coupon{
      margin: 32rpx 20rpx;
      height: 140rpx;
      background: #333333 url("../../static/images/origin/border-coupon.png") no-repeat right center / auto 140rpx;
      display: flex;
      .price{
        position: relative;
        width: 204rpx;
        display: flex;
        justify-content: center;
        align-items: baseline;
        height: 100%;
        border-right: 2rpx solid #666666;
        line-height: 140rpx;
        .unit{
          font-size: 36rpx;
          color: #FFEBC4;
        }
        .val{
          font-size: 70rpx;
          color: #FFEBC4;
        }
        &:before,&:after{
          content: '';
          width: 24rpx;
          height: 24rpx;
          background: #fff;
          border-radius: 50%;
          position: absolute;
          right: -12rpx;
        }
        &:before{
          top: -12rpx;
        }
        &:after{
          bottom: -12rpx;
        }
      }
      &-content{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 50rpx;
        .time{
          .text{
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 44rpx;
            display: block;
          }
          .val{
            font-size: 20rpx;
            color: #999999;
            line-height: 28rpx;
          }
        }
        .btn{
          width: 122rpx;
          height: 52rpx;
          line-height: 52rpx;
          border: 2rpx solid #999999;
          font-size: 24rpx;
          text-align: center;
          color: #FFFFFF;
        }
      }
    }
  }
}
.pro-list{
  background: #F8F8F8;
  padding: 42upx 13upx 20upx;
  .title{
    text-align: center;
    margin-bottom: 36upx;
    .title-img{
      width: 211upx;
    }
  }
  /**多行多列**/
  .product-list {
    position: relative;
    &-box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      &.swiper{
        height: 620upx;
      }
    }
    &.product-swiper .product-list-box{
      padding-left: 0;
    }
    &-item-warp{
      margin: 0 0 20upx 0;
    }
    &-item {
      width: 348upx;
      padding: 0 7upx;
      box-sizing: content-box;
    }
    &-img {
      width: 348upx;
      height: 348upx;
      background-color: #f5f5f5;
      border-radius: 10upx 10upx 0 0;
      .img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    &-info {
      background-color: #FFFFFF;
      //box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
      border-radius: 0 0 10upx 10upx;
      padding: 20upx;
      label{
        font-weight: normal;
      }
      .product-name{
        font-size: 28upx;
        color: #333;
        display: block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-bottom: 18upx;
        line-height: 40upx;
      }
      .flex{
        display: flex;
        align-items: center;
      }
      .shop-box{
        background-color: #333333;
        border-radius: 0upx 20upx 20upx 0upx;
        line-height: 40upx;
        display: flex;
        align-items: center;
        height: 40upx;
        margin-right: 10upx;
        .shop-name{
          font-size: 20upx;
          color: #FFEBC4;
          padding: 0 8upx 0 12upx;
        }
        .shop-logo{
          border: 2upx solid #707070;
          border-radius: 50%;
          overflow: hidden;
          float: right;
          img{
            width: 34upx;
            height: 34upx;
            display: block;
          }
        }
      }
      .buy-count{
        color: #C5AA7B;
        font-size: 20upx;
        border: 2upx solid #E4E5E6;
        line-height: 40upx;
        padding: 0 5upx;
      }
      .price-warp{
        display: flex;
        align-items: baseline;
        line-height: 56upx;
        .iconImg {
          width: 58rpx;
          height: 36rpx;
          margin-right: 10rpx;
        }
        .price{
          color: #C83732;
          font-size: 40upx;
          margin-right: 20upx;
        }
        .original-price{
          font-size: 24upx;
          color: #ccc;
          text-decoration: line-through;
        }
      }
    }
  }
}

.swiper-dots {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15rpx;
  z-index: 66;
  .dot {
    width: 10upx;
    height: 10upx;
    background: #333333;
    opacity: 0.3;
    border-radius: 5upx;
    margin: 0 10upx;
  }

  .dot-active {
    width: 20upx;
    opacity: 1;
  }
}
</style>