Merge pull request '邓洁 : 详情界面及接口对接' (#62) from djj into master

Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/62

pages/detail/detail.vue

@@ -1,183 +1,215 @@
 <template>
 	<view class="detail" ref="viewref">
 		<view class="swiper">
-				<u-swiper :list="list" height="500rpx" radius="0"></u-swiper>
+			<u-swiper :list="shopInfo.pics" keyName="pics" height="500rpx" radius="0"></u-swiper>
 		</view>
 		<view class="sub-detail u-flex">
 			<view class="title">
-				{{shopInfo.title}}
+				{{shopInfo.tt}}
 			</view>
 			<view>
 				<u-grid :col="3">
-						<u-grid-item>
+					<u-grid-item>
-							<view class="grid-textup">22</view>
+						<view class="grid-textup">{{shopInfo.zujin}}元/月</view>
-							<view class="grid-text">租金</view>
+						<view class="grid-text">租金</view>
-						</u-grid-item>
+					</u-grid-item>
-						<u-grid-item>
+					<u-grid-item>
-							<view class="grid-textup">22</view>
+						<view class="grid-textup">{{shopInfo.zhuanrangfei}}万元</view>
-							<view class="grid-text">转让费</view>
+						<view class="grid-text">转让费</view>
-						</u-grid-item>
+					</u-grid-item>
-						<u-grid-item>
+					<u-grid-item>
-							<view class="grid-textup">22</view>
+						<view class="grid-textup">{{shopInfo.mianji}}m²</view>
-							<view class="grid-text">面积</view>
+						<view class="grid-text">面积</view>
-						</u-grid-item>
+					</u-grid-item>
-					</u-grid>
+				</u-grid>
 			</view>
 		</view>
 		<view class="bgc">
-			
+
 		</view>
 		<view class="location-detail">
-				<text>行业：</text>
+			<text>行业：{{shopInfo.trade1}}</text>
-				<text>区域：</text>
+			<text>区域：{{shopInfo.area1}}</text>
-				<text>地址：</text>
+			<text>地址：{{shopInfo.adress}}</text>
 		</view>
-		<view class="bug-figure">
+		<view class="bgc">
-			
+
 		</view>
 		<view class="seller-shop-detail">
 			<view class="avator">
 				<u-avatar :src="src"></u-avatar>
-				<u-cell title="张先生" label="123456" :border="false"></u-cell>
+				<u-cell :title="shopInfo.lianxiren" :label="shopInfo.mobile" :border="false"></u-cell>
-				
 			</view>
-			<u-divider :height="20"></u-divider>
+			<u-divider :height="5"></u-divider>
-			<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝" label-style="color = #5D5D5D"></u-cell>
+			<u-cell title="店铺介绍" :label="shopInfo.content" label-style="color = #5D5D5D;font-size: 24rpx;"></u-cell>
 		</view>
-		
+
 		<view class="bottom">
 			<view class="bot-tab">
 				<view class="tab-left">
 					<view class="share" @click="share()">
-						<u-icon name="share-fill" color="green"></u-icon>
+						<image src="../../static/shoplist/share.png" style="width: 41rpx;height: 58rpx;"></image>
-						分享
-					</view>
-					<view class="customer" @click="assist()">
-						<u-icon name="server-fill" color="green"></u-icon>
-						客服
 					</view>
+					<button open-type="contact" session-from="sessionFrom" class="service-btn">
+						<image src="../../static/shoplist/service.png" style="width: 41rpx;height: 58rpx;margin-top: 11px;"></image>
+					</button>
 				</view>
 				<view class="tab-right" @click="phonecall()">
-					<view class="call" >
+					<view class="call">
 						<text>打电话</text>
 					</view>
 				</view>
+				<u-modal :show="showM" showCancelButton closeOnClickOverlay="false" confirmText="是" cancelText="否"
+					@confirm="confirm" @cancel="cancel">
+					<view>
+						<!-- <view>{{shopInfo.mobile}}</view> -->
+						<text>是否拨打该联系人电话?</text>
+					</view>
+				</u-modal>
 			</view>
-	</view>
+		</view>
 		<view class="bug-figure">
-			
+
 		</view>
 	</view>
 </template>
 
 <script>
 	export default {
-		props: {
-			swiperlist: {
-				type: Array,
-				default () {
-					return [
-						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
-						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
-						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
-					]
-				}
-			},
-			shopInfo: {
-				type: Object,
-				default () {
-					return {
-						title: "石锅饭铺面转让石锅饭铺面转让石锅饭铺面转",
-					}
-				}
-			}
-		},
 		data() {
 			return {
-			// shopInfo:{
+				shopInfo: {},
-				
+				showM: false
-			// }
-				
-			}
-		},
-		methods: {
-			phonecall(){
-				console.log('打电话');
-			},
-			share(){
-				console.log('分享');
-			},
-			assist(){
-				console.log('客服');
 			}
 		},
 		onLoad: function(options) {
-			// const shopInfomation = JSON.parse(decodeURIComponent(options.shopInfo))
+			console.log('detail', options);
-			// console.log(shopInfomation);
-			// this.shopInfo = shopInfomation
-			console.log('detail',options);
 			//点击轮播图跳转详情, 传递的参数id, type
-			if(options.id){
+			if (options.id !== undefined && options.type !== undefined) {
-				
+				this.getDetail(options.type, options.id)
 			}
-			if(options.type){
+		},
-				
+		methods: {
+			phonecall() {
+				this.showM = true
+			},
+			share() {
+				console.log('分享');
+			},
+			getDetail(type, id) {
+				this.$api.getShopDetail(type, id).then(res => {
+					const data = res.data.data
+					if (res.data.code == 1) {
+						data.pics = [this.$api.imgUrl + data.pics]
+						this.shopInfo = data
+					}
+				})
+			},
+			confirm() {
+				this.showM = false
+				let phone = this.shopInfo.mobile
+				phone = phone.toString()
+				uni.makePhoneCall({
+					phoneNumber: phone,
+					success: function() {
+						console.log('拨打电话成功');
+					},
+					fail() {
+						console.log('打电话失败了');
+					}
+				})
+			},
+			cancel() {
+				this.showM = false
 			}
 		}
-		
 	}
 </script>
 
 <style lang="scss" scoped>
-	page{
+	page {
 		background-color: #F8F8F8;
 	}
-	.sub-detail{
+
-		margin-bottom: 30rpx;
+
+
+	.service-btn {
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 	}
-	.bgc{
+
+	.service-btn::after {
+		border: none;
+	}
+
+	.sub-detail {
+		margin: 30rpx 16rpx;
+	}
+
+	.bgc {
 		background-color: #F8F8F8;
 		height: 30rpx;
 	}
-	.detail{
+
+	.detail {
 		// background-color: #F8F8F8;
 		height: 100%;
 	}
-	.bug-figure{
+
-		height: 100rpx;
+	.bug-figure {
+		height: 130rpx;
 		background-color: #F8F8F8;
 	}
-	.title{
+
-		padding: 20rpx;
+	.title {
+		font-size: 30rpx;
+		font-weight: 500;
 		background-color: #fff;
+		margin-bottom: 50rpx;
 	}
-	.grid-textup{
+
+	.grid-textup {
+		font-weight: 500;
 		color: #CC3333;
-		font-size: 20px;
+		font-size: 30rpx;
 	}
-	.grid-text{
+
+	.grid-text {
 		color: #B3B3B3;
+		font-size: 24rpx;
 	}
-	.location-detail{
+
+	.location-detail {
 		display: flex;
-		margin-top: 50rpx;
+		// margin-top: 50rpx;
 		background-color: #fff;
 		flex-direction: column;
 		padding-left: 16rpx;
 		line-height: 33px;
 		font-size: 15px;
 	}
-	.seller-shop-detail{
+
-		margin-top: 50rpx;
+	.seller-shop-detail {
+		/deep/ .u-divider {
+			margin: 28rpx 0 0 0 !important;
+		}
 	}
-	.avator{
+
+	.avator {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		margin-left: 16rpx;
-		margin-top: 50rpx;
+		margin-top: 28rpx;
+
+		/deep/ .u-cell__body {
+			padding: 0 12rpx !important;
+		}
 	}
-	.bottom{
+
+	.bottom {
 		position: fixed;
 		bottom: 0;
 		background-color: #fff;
@@ -186,26 +218,22 @@
 		// height: 100rpx;
 		// bottom: calc(var(--window-bottom) + 20px);
 	}
-	.bot-tab{
+
+	.bot-tab {
 		display: flex;
 		// flex: 1;
 		justify-content: space-evenly;
 	}
-	.tab-left{
+
+	.tab-left {
 		width: 50%;
 		display: flex;
 		justify-content: space-around;
 		height: 50px;
 	}
-	.customer{
+
-		// height: 50px;
+
-		display: flex;
+	.tab-right {
-		justify-content: center;
-		align-items: center;
-		flex-direction: column;
-		width: 50%;
-	}
-	.tab-right{
 		width: 50%;
 		height: 50px;
 		display: flex;
@@ -213,14 +241,16 @@
 		align-items: center;
 		background-image: linear-gradient(to right, #E86262, #CC3333);
 	}
-	.share{
+
+	.share {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex-direction: column;
 		width: 50%;
 	}
-	.call{
+
+	.call {
 		color: #fff;
 		display: flex;
 		justify-content: center;

service/request.js

@@ -1,4 +1,4 @@
-const serverHost = 'https://spsp.feashow.com/api/' //http://xx.xxx.xx
+const serverHost = 'https://spsp.feashow.com/api' //http://xx.xxx.xx
 
 const service = {
 	get(url, data) {
@@ -160,10 +160,10 @@ const apiService = {
 		})
 	},
 	// 获取详情
-	getProductDetail(id) {
+	getShopDetail(type,id) {
-		const url = `/home/pdetail/?productId=${id}`
+		const url = `/home/adetail/?type=${type}&id=${id}`
 		return new Promise((resolve, reject) => {
-			resolve(service.get(url, id))
+			resolve(service.get(url))
 		})
 	},
 	//修改
@@ -220,7 +220,7 @@ const apiService = {
 	},
 	//修改个人信息
 	editPersonInfo(data) {
-		const url = `center/userupdate`
+		const url = `/center/userupdate`
 		return new Promise((resolve, reject) => {
 			resolve(service.post(url, data))
 		})