相关页面编写

src/components/statusBar.vue

+<template>
+	<view class="status_bar">
+		<!-- 这里是状态栏 -->
+		<view class="top_view"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'statusBar',
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	width: 100%;
+}
+.status_bar {
+	height: var(--status-bar-height);
+	width: 100%;
+	background-color: rgba(0,0,0,0);
+}
+.top_view {
+	height: var(--status-bar-height);
+	width: 100%;
+	position: fixed;
+	background-color:rgba(0,0,0,0);
+	top: 0;
+	z-index: 999;
+}
+</style>

src/config/request/apiList/plm.js

+export default {
+	plm: {
+		toBeSelectedQuantity: {
+			url: '/gdep-plm/orderTicket/toBeSelectedQuantity',
+			method: "get"
+		},
+		orderTicketExceptionNum: {
+			url: '/gdep-plm/orderTicket/orderTicketExceptionNum',
+			method: "get"
+		},
+		abolishByIds: {
+			url: '/gdep-plm/orderTicket/abolishByIds',
+			method: "get"
+		},
+	}
+}

src/config/request/apiList/user.js

 export default {
     user:{
+		login:{
+			url: "/gdep-auth/token",
+			method: "POST",
+		},
         register:{
             url: "gdep-enterprise/basics/basicsSaveAndroid",
             method: "post"

src/config/request/apis.js

@@ -3,10 +3,12 @@
  */
 import user from './apiList/user.js'
 import auth from './apiList/auth.js'
+import plm from './apiList/plm.js'
 // import goods from './apiList/goods.js'
 // import base from './apiList/base.js'
 
 export default {
   ...user,
-  ...auth
+  ...auth,
+  ...plm
 };

src/pages/home/fabricDetails.vue

@@ -166,7 +166,6 @@ export default {
 </style>
 <style scoped lang="scss">
 .fabric_tit {
-	height: 284rpx;
 	width: 100%;
 	border-radius: 8rpx 8rpx 0 0;
 	background: rgba(0, 0, 0, 0.6);

src/pages/home/index.vue

 <template>
 	<view>
+		<statusBar />
 		<!-- 展示图 -->
 		<view class="home_top">
 			<image src="../../static/images/home/exhibition@2x.png" style="width: 100%;height: 100%;" mode=""></image>
@@ -16,9 +17,9 @@
 			</view>
 		</view>
 		<!-- 提示信息 -->
-		<view class="u-m-t-20 tips background_d5aa7a u-font-28">
-			<view>
-				12个委托单
+		<view v-if="abolishIds.length > 0" class="u-m-t-20 tips background_d5aa7a u-font-28">
+			<view @click="entrustmentCli">
+				{{ abolishIds.length }}个委托单
 				<span class="color_fff">等待确认寄样，请尽快确认！</span>
 			</view>
 			<view class="color_fff btn" @click="sampleConfirm">寄样确认</view>
@@ -26,9 +27,9 @@
 		<!-- 具体内容  我的面料 -->
 		<view class="home_con u-m-t-20">
 			<view class="home_con_tit">
-				<view class="">
+				<view>
 					<span class="u-font-32">我的面料</span>
-					<span class="color_000 u-font-24">My fabric</span>
+					<span style="line-height: 0;" class="u-m-l-10 color_000 u-font-24">MY FABRIC</span>
 				</view>
 				<view class="u-font-24 color_d5aa7a" @click="seeFabric">查看更多</view>
 			</view>
@@ -41,9 +42,9 @@
 		<!-- 具体内容  我的订单 -->
 		<view class="home_con u-m-t-20">
 			<view class="home_con_tit">
-				<view class="">
+				<view>
 					<span class="u-font-32">我的订单</span>
-					<span class="color_000 u-font-24">My order</span>
+					<span class="u-m-l-10 color_000 u-font-24">MY FABRIC</span>
 				</view>
 				<view class="u-font-24 color_d5aa7a">查看更多</view>
 			</view>
@@ -66,9 +67,16 @@
 	</view>
 </template>
 <script>
+import statusBar from '@/components/statusBar.vue';
 export default {
+	components: {
+		statusBar
+	},
 	data() {
 		return {
+			quantityNum: 0,
+			exceptionNum: 0,
+			abolishIds: [],
 			fiabricList: [
 				{
 					name: '加厚荷兰绒绒布布料布布料布布料布'
@@ -103,7 +111,36 @@ export default {
 			]
 		};
 	},
+	onLoad() {
+		this.toBeSelectedQuantity();
+		this.orderTicketExceptionNum();
+		this.abolishByIds();
+	},
 	methods: {
+		toBeSelectedQuantity() {
+			this.$http('plm.toBeSelectedQuantity', {}).then(res => {
+				let { code, data } = res;
+				if (code == 200) {
+					this.quantityNum = data;
+				}
+			});
+		},
+		orderTicketExceptionNum() {
+			this.$http('plm.orderTicketExceptionNum', {}).then(res => {
+				let { code, data } = res;
+				if (code == 200) {
+					this.exceptionNum = data;
+				}
+			});
+		},
+		abolishByIds() {
+			this.$http('plm.abolishByIds', {}).then(res => {
+				let { code, data } = res;
+				if (code == 200) {
+					this.abolishIds = data;
+				}
+			});
+		},
 		searchCli() {
 			this.$Router.push('/pages/home/search');
 		},
@@ -115,11 +152,22 @@ export default {
 		},
 		sampleConfirm() {
 			this.$Router.push('/pages/home/sampleConfirmation');
+		},
+		entrustmentCli() {
+			this.$Router.push('/pages/home/styleEntrustment');
 		}
 	}
 };
 </script>
 <style lang="scss" scoped>
+.statusBar {
+	height: var(--status-bar-height);
+	width: 100%;
+	position: fixed;
+	background-color: #fff;
+	top: 0;
+	z-index: 999;
+}
 .home_top {
 	position: relative;
 	width: 100%;
@@ -165,7 +213,6 @@ export default {
 	background: #fff;
 	.home_con_tit {
 		width: 100%;
-		height: 44rpx;
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-end;

src/pages/home/styleDetails.vue

@@ -4,8 +4,8 @@
 		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="款式详情"></u-navbar>
 		<view class="content">
 			<u-swiper mode="number" height="750" :autoplay="false" :list="list" :title="true" indicator-pos="bottomRight"></u-swiper>
-			<view class="u-m-t-30 bg_fff u-p-l-30 u-p-r-30">
-				<view class="style_tit u-border-bottom">
+			<view class=" bg_fff u-p-l-30 u-p-r-30">
+				<view class="style_tit">
 					<view class="color_AF8D66 u-font-32">卡其色长款风衣</view>
 					<view class="u-font-24 u-m-t-10 color_6F6F72">
 						<span class="u-m-r-10">针织</span>
@@ -15,15 +15,22 @@
 						<span class="u-m-l-10">100%面备份面备份备份</span>
 					</view>
 				</view>
-				<view class="u-flex justify-center flex-direction ht_196">
-					<view class="ds_flex u-m-t-10" style="width: 100%;">
-						<span class="width_30 color_00004">上传日期</span>
-						<span class="flex-sub">2021-12-12</span>
-					</view>
-					<view class="ds_flex u-m-t-10" style="width: 100%;">
-						<span class="width_30 color_00004">设计描述</span>
-						<span class="flex-sub">还可以还可以还可以吧还可以还可以还可以</span>
-					</view>
+			</view>
+			<!-- 图片 -->
+			<view class="u-m-30 u-flex justify-between u-flex-wrap">
+				<view class=" u-m-b-30 hs-position-relative hs-width-330 hs-height-330" v-for="item in 5">
+					<image class="img" src="@/static/images/home/yanyi1@2x.png" mode=""></image>
+					<view class="img_tit">款式正面</view>
+				</view>
+			</view>
+			<view class="bg_fff u-m-l-30 u-m-r-30 u-flex justify-center flex-direction u-p-30 ht_196">
+				<view class="ds_flex u-m-t-10" style="width: 100%;">
+					<span class="width_30 color_00004">上传日期</span>
+					<span class="flex-sub">2021-12-12</span>
+				</view>
+				<view class="ds_flex u-m-t-10" style="width: 100%;">
+					<span class="width_30 color_00004">设计描述</span>
+					<span class="flex-sub">还可以还可以还可以吧还可以还可以还可以</span>
 				</view>
 			</view>
 		</view>
@@ -57,7 +64,7 @@ export default {
 	width: 30%;
 }
 .ht_196 {
-	height: 196rpx;
+	min-height: 196rpx;
 }
 .ds_flex {
 	display: flex;
@@ -83,12 +90,21 @@ export default {
 </style>
 <style scoped lang="scss">
 .style_tit {
-	height: 140rpx;
+	min-height: 140rpx;
+	padding: 30rpx 0;
 	width: 100%;
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
 }
+.img_tit {
+	position: absolute;
+	width: 100%;
+	text-align: center;
+	padding: 10rpx;
+	bottom: 0;
+	background: rgba(255, 255, 255, 0.8);
+}
 .bd_bottom {
 }
 ::v-deep .u-swiper-title {

src/pages/home/styleEntrustment.vue

@@ -32,7 +32,7 @@
 			<!-- list -->
 			<view class="u-m-t-20 u-m-l-30 u-m-r-30 u-m-b-20">
 				<!-- v-for -->
-				<view class="u-m-b-20 posi_rela bd_rad u-p-30" v-for="(item, index) in 3" style="background: #fff;">
+				<view class="u-m-b-20 posi_rela bd_rad1 u-p-30" v-for="(item, index) in 3" style="background: #fff;">
 					<view class="u-m-b-30 u-flex justify-between">
 						<view class="entrus_list_title u-font-32">加厚荷兰绒绒布布料</view>
 						<view class="u-font-28">2天无人接单</view>
@@ -145,6 +145,10 @@ export default {
 	border-radius: 10rpx 10rpx 0 0;
 	overflow: hidden;
 }
+.bd_rad1 {
+	border-radius: 10rpx;
+	overflow: hidden;
+}
 .entrus_list_title {
 	&::before {
 		content: '';

src/pages/user/login/login.vue

+<template>
+	<view>
+		<statusBar />
+		<view @click="login">模拟登录</view>
+	</view>
+</template>
+<script>
+import statusBar from '@/components/statusBar.vue';
+export default {
+	components: {
+		statusBar
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		async login() {
+			await this.$store.dispatch('login', {
+				account: '18297959298',
+				password: 'e10adc3949ba59abbe56e057f20f883e'
+			});
+
+			// await this.$store.dispatch("getDictionary")
+			// await this.$store.dispatch("getSizeList")
+			// await this.$store.dispatch("getCategoryList")
+
+			// this.$Router.push("/pages/goods/list")
+			this.$Router.push('/pages/home/index');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped></style>

src/static/style/common.scss

+.hs-position-relative{
+	position: relative;
+}
+.img{
+	width: 100%;
+	height: 100%;
+}
 // 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
 @for $i from 40 through 100 {
 	.u-font-#{$i} {
 		font-size: $i + rpx;
 	}
 }
-
+// 宽度设置
+@for $i from 0 through 1000 {
+	.hs-width-#{$i}{
+		width: $i + rpx;
+	}
+}
+// 高度设置
+@for $i from 0 through 1000 {
+	.hs-height-#{$i}{
+		height: $i + rpx;
+	}
+}
+// 字体加粗设置
 @for $i from 500 through 900 {
 	.hs-weight-#{$i}{
 		font-weight: $i;
 	}
+}
+// 图片大小设置
+@for $i from 0 through 900 {
+	.hs-img-#{$i}{
+		width: $i + rpx;
+		height: $i + rpx;
+	}
 }
\ No newline at end of file