111

2 years ago · 7c53f08ac2
1 changed files with 133 additions and 0 deletions
--- a/pages/card/card_booking.vue
+++ b/pages/card/card_booking.vue
@ -0,0 +1,133 @@
+<template>
+
+	<loading-state ref="pageView" @request="request">
+
+		<view>
+			<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image>
+			<view style="display: flex;flex-direction: column;margin-top: -40vw;">
+				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
+					<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;">
+						<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;">
+							{{data.state}}
+						</view>
+						<view
+							style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;box-sizing: border-box;">
+							{{data.name}}
+						</view>
+						<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;">
+							{{data.time}}
+						</view>
+					</view>
+					<image src='../../static/gift2.png'
+						style="width: 40px;height: 40px;padding-right: 30px;flex-shrink: 0;">
+					</image>
+				</view>
+
+				<view
+					style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;height: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex;align-items: center;">
+					<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image>
+					<view style="margin-left: 15px;font-size: 14px;">{{data.pname}}</view>
+				</view>
+
+				<view style="background: #FFFFFF;border-radius: 20rpx;padding: 15px;margin: 10px 15px;">
+
+					<view
+						style="display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx #f1f2f3 solid;padding-bottom: 10px;">
+						<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image>
+						<view style="margin-left: 10px;font-size: 14px;">商品明细</view>
+					</view>
+					<view v-for="(item,index) in data.goodsVos"
+						style="display: flex;flex-direction: row;margin-top: 15px;">
+						<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
+						<view style="margin-left: 10px;margin-right: 10px;flex: 1;">
+							<text class="text" style="font-weight: 500;">{{item.goods}}
+							</text>
+							<view style="font-size: 12px;color: #666666;">剩余数量：{{item.lnum}}</view>
+						</view>
+						<view style="flex-shrink: 0;font-size: 12px;color: #666666;">x{{item.num}}</view>
+					</view>
+				</view>
+			</view>
+
+			<view style="height: 60px;"></view>
+			<view v-if="data.showBtn||data.showRecord"
+				style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;">
+				<view style="flex: 1;"></view>
+				<view v-if="data.showRecord" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: #191919;">
+					预约记录</view>
+				<view v-if="data.showBtn" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: royalblue;">预约提货
+				</view>
+			</view>
+		</view>
+
+	</loading-state>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				page: {
+					sid: ''
+				},
+				data: {
+					time: "",
+					name: "",
+					pname: "",
+					state: "",
+					showBtn: false,
+					showRecord: false,
+					goodsVos: []
+				}
+			}
+		},
+		onLoad(options) {
+			this.page.sid = options.sid
+			this.request()
+		},
+		methods: {
+			request() {
+				let _this = this
+				_this.$api.cardDetail(this.page.sid).then((resp) => {
+					_this.data = resp
+					_this.$nextTick(() => {
+						_this.$refs.pageView.setLoadState(2)
+					})
+				}).catch(e => {
+					_this.$nextTick(() => {
+						_this.$refs.pageView.setLoadState(1)
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.text {
+		white-space: normal;
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	uni-page-body,
+	page {
+		background: #F1F2F3;
+	}
+
+	.btn {
+		border: 1px solid;
+		padding-left: 30rpx;
+		padding-right: 30rpx;
+		padding-top: 10rpx;
+		padding-bottom: 10rpx;
+		border-radius: 50rpx;
+		height: 15px;
+		margin-left: 25rpx;
+	}
+</style>