Browse Source

修复编译错误;美化列表和详情页

skym1024 1 year ago
parent
commit
e5f952d126
3 changed files with 62 additions and 29 deletions
  1. 18 9
      pages/merchant/info.vue
  2. 16 13
      pages/shop/index.vue
  3. 28 7
      pages/shop/info.vue

+ 18 - 9
pages/merchant/info.vue

@@ -1,16 +1,16 @@
 <template>
 	<view class="container">
-		<uni-section title="{{merchant.name}}" type="line">
+		<uni-section :title="merchant.name" type="line">
 			<uni-card padding="0" spacing="0">
 				<uni-list>
-					<uni-list-item title="类型:{{merchant.type}}"><text></text> </uni-list-item>
-					<uni-list-item title="社区:{{merchant.affiliatedCommunity}}"><text></text></uni-list-item>
-					<uni-list-item title="地址:{{merchant.address}}"><text></text></uni-list-item>
-					<uni-list-item title="联系人:{{merchant.contact}}"><text></text></uni-list-item>
-					<uni-list-item title="电话:{{merchant.tel}}"><text></text></uni-list-item>
+					<uni-list-item :title="merchantType"></uni-list-item>
+					<uni-list-item :title="merchantCommunity"></uni-list-item>
+					<uni-list-item :title="merchantTel"></uni-list-item>
+					<uni-list-item :title="merchantAddress"></uni-list-item>
+					<uni-list-item :title="merchantContact"></uni-list-item>
 				</uni-list>
 			</uni-card>
-		</uni-section>		
+		</uni-section>
 	</view>
 </template>
 
@@ -36,9 +36,18 @@
 			if(this.merchant.contact == null) this.merchant.contact = "";
 			if(this.merchant.tel == null) this.merchant.tel = "";
 		},
-		methods: {}
+		computed:{
+			merchantType(){return "类型: "+ this.merchant.type;},
+			merchantCommunity(){return "社区:" + this.merchant.affiliatedCommunity;},
+			merchantTel(){return "电话:" + this.merchant.tel;},
+			merchantAddress(){return "地址:" + this.merchant.address;},
+			merchantContact(){return "联系人:" + this.merchant.contact;}
+		},
+		methods: {
+
+		}
 	}
 </script>
 
 <style>
-</style>
+</style>

+ 16 - 13
pages/shop/index.vue

@@ -12,7 +12,7 @@
 				<uni-row class="demo-uni-row" :width="nvueWidth">
 					<uni-col :span="11">
 						<view class="demo-uni-col">						
-							<uni-data-picker :localdata="addressOptions" v-model="selectedAddress" placeholder="商铺位置" popup-title="选择商铺位置" 
+							<uni-data-picker :localdata="addressOptions" v-model="selectedAddress" placeholder="商业板块/楼栋/楼层" popup-title="请选择商业板块/楼栋/楼层" 
 							 @change="onchange"
 							 @nodeclick="onnodeclick"
 							 @popupclosed="onpopupclosed"></uni-data-picker>
@@ -41,12 +41,12 @@
 				v-for="(item, index) in resultList"
 				:key="index"
 				:ellipsis="2"
-				:title=getTitle(item)
-				:note="item.createTime"
+				:title="item.district"
+				:note=getAddress(item)
+				:rightText=getMerchantName(item)
 				showArrow
 				clickable
-				@click="listItemBtn(item)">
-				
+				@click="listItemBtn(item)">				
 			</uni-list-item>
 		</uni-list>
 		<uni-load-more :status="more" />
@@ -163,14 +163,17 @@
 			listItemBtn(e) {
 				uni.navigateTo({ url: `/pages/shop/info?id=${e.shopId}` })
 			},
-			getTitle(shop){
-				const title = shop.district
-							+ " 楼栋:" + shop.building
-							+ " 楼层:" + shop.floor
-							+ " 铺位号:" + shop.number;
-							+ "商户:" + shop.name;
-							+ "状态:" + shop.status;
-				return title;
+			getAddress(shop){
+				return "楼栋:" + shop.building + "  楼层:" + shop.floor + "  铺位号:" + shop.number;
+			},
+			getMerchantName(shop){
+				if(shop.status === "未使用")
+					return shop.status;
+				
+				if(shop.name != null && shop.name != '' && shop.name != undefined)
+					return shop.name;
+
+				return "未知";					
 			},
 			getFormParams(queryParams){
 				this.formData.pageNum += 1;

+ 28 - 7
pages/shop/info.vue

@@ -1,12 +1,21 @@
 <template>
 	<view class="container">
-		<uni-card>
-			<template v-slot:title>
-				<text>{{shop.district}} {{shop.building}} {{shop.floor}}  {{shop.number}}</text>
-				<text>{{shop.status}}</text>
-			</template>
-			<text class="uni-body">{{shop.name}} {{shop.category}} {{shop.area}} {{shop.businessModel}} {{shop.contact}} {{shop.phone}}</text>
-		</uni-card>
+		<uni-section :title="shop.district" type="line">
+			<uni-card padding="0" spacing="0">
+				<uni-list>
+					<uni-list-item :title="building"></uni-list-item>
+					<uni-list-item :title="floor"></uni-list-item>
+					<uni-list-item :title="number"></uni-list-item>
+					<uni-list-item :title="area"></uni-list-item>
+					<uni-list-item :title="status"></uni-list-item>
+					<uni-list-item :title="name"></uni-list-item>
+					<uni-list-item :title="businessModel"></uni-list-item>
+					<uni-list-item :title="category"></uni-list-item>
+					<uni-list-item :title="contact"></uni-list-item>
+					<uni-list-item :title="phone"></uni-list-item>
+				</uni-list>
+			</uni-card>
+		</uni-section>
 	</view>
 </template>
 
@@ -28,6 +37,18 @@
 			const resp = await request.getShopInfo({ shopId: this.shopId});
 			this.shop = resp.data;
 		},
+		computed:{
+			building(){return "楼栋:" + this.shop.building;},
+			floor(){return "楼层:" + this.shop.floor;},
+			number(){return "铺位号:" + this.shop.number;},
+			area(){return "面积:" + this.shop.area;},
+			status(){return "使用状态:" + this.shop.status;},
+			name(){return "商户名称:" + this.shop.name;},
+			businessModel(){return "经营方式:" + this.shop.businessModel;},
+			category(){return "业态:" + this.shop.category;},
+			contact(){return "联系人:" + this.shop.contact;},
+			phone(){return "电话:" + this.shop.phone;},
+		},		
 		methods: {}
 	}
 </script>