feat(pages,common,components):配件申请页面搭建

src/common/api/index.js

@@ -8,6 +8,7 @@ import {learnApiFun} from "@/common/api/learn.js";
 import { orderApiFun } from "@/common/api/order.js";
 import {assessmentApiFun} from"@/common/api/assessment.js"
 import {certApiFun} from"@/common/api/cert.js"
+import {partsApiFun} from"@/common/api/parts.js"
 let apiFun = function(vm) {
 	let commonApi = commonApiFun(vm);
 	let settledApi = settledApiFun(vm)
@@ -15,6 +16,7 @@ let apiFun = function(vm) {
 	let assessmentApi = assessmentApiFun(vm)
 	let orderApi=orderApiFun(vm)
 	let certApi=certApiFun(vm)
+	let partsApi=partsApiFun(vm)
 	let apiUrl = {
 		...commonApi,
 		...settledApi,
@@ -22,6 +24,7 @@ let apiFun = function(vm) {
 		...orderApi,
 		...assessmentApi,
 		...certApi,
+		...partsApi,
 	}
 	return apiUrl
 }

src/common/api/parts.js

+let partsApiFun = function(vm){
+	// 接口公共前缀
+	const prefix = '/wxh-worker-rest/rest/'
+	let coverage = '/wxh-worker-rest/rest/coverage/' 
+	let parts = '/wxh-worker-rest/rest/parts/'
+	
+	/**
+	 * 配件申请单-查询网点地址信息
+	 */
+	let getSiteAddress = async () => await vm.$u.get(coverage + vm.vuex_token + '/getSiteAddress');
+	
+	const partsApi = {
+		getSiteAddress
+	}
+	return partsApi
+}
+module.exports =  {
+	partsApiFun
+}
\ No newline at end of file

src/common/iconfont.css

@@ -2,7 +2,7 @@
   font-family: "wxh"; /* Project id 2600874 */
   /* Color fonts */
   src: 
-       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAHYAAwAAAAAA3wAAAGNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIhgjEgZgADwKYGwBNgIkAwwLCgAEIAWBVAcgG6sCyL5APLajkgSQKlA9xTEuxLtPw+avikE32OCp3+939u3+/1Gp7skkindRuVQ8k0iUaNNpRCLDdLF04f9/532v+ifKCgIKskACGvLAxrTW4SE+1iqP8/+6guhXXAM8hf9vEasvfKVwncDD1TkrNzR1E+lJXq2Jk7a1bQ3roijRNAvX4KcCSyxqd7YWLiJliUdasyQ5XAICJABpCMZgAkDSE0gAP2OGrgmRg5tgCnRTF5lSK4fYlCRE6qmni0ey3kWdd6AOt3OGAD8DWYQiKJCG+oE0jAWEMQIW696D9G/KUxg1AKI02plA7vAtAEFB+v7O7tkkdNLjvbjTF5h7OrYl920W6m8dFljELe5HnXjRVxjkRJ65+0r0u+pq6/XtP1pP8E4/1AFhLCAv7zVIoOnH2TR4MIAZYTWjM0p5KABhHoosGhHQgGmEmthvxABkBq2gMBm5GwxWbNsxY8CkaZsWjFpTTQVVKdtAj149uirJqit35ACW9XfEpDXrZi1bkqVWQeFDBQCPX3IBAA==') format('woff2');
+       url('//at.alicdn.com/t/font_2600874_5qa57hzmhg6.woff2?t=1624432377798') format('woff2');
 }
 
 .wxh {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.wxh-pen:before {
+  content: "\e602";
+}
+
 .wxh-doc:before {
   content: "\e601";
 }

src/components/w-navbar/w-navbar.vue

 <template>
 	<u-navbar
-		:height="40"
+		:height="height"
 		:background="background"
 		:back-icon-color="navbarColor"
 		:title="title"
@@ -31,7 +31,7 @@
 		props: {
 			height: {
 				type: String,
-				default: "40"
+				default: "44"
 			},
 			background: {
 				type: Object,

src/pages.json

@@ -340,15 +340,6 @@
 						"disableScroll": true
 					}
 				},
-				{
-					"path": "applyParts",
-					"style": {
-						"navigationBarTitleText": "配件申请",
-						"navigationStyle": "custom",
-						"enablePullDownRefresh": false,
-						"disableScroll": true
-					}
-				},
 				{
 					"path": "document-tag",
 					"style": {
@@ -488,6 +479,19 @@
 					}
 				}
 			]
+		},
+		{
+			"root":"pages/parts",
+			"pages":[
+				{
+					"path":"application",
+					"style": {
+						"navigationBarTitleText": "配件申请",
+						"navigationStyle": "custom",
+						"disableScroll": true
+					}
+				}
+            ]
 		}
 	],
 	"preloadRule": {

src/pages/order/applyParts.vue

-<template>
-	<view class="parts-view">
-		<u-navbar back-icon-color="#333333" background="#FFFFFF" :title="title" titleColor="#333333"
-			:border-bottom="false" title-bold></u-navbar>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				type: 'parts'
-			};
-		},
-		computed: {
-			title() {
-				return this.titles[this.types[this.type]]
-			},
-			titles() {
-				return ['配件申请', '备件申请']
-			},
-			types() {
-				return {
-					'parts': 0, // 配件
-					'spare': 1 // 备件
-				}
-			}
-		},
-		onLoad(e) {
-			if (e && e.type) { // parts 配件；spare 备件
-				this.type = e.type
-			}
-		},
-		onShow() {
-			// 从标签列表页面返回，获取选中的标签
-			let pages = getCurrentPages();
-			let page = pages[pages.length - 1];
-			let items = page.items;
-			if (items) {
-			}
-		},
-		methods: {
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.parts-view {
-		background-color: #F4F5F7;
-		height: 100vh;
-		display: flex;
-		flex-direction: column;
-
-		
-	}
-</style>

src/pages/order/detail.vue

@@ -894,7 +894,7 @@
 			 },
 			 toApplyParts() {
 				 uni.navigateTo({
-				 	url: 'pages/order/applyParts?orderId='+this.order.orderId
+				 	url: 'pages/parts/application?orderId='+this.order.orderId
 				 })
 			 }
 		}

src/pages/parts/application.vue

+<template>
+	<view class="app-wrap">
+		<w-navbar title="配件申请" navbar-color="#FFFFFF" />
+		<view class="content">
+			<view class="card parts">
+				<view class="title" v-if="isEmptyParts">配件信息</view>
+				<view class="u-flex u-row-between title" v-else>
+					<view>选择配件</view>
+					<u-icon name="arrow-right" size="24" color="#2272FF" @click="$u.throttle(addParts, 500)"
+						label="添加配件" label-pos="left" label-color="#2272FF" label-size="26"/>
+				</view>
+				<view class="body">
+					<view v-if="isEmptyParts" class="u-flex-col u-col-center list">
+						<view class="sold-out">
+							<u-image :src="qnFile('SoldOut.png')" width="374" mode="widthFix">
+								<view slot="error" style="font-size: 24rpx;">加载失败</view>
+							</u-image>
+						</view>
+						<view class="message">当前还未选择配件，请点击添加</view>
+						<button class="add-button" plain="true" @click="$u.throttle(addParts, 500)">去添加</button>
+					</view>
+					<view v-else class="list">
+						<view v-for="(row, index) in parts" :key="index">
+							<select-parts :info="row"></select-parts>
+						</view>
+					</view>
+					<u-gap height="40"></u-gap>
+					<u-input type="textarea" v-model="remark" placeholder="请补充详细说明" class="desc" height="200" :border="true"  />
+				</view>
+			</view>
+			<view class="card address">
+				<view class="title">收件信息</view>
+				<view class="subsection u-flex u-row-center">
+					<u-subsection
+					:list="siteTypes" :current="curType"
+					:bold="false" font-size="26" height="76"
+					active-color="#FFFFFF" inactive-color="#333333"
+					bg-color="#FFFFFF" button-color="#2272FF"
+					@change="typeChange"
+					></u-subsection>
+				</view>
+				<view class="body">
+					<view class="item" @click="$u.throttle(editSite, 500)">
+						<view class="userinfo u-flex">
+							<view class="name">{{formatName}}</view>
+							<view class="mobile">{{formatMobile}}</view>	
+						</view>
+						<view class="rangeinfo u-flex u-row-between u-col-top">
+							<view class="txt">{{formatAddress}}</view>
+							<u-icon custom-prefix="wxh" name="pen" size="32"></u-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<u-button shape="circle" :disabled="disabled" :hair-line="false" :custom-style="customStyle" hover-class="none">提交</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+import SelectParts from '@/components/select-parts/adjust.vue'
+export default {
+	components: {
+		SelectParts
+	},
+	data() {
+		return {
+			orderId: 0,
+			order: {},
+			parts: [],
+			disabled: false,
+			remark: '',
+			siteTypes: [{name: '我的地址'}, {name: '客户地址'}],
+			curType: 0,
+			mine: {},
+			customer: {},
+		};
+	},
+	computed: {
+		isEmptyParts() {
+			return this.$u.test.isEmpty(this.parts)
+		},
+		customStyle() {
+			return {
+				height: "104rpx",
+				border: "none",
+				backgroundColor: "#2272FF",
+				color: "#FFFFFF",
+				fontSize: "32rpx",
+				fontWeight: 600,
+			}
+		},
+		formatName() {
+			let name = ''
+			if(this.curType) {
+				name = this.customer && this.customer.name
+			} else {
+				name = this.mine && this.mine.name
+			}
+			if(this.$u.test.isEmpty(name)) {
+				return '--'
+			}
+			return name
+		},
+		formatMobile() {
+			let mobile = ''
+			if(this.curType) {
+				mobile = this.customer && this.customer.mobile
+			} else {
+				mobile = this.mine && this.mine.mobile
+			}
+			if(this.$u.test.isEmpty(mobile)) {
+				return '--'
+			}
+			if(mobile.length == 11) {
+				let tmps = []
+				tmps[0] = mobile.slice(0, 3)
+				tmps[1] = mobile.slice(3, 7)
+				tmps[2] = mobile.slice(7)
+				return tmps.join(" ")
+			} else {
+				return mobile
+			}
+		},
+		formatAddress() {
+			let address = ''
+			if(this.curType) {
+				address = this.customer && this.customer.address
+			} else {
+				address = this.mine && this.mine.address
+			}
+			if(this.$u.test.isEmpty(address)) {
+				return '--'
+			}
+			return address
+		},
+	},
+	onLoad(e) {
+		this.orderId = e && Number(e.orderId) || 0
+		this.initData()
+	},
+	methods: {
+		initData() {
+			this.loadMineAddress()
+			this.loadOrderInfo()
+		},
+		loadMineAddress() {
+			this.mine = {
+				name: '王先生',
+				mobile: '13045861456',
+				address: '宝城67区留芳路6号庭威产业园3栋10C',
+				range: ['广东省', '深圳市', '宝安区'],
+				code: ['44','4403','440306'],
+			}
+			this.$u.api.getSiteAddress().then((res) => {
+				if(res.code == 200 && res.data) {
+					let name = this.vuex_settled && this.vuex_settled.record && (this.vuex_settled.record.id_card_name || this.vuex_settled.record.nickname)
+					let mobile = this.vuex_settled && this.vuex_settled.record && this.vuex_settled.record.mobile
+					this.mine = {
+						name: name,
+						mobile: mobile,
+						address: res.data.address,
+						range: [res.data.provinceName, res.data.cityName, res.data.districtName, res.data.streetName],
+					}
+				}
+			})
+		},
+		loadOrderInfo() {
+			this.$u.api.orderDetail({}, this.orderId).then((res) => {
+				if (res.code == 200) {
+					this.order = res.data
+					this.initCustomer()
+				} else {
+					console.log(res.message, "获取订单详情失败！");
+				}
+			});
+		},
+		initCustomer() {
+			if(this.$u.test.isEmpty(this.order)) {
+				this.customer = {}
+			} else {
+				console.log("order", this.order)
+				const range = [
+					this.order.contactProvinceText,
+					this.order.contactCityText,
+					this.order.contactCommunityText,
+					this.order.contactStreetText,
+				]
+				this.customer = {
+					name: this.order.contactName,
+					mobile: this.order.contactPhone,
+					address: range.join("") + this.order.contactAddress,
+					range: range,
+					code: [
+						this.order.contactProvince,
+						this.order.contactCity,
+						this.order.contactCommunity,
+						this.order.contactStreet,
+					]
+				}
+			}
+		},
+		loadParts() {
+			this.parts = [
+				{name: '正泰漏保', num: 2},
+				{name: '电缆VJV3*10', num: 1},
+				{name: '挚达系统广汽充电桩', num: 0},
+				{name: '空开盒子', num: 100}
+			]
+		},
+		qnFile(src) {
+			return process.uniEnv.qn_base_url + src
+		},
+		typeChange(index) {
+			this.curType = index
+		},
+		editSite() {
+			this.$u.route({
+				url: "pages/mine/address/addSite"
+			})
+		},
+		addParts() {
+			this.$u.route({
+				url: "pages/parts/addParts"
+			})
+		},
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.app-wrap {
+	width: 750rpx;
+	height: 100vh;
+	overflow: auto;
+	background-color: #f4f5f7;
+	background-image: linear-gradient(to top, #f4f5f7 0%, #2272ff 50%);
+	background-size: 750rpx 600rpx;
+	background-repeat: no-repeat;
+	display: flex;
+	flex-direction: column;
+	.content {
+		margin-bottom: 240rpx;
+		.card {
+			margin: 20rpx 30rpx;
+			padding: 30rpx;
+			padding-top: 0;
+			border-radius: 12rpx;
+			background-color: #FFFFFF;
+			.title {
+				line-height: 106rpx;
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #333333;
+			}
+			.body {
+				.list {
+					.sold-out {
+						margin-top: 20rpx;
+					}
+					.message {
+						font-size: 26rpx;
+						font-weight: 400;
+						color: #999999;
+						line-height: 26rpx;
+					}
+					.add-button {
+						margin: 42rpx 0 20rpx 0;
+						width: 200rpx;
+						height: 80rpx;
+						border-radius: 52rpx;
+						border: 2rpx solid #2272FF;
+						font-size: 32rpx;
+						font-weight: 500;
+						color: #2272FF;
+						line-height: 80rpx;
+					}
+				}
+				.desc {
+					height: 200rpx;
+				}
+			}
+		}
+		.parts {
+		}
+		.address {
+			.subsection {
+				padding-top: -6rpx;
+				padding-bottom: 34rpx;
+				border-bottom: 2rpx solid #F4F5F7;
+				/deep/ .u-subsection {
+					width: 372rpx;
+					.u-item-bg {
+						border-radius: 32rpx !important;
+					}
+				}
+			}
+			.body {
+				.item {
+					padding: 10rpx 0 52rpx 0;
+					.userinfo{
+						.name{
+							height: 92rpx;
+							font-size: 32rpx;
+							font-weight: bold;
+							color: #333333;
+							line-height: 92rpx;
+						}
+						.mobile {
+							margin-left: 20rpx;
+							height: 92rpx;
+							font-size: 28rpx;
+							font-weight: 400;
+							color: #666666;
+							line-height: 92rpx;
+						}
+					}
+					.rangeinfo {
+						.txt {
+							width: 500rpx;
+							font-size: 28rpx;
+							font-weight: 400;
+							color: #333333;
+							line-height: 34rpx;
+							word-wrap: break-word;
+						}
+					}
+				}
+			}
+		}
+	}
+	.bottom {
+		position: absolute;
+		left: 76rpx;
+		right: 76rpx;
+		bottom: 68rpx;
+	}
+}
+</style>