新增2-28

components/header-view-bar/header-view-bar.vue

@@ -4,7 +4,7 @@
 			<image v-if="backgroundImg.length > 0" :src="backgroundImg" mode=""></image>
 		</view>
 		<view class="header-container" :style="{minHeight: headerContentHeight + 'px'}">
-			<image v-if="!hideBack" src="../../static/return-2.png" class="back" @tap="back" mode="widthFix"></image>
+			<image v-if="!hideBack" :src="backImg" class="back" @tap="back" mode="widthFix"></image>
 			<view class="header-title" :style="{color: titleColor, minHeight: headerContentHeight + 'px', opacity: titleOpacity}" v-if="title.length > 0">{{title}}</view>
 			<view class="header-content">
 				<slot></slot>
@@ -52,6 +52,11 @@
 				type: String,
 				default: '.',
 			},
+			//返回按钮图片
+			backImg:{
+				type: String,
+				default: '../../../static/return-2.png',
+			}
 		},
 		data() {
 			return {

pages.json

@@ -569,6 +569,65 @@
             }
             
         }
+        ,{
+            "path" : "pages/index/city/city",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/customize-gift/customize-gift",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/sub-health-pool/sub-health-pool",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/sub-health-pool-details/sub-health-pool-details",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/pay/pay",
+            "style" :                                                                                    
+            {
+               "navigationBarTitleText": "付款",
+               "enablePullDownRefresh": false,
+               "navigationBarBackgroundColor": "#F2F2F2"
+            }
+            
+        }
+        ,{
+            "path" : "pages/my-order/refund-details/refund-details",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/index/city/city.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/index/customize-gift/customize-gift.css

@@ -0,0 +1,319 @@
+page {
+	background: linear-gradient(180deg, #FF7F6C, #FBC3BA);
+	min-height: 100%;
+}
+
+.header-btn-box {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.gua-btn {
+	color: #FFFFFF;
+	font-size: 32rpx;
+	display: flex;
+	align-items: center;
+}
+
+.container-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.top {
+	width: 100%;
+	padding: 0 200rpx 0 0;
+	box-sizing: border-box;
+	color: #FFFFFF;
+	font-size: 26rpx;
+}
+
+.module {
+	width: 100%;
+	margin-top: 26rpx;
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 40rpx 52rpx;
+	box-sizing: border-box;
+	margin-bottom: 60rpx;
+	position: relative;
+}
+
+.module-bg {
+	width: 205rpx;
+	position: absolute;
+	right: 0;
+	top: -110rpx;
+}
+
+.title {
+	width: 100%;
+	margin-bottom: 20rpx;
+	color: #333333;
+	font-size: 28rpx;
+}
+
+.title text {
+	color: #F2501A;
+	margin-left: 30rpx;
+}
+
+.row {
+	width: 100%;
+	height: 74rpx;
+	line-height: 74rpx;
+	background-color: #F6F6F6;
+	border-radius: 100rpx;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	padding: 0 30rpx;
+	margin-bottom: 20rpx;
+}
+
+.row:last-child {
+	margin-bottom: 0;
+}
+
+.input {
+	font-size: 28rpx;
+	flex: 1;
+}
+
+.placeholder {
+	color: #777777;
+}
+
+.back-icon {
+	width: 15rpx;
+}
+
+.selected {
+	font-size: 28rpx;
+}
+
+.gray {
+	color: #777777;
+	font-size: 28rpx;
+}
+
+.rightsidebar {
+	flex: 1;
+	display: flex;
+	align-items: center;
+}
+
+.picker {
+	width: calc(100% - 20rpx);
+}
+
+
+.upload-box {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	color: #FFCCB2;
+	font-size: 20rpx;
+	margin: 8rpx 0 20rpx;
+}
+
+.upload-box image {
+	width: 180rpx;
+	height: 180rpx;
+	border-radius: 8rpx;
+}
+
+.radio-box {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+
+.radio-row {
+	width: calc(50% - 9rpx);
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 20rpx;
+	position: relative;
+}
+
+.circle-img {
+	width: 40rpx;
+	height: 40rpx;
+	position: absolute;
+	right: 12rpx;
+	top: 12rpx;
+}
+
+.radio-img {
+	width: 100%;
+	height: 224rpx;
+	border-radius: 12rpx;
+}
+
+.tabList {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.child {
+	width: 62rpx;
+	height: 62rpx;
+	background-color: #E63D23;
+	border-radius: 6rpx;
+	position: relative;
+	margin-right: 22rpx;
+	margin-bottom: 22rpx;
+	z-index: 9999;
+}
+
+.child:last-child {
+	margin-right: 0;
+}
+
+.child:nth-child(2) {
+	background-color: #F28A1A;
+}
+
+.child:nth-child(3) {
+	background-color: #FFCE47;
+}
+
+.child:nth-child(4) {
+	background-color: #4A8900;
+}
+
+.child:nth-child(5) {
+	background-color: #32FF17;
+}
+
+.child:nth-child(6) {
+	background-color: #00C4FF;
+}
+
+.child:nth-child(7) {
+	background-color: #B100FF;
+}
+
+.child:nth-child(8) {
+	background-color: #E200FF;
+}
+
+.child.selected::before {
+	content: "";
+	position: absolute;
+	width: 58rpx;
+	height: 58rpx;
+	left: 50%;
+	top: 50%;
+	background-color: #FFFFFF;
+	transform: translate(-50%, -50%);
+}
+
+.child.selected::after {
+	content: "";
+	position: absolute;
+	width: 54rpx;
+	height: 54rpx;
+	left: 50%;
+	top: 50%;
+	background-color: #F54D36;
+	transform: translate(-50%, -50%);
+}
+
+.child:nth-child(2).selected::after {
+	background-color: #F28A1A;
+}
+
+.child:nth-child(3).selected::after {
+	background-color: #FFCE47;
+}
+
+.child:nth-child(4).selected::after {
+	background-color: #4A8900;
+}
+
+.child:nth-child(5).selected::after {
+	background-color: #32FF17;
+}
+
+.child:nth-child(6).selected::after {
+	background-color: #00C4FF;
+}
+
+.child:nth-child(7).selected::after {
+	background-color: #B100FF;
+}
+
+.child:nth-child(8).selected::after {
+	background-color: #E200FF
+}
+
+.textarea {
+	width: 100%;
+	height: 178rpx;
+	background-color: #F6F6F6;
+	border-radius: 16rpx;
+	padding: 16rpx 26rpx;
+	box-sizing: border-box;
+	font-size: 28rpx;
+}
+
+.customer-service {
+	width: 100%;
+	padding: 20rpx 0;
+	background-color: #fff;
+	border-radius: initial;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #F2501A;
+	font-size: 26rpx;
+}
+
+.customer-service image {
+	width: 29rpx;
+	margin-right: 8rpx;
+}
+
+.btn-box {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 60rpx 0 0;
+}
+
+.btn-box button {
+	width: 100%;
+	height: 90rpx;
+	line-height: 90rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #E0E0E0;
+	color: #919191;
+	font-size: 34rpx;
+	border-radius: 100rpx;
+}
+
+.active {
+	background-color: #F2501A !important;
+	color: #fff !important;
+}
+
+.head-bg {
+	width: 176rpx;
+	position: absolute;
+	left: 0;
+	top: 0;
+	opacity: 0.7;
+}

pages/index/customize-gift/customize-gift.vue

@@ -0,0 +1,219 @@
+<!-- 礼品定制 -->
+<template>
+	<view class="wrap" :style="{paddingTop: headerHeight + 'px'}">
+
+		<HeaderViewBar ref='HeaderViewBar' title='礼品定制' titleColor="#fff" :opacity="scrollTop / 20"
+			backgroundColor='#FF7F6C'
+			style="position: fixed; top: 0; z-index: 999999999;">
+			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px'}">
+				<button class="gua-btn">
+					我的定制
+				</button>
+			</view>
+		</HeaderViewBar>
+
+		<view class="container-wrap">
+			<view class="top">
+				选择您的定制方案，如果没有选择的项目则默认无要求。提交后平台会依据要求定制并发给您确认，确认后批量定制。
+			</view>
+			<image src="../../../static/bg-18.png" class="head-bg" mode="widthFix"></image>
+			<view class="module">
+				<image src="../../../static/bg-19.png" class="module-bg" mode="widthFix"></image>
+				<view class="title">
+					基本信息
+					<text>单价:￥80.00</text>
+					<text>重量:50g/份</text>
+				</view>
+				<view class="row">
+					<view class="rightsidebar">
+						<picker class="picker" @change="bindPickerChange" :value="index" :range="array"
+							range-key="name">
+							<view :class="index >= 0 ? 'selected' : 'gray'">
+								{{index >= 0 ? array[index].name :'请选择商品'}}
+							</view>
+						</picker>
+						<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="row">
+					<view class="rightsidebar">
+						<picker class="picker" @change="bindPickerChange" :value="index" :range="array"
+							range-key="name">
+							<view :class="index >= 0 ? 'selected' : 'gray'">
+								{{index >= 0 ? array[index].name :'请选择数量/份'}}
+							</view>
+						</picker>
+						<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="row">
+					<view class="rightsidebar">
+						<input type="text" value="" class="input" placeholder="请输入包装名称"
+							placeholder-class="placeholder" />
+					</view>
+				</view>
+				<view class="upload-box" @tap="uploadImg('store_logo')">
+					<image v-if="store_logo.length > 0" :src="store_logo" mode="aspectFill"></image>
+					<image v-else src="../../../static/add-3.png" mode=""></image>
+				</view>
+				<view class="title">
+					包装风格选择
+				</view>
+				<view class="radio-box">
+					<view class="radio-row" v-for="(item, index) in list" :key="index" @click="choseItem(item.id)">
+						<image :src="item.img" class="radio-img" mode="aspectFill"></image>
+						<image class="circle-img"
+							:src="id == item.id ? '../../../static/circle-active.png' : '../../../static/circle.png'"
+							mode="" />
+					</view>
+				</view>
+				<view class="title">	
+					包装色系选择
+				</view>
+				<view class="tabList">
+					<view :class="{ 'selected' : isActive === index }" class="child" v-for="(item,index) in navList"
+						:key="index" @click="checked(index)">
+						{{item.title}}
+					</view>
+				</view>
+				<textarea value="" class="textarea" placeholder-class="placeholder" placeholder="其他备注" />
+				<button type="default" class="customer-service">
+					<image src="../../../static/icon-23.png" mode="widthFix"></image>
+					联系客服
+				</button>
+				<view class="btn-box">
+					<button type="default" class="active">提交</button>
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
+	export default {
+		components: {
+			HeaderViewBar,
+		},
+		data() {
+			return {
+				headerHeight: 0,
+				headerContainerWidth: '100%',
+				scrollTop: 0,
+				//请选择商品 一级弹窗
+				array: [{
+					name: '商品'
+				}, {
+					name: '商品2'
+				}, {
+					name: '商品3'
+				}, {
+					name: '商品4'
+				}],
+				index: -1,
+
+				store_logo: '',
+
+				//包装风格选择
+				list: [{
+						id: 1,
+						img: '../../../static/bg-1.png',
+					},
+					{
+						id: 2,
+						img: '../../../static/bg-2.png',
+					}, {
+						id: 3,
+						img: '../../../static/bg-3.png',
+					}, {
+						id: 4,
+						img: '../../../static/bg-1.png',
+					},
+				],
+				id: 1, //单选 初始化第一个高亮 
+
+				//包装色系选择
+				navList: [{
+						isActive: 0,
+					},
+					{
+						isActive: 1,
+					},
+					{
+						isActive: 2,
+					},
+					{
+						isActive: 3,
+					},
+					{
+						isActive: 4,
+					},
+					{
+						isActive: 5,
+					},
+					{
+						isActive: 6,
+					},
+					{
+						isActive: 7,
+					}
+				],
+				isActive: 0,
+			}
+		},
+		onShow() {
+			setTimeout(() => {
+				const {
+					headerHeight,
+					headerContainerWidth
+				} = this.$refs['HeaderViewBar'].getHeaderStyle();
+				this.headerHeight = headerHeight;
+				this.headerContainerWidth = headerContainerWidth;
+			}, 20);
+		},
+		methods: {
+			//请选择商品 一级弹窗
+			bindPickerChange: function(e) {
+				this.index = e.detail.value;
+			},
+
+			//返回上一页
+			back() {
+				uni.navigateBack({
+					delta: 1,
+				})
+			},
+
+			//上传图片
+			uploadImg(key) {
+				uni.chooseImage({
+					count: 1, // 选择一张
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: (res) => {
+						// console.log(JSON.stringify(res.tempFilePaths));
+						this.$set(this, key, res.tempFilePaths[0]);
+					},
+				});
+			},
+
+			//单选-包装色系选择
+			choseItem: function(index) {
+				this.id = index;
+			},
+
+			//单选-包装色系选择
+			checked(index) {
+				this.isActive = index
+			},
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./customize-gift.css";
+</style>

pages/index/gift-choice-list/gift-choice-list.css

@@ -76,7 +76,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	padding: 0 24rpx;
+	padding: 20rpx 24rpx;
 	box-sizing: border-box;
 }
 

pages/index/good-quality-work/good-quality-work.css

@@ -16,8 +16,8 @@
 	padding: 0 20rpx;
 	box-sizing: border-box;
 	position: relative;
-}
-
+}
+
 
 .swiper-box {
 	width: 100%;
@@ -37,23 +37,206 @@
 	color: #fff;
 	padding: 0 10rpx;
 	box-sizing: border-box;
-} 
+}
 
 .swiper-item-content {
 	width: 100%;
-	height: 100%;
-	background-color: #fff;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	background-color: #fff;
 	border-radius: 16rpx;
 	border-radius: 30rpx;
-	padding: 20rpx 38rpx;
+	padding: 24rpx 28rpx;
 	box-sizing: border-box;
-}
-
+}
+
 .bg {
-	width: 100%;
+	width: 100%;
 	height: 556rpx;
 	position: absolute;
 	top: 0;
-	left: 0;
+	left: 0;
 	background-color: #F0754C;
+}
+
+.nav-list {
+	width: 100%;
+	white-space: nowrap;
+	margin-bottom: 40rpx;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.child {
+	height: 60rpx;
+	line-height: 60rpx;
+	display: inline-block;
+	color: #FFFFFF;
+	font-size: 32rpx;
+	position: relative;
+	margin-right: 50rpx;
+}
+
+.child:last-child {
+	margin-right: 0;
+}
+
+.child.selected::after {
+	content: "";
+	position: absolute;
+	left: 50%;
+	bottom: 0;
+	transform: translate(-50%, 0);
+	width: 54rpx;
+	height: 6rpx;
+	background-color: #FFFFFF;
+}
+
+
+.tabList {
+	width: 100%;
+	white-space: nowrap;
+}
+
+.type {
+	height: 60rpx;
+	line-height: 60rpx;
+	border-radius: 10rpx;
+	box-sizing: border-box;
+	color: #A7A7A7;
+	background-color: #fff;
+	font-size: 30rpx;
+	display: inline-block;
+	margin-right: 22rpx;
+	border-radius: 100rpx;
+}
+
+.type:last-child {
+	margin-right: 0;
+}
+
+.active {
+	background: rgb(242, 80, 26, 0.22);
+	color: #F2501A;
+	font-size: 32rpx;
+	padding: 0 34rpx;
+}
+
+.container-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+}
+
+.bottom {
+	width: calc(100% - 48rpx);
+	padding: 0 20rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	border-radius: 16rpx;
+	margin: 0 auto;
+	background-color: #fff;
+}
+
+.bottom-label {
+	width: 100%;
+	color: #202020;
+	font-weight: bold;
+	font-size: 34rpx;
+	padding: 20rpx 0;
+	display: flex;
+	align-items: center;
+}
+
+.bottom-label text {
+	font-weight: normal;
+	font-size: 30rpx;
+	color: #A7A7A7;
+	margin-left: 20rpx;
+}
+
+.list {
+	width: 100%;
+	margin: 0 auto 20rpx;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 24rpx 0;
+	box-sizing: border-box;
+}
+
+.product-item {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+	padding-right: 12rpx;
+	box-sizing: border-box;
+}
+
+.product-item:last-child {
+	margin-bottom: 0;
+}
+
+.product-item-img {
+	width: 174rpx;
+	height: 174rpx;
+	border-radius: 12rpx;
+	margin-right: 18rpx;
+}
+
+.product-item-column {
+	flex: 1;
+	height: 174rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.product-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-weight: bold;
+	font-size: 26rpx;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.product-item-btn {
+	width: 40rpx;
+	height: 40rpx;
+	line-height: 40rpx;
+	border-radius: initial;
+}
+
+.product-item-btn image {
+	width: 100%;
+	height: 100%;
+}
+
+.product-item-price {
+	color: #F2501A;
+	font-size: 28rpx;
+}
+
+.product-item-price>text {
+	color: #919191;
+	font-size: 24rpx;
+	margin-left: 6rpx;
+	text-decoration: line-through;
 }

pages/index/good-quality-work/good-quality-work.vue

@@ -10,35 +10,115 @@
 				</button>
 			</view>
 		</HeaderViewBar>
-		
-		<view class="bg"></view>
-		
-		<view class="swiper-box">
-			<swiper class="swiper" :circular="true" previous-margin="25rpx" next-margin="25rpx">
-				<swiper-item>
-					<view class="swiper-item">
-						<view class="swiper-item-content">
-							12
+
+		<view class="bg"></view>
+
+		<view class="container-wrap">
+			<view class="swiper-box">
+				<swiper class="swiper" :circular="true" previous-margin="25rpx" next-margin="25rpx">
+					<swiper-item>
+						<view class="swiper-item">
+							<view class="swiper-item-content">
+								<image src="../../../static/img-2.png" class="product-item-img" mode="aspectFill"></image>
+								<view class="product-item-column">
+									<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+									<view class="product-item-row-between">
+										<view class="product-item-price">
+											￥394.00
+											<text>￥34.00</text>
+										</view>
+										<button type="default" class="product-item-btn">
+											<image src="../../../static/add-icon.png" mode=""></image>
+										</button>
+									</view>
+								</view>
+							</view>
+						</view>
+					</swiper-item>
+					<swiper-item>
+						<view class="swiper-item">
+							<view class="swiper-item-content">
+								2
+							</view>
+						</view>
+					</swiper-item>
+					<swiper-item>
+						<view class="swiper-item">
+							<view class="swiper-item-content">
+								4
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
+
+			<scroll-view scroll-x="true" class="nav-list">
+				<view :class="{ 'selected' : isActive === index }" class="child" v-for="(item,index) in navList"
+					:key="index" @click="checked(index)">
+					{{item.title}}
+				</view>
+			</scroll-view>
+
+			<view class="bottom">
+				<view class="bottom-label">
+					热销商品
+					<text>来自西双版纳</text>
+				</view>
+				<scroll-view scroll-x="true" class="tabList">
+					<view v-for="(item, index) in tabList" :key="index" :class="'type ' + [id == index ? 'active' : '']"
+						@click="selectItem(index,item)">
+						{{item.title}}
+					</view>
+				</scroll-view>  
+				<view class="list">
+					<view class="product-item">
+						<image src="../../../static/img-2.png" class="product-item-img" mode="aspectFill"></image>
+						<view class="product-item-column">
+							<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+							<view class="product-item-row-between">
+								<view class="product-item-price">
+									￥394.00
+									<text>￥34.00</text>
+								</view>
+								<button type="default" class="product-item-btn">
+									<image src="../../../static/add-icon.png" mode=""></image>
+								</button>
+							</view>
 						</view>
 					</view>
-				</swiper-item>
-				<swiper-item>
-					<view class="swiper-item">
-						<view class="swiper-item-content">
-							2
+					<view class="product-item">
+						<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+						<view class="product-item-column">
+							<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+							<view class="product-item-row-between">
+								<view class="product-item-price">
+									￥394.00
+									<text>￥34.00</text>
+								</view>
+								<button type="default" class="product-item-btn">
+									<image src="../../../static/add-icon.png" mode=""></image>
+								</button>
+							</view>
 						</view>
 					</view>
-				</swiper-item>
-				<swiper-item>
-					<view class="swiper-item">
-						<view class="swiper-item-content">
-							4
+					<view class="product-item">
+						<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+						<view class="product-item-column">
+							<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+							<view class="product-item-row-between">
+								<view class="product-item-price">
+									￥394.00
+									<text>￥34.00</text>
+								</view>
+								<button type="default" class="product-item-btn">
+									<image src="../../../static/add-icon.png" mode=""></image>
+								</button>
+							</view>
 						</view>
 					</view>
-				</swiper-item>
-			</swiper>
+				</view>
+			</view>
 		</view>
-
 	</view>
 </template>
 
@@ -52,7 +132,47 @@
 			return {
 				headerHeight: 0,
 				headerContainerWidth: '100%',
-
+				//选项卡
+				isActive: 1,
+				navList: [{
+					title: '华东',
+				}, {
+					title: "华中",
+				}, {
+					title: "华南",
+				}, {
+					title: "华北",
+				}, {
+					title: "东北",
+				}, {
+					title: "西北",
+				}, {
+					title: '西南'
+				}],
+				//选项卡2
+				tabList: [{
+						title: '全部'
+					},
+					{
+						title: '上海'
+					},
+					{
+						title: '江苏'
+					},
+					{
+						title: '浙江'
+					},
+					{
+						title: '安徽'
+					},
+					{
+						title: '福建'
+					},
+					{
+						title: '江西'
+					}
+				],
+				id: 0, //单选 初始化第一个高亮
 			}
 		},
 		onShow() {
@@ -64,10 +184,16 @@
 				this.headerHeight = headerHeight;
 				this.headerContainerWidth = headerContainerWidth;
 			}, 20);
-			this.getData();
 		},
 		methods: {
-
+			//选项卡
+			checked(index) {
+				this.isActive = index
+			},
+			//选项卡2
+			selectItem: function(index, item) {
+				this.id = index;
+			},
 		},
 	}
 </script>

pages/index/my-custom/my-custom.css

@@ -283,27 +283,36 @@ page {
 	color: #A7A7A7;
 	font-size: 24rpx;
 }
+ 
 
 .fangkuai {
 	width: 28rpx;
 	height: 28rpx;
+	background-color: #E63D23;
 	border-radius: 6rpx;
-	background-color: #fff;
-	border: 1px solid #E63D23;
-	box-sizing: border-box;
-	position: relative;
-}
-
-.fangkuai::after {
-	position: absolute;
+	position: relative;
+	margin-left: 6rpx;
+	z-index: 9999;
+}
+.fangkuai::before {
 	content: "";
+	position: absolute;
 	width: 24rpx;
 	height: 24rpx;
+	left: 50%;
 	top: 50%;
+	background-color: #FFFFFF;
+	transform: translate(-50%, -50%);
+}
+.fangkuai::after {
+	content: "";
+	position: absolute;
+	width: 20rpx;
+	height: 20rpx;
 	left: 50%;
+	top: 50%;
+	background-color: #F54D36;
 	transform: translate(-50%, -50%);
-	border-radius: 6rpx;
-	background-color: #E63D23;
 }
 
 .color-box {

pages/index/pay/pay.css

@@ -0,0 +1,466 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx 100rpx;
+	box-sizing: border-box;
+}
+
+.address-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 22rpx;
+}
+
+.address-box {
+	width: 100%;
+	height: 224rpx;
+	background-color: #fff;
+	display: flex;
+	align-items: center;
+	border-radius: 16rpx;
+	padding: 0 30rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.location-icon {
+	width: 80rpx;
+	margin-right: 24rpx;
+}
+
+.address-sidebar {
+	flex: 1;
+	display: flex;
+	align-items: center;
+}
+
+.address-column {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.back-icon {
+	width: 16rpx;
+	margin-left: 20rpx;
+}
+
+.people-name {
+	font-size: 34rpx;
+	color: #303133;
+}
+
+.people-name text {
+	font-size: 30rpx;
+	color: #A7A7A7;
+	margin-left: 20rpx;
+}
+
+.address-msg {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	font-size: 30rpx;
+	color: #A7A7A7;
+	margin-top: 10rpx;
+}
+
+.normal-msg {
+	color: #111111;
+	font-size: 30rpx;
+}
+
+.product-module {
+	width: 100%;
+	background: #FFFFFF;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	padding: 0 24rpx 26rpx;
+	box-sizing: border-box;
+	margin-bottom: 22rpx;
+}
+
+.product-module-label {
+	width: 100%;
+	height: 90rpx;
+	display: flex;
+	align-items: center;
+	color: #111111;
+	font-size: 30rpx;
+	font-weight: bold;
+}
+
+.product-item-sidebar {
+	flex: 1;
+	height: 180rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.product-sidebar {
+	flex: 1;
+	height: 180rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.product-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.product-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.gray-font {
+	font-size: 24rpx;
+	color: #A7A7A7;
+}
+.gray-font-msg{
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	font-size: 24rpx;
+	color: #A7A7A7;
+}
+.black-font {
+	font-size: 24rpx;
+	color: #202020;
+}
+
+.row-end {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.product-item-price {
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.product-item-num {
+	color: #A7A7A7;
+	font-size: 20rpx;
+}
+
+.product-item-num text {
+	font-size: 24rpx;
+}
+
+.product-item-tag {
+	width: 100%;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.product-item-msg {
+	width: 100%;
+	color: #F2501A;
+	font-size: 20rpx;
+}
+
+.product-row-right {
+	display: flex;
+	align-items: center;
+	font-size: 24rpx;
+	color: #202020;
+}
+
+.product-row-right image {
+	margin-left: 20rpx;
+	width: 14rpx;
+}
+
+.product-row-left {
+	display: flex;
+	align-items: center;
+}
+
+.product-row-label {
+	color: #202020;
+	font-size: 24rpx;
+	margin-right: 34rpx;
+}
+
+.product-row-msg {
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.product-bottom {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 80rpx;
+}
+
+.product-row-price {
+	color: #F2501A;
+	font-size: 24rpx;
+}
+
+
+.radio-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+}
+
+.radio-row {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 38rpx;
+}
+
+.radio-row:last-child {
+	margin-bottom: 0;
+}
+
+.leftsidebar {
+	display: flex;
+	align-items: center;
+	color: #333333;
+	font-size: 26rpx;
+}
+
+.type-img {
+	width: 40rpx;
+	height: 40rpx;
+	margin-right: 26rpx;
+}
+
+.circle-img {
+	width: 38rpx;
+	height: 38rpx;
+}
+
+.footer {
+	width: 100%;
+	height: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	background-color: #F8F9FC;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 999;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.footer-sidebar {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.footer-row {
+	color: #A7A7A7;
+	font-size: 26rpx;
+}
+
+.total-label {
+	color: #202020;
+	font-size: 28rpx;
+	margin-left: 22rpx;
+}
+
+.total-money {
+	color: #F2501A;
+	font-size: 24rpx;
+}
+
+.total-money text {
+	font-size: 34rpx;
+}
+
+.footer-sidebar-msg {
+	color: #202020;
+	font-size: 22rpx;
+}
+
+.footer-btn {
+	width: 180rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 100rpx;
+	background-color: #F2501A;
+	color: #F8F8F8;
+	font-size: 24rpx;
+	margin-left: 26rpx;
+}
+
+.total-price-row {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
+
+.total-price-row-left {
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.total-price-row-left text {
+	color: #A7A7A7;
+	margin-left: 32rpx;
+}
+
+.total-price {
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.details-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
+
+.details-row-between:last-child {
+	margin-bottom: ;
+}
+
+.details-row-left {
+	display: flex;
+	align-items: center;
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.details-row-left image {
+	width: 40rpx;
+	height: 40rpx;
+	margin-right: 28rpx;
+}
+
+.details-row-right {
+	display: flex;
+	align-items: center;
+	color: #F2501A;
+	font-size: 26rpx;
+}
+
+.details-row-right image {
+	width: 14rpx;
+	margin-left: 18rpx;
+}
+
+.details-bottom-row {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 26rpx;
+	color: #202020;
+}
+
+.border-img {
+	width: 100%;
+}
+
+.product-item {
+	width: 100%;
+	background: #FFFFFF;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	padding: 24rpx 24rpx 20rpx;
+	box-sizing: border-box;
+	margin-bottom: 22rpx;
+}
+
+.time-row {
+	width: 100%;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.product-content {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	margin-bottom: 10rpx;
+}
+
+.product-img {
+	width: 188rpx;
+	height: 188rpx;
+	border-radius: 12rpx;
+	margin-right: 20rpx;
+}
+.left-row{
+	display: flex;
+	align-items: center;
+}
+.child {
+	width: 28rpx;
+	height: 28rpx;
+	background-color: #E63D23;
+	border-radius: 6rpx;
+	position: relative;
+	margin-left: 6rpx;
+	z-index: 9999;
+}
+.child::before {
+	content: "";
+	position: absolute;
+	width: 24rpx;
+	height: 24rpx;
+	left: 50%;
+	top: 50%;
+	background-color: #FFFFFF;
+	transform: translate(-50%, -50%);
+}
+
+.child::after {
+	content: "";
+	position: absolute;
+	width: 20rpx;
+	height: 20rpx;
+	left: 50%;
+	top: 50%;
+	background-color: #F54D36;
+	transform: translate(-50%, -50%);
+}

pages/index/pay/pay.vue

@@ -0,0 +1,120 @@
+<!-- 付款 -->
+<template>
+	<view class="wrap">
+		<view class="product-item">
+			<view class="product-content">
+				<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
+				<view class="product-sidebar">
+					<view class="product-name">
+						藕粉桂花坚果藕粉羹
+					</view>
+					<view class="product-row-between">
+						<text class="gray-font">一盒200g*20袋</text>
+						<text class="black-font">￥320.00</text>
+					</view>
+					<view class="product-row-between">
+						<view class="left-row">
+							<text class="gray-font">颜色:</text>
+							<view class="child"></view>
+						</view>
+						<text class="gray-font">x100</text>
+					</view>
+					<view class="gray-font-msg">备注:需要大量定制，用于元旦送给VIP客户</view>
+				</view>
+			</view>
+			<view class="time-row">
+				2021-11-16
+			</view>
+		</view>
+		<view class="product-module">
+			<view class="product-module-label">
+				价格明细
+			</view>
+			<view class="total-price-row">
+				<view class="total-price-row-left">
+					商品总价 <text>共100件宝贝</text>
+				</view>
+				<text class="total-price">￥8000.00</text>
+			</view>
+			<view class="details-row-between">
+				<view class="details-row-left">
+					蜂蜜袖子茶100份
+				</view>
+				<view class="details-row-right">
+					￥7000
+				</view>
+			</view>
+			<view class="details-row-between">
+				<view class="details-row-left">
+					包装100份
+				</view>
+				<view class="details-row-right">
+					￥1000
+				</view>
+			</view>
+			<view class="details-bottom-row">
+				<text>合计</text>
+				<text>￥359.85</text>
+			</view>
+		</view>
+
+		<view class="product-module">
+			<view class="product-module-label">
+				支付方式
+			</view>
+			<view class="radio-wrap">
+				<view class="radio-row" v-for="(item, index) in list" :key="index" @click="choseItem(item.id)">
+					<view class="leftsidebar">
+						<image :src="item.img" mode="" class="type-img"></image>
+						<text>{{item.name}}</text>
+					</view>
+					<image class="circle-img"
+						:src="id == item.id ? '../../../static/circle-active.png' : '../../../static/circle.png'"
+						mode="" />
+				</view>
+			</view>
+		</view>
+
+		<view class="footer">
+			<view class="footer-sidebar">
+				<view class="footer-row">
+					总计100件, <text class="total-label">合计:</text><text class="total-money">￥<text>374.00</text></text>
+				</view>
+			</view>
+			<button type="default" class="footer-btn">立即支付</button>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//支付方式
+				list: [{
+						id: 1,
+						name: '支付宝支付',
+						img: '../../../static/withdraw-1.png',
+					},
+					{
+						id: 2,
+						name: '微信支付',
+						img: '../../../static/withdraw-2.png',
+					}
+				],
+				id: 1, //单选 初始化第一个高亮 
+			}
+		},
+		methods: {
+			//单选-选择提现方式
+			choseItem: function(index) {
+				this.id = index;
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./pay.css";
+</style>

pages/index/product-details/product-details.css

@@ -970,4 +970,128 @@ page {
 	width: 100%;
 	display: flex;
 	flex-wrap: wrap;
+}
+
+.type-list {
+	width: 100%;
+	display: flex;
+	margin-top: 28rpx;
+}
+
+.type-item {
+	font-size: 26rpx;
+	color: #A7A7A7;
+	border: 1px solid #9D9D9D;
+	height: 56rpx;
+	line-height: 56rpx;
+	width: fit-content;
+	min-width: 210rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 20rpx;
+	border-radius: 100rpx;
+	margin-bottom: 14rpx;
+	padding: 0 10rpx;
+	box-sizing: border-box;
+}
+
+.pink-border {
+	border: 1px solid #FCD0C9;
+	background-color: #FBECE7;
+	color: #F2501A;
+}
+
+.details-box {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 20rpx 28rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.spike-module-box {
+	width: 100%;
+	height: 110rpx;
+	position: relative;
+}
+
+.spike-bg {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+}
+
+.spike-module-content {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 100;
+	padding: 0 26rpx 0 20rpx;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: space-between;
+}
+
+.spike-module-content-left {
+	width: 58%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	color: #FFFFFF;
+	font-size: 24rpx;
+}
+
+.del-price-white {
+	text-decoration: line-through;
+}
+
+.spike-price {
+	color: #F32E02;
+	font-size: 28rpx;
+	font-weight: bold;
+	padding: 0 22rpx;
+	border-radius: 100rpx;
+	background-color: #fff;
+	height: 45rpx;
+	line-height: 45rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0 16rpx 0 6rpx;
+}
+
+.spike-module-content-right {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	padding-top: 10rpx;
+}
+
+.spike-module-content-right-label {
+	color: #F32E02;
+	font-size: 24rpx;
+	padding-right: 12rpx;
+}
+
+.bottom-label {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.bottom-label-text {
+	color: #F32E02;
+	font-size: 24rpx;
+	margin-right: 10rpx;
 }

pages/index/product-details/product-details.vue

@@ -36,6 +36,42 @@
 			</view>
 		</view>
 
+		<view class="spike-module-box">
+			<image src="../../../static/bg-17.png" class="spike-bg" mode=""></image>
+			<view class="spike-module-content">
+				<view class="spike-module-content-left">
+					秒杀价:
+					<view class="spike-price">
+						¥39.00
+					</view>
+					<text class="del-price-white">¥56.00</text>
+				</view>
+				<view class="spike-module-content-right">
+					<view class="spike-module-content-right-label">距秒杀截止时间</view>
+					<view class="bottom-label">
+						<text class="bottom-label-text">14天</text>
+						<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
+							@change="onChange">
+							<view class="time">
+								<view class="time__custom">
+									<text
+										class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
+								</view>
+								<text class="time__doc">:</text>
+								<view class="time__custom">
+									<text class="time__custom__item">{{ timeData.minutes }}</text>
+								</view>
+								<text class="time__doc">:</text>
+								<view class="time__custom">
+									<text class="time__custom__item">{{ timeData.seconds }}</text>
+								</view>
+							</view>
+						</u-count-down>
+					</view>
+				</view>
+			</view>
+		</view>
+
 		<view class="padding-box">
 			<view class="module">
 				<view class="price-row">
@@ -58,6 +94,18 @@
 						</view>
 					</view>
 				</view>
+				<view class="type-list">
+					<view class="type-item">
+						菊花决明子茶
+					</view>
+					<view class="type-item pink-border">
+						藕粉桂花坚果羹
+					</view>
+					<view class="type-item">
+						黑芝麻羹
+					</view>
+				</view>
+
 			</view>
 
 			<view class="module">
@@ -233,7 +281,9 @@
 				<view class="details-module-label">
 					商品详情
 				</view>
-				<image src="../../../static/img-4.png" mode="widthFix" class="img"></image>
+				<view class="details-box">
+					<image src="../../../static/img-4.png" mode="widthFix" class="img"></image>
+				</view>
 			</view>
 
 		</view>
@@ -452,18 +502,18 @@
 							<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
 						</view>
 					</view>
-				</view>
-				<view class="taste-row">
-					<view class="taste-label">
-						净含量
-					</view>
-					<view class="specification-list">
-						<view v-for="(item, index) in list3" :key="index">
-							<view :class="'type2 ' + [choose == index ? 'active' : '']" @click="chooseItem(index)">
-								{{ item.name }}
-							</view>
-						</view>
-					</view>
+				</view>
+				<view class="taste-row">
+					<view class="taste-label">
+						净含量
+					</view>
+					<view class="specification-list">
+						<view v-for="(item, index) in list3" :key="index">
+							<view :class="'type2 ' + [choose == index ? 'active' : '']" @click="chooseItem(index)">
+								{{ item.name }}
+							</view>
+						</view>
+					</view>
 				</view>
 				<view class="taste-row">
 					<view class="taste-label">
@@ -553,7 +603,7 @@
 
 				isShowParameter: false, //限源预售-参数-弹窗
 
-				isShowPreSaleSelectSpecification: true, //限源预售-选择规格-弹窗
+				isShowPreSaleSelectSpecification: false, //限源预售-选择规格-弹窗
 
 				list2: [{
 						name: '小果55-60mm【个头偏小】'
@@ -568,19 +618,22 @@
 						name: '精选大果65mm+【超值人气爆款】'
 					}
 				],
-				selected: '3', //单选 初始化第一个高亮
+				selected: '3', //单选 初始化第一个高亮
+
+				list3: [{
+						name: '3斤'
+					},
+					{
+						name: '5斤'
+					},
+					{
+						name: '9斤'
+					}
+				],
+				choose: '2', //单选 初始化第一个高亮
 				
-				list3: [{
-						name: '3斤'
-					},
-					{
-						name: '5斤'
-					},
-					{
-						name: '9斤'
-					}
-				],
-				choose: '2', //单选 初始化第一个高亮
+				//倒计时
+				timeData: {},
 			}
 		},
 		onShow() {
@@ -664,12 +717,17 @@
 			selectedItem: function(index) {
 				// console.log(index)
 				this.selected = index;
+			},
+
+			//限源预售-净含量-单选
+			chooseItem: function(index) {
+				// console.log(index)
+				this.choose = index;
 			},
 			
-			//限源预售-净含量-单选
-			chooseItem: function(index) {
-				// console.log(index)
-				this.choose = index;
+			//倒计时
+			onChange(e) {
+				this.timeData = e
 			},
 		},
 		onPageScroll(e) {
@@ -679,5 +737,38 @@
 </script>
 
 <style scoped lang="scss">
-	@import "./product-details.css";
+	@import "./product-details.css";
+	.time {
+		@include flex;
+		align-items: center;
+	
+		&__custom {
+			margin-top: 4px;
+			width: 19px;
+			height: 20px;
+			line-height: 20px;
+			background-color: #FC4A04 !important;
+			border-radius: 4px;
+			/* #ifndef APP-NVUE */		
+			display: flex;
+			/* #endif */
+			justify-content: center;
+			align-items: center;
+	
+			&__item {
+				color: #fff !important;
+				font-size: 24rpx !important;
+				text-align: center;
+				font-weight: bold;
+				margin: 0 !important;
+			}
+		}
+	
+		&__doc {
+			color: #F2501A !important;
+			padding: 0 6rpx !important;
+			font-size: 36rpx !important;
+			margin: 0 !important;
+		}
+	}
 </style>

pages/index/promotional-picks/promotional-picks.css

@@ -8,7 +8,8 @@
 
 .gua-btn {
 	display: flex;
-	align-items: center;
+	align-items: center;
+	border-radius: initial;
 }
 
 .gua-btn image {
@@ -491,4 +492,10 @@
 	background-color: #F2501A;
 	color: #FFFFFF;
 	font-size: 20rpx;
+}
+
+.bottom-label-text {
+	margin-right: 16rpx;
+	color: #202020;
+	font-size: 36rpx;
 }

pages/index/promotional-picks/promotional-picks.vue

@@ -1,9 +1,9 @@
 <!-- 促销精选 -->
 <template>
-	<view class="wrap">
+	<view class="wrap">
+		
 		<HeaderViewBar ref='HeaderViewBar' title='促销精选' :opacity="scrollTop / 20" backgroundColor='#6A4FDB'
 			style="position: fixed; top: 0; z-index: 999999999;">
-
 			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px'}">
 				<button class="gua-btn">
 					<image src="../../../static/share-icon.png" mode=""></image>
@@ -26,7 +26,7 @@
 				<view :class="{ 'selected' : isActive === index }" class="child" v-for="(item,index) in navList"
 					:key="index" @click="checked(index)">
 					{{item.title}}
-				</view>
+				</view> 
 			</view>
 
 			<scroll-view scroll-x="true" class="tabList">
@@ -38,7 +38,24 @@
 			
 			<view class="bottom">
 				<view class="bottom-label">
-					距开抢
+					<text class="bottom-label-text">距开抢</text>
+					<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
+						@change="onChange">
+						<view class="time">
+							<view class="time__custom">
+								<text
+									class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
+							</view>
+							<text class="time__doc">:</text>
+							<view class="time__custom">
+								<text class="time__custom__item">{{ timeData.minutes }}</text>
+							</view>
+							<text class="time__doc">:</text>
+							<view class="time__custom">
+								<text class="time__custom__item">{{ timeData.seconds }}</text>
+							</view>
+						</view>
+					</u-count-down>
 				</view>
 				<view class="spike-list">
 					<view class="spike-item">
@@ -286,7 +303,10 @@
 						title: '11:00开抢'
 					}
 				],
-				id: 0, //单选 初始化第一个高亮
+				id: 0, //单选 初始化第一个高亮
+				
+				//倒计时
+				timeData: {},
 			}
 		},
 		onShow() {
@@ -299,7 +319,7 @@
 				this.headerContainerWidth = headerContainerWidth;
 			}, 20);
 		},
-		methods: {
+		methods: { 
 			//选项卡
 			checked(index) {
 				this.isActive = index
@@ -307,6 +327,10 @@
 			//单选-选项卡
 			selectItem(index) {
 				this.id = index;
+			},
+			//倒计时
+			onChange(e) {
+				this.timeData = e
 			},
 		},
 		onPageScroll(e) {
@@ -316,5 +340,37 @@
 </script>
 
 <style scoped lang="scss">
-	@import "./promotional-picks.css";
+	@import "./promotional-picks.css";
+	.time {
+		@include flex;
+		align-items: center;
+	
+		&__custom {
+			margin-top: 4px;
+			width: 27px;
+			height: 20px;
+			background-color: #F2501A !important;
+			border-radius: 4px;
+			/* #ifndef APP-NVUE */		
+			display: flex;
+			/* #endif */
+			justify-content: center;
+			align-items: center;
+	
+			&__item {
+				color: #fff !important;
+				font-size: 34rpx !important;
+				text-align: center;
+				font-weight: bold;
+				margin: 0 !important;
+			}
+		}
+	
+		&__doc {
+			color: #A8A7AC !important;
+			padding: 0 3rpx !important;
+			font-size: 36rpx !important;
+			margin: 0 !important;
+		}
+	}
 </style>

pages/index/raise-five-internal-organs/raise-five-internal-organs.css

@@ -223,8 +223,7 @@
 
 .featured-item-top {
 	width: 100%;
-	height: 82rpx;
-	line-height: 82rpx;
+	padding: 26rpx 0 14rpx;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;

pages/index/raise-five-internal-organs/raise-five-internal-organs.vue

@@ -14,9 +14,9 @@
 					<view class="product-item-column2-bottom">
 						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
 						<view class="product-item-column2-row-between">
-							<view class="product-item-column2-price">
-								￥<394 class="00"></394>
-								<text>￥34.00</text>
+							<view class="product-item-column2-price">
+								￥394.00
+								<text>￥34.00</text>
 							</view>
 							<button type="default" class="product-item-column2-btn">
 								<image src="../../../static/add-icon.png" mode=""></image>

pages/index/search/search.css

@@ -1,27 +1,290 @@
-page{
-	background-color: #FFFFFF;
+page {
+	min-height: 100%;
+	background: linear-gradient(180deg, #FFFFFF, #F2F2F2);
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.search-history {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.history-search-box {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.del-btn {
+	display: flex;
+	align-items: center;
+	background-color: initial;
+	border-radius: initial;
+}
+
+.del-btn image {
+	width: 29rpx;
+}
+
+.history-list {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	margin-top: 35rpx;
+}
+
+.history-item {
+	width: fit-content;
+	height: 68rpx;
+	line-height: 68rpx;
+	padding: 0 20rpx;
+	border-radius: 100rpx;
+	background-color: #F6F6F6;
+	color: #484848;
+	font-size: 26rpx;
+	margin-right: 18rpx;
+	margin-bottom: 18rpx;
+}
+
+.hot-search-label {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.hot-search-tag {
+	width: fit-content;
+	color: #FFFFFF;
+	font-size: 20rpx;
+	background: linear-gradient(180deg, #E9BA6D, #E63D23);
+	border-radius: 8rpx 2rpx 8rpx 2rpx;
+	height: 28rpx;
+	line-height: 28rpx;
+	display: flex;
+	align-items: center;
+	padding: 0 6rpx;
+	margin-left: 10rpx;
+}
+
+.hot-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 50rpx;
+}
+
+.tab-list {
+	width: 100%;
+	height: 75rpx;
+	display: flex;
+	background-color: #fff;
+}
+
+.child {
+	flex: 1;
+	height: 75rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 34rpx;
+	color: #202020;
+	position: relative;
+}
+
+.child.active {
+	color: #F2501A;
+	font-weight: bold;
+}
+
+.child.active::after {
+	content: "";
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translate(-50%, 0);
+	width: 70rpx;
+	height: 6rpx;
+	background-color: #F2501A;
+	border-radius: 6rpx;
+}
+
+.product-item-column2 {
+	width: 100%;
+	height: 100%;
+	border-radius: 12rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+.product-item-column2-img {
+	width: 100%;
+	height: 340rpx;
+	border-radius: 12rpx 12rpx 0 0;
+}
+
+.product-item-column2-bottom {
+	width: 100%;
+	height: calc(100% - 340rpx);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 16rpx;
+	box-sizing: border-box;
+	border-radius: 0 0 12rpx 12rpx;
+}
+
+.product-item-column-name2 {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-weight: bold;
+	font-size: 26rpx;
+}
+
+.product-item-column2-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.product-item-column2-btn {
+	width: 40rpx;
+	height: 40rpx;
+	line-height: 40rpx;
+	border-radius: initial;
+}
+
+.product-item-column2-btn image {
+	width: 100%;
+	height: 100%;
+}
+
+.product-item-column2-price {
+	color: #F2501A;
+	font-size: 28rpx;
+}
+
+.product-item-column2-price>text {
+	color: #919191;
+	font-size: 24rpx;
+	margin-left: 6rpx;
+	text-decoration: line-through;
+}
+
+.product-list {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 26rpx 0;
+}
+
+.product-item {
+	width: calc(50% - 11rpx);
+	height: 500rpx;
+	border-radius: 12rpx;
+	background-color: #fff;
+	margin-bottom: 30rpx;
 }
-.wrap{
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	padding: 20rpx 24rpx;
-	box-sizing: border-box;
-}
-.history-search-box{
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: #202020;
-	font-size: 28rpx;
-}
-.del-btn{
-	display: flex;
-	align-items: center;
-	background-color: initial;
-	border-radius: initial;
-}
-.del-btn image{
-	width: 29rpx;
-}
+.list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	overflow: hidden;
+}
+
+.item {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 24rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid #F9F6F6;
+}
+
+.item:last-child {
+	border-bottom: none;
+}
+
+.product-item-column-img {
+	width: 220rpx;
+	height: 180rpx;
+	border-radius: 16rpx;
+	margin-right: 24rpx;
+}
+
+.product-item-sidebar {
+	flex: 1;
+	height: 160rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.product-item-sidebar-top {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+}
+
+.product-tag-img {
+	width: 106rpx;
+	margin-right: 6rpx;
+	vertical-align: middle;
+}
+
+.product-item-column-name {
+
+	color: #202020;
+	font-size: 28rpx;
+	font-weight: bold;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.look-num {
+	color: #919191;
+	font-size: 26rpx;
+}
+
+.collect-btn {
+	display: flex;
+	align-items: center;
+	font-size: 26rpx;
+	color: #919191;
+	background-color: initial;
+	border-radius: initial;
+}
+
+.collect-btn>image {
+	width: 35rpx;
+	margin-right: 8rpx;
+}

pages/index/search/search.vue

@@ -1,28 +1,233 @@
-<!-- 搜索 -->
-<template>
-	<view class="wrap">
-		<view class="history-search-box">
-			<text>历史搜索</text>
-			<button type="default" class="del-btn">
-				<image src="../../../static/del-img2.png" mode="widthFix"></image>
-			</button>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
+<!-- 搜索 -->
+<template>
+	<view class="wrap">
+		<view class="search-history" v-if="status == 1">
+			<view class="history-search-box">
+				<text>历史搜索</text>
+				<button type="default" class="del-btn">
+					<image src="../../../static/del-img2.png" mode="widthFix"></image>
+				</button>
+			</view>
+			<view class="history-list">
+				<view class="history-item">
+					头疼头晕
+				</view>
+				<view class="history-item">
+					烟台苹果
+				</view>
+				<view class="history-item">
+					新鲜奶莓
+				</view>
+			</view>
+			<view class="hot-box">
+				<view class="hot-search-label">
+					热搜
+					<view class="hot-search-tag">HOT</view>
+				</view>
+				<view class="history-list">
+					<view class="history-item">
+						清暑大礼盒
+					</view>
+					<view class="history-item">
+						清暑大礼盒3号
+					</view>
+					<view class="history-item">
+						新人满减清暑大礼盒3号
+					</view>
+					<view class="history-item">
+						燕窝枸杞
+					</view>
+					<view class="history-item">
+						微山莲子
+					</view>
+					<view class="history-item">
+						烟台苹果
+					</view>
+					<view class="history-item">
+						新鲜奶莓
+					</view>
+					<view class="history-item">
+						冬虫夏草
+					</view>
+					<view class="history-item">
+						青海耗牛
+					</view>
+					<view class="history-item">
+						冬瓜荷叶茶
+					</view>
+				</view>
+			</view>
+			<view class="hot-box">
+				<view class="hot-search-label">
+					亚健康咨询
+				</view>
+				<view class="history-list">
+					<view class="history-item">
+						头疼头晕
+					</view>
+					<view class="history-item">
+						腹部不适
+					</view>
+					<view class="history-item">
+						心烦气躁
+					</view>
+					<view class="history-item">
+						手脚发麻
+					</view>
+					<view class="history-item">
+						腰酸背痛
+					</view>
+					<view class="history-item">
+						手脚冰凉
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="search-product">
+			<view class="tab-list">
+				<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
+					:key="index" @click="checked(index)">
+					{{item.title}}
+				</view>
+			</view>
+			<view v-if="isActive == 0">
+				<view class="product-list">
+					<view class="product-item">
+						<view class="product-item-column2">
+							<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
+							</image>
+							<view class="product-item-column2-bottom">
+								<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+								<view class="product-item-column2-row-between">
+									<view class="product-item-column2-price">
+										￥394.00
+										<text>￥34.00</text>
+									</view>
+									<button type="default" class="product-item-column2-btn">
+										<image src="../../../static/add-icon.png" mode=""></image>
+									</button>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="product-item">
+						<view class="product-item-column2">
+							<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
+							</image>
+							<view class="product-item-column2-bottom">
+								<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+								<view class="product-item-column2-row-between">
+									<view class="product-item-column2-price">
+										￥394.00
+										<text>￥34.00</text>
+									</view>
+									<button type="default" class="product-item-column2-btn">
+										<image src="../../../static/add-icon.png" mode=""></image>
+									</button>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="product-item">
+						<view class="product-item-column2">
+							<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
+							</image>
+							<view class="product-item-column2-bottom">
+								<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+								<view class="product-item-column2-row-between">
+									<view class="product-item-column2-price">
+										￥394.00
+										<text>￥34.00</text>
+									</view>
+									<button type="default" class="product-item-column2-btn">
+										<image src="../../../static/add-icon.png" mode=""></image>
+									</button>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view v-if="isActive == 1">
+				<view class="list">
+					<view class="item">
+						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
+						<view class="product-item-sidebar">
+							<view class="product-item-sidebar-top">
+								<image src="../../../static/hot.png" class="product-tag-img" mode="widthFix"></image>
+								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
+							</view>
+							<view class="product-item-row-between">
+								<text class="look-num">3.2万人浏览</text>
+								<button type="default" class="collect-btn">
+									<image src="../../../static/heart-active.png" mode="widthFix"></image>
+									3386
+								</button>
+							</view>
+						</view>
+					</view>
+					<view class="item">
+						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
+						<view class="product-item-sidebar">
+							<view class="product-item-sidebar-top">
+								<image src="../../../static/newest.png" class="product-tag-img" mode="widthFix"></image>
+								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
+							</view>
+							<view class="product-item-row-between">
+								<text class="look-num">3.2万人浏览</text>
+								<button type="default" class="collect-btn">
+									<image src="../../../static/heart-active.png" mode="widthFix"></image>
+									3386
+								</button>
+							</view>
+						</view>
+					</view>
+					<view class="item">
+						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
+						<view class="product-item-sidebar">
+							<view class="product-item-sidebar-top">
+								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
+							</view>
+							<view class="product-item-row-between">
+								<text class="look-num">3.2万人浏览</text>
+								<button type="default" class="collect-btn">
+									<image src="../../../static/heart-active.png" mode="widthFix"></image>
+									3386
+								</button>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//选项卡
+				isActive: 0,
+				navList: [{
+					index: 0,
+					title: '产品',
+				}, {
+					index: 1,
+					title: "康养百科",
+				}],
+				status: 2,
+			}
+		},
+		methods: {
+			//选项卡
+			checked(index) {
+				this.isActive = index
+			},
+		}
+	}
+</script>
+
 <style scoped lang="scss">
 	@import "./search.css";
 </style>

pages/index/sub-health-pool-details/sub-health-pool-details.css

@@ -0,0 +1,225 @@
+.header-btn-box {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0 20rpx;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.gua-btn {
+	display: flex;
+	align-items: center;
+	border-radius: initial;
+}
+
+.gua-btn image {
+	width: 37rpx;
+	vertical-align: middle;
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.module-label {
+	width: calc(100% - 24rpx);
+	margin-left: 24rpx;
+	position: relative;
+	padding: 16rpx 24rpx 16rpx 26rpx;
+	box-sizing: border-box;
+	margin-bottom: 16rpx;
+}
+
+.module-label::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translate(0, -50%);
+	width: 6rpx;
+	height: 34rpx;
+	background-color: #F2501A;
+	border-radius: 4rpx;
+	color: #000000;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.recommended-food-list {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.recommended-food-item {
+	width: calc(50% - 12rpx);
+	display: flex;
+	flex-direction: column;
+	border-radius: 12rpx;
+	overflow: hidden;
+	background-color: #FFFFFF;
+	margin-bottom: 24rpx;
+}
+
+.recommended-food-img {
+	width: 100%;
+	height: 264rpx;
+}
+
+.recommended-food-bottom {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 10rpx 10rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.recommended-food-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 26rpx;
+	font-weight: 500;
+	margin-bottom: 10rpx;
+}
+
+.recommended-food-msg {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #919191;
+	font-size: 26rpx;
+}
+
+.featured-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.featured-item {
+	width: 100%;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+}
+
+.featured-item-top {
+	width: 100%;
+	padding: 26rpx 0 14rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.featured-name {
+	width: 80%;
+	color: #202020;
+	font-size: 30rpx;
+	font-weight: bold;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+}
+
+.featured-msg {
+	width: 100%;
+	font-weight: bold;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #777777;
+	font-size: 26rpx;
+	margin-bottom: 20rpx;
+}
+
+.featured-img {
+	width: 100%;
+	height: 336rpx;
+	border-radius: 16rpx;
+}
+
+.look-btn {
+	width: 104rpx;
+	height: 40rpx;
+	line-height: 40rpx;
+	background-color: #fff;
+	border-radius: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #919191;
+	font-size: 24rpx;
+	border: 1px solid #E6E6E6;
+	box-sizing: border-box;
+}
+
+.featured-tag {
+	width: 100%;
+	height: 88rpx;
+	line-height: 88rpx;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 26rpx;
+	font-weight: bold;
+}
+
+.column-box {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.column-big {
+	width: calc(50% - 8rpx);
+	height: 336rpx;
+	border-radius: 16rpx 0 0 16rpx;
+	overflow: hidden;
+}
+
+.column-big image {
+	width: 100%;
+	height: 100%;
+}
+
+.column-small {
+	width: calc(50% - 8rpx);
+	height: 336rpx;
+	border-radius: 0 16rpx 16rpx 0;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.column-small image {
+	width: 100%;
+	height: calc(50% - 8rpx);
+}

pages/index/sub-health-pool-details/sub-health-pool-details.vue

@@ -0,0 +1,130 @@
+<!-- 亚健康汇-详情 -->
+<template>
+	<view class="wrap" :style="{paddingTop: headerHeight + 'px'}">
+		<HeaderViewBar ref='HeaderViewBar' title='亚健康汇(疲乏无力详情)' titleColor='#090909' backgroundColor='#fff'
+			style="position: fixed; top: 0; z-index: 999999999;" backImg='../../../static/return.png'>
+			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px'}">
+				<button class="gua-btn">
+					<image src="../../../static/icon-2.png" mode="widthFix"></image>
+				</button>
+			</view>
+		</HeaderViewBar>
+		<view class="module-label">
+			推荐食补
+		</view>
+		<view class="recommended-food-list">
+			<view class="recommended-food-item">
+				<image src="../../../static/img-4.png" class="recommended-food-img" mode="aspectFill"></image>
+				<view class="recommended-food-bottom">
+					<view class="recommended-food-name">
+						精品小童茸，云南香格里拉松茸，肉质紧实细腻…
+					</view>
+					<view class="recommended-food-msg">
+						补血补气，养颜美容
+					</view>
+				</view>
+			</view>
+			<view class="recommended-food-item">
+				<image src="../../../static/img-4.png" class="recommended-food-img" mode="aspectFill"></image>
+				<view class="recommended-food-bottom">
+					<view class="recommended-food-name">
+						精品小童茸，云南香格里拉松茸，肉质紧实细腻…
+					</view>
+					<view class="recommended-food-msg">
+						补血补气，养颜美容
+					</view>
+				</view>
+			</view>
+			<view class="recommended-food-item">
+				<image src="../../../static/img-4.png" class="recommended-food-img" mode="aspectFill"></image>
+				<view class="recommended-food-bottom">
+					<view class="recommended-food-name">
+						精品小童茸，云南香格里拉松茸，肉质紧实细腻…
+					</view>
+					<view class="recommended-food-msg">
+						补血补气，养颜美容
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="module-label">
+			精选搭配
+		</view>
+		<view class="featured-list">
+			<view class="featured-item">
+				<view class="featured-item-top">
+					<view class="featured-name">玫瑰平胃茶</view>
+					<button type="default" class="look-btn">查看</button>
+				</view>
+				<view class="featured-msg">
+					(胃痛）理气解郁、和胃散郁
+				</view>
+				<view class="column-box">
+					<view class="column-big">
+						<image src="../../../static/bg-2.png" mode="aspectFill"></image>
+					</view>
+					<view class="column-small">
+						<image src="../../../static/bg-1.png" mode="aspectFill"></image>
+						<image src="../../../static/bg-3.png" mode="aspectFill"></image>
+					</view>
+				</view>
+				<view class="featured-tag">
+					当归9g+生地黄6g+泽泻6g+牡丹皮6g+五味子3g
+				</view>        
+			</view>
+			<view class="featured-item">
+				<view class="featured-item-top">
+					<view class="featured-name">玫瑰平胃茶</view>
+					<button type="default" class="look-btn">查看</button>
+				</view>
+				<view class="featured-msg">
+					(胃痛）理气解郁、和胃散郁
+				</view>
+				<view class="column-box">
+					<view class="column-big">
+						<image src="../../../static/img-4.png" mode="aspectFill"></image>
+					</view>
+					<view class="column-small">
+						<image src="../../../static/img-4.png" mode="aspectFill"></image>
+						<image src="../../../static/img-4.png" mode="aspectFill"></image>
+					</view>
+				</view>
+				<view class="featured-tag">
+					石斛15g
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
+	export default {
+		components: {
+			HeaderViewBar,
+		},
+		data() {
+			return {
+				headerHeight: 0,
+				headerContainerWidth: '100%',
+			}
+		},
+		onShow() {
+			setTimeout(() => {
+				const {
+					headerHeight,
+					headerContainerWidth
+				} = this.$refs['HeaderViewBar'].getHeaderStyle();
+				this.headerHeight = headerHeight;
+				this.headerContainerWidth = headerContainerWidth;
+			}, 20);
+		},
+		methods: {
+
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./sub-health-pool-details.css";
+</style>

pages/index/sub-health-pool/sub-health-pool.css

@@ -0,0 +1,61 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.swiper-box {
+	width: 100%;
+	position: relative;
+}
+
+.swiper {
+	width: 100%;
+	height: 434rpx;
+}
+
+.banner-img {
+	width: 100%;
+	height: 434rpx;
+}
+
+.module {
+	width: 100%;
+	border-radius: 32rpx 32rpx 0 0;
+	background: linear-gradient(180deg, #FFFFFF, #F2F2F2);
+	margin-top: -20rpx;
+	z-index: 10;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 20rpx 24rpx 4rpx;
+	box-sizing: border-box;
+	margin-bottom: 30rpx;
+}
+
+.top-module-item {
+	width: calc(50% - 11rpx);
+	height: fit-content;
+	display: flex;
+	flex-direction: column;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+	padding: 0 22rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.top-module-item-name {
+	width: 100%;
+	height: 82rpx;
+	display: flex;
+	align-items: center;
+	color: #202020;
+	font-size: 32rpx;
+}
+
+.top-module-item-img {
+	width: 100%;
+	height: 234rpx;
+	border-radius: 8rpx;
+}

pages/index/sub-health-pool/sub-health-pool.vue

@@ -0,0 +1,75 @@
+<!-- 亚健康汇 -->
+<template>
+	<view class="wrap">
+		<HeaderViewBar ref='HeaderViewBar' title='亚健康汇' titleColor='#090909' :opacity="scrollTop / 20" backgroundColor='#fff'
+			style="position: fixed; top: 0; z-index: 999999999;" backImg='../../../static/return.png'>
+		</HeaderViewBar>
+		<view class="swiper-box">
+			<swiper class="swiper" :circular="true" autoplay="true" interval="4000"
+				duration="500">
+				<swiper-item v-for="(item,index) in swiperList" :key="index">
+					<view class="swiper-item">
+						<image :src="item" class="banner-img" mode="aspectFill" />
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="module">
+			<view class="top-module-item">
+				<view class="top-module-item-name">疲乏无力</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+			<view class="top-module-item">
+				<view class="top-module-item-name">肌肉/关节疼痛</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+			<view class="top-module-item">
+				<view class="top-module-item-name">头昏头痛</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+			<view class="top-module-item">
+				<view class="top-module-item-name">心悸胸闷</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
+	export default {
+		components: {
+			HeaderViewBar,
+		},
+		data() {
+			return {
+				headerHeight: 0,
+				scrollTop: 0,
+				//轮播
+				swiperList: [
+					'../../../static/banner-1.png',
+					'../../../static/banner-1.png',
+					'../../../static/banner-1.png'
+				],	
+				
+			}
+		},
+		onShow() {
+			setTimeout(() => {
+				const {
+					headerHeight,
+				} = this.$refs['HeaderViewBar'].getHeaderStyle();
+				this.headerHeight = headerHeight;
+			}, 20);
+		},
+		methods: { 
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./sub-health-pool.css";
+</style>

pages/my-order/order-details/order-details.css

@@ -118,10 +118,11 @@
 .order-msg-row {
 	width: 100%;
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	margin-bottom: 22rpx;
 	color: #202020;
 	font-size: 26rpx;
+	line-height: 38rpx;
 }
 
 .order-msg-row:last-child {
@@ -132,6 +133,11 @@
 	width: 22%;
 }
 
+.order-msg-msg {
+	flex: 1;
+	display: block;
+}
+
 .footer {
 	width: 100%;
 	height: 140rpx;
@@ -246,8 +252,8 @@
 .status-msg {
 	color: #FFBD0B;
 	font-size: 30rpx;
-}
-
+}
+
 .item {
 	width: 100%;
 	display: flex;
@@ -338,3 +344,185 @@
 .margin:last-child {
 	margin: 0;
 }
+
+.mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.38);
+	z-index: 999999999;
+}
+
+.window {
+	position: fixed;
+	width: 100%;
+	max-height: 1200rpx;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	background-color: #fff;
+	z-index: 9999999999;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border-radius: 40rpx 40rpx 0 0;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.window-bottom {
+	width: 100%;
+	height: 180rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 8rpx;
+	box-sizing: border-box;
+}
+
+.window-bottom button {
+	color: #FFFFFF;
+	font-size: 26rpx;
+	width: 100%;
+	height: 80rpx;
+	line-height: 80rpx;
+	background-color: #F2501A;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.window-bottom button:first-child {
+	border-radius: 100rpx 0 0 100rpx;
+	background-color: #F28A1A;
+}
+
+.window-bottom button:last-child {
+	border-radius: 0 100rpx 100rpx 0;
+}
+
+.window-label {
+	width: 100%;
+	height: 115rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 32rpx;
+	color: #202020;
+}
+
+.window-select-box {
+	width: 100%;
+	/* 	height: calc(100% - 295rpx); */
+	box-sizing: border-box;
+}
+
+.prompt-msg {
+	width: 100%;
+	background-color: #F6F6F6;
+	color: #202020;
+	font-size: 22rpx;
+	padding: 0 6rpx;
+	box-sizing: border-box;
+	min-height: 68rpx;
+	display: flex;
+	align-items: center;
+}
+
+.radio-wrap {
+	width: 100%;
+}
+
+.radio-row {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 60rpx;
+}
+
+.radio-row:last-child {
+	margin-bottom: 0;
+}
+
+.leftsidebar {
+	display: flex;
+	align-items: center;
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.circle-img {
+	width: 40rpx;
+	height: 40rpx;
+}
+
+.choose-title {
+	width: 100%;
+	color: #777777;
+	font-size: 26rpx;
+	padding: 36rpx 0 50rpx;
+}
+
+.real-payment-pack-up {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	color: #202020;
+	font-size: 24rpx;
+	padding-bottom: 36rpx;
+}
+
+.sanjiao {
+	width: 20rpx;
+	height: 12rpx;
+	margin-left: 4rpx;
+}
+
+.red {
+	color: #F2501A;
+}
+
+.msg-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin: 10rpx 0 20rpx;
+}
+
+.msg-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 35rpx;
+}
+
+.msg-row-between:last-child {
+	margin-bottom: 0;
+}
+
+.msg-row-left {
+	display: flex;
+	align-items: center;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.msg-row-left text {
+	width: 140rpx;
+	display: block;
+	color: #202020;
+}
+
+.msg-row-right {
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.msg-row-right.orange {
+	color: #F2501A;
+}

pages/my-order/order-details/order-details.vue

@@ -26,74 +26,96 @@
 				</view>
 			</view>
 
-			<view class="padding-box">
-				
-				<view class="item">
-					<view class="item-top">
-						<text>限源预售</text>
+			<view class="padding-box">
+
+				<view class="item">
+					<view class="item-top">
+						<text>限源预售</text>
+					</view>
+					<view class="item-content">
+						<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
+						<view class="item-content-sidebar">
+							<view class="product-item-row-between">
+								<view class="product-item-name">
+									冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
+								</view>
+								<view class="row-end">
+									<text class="product-item-price">￥394.00</text>
+									<text class="product-item-num">x <text>1</text></text>
+								</view>
+							</view>
+							<view class="product-item-tag">
+								<text>一盒15g*20袋</text>
+							</view>
+							<view class="product-item-msg">
+								7天无理由退换货
+							</view>
+						</view>
+					</view>
+
+					<view class="item-bottom">
+						<!-- 待发货显示 -->
+						<button type="default">退换</button>
+
+						<!-- 待收货显示 -->
+						<!-- <button type="default" class="border-gray">退款</button> -->
+
+						<!-- 待评价显示 -->
+						<!-- <button type="default" class="border-red">退款</button> -->
+
+						<!-- 已完成 -->
+						<!-- <button type="default" class="border-gray">删除订单</button> -->
 					</view>
-					<view class="item-content">
-						<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
-						<view class="item-content-sidebar">
-							<view class="product-item-row-between">
-								<view class="product-item-name">
-									冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
-								</view>
-								<view class="row-end">
-									<text class="product-item-price">￥394.00</text>
-									<text class="product-item-num">x <text>1</text></text>
-								</view>
+					<view class="msg-box">
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>商品总价</text>商品总价
 							</view>
-							<view class="product-item-tag">
-								<text>一盒15g*20袋</text>
+							<text class="msg-row-right">￥394.00</text>
+						</view>
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>运费</text>运费(快递)
 							</view>
-							<view class="product-item-msg">
-								7天无理由退换货
+							<text class="msg-row-right">￥394.00</text>
+						</view>
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>积分</text>积分
 							</view>
+							<text class="msg-row-right orange">-￥2.00</text>
 						</view>
 					</view>
-					
-					<view class="item-bottom">
-						<button type="default">加入购物车</button>
-						<button type="default">查看物流</button>
-						
-						<!-- 待付款显示 -->
-						<!-- <button type="default" class="border-gray">取消订单</button>
-						<button type="default" class="border-gray">取消订单</button>
-						<button type="default" class="border-red">付款</button> -->
-				
-						<!-- 待发货显示 -->
-						<!-- <button type="default">申请开票</button>
-						<button type="default">修改地址</button> -->
-				
-						<!-- 待收货显示 -->
-						<!-- <button type="default" class="border-gray">退换</button> -->
-						
-						<!-- 待评价显示 -->
-						<!-- <button type="default" class="border-red">评价</button> -->
-				
-						<!-- 已完成 -->
-						<!-- <button type="default" class="border-gray">删除订单</button> -->
+					<view class="real-payment-pack-up">
+						实付款<text class="red">￥392.00</text>
+						<image src="../../../static/sanjiao-bottomgray.png" class="sanjiao" mode=""></image>
 					</view>
-				</view>
-				
-				
+					
+				</view>
+
+
 				<view class="order-msg-box">
 					<view class="order-msg-label">
 						订单信息
+					</view>
+					<view class="order-msg-row">
+						<view class="order-msg-name">
+							收货信息
+						</view>
+						<text class="order-msg-msg">张三,123****4567山东省 临沂市 兰山区 柳青街道 昆仑花园22号楼二单元404</text>
 					</view>
 					<view class="order-msg-row">
 						<view class="order-msg-name">
 							订单编号
 						</view>
 						<text class="order-msg-msg">2085570353833314460</text>
-					</view> 
+					</view>
 					<view class="order-msg-row">
 						<view class="order-msg-name">
 							交易号
-						</view> 
+						</view>
 						<text class="order-msg-msg">2021110822001188735722597689</text>
-					</view> 
+					</view>
 					<view class="order-msg-row">
 						<view class="order-msg-name">
 							创建时间
@@ -105,6 +127,18 @@
 							付款时间
 						</view>
 						<text class="order-msg-msg">2021-11-08 16:20:48</text>
+					</view>
+					<view class="order-msg-row">
+						<view class="order-msg-name">
+							发货时间
+						</view>
+						<text class="order-msg-msg">2021-11-08 16:20:48</text>
+					</view>
+					<view class="order-msg-row">
+						<view class="order-msg-name">
+							成交时间
+						</view>
+						<text class="order-msg-msg">2021-11-08 16:20:48</text>
 					</view>
 				</view>
 			</view>
@@ -116,6 +150,40 @@
 			<button type="default">修改地址</button>
 		</view>
 
+		<!-- 订单取消-弹窗 -->
+		<view v-show="isShowRefundReason">
+			<view class="mask" @tap="closeRefundReason"></view>
+			<scroll-view scroll-y="true" class="window">
+				<view class="window-label">
+					订单取消
+				</view>
+				<view class="prompt-msg">
+					取消后无法回复，优惠券、红包、积分、可退回，有效期内使用
+				</view>
+				<view class="choose-title">
+					请选择取消订单原因
+				</view>
+				<view class="window-select-box">
+					<view class="radio-wrap">
+						<view class="radio-row" v-for="(item, index) in reasonList" :key="index"
+							@click="selectItem(item.isActive)">
+							<view class="leftsidebar">
+								<text>{{item.name}}</text>
+							</view>
+							<image class="circle-img"
+								:src="isActive == item.isActive ? '../../../static/circle-active.png' : '../../../static/circle.png'"
+								mode="" />
+						</view>
+					</view>
+				</view>
+				<view class="window-bottom">
+					<button type="default">暂不取消</button>
+					<button type="default">确定</button>
+				</view>
+			</scroll-view>
+		</view>
+		<!-- 订单取消-弹窗  -->
+
 	</view>
 </template>
 
@@ -129,6 +197,31 @@
 			return {
 				headerHeight: 0,
 				scrollTop: 0,
+				//订单取消弹窗
+				isShowRefundReason: false,
+
+				reasonList: [{
+						isActive: 1,
+						name: '价格有点贵',
+					},
+					{
+						isActive: 2,
+						name: '规格/款式/数量拍错',
+					}, {
+						isActive: 3,
+						name: '收货地址拍错',
+					}, {
+						isActive: 4,
+						name: '商家不支持花呗',
+					}, {
+						isActive: 5,
+						name: '暂时不需要了',
+					}, {
+						isActive: 6,
+						name: '其他',
+					}
+				],
+				isActive: 1, //单选 初始化第一个高亮 
 			}
 		},
 		onShow() {
@@ -142,7 +235,21 @@
 				uni.navigateBack({
 					delta: 1,
 				})
-			}
+			},
+
+			/**
+			 * 退款原因-弹窗
+			 */
+			showRefundReason() {
+				this.isShowRefundReason = true;
+			},
+			closeRefundReason() {
+				this.isShowRefundReason = false;
+			},
+			//单选-选择退款原因
+			selectItem: function(index) {
+				this.isActive = index;
+			},
 		},
 		onPageScroll(e) {
 			this.scrollTop = e.scrollTop;

pages/my-order/refund-after-sale/refund-after-sale.vue

@@ -1,101 +1,109 @@
-<!-- 退款售后 -->
-<template>
-	<view class="wrap">
-		
-		<view class="list">
-			<view class="item">
-				<view class="item-top">
-					<text>限源预售</text>
-					<text>退货</text>
-				</view>
-				<view class="item-content">
-					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
-					<view class="item-content-sidebar">
-						<view class="product-item-row-between">
-							<view class="product-item-name">
-								冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
-							</view>
-							<view class="row-end">
-								<text class="product-item-price">￥394.00</text>
-								<text class="product-item-num">x <text>1</text></text>
-							</view>
-						</view>
-						<view class="product-item-tag">
-							<text>一盒15g*20袋</text>
-							<text class="status-msg">退款关闭</text>
-						</view>
-						<view class="product-item-msg">
-							7天无理由退换货
-						</view>
-					</view>
-				</view>
-				<view class="refund-box">
-					退款关闭 退款已关闭
-				</view>
-				<view class="item-bottom">
-					<button type="default">删除记录</button>
-					<button type="default" class="border-red">查看详情</button>		
-				</view>
-			</view>
-			<view class="item">
-				<view class="item-top">
-					<text>限源预售</text>
-					<text>退款</text>
-				</view>
-				<view class="item-content">
-					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
-					<view class="item-content-sidebar">
-						<view class="product-item-row-between">
-							<view class="product-item-name">
-								冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
-							</view>
-							<view class="row-end">
-								<text class="product-item-price">￥394.00</text>
-								<text class="product-item-num">x <text>1</text></text>
-							</view>
-						</view>
-						<view class="product-item-tag">
-							<text>一盒15g*20袋</text>
-							<text class="status-msg">退款关闭</text>
-						</view>
-						<view class="product-item-msg">
-							7天无理由退换货
-						</view>
-					</view>
-				</view>
-				<view class="refund-box">
-					退款关闭 退款已关闭
-				</view>
-				<view class="item-bottom">
-					<button type="default">删除记录</button>
-					<button type="default" class="border-red">查看详情</button>		
-				</view>
-			</view>
-			
-			<!-- 无内容时显示 -->
-			<!-- <view class="normal-box">
-				<image src="../../../static/normal-3.png" mode="widthFix"></image>
-				<text>暂无订单</text>
-			</view> -->
-			
-		</view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
+<!-- 退款售后 -->
+<template>
+	<view class="wrap">
+
+		<view class="list">
+			<view class="item">
+				<view class="item-top">
+					<text>限源预售</text>
+					<text>退货</text>
+				</view>
+				<view class="item-content">
+					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
+					<view class="item-content-sidebar">
+						<view class="product-item-row-between">
+							<view class="product-item-name">
+								冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
+							</view>
+							<view class="row-end">
+								<text class="product-item-price">￥394.00</text>
+								<text class="product-item-num">x <text>1</text></text>
+							</view>
+						</view>
+						<view class="product-item-tag">
+							<text>一盒15g*20袋</text>
+							<text class="status-msg">退款关闭</text>
+						</view>
+						<view class="product-item-msg">
+							7天无理由退换货
+						</view>
+					</view>
+				</view>
+				<view class="refund-box">
+					退款关闭 退款已关闭
+				</view>
+				<view class="item-bottom">
+					<button type="default" @click="del">删除记录</button>
+					<button type="default" class="border-red">查看详情</button>
+				</view>
+			</view>
+			<view class="item">
+				<view class="item-top">
+					<text>限源预售</text>
+					<text>退款</text>
+				</view>
+				<view class="item-content">
+					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
+					<view class="item-content-sidebar">
+						<view class="product-item-row-between">
+							<view class="product-item-name">
+								冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
+							</view>
+							<view class="row-end">
+								<text class="product-item-price">￥394.00</text>
+								<text class="product-item-num">x <text>1</text></text>
+							</view>
+						</view>
+						<view class="product-item-tag">
+							<text>一盒15g*20袋</text>
+							<text class="status-msg">退款关闭</text>
+						</view>
+						<view class="product-item-msg">
+							7天无理由退换货
+						</view>
+					</view>
+				</view>
+				<view class="refund-box">
+					退款关闭 退款已关闭
+				</view>
+				<view class="item-bottom">
+					<button type="default" @click="del">删除记录</button>
+					<button type="default" class="border-red">查看详情</button>
+				</view>
+			</view>
+
+			<!-- 无内容时显示 -->
+			<!-- <view class="normal-box">
+				<image src="../../../static/normal-3.png" mode="widthFix"></image>
+				<text>暂无订单</text>
+			</view> -->
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
 		methods: {
-			
-		}
-	}
-</script>
-
+			//确认删除弹窗
+			del() {
+				uni.showModal({
+					title: '提示',
+					content: '确定要删除记录吗？',
+					confirmColor: '#F2501A',
+					cancelColor: '#202020',
+				})
+			}
+		}
+	}
+</script>
+
 <style scoped lang="scss">
 	@import "./refund-after-sale.css";
 </style>

pages/my-order/refund-details/refund-details.css

@@ -0,0 +1,520 @@
+.bg {
+	width: 100%;
+	height: 360rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: linear-gradient(90deg, #F58711, #E63D23);
+}
+
+.container-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 30rpx 0 140rpx;
+	box-sizing: border-box;
+	position: relative;
+	top: calc(98rpx + var(--status-bar-height))
+}
+
+.refund-msg-box {
+	width: calc(100% - 60rpx);
+	height: 200rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	border-radius: 16rpx;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+	margin-bottom: 45rpx;
+}
+
+.refund-msg-title {
+	color: #202020;
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-bottom: 20rpx;
+}
+
+.refund-msg-time {
+	color: #A7A7A7;
+	font-size: 28rpx;
+}
+
+.refund-msg {
+	width: 100%;
+	padding: 16rpx 24rpx;
+	box-sizing: border-box;
+	color: #202020;
+	font-size: 32rpx;
+	font-weight: bold;
+	background-color: #fff;
+}
+
+.edit-btn {
+	width: 168rpx;
+	height: 72rpx;
+	line-height: 72rpx;
+	border: 1px solid #9D9D9D;
+	background-color: #fff;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #A7A7A7;
+	font-size: 28rpx;
+	margin-left: 30rpx;
+}
+
+.padding-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 0;
+}
+
+.order-msg-box {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 18rpx 24rpx 36rpx;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
+}
+
+.order-msg-label {
+	width: 100%;
+	color: #111111;
+	font-size: 30rpx;
+	font-weight: bold;
+	margin-bottom: 20rpx;
+}
+
+.order-msg-row {
+	width: 100%;
+	display: flex;
+	align-items: flex-start;
+	margin-bottom: 22rpx;
+	color: #202020;
+	font-size: 26rpx;
+	line-height: 38rpx;
+}
+
+.order-msg-row:last-child {
+	margin-bottom: 0;
+}
+
+.order-msg-name {
+	width: 22%;
+}
+
+.order-msg-msg {
+	flex: 1;
+	display: block;
+}
+
+.footer {
+	width: 100%;
+	height: 140rpx;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 999;
+	background-color: #fff;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	border-top: 1px solid #DCDCDC;
+}
+
+.footer button {
+	min-width: 150rpx;
+	height: 72rpx;
+	line-height: 72rpx;
+	border-radius: 100rpx;
+	background-color: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	border: 1px solid #9D9D9D;
+	color: #777777;
+	font-size: 28rpx;
+	margin-right: 20rpx;
+}
+
+.footer button:last-child {
+	margin-right: 0;
+}
+
+.border-red {
+	border: 1px solid #E63D23;
+	color: #F2501A;
+}
+
+.allWidth {
+	width: 100% !important;
+	background-color: #F2501A !important;
+	color: #fff !important;
+	border: none !important;
+	font-size: 34rpx !important;
+}
+
+.item-content {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
+
+.product-img {
+	width: 186rpx;
+	height: 186rpx;
+	border-radius: 12rpx;
+	margin-right: 28rpx;
+}
+
+.item-content-sidebar {
+	flex: 1;
+	height: 180rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 25rpx;
+}
+
+.product-item-name {
+	width: 71%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.row-end {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.product-item-price {
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.product-item-num {
+	color: #A7A7A7;
+	font-size: 20rpx;
+}
+
+.product-item-num text {
+	font-size: 24rpx;
+}
+
+.product-item-tag {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.product-item-msg {
+	width: 100%;
+	color: #F2501A;
+	font-size: 20rpx;
+}
+
+.status-msg {
+	color: #FFBD0B;
+	font-size: 30rpx;
+}
+
+.item {
+	width: calc(100% - 60rpx);
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	background-color: #fff;
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+}
+
+.item-top {
+	width: 100%;
+	height: 90rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.item-top text:first-child {
+	color: #111111;
+	font-size: 30rpx;
+	font-weight: bold;
+}
+
+
+.item-bottom {
+	width: 100%;
+	height: 120rpx;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-top: 20rpx;
+}
+
+.item-bottom button {
+	width: 168rpx;
+	height: 72rpx;
+	line-height: 72rpx;
+	border-radius: 100rpx;
+	border: 1px solid #9D9D9D;
+	background-color: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	color: #202020;
+	font-size: 24rpx;
+	margin-right: 14rpx;
+}
+
+.item-bottom button:last-child {
+	margin-right: 0;
+}
+
+.border-red {
+	border: 1px solid #E63D23 !important;
+	color: #F2501A !important;
+}
+
+.border-gray {
+	border: 1px solid #9D9D9D !important;
+	color: #777777 !important;
+}
+
+.price-row {
+	width: 100%;
+	text-align: right;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.big-font {
+	font-size: 38rpx;
+	font-weight: bold;
+}
+
+.big-font-black {
+	font-size: 38rpx;
+	color: #202020;
+	font-weight: bold;
+}
+
+.margin {
+	margin-right: 10rpx;
+}
+
+.margin:last-child {
+	margin: 0;
+}
+
+.mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.38);
+	z-index: 999999999;
+}
+
+.window {
+	position: fixed;
+	width: 100%;
+	max-height: 1200rpx;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	background-color: #fff;
+	z-index: 9999999999;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border-radius: 40rpx 40rpx 0 0;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.window-bottom {
+	width: 100%;
+	height: 180rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 8rpx;
+	box-sizing: border-box;
+}
+
+.window-bottom button {
+	color: #FFFFFF;
+	font-size: 26rpx;
+	width: 100%;
+	height: 80rpx;
+	line-height: 80rpx;
+	background-color: #F2501A;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.window-bottom button:first-child {
+	border-radius: 100rpx 0 0 100rpx;
+	background-color: #F28A1A;
+}
+
+.window-bottom button:last-child {
+	border-radius: 0 100rpx 100rpx 0;
+}
+
+.window-label {
+	width: 100%;
+	height: 115rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 32rpx;
+	color: #202020;
+}
+
+.window-select-box {
+	width: 100%;
+	/* 	height: calc(100% - 295rpx); */
+	box-sizing: border-box;
+}
+
+.prompt-msg {
+	width: 100%;
+	background-color: #F6F6F6;
+	color: #202020;
+	font-size: 22rpx;
+	padding: 0 6rpx;
+	box-sizing: border-box;
+	min-height: 68rpx;
+	display: flex;
+	align-items: center;
+}
+
+.radio-wrap {
+	width: 100%;
+}
+
+.radio-row {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 60rpx;
+}
+
+.radio-row:last-child {
+	margin-bottom: 0;
+}
+
+.leftsidebar {
+	display: flex;
+	align-items: center;
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.circle-img {
+	width: 40rpx;
+	height: 40rpx;
+}
+
+.choose-title {
+	width: 100%;
+	color: #777777;
+	font-size: 26rpx;
+	padding: 36rpx 0 50rpx;
+}
+
+.real-payment-pack-up {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	color: #202020;
+	font-size: 24rpx;
+	padding-bottom: 36rpx;
+}
+
+.sanjiao {
+	width: 20rpx;
+	height: 12rpx;
+	margin-left: 4rpx;
+}
+
+.red {
+	color: #F2501A;
+}
+
+.msg-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin: 0 0 50rpx;
+}
+
+.msg-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
+
+.msg-row-between:last-child {
+	margin-bottom: 0;
+}
+
+.msg-row-left {
+	display: flex;
+	align-items: center;
+	color: #212121;
+	font-size: 28rpx;
+}
+
+.msg-row-left text {
+	width: 200rpx;
+	display: block;
+	color: #B8B4B4;
+}
+
+.msg-row-right {
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.msg-row-right.orange {
+	color: #F2501A;
+}

pages/my-order/refund-details/refund-details.vue

@@ -0,0 +1,125 @@
+<!-- 退款详情 -->
+<template>
+	<view class="wrap">
+	
+		<HeaderViewBar ref='HeaderViewBar' title='退款详情' :opacity="scrollTop / 100"
+			backgroundColor='linear-gradient(90deg, #F58711, #E63D23)'
+			style="position: fixed; top: 0; z-index: 999999999;" @tap="back">
+		</HeaderViewBar>
+	
+		<view class="bg"></view>
+	
+		<view class="container-wrap">
+	
+			<view class="refund-msg-box">
+				<view class="refund-msg-title">退款失败</view>
+				<view class="refund-msg-time">2021-11-1 20:40</view>
+			</view>
+			
+			<view class="refund-msg">
+				因您撤销退款申请，退款关闭，交易将正常进行。请关注交易超时
+			</view>
+			
+			<view class="padding-box">
+	
+				<view class="item">
+					<view class="item-top">
+						<text>退款信息</text>
+					</view>
+					<view class="item-content">
+						<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
+						<view class="item-content-sidebar">
+							<view class="product-item-row-between">
+								<view class="product-item-name">
+									冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
+								</view>
+								<view class="row-end">
+									<text class="product-item-price">￥394.00</text>
+									<text class="product-item-num">x <text>1</text></text>
+								</view>
+							</view>
+							<view class="product-item-tag">
+								<text>一盒15g*20袋</text>
+							</view>
+						</view>
+					</view>
+					<view class="msg-box">
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>退款原因</text>订单信息拍错
+							</view>
+						</view>
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>退款金额</text>￥980.00
+							</view>
+						</view>
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>申请件数</text>2019-11-29  09:47
+							</view>
+						</view>
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>申请时间</text>2019-11-29  09:47
+							</view>
+						</view>
+						<view class="msg-row-between">
+							<view class="msg-row-left">
+								<text>退款编号</text>43898259513465
+							</view>
+						</view>
+					</view>
+					
+				</view>
+	 
+				 
+			</view>
+	
+		</view>
+	
+		<view class="footer">
+			<button type="default" class="border-red">取消退款</button>
+			<button type="default" class="border-red">申请退款</button>
+			<!-- <button type="default" class="allWidth">提交</button> -->
+		</view>
+	
+	
+	</view>
+</template>
+
+<script>
+	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
+	export default {
+		components: {
+			HeaderViewBar,
+		},
+		data() {
+			return {
+				headerHeight: 0,
+				scrollTop: 0,
+			}
+		},
+		onShow() {
+			setTimeout(() => {
+				this.headerHeight = this.$refs['HeaderViewBar'].getHeaderStyle().headerHeight;
+			}, 20);
+		},
+		methods: {
+			//返回上一页
+			back() {
+				uni.navigateBack({
+					delta: 1,
+				})
+			},
+	
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./refund-details.css";
+</style>

pages/my/sign-in-award/sign-in-award.css

@@ -335,6 +335,127 @@
 .repair {
 	width: 70rpx !important;
 	position: absolute;
-	left: -20rpx;
+	left: -20rpx;
 	top: -16rpx;
+}
+
+.mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.38);
+	z-index: 999999998;
+}
+
+.window-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 999999999998;
+}
+
+.window {
+	width: 556rpx;
+	height: 560rpx;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.window-bg {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 99;
+}
+
+.window-container {
+	width: 100%;
+	height: 60%;
+	position: absolute;
+	left: 0;
+	top: 40%;
+	z-index: 999;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.close-btn {
+	width: 100%;
+	background-color: initial;
+	border-radius: initial;
+	margin-top: 60rpx;
+}
+
+.close-btn image {
+	width: 68rpx;
+}
+
+.window-icon {
+	width: 140rpx;
+	margin-bottom: 5rpx;
+}
+
+.window-msg {
+	font-size: 26rpx;
+	color: #31333A;
+}
+
+.window-btn {
+	width: 264rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	color: #FFFFFF;
+	font-size: 32rpx;
+	background-color: #F2501A;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 18rpx;
+}
+
+.sign-in-row {
+	width: 100%;
+	text-align: center;
+	font-size: 26rpx;
+	color: #8C8C8C;
+	margin-bottom: 40rpx;
+}
+
+.sign-in-row text {
+	font-weight: bold;
+	margin: 0 10rpx;
+	color: #F2501A;
+}
+
+.window-title {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #2A2A2A;
+	font-size: 36rpx;
+	margin: 45rpx 0 15rpx;
+}
+
+.window-title text {
+	font-size: 48rpx;
+	color: #F2501A;
+	margin: 0 10rpx;
+}
+
+.window-title image {
+	width: 36rpx;
+	margin: 0 38rpx;
 }

pages/my/sign-in-award/sign-in-award.vue

@@ -4,7 +4,7 @@
 
 		<HeaderViewBar ref='HeaderViewBar' title='签到奖励' :opacity="scrollTop / 100"
 			backgroundColor='linear-gradient(90deg, #FF9C6C, #FF6921)'
-			style="position: fixed; top: 0; z-index: 999999999;" @tap="back">
+			style="position: fixed; top: 0; z-index: 99999999;" @tap="back">
 		</HeaderViewBar>
 
 		<view class="bg"></view>
@@ -94,7 +94,7 @@
 				</view>
 
 				<view class="btn-box">
-					<button type="default">立即签到</button>
+					<button type="default" @tap="showIntegral">立即签到</button>
 					<!-- 已签到显示 -->
 					<!-- <button type="default" class="gray-bg">立即签到</button> -->
 				</view>
@@ -109,7 +109,7 @@
 					<image src="../../../static/icon-11.png" mode="widthFix"></image>
 					<text>补签卡1张</text>
 				</view>
-				<button type="default" class="small-btn">去补签</button>
+				<button type="default" class="small-btn" @tap="showSupplementaryCard">去补签</button>
 			</view>
 
 			<view class="sign-in-rules">
@@ -124,6 +124,50 @@
 
 		</view>
 
+		<!-- 补签卡弹窗 -->
+		<view v-show="isShowSupplementaryCard">
+			<view class="mask" @tap="closeSupplementaryCard"></view>
+			<view class="window-wrap">
+				<view class="window">
+					<image src="../../../static/bg-16.png" class="window-bg" mode=""></image>
+					<view class="window-container">
+						<image src="../../../static/icon-11.png" class="window-icon" mode="widthFix"></image>
+						<text class="window-msg">恭喜您连续签到七天</text>
+						<text class="window-msg">获得1张补签卡</text>
+						<button type="default" class="window-btn">签到成功</button>
+					</view>
+				</view>
+				<button type="default" class="close-btn">
+					<image src="../../../static/close-icon.png" mode="widthFix"></image>
+				</button>
+			</view>
+
+		</view>
+		<!-- 补签卡弹窗  -->
+
+		<!-- 积分弹窗 -->
+		<view v-show="isShowIntegral">
+			<view class="mask" @tap="closeIntegral"></view>
+			<view class="window-wrap">
+				<view class="window">
+					<image src="../../../static/bg-16.png" class="window-bg" mode=""></image>
+					<view class="window-container">
+						<view class="window-title">
+							<image src="../../../static/left-icon.png" mode="widthFix"></image>
+							获得<text>1</text>积分
+							<image src="../../../static/right-icon.png" mode="widthFix"></image>
+						</view>
+						<text class="sign-in-row">明天签到可得<text>2</text>积分</text>
+						<button type="default" class="window-btn">知道了</button>
+					</view>
+				</view>
+				<button type="default" class="close-btn">
+					<image src="../../../static/close-icon.png" mode="widthFix"></image>
+				</button>
+			</view>
+		</view>
+		<!-- 积分弹窗  -->
+
 	</view>
 </template>
 
@@ -137,6 +181,10 @@
 			return {
 				headerHeight: 0,
 				scrollTop: 0,
+				//补签卡弹窗
+				isShowSupplementaryCard: false,
+				//积分弹窗
+				isShowIntegral: false,
 			}
 		},
 		onShow() {
@@ -150,7 +198,22 @@
 				uni.navigateBack({
 					delta: 1,
 				})
-			}
+			},
+			//补签卡弹窗
+			showSupplementaryCard() {
+				this.isShowSupplementaryCard = true;
+			},
+			closeSupplementaryCard() {
+				this.isShowSupplementaryCard = false;
+			},
+			
+			//积分弹窗
+			showIntegral() {
+				this.isShowIntegral = true;
+			},
+			closeIntegral() {
+				this.isShowIntegral = false;
+			},
 		},
 		onPageScroll(e) {
 			this.scrollTop = e.scrollTop;