diff --git a/common/http.api.js b/common/http.api.js
index e5f8f46..996822e 100644
--- a/common/http.api.js
+++ b/common/http.api.js
@@ -19,6 +19,7 @@ let StoreListUrl = 'mp-api/hhrsStore/list';
 let StoreDetailUrl = 'mp-api/hhrsStore/detail';
 let WinnerDatesUrl = 'mp-api/hhrsWinner/dates';
 let WinnerListUrl = 'mp-api/hhrsWinner/list';
+let AppointUrl = 'zhy-api/cardBag/appoint';
 
 
 // 此处第二个参数vm，就是我们在页面使用的this
@@ -37,6 +38,7 @@ const install = (Vue, vm) => {
 	// 中奖名单
 	let getWinnerDates = (params = {}) => vm.$u.get(WinnerDatesUrl, params);
 	let getWinnerList = (params = {}) => vm.$u.post(WinnerListUrl, params);
+	let doAppoint = (params = {}) => vm.$u.post(AppointUrl, params);
 
 	// 权益包
 	let getRightsInfo = (params = {}) => vm.$u.get(RightsInfoUrl, params);
@@ -74,6 +76,7 @@ const install = (Vue, vm) => {
 		getStoreDetail,
 		getWinnerDates,
 		getWinnerList,
+		doAppoint,
 	};
 }
 
diff --git a/pages/rights/detail.vue b/pages/rights/detail.vue
index a14da93..9344cb8 100644
--- a/pages/rights/detail.vue
+++ b/pages/rights/detail.vue
@@ -21,7 +21,7 @@
 			</view>
 
 			<!-- 选择预约日期 -->
-			<view class="date-section">
+			<view class="date-section" v-if="detail.isAppointment && detail.dates && detail.dates.length > 0">
 				<view class="section-title">
 					<image src="https://aliyunoss.hn12301.net/hhrs/hhrs_xzyyrq.png" style="width: 30rpx;height: 30rpx;"></image>
 					<text class="section-title-text">选择预约日期</text>
@@ -67,7 +67,7 @@
 			</view>
 
 			<!-- 底部预约按钮 -->
-			<view class="bottom-bar">
+			<view class="bottom-bar" v-if="detail.isAppointment">
 				<view class="book-btn" @click="onBook">立即预约</view>
 			</view>
 		</view>
@@ -100,32 +100,73 @@ export default {
 		},
 		onBook() {
 			if (!this.detail) return
-			const date = this.detail.dates[this.selectedDate]
-			if (date.disabled) {
-				uni.showToast({ title: date.reason || '该日期不可预约', icon: 'none' })
-				return
+			if (this.detail.isAppointment) {
+				if (!this.detail.dates || this.detail.dates.length === 0) {
+					uni.showToast({ title: '暂无可预约日期', icon: 'none' })
+					return
+				}
+				const date = this.detail.dates[this.selectedDate]
+				if (date.disabled) {
+					uni.showToast({ title: date.reason || '该日期不可预约', icon: 'none' })
+					return
+				}
+				if (this.detail.dates[this.selectedDate].timeSlots && this.selectedTimeSlot === null) {
+					uni.showToast({ title: '请选择时段', icon: 'none' })
+					return
+				}
+				const cardNumber = uni.getStorageSync('cardNumber') || ''
+				const phone = uni.getStorageSync('phone') || ''
+				const params = {
+					scenicId: this.detail.ruleId,
+					channel: 'Channel_SZH',
+					thirdId: this.detail.cardModelId,
+					cardNum: cardNumber,
+					mobile: phone,
+					cardModelName: this.detail.cardModelName,
+					appointDate: date.date,
+					name: this.detail.name,
+					idNo: this.detail.identityNo
+				}
+				if (this.detail.dates[this.selectedDate].timeSlots) {
+					params.timeId = this.detail.dates[this.selectedDate].timeSlots[this.selectedTimeSlot].id
+				}
+				this.$u.api.doAppoint(params).then(res => {
+					if (res.errcode === 0) {
+						uni.showToast({ title: '预约成功', icon: 'success' })
+						setTimeout(() => {
+							uni.redirectTo({ url: '/pages/rights/rights?status=info' })
+						}, 1500)
+					} else {
+						uni.showToast({ title: res.errmsg || '预约失败', icon: 'none' })
+					}
+				}).catch(() => {
+					uni.showToast({ title: '预约失败', icon: 'none' })
+				})
+			} else {
+				// TODO: 调用使用接口
+				uni.showToast({ title: '使用成功', icon: 'success' })
 			}
-			if (this.detail.isAppointment && this.detail.dates[this.selectedDate].timeSlots && this.selectedTimeSlot === null) {
-				uni.showToast({ title: '请选择时段', icon: 'none' })
-				return
-			}
-			// TODO: 调用预约接口
-			uni.showToast({ title: '预约成功', icon: 'success' })
 		},
 		loadDetail(ruleId) {
 			const loc = uni.getStorageSync('lng') && uni.getStorageSync('lat')
 				? { lng: uni.getStorageSync('lng'), lat: uni.getStorageSync('lat') }
 				: null
+			const cardNumber = uni.getStorageSync('cardNumber') || ''
 			const params = { ruleId: ruleId }
 			if (loc) {
 				params.lng = loc.lng
 				params.lat = loc.lat
 			}
+			if (cardNumber) {
+				params.cardNumber = cardNumber
+			}
 			this.$u.api.getRightsDetail(params).then(res => {
 				if (res.errcode === 0 && res.data) {
 					this.detail = res.data
-					const firstAvailable = res.data.dates.findIndex(d => !d.disabled)
-					this.selectedDate = firstAvailable >= 0 ? firstAvailable : 0
+					if (res.data.isAppointment && res.data.dates && res.data.dates.length > 0) {
+						const firstAvailable = res.data.dates.findIndex(d => !d.disabled)
+						this.selectedDate = firstAvailable >= 0 ? firstAvailable : 0
+					}
 				}
 			})
 		}