jzhw_uni/pages/ucenter/couponGoods/couponGoods.vue

<template>
    <view class="container">
        <view class="cate-nav"> 
               <view class="name">优惠券：{{couponName}}</view>
       				<view class="desc" v-if="coupon.voucherType==3">商品兑换件数：{{coupon.goodsNum}} 件</view>   
       				<view class="desc"  v-if="coupon.voucherType!=3">
       				{{coupon.discount}}{{coupon.voucherType==1?'元':'折'}} | 满{{coupon.min}}元可用
       				</view>  
         </view> 
        <view class="cate-item">
            <view class="b">
                <navigator :class="'item ' + ((iindex + 1) % 2 == 0 ? 'item-b' : '')" :url="'/pages/goods/goods?id=' + iitem.id" v-for="(iitem, iindex) in goodsList" :key="iindex">
                    <image class="img" :src="iitem.picUrl" background-size="cover"></image>
                    <view style="display: flex; margin-top: 20rpx; height: 71rpx">
                        <text class="name">{{ iitem.name }}</text>
                    </view>

                    <view class="price">
                        <view v-if="iitem.activited" class="retailPrice">
                            <text class="price-unit">￥</text>
                            {{ iitem.activityPrice }}
                        </view>
                        <view v-else class="retailPrice">
                            <text class="price-unit">￥</text>
                            {{ iitem.retailPrice }}
                        </view>
                        <view v-if="iitem.activited || iitem.counterPrice != iitem.retailPrice" class="counterPrice">原价￥{{ iitem.counterPrice }}</view>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var user = require('../../../utils/user.js');
export default {
    data() {
        return {
            couponName: '',
            goodsList: [],
            couponId: 0,
			coupon:{},
            addressInfo: {},
            code: '',
            iindex: 0,

            iitem: {
                id: '',
                picUrl: '',
                name: '',
                activited: '',
                counterPrice: '',
                retailPrice: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		console.log("options",options);
        if (options.id) {
            this.setData({
                couponId: options.id
            });
        }
        this.getGoodsList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getGoodsList: function () {
            var that = this;
            util.request(api.GoodsCoupon, {
                id: that.couponId,
            }).then(function (res) {
                that.setData({
                    goodsList: res.data.list,
                    couponName: res.data.couponName,
					coupon:res.data.coupon
                });
                //如果只有一个商品 直接跳转商详页
                if (res.data.list.length == 1) {
                    uni.redirectTo({
                        url: '/pages/goods/goods?id=' + res.data.list[0].id
                    });
                }
				else if(res.data.list.length == 0){//表示全场通用，直接跳转到商品列表页
				console.log("全场通用",res.data.list)
				uni.navigateTo({
				    url: '/pages/index/index'
				});
					
				}
            });
        }
    }
};
</script>
<style>
.container {
    background: #f9f9f9;
}
.counterPrice {
    text-decoration: line-through;
    font-size: 24rpx;
    margin: 0 0 0 20rpx;
    color: #c7c7c7;
}
.cate-nav {
    text-align: center;
    z-index: 1000;
    padding: 20rpx 0;
    font-size: 32rpx;
    border-bottom: 2rpx solid #e4e4e4;
}

.price-unit {
    font-size: 23rpx;
    font-weight: 400;
    color: #202020;
}
.cate-nav-body {
    height: 84rpx;
    white-space: nowrap;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.cate-nav .item {
    display: inline-block;
    height: 84rpx;
    min-width: 130rpx;
    padding: 0 15rpx;
}

.cate-nav .item .name {
    display: block;
    height: 84rpx;
    padding: 0 20rpx;
    line-height: 84rpx;
    color: #333;
    font-size: 30rpx;
    width: auto;
}

.cate-nav .item.active .name {
    color: #09afff;
    border-bottom: 2px solid #09afff;
}

.cate-item {
    height: auto;
    overflow: hidden;
}

.cate-item .h {
    height: 145rpx;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cate-item .h .name {
    display: block;
    height: 35rpx;
    margin-bottom: 18rpx;
    font-size: 30rpx;
    color: #333;
}

.cate-item .h .desc {
    display: block;
    height: 24rpx;
    font-size: 24rpx;
    color: #999;
}

.cate-item .b {
    width: 750rpx;
    padding: 0 6.25rpx;
    height: auto;
    overflow: hidden;
}

.cate-item .b .item {
    float: left;
    background: #fff;
    width: 342rpx;
    height: auto;
    overflow: hidden;
    padding: 15rpx;
    border-radius: 15rpx;
    margin: 16.5rpx 16.5rpx 8.5rpx 16.5rpx;
}

.cate-item .b .item-b {
    margin-left: 6.25rpx;
}

 .cate-item .item .img {
     width: 300rpx;
     height: 300rpx;
     display: block;
     margin: auto;
	border-radius: 18rpx;
 }

.cate-item .b .item .mark {
    width: 122rpx;
    height: 100rpx;
    margin-top: -20rpx;
    margin-left: 0rpx;
}

.cate-item .item .name {
    display: block;
    width: 365.625rpx;
    margin: 0 0 5rpx 0;
    overflow: hidden;
    padding: 0 20rpx;
    font-size: 26rpx;
    color: #1c1c1c;
    line-height: 1.3em;
    padding-left: 0rpx;
    text-align: left;
}

.cate-item .item .brand {
    display: block;
    width: 365.625rpx;
    height: 22rpx;
    font-size: 22rpx;
    color: #ab956d;
    margin-top: 10rpx;
    margin-left: 22rpx;
}

.cate-item .item .price {
    height: 40rpx;
    display: flex;
    /* margin-top: 20rpx; */
    align-items: flex-end;
}
.retailPrice {
    font-size: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
}
.memberPrice {
    font-size: 22rpx;
    color: #dd483e;
    margin: 0 10rpx 0 20rpx;
}
.member-price-tag {
    width: 88rpx;
    height: 26rpx;
    line-height: 26rpx;
    background: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
    background-size: 100% 100%;
    color: #5e3a11;
    font-size: 16rpx;
    padding: 0 8rpx 0 0;
    text-align: right;
    margin: 0 0 6rpx 0;
}

</style>