小程序评论页面制作

order-app/src/pages/order/order.vue

@@ -49,7 +49,7 @@
 								<view class="bottom">
 									<view @click="cancel(res,index)" v-if="res.status == '0'" class="exchange btn">取消订单
 									</view>
-									<view v-if="res.status == '2'" class="evaluate btn">评价</view>
+									<view @click="commentBtn" v-if="res.status == '2'" class="evaluate btn">评价</view>
 								</view>
 							</view>
 							<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
@@ -58,6 +58,12 @@
 				</swiper-item>
 			</swiper>
 		</view>
+		<u-modal confirm-color="#F3AF28" :content-style="{padding: '10px'}" :show-cancel-button='true' title="评论"
+			:zoom="false" v-model="show" @confirm='confirmBtn' @cancel="cancelBtn">
+			<view style="height: 100px;">
+				<textarea placeholder="请输入评论" auto-height />
+			</view>
+		</u-modal>
 	</view>
 </template>
 
@@ -73,6 +79,12 @@
 		ref,
 		computed
 	} from 'vue'
+	//评论弹框显示
+	const show = ref(false)
+	//评价点击事件
+	const commentBtn = () => {
+		show.value = true
+	}
 	const tabs = ref(null);
 	const orderList = ref([
 		[],
@@ -198,6 +210,16 @@
 			}
 		});
 	}
+	//评论提交
+	const confirmBtn = () => {
+		console.log('确定')
+		show.value = false
+	}
+	//评论取消
+	const cancelBtn = () => {
+		console.log('取消')
+		show.value = false
+	}
 	onReady(() => {
 		getOrderList(0);
 	})