From 05b3fb28c55314fd569387dc8677fc261de35d86 Mon Sep 17 00:00:00 2001
From: Enzo <1284707383@qq.com>
Date: Wed, 8 Sep 2021 17:55:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E7=B3=BB=E5=88=97=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/zwy-calendar/zwy-calendar.vue      | 249 ++++++++++++++++++
 pages/goodsDetail/index.vue                   | 111 ++++----
 pages/index/index.vue                         |   8 +-
 .../u-column-notice/u-column-notice.vue       |   9 +-
 uview-ui/components/u-th/u-th.vue             |   1 +
 uview-ui/theme.scss                           |   2 +-
 6 files changed, 312 insertions(+), 68 deletions(-)
 create mode 100644 components/zwy-calendar/zwy-calendar.vue

diff --git a/components/zwy-calendar/zwy-calendar.vue b/components/zwy-calendar/zwy-calendar.vue
new file mode 100644
index 0000000..7445d14
--- /dev/null
+++ b/components/zwy-calendar/zwy-calendar.vue
@@ -0,0 +1,249 @@
+<template>
+	<view class="calendar-box">
+		<view class="week">
+			<view :style="'color:'+(weeks==weeked?bgweek:'')+';'" v-for="weeks in weekArr">{{weeks}}</view>
+		</view>
+		<view class="day">
+			<view :class="[{'checkday':days.date==''},{'choose':days.date==localDate}]"
+				:style="'background:'+(days.date==localDate?bgday:'')+';'" v-for="(days,index) in dayArr" :key="index">
+				{{days.day}}
+				<view :class="[{'circle':days.flag},{'repair':days.day<day},{'sign':days.day==day}]"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			lang: {
+				type: String,
+				default: 'zh'
+			},
+			type: {
+				type: String,
+				default: 'calendar'
+			},
+			checkDate: {
+				type: Boolean,
+				default: false
+			},
+			bgweek: {
+				type: String,
+				default: '#1998FE'
+			},
+			bgday: {
+				type: String,
+				default: '#1998FE'
+			}
+		},
+		data() {
+			return {
+				weeked: '', // 今天周几
+				dayArr: [], // 当前月每日
+				localDate: '', // 今天日期
+				day: new Date().getDate(), // 当前日
+				year: new Date().getFullYear(), // 当前年
+				month: new Date().getMonth() + 1, // 当前月
+				weekArr: ['日', '一', '二', '三', '四', '五', '六'], // 每周
+			}
+		},
+		mounted() {
+			let that = this;
+			// 初始日期
+			that.initDate();
+			// 今天日期
+			that.localDate = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(that.day);
+			// 中英切换
+			if (that.lang != 'zh') that.weekArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+			// 今天周几
+			that.weeked = that.weekArr[new Date().getDay()];
+			// 签到功能
+			if (that.type != 'calendar') {
+				for (let i in that.dayArr) {
+					that.$set(that.dayArr[i], 'flag', false);
+				}
+			}
+		},
+		methods: {
+			// 选择年月
+			changeDate(e) {
+				let that = this;
+				that.year = parseInt(e.detail.value.split('-')[0]);
+				that.month = parseInt(e.detail.value.split('-')[1]);
+				that.initDate();
+			},
+			// 点击签到
+			signToday(obj, index) {
+				let that = this;
+				// 指定签到类型可访问
+				if (that.type == 'calendar') return;
+				// 限制本月可进行签到
+				if ((new Date().getMonth() + 1) != parseInt(obj.date.split('-')[1])) return;
+				// 禁用非本月点击签到且限制签到日期小于等于本日
+				if (obj.date != '' && obj.day <= that.day) {
+					// 开启已签到提醒
+					if (that.dayArr[index].flag) {
+						uni.showToast({
+							title: '已签到',
+							icon: 'none'
+						});
+					} else {
+						uni.showToast({
+							title: that.day > obj.day ? '补签成功' : '签到成功',
+							icon: 'success'
+						});
+						that.$set(that.dayArr[index], 'flag', true);
+						that.$emit('change', obj.date);
+					}
+				}
+			},
+			// 初始化日期
+			initDate() {
+				let that = this;
+				that.dayArr = [];
+				// 当前月总天数
+				let totalDay = new Date(that.year, that.month, 0).getDate();
+				// 遍历总天数将日期逐个添加至数组
+				for (let i = 1; i <= totalDay; i++) {
+					// 得到需补充天数
+					let value = (new Date(that.year, that.month - 1, i)).getDay();
+					// 补充前面空白日期
+					if (i == 1 && value != 0) that.addBefore(value);
+					// 添加本月日期
+					let obj = {};
+					obj.date = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(i);
+					obj.day = i;
+					that.dayArr.push(obj);
+					// 补充后面空白日期
+					console.log('当前越日期',that.dayArr)
+					if (i == totalDay && value != 6) that.addAfter(value);
+				}
+			},
+			// 补充前面空白日期
+			addBefore(value) {
+				let that = this;
+				let totalDay = new Date(that.year, that.month - 1, 0).getDate();
+				for (let i = 0; i < value; i++) {
+					let obj = {};
+					obj.date = '';
+					obj.day = totalDay - (value - i) + 1;
+					that.dayArr.push(obj);
+				}
+			},
+			// 补充后空白日期
+			addAfter(value) {
+				let that = this;
+				for (let i = 0; i < (6 - value); i++) {
+					let obj = {};
+					obj.date = '';
+					obj.day = i + 1;
+					that.dayArr.push(obj);
+				}
+			},
+			// 格式化日期位数
+			formatNum(num) {
+				return num < 10 ? ('0' + num) : num;
+			},
+			// 上一个月
+			lastMonth() {
+				let that = this;
+				if (that.month == 1) {
+					that.year -= 1;
+					that.month = 12;
+				} else {
+					that.month -= 1;
+				}
+				that.initDate();
+			},
+			// 下一个月
+			nextMonth() {
+				let that = this;
+				if (that.month == 12) {
+					that.year += 1;
+					that.month = 1;
+				} else {
+					that.month += 1;
+				}
+				that.initDate();
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.calendar-box {
+		width: 100%;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.calendar-box,
+	.month,
+	.week,
+	.day {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.month,
+	.week,
+	.day {
+		width: 700rpx;
+	}
+
+	.month {
+		margin: 30rpx 0;
+		position: relative;
+	}
+
+	.picker {
+		width: 160rpx;
+		height: 40rpx;
+		position: absolute;
+		top: 20rpx;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.day {
+		flex-wrap: wrap;
+	}
+
+	.week>view,
+	.day>view {
+		width: 100rpx;
+		height: 100rpx;
+		text-align: center;
+		position: relative;
+		line-height: 100rpx;
+	}
+
+	.checkday {
+		color: #999;
+	}
+
+	.choose {
+		color: #FFFFFF;
+		border-radius: 50%;
+	}
+
+	.circle {
+		width: 10rpx;
+		height: 10rpx;
+		border-radius: 50%;
+		position: absolute;
+		bottom: 10%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.sign {
+		background-color: #0089fe;
+	}
+
+	.repair {
+		background-color: #1998FE;
+	}
+</style>
diff --git a/pages/goodsDetail/index.vue b/pages/goodsDetail/index.vue
index 9b9be63..fdccbbc 100644
--- a/pages/goodsDetail/index.vue
+++ b/pages/goodsDetail/index.vue
@@ -33,25 +33,15 @@
 					<rich-text :nodes="formatRichText(goods_detail.know)"></rich-text>
 				</view> 
 				<!-- 景区类型 -->
-				<view v-if="goods_detail.type == 2">
-					<view class="goods-detail">
+				<view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 2">
+					<view class="goods-detail" v-if="goods_detail.product.extends.field_2.open_time.node && goods_detail.product.extends.field_2.open_time.summer && goods_detail.product.extends.field_2.open_time.winter">
 						<view class="lf-font-32 lf-font-bold lf-m-b-20">景区开放时间</view>
 						<view >
 							<u-table>
-								<u-tr>
-									<u-th>节点</u-th>
-									<u-th>夏季</u-th>
-									<u-th>冬季</u-th>
-								</u-tr>
-								<u-tr>
-									<u-td>周一至周五</u-td>
-									<u-td>08:00～21:00</u-td>
-									<u-td>09:00～20:00</u-td>
-								</u-tr>
-								<u-tr>
-									<u-td>周六至周日</u-td>
-									<u-td>07:30～23:00</u-td>
-									<u-td>08:30～21:00</u-td>
+								<u-tr v-for="(item,index) in goods_detail.product.extends.field_2.open_time" :key="index">
+									<u-th>{{item.node}}</u-th>
+									<u-th>{{item.summer}}</u-th>
+									<u-th>{{item.winter}}</u-th>
 								</u-tr>
 							</u-table>
 						</view>
@@ -64,35 +54,25 @@
 								<view class="lf-color-gray lf-font-28">数量</view>
 								<view class="lf-color-gray lf-font-28">额外费用</view>
 							</view>
-							<view class="lf-row-between">
-								<view class="lf-font-28 lf-color-black">过山车</view>
-								<view class="lf-font-28 lf-color-black">1张</view>
-								<view class="lf-font-28 lf-color-black">0元</view>
+							<view v-for="(item,index) in goods_detail.product.extends.field_2.project" :key="index" class="lf-row-between child-tag">
+								<view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view>
+								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">{{item.num}}</view>
+								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">{{item.price}}</view>
 							</view>
 						</view>
 					</view> 
 				</view>
 				
 				<!-- 餐厅类型 -->
-				<view v-if="goods_detail.type == 3">
+				<view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 3">
 					<view class="goods-detail">
 						<view class="lf-font-32 lf-font-bold lf-m-b-20">餐厅开放时间</view>
 						<view >
 							<u-table>
-								<u-tr>
-									<u-th>节点</u-th>
-									<u-th>上午</u-th>
-									<u-th>下午</u-th>
-								</u-tr>
-								<u-tr>
-									<u-td>周一至周五</u-td>
-									<u-td>08:00～21:00</u-td>
-									<u-td>09:00～20:00</u-td>
-								</u-tr>
-								<u-tr>
-									<u-td>周六至周日</u-td>
-									<u-td>07:30～23:00</u-td>
-									<u-td>08:30～21:00</u-td>
+								<u-tr v-for="(item,index) in goods_detail.product.extends.field_3.open_time" :key="index">
+									<u-th>{{item.section}}</u-th>
+									<u-th>{{item.time}}</u-th>
+									<u-th>{{item.week}}</u-th>
 								</u-tr>
 							</u-table>
 						</view>
@@ -100,29 +80,27 @@
 					<view class="goods-detail">
 						<view class="lf-font-32 lf-font-bold lf-m-b-20">包含套餐</view>
 						<view class="lf-flex-column">
-							<view class="lf-row-between lf-m-b-20">
-								<view class="lf-color-333 lf-font-28">米饭 x1</view>
-								<view class="lf-color-333 lf-font-28">¥3</view>
-							</view>
-							<view class="lf-row-between">
-								<view class="lf-color-333 lf-font-28">清蒸鲈鱼 x1</view>
-								<view class="lf-color-333 lf-font-28">50元</view>
+							<view class="lf-row-between child-tag" v-for="(item,index) in goods_detail.product.extends.field_3.package" :key="index">
+								<view class="lf-color-333 lf-font-28">{{item.name}} {{item.num}}</view>
+								<view class="lf-color-333 lf-font-28">{{item.price}}</view>
 							</view>
 						</view>
 					</view> 
 				</view>
 				
 				<!-- 酒店类型 -->
-				<view class="goods-detail" style="padding-bottom: 0;" v-if="goods_detail.type == 1">
+				<view class="goods-detail" style="padding-bottom: 0;" v-if="goods_detail.product && goods_detail.product.extends && goods_detail.product.type == 1">
 					<view class="lf-font-32 lf-font-bold lf-m-b-20">酒店设施</view>
 					<view>
 						<view class="label-box1">
-							<view class="label-item" v-for="i of 7">智能电视</view>
+							<view class="label-item" v-for="(item,index) in goods_detail.product.extends.field_1.tags" :key="index">
+								{{item.tag}}
+							</view>
 						</view>
 					</view>
 				</view> 
 				<!-- 旅游路线类型 -->
-				<view v-if="goods_detail.type == 0">
+				<view v-if="goods_detail.product && goods_detail.product.type == 0 && goods_detail.product.extends">
 					<view class="goods-detail">
 						<view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view>
 						<view class="lf-flex-column">
@@ -131,32 +109,23 @@
 								<view class="lf-color-gray lf-font-28">数量</view>
 								<view class="lf-color-gray lf-font-28">额外费用</view>
 							</view>
-							<view class="lf-row-between">
-								<view class="lf-font-28 lf-color-black">过山车</view>
-								<view class="lf-font-28 lf-color-black">1张</view>
-								<view class="lf-font-28 lf-color-black">0元</view>
+							<view class="lf-row-between child-tag" v-for="(item,index) in goods_detail.product.extends.field_0.project" :key="index" >
+								<view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view>
+								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">{{item.num}}</view>
+								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">{{item.price}}</view>
 							</view>
 						</view>
 					</view> 
-					<view class="goods-detail" >
+					<view class="goods-detail">
 						<view class="lf-m-b-20 lf-row-between">
 							<view class="lf-font-32 lf-font-bold">
 								行程时间
 							</view>
 							<view class="lf-font-28 lf-color-black	">
-								2021年9月
-							</view>
-						</view>
-						<view class="lf-flex-column">
-							<view class="lf-row-between lf-m-b-20">
-								<view class="lf-color-333 lf-font-28">行程天数</view>
-								<view class="lf-color-333 lf-font-28">3天</view>
-							</view>
-							<view class="lf-row-between">
-								<view class="lf-color-333 lf-font-28">行程日期</view>
-								<view class="lf-color-333 lf-font-28">2021-09-18~2021-09-21</view>
+								<view>{{year}}年{{month}}月</view>
 							</view>
 						</view>
+						<zwyCalendar type="sign"/>
 					</view> 
 				</view>
 				
@@ -199,9 +168,12 @@
 </template>
 
 <script>
+	import zwyCalendar from '@/components/zwy-calendar/zwy-calendar.vue'
 	export default {
 		data(){
 			return {
+				year: new Date().getFullYear(), // 当前年
+				month: new Date().getMonth() + 1, // 当前月
 				current: 0, // 轮播下标
 				goods_id: 0,
 				goods_detail: {},
@@ -209,6 +181,7 @@
 				skeletonLoading: true
 			}
 		},
+		components: {zwyCalendar},
 		onLoad(options){
 			this.goods_id = options.goods_id || options.id;
 			
@@ -223,6 +196,16 @@
 			}
 		},
 		methods: {
+			// 打开地图
+			openMap(){
+				let { address, lat, lng } = this.goods_detail?.store || {};
+				uni.openLocation({
+				  longitude: Number(lat),
+				  latitude: Number(lng),
+				  scale: 20,
+				  name: address
+			   });
+			},
 			getGoodsDetail(){
 				this.$http(this.API.API_ADVICEDETAILS, {id: this.goods_id}).then(res => {
 					this.skeletonLoading = false;
@@ -332,6 +315,12 @@
 	}
 </style>
 <style lang="scss" scoped="scoped">
+	.child-tag {
+		margin-bottom: 20rpx;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
 	.swiper-box{
 		width: 750rpx;
 		height: 490rpx;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 807b8f3..41828bd 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -8,12 +8,15 @@
 		</swiper>
 		<view class="content">
 			<!-- 消息模块 -->
-			<view class="lf-row-between lf-m-b-34 message-box" v-for="(item,index) of notice" :key="index">
+			<!-- <view class="lf-row-between lf-m-b-34 message-box" v-for="(item,index) of notice" :key="index">
 				<view class="lf-flex">
 					<text class="lf-iconfont lf-icon-tongzhi lf-text-vertical"></text>
 					<view class="lf-m-l-12 lf-line-1" style="max-width: 510rpx;">{{item.title}}</view>
 				</view>
 				<view class="message-btn" hover-class="lf-opacity" @click="$url('/pages/notice/notice?notice_id='+item.id)">详情</view>
+			</view> -->
+			<view class="lf-m-b-34">
+				<u-notice-bar type="primary" mode="vertical" :list="notice"></u-notice-bar>
 			</view>
 			<!-- 频道 -->
 			<view class="lf-row-between lf-m-b-10">
@@ -132,7 +135,8 @@
 				home_ad1: [],
 				hot_number: '',
 				list: [],
-				notice: []
+				notice: [],
+				sting_notice: []
 			}
 		},
 		onShow() {
diff --git a/uview-ui/components/u-column-notice/u-column-notice.vue b/uview-ui/components/u-column-notice/u-column-notice.vue
index dd8bd31..4aaf053 100644
--- a/uview-ui/components/u-column-notice/u-column-notice.vue
+++ b/uview-ui/components/u-column-notice/u-column-notice.vue
@@ -17,10 +17,10 @@
 				<view
 					class="u-news-item u-line-1"
 					:style="[textStyle]"
-					@tap="click(index)"
+					@tap="click(item.id)"
 					:class="['u-type-' + type]"
 				>
-					{{ item }}
+					{{ item.title }}
 				</view>
 			</swiper-item>
 		</swiper>
@@ -167,8 +167,9 @@ export default {
 	},
 	methods: {
 		// 点击通告栏
-		click(index) {
-			this.$emit('click', index);
+		click(id) {
+			this.$emit('click', id);
+			this.$url('/pages/notice/notice?notice_id='+id)
 		},
 		// 点击关闭按钮
 		close() {
diff --git a/uview-ui/components/u-th/u-th.vue b/uview-ui/components/u-th/u-th.vue
index b40e015..72fe333 100644
--- a/uview-ui/components/u-th/u-th.vue
+++ b/uview-ui/components/u-th/u-th.vue
@@ -53,6 +53,7 @@
 		@include vue-flex;
 		flex-direction: column;
 		flex: 1;
+		height: 80rpx;
 		justify-content: center;
 		font-size: 28rpx;
 		color: $u-main-color;
diff --git a/uview-ui/theme.scss b/uview-ui/theme.scss
index b713bf9..7f4c901 100644
--- a/uview-ui/theme.scss
+++ b/uview-ui/theme.scss
@@ -9,7 +9,7 @@ $u-light-color: #c0c4cc;
 $u-border-color: #e4e7ed;
 $u-bg-color: #f3f4f6;
 
-$u-type-primary: #2979ff;
+$u-type-primary: #1998FE;
 $u-type-primary-light: #ecf5ff;
 $u-type-primary-disabled: #a0cfff;
 $u-type-primary-dark: #2b85e4;