jzmall_verify_uni/pages/index/index.vue

<template>
    <view class="container">
        <view class="process">
            <icon class="tt-icon" size="20" type="info" color="#FF9F18"></icon>
            <text>点击去预约，预约成功后等待上门服务！</text>
        </view>
		<view class="top-title">抖音团购在线预约</view>
		<view class="sub-title">我的待使用团购券 ({{orders.length}})</view>

        <view v-if="orders.length > 0" class="items">
		<view v-for="(item, index) in orders" :key="index">
            <view class="item" v-for="(item1, index1) in item.certificates" :key="index1">
                <view class="item-main">
                    <view class="item-left">
                        <image :src="item1.sku_info.goodsUrl + '?w=200'" mode="aspectFill"></image>
                    </view>
                    <view class="item-center">
                        <view class="goods-name">{{ item1.sku_info.title }}</view>
                        <view class="goods-time">{{ item1.validStr }}</view>
                        <view class="service-times">剩余可约：{{ item1.sku_info.goodServiceCount }} 次</view>
                    </view>
                    <view class="status-btn">待使用</view>
                </view>
 <!-- v-if="item.can_use" -->
                <view
                    class="item-bottom"
                   :data-issave="item1.isSave"
                    :data-amount="item1.amount.pay_amount"
                    :data-sku="item1.sku_info.third_sku_id"
                    :data-orderid="item.order_id"
					:data-jzorderid="item1.jzOrderId"
                    :data-dySku="item1.sku_info.sku_id"
                    :data-coupon="item1.certificate_id"
                    @tap="goAppoint"
                >
                    {{ item1.isSave?'预约详情':'去预约'}}
                </view>

                <!-- <view class="item"  wx:for="{{orders}}" wx:key="index">
            <view class="left">
                <view class="title">{{item.certificates[0].sku_info.title}}
                    ￥{{item.certificates[0].amount.pay_amount/100}}</view>
                <view class="desc">有效时间：{{item.certificates[0].validStr}}</view>
            </view>
            <view class="right">
                <view class="btn" wx:if="{{item.can_use}}" data-amount="{{item.certificates[0].amount.pay_amount}}"
                data-sku="{{item.certificates[0].sku_info.third_sku_id}}" data-orderid="{{item.order_id}}"
                data-dySku="{{item.certificates[0].sku_info.sku_id}}"
                data-coupon="{{item.certificates[0].certificate_id}}" bindtap="goAppoint">去预约</view>
            </view>
        </view>  -->
            </view>
			</view>
        </view>

        <!-- <view v-else> -->
            <!-- <view class="noHave">没有更多了</view> -->
            <!-- <view  class="noHave">没有更多可用券 建议授权后查询</view> -->
            <!-- <view style="text-align: center;color: #09afff;" bindtap="goLogin">去授权</view> -->
        <!-- </view> -->
		<view class="fresh-block">
			<text>找不到订单 </text>
			<text class="fresh-text" @tap="getList">点击刷新</text>
		</view>
    </view>
</template>

<script>
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
var user = require('../../utils/user.js');
var app = getApp();
export default {
    data() {
        return {
            orders: [],
            code: '' //抖音登录code
        };
    },
    onShow: function () {
      this.getList();
    },
	
    onLoad: function (options) {},
    methods: {
		getList(){
			uni.showLoading({
			    title: '加载中'
			});
			user.login().then((ress) => {
			    util.request(api.DouyinCouponList, {
			        code: ress.code
			    })
			        .then((res) => {
			            uni.hideLoading();
			            if (res.errno === 0) {
			                console.log(res.data);
			                this.setData({
			                    orders: res.data.orders
			                });
			            } else {
			                this.setData({
			                    orders: []
			                });
			                uni.showToast({
			                    title: res.errmsg,
			                    icon: 'none'
			                });
			            }
			        })
			        .catch((res) => {
			            uni.hideLoading();
			            util.showErrorToast(res.errmsg);
			        });
			});
		},
        goAppoint(e) {
            let sku = e.currentTarget.dataset.sku;
            let coupon = e.currentTarget.dataset.coupon;
            let orderId = e.currentTarget.dataset.orderid;
            let amount = e.currentTarget.dataset.amount;
            let dySku = e.currentTarget.dataset.dysku;
			let isSave=e.currentTarget.dataset.issave;
			let jzorderid=e.currentTarget.dataset.jzorderid;
			if(isSave){
				uni.navigateTo({
				    url: '/pages/ucenter/orderDetail/orderDetail?id=' + jzorderid
				});
			}else{
				uni.navigateTo({
				    url: '/pages/ucenter/appointOrder/appointOrder?certificateId=' + coupon + '&goodsId=' + sku + '&dyOrderId=' + orderId + '&amount=' + amount + '&dySku=' + dySku
				});
			}
           
        },

        goLogin() {
            uni.navigateTo({
                url: '/pages/auth/login/login'
            });
        }
    }
};
</script>
<style>
page {
    background: #f4f4f4;
}

.container {
    padding: 20rpx;
    width: 750rpx;
    background: #f4f4f4;
}
.process {
    width: 710rpx;
    height: 76rpx;
    background: #F9D9CC;
    border-radius: 76rpx;
    font-size: 30rpx;
    color: #191919;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
}

.process text {
    margin-left: 16rpx;
}
.item {
    width: 710rpx;
    margin: 0 0 24rpx;
    background: #ffffff;
    border-radius: 6rpx;
    margin-bottom: 10px;
    padding: 38rpx 22rpx 0 36rpx;
}

.item-main {
    display: flex;
    padding-bottom: 34rpx;
    position: relative;
}

.item-left {
    width: 128rpx;
    height: 128rpx;
    border-radius: 8rpx;
    border: 1rpx solid #f0f0f0;
    overflow: hidden;
    margin-right: 30rpx;
}

.item-left image {
    width: 128rpx;
    height: 128rpx;
}

.item-center {
    flex: 1;
}

.goods-name {
    color: #333333;
    line-height: 40rpx;
    font-size: 28rpx;
    width: 400rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}

.goods-time {
    color: #999999;
    line-height: 32rpx;
    /* height: 32rpx; */
    margin: 10rpx 0;
    font-size: 24rpx;
    white-space: nowrap;
}

.service-times {
    color: #333333;
    line-height: 32rpx;
    height: 32rpx;
    font-size: 24rpx;
}

.status-btn {
    width: 82rpx;
    height: 34rpx;
    line-height: 34rpx;
    background: #ffffff;
    border-radius: 4rpx;
    border: 1rpx solid #FF4600;
    color: #FF4600;
    font-size: 22rpx;
    text-align: center;
    margin-left: 24rpx;
    position: absolute;
    right: 0;
    top: 0;
}

.item-bottom {
    height: 90rpx;
    line-height: 90rpx;
    color: #FF4600;
    font-size: 28rpx;
	font-weight: bold;
    border-top: 1rpx solid #ededed;
    text-align: center;
}

.title {
    line-height: 32px;
    font-weight: 600;
    font-size: 18px;
}

.left {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px 0px 10px 10px;
}

.right {
    /* border-top-left-radius: 10px;
  border-bottom-left-radius: 10px; */
    padding: 10px;
    /* align-items: center;  */
    display: flex;
    text-align: right;
    border-top: 1px dotted #999;
    justify-content: flex-end;
}

.btn {
    line-height: 32px;
    background-color: #a5c91d;
    color: white;
    border-radius: 5px;
    height: 32px;
    width: 76px;
    text-align: center;
}

.desc {
    color: #999;
}

.noHave {
    text-align: center;
    padding: 20rpx 50px 10px;
    color: #ccc;
    font-size: 28rpx;
}
.top-title{
	height: 46rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #191919;
	line-height: 46rpx;
	margin-bottom:10rpx;
}
.sub-title{
	height: 38rpx;
	font-size: 26rpx;
	color: #ACADB1;
	line-height: 38rpx;
	margin-bottom:20rpx;
}
.fresh-block{
	padding:150rpx 0;
	text-align: center;
	font-size: 26rpx;
	color:#ccc;
}
.fresh-block .fresh-text{
color: #09AFFF;
margin-left:8rpx;
}
</style>