<template>
|
<view class="container">
|
<view class="member-package" v-for="(item, index) in memberPackages" :key="index" @click="selectPackage(index)">
|
<view class="package-header" :class="{ 'selected': selectedIndex === index }">
|
<text class="package-name">{{ item.name }}</text>
|
<text class="package-price">¥{{ item.price }}</text>
|
</view>
|
<view class="package-body">
|
<view class="package-description">{{ item.particulars }}</view>
|
<view class="package-expiry">有效期：{{ item.duration }}天</view>
|
</view>
|
</view>
|
|
<view class="buy-button-container">
|
<button class="buy-button" @click="buyMemberPackage">立即购买</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
memberPackages: [],
|
selectedIndex: 0,
|
loading: true
|
};
|
},
|
onLoad() {
|
this.getMemberPlans();
|
},
|
methods: {
|
// 获取年卡套餐列表
|
getMemberPlans() {
|
let self = this;
|
self._get('supplier.member/plans', {}, function(res) {
|
self.memberPackages = res.data.plans;
|
self.loading = false;
|
});
|
},
|
|
selectPackage(index) {
|
this.selectedIndex = index;
|
},
|
|
buyMemberPackage() {
|
let self = this;
|
|
uni.showLoading({
|
title: '处理中'
|
});
|
|
// 直接创建年卡订单并跳转到收银台
|
self._post('supplier.member/createOrder', {
|
plan_id: self.memberPackages[self.selectedIndex].plan_id
|
}, function(res) {
|
uni.hideLoading();
|
if (res.code === 1) {
|
// 跳转到收银台页面
|
self.gotoPage('/pages/order/cashier?order_id=' + res.data.order.order_id + '&order_type=110','reLaunch');
|
} else {
|
uni.showToast({
|
title: res.msg,
|
icon: 'none'
|
});
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
padding: 20rpx;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.member-package {
|
background-color: white;
|
border-radius: 10rpx;
|
margin-bottom: 20rpx;
|
overflow: hidden;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.package-header {
|
padding: 30rpx;
|
background-color: #f8f8f8;
|
border-left: 10rpx solid #ccc;
|
}
|
|
.package-header.selected {
|
background-color: #eef5ff;
|
border-left: 10rpx solid #409EFF;
|
}
|
|
.package-name {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.package-price {
|
float: right;
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #e43130;
|
}
|
|
.package-body {
|
padding: 30rpx;
|
}
|
|
.package-description {
|
font-size: 28rpx;
|
color: #666;
|
margin-bottom: 20rpx;
|
white-space: pre-line;
|
line-height: 1.6;
|
}
|
|
.package-features {
|
margin-bottom: 20rpx;
|
}
|
|
.feature {
|
font-size: 26rpx;
|
color: #555;
|
margin-bottom: 10rpx;
|
}
|
|
.feature .icon-duigou {
|
color: #4caf50;
|
margin-right: 10rpx;
|
}
|
|
.package-expiry {
|
font-size: 24rpx;
|
color: #999;
|
text-align: right;
|
}
|
|
.buy-button-container {
|
padding: 40rpx 0;
|
text-align: center;
|
}
|
|
.buy-button {
|
width: 80%;
|
background-color: #e43130;
|
color: white;
|
font-size: 32rpx;
|
border-radius: 50rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
margin: auto;
|
}
|
</style>
|
