更新

App.vue

@@ -10,11 +10,12 @@
 </script>
 
 <style lang="scss">
-	@import url("common.scss");
+    @import '/common.scss';
 	/*每个页面公共css */
 	body{
-		background-color: #f7f7f7;
-		font-size: 30rpx;
+		background-color: $uni-color-background;
+		// background-color: '#f40';
+		font-size: 28rpx;
 	}
 	.page{
 		padding-top: var(--window-top);

components/base/tabbar.vue

@@ -84,7 +84,7 @@
 .tabbar{
 	position: fixed;
 	width: 750rpx;
-	background-color: #1B1713;
+	background-color: $uni-color-card-background;
 	display: flex;
 	justify-content: center;
 	align-items: center;

components/cart/CardList.vue

@@ -1,13 +1,13 @@
 <template>
     <view class="cardList">
-        <view class="container" v-for="(item, index) in cardListData" :key="index">
+        <view class="container" @click="toOrderDetails" v-for="(item, index) in cardListData" :key="index">
             <view class="head">
                 <text class="orderTime">下单时间：{{item.orderTime}}</text>
                 <text class="orderStatus" :class="item.state === 'U' ? 'active' : ''">{{item.stateText}}</text>
             </view>
-            <view class="content" :class="['U','S'].includes(item.state) ? 'content_border' : ''">
+            <view class="content cardStyle_" :class="['U','S'].includes(item.state) ? 'content_border' : ''">
                 <view class="left">
-                    <img :src="item.imgUrl" alt="">
+                    <image :src="item.imgUrl" alt="">
                 </view>
                 <view class="right">
                     <view class="detailed">
@@ -19,7 +19,7 @@
                 </view>
             </view>
             <view class="button-sp-area" v-if="Array.isArray(item.btnObj) && item.btnObj.length > 0">
-				<button @click="skip(val)" :style="{background: val.bgColor, color: val.color}" v-for="(val, i) in item.btnObj" :key="i" class="mini-btn" size="mini">{{val.btnTitle}}</button>
+				<button @click.stop="skip(val)" :style="{background: val.bgColor, color: val.color}" v-for="(val, i) in item.btnObj" :key="i" class="mini-btn" size="mini">{{val.btnTitle}}</button>
 			</view>
         </view>
     </view>
@@ -53,9 +53,10 @@ export default {
     },
     methods: {
 		skip(val) {
-			uni.navigateTo({
-				url:'/pages_order/orderDetails'
-			})
+			this.$emit('btnClick', val)
+		},
+		toOrderDetails(val) {
+			this.$emit('toOrderDetails', val)
 		}
     }
 };
@@ -68,7 +69,7 @@ export default {
             margin-top: 31rpx;
             padding: 25rpx 0;
             border-radius: 20rpx;
-            background: #1B1713;
+            background: $uni-color-card-background;
             .head {
                 display: flex;
                 justify-content: space-between;
@@ -86,73 +87,6 @@ export default {
             .content_border {
                 border-bottom: 1px solid #2A2A2A;
             }
-            .content {
-                display: flex;
-                padding: 24rpx 35rpx;
-                .left {
-                    width: 228rpx;
-                    height: 228rpx;
-                    border-radius: 20rpx;
-                    overflow: hidden;
-                    img {
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-                .right {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    flex: 1;
-                    margin-left: 26px;
-                    color: $uni-text-color-grey;
-                    font-size: 24rpx;
-                    .detailed {
-                        .title {
-                            font-size: 32rpx;
-                            color: #fff;
-                            padding-top: 11rpx;
-                        }
-                        .date {
-                            padding: 25rpx 0 19rpx;
-                            display: flex;
-                            align-items: center;
-                            &::before {
-                                content: '';
-                                display: block;
-                                background: url('@/static/image/cart/timeIcon.png') no-repeat;
-                                background-size: 100% 100%;
-                                width: 24rpx;
-                                height: 24rpx;
-                                margin-right: 10rpx;
-                            }
-                        }
-                        .address {
-                            display: flex;
-                            align-items: center;
-                            &::before {
-                                content: '';
-                                display: block;
-                                background: url('@/static/image/cart/addressIcon.png') no-repeat;
-                                background-size: 100% 100%;
-                                width: 22rpx;
-                                height: 26rpx;
-                                margin-right: 10rpx;
-                            }
-                        }
-                    }
-                    .price {
-                        font-size: 28rpx;
-                        color: #fff;
-                        text-align: right;
-                        text {
-                            color: $uni-text-color-grey;
-                            font-size: 25rpx;
-                            padding-right: 10rpx;
-                        }
-                    }
-                }
-            }
             .button-sp-area {
                 text-align: right;
                 padding-top: 20rpx;

pages.json

@@ -64,6 +64,22 @@
 					"navigationStyle": "custom" ,
 					"navigationBarTextStyle": "white"
 				}
+			},
+			{
+				"path": "invoiceIssuance",
+				"style": {
+					"enablePullDownRefresh": true,
+					"navigationStyle": "custom" ,
+					"navigationBarTextStyle": "white"
+				}
+			},
+			{
+				"path": "invoiceRecords",
+				"style": {
+					"enablePullDownRefresh": true,
+					"navigationStyle": "custom" ,
+					"navigationBarTextStyle": "white"
+				}
 			}
 		]
 	},

pages/components/Navbar.vue

@@ -0,0 +1,77 @@
+<template>
+    <uv-navbar :leftIconColor="leftIconColor" :autoBack="autoBack" :title="title" :bgColor="bgColor" :leftIconSize="leftIconSize" :height="height" :titleStyle="titleStyle" @leftClick="leftClick"></uv-navbar>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        };
+    },
+    props: {
+        autoBack: {
+            type: Boolean,
+            default: false,
+            required: false
+        },
+        title: {
+            type: String,
+            default: '',
+            required: false
+        },
+        bgColor: {
+            type: String,
+            default: 'transparent',
+            required: false
+        },
+        
+        leftIconSize: {
+            type: String,
+            default: '20rpx',
+            required: false
+        },
+        leftIconColor: {
+            type: String,
+            default: '',
+            required: false
+        },
+        height: {
+            type: String,
+            default: '100rpx',
+            required: false
+        },
+        titleStyle: {
+            type: Object,
+            default: {},
+            required: false
+        },
+        autoBack: {
+            type: Boolean,
+            default: false,
+            required: false
+        },
+    },
+    components: {
+
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+        leftClick() {}
+    }
+};
+</script>
+
+<style scoped lang="scss">
+</style>

pages/index/cart.vue

@@ -1,18 +1,19 @@
 <template>
 	<view class="cart">
 		<view class="head-box"></view>
-		<uv-navbar title="我的订单" bgColor="transparent" leftIconSize="0px" height="100rpx"></uv-navbar>
-		<view class="content">
-			<uv-tabs :scrollable="false" @click="tabs" :list="tabList" lineWidth="40" :lineColor="`url(${lineBg}) 100% 100%`"
-				:activeStyle="{
-					color: '#FD5C5C',
-					fontWeight: 'bold',
-					transform: 'scale(1.05)'
-				}" :inactiveStyle="{
-					color: '#999',
-					transform: 'scale(1)'
-				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></uv-tabs>
-			<cardList :cardListData="cardListData" />
+        <Navbar title="我的订单" :bgColor="bgColor" leftIconSize="0px" height="100rpx" :titleStyle="{color:fontColor}" />
+		<view class="content contentPosition_">
+			<uv-tabs 
+				:scrollable="false"
+				@click= "tabs"
+				:list="tabList" 
+				lineWidth="40" 
+				:lineColor="`url(${lineBg}) 100% 100%`"
+				:activeStyle="{color: '#FD5C5C', fontWeight: 'bold',transform: 'scale(1.05)'}"
+				:inactiveStyle="{color: '#999', transform: 'scale(1)'}" 
+				itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
+			></uv-tabs>
+			<cardList :cardListData="cardListData" @btnClick="btnClick" @toOrderDetails="toOrderDetails" />
 		</view>
 		<tabber select="cart" />
 	</view>
@@ -21,11 +22,15 @@
 <script>
 	import tabber from '@/components/base/tabbar.vue'
 	import cardList from '@/components/cart/cardList.vue'
+	import Navbar from '@/pages/components/Navbar.vue'
+    import { globalMixin } from '../mixins/globalMixin';
 
 	export default {
-		components: {
+        mixins: [globalMixin],
+		components:{
 			tabber,
-			cardList
+            cardList,
+            Navbar
 		},
 		data() {
 			return {
@@ -111,35 +116,29 @@
 		methods: {
 			tabs(val) {
 				console.log(val);
+			},
+			toOrderDetails(val) {
+					uni.navigateTo({
+						url: '/pages_order/orderDetails'
+					})
+			},
+			btnClick({ id }) { // 0取消活动  1活动签到  2活动评价   3开具发票
+				console.log(id);
+				if(id === '2') {
+					uni.navigateTo({
+						url: '/pages_order/orderEvaluation'
+					})
+					return;
+				}
+				if(id === '3') {
+					uni.navigateTo({
+						url: '/pages_order/invoiceIssuance'
+					})
+					return;
+				}
 			}
 		}
 	}
 </script>
 
-<style lang="scss">
-	page {
-		background-color: #060504;
-	}
-</style>
-<style scoped lang="scss">
-	.cart {
-		.head-box {
-			background: url('@/static/image/nav-bg.png') no-repeat;
-			background-size: 100% 100%;
-			width: 100%;
-			height: 534rpx;
-			position: absolute;
-		}
-
-		/deep/.uv-navbar__content__title {
-			color: #fff;
-		}
-
-		.content {
-			position: absolute;
-			width: 100%;
-			color: #fff;
-			padding-top: calc(var(--status-bar-height) + 100rpx);
-		}
-	}
-</style>
+<style scoped lang="scss"></style>

pages/mixins/globalMixin.js

@@ -0,0 +1,33 @@
+export const globalMixin = {
+    data() {
+      return {
+        bgColor:'transparent',
+		fontColor:'#fff',
+        leftIconColor: '#fff'
+      };
+    },
+    computed: {
+        customStyle() {
+            return {
+                height: '88rpx',
+                color: '#FF4546',
+            }
+        }
+    },
+    created() {
+    },
+    onPageScroll(e) {
+        if(e.scrollTop > 30) {
+            this.bgColor ='#fff'
+            this.fontColor ="#000",
+            this.leftIconColor ="#000"
+        }else{
+            this.bgColor ='transparent'
+            this.fontColor ="#fff",
+            this.leftIconColor ="#fff"
+        }
+    },
+    methods: {
+    }
+  };
+  

pages_order/invoiceIssuance.vue

@@ -0,0 +1,117 @@
+<template>
+	<view class="invoiceIssuance">
+        <view class="head-box"></view>
+		<Navbar title="订单详情" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
+        <view class="content contentPosition_">
+            <view class="info cardStyle_">
+                <view class="left">
+                    <image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
+                </view>
+                <view class="right">
+                    <view class="detailed">
+                        <view class="title">夏日去撒野旅游计划～</view>
+                        <view class="date">2024.10.28 10:00</view>
+                        <view class="address">成都市东丽湖露营地32号</view>
+                    </view>
+                    <view class="price"><text>总计</text>¥800.00</view>
+                </view>
+            </view>
+            <view class="choice">
+                <uv-radio-group
+                    siz="300"
+                    labelSize="25rpx"
+                    iconSize="25rpx"
+                    v-model="radioValue" 
+                    placement="column" 
+                    shape="square"
+                    labelColor="#fff"
+                    activeColor="#FF4546"
+                    iconPlacement="right">
+                    <uv-radio name="个人" label="个人"></uv-radio>
+                    <uv-radio name="企业" label="个人"></uv-radio>
+                </uv-radio-group>
+            </view>
+            <view class="iptInfo">
+                <uv-form-item label="企业名称" labelWidth="180rpx" :customStyle="aa" borderBottom>
+                    <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="enterpriseName" border="none"></uv-input>
+                </uv-form-item>
+                <uv-form-item label="企业名称" labelWidth="180rpx" :customStyle="aa" borderBottom>
+                    <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="enterpriseName" border="none"></uv-input>
+                </uv-form-item>
+                <uv-form-item label="企业名称" labelWidth="180rpx" :customStyle="aa" borderBottom>
+                    <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="enterpriseName" border="none"></uv-input>
+                </uv-form-item>
+            </view>
+            <view style="padding: 65rpx 35rpx;">
+                <uv-button @click="toInvoiceRecords" :custom-style="customStyle" type="primary" shape="circle" color="#381615" text="申请"></uv-button>
+            </view>
+        </view>
+       
+        
+	</view>
+</template>
+
+<script>
+    import Navbar from '@/pages/components/Navbar.vue'
+    import { globalMixin } from '../pages/mixins/globalMixin';
+	export default{
+        mixins: [globalMixin],
+        components:{
+            Navbar
+		},
+		data() {
+			return {
+                radioValue: '香蕉',
+                enterpriseName: '',
+                aa: {
+                    color: '#f40'
+                }
+			}
+		},
+		methods: {
+            toInvoiceRecords() {
+                uni.navigateTo({
+                    url: '/pages_order/invoiceRecords'
+                })
+            }
+		}
+	}
+</script>
+<style scoped lang="scss">
+.invoiceIssuance {
+    margin-bottom: 500rpx;
+    .content {
+        .info {
+            margin: 10rpx 32rpx 0rpx;;
+            border-radius: 26rpx;
+        }
+        .choice {
+            /deep/.uv-radio-group {
+                margin: 32px 32rpx 40rpx;
+                .uv-radio {
+                    color: #fff;
+                    padding: 45rpx 35rpx;
+                    background: $uni-color-card-background;
+                    border-radius: 26rpx;
+                    margin-bottom: 16rpx;
+                }
+                .uv-radio__icon-wrap {
+                    width: 32rpx!important;
+                    height: 32rpx!important;
+                }
+            }
+        }
+        .iptInfo {
+            background: $uni-color-card-background;
+            padding: 41rpx 46rpx 60rpx;
+            margin: 32px 32rpx 40rpx;
+            border-radius: 26rpx;
+            /deep/.uv-form-item__body__left__content__label {
+                color: #fff!important;
+                font-size: 32rpx;
+            }
+        }
+    }
+}
+
+</style>

pages_order/invoiceRecords.vue

@@ -0,0 +1,83 @@
+<template>
+     <view class='invoiceRecords'>
+        <view class="head-box"></view>
+        <Navbar title="开票记录" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
+        <view class="content contentPosition_">
+            <view class="info cardStyle_">
+                <view class="left">
+                    <image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
+                </view>
+                <view class="right">
+                    <view class="detailed">
+                        <view class="title">夏日去撒野旅游计划～</view>
+                        <view class="date">2024.10.28 10:00</view>
+                        <view class="address">成都市东丽湖露营地32号</view>
+                    </view>
+                    <view class="data">
+                        <text>标准票</text>
+                        <text>×3</text>
+                        <text class="btn">已开票</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+     </view>
+</template>
+
+<script>
+import Navbar from '@/pages/components/Navbar.vue'
+import { globalMixin } from '../pages/mixins/globalMixin';
+
+export default {
+     mixins: [globalMixin],
+    components:{
+        Navbar
+    },
+    data() {
+        return {
+
+        };
+    },
+    components: {
+
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.invoiceRecords {
+    .info {
+        margin: 10rpx 32rpx 0rpx;
+        padding: 35rpx 0 35rpx 24rpx;
+        border-radius: 26rpx;
+        .right {
+            .data {
+                display: flex;
+                justify-content: space-between;
+                .btn {
+                    background: #381615;
+                    color: $uni-color-primary;
+                    padding: 10rpx 40rpx;
+                    border-radius: 30rpx 0px 0px 30rpx;
+                }
+            }
+        } 
+    }
+    
+}
+</style>

pages_order/orderEvaluation.vue

@@ -1,11 +1,103 @@
 <template>
-	<view>
-		第三代
+	<view class="orderEvaluation">
+        <Navbar title="活动评价" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
+		<view class="content">
+			<view class="baseInfo cardBackground_">
+				<view class="statusBox">
+					<i></i>
+					<view class="status">主理人评价</view>
+				</view>
+				<view class="info grayBg">
+					<view class="score">
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/uncheckedIcon.png" mode=""></image>
+					</view>
+					<uv-textarea height="376rpx" :textStyle="{color:fontColor}" border="none" v-model="value" :maxlength="-1" placeholder="请输入内容"></uv-textarea>
+				</view>
+			</view>
+			<view class="baseInfo" style="margin-top: 32rpx;">
+				<view class="statusBox">
+					<i></i>
+					<view class="status">活动评价</view>
+				</view>
+				<view class="info">
+					<view class="score">
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/selectIcon.png" mode=""></image>
+						<image src="@/static/image/cart/uncheckedIcon.png" mode=""></image>
+					</view>
+					<uv-textarea height="376rpx" :textStyle="{color:fontColor}" border="none" v-model="value1" :maxlength="-1" placeholder="请输入内容"></uv-textarea>
+				</view>
+			</view>
+		</view>
+		<view style="padding: 65rpx 35rpx;">
+			<uv-button :custom-style="customStyle" type="primary" shape="circle" color="#381615" text="活动签到"></uv-button>
+		</view>
 	</view>
 </template>
 
 <script>
-</script>
+	import Navbar from '@/pages/components/Navbar.vue'
+    import { globalMixin } from '../pages/mixins/globalMixin';
 
-<style>
+	export default{
+        mixins: [globalMixin],
+        components:{
+            Navbar
+		},
+		data() {
+			return {
+				value: '',
+				value1: ''
+			}
+		},
+		methods: {
+		}
+	}
+</script>
+<style scoped lang="scss">
+.orderEvaluation {
+	margin-top: 40rpx;
+	.content {
+		padding: 0 35rpx;
+		color: #fff;
+		padding-top: calc(var(--status-bar-height) + 100rpx);
+		.baseInfo{
+			.statusBox {
+				display: flex;
+				align-items: center;
+				padding: 33rpx 47rpx 24rpx;
+				i {
+					background: url('@/static/image/cart/evaluateIcon.png') no-repeat;
+					background-size: 100% 100%;
+					display: block;
+					width: 33rpx;
+					height: 29rpx;
+					margin-right: 15rpx;
+				}
+			}
+			.info {
+				.score {
+					image {
+						width: 30rpx;
+						height: 30rpx;
+						margin-right: 30rpx;
+						margin-bottom: 34rpx;
+					}
+				}
+				/deep/.uv-textarea {
+					background: #493734;
+				}
+				.aa {
+					color: #fff!important;
+				}
+			}
+		}
+    }
+}
 </style>

uni.scss

@@ -13,6 +13,8 @@
  */
 /* 颜色变量 */
 $uni-color: #A3D250;
+$uni-color-background: #060504;
+$uni-color-card-background: #1B1713;
 
 /* 行为相关颜色 */
 $uni-color-primary: #FF4546;