|
|
@@ -0,0 +1,408 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="banner_box">
|
|
|
+ <image class="banner_img" :src="activeInfo.banner_img" ></image>
|
|
|
+ </view>
|
|
|
+ <view class="active_info">
|
|
|
+ <view class="active_name">{{activeInfo.name}}</view>
|
|
|
+ <view class="active_time">活动时间：{{activeInfo.start_date}} ~ {{activeInfo.end_date}}</view>
|
|
|
+ <view class="active_citys">活动范围：{{activeInfo.city_ids}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="active_coupon">
|
|
|
+ <view class="active_subtitle">优惠券</view>
|
|
|
+ <view class="coupon_list">
|
|
|
+ <view class="coupon_item" v-for="(item,index) in activeInfo.coupon_list" :key="index">
|
|
|
+ <view class="left_box">
|
|
|
+ <view class="rebate" v-if="item.rebate_type == 1" > ￥{{item.rebate}}</view>
|
|
|
+ <view class="rebate" v-if="item.rebate_type == 2" > 打 {{item.rebate}} 折</view>
|
|
|
+ <view class="rebate" v-if="item.rebate_type == 3" > 赠 <text v-if="item.rebate_scope.length">{{item.rebate_scope[0].product_name}}</text> </view>
|
|
|
+ <view class="std_pay">满 ￥{{item.std_pay}} 可用</view>
|
|
|
+ <view class="coupon_exp">有效期：{{item.exp_time}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right_box">
|
|
|
+ <button class="get_btn" v-if="item.is_have == 0" @click="getCoupon(index)">立即领取</button>
|
|
|
+ <button class="get_btn" v-if="item.is_have == 1" @click="toUse(item)">去使用</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="active_product">
|
|
|
+ <view class="active_subtitle">活动商品</view>
|
|
|
+ <view class="product_list" :class="show_more_product?'more':''">
|
|
|
+ <view class="product_item" v-for="(item,index) in activeInfo.product_list" :key="index" >
|
|
|
+ <image class="product_image" :src="item.thumb" mode=""></image>
|
|
|
+ <view class="product_name"><text>{{item.product_name}}</text></view>
|
|
|
+ <view class="stock_price">
|
|
|
+ <view class="product_price" >
|
|
|
+ <text >￥ {{item.price}} </text>
|
|
|
+ </view>
|
|
|
+ <view class="product_stock">剩{{item.stock}}个</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="more_product" v-if="!show_more_product" @click.stop="show_more_product = true">
|
|
|
+ <uni-icons type="down" size="20" ></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="active_rule">
|
|
|
+ <view class="active_subtitle">活动规则</view>
|
|
|
+ <view class="active_rule_info">
|
|
|
+ <rich-text class="rich_text" :nodes="activeInfo.active_rule"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="" style="height: 10rpx;"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 是否显示更多的产品
|
|
|
+ show_more_product:false,
|
|
|
+ // 活动信息
|
|
|
+ activeInfo:{
|
|
|
+ id:0,
|
|
|
+ name:"",
|
|
|
+ banner_img:"",
|
|
|
+ active_rule:"",
|
|
|
+ status:0,
|
|
|
+ start_time:0,
|
|
|
+ end_time:0,
|
|
|
+ city_ids:"",
|
|
|
+ allow_join:0,
|
|
|
+ start_date:"",
|
|
|
+ end_date:"",
|
|
|
+ coupon_list:[],
|
|
|
+ product_list:[],
|
|
|
+ },
|
|
|
+ // 请求参数
|
|
|
+ requestParam:{
|
|
|
+ id:0
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(param) {
|
|
|
+ this.requestParam.id = param.id;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 登录提示
|
|
|
+ if( !this.$checkAccess.alterLogin() ) return ;
|
|
|
+ // 如果存在产品ID的话
|
|
|
+ if( this.requestParam.id > 0) {
|
|
|
+ // 请求详情
|
|
|
+ this.$http.request('api/coupon_active/get_detail',this.requestParam).then((re)=>{
|
|
|
+ // 成功渲染数据
|
|
|
+ if( re.code == 'success' ) {
|
|
|
+ // 刷新数据
|
|
|
+ this.activeInfo = re.data;
|
|
|
+ // 列表大于2.显示
|
|
|
+ if( re.data.product_list.length <= 2 ) this.show_more_product = true;
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ content:re.msg,
|
|
|
+ showCancel:false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ content:"未知的活动ID",
|
|
|
+ showCancel:false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toUse(item){
|
|
|
+ // 没有范围
|
|
|
+ if( item.type_id == 2 ){
|
|
|
+ uni.switchTab({url:"/pages/index/index"});
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 只有一个商品，直接跳转到对应商品
|
|
|
+ if( item.product_scope.length == 1 ){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages/product/index?product_id="+item.product_scope[0]
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 没有范围
|
|
|
+ if( item.product_scope.length > 1 ){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages/coupon/product?coupon_id="+item.coupon_id
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCoupon(index){
|
|
|
+ // 获取对应的数据
|
|
|
+ let couponId = this.activeInfo.coupon_list[index].coupon_id;
|
|
|
+ // 如果不能参与
|
|
|
+ if( !this.activeInfo.allow_join ) {
|
|
|
+ uni.showModal({
|
|
|
+ content:"暂不可参与活动",
|
|
|
+ showCancel:false,
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 如果存在优惠券
|
|
|
+ if( couponId > 0) {
|
|
|
+ // 请求详情
|
|
|
+ this.$http.request('api/custom_coupon/get_coupon',{coupon_id:couponId}).then((re)=>{
|
|
|
+ // 成功渲染数据
|
|
|
+ if( re.code == 'success' ) {
|
|
|
+ this.activeInfo.coupon_list[index].is_have = 1;
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ content:re.msg,
|
|
|
+ showCancel:false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ content:"请选择要领取的优惠券",
|
|
|
+ showCancel:false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .banner_box{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ .banner_img{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active_info{
|
|
|
+ width: 750rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ padding: 10rpx 35rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .active_name{
|
|
|
+ display: block;
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .active_time{
|
|
|
+ display: block;
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .active_citys{
|
|
|
+ display: block;
|
|
|
+ max-height: 80rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active_coupon{
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0rpx 35rpx;
|
|
|
+ .active_subtitle{
|
|
|
+ display: block;
|
|
|
+ height: 80rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .coupon_list{
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ .coupon_item{
|
|
|
+ display: block;
|
|
|
+ height: 140rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .left_box{
|
|
|
+ float: left;
|
|
|
+ width: 400rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ display: block;
|
|
|
+ .rebate{
|
|
|
+ color: #E03519;
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .std_pay{
|
|
|
+ color: #666666;
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .coupon_exp{
|
|
|
+ color: #666666;
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_box{
|
|
|
+ float: right;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: block;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .get_btn{
|
|
|
+ display: block;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0rpx 0rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #E03519;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active_product{
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ padding: 0rpx 35rpx;
|
|
|
+ .active_subtitle{
|
|
|
+ display: block;
|
|
|
+ height: 80rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .product_list{
|
|
|
+ display: block;
|
|
|
+ height: 520rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ .product_item{
|
|
|
+ float: left;
|
|
|
+ width: 320rpx;
|
|
|
+ height: 480rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .product_image{
|
|
|
+ width: 320rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ }
|
|
|
+ .product_name{
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0rpx 0rpx;
|
|
|
+ padding: 0rpx 10rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .stock_price{
|
|
|
+ color: #dddddd;
|
|
|
+ font-size: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 30rpx;
|
|
|
+ padding: 0rpx 10rpx;
|
|
|
+ .product_price{
|
|
|
+ float: left;
|
|
|
+ color: red;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ .product_market{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 30rpx;
|
|
|
+ vertical-align: top;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product_stock{
|
|
|
+ float: right;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product_item:nth-child(even){
|
|
|
+ margin-right: 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product_list.more{
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
+ .more_product{
|
|
|
+ z-index: 8;
|
|
|
+ left: 0rpx;
|
|
|
+ top: -10rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active_rule{
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ padding: 0rpx 35rpx;
|
|
|
+ margin-bottom: 160rpx;
|
|
|
+ .active_subtitle{
|
|
|
+ display: block;
|
|
|
+ height: 80rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .active_rule_info{
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 24rpx;
|
|
|
+ min-height: 500rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .rich_text{
|
|
|
+ white-space: break-spaces;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
