新增

pages.json

@@ -447,6 +447,33 @@
             }
             
         }
+        ,{
+            "path" : "pages/my-order/evaluation/evaluation",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "评价",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/origin-direct-sales/origin-direct-sales",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "产地直销",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/limited-source-pre-sale/limited-source-pre-sale",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "限源预售",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/index/limited-source-pre-sale/limited-source-pre-sale.css

@@ -0,0 +1,298 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.swiper-box {
+	width: 100%;
+}
+
+.swiper {
+	width: 100%;
+	height: 250rpx;
+}
+
+.banner-img {
+	width: 100%;
+	height: 250rpx;
+}
+
+.header-bottom {
+	width: 100%;
+	height: 102rpx;
+	display: flex;
+	align-items: center;
+	background-color: #fff;
+	border-radius: 32rpx 32rpx 0 0;
+	margin-top: -20rpx;
+	z-index: 100;
+	position: relative;
+}
+
+
+.header-item {
+	flex: 1;
+	height: 102rpx;
+	line-height: 102rpx;
+	color: #A7A7A7;
+	font-size: 30rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.sanjiao {
+	width: 20rpx;
+	margin-left: 8rpx;
+	-webkit-filter: grayscale(100%);
+	-moz-filter: grayscale(100%);
+	-ms-filter: grayscale(100%);
+	-o-filter: grayscale(100%);
+	filter: grayscale(100%);
+	filter: gray;
+	opacity: 0.4;
+	-webkit-transition: .25s;
+}
+
+.sanjiaoSelect {
+	width: 20rpx;
+	margin-left: 8rpx;
+	-webkit-filter: grayscale(0%);
+	-moz-filter: grayscale(0%);
+	-ms-filter: grayscale(0%);
+	-o-filter: grayscale(0%);
+	filter: grayscale(0%);
+	filter: gray;
+	opacity: 1;
+
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	transform: rotate(180deg);
+
+	-webkit-transition: .25s;
+	-moz-transition: .25s;
+	-ms-transition: .25s;
+	-o-transition: .25s;
+	-webkit-transition: .25s;
+}
+
+.mask {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 102rpx;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.38);
+	z-index: 10;
+}
+
+.collectionTime-window {
+	position: absolute;
+	width: 100%;
+	top: 102rpx;
+	left: 0;
+	overflow: hidden;
+	background-color: #fff;
+	z-index: 99999999;
+	display: flex;
+	flex-wrap: wrap;
+	padding: 22rpx 40rpx 22rpx;
+	box-sizing: border-box;
+	border-radius: 0 0 32rpx 32rpx;
+}
+
+.collectionTime-item {
+	width: 31.3333%;
+	height: 84rpx;
+	line-height: 84rpx;
+	background-color: #F2F2F2;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 3%;
+	margin-bottom: 20rpx;
+	color: #777777;
+	font-size: 28rpx;
+}
+
+.collectionTime-item:nth-child(3n) {
+	margin-right: 0;
+}
+
+.allCategories-window {
+	position: absolute;
+	width: 100%;
+	top: 102rpx;
+	left: 0;
+	overflow: hidden;
+	background-color: #fff;
+	z-index: 99999999;
+	display: flex;
+	flex-wrap: wrap;
+	border-radius: 0 0 32rpx 32rpx;
+	padding: 26rpx 40rpx 0;
+	box-sizing: border-box;
+}
+
+.allCategories-item {
+	width: 25%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #202020;
+	font-weight: bold;
+	font-size: 28rpx;
+	margin-bottom: 40rpx;
+}
+
+.allCategories-item image {
+	height: 40rpx;
+	margin-bottom: 8rpx;
+}
+
+.list {
+	width: 100%;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+.product-item {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 16rpx;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+	box-sizing: border-box;
+	padding: 24rpx;
+}
+
+.product-item:last-child {
+	margin-bottom: 0;
+}
+
+.product-item-img {
+	width: 224rpx;
+	height: 224rpx;
+	border-radius: 12rpx;
+	margin-right: 24rpx;
+}
+
+.product-item-column {
+	flex: 1;
+	height: 224rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.product-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-weight: bold;
+	font-size: 28rpx;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.product-item-btn {
+	width: 40rpx;
+	height: 40rpx;
+	line-height: 40rpx;
+	border-radius: initial;
+}
+
+.product-item-btn image {
+	width: 100%;
+	height: 100%;
+}
+
+.product-item-price {
+	color: #F2501A;
+	font-size: 28rpx;
+}
+
+.product-item-price>text {
+	color: #919191;
+	font-size: 24rpx;
+	margin-left: 6rpx;
+	text-decoration: line-through;
+}
+
+.recommend-tag {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	font-size: 26rpx;
+	color: #202020;
+}
+
+.recommend-tag image {
+	width: 29rpx;
+	height: 29rpx;
+	margin-right: 8rpx;
+}
+
+.recommend-msg {
+	width: 100%;
+	color: #A7A7A7;
+	font-size: 26rpx;
+}
+
+.recommend-row {
+	width: 100%;
+	color: #A7A7A7;
+	font-size: 26rpx;
+}
+
+.margin {
+	margin-left: 36rpx;
+}
+
+.red {
+	color: #F2501A;
+}
+
+.tab-list {
+	width: 100%;
+	height: 98rpx;
+	white-space: nowrap;
+	padding: 0 40rpx;
+	box-sizing: border-box;
+}
+
+.child {
+	display: inline-block;
+	height: 98rpx;
+	line-height: 98rpx;
+	font-size: 30rpx;
+	color: #A7A7A7;
+	margin-right: 62rpx;
+	position: relative;
+}
+
+.child:last-child {
+	margin-right: 0;
+}
+
+.child.active {
+	color: #F2501A;
+	font-weight: bold;
+}

pages/index/limited-source-pre-sale/limited-source-pre-sale.vue

@@ -0,0 +1,276 @@
+<!-- 限源预售 -->
+<template>
+	<view class="wrap">
+
+		<view class="swiper-box">
+			<swiper class="swiper" indicator-dots="true" indicator-color="#fff" indicator-active-color="#000"
+				: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>
+
+		<view class="header-bottom">
+			<view class="header-item" @tap="showSeason">
+				时令
+				<image src="../../../static/sanjiao-bottom.png"
+					:class="[isShowSeason == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
+			</view>
+			<view class="header-item" @tap="showArea">
+				地域
+				<image src="../../../static/sanjiao-bottom.png"
+					:class="[isShowArea == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
+			</view>
+			<view class="header-item" @tap="showType">
+				品类
+				<image src="../../../static/sanjiao-bottom.png"
+					:class="[isShowType == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
+			</view>
+
+			<!-- 时令-弹窗 -->
+			<view v-show="isShowSeason">
+				<view class="mask" @tap="closeSeason"></view>
+				<view class="collectionTime-window">
+					<view class="collectionTime-item">
+						1月
+					</view>
+					<view class="collectionTime-item">
+						2月
+					</view>
+					<view class="collectionTime-item">
+						3月
+					</view>
+					<view class="collectionTime-item">
+						4月
+					</view>
+					<view class="collectionTime-item">
+						5月
+					</view>
+					<view class="collectionTime-item">
+						6月
+					</view>
+					<view class="collectionTime-item">
+						7月
+					</view>
+					<view class="collectionTime-item">
+						8月
+					</view>
+					<view class="collectionTime-item">
+						9月
+					</view>
+					<view class="collectionTime-item">
+						10月
+					</view>
+					<view class="collectionTime-item">
+						11月
+					</view>
+					<view class="collectionTime-item">
+						12月
+					</view>
+				</view>
+			</view>
+			<!-- 时令-弹窗  -->
+
+			<!-- 地域-弹窗 -->
+			<view v-show="isShowArea">
+				<view class="mask" @tap="closeArea"></view>
+				<view class="collectionTime-window">
+					<view class="collectionTime-item">
+						华中地区
+					</view>
+					<view class="collectionTime-item">
+						华北地区
+					</view>
+					<view class="collectionTime-item">
+						华东地区
+					</view>
+					<view class="collectionTime-item">
+						华南地区
+					</view>
+					<view class="collectionTime-item">
+						东北地区
+					</view>
+					<view class="collectionTime-item">
+						西北地区
+					</view>
+				</view>
+			</view>
+			<!-- 地域-弹窗  -->
+
+			<!-- 品类-弹窗 -->
+			<view v-show="isShowType">
+				<view class="mask" @tap="closeType"></view>
+				<view class="allCategories-window">
+					<view class="allCategories-item">
+						<image src="../../../static/categories-1.png" mode="heightFix"></image>
+						地产本草
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-2.png" mode="heightFix"></image>
+						草本茗茶
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-3.png" mode="heightFix"></image>
+						干菌蔬果
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-4.png" mode="heightFix"></image>
+						五谷杂粮
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-5.png" mode="heightFix"></image>
+						水产干货
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-6.png" mode="heightFix"></image>
+						调味佳料
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-7.png" mode="heightFix"></image>
+						地产畜禽
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-8.png" mode="heightFix"></image>
+						生态饮品
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-9.png" mode="heightFix"></image>
+						养生器皿
+					</view>
+					<view class="allCategories-item">
+						<image src="../../../static/categories-10.png" mode="heightFix"></image>
+						地产良酿
+					</view>
+				</view>
+			</view>
+			<!-- 品类-弹窗  -->
+
+		</view>
+		
+		<scroll-view scroll-x="true" class="tab-list">
+			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
+				:key="index" @click="checked(index)">
+				{{item.title}}
+			</view>
+		</scroll-view>
+		
+		<view class="list">
+			<view class="product-item">
+				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+				<view class="product-item-column">
+					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+					<view class="recommend-tag">
+						<image src="../../../static/icon-3.png" mode=""></image>
+						口干多汁，品质极佳
+					</view>
+					<view class="recommend-msg">7月、8月采摘 | 新疆</view>
+					<view class="recommend-row">
+						限量100份 <text class="margin">已预订<text class="red">56</text>份</text>
+					</view>
+					<view class="product-item-price">￥394.00</view>
+				</view>
+			</view>
+			<view class="product-item">
+				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+				<view class="product-item-column">
+					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+					<view class="recommend-tag">
+						<image src="../../../static/icon-3.png" mode=""></image>
+						口干多汁，品质极佳
+					</view>
+					<view class="recommend-msg">7月、8月采摘 | 新疆</view>
+					<view class="recommend-row">
+						限量100份 <text class="margin">已预订<text class="red">56</text>份</text>
+					</view>
+					<view class="product-item-price">￥394.00</view>
+				</view>
+			</view>
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//轮播
+				swiperList: [
+					'../../../static/banner-5.png',
+					'../../../static/banner-5.png',
+					'../../../static/banner-5.png'
+				],
+
+				//时令-弹窗
+				isShowSeason: false,
+
+				//地域-弹窗
+				isShowArea: false,
+
+				//品类-弹窗
+				isShowType: false,
+				
+				//选项卡
+				isActive: 0,
+				navList: [{
+					index: 0,
+					title: '春季预售',
+				}, {
+					index: 1,
+					title: "夏季预售",
+				}, {
+					index: 2,
+					title: "秋季预售",
+				}, {
+					index: 3,
+					title: "冬季预售",
+				}],
+			}
+		},
+		methods: {
+			/**
+			 * 时令-弹窗
+			 */
+			showSeason() {
+				this.isShowSeason = true;
+			},
+			closeSeason() {
+				this.isShowSeason = false;
+			},
+
+			/**
+			 * 地域-弹窗
+			 */
+			showArea() {
+				this.isShowArea = true;
+			},
+			closeArea() {
+				this.isShowArea = false;
+			},
+
+			/**
+			 * 品类-弹窗
+			 */
+			showType() {
+				this.isShowType = true;
+			},
+			closeType() {
+				this.isShowType = false;
+			},
+			
+			//选项卡
+			checked(index) {
+				this.isActive = index
+			},
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./limited-source-pre-sale.css";
+</style>

pages/index/origin-direct-sales/origin-direct-sales.css

@@ -0,0 +1,89 @@
+page {
+	background-color: #FCB2A8;
+}
+
+.bg {
+	width: 100%;
+}
+
+.list {
+	width: calc(100% - 48rpx);
+	margin: 0 auto 20rpx;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 20rpx 18rpx;
+	box-sizing: border-box;
+}
+
+.product-item {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+	padding-right: 12rpx;
+	box-sizing: border-box;
+}
+
+.product-item:last-child {
+	margin-bottom: 0;
+}
+
+.product-item-img {
+	width: 174rpx;
+	height: 174rpx;
+	border-radius: 12rpx;
+	margin-right: 18rpx;
+}
+
+.product-item-column {
+	flex: 1;
+	height: 174rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.product-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-weight: bold;
+	font-size: 26rpx;
+}
+
+.product-item-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.product-item-btn {
+	width: 40rpx;
+	height: 40rpx;
+	line-height: 40rpx;
+	border-radius: initial;
+}
+
+.product-item-btn image {
+	width: 100%;
+	height: 100%;
+}
+
+.product-item-price {
+	color: #F2501A;
+	font-size: 28rpx;
+}
+
+.product-item-price>text {
+	color: #919191;
+	font-size: 24rpx;
+	margin-left: 6rpx;
+	text-decoration: line-through;
+}

pages/index/origin-direct-sales/origin-direct-sales.vue

@@ -0,0 +1,85 @@
+<!-- 产地直销 -->
+<template>
+	<view class="wrap">
+		<image src="../../../static/bg-10.png" mode="widthFix" class="bg"></image>
+		<view class="list">
+			<view class="product-item">
+				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+				<view class="product-item-column">
+					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+					<view class="product-item-row-between">
+						<view class="product-item-price">
+							￥394.00
+							<text>￥34.00</text>
+						</view>
+						<button type="default" class="product-item-btn">
+							<image src="../../../static/add-icon.png" mode=""></image>
+						</button>
+					</view>
+				</view>
+			</view>
+			<view class="product-item">
+				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+				<view class="product-item-column">
+					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+					<view class="product-item-row-between">
+						<view class="product-item-price">
+							￥394.00
+							<text>￥34.00</text>
+						</view>
+						<button type="default" class="product-item-btn">
+							<image src="../../../static/add-icon.png" mode=""></image>
+						</button>
+					</view>
+				</view>
+			</view>
+			<view class="product-item">
+				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+				<view class="product-item-column">
+					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+					<view class="product-item-row-between">
+						<view class="product-item-price">
+							￥394.00
+							<text>￥34.00</text>
+						</view>
+						<button type="default" class="product-item-btn">
+							<image src="../../../static/add-icon.png" mode=""></image>
+						</button>
+					</view>
+				</view>
+			</view>
+			<view class="product-item">
+				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
+				<view class="product-item-column">
+					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
+					<view class="product-item-row-between">
+						<view class="product-item-price">
+							￥394.00
+							<text>￥34.00</text>
+						</view>
+						<button type="default" class="product-item-btn">
+							<image src="../../../static/add-icon.png" mode=""></image>
+						</button>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./origin-direct-sales.css";
+</style>

pages/my-order/evaluation/evaluation.css

@@ -0,0 +1,380 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx 140rpx;
+	box-sizing: border-box;
+}
+
+.module {
+	width: 100%;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	display: flex;
+	flex-direction: column;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+}
+
+.row {
+	font-size: 28rpx;
+	color: #A7A7A7;
+}
+
+.stars-wrapper {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	margin-bottom: 40rpx;
+}
+
+.star-img {
+	width: 40rpx;
+	height: 40rpx;
+	margin-right: 30rpx;
+}
+
+.evaluation-msg {
+	color: #A7A7A7;
+	font-size: 28rpx;
+}
+
+.item {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+}
+
+.module-label {
+	width: 100%;
+	height: 90rpx;
+	display: flex;
+	align-items: center;
+	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;
+	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;
+}
+
+.name {
+	color: #777777;
+	font-size: 28rpx;
+	margin-right: 28rpx;
+}
+
+.textarea-box {
+	width: 100%;
+}
+
+.textarea-box textarea {
+	width: 100%;
+	height: 136rpx;
+	font-size: 28rpx;
+}
+
+.placeholder {
+	color: #777777;
+}
+
+.img-container {
+	width: 100%;
+	background-color: #FFFFFF;
+	padding: 0 0 0;
+	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: 16rpx;
+	top: 16rpx;
+	z-index: 999;
+}
+
+.close-icon image {
+	width: 22rpx;
+	height: 22rpx;
+}
+
+.image-box {
+	width: 100%;
+	height: 100%;
+}
+
+.footer {
+	width: 100%;
+	height: 140rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 999;
+	background-color: #F2F2F2;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.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;
+}
+
+.mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.38);
+	z-index: 9998;
+}
+
+.window {
+	position: fixed;
+	width: calc(100% - 240rpx);
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border-radius: 20rpx;
+	overflow: hidden;
+	background-color: #fff;
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+}
+
+.window-top {
+	width: 100%;
+	color: #202020;
+	font-size: 30rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.window-bottom {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	border-top: 1px solid #E2E6E9;
+	box-sizing: border-box;
+	margin-top: 44rpx;
+}
+
+.window-bottom button {
+	width: 50%;
+	height: 98rpx;
+	line-height: 98rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #202020;
+	font-size: 30rpx;
+	border-radius: initial;
+	border-right: 1px solid #E2E6E9;
+	background-color: #fff;
+}
+
+.window-bottom button:last-child {
+	border-right: none;
+	color: #F2501A;
+}
+
+.window-title {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #202020;
+	font-size: 32rpx;
+	margin-bottom: 24rpx;
+	padding-top: 20rpx;
+}

pages/my-order/evaluation/evaluation.vue

@@ -0,0 +1,184 @@
+<!-- 评价 -->
+<template>
+	<view class="wrap">
+	
+		<view class="module">
+			<view class="module-label">限源预售</view>
+			<view class="item">
+				<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>
+
+			<view class="stars-wrapper">
+				<text class="name">描述相符:</text>
+				<view v-for="(val, index) in 5">
+					<image @click="setStar(index + 1)" class="star-img"
+						:src="star > index ? '../../../static/star-active.png' : '../../../static/star.png'"
+						mode="aspectFill"></image>
+				</view>
+				<text class="evaluation-msg">好</text>
+			</view>
+
+			<view class="textarea-box">
+				<textarea value="" placeholder="从多个角度评价宝贝，可以帮助更多想买的人" placeholder-class="placeholder" />
+			</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/close-2.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-4.png" class="add-img" mode="aspectFill"></image>
+					</view>
+				</view>
+			</view>
+
+		</view>
+		
+		<view class="module">
+			<view class="module-label">其他</view>
+			<view class="stars-wrapper">
+				<text class="name">物流服务:</text>
+				<view v-for="(val, index) in 5">
+					<image @click="setStar2(index + 1)" class="star-img"
+						:src="star2 > index ? '../../../static/star-active.png' : '../../../static/star.png'"
+						mode="aspectFill"></image>
+				</view>
+				<text class="evaluation-msg">好</text>
+			</view>
+			<view class="stars-wrapper">
+				<text class="name">服务态度:</text>
+				<view v-for="(val, index) in 5">
+					<image @click="setStar3(index + 1)" class="star-img"
+						:src="star3 > index ? '../../../static/star-active.png' : '../../../static/star.png'"
+						mode="aspectFill"></image>
+				</view>
+				<text class="evaluation-msg">好</text>
+			</view>
+		</view>
+		
+		<view class="footer">
+			<button type="default" class="active" @tap="logout">提交</button>
+		</view>
+		
+		
+		<!-- 退出当前账号确认-弹窗 -->
+		<view v-show="isShow">
+			<view class="mask" @tap="close"></view>
+			<view class="window">
+				<view class="window-title">
+					确认要退出评价？
+				</view>
+				<view class="window-top">
+					退出后编辑过的内容将不保存
+				</view>
+				<view class="window-bottom">
+					<button type="default" @tap="close">取消</button>
+					<button type="default" >确定</button>
+				</view>
+			</view>
+		</view>
+		<!-- 退出当前账号确认-弹窗  -->
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				star: 3, //评价
+				star2: 1, //评价
+				star3: 2, //评价
+
+				imageLists: [], //存放图片数组
+				
+				//退出评价确认-弹窗
+				isShow: false,
+			}
+		},
+		methods: {
+			//设置评分
+			setStar: function(star) {
+				this.star = star;
+			},
+			//设置评分
+			setStar2: function(star2) {
+				this.star2 = star2;
+			},
+			//设置评分
+			setStar3: function(star3) {
+				this.star3 = star3;
+			},
+			//删除图片
+			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,
+				})
+			},
+			
+			//退出评价确认-弹窗
+			logout() {
+				this.isShow = true;
+			},
+			close() {
+				this.isShow = false;
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./evaluation.css";
+</style>

pages/my/my-fans/my-fans.vue

@@ -14,7 +14,6 @@
 			</view>
 		</view>
 
-
 		<view class="list">
 			<view class="item">
 				<image src="../../../static/img-4.png" class="avatar" mode="aspectFill"></image>