Browse Source

图片放大

wcni 5 years ago
parent
commit
2cf2d082f8
4 changed files with 230 additions and 4 deletions
  1. 4 0
      component/assess.vue
  2. 203 0
      component/openpictrue.vue
  3. 21 2
      pages/index/commemt.vue
  4. 2 2
      pages/index/sureBuy.vue

+ 4 - 0
component/assess.vue

@@ -15,6 +15,7 @@
 					</view>
 					<view>
 						<van-rate
+						  size="16"
 						  :value="item.satisfaction"
 						  void-icon="star"
 						  void-color="#eee"
@@ -24,6 +25,9 @@
 					</view>
 				</view>
 				<view style="color: #303133;font-size: 28upx;" class="uni-comment-content">{{item.content}}</view>
+				<view v-for="(items, index) in item.img_list" :key="index">
+					<image style="float: left;width: 100upx;height: 100upx;padding-right:18upx;" :src="items"></image>
+				</view>
 			</view>
 		</view>
 	</view>

+ 203 - 0
component/openpictrue.vue

@@ -0,0 +1,203 @@
+<template>
+	<view>
+		<view class="example">
+			<uniPopup :show="type" position="middle" mode="insert" @hidePopup="togglePopup('')">
+				<view class="uni-center center-box">
+					<image class="image" :src="images"  />
+				</view>
+			</uniPopup>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniPopup from './uni-popup.vue'
+	export default {
+		props: {
+			show: {
+				default: false,
+				type: Boolean
+			},
+			images: {
+				default: '',
+				type: String
+			}
+		},
+		components: {
+			uniPopup
+		},
+		watch: {
+			'show':function(val) {
+				console.log(val)
+				if(val) {
+					this.type = true;
+				}else {
+					this.type = false;
+				}
+			},
+		},
+		data() {
+			return {
+				type: false,
+				pictureUrl: this.pictureUrl,
+				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+			};
+		},
+		// onBackPress() {
+		// 	if (this.type !== '') {
+		// 		this.type = '';
+		// 		return true;
+		// 	}
+		// },
+		methods: {
+			togglePopup() {
+				this.type = false;
+				uni.$emit('changshow')
+			},
+			gomoney() {
+				// uni.navigateTo({
+				// 	url:'/pages/myCenter/definite'
+				// })
+			}
+		}
+	};
+</script>
+<style>
+	page {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		background-color: #fff
+	}
+
+	view {
+		font-size: 28upx;
+		line-height: inherit
+	}
+
+	.example {
+		padding: 0 30upx 30upx
+	}
+
+	.example-title {
+		font-size: 32upx;
+		line-height: 32upx;
+		color: #777;
+		margin: 40upx 25upx;
+		position: relative
+	}
+
+	.example .example-title {
+		margin: 40upx 0
+	}
+
+	.example-body {
+		padding: 0 40upx
+	}
+
+	.uni-padding-wrap {
+		padding: 0 30upx;
+	}
+
+	button {
+		margin: 20upx 0;
+	}
+
+	.uni-helllo-text {
+		height: 100upx;
+		line-height: 100upx;
+		text-align: center;
+	}
+
+	.center-box {
+		width: 800upx;
+		height: 800upx;
+	}
+
+	.uni-list-item {
+		text-align: left;
+		line-height: 80upx;
+		border-bottom: 1px #f5f5f5 solid;
+	}
+
+	.uni-list-item:last-child {
+		border: none;
+	}
+
+	.center-box .image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.bottom-title {
+		line-height: 60upx;
+		font-size: 24upx;
+		padding: 15upx 0;
+	}
+
+	.bottom-content {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 35upx;
+	}
+
+	.bottom-content-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 15upx;
+		width: 25%;
+		box-sizing: border-box;
+	}
+
+	.bottom-content-image {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 90upx;
+		height: 90upx;
+		overflow: hidden;
+		background: #007aff;
+		border-radius: 10upx;
+	}
+
+	.bottom-content-text {
+		font-size: 26upx;
+		color: #333;
+		margin-top: 10upx;
+	}
+
+	.bottom-btn {
+		height: 90upx;
+		line-height: 90upx;
+		border-top: 1px #f5f5f5 solid;
+	}
+
+	.bottom-content-image.wx {
+		background: #00ce47;
+	}
+
+	.bottom-content-image.qq {
+		background: #00b6f6;
+	}
+
+	.bottom-content-image.sina {
+		background: #ff766a;
+	}
+
+	.bottom-content-image.copy {
+		background: #07ccd0;
+	}
+
+	@font-face {
+		font-family: 'iconfont';
+		/* project id 1028200 */
+		src: url('https://at.alicdn.com/t/font_1028200_47ewtwy4t04.ttf') format('truetype');
+	}
+
+	.icon {
+		font-family: 'iconfont';
+		font-size: 40upx;
+		color: #fff;
+	}
+</style>

+ 21 - 2
pages/index/commemt.vue

@@ -25,25 +25,32 @@
 				</view>
 				<view style="color: #303133;font-size: 28upx;" class="uni-comment-content">{{item.geval_content}}</view>
 				<view>
-					<image  v-for="(items, index) in item.images"   :key="index" :src="items" style="width: 100upx;height: 100upx;float:left;"></image>
+					<image  v-for="(items, index) in item.images" @click="shoupicture(items)"  :key="index" :src="items" style="width: 100upx;height: 100upx;float:left;"></image>
 				</view>
 			</view>
 		</view>
 		<view style="text-align: center;" v-if="assesslist.length == 0">
 			暂无评价
 		</view>
+		
+		 <unipopup :images="images"  :show="ishow"/>
+		 
 	</view>
 </template>
 
 <script>
 	import assess from '@/component/assess.vue'  // 评价列表
+	import unipopup from '@/component/openpictrue.vue'
 	export default{
 		components: {
-			assess
+			assess,
+			unipopup
 		},
 		data(){
 			return {
 				goodId: 0,
+				ishow: false,
+				images: '',
 				assesslist:[],
 				store_id: 0
 			}
@@ -52,8 +59,20 @@
 			this.goodId = options.goodId;  // 商品Id
 			this.store_id =  options.store_id;
 			this.getassess();
+			uni.$on('changshow', (e) => {
+				this.changeshow();			
+			})
+			// changshow
 		},
 		methods: {
+			shoupicture(e) {
+				this.images = e;
+				this.ishow = true;
+				console.log(this.ishow)
+			},
+			changeshow() {
+				this.ishow = false;
+			},
 			getassess() {
 				this.request({
 					url: '/api/index.php?do=getevaluategoods',

+ 2 - 2
pages/index/sureBuy.vue

@@ -42,7 +42,7 @@
 		   <view @click="goshopvalue">
 			   <van-field
 			      :disabled="first==1&&!pleasesure"
-			   	  @focus="getplaese"
+			   	  @change="getplaese"
 			      :value="honename"
 			      label="房间号"
 			      placeholder="请输入房间号"
@@ -293,7 +293,7 @@
 			},
 			
 			getplaese(e) {
-				this.honename = e.detail.value;
+				this.honename = e.detail;
 			},
 			goshopvalue() {
 				if(!this.pleasesure && this.first == 1) {