hx-mini-uni/pages/index/index.vue

<template>
	<view class="content">
		<view class="empty-data" v-if="coupon.length == 0">
			<u-empty mode="order" icon="/static/image/order_none.png" text="暂无抖音团购订单"></u-empty>
		</view>
		<view class="coupon-list" v-else>
			<view class="coupon-item" v-for="(item,indx) in coupon" :key="indx">
				<view class="header">{{item.certificate_id}}</view>
				<view class="body">
					<view class="info">
						<view class="name">{{item.product_name}}</view>
						<view class="desc">x {{item.count}}张</view>
						<view class="desc">有效期至{{item.expire_at}}</view>
					</view>
					<view class="right">
						<button class="btn" type="primary" @click="toDetail(item.certificate_id)" v-if="item.status==1">去使用</button>
					</view>
				</view>
				<!-- <view class="footer">
					<view class="state"></view>
					<button class="btn" type="primary" @click="toDetail(item.order_id)">立即使用</button>
				</view> -->
				<view class="state-img" v-if="item.status==1"><image src="/static/image/order-dot.png" mode="widthFix"></image></view>
				<view class="state-img" v-if="item.status==4"><image src="/static/image/ex.png" mode="widthFix"></image></view>
			</view>
			<navigator hover-class="none" url="/pages/user/license" class="tips">小程序资质亮照</navigator>
		</view>
		<!-- <view class="kf-service" @click="getData"><image src="/static/image/refrsh.png"></image></view> -->
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/home.js";
export default {
	data() {
		return {
			user:{},
			coupon:[],
			account:"",
			option:{}
		}
	},
	onShow() {
		this.getData()
	},
	onLoad(option) {
		app = this;
		app.option = option;
		// app.getData()
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res.target)
	    }
	    return {
			title: "团购自助兑换",
			path: '/pages/index/index'
	    }
	},
	methods: {
		toService(){
			
		},
		toDetail(order){
			Api.orderDetail({"order":order}).then((res)=>{
				if (res.code ==0) {
					return app.$dialog.showSuccess(res.msg)
				}
				if (res.data.status > 1) {
					return app.$dialog.showSuccess("该订单已完成预约","none",function(){
						app.getData()
					})
				}
				uni.navigateTo({
					url:"/pages/order/store?type=1&order="+order
				})
			})
		},
		getData(){
			uni.login({
				success(lres){
					app.option.auth = lres.code
					Api.data(app.option).then((res)=>{
						uni.hideLoading();
						if (res.code == 0) {
							return app.$dialog.showSuccess(res.msg);
						}
						uni.setStorageSync("user_data", res.data.user)
						uni.setStorageSync("user_token", res.data.user.access_token)
						app.userInfo = res.data.user;
						app.coupon = res.data.coupon;
					})
				},fail(res){
					app.$dialog.showSuccess("登录失败,请重启小程序")
				}
			})
		}
	}
}
</script>

<style>
page{
	background-color: #f8f8f8;
}
.kf-service{
	position: fixed;
	right: 20upx;
	bottom: 20%;
	width: 80upx;
	height: 80upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kf-service image{
	width: 60upx;
	height: 60upx;
	vertical-align: middle;
}
.empty-data{
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tips{text-align: center;line-height: 80upx;color: #666;font-size: 28upx;}
.coupon-item{background-color: #fff;border-radius: 10upx;width: calc(95% - 40upx);margin: 20upx auto;border: 2upx solid #fff;border-radius: 10upx;position: relative;}
.coupon-item .state-img{position: absolute;right: 0;top: 0;}
.coupon-item .state-img image{width: 100upx;height: 100upx;}
.coupon-item .header{padding: 20upx;font-size: 28upx;color: #333;line-height: 48upx;border-bottom: 2upx solid #f8f8f8;}
.coupon-item .footer{padding: 20upx;border-top: 2upx solid #f8f8f8;display: flex;justify-content: space-between;}
.coupon-item .footer .state{flex: 1;}
.coupon-item .footer .btn{width: 50%;font-size: 28upx;}
.coupon-item .body{display: flex;align-items: center;margin: 20upx 0;justify-content: space-between;}
.coupon-item .img image{width: 160upx;height: 160upx;}
.coupon-item .info{padding: 0 20upx;}
.coupon-item .btn{font-size: 28upx;margin-right: 20upx;}
.coupon-item .name{font-size: 32upx;color: #333;line-height: 46upx;}
.coupon-item .desc{color: #666;font-size: 28upx;line-height: 48upx;}
</style>