Merge branch 'feat-traceability'

App.vue

@@ -21,6 +21,7 @@
 
 			if (apiInfo.protocal) {
 				Vue.prototype.apiUrl = `${apiInfo.protocal}${apiInfo.hostname}:${apiInfo.port}/api`
+				Vue.prototype.webviewUrl = `${apiInfo.protocal}${apiInfo.hostname}:${apiInfo.port}`
 			}
 			setTimeout(() => {
 				plus.navigator.closeSplashscreen()

pages.json

@@ -2230,6 +2230,58 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/traceability/traceabilityCode/index",
+			"style": {
+				"navigationBarTitleText": "溯源",
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		{
+			"path": "pages/traceability/scanCode/index",
+			"style": {
+				"navigationBarTitleText": "溯源",
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		{
+			"path" : "pages/traceability/traceabilityCode/purchase",
+			"style" : 
+			{
+				"navigationBarTitleText": "采购溯源",
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		{
+			"path" : "pages/traceability/traceabilityCode/production",
+			"style" : 
+			{
+				"navigationBarTitleText": "生产溯源",
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		{
+			"path" : "pages/traceability/traceabilityCode/quality",
+			"style" : 
+			{
+				"navigationBarTitleText": "质检溯源",
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		{
+			"path" : "pages/traceability/traceabilityCode/company",
+			"style" : 
+			{
+				"navigationBarTitleText": "企业信息",
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
 		}
 	],
 	"tabBar": {

pages/index/index.vue

@@ -105,6 +105,18 @@
 			</view>
 		</view>
 
+		<view>
+			<CellTip title="溯源管理" v-if="traceabilityList.length > 0"></CellTip>
+			<view class="nav">
+				<view class="nav-content">
+					<view class="nav-item" v-for="(item, index) in traceabilityList" @click="toNav(item.path)">
+						<span :class="'iconfont ' + item.icon"></span>
+						<i class="badge" v-if="item.badge">{{ item.badge }}</i>
+						<label>{{ item.name }}</label>
+					</view>
+				</view>
+			</view>
+		</view>
 		<!--    <view>
       <CellTip title="生产类"></CellTip>
 
@@ -192,7 +204,9 @@
 				treeList: [],
 				saleManageList: [],
 				// 售后服务
-				serviceList: []
+				serviceList: [],
+				// 溯源管理
+				traceabilityList: [],
 			}
 		},
 		created() {
@@ -261,6 +275,8 @@
 
 						} else if (f.path == 'serviceList') {
 							this.serviceList = f.children;
+						} else if (f.path == 'traceability') {
+							this.traceabilityList = f.children;
 						}
 					})
 				}
@@ -276,7 +292,30 @@
 				let _this = this
 				uni.scanCode({
 					success: function(res) {
-						_this.scantoRouter(res.result)
+						console.log(res)
+						// 获取扫描结果中的URL
+						const scanResult = res.result
+						// 检查URL是否包含traceability
+						if(scanResult && scanResult.includes('/traceability')) {
+							// 从扫描结果中提取id参数
+							let id = ''
+							if(scanResult.includes('id=')) {
+								// 分割URL获取id参数值
+								const idPart = scanResult.split('id=')[1]
+								// 如果id后面还有其他参数，只取到第一个&之前的部分
+								if(idPart.includes('&')) {
+									id = idPart.split('&')[0]
+								} else {
+									id = idPart
+								}
+							}
+							// 跳转到溯源页面并传递id
+							uni.navigateTo({
+								url: `pages/traceability/scanCode/index?id=${id}`
+							})
+							return
+						}
+						_this.scantoRouter(scanResult)
 					}
 				})
 			},

pages/traceability/scanCode/index.vue

@@ -0,0 +1,36 @@
+<template>
+	<view>
+		<web-view :webview-styles="webviewStyles" :src="path"></web-view>
+	</view>
+</template>
+
+<script>
+import Vue from 'vue'
+	export default {
+		data() {
+			return {
+				webviewStyles: {
+					progress: {
+						color: '#FF3333'
+					}
+				},
+                path: '/traceability',
+			}
+		},
+        onLoad({id}) {
+            console.log(id)
+            this.path = `${Vue.prototype.webviewUrl}/traceability?id=${id}`
+        },
+        computed: {
+            webviewUrl() {
+                console.log('webviewUrl', Vue.prototype.webviewUrl)
+                // http://aiot.zoomwin.com.cn:51007/traceability?id=1970310344451657730
+                return Vue.prototype.webviewUrl + '/traceability'
+            }
+        },
+	}
+</script>
+
+<style>
+
+</style>

pages/traceability/traceabilityCode/company.vue

@@ -0,0 +1,259 @@
+<template>
+  <view class="production-traceability-page">
+    <!-- 顶部导航栏 -->
+    <uni-nav-bar
+      fixed="true"
+      statusBar="true"
+      left-icon="back"
+      title="企业信息"
+      background-color="#fff"
+      color="#000"
+      @clickLeft="handleBack"
+    ></uni-nav-bar>
+    
+    <!-- 主内容区 -->
+    <view class="content-wrapper">
+      <!-- 编辑中标签 -->
+      <!-- <view class="edit-tag">编辑中</view> -->
+      
+      <!-- 产品图片区域 -->
+      <view class="product-image-section">
+		  <view class="product-title">
+			企业信息
+		  </view>
+			<image class="product-image" :src="productImageSrc" mode="aspectFit"></image>
+      </view>
+      
+      <!-- 生产信息列表 -->
+      <view class="info-list">
+		  <!-- 生产详情标题 -->
+		  <view class="info-title">
+		    <text>企业简介</text>
+		  </view>
+        <view class="info-item">
+          <text class="info-label">企业名称:</text>
+          <text class="info-value">湖南聚仁中药饮片有限公司</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">企业类别:</text>
+          <text class="info-value">药材供应商/生产商</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">工商注册号:</text>
+          <text class="info-value">914314558887788</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">组织机构代码:</text>
+          <text class="info-value">123456</text>
+        </view>
+		<view class="info-item">
+		  <text class="info-label">法人:</text>
+		  <text class="info-value">侯辉</text>
+		</view>
+		<!-- 查看更多信息按钮 -->
+		<view class="more-info-btn" @click="toggleMoreInfo">
+		  <text>查看更多信息</text>
+		  <image class="dropdown-icon" :src="companyIconSrc" mode="aspectFit"></image>
+		</view>
+      </view>
+      
+      <!-- 底部装饰 -->
+<!--      <view class="bottom-decoration">
+        <image :src="waveIconSrc" mode="aspectFill"></image>
+      </view> -->
+      
+      <!-- 返回首页按钮 -->
+  <!--    <view class="home-button" @click="goToHome">
+        <image class="home-icon" :src="homeIconSrc" mode="aspectFit"></image>
+      </view> -->
+    </view>
+  </view>
+</template>
+ 
+<script>
+export default {
+  data() {
+    return {
+      // 使用项目中已有的图标路径
+      waveIconSrc: '/static/svg-icons/wave.svg',
+      homeIconSrc: '/static/tab/home.png',
+	   productImageSrc: '/static/product/1.svg',
+	   companyIconSrc: '/static/product/xl.svg',
+    };
+  },
+  methods: {
+    handleBack() {
+      // 返回上一页
+      uni.navigateBack();
+    },
+    goToHome() {
+      // 返回首页
+      uni.switchTab({
+        url: '/pages/home/home'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.production-traceability-page {
+  background-color: #fff;
+  min-height: 100vh;
+  background-image: url('/static/svg-icons/bg-pattern.svg');
+  background-size: cover;
+  background-position: center;
+}
+
+.content-wrapper {
+  padding: 60rpx 40rpx 60rpx;
+  position: relative;
+}
+
+.edit-tag {
+  position: absolute;
+  top: 80rpx;
+  left: 0;
+  width: 160rpx;
+  height: 60rpx;
+  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
+  color: #fff;
+  text-align: center;
+  line-height: 60rpx;
+  font-size: 26rpx;
+  border-radius: 0 30rpx 30rpx 0;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.product-image-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40rpx;
+  background-color: #fff;
+  padding: 40rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+}
+
+.product-title {
+	position: absolute;
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #fff;
+	text-align: center;
+	margin-bottom: 20rpx;
+	padding: 10rpx 40rpx;
+	background: #bd0402;
+	border-radius: 10rpx;
+	box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
+	top: -20rpx;
+}
+
+.info-title {
+  position: absolute;
+  top: -20rpx;
+  left: 35%;
+  background-color: #bd0402;
+  color: #fff;
+  text-align: center;
+  padding: 10rpx 40rpx;
+  margin-bottom: 30rpx;
+  border-radius: 10rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.info-list {
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+  padding-top: 56rpx;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #bd0402;
+  margin-right: 10rpx;
+  flex: 1;
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  flex: 2;
+}
+
+.bottom-decoration {
+  width: 100%;
+  height: 100rpx;
+  overflow: hidden;
+  margin-top: 40rpx;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.bottom-decoration image {
+  width: 100%;
+  height: 100%;
+}
+
+.more-info-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 26rpx;
+  color: #bd0402;
+  padding: 10rpx 0;
+  margin-top: 20rpx;
+}
+
+.dropdown-icon {
+  width: 24rpx;
+  height: 24rpx;
+  margin-left: 10rpx;
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+  color: #bd0402;
+}
+
+.home-button {
+  position: fixed;
+  bottom: 60rpx;
+  right: 60rpx;
+  width: 100rpx;
+  height: 100rpx;
+  background-color: #bd0402;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(189, 4, 2, 0.4);
+  z-index: 20;
+}
+
+.home-icon {
+  width: 60rpx;
+  height: 60rpx;
+}
+</style>

pages/traceability/traceabilityCode/index.vue

@@ -0,0 +1,364 @@
+<template>
+  <view class="traceability-page">
+    <!-- 顶部导航栏 -->
+    <uni-nav-bar
+      fixed="true"
+      statusBar="true"
+      left-icon="back"
+      title="溯源"
+      background-color="#fff"
+      color="#000"
+      @clickLeft="handleBack"
+    ></uni-nav-bar>
+    
+    <!-- 主内容区 -->
+    <view class="content-wrapper">
+      <!-- 编辑中标签 -->
+      <view class="edit-tag">编辑中</view>
+      
+      <!-- 产品图片区域 -->
+      <view class="product-image-section">
+        <view class="image-container">
+          <image class="product-image" :src="productImageSrc" mode="aspectFit"></image>
+        </view>
+      </view>
+      
+      <!-- 产品基本信息区域 -->
+      <view class="product-info-section">
+        <view class="info-title">产品基本信息</view>
+        <view class="info-content">
+			<u-row gutter="10" align="top" customStyle="margin-bottom: 10px">
+				<u-col span="6">
+					<view class="info-item">
+					  <text class="info-label">品名:</text>
+					  <text class="info-value">菝葜菝葜菝葜菝葜菝葜菝葜菝葜菝葜菝葜</text>
+					</view>
+				</u-col>
+				<u-col span="6">
+					<view class="info-item">
+					  <text class="info-label">产地:</text>
+					  <text class="info-value">湖南怀化</text>
+					</view>
+				</u-col>
+			</u-row>
+			<u-row gutter="10" align="top" customStyle="margin-bottom: 10px">
+				<u-col span="6">
+					<view class="info-item">
+					  <text class="info-label">商品编码:</text>
+					  <text class="info-value">AD0017</text>
+					</view>
+				</u-col>
+				<u-col span="6">
+					<view class="info-item">
+					  <text class="info-label">批号:</text>
+					  <text class="info-value">25072301</text>
+					</view>
+				</u-col>
+			</u-row>
+        </view>
+        <!-- 查看更多信息按钮 -->
+        <view class="more-info-btn" @click="toggleMoreInfo">
+          <text>查看更多信息</text>
+          <image class="dropdown-icon" :src="companyIconSrc" mode="aspectFit"></image>
+        </view>
+      </view>
+      
+      <!-- 功能按钮区域 -->
+      <view class="function-buttons">
+        <view class="button-row">
+          <view class="function-btn" @click="navigateToPurchase">
+            <image class="btn-icon" :src="cartIconSrc" mode="aspectFit"></image>
+            <text class="btn-text">采购溯源</text>
+          </view>
+          <view class="function-btn" @click="navigateToProduction">
+            <image class="btn-icon" :src="productionIconSrc" mode="aspectFit"></image>
+            <text class="btn-text">生产溯源</text>
+          </view>
+      <!--  </view>
+        <view class="button-row"> -->
+          <view class="function-btn" @click="navigateToQuality">
+            <image class="btn-icon" :src="qualityIconSrc" mode="aspectFit"></image>
+            <text class="btn-text">质检溯源</text>
+          </view>
+          <view class="function-btn" @click="navigateToCompany">
+            <image class="btn-icon" :src="companyIconSrc" mode="aspectFit"></image>
+            <text class="btn-text">企业信息</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 底部装饰 -->
+    <!--  <view class="bottom-decoration">
+        <image :src="waveIconSrc" mode="aspectFill"></image>
+      </view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showMoreInfo: false,
+      // 使用项目中已有的图标路径
+      productImageSrc: '/static/product/1.svg',
+      selectIconSrc: '/static/select.svg',
+      cartIconSrc: '/static/product/2.svg',
+      productionIconSrc: '/static/product/3.svg',
+      qualityIconSrc: '/static/product/4.svg',
+      companyIconSrc: '/static/product/xl.svg',
+      waveIconSrc: '/static/svg-icons/wave.svg'
+    };
+  },
+  methods: {
+    handleBack() {
+      // 返回上一页
+      uni.navigateBack();
+    },
+    toggleMoreInfo() {
+      // 切换显示更多信息
+      this.showMoreInfo = !this.showMoreInfo;
+    },
+    navigateToPurchase() {
+      // 跳转到采购溯源页面
+    //   uni.showToast({
+    //     title: '采购溯源功能待实现',
+    //     icon: 'none'
+    //   });
+	  uni.navigateTo({
+	  	url: '/pages/traceability/traceabilityCode/purchase'
+	  })
+    },
+    navigateToProduction() {
+      // 跳转到生产溯源页面
+    //   uni.showToast({
+    //     title: '生产溯源功能待实现',
+    //     icon: 'none'
+    //   });
+      uni.navigateTo({
+	  	url: '/pages/traceability/traceabilityCode/production'
+	  })
+    },
+    navigateToQuality() {
+      // 跳转到质检溯源页面
+    //   uni.showToast({
+    //     title: '质检溯源功能待实现',
+    //     icon: 'none'
+    //   });
+      uni.navigateTo({
+	  	url: '/pages/traceability/traceabilityCode/quality'
+	  })
+    },
+    navigateToCompany() {
+      // 跳转到企业信息页面
+    //   uni.showToast({
+    //     title: '企业信息功能待实现',
+    //     icon: 'none'
+    //   });
+      uni.navigateTo({
+	  	url: '/pages/traceability/traceabilityCode/company'
+	  })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.traceability-page {
+  background-color: #fff;
+  min-height: 100vh;
+  background-image: url('/static/svg-icons/bg-pattern.svg');
+  background-size: cover;
+  background-position: center;
+}
+
+.content-wrapper {
+  padding: 120rpx 40rpx 40rpx;
+  position: relative;
+}
+
+.edit-tag {
+  position: absolute;
+  top: 80rpx;
+  left: 0;
+  width: 160rpx;
+  height: 60rpx;
+  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
+  color: #fff;
+  text-align: center;
+  line-height: 60rpx;
+  font-size: 26rpx;
+  border-radius: 0 30rpx 30rpx 0;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.product-image-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 60rpx;
+}
+
+.image-container {
+  width: 300rpx;
+  height: 300rpx;
+  border-radius: 50%;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+  border: 16rpx solid #fff;
+  position: relative;
+}
+
+// 添加红色装饰边框
+.image-container::before {
+  content: '';
+  position: absolute;
+  top: -24rpx;
+  left: -24rpx;
+  right: -24rpx;
+  bottom: -24rpx;
+  border-radius: 50%;
+  border: 2rpx dashed #ff6b6b;
+  opacity: 0.6;
+}
+
+// .image-container::after {
+//   content: '';
+//   position: absolute;
+//   top: -34rpx;
+//   right: -34rpx;
+//   width: 80rpx;
+//   height: 80rpx;
+//   background-image: url('/static/svg-icons/decorative-corner.svg');
+//   background-size: contain;
+//   background-repeat: no-repeat;
+// }
+
+.product-image {
+  width: 240rpx;
+  height: 240rpx;
+  border-radius: 8rpx;
+}
+
+.product-info-section {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 60rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+}
+
+.info-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  text-align: center;
+  margin-bottom: 20rpx;
+  padding: 10rpx 40rpx;
+  background: #bd0402;
+  border-radius: 10rpx;
+  box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
+  position: absolute;
+  top: -20rpx;
+  left: 30%;
+}
+
+.info-content {
+  margin-bottom: 20rpx;
+  padding-top: 32rpx;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #bd0402;
+  margin-right: 10rpx;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  flex: 1;
+}
+
+.more-info-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 26rpx;
+  color: #bd0402;
+  padding: 10rpx 0;
+}
+
+.dropdown-icon {
+  width: 24rpx;
+  height: 24rpx;
+  margin-left: 10rpx;
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+  color: #bd0402;
+}
+
+.function-buttons {
+  margin-bottom: 60rpx;
+}
+
+.button-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30rpx;
+}
+
+.function-btn {
+  width: 23%;
+  height: 240rpx;
+  // background: linear-gradient(135deg, #ff6b6b, #ff8e53);
+  background: #bd0402;
+  border-radius: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
+  transition: transform 0.2s;
+  border: 2rpx solid #fff;
+}
+
+.function-btn:active {
+  transform: scale(0.98);
+}
+
+.btn-icon {
+  width: 60rpx;
+  height: 60rpx;
+  margin-bottom: 10rpx;
+}
+
+.btn-text {
+  font-size: 28rpx;
+  font-weight: 500;
+}
+
+.bottom-decoration {
+  width: 100%;
+  height: 100rpx;
+  overflow: hidden;
+  margin-top: 40rpx;
+}
+
+.bottom-decoration image {
+  width: 100%;
+  height: 100%;
+}
+</style>

pages/traceability/traceabilityCode/production.vue

@@ -0,0 +1,230 @@
+<template>
+  <view class="production-traceability-page">
+    <!-- 顶部导航栏 -->
+    <uni-nav-bar
+      fixed="true"
+      statusBar="true"
+      left-icon="back"
+      title="生产溯源"
+      background-color="#fff"
+      color="#000"
+      @clickLeft="handleBack"
+    ></uni-nav-bar>
+    
+    <!-- 主内容区 -->
+    <view class="content-wrapper">
+      <!-- 编辑中标签 -->
+      <view class="edit-tag">编辑中</view>
+      
+      <!-- 产品图片区域 -->
+      <view class="product-image-section">
+		  <view class="product-title">
+			生产溯源
+		  </view>
+			<image class="product-image" :src="productImageSrc" mode="aspectFit"></image>
+      </view>
+      
+      <!-- 生产信息列表 -->
+      <view class="info-list">
+		  <!-- 生产详情标题 -->
+		  <view class="info-title">
+		    <text>生产详情</text>
+		  </view>
+        <view class="info-item">
+          <text class="info-label">生产日期:</text>
+          <text class="info-value">2025-07-24</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">批生产量:</text>
+          <text class="info-value">500(Kg)</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">执行标准:</text>
+          <text class="info-value">《中国药典》2020年版</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">加工工序:</text>
+          <text class="info-value">领料、净选、干燥、筛选、中间体、包装批指令、包装</text>
+        </view>
+      </view>
+      
+      <!-- 底部装饰 -->
+   <!--   <view class="bottom-decoration">
+        <image :src="waveIconSrc" mode="aspectFill"></image>
+      </view> -->
+      
+      <!-- 返回首页按钮 -->
+  <!--    <view class="home-button" @click="goToHome">
+        <image class="home-icon" :src="homeIconSrc" mode="aspectFit"></image>
+      </view> -->
+    </view>
+  </view>
+</template>
+ 
+<script>
+export default {
+  data() {
+    return {
+      // 使用项目中已有的图标路径
+      waveIconSrc: '/static/svg-icons/wave.svg',
+      homeIconSrc: '/static/tab/home.png',
+	   productImageSrc: '/static/product/1.svg',
+    };
+  },
+  methods: {
+    handleBack() {
+      // 返回上一页
+      uni.navigateBack();
+    },
+    goToHome() {
+      // 返回首页
+      uni.switchTab({
+        url: '/pages/home/home'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.production-traceability-page {
+  background-color: #fff;
+  min-height: 100vh;
+  background-image: url('/static/svg-icons/bg-pattern.svg');
+  background-size: cover;
+  background-position: center;
+}
+
+.content-wrapper {
+  padding: 60rpx 40rpx 60rpx;
+  position: relative;
+}
+
+.edit-tag {
+  position: absolute;
+  top: 80rpx;
+  left: 0;
+  width: 160rpx;
+  height: 60rpx;
+  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
+  color: #fff;
+  text-align: center;
+  line-height: 60rpx;
+  font-size: 26rpx;
+  border-radius: 0 30rpx 30rpx 0;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.product-image-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40rpx;
+  background-color: #fff;
+  padding: 40rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+}
+
+.product-title {
+	position: absolute;
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #fff;
+	text-align: center;
+	margin-bottom: 20rpx;
+	padding: 10rpx 40rpx;
+	background: #bd0402;
+	border-radius: 10rpx;
+	box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
+	top: -20rpx;
+}
+
+.info-title {
+  position: absolute;
+  top: -20rpx;
+  left: 35%;
+  background-color: #bd0402;
+  color: #fff;
+  text-align: center;
+  padding: 10rpx 40rpx;
+  margin-bottom: 30rpx;
+  border-radius: 10rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.info-list {
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+  padding-top: 56rpx;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #bd0402;
+  margin-right: 10rpx;
+  flex: 1;
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  flex: 2;
+}
+
+.bottom-decoration {
+  width: 100%;
+  height: 100rpx;
+  overflow: hidden;
+  margin-top: 40rpx;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.bottom-decoration image {
+  width: 100%;
+  height: 100%;
+}
+
+.home-button {
+  position: fixed;
+  bottom: 60rpx;
+  right: 60rpx;
+  width: 100rpx;
+  height: 100rpx;
+  background-color: #bd0402;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(189, 4, 2, 0.4);
+  z-index: 20;
+}
+
+.home-icon {
+  width: 60rpx;
+  height: 60rpx;
+}
+</style>

pages/traceability/traceabilityCode/purchase.vue

@@ -0,0 +1,244 @@
+<template>
+  <view class="purchase-traceability-page">
+    <!-- 顶部导航栏 -->
+    <uni-nav-bar
+      fixed="true"
+      statusBar="true"
+      left-icon="back"
+      title="采购溯源"
+      background-color="#fff"
+      color="#000"
+      @clickLeft="handleBack"
+    ></uni-nav-bar>
+    
+    <!-- 主内容区 -->
+    <view class="content-wrapper">
+      <!-- 产品图片区域 -->
+      <view class="product-image-section">
+		  <view class="product-title">
+		  	采购溯源
+		  </view>
+        <image class="product-image" :src="productImageSrc" mode="aspectFit"></image>
+      </view>
+      
+      
+      
+      <!-- 采购信息列表 -->
+      <view class="info-list">
+		  <!-- 采购详情标题 -->
+		  <view class="info-title">
+			<text>采购详情</text>
+		  </view>
+        <view class="info-item">
+          <text class="info-label">原药批号:</text>
+          <text class="info-value">YA085-250401</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">原药产地:</text>
+          <text class="info-value">湖南怀化</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">采购时间:</text>
+          <text class="info-value"></text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">采购人员:</text>
+          <text class="info-value">申瑶</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">采购重量:</text>
+          <text class="info-value">1000kg</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">采购日期:</text>
+          <text class="info-value">2025-03-29</text>
+        </view>
+		<view class="images-section">
+		  <text class="section-subtitle">图片:</text>
+		  <view class="images-grid">
+		    <image class="detail-image" :src="detailImageSrc" mode="aspectFill"></image>
+		  </view>
+		</view>
+      </view>
+      
+      <!-- 图片展示区域 -->
+ <!--     <view class="images-section">
+        <text class="section-subtitle">图片:</text>
+        <view class="images-grid">
+          <image class="detail-image" :src="detailImageSrc" mode="aspectFill"></image>
+        </view>
+      </view> -->
+      
+      <!-- 返回首页按钮 -->
+   <!--   <view class="home-button" @click="goToHome">
+        <image class="home-icon" :src="homeIconSrc" mode="aspectFit"></image>
+      </view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 使用项目中已有的图标路径
+      productImageSrc: '/static/product/1.svg',
+      detailImageSrc: '/static/product/1.svg',
+      homeIconSrc: '/static/tab/home.png'
+    };
+  },
+  methods: {
+    handleBack() {
+      // 返回上一页
+      uni.navigateBack();
+    },
+    goToHome() {
+      // 返回首页
+      uni.switchTab({
+        url: '/pages/home/home'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.purchase-traceability-page {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  background-image: url('/static/svg-icons/bg-pattern.svg');
+  background-size: cover;
+  background-position: center;
+}
+
+.content-wrapper {
+  padding: 60rpx 40rpx 60rpx;
+}
+
+.product-image-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40rpx;
+  background-color: #fff;
+  padding: 40rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+}
+
+.product-title {
+	position: absolute;
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #fff;
+	text-align: center;
+	margin-bottom: 20rpx;
+	padding: 10rpx 40rpx;
+	background: #bd0402;
+	border-radius: 10rpx;
+	box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
+	top: -20rpx;
+}
+
+.product-image {
+  width: 100%;
+  height: 400rpx;
+  border-radius: 10rpx;
+  margin-top: 20rpx;
+}
+
+.info-list {
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  padding-top: 56rpx;
+  border: 2rpx solid #ffe6e6;
+}
+
+.info-title {
+  position: absolute;
+  top: -20rpx;
+  left: 35%;
+  background-color: #bd0402;
+  color: #fff;
+  text-align: center;
+  padding: 10rpx 40rpx;
+  margin-bottom: 30rpx;
+  border-radius: 10rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #bd0402;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  text-align: right;
+}
+
+.images-section {
+  // background-color: #fff;
+  // border-radius: 20rpx;
+  padding: 20rpx 0;
+  // margin-bottom: 60rpx;
+  // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.section-subtitle {
+  font-size: 28rpx;
+  color: #bd0402;
+  margin-bottom: 20rpx;
+  display: block;
+}
+
+.images-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.detail-image {
+  width: 100%;
+  height: 400rpx;
+  border-radius: 10rpx;
+}
+
+.home-button {
+  position: fixed;
+  bottom: 60rpx;
+  right: 60rpx;
+  width: 100rpx;
+  height: 100rpx;
+  background-color: #bd0402;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(189, 4, 2, 0.4);
+}
+
+.home-icon {
+  width: 60rpx;
+  height: 60rpx;
+}
+</style>

pages/traceability/traceabilityCode/quality.vue

@@ -0,0 +1,252 @@
+<template>
+  <view class="production-traceability-page">
+    <!-- 顶部导航栏 -->
+    <uni-nav-bar
+      fixed="true"
+      statusBar="true"
+      left-icon="back"
+      title="质检溯源"
+      background-color="#fff"
+      color="#000"
+      @clickLeft="handleBack"
+    ></uni-nav-bar>
+    
+    <!-- 主内容区 -->
+    <view class="content-wrapper">
+      <!-- 编辑中标签 -->
+      <view class="edit-tag">编辑中</view>
+      
+      <!-- 产品图片区域 -->
+      <view class="product-image-section">
+		  <view class="product-title">
+			质检溯源
+		  </view>
+			<image class="product-image" :src="productImageSrc" mode="aspectFit"></image>
+      </view>
+      
+      <!-- 质检信息列表 -->
+      <view class="info-list">
+		  <!-- 质检详情标题 -->
+		  <view class="info-title">
+		    <text>质检详情</text>
+		  </view>
+        <view class="info-item">
+          <text class="info-label">检测依据:</text>
+          <text class="info-value">《中国药典》2020年版</text>
+        </view>
+        <view class="images-section">
+          <text class="section-subtitle">报告单:</text>
+          <view class="images-grid">
+            <image class="detail-image" :src="detailImageSrc" mode="aspectFill"></image>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 底部装饰 -->
+   <!--   <view class="bottom-decoration">
+        <image :src="waveIconSrc" mode="aspectFill"></image>
+      </view> -->
+      
+      <!-- 返回首页按钮 -->
+  <!--    <view class="home-button" @click="goToHome">
+        <image class="home-icon" :src="homeIconSrc" mode="aspectFit"></image>
+      </view> -->
+    </view>
+  </view>
+</template>
+ 
+<script>
+export default {
+  data() {
+    return {
+      // 使用项目中已有的图标路径
+      waveIconSrc: '/static/svg-icons/wave.svg',
+	  detailImageSrc: '/static/product/1.svg',
+      homeIconSrc: '/static/tab/home.png',
+	   productImageSrc: '/static/product/1.svg',
+    };
+  },
+  methods: {
+    handleBack() {
+      // 返回上一页
+      uni.navigateBack();
+    },
+    goToHome() {
+      // 返回首页
+      uni.switchTab({
+        url: '/pages/home/home'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.production-traceability-page {
+  background-color: #fff;
+  min-height: 100vh;
+  background-image: url('/static/svg-icons/bg-pattern.svg');
+  background-size: cover;
+  background-position: center;
+}
+
+.content-wrapper {
+  padding: 60rpx 40rpx 60rpx;
+  position: relative;
+}
+
+.edit-tag {
+  position: absolute;
+  top: 80rpx;
+  left: 0;
+  width: 160rpx;
+  height: 60rpx;
+  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
+  color: #fff;
+  text-align: center;
+  line-height: 60rpx;
+  font-size: 26rpx;
+  border-radius: 0 30rpx 30rpx 0;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.product-image-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40rpx;
+  background-color: #fff;
+  padding: 40rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+}
+
+.product-title {
+	position: absolute;
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #fff;
+	text-align: center;
+	margin-bottom: 20rpx;
+	padding: 10rpx 40rpx;
+	background: #bd0402;
+	border-radius: 10rpx;
+	box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
+	top: -20rpx;
+}
+
+.info-title {
+  position: absolute;
+  top: -20rpx;
+  left: 35%;
+  background-color: #bd0402;
+  color: #fff;
+  text-align: center;
+  padding: 10rpx 40rpx;
+  margin-bottom: 30rpx;
+  border-radius: 10rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.info-list {
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  border: 2rpx solid #ffe6e6;
+  position: relative;
+  padding-top: 56rpx;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #bd0402;
+  margin-right: 10rpx;
+  flex: 1;
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  flex: 2;
+}
+
+.bottom-decoration {
+  width: 100%;
+  height: 100rpx;
+  overflow: hidden;
+  margin-top: 40rpx;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.bottom-decoration image {
+  width: 100%;
+  height: 100%;
+}
+
+.images-section {
+  // background-color: #fff;
+  // border-radius: 20rpx;
+  padding: 20rpx 0;
+  // margin-bottom: 60rpx;
+  // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.section-subtitle {
+  font-size: 28rpx;
+  color: #bd0402;
+  margin-bottom: 20rpx;
+  display: block;
+}
+
+.images-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.detail-image {
+  width: 100%;
+  height: 400rpx;
+  border-radius: 10rpx;
+}
+
+.home-button {
+  position: fixed;
+  bottom: 60rpx;
+  right: 60rpx;
+  width: 100rpx;
+  height: 100rpx;
+  background-color: #bd0402;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(189, 4, 2, 0.4);
+  z-index: 20;
+}
+
+.home-icon {
+  width: 60rpx;
+  height: 60rpx;
+}
+</style>

static/svg-icons/bg-pattern.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100">
+  <defs>
+    <pattern id="cloud-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
+      <!-- 云纹图案 -->
+      <path fill="none" stroke="#FFE6E6" stroke-width="0.5" d="M10,20 Q15,15 20,20 T30,20" opacity="0.6"/>
+      <path fill="none" stroke="#FFD1D1" stroke-width="0.5" d="M12,18 Q17,13 22,18 T32,18" opacity="0.4"/>
+      <!-- 装饰点 -->
+      <circle cx="10" cy="10" r="1" fill="#FFE6E6" opacity="0.5"/>
+      <circle cx="30" cy="30" r="1" fill="#FFD1D1" opacity="0.6"/>
+      <!-- 装饰线条 -->
+      <line x1="0" y1="0" x2="5" y2="5" stroke="#FFE6E6" stroke-width="0.3" opacity="0.4"/>
+      <line x1="40" y1="0" x2="35" y2="5" stroke="#FFD1D1" stroke-width="0.3" opacity="0.4"/>
+    </pattern>
+    <!-- 装饰角 -->
+    <pattern id="corner-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path fill="none" stroke="#FF8E8E" stroke-width="0.3" d="M0,10 Q5,5 10,10" opacity="0.2"/>
+      <path fill="none" stroke="#FF8E8E" stroke-width="0.3" d="M30,0 Q35,5 30,10" opacity="0.2"/>
+      <path fill="none" stroke="#FF8E8E" stroke-width="0.3" d="M0,30 Q5,35 10,30" opacity="0.2"/>
+      <path fill="none" stroke="#FF8E8E" stroke-width="0.3" d="M30,40 Q35,35 30,30" opacity="0.2"/>
+    </pattern>
+  </defs>
+  <!-- 主背景 -->
+  <rect x="0" y="0" width="100" height="100" fill="white"/>
+  <!-- 叠加图案 -->
+  <rect x="0" y="0" width="100" height="100" fill="url(#cloud-pattern)"/>
+  <rect x="0" y="0" width="100" height="100" fill="url(#corner-pattern)"/>
+</svg>

static/svg-icons/wave.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1440 100">
+  <path fill="#FFE6E6" fill-opacity="1" d="M0,64L80,53.3C160,43,320,21,480,26.7C640,32,800,64,960,69.3C1120,75,1280,53,1360,42.7L1440,32L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
+  <path fill="#FFD1D1" fill-opacity="1" d="M0,48L80,64C160,80,320,112,480,117.3C640,123,800,101,960,85.3C1120,69,1280,59,1360,53.3L1440,48L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
+  <path fill="#FF8E8E" fill-opacity="1" d="M0,80L80,69.3C160,59,320,37,480,37.3C640,37,800,59,960,64C1120,69,1280,59,1360,53.3L1440,48L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
+</svg>