二维码样式

pages/index/components/home.vue

@@ -3,8 +3,10 @@
 		<view v-if="healthCode" style="position: relative;">
 			<image src="http://m.qpic.cn/psc?/V11kyB1O080aC1/cnQ2D7YjAZ5R6pY0fmc9joZ6fC6TxFlt9mW4UhUn2PEgUne7OUt4q4mNE.k9gU.rSr8Eu*pFToZoVwUOEGDrKMycDqdn1mLFGE1dxYTGUcE!/b&bo=7gKRAu4CkQIDWXw!&rf=viewer_4&t=5"
 			 class="bg1"></image>
-			<view class="bg-code">
+			<view class="bg-code" @click="getPreviewImg(healthCode)">
-				<image class="healthy-code" :src="healthCode"></image>
+				<view class="healthy-code-bg shadow-lg">
+					<image class="healthy-code" :src="healthCode"></image>
+				</view>
 			</view>
 		</view>
 		<image v-else src="http://m.qpic.cn/psc?/V11kyB1O080aC1/cnQ2D7YjAZ5R6pY0fmc9jhx9v1rh8VuBAojvYxrYvg*uVMAXaD2En3CPiaHx7AWMjFTafVrGxwJR4jZd5s4ProhQT1ceDVquyQR7HVquBKk!/b&bo=7gLuAe4C7gEDORw!&rf=viewer_4&t=5"
@@ -61,14 +63,27 @@
 </template>
 
 <script>
-	import { mapState } from 'vuex';
+	import {
+		mapState
+	} from 'vuex';
 	export default {
 		name: 'Home',
 		data() {
-			return {
+			return {}
-			}
 		},
-		computed: mapState('user', ['userInfo','healthCode']),
+		computed: mapState('user', ['userInfo', 'healthCode']),
+		methods: {
+			//预览图片
+			getPreviewImg(image) {
+				var imgArr = [];
+				imgArr.push(image);
+				uni.previewImage({
+					urls: imgArr,
+					current: imgArr[0]
+				});
+			},
+			
+		}
 	};
 </script>
 
@@ -89,11 +104,23 @@
 		position: absolute;
 		top: 370rpx;
 		
-		.healthy-code {
+		.healthy-code-bg {
 			margin: 0 auto;
 			width: 230rpx;
 			height: 230rpx;
+			border-radius: 10px;
+			overflow: hidden;
+			background: $ghostWhite;
+			
+			.healthy-code {
+				margin: 5rpx;
+				width: 220rpx;
+				height: 220rpx;
+				border-radius: 10px;
+			}
 		}
+
+		
 	}
 
 	.box {

pages/index/components/mine.vue

@@ -11,7 +11,7 @@
 					<!-- <view class="text-df padding-top-xs">{{ user.wxInfo.classes }}</view> -->
 				</view>
 
-				<image class="healthy-code" :src="healthCode"></image>
+				<image class="healthy-code" :src="healthCode" @tap="getPreviewImg(healthCode)"></image>
 			</view>
 		</view>
 		<view class="cu-card flex bg-white" v-else>
@@ -65,7 +65,21 @@
 				},
 			};
 		},
+		
 		computed: mapState('user', ['healthCode', 'user']),
+		
+		methods: {
+			//预览图片
+			getPreviewImg(image) {
+				var imgArr = [];
+				imgArr.push(image);
+				uni.previewImage({
+					urls: imgArr,
+					current: imgArr[0]
+				});
+			},
+			
+		}
 	};
 </script>