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.order_id}}</view>
				<view class="body">
					<view class="img"><image :src="item.product_img"></image></view>
					<view class="info">
						<view class="name">{{item.product_name}}</view>
						<view class="desc">x {{item.count}}张</view>
						<view class="desc">有效期至{{item.end_at}}</view>
					</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"><image src="/static/image/no.png" mode="widthFix"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/home.js";
export default {
	data() {
		return {
			user:{},
			coupon:[]
		}
	},
	onLoad() {
		app = this;
		app.getData()
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res.target)
	    }
	    return {
			title: "团购自助兑换",
			path: '/pages/index/index'
	    }
	},
	methods: {
		toDetail(order){
			uni.navigateTo({
				url:"/pages/order/store?type=1&order="+order
			})
		},
		getData(){
			uni.login({
				success(lres){
					Api.data({"code":lres.code}).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;
}
.empty-data{
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.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;}
.coupon-item .img image{width: 160upx;height: 160upx;}
.coupon-item .info{margin-left: 20upx;}
.coupon-item .name{font-size: 32upx;color: #333;line-height: 46upx;}
.coupon-item .desc{color: #666;font-size: 28upx;line-height: 48upx;}
</style>