提交修改

components/addSuccess.vue

@@ -0,0 +1,152 @@
+<template>
+	<view class="uni-popup-message">
+		<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+[type]">
+			<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * PopUp 弹出层-消息提示
+	 * @description 弹出层-消息提示
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} message 消息提示文字
+	 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
+	 */
+
+	export default {
+		name: 'UniPopupMessage',
+		props: {
+			/**
+			 * 主题 success/warning/info/error	  默认 success
+			 */
+			type: {
+				type: String,
+				default: 'success'
+			},
+			/**
+			 * 消息文字
+			 */
+			message: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 显示时间，设置为 0 则不会自动关闭
+			 */
+			duration: {
+				type: Number,
+				default: 3000
+			}
+		},
+		inject: ['popup'],
+		data() {
+			return {}
+		},
+		created() {
+			this.popup.childrenMsg = this
+		},
+		methods: {
+			open() {
+				if (this.duration === 0) return
+				clearTimeout(this.popuptimer)
+				this.popuptimer = setTimeout(() => {
+					this.popup.close()
+				}, this.duration)
+			},
+			close() {
+				clearTimeout(this.popuptimer)
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.uni-popup-message {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.uni-popup-message__box {
+		background-color: #e1f3d8;
+		// padding: 10px 15px;
+		border-color: #eee;
+		border-style: solid;
+		border-width: 1px;
+		flex: 1;
+	}
+
+	@media screen and (min-width: 500px) {
+		.fixforpc-width {
+			margin-top: 20px;
+			border-radius: 4px;
+			flex: none;
+			min-width: 380px;
+			/* #ifndef APP-NVUE */
+			max-width: 50%;
+			/* #endif */
+			/* #ifdef APP-NVUE */
+			max-width: 500px;
+			/* #endif */
+		}
+	}
+
+	.uni-popup-message-text {
+		font-size: 14px;
+		padding: 0;
+	}
+
+	.uni-popup__success {
+		background-color: #e1f3d8;
+	}
+
+	.uni-popup__success-text {
+		color: #67C23A;
+	}
+
+	.uni-popup__warn {
+		background-color: #faecd8;
+	}
+
+	.uni-popup__warn-text {
+		color: #E6A23C;
+	}
+
+	.uni-popup__error {
+		background-color: #fde2e2;
+	}
+
+	.uni-popup__error-text {
+		color: #F56C6C;
+	}
+
+	.uni-popup__info {
+		background-color: #F2F6FC;
+	}
+
+	.uni-popup__info-text {
+		color: #909399;
+	}
+	
+	/*
+	*
+	*我自定义的信息
+	*/
+	.uni-popup__myMessge {
+		background-color: #0079FE;
+	}
+	
+	.uni-popup__myMessge-text {
+		color: #FFFFFF;
+		font-size: 12px;
+	}
+</style>

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

@@ -0,0 +1,153 @@
+<template>
+	<view class="header-view" :style="size">
+		<view class="head-bg" :style="{background: backgroundColor, opacity: opacity}">
+			<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>
+			<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>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'HeaderViewBar',
+		props: {
+			// 是否隐藏返回按钮
+			hideBack: {
+				type: Boolean,
+				default: false,
+			},
+			// 标题
+			title: {
+				type: String,
+				default: '',
+			},
+			// 标题颜色
+			titleColor: {
+				type: String,
+				default: '#FFFFFF',
+			},
+			// 标题透明度
+			titleOpacity: {
+				type: Number,
+				default: 1,
+			},
+			// 背景透明度
+			opacity: {
+				type: Number,
+				default: 1,
+			},
+			// 背景颜色
+			backgroundColor: {
+				type: String,
+				default: '',
+			},
+			// 背景图片
+			backgroundImg: {
+				type: String,
+				default: '.',
+			},
+		},
+		data() {
+			return {
+				headerContainerWidth: '100%',
+				size: '',
+				headerHeight: 0,
+				headerContentHeight: 0,
+			};
+		},
+		created() {
+			// #ifdef MP
+			let {height, top, left} = uni.getMenuButtonBoundingClientRect();
+			this.size = `padding-top: ${top}px; min-height: ${height}px; height: max-content`;
+			this.headerContainerWidth = left - 7;
+			this.headerHeight = top + height + 10;
+			// #endif
+			// #ifdef APP || H5
+			let top = 0, height = 32;
+			const {statusBarHeight} = uni.getSystemInfoSync();
+			top += statusBarHeight;
+			this.size = `padding-top: ${top + 10}px; min-height: ${height}px; height: max-content`;
+			this.headerHeight = top + height + 20;
+			this.headerContainerWidth = uni.getSystemInfoSync().windowWidth;
+			// #endif
+			this.headerContentHeight = height;
+		},
+		methods: {
+			//返回上一页
+			back() {
+				uni.navigateBack({
+					delta: 1,
+				});
+			},
+			getHeaderStyle() {
+				return {
+					headerHeight: this.headerHeight,
+					headerContentHeight: this.headerContentHeight,
+					headerContainerWidth: this.headerContainerWidth,
+				};
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.header-view{
+		width: 100vw;
+		padding-bottom: 10px;
+		position: relative;
+		z-index: 2099999999;
+		display: flex;
+		align-items: center;
+	}
+	.header-view .head-bg{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 100;
+	}
+	.header-view .head-bg>image{
+		width: 100%;
+		height: 100%;
+	}
+	.header-view .header-container {
+		width: 100%;
+		height: max-content;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		position: relative;
+		z-index: 101;
+	}
+	.back{
+		width: 9px;
+		height: 20px;
+		margin: 0 13px;
+		position: absolute;
+		top: 8px;
+		left: 0;
+		z-index: 2099999999; 
+	}
+	.header-view .header-container .header-title{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 36rpx;
+		font-weight: bold;
+	}
+	.header-content{
+		flex: 1;
+		height: 100%;
+	}
+</style>

components/header-view/header-view.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="header-view" :style="size">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'HeaderView',
+		data() {
+			return {
+				size: "",
+			};
+		},
+		created() {
+			
+			// #ifdef MP
+			let {height, top, left} = uni.getMenuButtonBoundingClientRect();
+			this.size = `padding-top: ${top}px; min-height: ${height}px; height: max-content`;
+			// #endif
+			// #ifdef APP || H5
+			let top = 0, height = 32;
+			const {statusBarHeight} = uni.getSystemInfoSync();
+			top += statusBarHeight;
+			this.size = `padding-top: ${top + 10}px; min-height: ${height}px; height: max-content`;
+			// #endif
+			this.headerContentHeight = height;
+			
+			
+			// console.log("top bar created");
+			// let size = uni.getMenuButtonBoundingClientRect();
+			// console.log(size);
+			// this.size = `padding-top: ${size.top}px; min-height: ${size.height}px; height: max-content`;
+		},
+		methods: {
+			getSize() {
+				const {height, top, left} = uni.getMenuButtonBoundingClientRect();
+				return {
+					height,
+					top,
+					contentWidth: left- 7,
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.header-view{
+		width: 100%;
+		padding-bottom: 10px;
+		position: relative;
+	}
+</style>

pages.json

@@ -1,6 +1,6 @@
 {
 	"easycom": {
-			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
@@ -28,7 +28,8 @@
 			"path": "pages/my-order/my-order",
 			"style": {
 				"navigationBarTitleText": "我的订单",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#F6F6F6"
 			}
 
 		}, {
@@ -50,435 +51,398 @@
 			"path": "pages/health-encyclopedia/health-encyclopedia",
 			"style": {
 				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
+				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
 
-		}
-	    ,{
-            "path" : "pages/login/forgot-password/forgot-password",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "忘记密码",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/login/user-agreement/user-agreement",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "用户协议",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/login/register/register",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/login/mobile-number-login/mobile-number-login",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/login/message-login/message-login",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/login/enter-code/enter-code",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/personal-information/personal-information",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "个人资料",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/change-password/change-password",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "修改密码",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/real-name-certification/real-name-certification",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "实名认证",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/add-address/add-address",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "添加收货地址",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/my-address/my-address",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "收货地址",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/accounts-and-security/accounts-and-security",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "账户与安全",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/my-appointment/my-appointment",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的预约",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/set-up/set-up",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "设置",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/privacy-setting/privacy-setting",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "隐私设置",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/my-fans/my-fans",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的粉丝",
-                "enablePullDownRefresh": false,
-				"navigationStyle": "custom"
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/my-commission/my-commission",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的佣金",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/my-collection/my-collection",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的收藏",
-                "enablePullDownRefresh": false,
-				"navigationStyle": "custom"
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/browse-history/browse-history",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "浏览记录",
-                "enablePullDownRefresh": false,
-				"navigationStyle": "custom"
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/exchange-record/exchange-record",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "兑换记录",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/points-details/points-details",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "积分明细",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/coupon/coupon",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "卡券",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/feedback/feedback",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "意见反馈",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/withdrawal-details/withdrawal-details",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "提现明细",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/message/message",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "消息",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/discount-activity/discount-activity",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "优惠活动",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/cancel-account/cancel-account",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "注销账户",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/cancel-notice/cancel-notice",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "注销须知",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/withdraw/withdraw",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "提现",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/bind-alipay/bind-alipay",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "绑定支付宝",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/bind-bank-card/bind-bank-card",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "绑定银行卡",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/set-password/set-password",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "设置密码",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/area-agent/area-agent",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的佣金",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/information-material/information-material",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "资讯素材",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/integral/integral",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false,
-				"navigationStyle": "custom"
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/transaction-logistics/transaction-logistics",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "交易物流",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/new-video/new-video",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "视频上新",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/sign-in-award/sign-in-award",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "签到奖励",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/online-service/online-service",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "在线客服",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/health-encyclopedia/health-encyclopedia-details/health-encyclopedia-details",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/health-encyclopedia/seasonal-health/seasonal-health",
+		}, {
+			"path": "pages/login/forgot-password/forgot-password",
+			"style": {
+				"navigationBarTitleText": "忘记密码",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login/user-agreement/user-agreement",
+			"style": {
+				"navigationBarTitleText": "用户协议",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login/register/register",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login/mobile-number-login/mobile-number-login",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login/message-login/message-login",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login/enter-code/enter-code",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/personal-information/personal-information",
+			"style": {
+				"navigationBarTitleText": "个人资料",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/change-password/change-password",
+			"style": {
+				"navigationBarTitleText": "修改密码",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/real-name-certification/real-name-certification",
+			"style": {
+				"navigationBarTitleText": "实名认证",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/add-address/add-address",
+			"style": {
+				"navigationBarTitleText": "添加收货地址",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/my-address/my-address",
+			"style": {
+				"navigationBarTitleText": "收货地址",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/accounts-and-security/accounts-and-security",
+			"style": {
+				"navigationBarTitleText": "账户与安全",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/my-appointment/my-appointment",
+			"style": {
+				"navigationBarTitleText": "我的预约",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/set-up/set-up",
+			"style": {
+				"navigationBarTitleText": "设置",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/privacy-setting/privacy-setting",
+			"style": {
+				"navigationBarTitleText": "隐私设置",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/my-fans/my-fans",
+			"style": {
+				"navigationBarTitleText": "我的粉丝",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/my/my-commission/my-commission",
+			"style": {
+				"navigationBarTitleText": "我的佣金",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/my-collection/my-collection",
+			"style": {
+				"navigationBarTitleText": "我的收藏",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/my/browse-history/browse-history",
+			"style": {
+				"navigationBarTitleText": "浏览记录",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/my/exchange-record/exchange-record",
+			"style": {
+				"navigationBarTitleText": "兑换记录",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/points-details/points-details",
+			"style": {
+				"navigationBarTitleText": "积分明细",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/coupon/coupon",
+			"style": {
+				"navigationBarTitleText": "卡券",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/feedback/feedback",
+			"style": {
+				"navigationBarTitleText": "意见反馈",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/withdrawal-details/withdrawal-details",
+			"style": {
+				"navigationBarTitleText": "提现明细",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/message/message",
+			"style": {
+				"navigationBarTitleText": "消息",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/discount-activity/discount-activity",
+			"style": {
+				"navigationBarTitleText": "优惠活动",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/cancel-account/cancel-account",
+			"style": {
+				"navigationBarTitleText": "注销账户",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/cancel-notice/cancel-notice",
+			"style": {
+				"navigationBarTitleText": "注销须知",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/withdraw/withdraw",
+			"style": {
+				"navigationBarTitleText": "提现",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/bind-alipay/bind-alipay",
+			"style": {
+				"navigationBarTitleText": "绑定支付宝",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/bind-bank-card/bind-bank-card",
+			"style": {
+				"navigationBarTitleText": "绑定银行卡",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/set-password/set-password",
+			"style": {
+				"navigationBarTitleText": "设置密码",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/area-agent/area-agent",
+			"style": {
+				"navigationBarTitleText": "我的佣金",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/information-material/information-material",
+			"style": {
+				"navigationBarTitleText": "资讯素材",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/integral/integral",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/my/transaction-logistics/transaction-logistics",
+			"style": {
+				"navigationBarTitleText": "交易物流",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/new-video/new-video",
+			"style": {
+				"navigationBarTitleText": "视频上新",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/sign-in-award/sign-in-award",
+			"style": {
+				"navigationBarTitleText": "签到奖励",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/my/online-service/online-service",
+			"style": {
+				"navigationBarTitleText": "在线客服",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/health-encyclopedia/health-encyclopedia-details/health-encyclopedia-details",
+			"style": {
+				"navigationBarTitleText": "详情",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/health-encyclopedia/seasonal-health/seasonal-health",
+			"style": {
+				"navigationBarTitleText": "时令养生",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/health-encyclopedia/fatigued/fatigued",
+			"style": {
+				"navigationBarTitleText": "疲乏无力",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/health-encyclopedia/video-details/video-details",
+			"style": {
+				"navigationBarTitleText": "视频详情",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/health-encyclopedia/health-symptomatic-video-explain/health-symptomatic-video-explain",
+			"style": {
+				"navigationBarTitleText": "亚健康对症视频讲解",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/health-encyclopedia/health-care/health-care",
+			"style": {
+				"navigationBarTitleText": "亚健康养生",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/health-encyclopedia/health-consult-results-page/health-consult-results-page",
+			"style": {
+				"navigationBarTitleText": "健康咨询",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/shopping-cart/confirm-order/confirm-order",
+			"style": {
+				"navigationBarTitleText": "确认订单",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/index/product-details/product-details",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}
+	    ,{
+            "path" : "pages/my-order/order-details/order-details",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "时令养生",
+                "navigationBarTitleText": "",
                 "enablePullDownRefresh": false,
 				"navigationStyle": "custom"
             }
             
         }
         ,{
-            "path" : "pages/health-encyclopedia/fatigued/fatigued",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "疲乏无力",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/health-encyclopedia/video-details/video-details",
+            "path" : "pages/my-order/refund-after-sale/refund-after-sale",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "视频详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/health-encyclopedia/health-symptomatic-video-explain/health-symptomatic-video-explain",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "亚健康对症视频讲解",
-                "enablePullDownRefresh": false
+                "navigationBarTitleText": "我的订单",
+                "enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#F6F6F6"
             }
             
         }
         ,{
-            "path" : "pages/health-encyclopedia/health-care/health-care",
+            "path" : "pages/my-order/select-service/select-service",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "亚健康养生",
+                "navigationBarTitleText": "选择服务",
                 "enablePullDownRefresh": false
             }
             
         }
         ,{
-            "path" : "pages/health-encyclopedia/health-consult-results-page/health-consult-results-page",
+            "path" : "pages/my-order/apply-for-invoice/apply-for-invoice",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "健康咨询",
+                "navigationBarTitleText": "申请开票",
                 "enablePullDownRefresh": false
             }
             
         }
         ,{
-            "path" : "pages/shopping-cart/confirm-order/confirm-order",
+            "path" : "pages/my-order/apply-for-refund/apply-for-refund",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "确认订单",
+                "navigationBarTitleText": "申请退款",
                 "enablePullDownRefresh": false
             }
             

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

@@ -0,0 +1,638 @@
+page {
+	background-color: #F5F5F7;
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 140rpx;
+}
+
+.header {
+	width: 100%;
+	height: calc(98rpx + var(--status-bar-height));
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 9999999;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	padding: var(--status-bar-height) 30rpx 0;
+	background: rgb(0, 0, 0, 0);
+}
+
+.header-btn-box {
+	display: flex;
+	justify-content: space-between;
+	padding: 0 20rpx;
+	box-sizing: border-box;
+}
+
+.header-btn-box button {
+	background-color: initial;
+	display: flex;
+	align-items: center;
+	border-radius: initial;
+}
+
+.header-title {
+	font-weight: 700;
+	font-size: 18px;
+	text-align: center;
+	color: rgba(255, 255, 255, 0);
+}
+
+.container-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 30rpx 20rpx 0;
+	box-sizing: border-box;
+	background-color: #F5F5F7;
+	margin-top: -30rpx;
+	z-index: 10;
+	border-radius: 40rpx 40rpx 0 0;
+}
+
+.back {
+	width: 18rpx;
+}
+
+.back image {
+	width: 100%;
+}
+
+.header-right-box {
+	display: flex;
+	align-items: center;
+}
+
+.header-right-box button {
+	background-color: initial;
+	display: flex;
+	align-items: center;
+	border-radius: initial;
+	margin-right: 36rpx;
+}
+
+.header-right-box button:last-child {
+	margin-right: 0;
+}
+
+.header-right-box button image {
+	width: 68rpx;
+}
+
+.swiper-box {
+	width: 100%;
+	position: relative;
+}
+
+.diandian {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	bottom: 35rpx;
+	left: 0;
+}
+
+.diandiandian {
+	width: 12rpx;
+	height: 12rpx;
+	border-radius: 50%;
+	background-color: #fff;
+	margin-right: 16rpx;
+}
+
+.diandiandian:last-child {
+	margin-right: 0;
+}
+
+.diandiandian_active {
+	background-color: #000000;
+}
+
+.swiper {
+	width: 100%;
+	height: 856rpx;
+}
+
+.banner-img {
+	width: 100%;
+	height: 856rpx;
+}
+
+.module {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	padding: 14rpx 24rpx;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
+}
+
+.price-row {
+	color: #F2501A;
+	font-size: 32rpx;
+	margin-bottom: 10rpx;
+}
+
+.del-price {
+	color: #919191;
+	font-size: 24rpx;
+	margin-left: 22rpx;
+}
+
+.padding-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.product-name {
+	width: 100%;
+	color: #202020;
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-bottom: 10rpx;
+}
+
+.row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tag {
+	color: #919191;
+	font-size: 24rpx;
+}
+
+.box {
+	width: 201rpx;
+	height: 58rpx;
+	position: relative;
+}
+
+.bg {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 99;
+}
+
+.fan {
+	width: 50%;
+	height: 100%;
+	line-height: 58rpx;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 100;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #FFFFFF;
+	font-size: 32rpx;
+}
+
+.fan-prirce {
+	width: 50%;
+	height: 100%;
+	line-height: 58rpx;
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: 100;
+	text-align: center;
+	color: #F2501A;
+	font-weight: bold;
+	font-size: 24rpx;
+}
+
+.fan-prirce text {
+	font-size: 30rpx;
+}
+
+.module-row {
+	width: 100%;
+	line-height: 44rpx;
+	display: flex;
+	align-items: flex-start;
+	margin-bottom: 15rpx;
+}
+
+.module-row:last-child {
+	margin-bottom: 0;
+}
+
+.module-label {
+	margin-right: 32rpx;
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.module-right-row {
+	flex: 1;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.module-btn {
+	width: 128rpx;
+	height: 44rpx;
+	line-height: 44rpx;
+	border-radius: 100rpx;
+	border: 1px solid #9D9D9D;
+	background-color: #fff;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.child {
+	margin-right: 34rpx;
+	color: #A7A7A7;
+	font-size: 26rpx;
+}
+
+.module-right-row-between {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.back-icon {
+	width: 15rpx;
+}
+
+.module-right-row-tab {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.tab-child {
+	height: 44rpx;
+	line-height: 44rpx;
+	display: flex;
+	align-items: center;
+	border: 1px solid #E63D23;
+	border-radius: 100rpx;
+	color: #F2501A;
+	font-size: 24rpx;
+	padding: 0 16rpx;
+	margin-right: 26rpx;
+}
+
+.msg {
+	color: #A7A7A7;
+	font-size: 26rpx;
+}
+
+.express-shipping {
+	color: #F2501A;
+	font-size: 26rpx;
+	margin-left: 50rpx;
+}
+
+.border-orange {
+	height: 44rpx;
+	line-height: 44rpx;
+	color: #F2501A;
+	font-size: 24rpx;
+	display: flex;
+	align-items: center;
+	border: 1px solid #F2501A;
+	background-color: #fff;
+	box-sizing: border-box;
+	padding: 0 18rpx;
+	border-radius: 100rpx;
+	margin-left: 24rpx;
+}
+
+.assure {
+	color: #A7A7A7;
+	font-size: 26rpx;
+	margin-right: 34rpx;
+}
+
+.comment-module,
+.details-module {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.comment-module-label,
+.details-module-label {
+	width: 100%;
+	padding: 0 26rpx;
+	box-sizing: border-box;
+	color: #202020;
+	font-size: 32rpx;
+	font-weight: bold;
+	position: relative;
+	margin-bottom: 20rpx;
+}
+
+.comment-module-label::after,
+.details-module-label::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translate(0, -50%);
+	width: 6rpx;
+	height: 34rpx;
+	background-color: #F2501A;
+	border-radius: 8rpx;
+}
+
+.comment-box {
+	width: 100%;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	padding: 28rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.comment-tab-list {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.comment-tab-item {
+	width: fit-content;
+	border: 1px solid #FCD0C9;
+	box-sizing: border-box;
+	border-radius: 100rpx;
+	height: 56rpx;
+	line-height: 56rpx;
+	padding: 0 22rpx;
+	margin-right: 54rpx;
+	margin-bottom: 24rpx;
+	color: #F2501A;
+	font-size: 28rpx;
+	background-color: #FBECE7;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.comment-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 35rpx;
+	border-bottom: 1px solid #F2F2F2;
+	margin-bottom: 24rpx;
+}
+
+.comment-item {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 40rpx;
+}
+
+.comment-item-top {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
+
+.avatar {
+	width: 66rpx;
+	height: 66rpx;
+	margin-right: 24rpx;
+}
+
+.comment-item-top-sidebar {
+	flex: 1;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+.comment-item-top-column {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.user-name {
+	width: 100%;
+	color: #111111;
+	font-size: 28rpx;
+}
+
+.comment-item-content {
+	width: 100%;
+	color: #9D9CA1;
+	font-size: 24rpx;
+}
+
+.stars-wrapper {
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+
+.star-img {
+	width: 20rpx;
+	height: 20rpx;
+	margin-right: 10rpx;
+}
+
+.time {
+	color: #C2C2C2;
+	font-size: 24rpx;
+}
+
+.buyers-show-module {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.buyers-show-label {
+	width: 100%;
+	color: #202020;
+	font-size: 28rpx;
+	line-height: 28rpx;
+	font-weight: bold;
+	margin-bottom: 20rpx;
+}
+
+.buyers-show-list {
+	width: 100%;
+	white-space: nowrap;
+}
+
+.buyers-show-img {
+	width: 23.5%;
+	height: 155rpx;
+	margin-right: 2%;
+}
+
+.buyers-show-img:last-child {
+	margin-right: 0;
+}
+
+.details-module {
+	margin-top: 12rpx;
+}
+
+.img {
+	width: 100%;
+}
+
+.footer {
+	width: 100%;
+	height: 140rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 99999999;
+	background-color: #FFFFFF;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.footer-leftsidebar {
+	display: flex;
+	align-items: center;
+}
+
+.footer-leftsidebar button {
+	height: inherit;
+	line-height: inherit;
+	background-color: initial;
+	border-radius: initial;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #202020;
+	font-size: 22rpx;
+	margin-right: 60rpx;
+	position: relative;
+}
+
+.footer-leftsidebar button:last-child {
+	margin-right: 0;
+}
+
+.num {
+	width: 28rpx;
+	height: 28rpx;
+	line-height: 28rpx;
+	background-color: #FF0000;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	color: #FFFFFF;
+	font-size: 20rpx;
+	font-weight: bold;
+	right: 0rpx;
+	top: 0;
+	z-index: 9999;
+}
+
+.footer-leftsidebar button image {
+	height: 40rpx;
+	margin-bottom: 2rpx;
+}
+
+.footer-rightsidebar {
+	display: flex;
+	align-items: center;
+}
+
+.footer-rightsidebar-btn,
+.footer-rightsidebar-btn2 {
+	width: 180rpx;
+	height: 72rpx;
+	position: relative;
+}
+
+.footer-rightsidebar-btn2 {
+	width: 166rpx;
+}
+
+.footer-rightsidebar-btn image,
+.footer-rightsidebar-btn2 image {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+}
+
+.footer-rightsidebar-btn-container,
+.footer-rightsidebar-btn-container2 {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 100;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #FFFFFF;
+	font-size: 26rpx;
+}
+
+.window {
+	position: fixed;
+	width: 380rpx;
+	height: 144rpx;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border-radius: 16rpx;
+	background-color: rgba(0, 0, 0, 0.73);
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	color: #FFFFFF;
+	font-size: 24rpx;
+}
+
+.window image {
+	width: 40rpx;
+	margin-bottom: 15rpx;
+}

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

@@ -0,0 +1,361 @@
+<!-- 商品详情 -->
+<template>
+	<view class="wrap">
+
+		<HeaderViewBar ref='HeaderViewBar' title='商品详情' :titleOpacity="scrollTop / 100" :opacity="scrollTop / 100"
+			:hideBack="true" backgroundColor='linear-gradient(180deg, #E63D23, #F58711)'
+			style="position: fixed; top: 0; z-index: 999999999;">
+			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px', paddingRight: 36}">
+				<button type="default" class="back" @tap="back()">
+					<image src="../../../static/return-2.png" mode="widthFix"></image>
+				</button>
+				<view class="header-right-box">
+					<button type="default">
+						<image src="../../../static/circle-1.png" mode="widthFix"></image>
+					</button>
+					<button type="default">
+						<image src="../../../static/circle-2.png" mode="widthFix"></image>
+					</button>
+				</view>
+			</view>
+		</HeaderViewBar>
+
+		<view class="swiper-box">
+			<swiper class="swiper" @change="swiperChange" :circular="true" autoplay="true" interval="3000"
+				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 class="diandian">
+				<view class="diandiandian" :class="(swiperCurrent == index ? 'diandiandian_active' : '')"
+					v-for="(item, index) in swiperList">
+				</view>
+			</view>
+		</view>
+
+		<view class="padding-box">
+			<view class="module">
+				<view class="price-row">
+					￥394.00 <text class="del-price">￥34.00</text>
+				</view>
+				<view class="product-name">
+					藕粉桂花坚果藕粉羹营养早代餐 坚果羹营养早餐懒人冲饮食品
+				</view>
+				<view class="row-between">
+					<view class="tag">
+						1罐50g
+					</view>
+					<view class="box">
+						<image src="../../../static/bg-8.png" class="bg" mode="aspectFill" />
+						<view class="fan">
+							返
+						</view>
+						<view class="fan-prirce">
+							￥<text>8.00</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="module">
+				<view class="module-row">
+					<view class="module-label">
+						产品功效
+					</view>
+					<view class="module-right-row">
+						<text class="child">强身益智</text>
+						<text class="child">健胃润肠</text>
+						<button type="default" class="module-btn">健胃润肠</button>
+					</view>
+				</view>
+				<view class="module-row">
+					<view class="module-label">
+						适合人群
+					</view>
+					<view class="module-right-row">
+						<text class="child">亚健康</text>
+						<text class="child">心血管患者</text>
+						<text class="child">糖尿病患者</text>
+						<text class="child">体弱多病</text>
+						<text class="child">消化不良</text>
+						<text class="child">心血管患者</text>
+						<text class="child">糖尿病患者</text>
+						<text class="child">体弱多病</text>
+					</view>
+				</view>
+				<view class="module-row">
+					<view class="module-label">
+						有效搭配
+					</view>
+					<view class="module-right-row-between">
+						<view class="module-right-row-tab">
+							<view class="tab-child">
+								乌鸡
+							</view>
+							<view class="tab-child">
+								木耳
+							</view>
+							<view class="tab-child">
+								枸杞
+							</view>
+						</view>
+						<image src="../../../static/back-icon2.png" mode="widthFix" class="back-icon"></image>
+					</view>
+				</view>
+			</view>
+
+			<view class="module">
+				<view class="module-row">
+					<view class="module-label">
+						配送
+					</view>
+					<view class="module-right-row">
+						<view class="msg">
+							嘉兴南湖区旭辉广场2号楼
+						</view>
+					</view>
+				</view>
+				<view class="module-row">
+					<view class="module-label">
+						发货
+					</view>
+					<view class="module-right-row">
+						<view class="msg">
+							北京携手熊猫总部
+						</view>
+						<text class="express-shipping">快递:免运费</text>
+					</view>
+				</view>
+				<view class="module-row">
+					<view class="module-label">
+						源头
+					</view>
+					<view class="module-right-row">
+						<view class="msg">
+							宁夏中宁县
+						</view>
+						<button class="border-orange">产品可溯源</button>
+					</view>
+				</view>
+				<view class="module-row">
+					<view class="module-label">
+						时令
+					</view>
+					<view class="module-right-row">
+						<view class="msg">
+							6月/7月/8月
+						</view>
+					</view>
+				</view>
+				<view class="module-row">
+					<view class="module-label">
+						时令
+					</view>
+					<view class="module-right-row-between">
+						<view class="module-right-row-tab">
+							<text class="assure">产品可溯源</text>
+							<text class="assure">七天无理由退换</text>
+						</view>
+						<image src="../../../static/back-icon2.png" mode="widthFix" class="back-icon"></image>
+					</view>
+				</view>
+				<view class="module-row">
+					<view class="module-label">
+						参数
+					</view>
+					<view class="module-right-row-between">
+						<view class="module-right-row-tab">
+							<text class="assure">生产日期</text>
+							<text class="assure">产地</text>
+							<text class="assure">净含量…</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="comment-module">
+				<view class="comment-module-label">
+					商品评价(600)
+				</view>
+				<view class="comment-box">
+					<view class="comment-tab-list">
+						<view class="comment-tab-item">
+							口味鲜美多汁
+						</view>
+						<view class="comment-tab-item">
+							很好吃
+						</view>
+						<view class="comment-tab-item">
+							还会再买
+						</view>
+					</view>
+					<view class="comment-list">
+						<view class="comment-item" v-for="(item, index) in 3">
+							<view class="comment-item-top">
+								<image src="../../../static/avatar.png" class="avatar" mode="aspectFill"></image>
+								<view class="comment-item-top-sidebar">
+									<view class="comment-item-top-column">
+										<view class="user-name">
+											乔治的晚餐
+										</view>
+										<view class="stars-wrapper">
+											<block v-for="(val, index) in 5">
+												<image class="star-img"
+													:src="star > index ? '../../../static/star-active.png' : '../../../static/star.png'"
+													mode="aspectFill"></image>
+											</block>
+										</view>
+									</view>
+									<text class="time">2020-9-15</text>
+								</view>
+							</view>
+							<view class="comment-item-content">
+								香肠精选不同部位的猪肉，按照一定的肥瘦比列进行搭。香肠精选不同部位的猪肉，按照一定的肥瘦比列进行搭。
+							</view>
+						</view>
+					</view>
+					<view class="buyers-show-module">
+						<view class="buyers-show-label">
+							买家秀(14)
+						</view>
+						<scroll-view scroll-x="true" class="buyers-show-list">
+							<image src="../../../static/img-4.png" class="buyers-show-img" v-for="(item, index) in 7"
+								mode="aspectFill"></image>
+						</scroll-view>
+					</view>
+				</view>
+			</view>
+
+			<view class="details-module">
+				<view class="details-module-label">
+					商品详情
+				</view>
+				<image src="../../../static/img-4.png" mode="widthFix" class="img"></image>
+			</view>
+
+		</view>
+
+		<view class="footer">
+			<view class="footer-leftsidebar">
+				<button type="default">
+					<image src="../../../static/foot-tab2.png" mode="heightFix"></image>
+					购物车
+					<view class="num">
+						99
+					</view>
+				</button>
+				<button type="default">
+					<image src="../../../static/foot-tab1.png" mode="heightFix"></image>
+					客服
+				</button>
+				<button type="default" @tap="collect">
+					<image :src="select ? '../../../static/foot-tab3active.png' : '../../../static/foot-tab3.png'" mode="heightFix"></image>
+					收藏
+				</button> 
+			</view>
+			<view class="footer-rightsidebar">
+				<button type="default" class="footer-rightsidebar-btn" @tap="showToast">
+					<image src="../../../static/btn-bg1.png" mode=""></image>
+					<view class="footer-rightsidebar-btn-container">
+						加入购物车
+					</view>
+				</button>
+				<button type="default" class="footer-rightsidebar-btn2">
+					<image src="../../../static/btn-bg2.png" mode=""></image>
+					<view class="footer-rightsidebar-btn-container2">
+						立即购买
+					</view>
+				</button>
+			</view>
+		</view>
+
+		<!-- 加入购物车成功-弹窗 -->
+		<view class="window" v-show="isShowAddSuccess">
+			<image src="../../../static/circle-active.png" mode="widthFix"></image>
+			添加成功，在购物车等您呦~
+		</view>
+		<!-- 加入购物车成功-弹窗  -->
+	 
+	</view>
+</template>
+
+<script>
+	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
+	import popupMessage from '../../../components/addSuccess.vue';
+	export default {
+		components: {
+			HeaderViewBar,
+			popupMessage
+		},
+		data() {
+			return {
+				headerHeight: 0,
+				headerContainerWidth: 0,
+				scrollTop: 0,
+
+				//轮播
+				swiperList: [
+					'../../../static/img-4.png',
+					'../../../static/img-4.png',
+					'../../../static/img-4.png'
+				],
+				swiperCurrent: 0,
+
+				star: 3, //评价，默认3星
+
+				isShowAddSuccess: false,//加入购物车成功弹窗
+				
+				select:false,//收藏
+			}
+		},
+		onShow() {
+			setTimeout(() => {
+				this.headerHeight = this.$refs['HeaderViewBar'].getHeaderStyle().headerHeight;
+				this.headerContainerWidth = this.$refs['HeaderViewBar'].getHeaderStyle().headerContainerWidth;
+			}, 20);
+		},
+		methods: {
+			// 返回顶部
+			toTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 100,
+				});
+			},
+			//返回上一页
+			back() {
+				uni.navigateBack({
+					delta: 1,
+				})
+			},
+			//轮播
+			swiperChange(e) {
+				const {
+					current
+				} = e.detail;
+				this.swiperCurrent = current;
+			},
+			//加入购物车成功-弹窗
+			showToast() {
+				this.isShowAddSuccess = true;
+			},
+			closeAddSuccess() {
+				this.isShowAddSuccess = false;
+			},
+			//收藏 
+			collect: function() {
+				this.select = !this.select;
+			},
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./product-details.css";
+</style>

pages/my-order/apply-for-invoice/apply-for-invoice.css

@@ -0,0 +1,161 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.top {
+	width: 100%;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	display: flex;
+	align-items: center;
+	padding: 20rpx 26rpx;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
+}
+
+.img {
+	width: 132rpx;
+	height: 132rpx;
+	border-radius: 12rpx;
+	margin-right: 24rpx;
+}
+
+.top-sidebar {
+	flex: 1;
+	height: 130rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+.top-row {
+	width: 100%;
+	color: #202020;
+	font-size: 26rpx;
+	margin-bottom: 22rpx;
+}
+
+.top-row:last-child {
+	margin-bottom: 0;
+}
+
+.top-row text {
+	margin-left: 26rpx;
+}
+
+.red {
+	color: #F2501A;
+}
+
+.form {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	border-radius: 16rpx;
+	background-color: #fff;
+}
+
+.row {
+	width: 100%;
+	height: 124rpx;
+	padding: 0 38rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid #F1F1F1;
+	display: flex;
+	align-items: center;
+}
+
+.row:last-child {
+	border: none;
+}
+
+.label {
+	width: 26%;
+	color: #000000;
+	font-size: 30rpx;
+}
+
+.input {
+	font-size: 28rpx;
+	flex: 1;
+}
+
+.placeholder {
+	color: #BBBBBB;
+}
+
+.btn-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 100rpx 36rpx 80rpx;
+	box-sizing: border-box;
+}
+
+.btn-box button {
+	width: 100%;
+	height: 114rpx;
+	line-height: 114rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #fff;
+	font-size: 40rpx;
+	font-weight: bold;
+	background: linear-gradient(90deg, #FF5A4D, #FF8900);
+	border-radius: 100rpx;
+	margin-bottom: 32rpx;
+}
+
+.gray-bg {
+	background: #EDEDED !important;
+	color: #9D9D9D !important;
+}
+
+.back-icon {
+	width: 18rpx;
+}
+
+.selected {
+	font-size: 28rpx;
+}
+
+.gray {
+	color: #BBBBBB;
+	font-size: 28rpx;
+}
+
+.rightsidebar {
+	flex: 1;
+	display: flex;
+	align-items: center;
+}
+
+.picker {
+	width: calc(100% - 18rpx);
+}
+
+.btnBox {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 100rpx 0;
+}
+
+.btnBox button {
+	width: 100%;
+	height: 90rpx;
+	line-height: 90rpx;
+	background-color: #E0E0E0;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #777777;
+	font-size: 34rpx;
+}

pages/my-order/apply-for-invoice/apply-for-invoice.vue

@@ -0,0 +1,105 @@
+<!-- 申请开票 -->
+<template>
+	<view class="wrap">
+
+		<view class="top">
+			<image src="../../../static/img-4.png" class="img" mode="aspectFill"></image>
+			<view class="top-sidebar">
+				<view class="top-row">
+					订单编号<text>1435008748189314460</text>
+				</view>
+				<view class="top-row">
+					开票金额<text class="red">￥392.00</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="form">
+			<view class="row">
+				<view class="label">
+					发票类型
+				</view>
+				<input type="text" value="" placeholder="增值税电子普通发票" placeholder-class="placeholder" class="input" />
+			</view>
+			<view class="row">
+				<view class="label">
+					抬头类型
+				</view>
+				<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="label">
+					发票抬头
+				</view>
+				<input type="text" value="" placeholder="请填写需要开具发票的企业名称" placeholder-class="placeholder"
+					class="input" />
+			</view>
+			<view class="row">
+				<view class="label">
+					邮箱
+				</view>
+				<input type="text" value="" placeholder="请填写邮箱" placeholder-class="placeholder" class="input" />
+			</view>
+			<view class="row">
+				<view class="label">
+					开户行
+				</view>
+				<input type="text" value="" placeholder="选填" placeholder-class="placeholder" class="input" />
+			</view>
+			<view class="row">
+				<view class="label">
+					银行账号
+				</view>
+				<input type="text" value="" placeholder="选填" placeholder-class="placeholder" class="input" />
+			</view>
+			<view class="row">
+				<view class="label">
+					企业电话
+				</view>
+				<input type="text" value="" placeholder="选填" placeholder-class="placeholder" class="input" />
+			</view>
+		</view>
+		
+		<view class="btnBox">
+			<button type="default">提交</button>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//选择抬头类型 一级弹窗
+				array: [{
+					name: '抬头类型'
+				}, {
+					name: '抬头类型2'
+				}, {
+					name: '抬头类型3'
+				}, {
+					name: '抬头类型4'
+				}],
+				index: -1,
+			}
+		},
+		methods: {
+			//选择抬头类型 一级弹窗
+			bindPickerChange: function(e) {
+				this.index = e.detail.value;
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./apply-for-invoice.css";
+</style>

pages/my-order/apply-for-refund/apply-for-refund.css

@@ -0,0 +1,358 @@
+page {
+	background-color: #F6F6F6;
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx 160rpx;
+	box-sizing: border-box;
+}
+
+.item {
+	width: 100%;
+	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;
+}
+
+.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;
+}
+
+.box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border-radius: 8rpx;
+	margin-bottom: 20rpx;
+}
+
+.box-label {
+	width: 100%;
+	height: 90rpx;
+	line-height: 90rpx;
+	display: flex;
+	color: #111111;
+	font-size: 30rpx;
+	font-weight: bold;
+	align-items: center;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.refund-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.refund-item {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 30rpx 24rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid rgba(67, 63, 103, 0.2);
+	box-sizing: border-box;
+}
+
+.refund-item:last-child {
+	border: none;
+}
+
+.row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.row-name {
+	color: #212121;
+	font-size: 30rpx;
+}
+
+.select-row {
+	display: flex;
+	align-items: center;
+	color: #777777;
+	font-size: 28rpx;
+}
+
+.back-icon {
+	width: 15rpx;
+	margin-left: 36rpx;
+}
+
+.refund-price {
+	color: #FF0606;
+	font-size: 32rpx;
+}
+
+.refund-msg {
+	width: 100%;
+	color: #777777;
+	font-size: 24rpx;
+	margin-top: 10rpx;
+}
+
+.img-container {
+	width: 100%;
+	background-color: #FFFFFF;
+	padding: 44rpx 24rpx 15rpx;
+	box-sizing: border-box;
+	border-radius: 8rpx;
+}
+
+.note-image-box {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.add-img {
+	width: 100%;
+	height: 100%;
+	border-radius: 8rpx;
+}
+
+.img {
+	width: 100%;
+	height: 100%;
+	border-radius: 8rpx;
+}
+
+.note-image-item {
+	width: 30.6666%;
+	height: 200rpx;
+	margin-right: 4%;
+	margin-bottom: 4%;
+	position: relative;
+}
+
+.note-image-item:nth-child(3n) {
+	margin-right: 0;
+}
+
+.close-icon {
+	position: absolute;
+	right: 10rpx;
+	top: 10rpx;
+	z-index: 999;
+}
+
+.close-icon image {
+	width: 39rpx;
+	height: 39rpx;
+}
+
+.image-box {
+	width: 100%;
+	height: 100%;
+}
+
+.upload-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.upload-box-label {
+	color: #212121;
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-bottom: 30rpx;
+}
+
+.upload-box-label text {
+	font-weight: normal;
+	color: #696969;
+	font-size: 28rpx;
+}
+
+.footer {
+	width: 100%;
+	height: 140rpx;
+	display: flex;
+	justify-content: center;
+	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 {
+	width: 100%;
+	height: 72rpx;
+	line-height: 72rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #F2501A;
+	color: #fff;
+	font-size: 34rpx;
+	border-radius: 100rpx;
+}

pages/my-order/apply-for-refund/apply-for-refund.vue

@@ -0,0 +1,138 @@
+<!-- 申请退款 -->
+<template>
+	<view class="wrap">
+		
+		<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>
+		
+		<view class="box">
+			<view class="box-label">
+				退款信息
+			</view>
+			<view class="refund-list">
+				<view class="refund-item">
+					<view class="row-between">
+						<text class="row-name">货物状态</text>
+						<view class="select-row">
+							请选择
+							<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+						</view>
+					</view>
+				</view>
+				<view class="refund-item">
+					<view class="row-between">
+						<text class="row-name">退款原因</text>
+						<view class="select-row">
+							请选择
+							<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+						</view>
+					</view>
+				</view>
+				<view class="refund-item">
+					<view class="row-between">
+						<text class="row-name">退款金额</text>
+						<text class="refund-price">￥980.00</text>
+					</view>
+					<view class="refund-msg">
+						不可修改,最多￥980.00，含发货邮费￥0.00，其中包含积分
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<view class="upload-box">
+			<view class="upload-box-label">
+				上传凭证<text>（最多3张照片）</text>
+			</view>
+			<view class="img-container">
+				<view class="note-image-box">
+					<view class="note-image-item" v-for="(item,index) in imageLists" :key="index">
+						<view class="close-icon" @click="del(index)">
+							<image src="../../../static/del-img.png" mode=""></image>
+						</view>
+						<view class="image-box"  @click="previewImg(index)">
+							<image :src="item.url" class="img" mode="aspectFill"></image>
+						</view>
+					</view>
+					<view v-if="imageLists.length < 9" class="note-image-item" @click="addImage">
+						<image src="../../../static/add-3.png" class="add-img" mode="aspectFill"></image>
+					</view>
+				</view>
+			</view>
+		</view> 
+		
+		<view class="footer">
+			<button type="default" class="active">提交</button>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				imageLists: [], //存放图片数组
+			}
+		},
+		methods: {
+			//删除图片
+			del(index) {
+				this.imageLists.splice(index, 1)
+			},
+			//添加图片
+			addImage() {
+				const count = 9 - this.imageLists.length
+				uni.chooseImage({
+					count: count,
+					success: res => {
+						let tempfilepaths = res.tempFilePaths
+						tempfilepaths.forEach((item, index) => {
+							// 处理h5多选的情况
+							if (index < count) {
+								this.imageLists.push({
+									url: item
+								})
+							}
+						})
+					}
+				})
+			},
+			//查看图片
+			previewImg(index){
+				let urls = []
+				for(let i = 0;i < this.imageLists.length;i++){
+					urls.push(this.imageLists[i].url)
+				}
+				uni.previewImage({
+					current:index,
+					urls:urls,
+				})   
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./apply-for-refund.css";
+</style>

pages/my-order/my-order.css

@@ -0,0 +1,281 @@
+page {
+	background-color: #F6F6F6;
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 65rpx 24rpx 0;
+	box-sizing: border-box;
+}
+
+.tab-list {
+	width: 100%;
+	height: 65rpx;
+	display: flex;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999;
+	background-color: #F6F6F6;
+}
+
+.child {
+	flex: 1;
+	height: 65rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 30rpx;
+	color: #202020;
+}
+
+.child.active {
+	color: #F2501A;
+	font-weight: bold;
+}
+
+.list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.item {
+	width: 100%;
+	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-top text:last-child {
+	color: #F2501A;
+	font-size: 30rpx;
+}
+
+.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;
+}
+
+.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;
+	justify-content: space-between;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.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;
+}
+
+.freight-insurance-row {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	font-size: 24rpx;
+	margin-bottom: 20rpx;
+}
+
+.msg-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 40rpx;
+}
+
+.font-1 {
+	color: #202020;
+	font-size: 24rpx;
+	margin-right: 58rpx;
+}
+
+.font-2 {
+	color: #A7A7A7;
+	font-size: 24rpx;
+	margin-right: 108rpx;
+}
+
+.font-3 {
+	color: #202020;
+	font-size: 24rpx;
+}
+
+.normal-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #999999;
+	font-size: 26rpx;
+	padding: 200rpx 0;
+}
+
+.normal-box image {
+	width: 580rpx;
+	margin-bottom: 14rpx;
+}
+
+.normal-box button {
+	width: 152rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid #F2501A;
+	border-radius: 100rpx;
+	box-sizing: border-box;
+	color: #F2501A;
+	font-size: 28rpx;
+	margin-top: 10rpx;
+}

pages/my-order/my-order.vue

@@ -1,34 +1,124 @@
 <!-- 我的订单 -->
 <template>
-	<view class="">
-		<text class="yd-quanwen" v-if="isShowAllContent" @click="toggleDescription">全文</text>
-		<text class="yd-quanwen" v-else @click="toggleDescription">收起</text>
+	<view class="wrap">
 
-		<view class="" v-if="isShowAllContent">
-			111
+		<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 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="msg-box">
+					<view class="freight-insurance-row">
+						<text class="font-1">运费险</text>
+						<text class="font-2">退换货可自动理赔</text>
+						<text class="font-3">￥0.00 x1</text>
+					</view>
+					<view class="price-row">
+						<text class="margin">总价￥<text class="big-font">29.90</text></text>
+						<text class="margin">优惠￥<text class="big-font">1.75</text></text>
+						<text class="margin">实付款￥<text class="big-font-black">28.15</text></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">申请开票</button>
+					<button type="default">查看物流</button>
+					<button type="default" class="border-red">确认收货</button> -->
+					
+					<!-- 待评价显示 -->
+					<!-- <button type="default" class="border-red">评价</button> -->
+
+					<!-- 已完成 -->
+					<!-- <button type="default" class="border-gray">删除订单</button> -->
+				</view>
+			</view>
+			<!-- 无内容时显示 -->
+			<!-- <view class="normal-box">
+				<image src="../../static/normal-3.png" mode="widthFix"></image>
+				<text>暂无订单</text>
+				<button type="default">去逛逛</button>
+			</view> -->
+			
+		</view>
+
 	</view>
 </template>
+
 <script>
 	export default {
 		data() {
 			return {
-				isShowAllContent: false,
-				
+				//选项卡
+				isActive: 0,
+				navList: [{
+					index: 0,
+					title: '全部',
+				}, {
+					index: 1,
+					title: "待付款",
+				}, {
+					index: 2,
+					title: "待发货",
+				}, {
+					index: 3,
+					title: "待收货",
+				}, {
+					index: 4,
+					title: "待评价",
+				}],
 			}
 		},
 		methods: {
-			toggleDescription: function() {
-				if (this.isShowAllContent) {
-					this.isShowAllContent = false
-				} else {
-					this.isShowAllContent = true
-				}
+			//选项卡
+			checked(index) {
+				this.isActive = index
 			},
+
 		}
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	@import "./my-order.css";
 </style>

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

@@ -0,0 +1,340 @@
+.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 30rpx 140rpx;
+	box-sizing: border-box;
+	position: relative;
+	top: calc(98rpx + var(--status-bar-height))
+}
+
+.address-box {
+	width: 100%;
+	height: 200rpx;
+	background-color: #fff;
+	display: flex;
+	align-items: center;
+	border-radius: 16rpx;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+	margin-bottom: 45rpx;
+}
+
+.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;
+}
+
+.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: center;
+	margin-bottom: 22rpx;
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.order-msg-row:last-child {
+	margin-bottom: 0;
+}
+
+.order-msg-name {
+	width: 22%;
+}
+
+.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 {
+	width: 168rpx;
+	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: 24rpx;
+	margin-right: 14rpx;
+}
+
+.footer button:last-child {
+	margin-right: 0;
+}
+
+.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;
+	justify-content: space-between;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.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: 100%;
+	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;
+}

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

@@ -0,0 +1,155 @@
+<!-- 订单详情 -->
+<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="address-box">
+				<image src="../../../static/location-2.png" class="location-icon" mode="widthFix"></image>
+				<view class="address-sidebar">
+					<view class="address-column">
+						<view class="people-name">
+							张三 <text>17392389223</text>
+						</view>
+						<view class="address-msg">
+							山东省临沂市河东区芝麻墩街道
+						</view>
+					</view>
+					<button type="default" class="edit-btn">修改</button>
+				</view>
+			</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 class="product-item-msg">
+								7天无理由退换货
+							</view>
+						</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>
+				</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">2085570353833314460</text>
+					</view> 
+					<view class="order-msg-row">
+						<view class="order-msg-name">
+							交易号
+						</view> 
+						<text class="order-msg-msg">2021110822001188735722597689</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>
+
+		</view>
+
+		<view class="footer">
+			<button type="default">申请开票</button>
+			<button type="default">修改地址</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 "./order-details.css";
+</style>

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

@@ -0,0 +1,269 @@
+page {
+	background-color: #F6F6F6;
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.item {
+	width: 100%;
+	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-top text:last-child {
+	color: #F2501A;
+	font-size: 30rpx;
+}
+
+.item-bottom {
+	width: 100%;
+	height: 120rpx;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.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;
+}
+
+.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;
+	justify-content: space-between;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.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;
+}
+
+.freight-insurance-row {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	font-size: 24rpx;
+	margin-bottom: 20rpx;
+}
+
+.msg-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 40rpx;
+}
+
+.font-1 {
+	color: #202020;
+	font-size: 24rpx;
+	margin-right: 58rpx;
+}
+
+.font-2 {
+	color: #A7A7A7;
+	font-size: 24rpx;
+	margin-right: 108rpx;
+}
+
+.font-3 {
+	color: #202020;
+	font-size: 24rpx;
+}
+
+.normal-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #999999;
+	font-size: 26rpx;
+	padding: 200rpx 0;
+}
+
+.normal-box image {
+	width: 580rpx;
+	margin-bottom: 14rpx;
+}
+
+.normal-box button {
+	width: 152rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid #F2501A;
+	border-radius: 100rpx;
+	box-sizing: border-box;
+	color: #F2501A;
+	font-size: 28rpx;
+	margin-top: 10rpx;
+}
+
+.refund-box {
+	width: 100%;
+	height: 80rpx;
+	line-height: 80rpx;
+	background-color: #F6F6F6;
+	border-radius: 8rpx;
+	padding: 0 18rpx;
+	box-sizing: border-box;
+	color: #202020;
+	font-size: 30rpx;
+	display: flex;
+	align-items: center;
+	margin-top: 8rpx;
+}

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

@@ -0,0 +1,101 @@
+<!-- 退款售后 -->
+<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 {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./refund-after-sale.css";
+</style>

pages/my-order/select-service/select-service.css

@@ -0,0 +1,247 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.item {
+	width: 100%;
+	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;
+	line-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;
+}
+
+.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;
+}
+
+.box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	background-color: #fff;
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+}
+
+.box-label {
+	width: 100%;
+	height: 90rpx;
+	line-height: 90rpx;
+	display: flex;
+	color: #111111;
+	font-size: 30rpx;
+	font-weight: bold;
+	align-items: center;
+}
+
+.select-service-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.select-service-item {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 30rpx 20rpx 55rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid rgba(67, 63, 103, 0.2);
+	box-sizing: border-box;
+}
+
+.select-service-item:last-child {
+	border: none;
+}
+
+.select-service-icon {
+	width: 46rpx;
+	margin-right: 22rpx;
+}
+
+.select-service-sidebar {
+	flex: 1;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.select-service-column {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.select-service-name {
+	color: #000000;
+	font-size: 26rpx;
+}
+
+.select-service-msg {
+	color: #94989B;
+	font-size: 24rpx;
+}
+
+.back-icon {
+	width: 15rpx;
+}

pages/my-order/select-service/select-service.vue

@@ -0,0 +1,74 @@
+<!-- 选择服务 -->
+<template>
+	<view class="wrap">
+		
+		<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>
+		
+		<view class="box">
+			<view class="box-label">
+				选择服务类型
+			</view>
+			<view class="select-service-list">
+				<view class="select-service-item">
+					<image src="../../../static/service-2.png" class="select-service-icon" mode="widthFix"></image>
+					<view class="select-service-sidebar">
+						<view class="select-service-column">
+							<view class="select-service-name">我要退款(无需退货)</view>
+							<view class="select-service-msg">没收到货,或与卖家协商同意不用退货只退款</view>
+						</view>
+						<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="select-service-item">
+					<image src="../../../static/service-1.png" class="select-service-icon" mode="widthFix"></image>
+					<view class="select-service-sidebar">
+						<view class="select-service-column">
+							<view class="select-service-name">我要退货退款</view>
+							<view class="select-service-msg">已收到货,需要退还收到的货物</view>
+						</view>
+						<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./select-service.css";
+</style>

pages/my/online-service/online-service.css

@@ -0,0 +1,232 @@
+ 
+.bg {
+	width: 100%;
+	height: 380rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: linear-gradient(180deg, #F2501A, #FF865D);
+}
+
+.container-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 30rpx 30rpx 114rpx;
+	box-sizing: border-box;
+	position: relative;
+	top: calc(98rpx + var(--status-bar-height))
+}
+
+.top {
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.icon {
+	width: 204rpx;
+	height: 190rpx;
+	margin-left: -30rpx;
+}
+
+.msg {
+	flex: 1;
+	min-height: 80rpx;
+	display: flex;
+	align-items: center;
+	background-color: #FFFFFF;
+	border-radius: 24rpx 24rpx 24rpx 0;
+	color: #202020;
+	font-size: 24rpx;
+	padding: 5rpx 16rpx 5rpx 8rpx;
+	box-sizing: border-box;
+	margin-left: -20rpx;
+	margin-top: -60rpx;
+}
+
+.problem-module {
+	width: 100%;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	margin-top: -50rpx;
+}
+
+.problem-top {
+	width: 100%;
+	padding: 38rpx 28rpx 0;
+	box-sizing: border-box;
+}
+
+.problem-bottom {
+	width: 100%;
+	height: 94rpx;
+	line-height: 94rpx;
+	display: flex;
+	align-items: center;
+	color: #777777;
+	font-size: 24rpx;
+	padding: 0 56rpx;
+	box-sizing: border-box;
+	border-top: 1px solid #F2F2F2;
+}
+
+.row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 40rpx;
+}
+
+.row-between text {
+	color: #1F2334;
+	font-size: 36rpx;
+	font-weight: bold;
+}
+
+.refresh-btn {
+	display: flex;
+	align-items: center;
+	color: #F2501A;
+	font-size: 24rpx;
+	border-radius: initial;
+}
+
+.refresh-btn image {
+	width: 28rpx;
+	height: 23rpx;
+	margin-right: 5rpx;
+}
+
+.problem-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 24rpx;
+}
+
+.problem-item {
+	width: 100%;
+	padding-left: 36rpx;
+	box-sizing: border-box;
+	position: relative;
+	color: #1F2334;
+	font-size: 28rpx;
+	margin-bottom: 30rpx;
+}
+
+.problem-item:last-child {
+	margin-bottom: 0;
+}
+
+.problem-item::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translate(0, -50%);
+	width: 8rpx;
+	height: 7rpx;
+	border-radius: 2rpx;
+	background: linear-gradient(90deg, #E63D23, #F58711);
+}
+
+.footer {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #fff;
+	height: 114rpx;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 999;
+	padding: 0 6rpx;
+	box-sizing: border-box;
+}
+
+.footer button {
+	border-radius: initial;
+	height: inherit;
+	line-height: inherit;
+	display: flex;
+	align-items: center;
+	background-color: initial;
+	padding: 0 20rpx;
+}
+
+.footer button image {
+	width: 78rpx;
+	height: 78rpx;
+}
+
+.chat-input {
+	flex: 1;
+	height: 78rpx;
+	padding: 0 30rpx;
+	box-sizing: border-box;
+	border-radius: 16rpx;
+	background-color: #F2F2F2;
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.placeholder {
+	color: #202020;
+}
+
+.chat-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 58rpx;
+}
+
+.chat-me-box {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-bottom: 44rpx;
+}
+
+.chat-me-msg {
+	min-width: 246rpx;
+	min-height: 86rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #F2501A;
+	border-radius: 16rpx 16rpx 0 16rpx;
+	color: #FFFFFF;
+	font-size: 28rpx;
+	padding: 17rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.chat-you-box {
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	margin-bottom: 44rpx;
+}
+
+.chat-you-msg {
+	min-width: 246rpx;
+	max-width: 580rpx;
+	min-height: 86rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #FFFFFF;
+	border-radius: 16rpx 16rpx 16rpx 0;
+	color: #1F2334;
+	font-size: 28rpx;
+	padding: 17rpx 24rpx;
+	box-sizing: border-box;
+}

pages/my/online-service/online-service.vue

@@ -1,23 +1,113 @@
-<!-- 在线客服 -->
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
+<!-- 在线客服 -->
+<template>
+	<view class="wrap">
+
+		<HeaderViewBar ref='HeaderViewBar' title='在线客服' :opacity="scrollTop / 20" backgroundColor='#F2501A'
+			style="position: fixed; top: 0; z-index: 999999999;" @tap="back">
+		</HeaderViewBar>
+
+		<image src="../../../static/bg-9.png" mode="widthFix" class="bg"></image>
+
+		<view class="container-wrap">
+
+			<view class="top">
+				<image src="../../../static/icon-13.png" class="icon" mode=""></image>
+				<view class="msg">
+					Hi，我是携手熊猫客服，有什么问题直接向我提问
+				</view>
+			</view>
+
+			<view class="problem-module">
+				<view class="problem-top">
+					<view class="row-between">
+						<text>常见问题</text>
+						<view class="refresh-btn">
+							<image src="../../../static/refresh-icon2.png" mode=""></image>
+							换一换
+						</view>
+					</view>
+					<view class="problem-list">
+						<view class="problem-item">
+							佣金结算现场答疑
+						</view>
+						<view class="problem-item">
+							退换货的订单还有佣金吗？
+						</view>
+						<view class="problem-item">
+							退税问题相关答疑
+						</view>
+						<view class="problem-item">
+							佣金什么时间结算
+						</view>
+					</view>
+				</view>
+				<view class="problem-bottom">
+					以上问题都不是，直接发送您的问题
+				</view>
+			</view>
+
+			<view class="chat-box">
+				<view class="chat-me-box">
+					<view class="chat-me-msg">
+						如何退款
+					</view>
+				</view>
+				<view class="chat-you-box">
+					<view class="chat-you-msg">
+						哎呀，这个问题携手熊猫客服暂时无法回答，您可以点击屏幕左下角联系人工客服为您解答，或者点击右下角上报故障，待客服查看后给您反馈。
+					</view>
+				</view>
+			</view>
+
+
+		</view>
+
+
+
+		<view class="footer">
+			<button type="default">
+				<image src="../../../static/chat-1.png" mode=""></image>
+			</button>
+			<input type="text" value="" placeholder="在此处向我提问吧" placeholder-class="placeholder" class="chat-input" />
+			<button type="default">
+				<image src="../../../static/chat-2.png" mode=""></image>
+			</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 "./online-service.css";
-</style>
+</style>

pages/my/personal-information/personal-information.vue

@@ -1,20 +1,20 @@
 <!-- 个人资料 -->
 <template>
-	<view class="wrap">
-		<view class="module">
-			<view class="row-between">
-				<text class="label">头像</text>
-				<view class="photo-box">
+	<view class="wrap">   
+		<view class="module">   
+			<view class="row-between">   
+				<text class="label">头像</text>   
+				<view class="photo-box">   
 					<image src="../../../static/img-4.png" class="photo" mode="aspectFill"></image>
-					<view class="replace">
-						更换
-					</view>
-				</view>
-			</view>
+					<view class="replace">   
+						更换   
+					</view>    
+				</view>    
+			</view>    
 			<view class="row-between">
 				<text class="label">昵称</text>
 				<input type="text" value="真的灰常郝" class="input" placeholder="" placeholder-class="placeholder" />
-			</view>
+			</view> 
 		</view>
 		<view class="module">
 			<view class="row-between">

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

@@ -0,0 +1,340 @@
+.bg {
+	width: 100%;
+	height: 380rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: linear-gradient(180deg, #F2501A, #FF865D);
+}
+
+.container-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 30rpx 30rpx;
+	box-sizing: border-box;
+	position: relative;
+	top: calc(98rpx + var(--status-bar-height))
+}
+
+.head {
+	width: 100%;
+	display: flex;
+	align-items: center;
+
+}
+
+.avatar {
+	width: 110rpx;
+	height: 110rpx;
+	border-radius: 50%;
+	border: 2px solid #fff;
+	margin-right: 22rpx;
+	box-sizing: border-box;
+}
+
+.head-sidebar {
+	flex: 1;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.user-name {
+	width: 100%;
+	color: #FFFFFF;
+	font-size: 34rpx;
+	font-weight: bold;
+	margin-bottom: 10rpx;
+}
+
+.tag {
+	width: 158rpx;
+	height: 41rpx;
+	position: relative;
+}
+
+.tag-bg {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+}
+
+.tag-container {
+	width: 100%;
+	height: 100%;
+	line-height: 41rpx;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 100;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #FF6D00;
+	font-size: 24rpx;
+}
+
+.grade-img {
+	width: 28rpx;
+	height: 28rpx;
+	margin-right: 2rpx;
+}
+
+.head-column {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.right-tag {
+	min-width: 232rpx;
+	height: 78rpx;
+	line-height: 78rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50rpx 0 0 50rpx;
+	background: rgba(255, 255, 255, 0.33);
+	margin-right: -30rpx;
+	color: #FFFFFF;
+	font-size: 28rpx;
+}
+
+.right-tag image {
+	width: 30rpx;
+	height: 30rpx;
+	margin-right: 12rpx;
+}
+
+.right-tag text {
+	color: #FFFFFF;
+	font-size: 40rpx;
+	margin-right: 6rpx;
+}
+
+.sign-in-module {
+	width: 100%;
+	min-height: 532rpx;
+	background-color: #FFFFFF;
+	border-radius: 30rpx;
+	margin-top: 36rpx;
+	position: relative;
+}
+
+.sign-in-img {
+	width: 276rpx;
+	height: 252rpx;
+	position: absolute;
+	right: 0;
+	top: -60rpx;
+}
+
+.date-box {
+	display: flex;
+	align-items: center;
+	padding: 32rpx 40rpx 0;
+}
+
+.big-num {
+	font-size: 102rpx;
+	color: #000000;
+	font-weight: bold;
+	margin-right: 18rpx;
+}
+
+.date-column {
+	display: flex;
+	flex-direction: column;
+}
+
+.week-name {
+	color: #000000;
+	font-size: 36rpx;
+}
+
+.date-msg {
+	color: #777777;
+	font-size: 28rpx;
+}
+
+.btn-box {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 60rpx 48rpx 38rpx;
+	box-sizing: border-box;
+}
+
+.btn-box button {
+	width: 100%;
+	height: 90rpx;
+	line-height: 90rpx;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #FFFFFF;
+	font-size: 34rpx;
+	background: linear-gradient(90deg, #F2501A, #F67346);
+}
+
+.gray-bg {
+	background: #E0E0E0 !important;
+	color: #777777 !important;
+}
+
+.sign-in-msg {
+	width: 100%;
+	text-align: center;
+	color: #777777;
+	font-size: 26rpx;
+}
+
+.supplementary-signature {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 16rpx;
+	height: 142rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 20rpx;
+	padding: 0 24rpx 0 36rpx;
+	box-sizing: border-box;
+}
+
+.small-btn {
+	width: 150rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #FFFFFF;
+	font-size: 24rpx;
+	background: linear-gradient(90deg, #F2501A, #F67346);
+}
+
+.supplementary-signature-sidebar {
+	display: flex;
+	align-items: center;
+	font-size: 28rpx;
+	color: #000000;
+}
+
+.supplementary-signature-sidebar image {
+	width: 120rpx;
+	margin-right: 20rpx;
+}
+
+.sign-in-rules {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	margin-top: 20rpx;
+	padding: 26rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.sign-in-rules-label {
+	color: #777777;
+	font-size: 32rpx;
+	margin-bottom: 10rpx;
+}
+
+.sign-in-rules-msg {
+	width: 100%;
+	color: #777777;
+	font-size: 28rpx;
+}
+
+.bar {
+	margin-top: 50rpx;
+}
+
+.steps {
+	width: 100%;
+	display: flex;
+}
+
+.steps-li {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+
+}
+
+.step-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+}
+
+.step-num {
+	height: 10rpx;
+	width: 10rpx;
+	background-color: #A7A7A7;
+	border-radius: 50%;
+	text-align: center;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.steps-li:last-child .step-num {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.steps-li::after {
+	content: "";
+	width: 60%;
+	height: 1px;
+	background-color: #A7A7A7;
+	position: absolute;
+	top: 92%;
+	transform: translate(0, -50%);
+	left: 70%;
+}
+
+.steps-li:last-child::after {
+	width: 0;
+}
+
+.sub_title {
+	font-size: 28rpx;
+	color: #A7A7A7;
+	margin-bottom: 15rpx;
+}
+
+.active .step-num {
+	background-color: #000000;
+}
+
+.steps-li.active::after {
+	background-color: #6C6C6C;
+}
+
+.active .sub_title {
+	color: #000000;
+}
+
+.repair {
+	width: 70rpx !important;
+	position: absolute;
+	left: -20rpx;
+	top: -16rpx;
+}

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

@@ -1,23 +1,163 @@
-<!-- 签到奖励 -->
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
+<!-- 签到奖励 -->
+<template>
+	<view class="wrap">
+
+		<HeaderViewBar ref='HeaderViewBar' title='签到奖励' :opacity="scrollTop / 100"
+			backgroundColor='linear-gradient(90deg, #FF9C6C, #FF6921)'
+			style="position: fixed; top: 0; z-index: 999999999;" @tap="back">
+		</HeaderViewBar>
+
+		<view class="bg"></view>
+
+		<view class="container-wrap">
+
+			<view class="head">
+				<image src="../../../static/avatar.png" class="avatar" mode="aspectFill"></image>
+				<view class="head-sidebar">
+					<view class="head-column">
+						<view class="user-name">
+							真的灰常郝
+						</view>
+						<view class="tag">
+							<image src="../../../static/bg-5.png" class="tag-bg" mode=""></image>
+							<view class="tag-container">
+								<image src="../../../static/grade.png" class="grade-img" mode=""></image>
+								大众会员
+							</view>
+						</view>
+					</view>
+					<view class="right-tag">
+						<image src="../../../static/icon-9.png" mode=""></image>
+						<text>800</text>积分
+					</view>
+				</view>
+			</view>
+
+			<view class="sign-in-module">
+				<view class="date-box">
+					<view class="big-num">
+						06
+					</view>
+					<view class="date-column">
+						<view class="week-name">周三</view>
+						<view class="date-msg">三月2019</view>
+					</view>
+				</view>
+
+				<view class="bar">
+					<view class="steps">
+						<view class="steps-li">
+							<view class="step-content">
+								<view class="sub_title">1天</view>
+								<view class="step-num"></view>
+							</view>
+						</view>
+						<view class="steps-li active">
+							<view class="step-content">
+								<view class="sub_title">2天</view>
+								<view class="step-num"></view>
+							</view>
+						</view>
+						<view class="steps-li active">
+							<view class="step-content">
+								<view class="sub_title">3天</view>
+								<view class="step-num"></view>
+							</view>
+						</view>
+						<view class="steps-li">
+							<view class="step-content">
+								<view class="sub_title">4天</view>
+								<view class="step-num"></view>
+							</view>
+						</view>
+						<view class="steps-li">
+							<view class="step-content">
+								<view class="sub_title">5天</view>
+								<view class="step-num"></view>
+							</view>
+						</view>
+						<view class="steps-li">
+							<view class="step-content">
+								<view class="sub_title">6天</view>
+								<view class="step-num"></view>
+							</view>
+						</view>
+						<view class="steps-li">
+							<view class="step-content">
+								<view class="sub_title">7天</view>
+								<view class="step-num">
+									<image src="../../../static/icon-12.png" mode="widthFix" class="repair"></image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="btn-box">
+					<button type="default">立即签到</button>
+					<!-- 已签到显示 -->
+					<!-- <button type="default" class="gray-bg">立即签到</button> -->
+				</view>
+				<view class="sign-in-msg">
+					连续签到7天可以获得一张补签卡
+				</view>
+				<image src="../../../static/icon-10.png" class="sign-in-img" mode=""></image>
+			</view>
+
+			<view class="supplementary-signature">
+				<view class="supplementary-signature-sidebar">
+					<image src="../../../static/icon-11.png" mode="widthFix"></image>
+					<text>补签卡1张</text>
+				</view>
+				<button type="default" class="small-btn">去补签</button>
+			</view>
+
+			<view class="sign-in-rules">
+				<view class="sign-in-rules-label">签到规则：</view>
+				<view class="sign-in-rules-msg">
+					1.每日签到获得1个积分；
+					2.连续签到2天获得2积分；
+					3.连续签到3天获得3积分；
+					4.连续签到7天可以获得一张补签卡。
+				</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,
+				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 "./sign-in-award.css";
 </style>

pages/shopping-cart/confirm-order/confirm-order.css

@@ -6,6 +6,13 @@
 	box-sizing: border-box;
 }
 
+.address-wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 22rpx;
+}
+
 .address-box {
 	width: 100%;
 	height: 224rpx;
@@ -15,7 +22,7 @@
 	border-radius: 16rpx;
 	padding: 0 30rpx;
 	box-sizing: border-box;
-	margin-bottom: 22rpx;
+	overflow: hidden;
 }
 
 .location-icon {
@@ -52,12 +59,22 @@
 }
 
 .address-msg {
-	width: 100%;
+	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;
@@ -369,4 +386,8 @@
 	align-items: center;
 	font-size: 26rpx;
 	color: #202020;
+}
+
+.border-img {
+	width: 100%;
 }

pages/shopping-cart/confirm-order/confirm-order.vue

@@ -1,22 +1,37 @@
 <!-- 确认订单 -->
 <template>
 	<view class="wrap">
-
-		<view class="address-box">
-			<image src="../../../static/location-2.png" class="location-icon" mode="widthFix"></image>
-			<view class="address-sidebar">
-				<view class="address-column">
-					<view class="people-name">
-						张三 <text>17392389223</text>
-					</view>
-					<view class="address-msg">
-						山东省临沂市河东区芝麻墩街道山东省临沂市河东区芝麻墩街道
-					</view>
-				</view>
-				<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
-			</view>
-		</view>
-
+		
+		<view class="address-wrap">
+			<view class="address-box">
+				<image src="../../../static/location-2.png" class="location-icon" mode="widthFix"></image>
+				<view class="address-sidebar">
+					<view class="address-column">
+						<view class="people-name">
+							张三 <text>17392389223</text>
+						</view>
+						<view class="address-msg">
+							山东省临沂市河东区芝麻墩街道山东省临沂市河东区芝麻墩街道
+						</view>
+					</view>
+					<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+				</view> 
+			</view>
+			<image src="../../../static/border-2.png" class="border-img" mode="widthFix"></image>
+		</view>
+		
+		<!-- 没有收货地址的时候显示 -->
+		<!-- <view class="address-wrap">
+			<view class="address-box">
+				<image src="../../../static/location-2.png" class="location-icon" mode="widthFix"></image>
+				<view class="address-sidebar">
+					<text class="normal-msg">未选择收货地址</text>
+				</view> 
+				<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
+			</view>
+			<image src="../../../static/border-2.png" class="border-img" mode="widthFix"></image>
+		</view> -->
+		
 		<view class="product-module">
 			<view class="product-module-label">
 				限源预售