From bf4e28d8d77a6d00b6d75c2a1682e26e5ad933a1 Mon Sep 17 00:00:00 2001
From: hejin <jmy13864291147@163.com>
Date: Wed, 20 Aug 2025 00:09:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E4=BA=A7=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2=EF=BC=8C=E8=B0=83=E8=AF=95=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=2090%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                    |   8 +
 src/application/product-details.vue | 372 +++++++++++++++++++++++++++-
 src/assets/images/bg/Inquiry-bg.png | Bin 0 -> 10683 bytes
 src/assets/images/icon/Google.png   | Bin 0 -> 1139 bytes
 src/assets/images/icon/X.png        | Bin 0 -> 817 bytes
 src/assets/images/icon/YouTobe.png  | Bin 0 -> 596 bytes
 src/assets/images/icon/facebook.png | Bin 0 -> 464 bytes
 src/assets/images/icon/in.png       | Bin 0 -> 543 bytes
 src/assets/images/icon/phoneApp.png | Bin 0 -> 733 bytes
 src/locale/en.json                  |   3 +-
 src/locale/zh.json                  |   3 +-
 src/pages.json                      |   3 +-
 src/pages/products/index.vue        |   9 +-
 13 files changed, 388 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/images/bg/Inquiry-bg.png
 create mode 100644 src/assets/images/icon/Google.png
 create mode 100644 src/assets/images/icon/X.png
 create mode 100644 src/assets/images/icon/YouTobe.png
 create mode 100644 src/assets/images/icon/facebook.png
 create mode 100644 src/assets/images/icon/in.png
 create mode 100644 src/assets/images/icon/phoneApp.png

diff --git a/src/api/index.js b/src/api/index.js
index 4cbee17..64743b5 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -70,4 +70,12 @@ export const prodOrNewsCatgApi = (catgId) => {
 **/
 export const prodPageApi = (params) => {
 	return request.get('/web/prodPageList', {params})
+}
+
+/**
+ * @function 获取产品新闻详情
+ * @param {string} id
+**/
+export const prodOrNewsInfoApi = (id) => {
+	return request.get(`/web/prodNewsInfo?id=${id}`)
 }
\ No newline at end of file
diff --git a/src/application/product-details.vue b/src/application/product-details.vue
index 160ff6c..09e8025 100644
--- a/src/application/product-details.vue
+++ b/src/application/product-details.vue
@@ -1,15 +1,381 @@
 <template>
     <view class="pages">
-    	产品详情
+    	<Tabs
+    	    :list="tabsList"
+    		v-model:active="tabsActive"
+    	/>
+		
+		<view class="container">
+			<swiper
+			    class="swiper" 
+				circular 
+				:autoplay="true"
+				:current="swiperCurrent"
+				@change="swiperChange"
+			>
+				<swiper-item v-for="(item,index) in productsImages" :key="index">
+					<view class="swiper-item">
+						<image :src="item" mode="aspectFill"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			<view class="siwper-number">
+				{{ swiperCurrent + 1 }}/{{productsImages.length}}
+			</view>
+			<view class="info">
+				<view class="title">
+					{{info.title}}
+				</view>
+				<view class="rich-text" v-html="info.description"></view>
+			</view>
+		</view>
+		
+		<view class="module">
+			{{$t('products.productDetails')}}
+		</view>
+		
+		<view 
+		    class="container" 
+			style="padding: 18rpx 26rpx;"
+			v-html="info.content"
+		>
+		</view>
+		
+		<view class="module">
+			{{$t('products.inquiry')}}
+		</view>
+		
+		<view class="container">
+			<image class="inquiry-bg" src="@/assets/images/bg/Inquiry-bg.png"></image>
+			<uni-forms
+				ref="dataFormRef"
+				class="form-box" 
+				:model="dataForm" 
+				:rules="dataFormRules" 
+				label-position="top"
+			>
+				<uni-forms-item name="name" v-if="formConfig.name">
+					<template #label>
+						<view class="label-box">
+							<text v-if="formConfig.nameMust" class="required">*</text>
+							<image 
+								class="label-icon" 
+								src="@/assets/images/icon/user.png" 
+							>
+							</image>
+							<label>{{$t('contactUs.name')}}</label>
+						</view>
+					</template>
+					<uni-easyinput type="text" v-model="dataForm.name" :placeholder="$t('contactUs.name')" />
+				</uni-forms-item>
+				
+				<uni-forms-item name="title" v-if="formConfig.title">
+					<template #label>
+						<view class="label-box">
+							<text v-if="formConfig.titleMust" class="required">*</text>
+							<image 
+								class="label-icon" 
+								src="@/assets/images/icon/title.png" 
+							>
+							</image>
+							<label>{{$t('contactUs.title')}}</label>
+						</view>
+					</template>
+					<uni-easyinput type="text" v-model="dataForm.title" :placeholder="$t('contactUs.title')" />
+				</uni-forms-item>
+				
+				<uni-forms-item name="company" v-if="formConfig.company">
+					<template #label>
+						<view class="label-box">
+							<text v-if="formConfig.companyMust" class="required">*</text>
+							<image 
+								class="label-icon" 
+								src="@/assets/images/icon/company.png" 
+							>
+							</image>
+							<label>{{$t('contactUs.company')}}</label>
+						</view>
+					</template>
+					<uni-easyinput type="text" v-model="dataForm.company" :placeholder="$t('contactUs.company')" />
+				</uni-forms-item>
+				
+				<uni-forms-item name="email" v-if="formConfig.email">
+					<template #label>
+						<view class="label-box">
+							<text v-if="formConfig.emailMust" class="required">*</text>
+							<image 
+								class="label-icon" 
+								src="@/assets/images/icon/mail.png" 
+							>
+							</image>
+							<label>{{$t('contactUs.mail')}}</label>
+						</view>
+					</template>
+					<uni-easyinput type="text" v-model="dataForm.email" :placeholder="$t('contactUs.mail')" />
+				</uni-forms-item>
+				
+				<uni-forms-item name="tel" v-if="formConfig.tel">
+					<template #label>
+						<view class="label-box">
+							<text v-if="formConfig.telMust" class="required">*</text>
+							<image 
+								class="label-icon" 
+								src="@/assets/images/icon/phone.png" 
+							>
+							</image>
+							<label>{{$t('contactUs.contactWay')}}</label>
+						</view>
+					</template>
+					<uni-easyinput type="text" v-model="dataForm.tel" :placeholder="$t('contactUs.contactWay')" />
+				</uni-forms-item>
+				
+				<uni-forms-item name="content">
+					<template #label>
+						<view class="label-box">
+							<image 
+								class="label-icon" 
+								src="@/assets/images/icon/msg.png" 
+							>
+							</image>
+							<label>{{$t('contactUs.desc')}}</label>
+						</view>
+					</template>
+					<uni-easyinput type="textarea" v-model="dataForm.content" :placeholder="$t('contactUs.desc')" />
+				</uni-forms-item>
+				
+				<button class="submit-btn" @click="submit">{{$t('common.sending')}}</button>
+			</uni-forms>
+		</view>
+		
+		<view class="module">
+			{{$t('news.relatedProducts')}}
+		</view>
+		
+		<view class="container">
+			<view class="product-list">
+				<view 
+				    class="product-item"
+					v-for="item in relatedProducts"
+					:key="item.id"
+				>
+					<image class="cover" :src="item.mainPic" mode="aspectFill"></image>
+					<view class="text-ellipsis title">
+						{{item.title}}
+					</view>
+				</view>
+			</view>
+		</view>
     </view>
 </template>
 
 <script setup>
 	import { onLoad } from '@dcloudio/uni-app';
-	import { ref } from 'vue';
+	import { ref, computed } from 'vue';
+	import { useI18n } from 'vue-i18n';
+	import { 
+		prodOrNewsInfoApi,
+		formOptionsApi, 
+		submitFormApi,
+	} from '@/api/index.js';
 	
+	const { t } = useI18n()
+	
+	const tabsActive = ref(0)
+	const tabsList = [
+		t('menu.Products'),
+		t('products.productDetails'),
+		t('products.inquiry'),
+		t('news.relatedProducts')
+	]
+	
+	const id = ref('')
+	const info = ref({})
+	const productsImages = ref([])
+	const getInfo = () => {
+		prodOrNewsInfoApi(id.value).then(({data:res}) => {
+			info.value = res.data.busiProdNew
+			let picsArr = res.data.busiProdNew.pics ? res.data.busiProdNew.pics.split(',') : [];
+			productsImages.value = [
+				res.data.busiProdNew.mainPic,
+				...picsArr
+			]
+			uni.setNavigationBarTitle({
+				title: res.data.busiProdNew.title
+			})
+		})
+	}
+	
+	const swiperCurrent = ref(0)
+	const swiperChange = (e) => {
+		swiperCurrent.value = e.detail.current
+	}
+	
+	const dataFormRef = ref()
+	const dataForm = ref({
+		name: '',
+		title: '',
+		company: '',
+		email: '',
+		tel: '',
+		content: '',
+		equipment: 'App'
+	})
+	const dataFormRules = computed(() => {
+		let config = formConfig.value
+		let rules = {
+			name: {
+				rules: [
+					{ required: config.nameMust, errorMessage: t('contactUs.name') }
+				]
+			},
+			title: {
+				rules: [
+					{ required: config.titleMust, errorMessage: t('contactUs.title') }
+				]
+			},
+			company: {
+				rules: [
+					{ required: config.companyMust, errorMessage: t('contactUs.company') }
+				]
+			},
+			email: {
+				rules: [
+					{ required: config.emailMust, errorMessage: t('contactUs.mail') }
+				]
+			},
+			tel: {
+				rules: [
+					{ required: config.telMust, errorMessage: t('contactUs.desc') }
+				]
+			}
+		}
+		return rules
+	})
+	const formConfig = ref({})
+	const getFormOptions = () => {
+		formOptionsApi().then(({data:res}) => {
+			formConfig.value = res.data
+		})
+	}
+	const submit = () => {
+		dataFormRef.value.validate().then(() => {
+			submitFormApi(dataForm.value).then(() => {
+				uni.$showTost(t('common.submitSuccess'))
+				dataForm.value.name = ''
+				dataForm.value.title = ''
+				dataForm.value.company = ''
+				dataForm.value.email = ''
+				dataForm.value.tel = ''
+				dataForm.value.content = ''
+				dataFormRef.value.clearValidate()
+			})
+		})
+	}
+	
+	const relatedProducts = ref([
+		{id:123,title: 'SINOTRUK HOWO Tractor Truck Head',mainPic:'https://dianliang123.oss-cn-qingdao.aliyuncs.com/user/2025/07/09/55979a0deee24031a38e934c6b06ca20.jpg'},
+		{id:121233,title: 'SINOTRUK HOWO Tractor Truck Head',mainPic:'https://dianliang123.oss-cn-qingdao.aliyuncs.com/user/2025/07/09/55979a0deee24031a38e934c6b06ca20.jpg'},
+		{id:122221113,title: 'SINOTRUK HOWO Tractor Truck Head',mainPic:'https://dianliang123.oss-cn-qingdao.aliyuncs.com/user/2025/07/09/55979a0deee24031a38e934c6b06ca20.jpg'},
+		{id:121113123,title: 'SINOTRUK HOWO Tractor Truck Head',mainPic:'https://dianliang123.oss-cn-qingdao.aliyuncs.com/user/2025/07/09/55979a0deee24031a38e934c6b06ca20.jpg'}
+	])
+	
+	onLoad((options) => {
+		id.value = options.id
+		getInfo()
+		getFormOptions()
+	})
 </script>
 
 <style lang="scss" scoped>
-	
+.pages {
+	overflow: hidden;
+	padding: 0 18rpx;
+	::v-deep .tabs {
+		justify-content: space-around;
+		.tabs-item {
+			margin-right: 0;
+		}
+	}
+	.container {
+		width: 100%;
+		height: min-content;
+		background-color: #ffffff;
+		position: relative;
+		border-radius: 20rpx;
+		overflow-x: auto;
+		word-break: break-all;
+		.swiper {
+			width: 100%;
+			height: 714rpx;
+			.swiper-item {
+				width: 100%;
+				height: 714rpx;
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+		.siwper-number {
+			width: max-content;
+			height: min-content;
+			padding: 6rpx 30rpx;
+			position: absolute;
+			top: 650rpx;
+			right: 28rpx;
+			border-radius: 28rpx;
+			color: #fff;
+			background: rgba(0,0,0,0.31);
+			z-index: 999;
+		}
+		.info {
+			width: 100%;
+			padding: 34rpx 20rpx;
+			.title {
+				margin-bottom: 40rpx;
+				color: #292d2e;
+				font-weight: bold;
+			}
+		}
+		.inquiry-bg {
+			width: 100%;
+			height: 411rpx;
+		}
+		::v-deep .form-box {
+			padding: 0rpx 24rpx;
+			position: relative;
+			top: -150rpx;
+		}
+		.product-list {
+			padding: 38rpx 12rpx;
+			display: flex;
+			flex-wrap: wrap;
+			background-color: #fff;
+			.product-item {
+				width: 49%;
+				height: 468rpx;
+				margin-bottom: 14rpx;
+				border: 2rpx solid #ebf3f7;
+				border-radius: 8rpx;
+				&:nth-child(2n) {
+					margin-left: 2%;
+				}
+				.cover {
+					width: 100%;
+					height: 358rpx;
+				}
+				.title {
+					padding: 16rpx 16rpx 0;
+					color: #0d0e0e;
+					border-top: 2rpx dashed #ebf3f7;
+				}
+			}
+		}
+	}
+	.module {
+		margin: 38rpx 0;
+		color: #292d2e;
+		font-weight: bold;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/assets/images/bg/Inquiry-bg.png b/src/assets/images/bg/Inquiry-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..e21de42890269312977b93deef6ea9ffb308acb6
GIT binary patch
literal 10683
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
WBJj~(yYMpx`chF)hg8bF5BYyCTGxI6

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon/Google.png b/src/assets/images/icon/Google.png
new file mode 100644
index 0000000000000000000000000000000000000000..29dbc017f30a27047ce8f1c0d92162636eb6dd8f
GIT binary patch
literal 1139
zcmV-(1dRKMP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px(ElET{R7gv;m0fI9MHI(>GxzS6ZP#{7TN+v*AeBaKl@O{R@{!g?u$a_}k$}d6
z!T8`uP-@hqeGpI(6N9J?1{9)2`~Vvb7NLDmQ$u_p#1JJ!4Bc&^-EG-+yWLH9_ukRD
zTeZ+?!UOYg?|hv6=bSThej@-bT<D%>7{(h4ai0)m>$&S~N)ZvLcFVF}nLBsJd7(v3
zm+O=-Co4BA%Y$La>(zAZEz4$PB+lT_NH~>DE)s$6;1OSrx6bSJOb}EmJtY8za{l_G
z`?}+dl}H<mwMb-yaCrEr2nNGL1qHrI!?#shLQC0zi5MG?ZRjit#JC`}=Yj4}MDzv2
zYFdGB((seEg`vfi!bqmD4FOVO3yIdUgmktt#W<INE`J~YD;)2>M0DRFVr?f$1%i-a
z;F(i`xppNv>(*d;ve24Bj-_SHy$QlPGG*JKEQSt#L3GP@j7S0@Y_J8&w2%o&$_<pv
zCilRbOj$4=Aq{YnCD1W+1+Mj2Y2g%+gI^MTrV%-6k;-(#-DPCVza2v;VyDj`I?o{O
zBzCrk-1ftG?kq<*=c!Oa5by`DPK90@y%-?4<Uw4$!z4>*GWDZfc*@F1_5=`y3)hTd
zqCcG?yr~hFKY(>t8Aa`%qcYr>N}we8CkQJ=uyF_0&V8gjCixwQ!B&JeK8O6h2TV6&
z`5hE~yqEYdXBn!g#~hWoTKAB<dL>d{#K}A+nWX35hv3X#;Z`qZ+NbZ)x9nj=)ndHM
z77^a`GVY-m;-w7~G&VT4#_8X%>g$-fcPIKJb(SaOSdGN!yLkz!e-O20136DTioa$Z
zxBT3JxXDA;f@-Fmzl?iD1yjFkq4$v|k*(ijS65JYyd`~fVzN}kV)V{liV9yrJzh)R
zwgxU%)>87rF%qE=gB5j<v@qA+PyT`31ZvjcI(ZhgY9U2me**e;YvI7PhnGsxRaJ|-
z^Bh)wHieyEacRdcinlj0^34h2Prr(78e|=ACbOcPzS|za6&b{Oc0JSI-inaAYy|!Z
z1)>xKukR+&^ezaSRQYU-(s>lL?7{lOPk+-}c<!kn=c)As8(xF=522(<X4^ipE0;QV
z*ztI>>z3#Zae2vVGA;(OO^Nw@J$X%=3B9uyU(G6#kubyiTi~-32+fkp#T2%Fh%`-v
zQ-=Q`Y}tzFvExJ^djS!T;r(DIVoou`)f>UKk(NSfW&nxOVy3sX;GQ*eJm4m>LKldw
zbV)0s-*zzY;#TsuZ6^NX8C3Hjr_`k-NMvLn7v4&K%Whn=ijYE=^uNtv#dvHw6jU0K
zT3nDC93&O$=gO{T<k?@5?kp%PWy<R1c&k=mxHS7r2SR_hf3P_)5IN%WdF!Mc$J+D`
zX%g$SDTTNS=-M_7d(DUOY>UT72?oPQZ`{+Qy}A*P>7NIUA;rZ_euw}7002ovPDHLk
FV1h9}9lQVl

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon/X.png b/src/assets/images/icon/X.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3d869afe764256da4be5ef7e327887fc6075521
GIT binary patch
literal 817
zcmV-11J3-3P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px%>q$gGR7gv;mETX2VHC%|57JT)6Wp8^-su|ZKY&|$6RE^Y5`nm33t4v|&Cr|;
zvJ0(dqD_aJHJ!Gp%|Of&Vrq7o;;pmX<jT!b6T^9-{CL~@HeG~hS)R-1Ip^~{=lh&<
z9s&RYf#5ucbLJ5tkOD|!)=pqSn#NQ#8fx6$-d-X<q1=yz5a9`6aUnEK2cprigq%Ak
zauNd7|A6i@Xd0s=JzezuAJR{BpCALKf8EW>%0hDT*@LBUID(axl|unZNlD1g&ITdC
z>gpHl?(QD=#epj;D`B^Hfy3djPSI!-H8my-4GqV@2_fk0d<vaT2e;b;y}laZa5yoT
z321A30*yuujiv%JnG6O)HDoe578Vu`0vj6}P+wmUpU(%CN{yYJo!Enamx9^l^LcQ)
zClCsSpwVd2-`@w3NQAPo%Pc^zzrh~v_xmB2E3m%49w$|t6#E_p1qGOxcmtPf3^tn$
zUhg~1%zS{y<3V3vF9Lx8<Z=qj%l<?4PY7nbwb}}Fb#<b)_72w8zG852kky>YM6K3f
zc6Kgdl^zLZ^loi^46RlRin;=dlB2H946F4%?Dp;>OaDkP6Pc2dg0Znt2n1=MC<S_Z
zpR*-aQc}jsk;sk(Gl3S%J($gAIGs*dtxcGm^kRN~9tOirR+_`?Sg=}s4c*;#Y;A2p
zC=|kCv9e|7aJ)iO(*yMMJo|faQPBkq4-a8)Zx2f4RVWk+7>&1}RH{%|C_zKRU6hwA
zF*oP?^K#3}6Jvb*HBwVkQB`#v)6?(4<#I7H@)EhZxhO4_p`*hFu~-bL^b$5Uz8&8n
z85tRHyWb)wCkH0e?U;7X%*@2p)FhUcKEr4<!Rz&4aq$y$x++8>k;E;{Q~{HIad8n^
zS{}k?YmZA)B9Xx5av~TEg3srJ$K#>7xdrX*9WmgTv6-Kr&q6mh18_JT313|*y~s+k
vZ_EH17<j=p4}jq54f<32nwWc^#%KBiE3Y+f6=rMk00000NkvXXu0mjf;>K?}

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon/YouTobe.png b/src/assets/images/icon/YouTobe.png
new file mode 100644
index 0000000000000000000000000000000000000000..44a9b4c670f51e32d1f7f3899f7281add1cb4096
GIT binary patch
literal 596
zcmV-a0;~OrP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px%4oO5oR7gv;l}l(7Q51&1>oiU4(6Ncwg2V?D6h#mUVqLUYaU<wL#f@$hqzkuh
zth!avP2F@U>cUmgg;`d?$HE3IMGAtcB@bKLXe6C6)6}LjBX=}PCo_c!W|nu(`Odlj
z{m;DuV0LzHkD@4d9K>-U(BxX!&v7sW&I`-3hI@JvX(6F4k;p{n7B!}-?I_BouuM1J
zvTRJV!jf*5)~eM$k<BhVjm0|7Xqws((3@l!CZ*DkXCjkb)ORGdX^nR31<TIA%zZON
zHn-^P+S&bIx~)NS`2zLe%sfnghN2E-6DmJpbxn#0LV!Gj)(Et>ft0T+2EF^BJN~!1
zdho~-xH<xk6K)652#no>Qv+_^da!Lnd=T_<IA|^U@Bx^3>;s<v3W*c`(9LbIys~jY
zDU1Hb2R!u&de8eOkKKitJluW=<>lZ4EAJrM>XG8@6bxMUPfFg0ll`zzgd3yqDCvI=
z#h0+P(*u4z2}g%E2Ft(iKf;BZkj~Y|7RI3~?g6K!q3>ca_|Sg1F1vjWc7SW7#+vE@
zr}MD)v_JUlF&IyQVFv5lqQGj(_4<0dnHA{h5AWexsomQllk{<gTpApLSCftT_{upL
zy%qp2e1}^P;KK|QmwsEz9qB4qHV8mb{)}|=-$)-h2*Z~^`n_)Q8tc<H%hkAf*JiUW
i`ldZiQlw@)roR9eiZHeS*V%di0000<MNUMnLSTY8WE!3T

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon/facebook.png b/src/assets/images/icon/facebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea05921a68c5ba1f2901ec0f9b7dc165e26bc056
GIT binary patch
literal 464
zcmV;>0WbcEP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px$ib+I4R7gwJl|4wqP!xsFO*KshYZaj=Dk9ol9BQG1gM+h<P7Yc}{}3ESuud)_
zg06xf)XiV4q6iA&R79u_E=31H>|mQV&6A`d@u%86RH$!yJl^{__q@Zs1OV=#j9(xv
z!iahZ@aSi}ivcNO>_B6}w6ZEC$bbqs2Ura+toVKQq-jDI$-^&E5cT~I)TA)BNm4ld
z%v-)!1_pvIbTkvBN<umZ?8ftmUTOx}utg518IM}OkFY%^qQOh=o~<0K7+qJbGj4Ef
zQbe##_@w1W;QDIdc3uLRVy}`K*3R<CsDQpdy|IhuQXFU{98I|`wY>`pP7=kP<N}A<
z1?*3V7C11gAf7BYu+IbRjTcnPBG6Q8f85=phO8Ncxh)kN7lpX#tE3f;HH1XO_Vuf1
z_Ah0z6aNEn=Zu2udyZ68Nx(?A%MjX9M;HuMSfZB?RXn5$u*Fy&nVeluNh{u#{y$Pt
zeu{b8rc;j#ZIh$XI|V~;^gN@<8Q2_6`sX+urr&`-4%1gnKIM^Gxj={j0000<MNUMn
GLSTYZ9LAdf

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon/in.png b/src/assets/images/icon/in.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dacbae645eb2c9e285f2f711af904aedd1f0b2c
GIT binary patch
literal 543
zcmV+)0^t3LP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px$*-1n}R7gu>WME)mU{5`)#>~jj&dBiJg@J*A4<tqg`1GHFanIlX43$4;+umXX
z8Op-={{#aAgCH4(Vbk*d&woY>My|BOYZ)2-2T{pTurdD`7}qg!rycr8f%kE_=M%`_
z|LC$p+$;<;6Vw=_1=$%YSKnhecoSqdX#lIi`L5CotszQalg>W)%wXSsfizPY7#Oe`
ztR=<8u&qdsL6Dn;p=!-NhN*j>QO96#5@cay;ACTF`0(uy$%cY7V0E#PJP$*vy(HMc
zGY>v9EI;vzp*KPq%>Vr3FT<RJ&l#G66dAOnxfou2_{A`B_Y;P#7vG^c0IR`)#v%-h
z(=@>f*PeOJP_Xn4!{dHSF#p@nzYJf0{$&v5V}l#?@85q0p9z;44k1M{$p(W=+k5Rj
z*cS;l5)3wK{9p?<o_oU(J@Y!;GLjAc`|m%4V#x`HcVGW77|8K39H}-08+QBUHwMGH
zv*a86_RDVu`C?EBz`!8E&&F`4%N)#p{PqWfX4Pr(4Sw_aH-kdSh%wkrN06aEQUx4d
z+b_RmXxjLY;dqS^nE&qUZwA{oNER32Wo0;6VE|@7`|y*&wfhqOFh)t~WO8U%Y|^Zt
hr&-km3PM^`rU2V75tI){Cx`$5002ovPDHLkV1j(c_fh}=

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon/phoneApp.png b/src/assets/images/icon/phoneApp.png
new file mode 100644
index 0000000000000000000000000000000000000000..f48f329069bad43171b8ddb5877a214c0428c1ce
GIT binary patch
literal 733
zcmV<30wVp1P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px%mq|oHR7gv;m2XHBaTv$Hcc*UWf>2_Ax>A-Dp+qk>LVHm{i74h8q#(V>0;?4`
z$Rcn>l9Yugq2UH2D4{H0q!nTHrZCu>W+7$@Whiq_XPPT*+U8x{m80A3W;DE4$34&U
z`F(%i=XcMK$aCe<$zgRf39<qN)+3RJLx2U_5lZr(A@=l|>?A>+OoSI*%W|xP$nQ1J
zC9E`>%ppMJzczELsm-J}fuXfR+C*>)V?hsAE0P71AYsxKqMR{7t5l2Do?4tnr}r@)
z`FgMnHm0taU=@{$y6xv+OxqcEGyQ=<To}5B`S5}yPXgwZUeCEGKtpT@EXP7YDP$Mm
z;WY!7B+4aVv#to$SylKRp2zWbXF(Ap+6^~B5~M7=b>tQv`ksp75^#snA$a=4_X5o$
z4k5WA+lJh9gDjZ$yuy7#)KC$a@BVE=ivZ}F=t0Y8r|@38&58o`-nf1r?XzMu=!xWr
zz`N6pxRPBf1iviJ;;`F-bxA68?s9@6sJLL;hpTYSx?_WL(+p_Hu|<Lp#=GGdZATeX
zic|W^{|9H#4DJ|OBLI%$aCx{1uV!2**6f2tUkOjpi^h*_DAg9CSi2u7WU`Q7*;kFR
z;CO7s{MUO%J9J7-Bq79x(e%lV=l+*SrDzZ!u(13?h@aLU!y%>wlZ$>-xW(f}aw-n$
zieSyEl5E>G^9J|5-FW|PNa(&=u>m)B)C(e7Mx5yK^~67J8<kqzHMYt6Is0=CQ%lp>
zqRNDVOo97rKh6)<gN^#NC5lTl1*q9-iQA}^AP=n@Zj4y-caa2qWOF%aN{P3D0WeA(
z%9sNp&-r5B)89krnMCOd{GY~V#-FiC0PqGUMctR%+S(2JHM^SD>N5QWC*u|>_&|`U
P00000NkvXXu0mjfpmSSp

literal 0
HcmV?d00001

diff --git a/src/locale/en.json b/src/locale/en.json
index 5883e30..e8d369f 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -47,7 +47,8 @@
 	"viewmore": "view more",
 	"ProductLabel": "Product",
 	"keywords": "keywords",
-	"Quickcontact": "Quick contact"
+	"Quickcontact": "Quick contact",
+	"sending": "sending"
   },
   "menu": {
     "Home": "Home",
diff --git a/src/locale/zh.json b/src/locale/zh.json
index ced328a..e43406b 100644
--- a/src/locale/zh.json
+++ b/src/locale/zh.json
@@ -47,7 +47,8 @@
 	"viewmore": "查看更多",
 	"ProductLabel": "产品",
 	"keywords": "关键字",
-	"Quickcontact": "快速联系"
+	"Quickcontact": "快速联系",
+	"sending": "发送"
   },
   "menu": {
     "Home": "首页",
diff --git a/src/pages.json b/src/pages.json
index c6cc88f..9c52e66 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -49,7 +49,8 @@
 					"path": "product-details",
 					"style": {
 						"navigationBarTitleText": "Product details",
-						"enablePullDownRefresh": true
+						"enablePullDownRefresh": true,
+						"navigationStyle": "default"
 					}
 				},
 				{
diff --git a/src/pages/products/index.vue b/src/pages/products/index.vue
index 0b91125..b48cef4 100644
--- a/src/pages/products/index.vue
+++ b/src/pages/products/index.vue
@@ -74,6 +74,7 @@
 					    class="prod-item"
 						v-for="item in prodList"
 						:key="item.id"
+						@click="goProdDetails(item)"
 					>
 						<image :src="item.mainPic" mode="aspectFit"></image>
 						<view class="text-ellipsis">
@@ -179,10 +180,10 @@
 	
 	const onlineModalShow = ref(false)
 	const onlineModalRef = ref()
-	const clickMsg = () => {
-		onlineModalShow.value = false
-		nextTick(() => {
-			
+	
+	const goProdDetails = (row) => {
+		uni.navigateTo({
+			url: `/application/product-details?id=${row.id}`
 		})
 	}