邓洁 : 详情界面及接口对接
This commit is contained in:
dengj
@@ -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>
|
||||
<view class="grid-textup">22</view>
|
||||
<view class="grid-text">租金</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<view class="grid-textup">22</view>
|
||||
<view class="grid-text">转让费</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<view class="grid-textup">22</view>
|
||||
<view class="grid-text">面积</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
<u-grid-item>
|
||||
<view class="grid-textup">{{shopInfo.zujin}}元/月</view>
|
||||
<view class="grid-text">租金</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<view class="grid-textup">{{shopInfo.zhuanrangfei}}万元</view>
|
||||
<view class="grid-text">转让费</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<view class="grid-textup">{{shopInfo.mianji}}m²</view>
|
||||
<view class="grid-text">面积</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bgc">
|
||||
|
||||
|
||||
</view>
|
||||
<view class="location-detail">
|
||||
<text>行业：</text>
|
||||
<text>区域：</text>
|
||||
<text>地址：</text>
|
||||
<text>行业：{{shopInfo.trade1}}</text>
|
||||
<text>区域：{{shopInfo.area1}}</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-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝" label-style="color = #5D5D5D"></u-cell>
|
||||
<u-divider :height="5"></u-divider>
|
||||
<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>
|
||||
分享
|
||||
</view>
|
||||
<view class="customer" @click="assist()">
|
||||
<u-icon name="server-fill" color="green"></u-icon>
|
||||
客服
|
||||
<image src="../../static/shoplist/share.png" style="width: 41rpx;height: 58rpx;"></image>
|
||||
</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:{
|
||||
|
||||
// }
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
phonecall(){
|
||||
console.log('打电话');
|
||||
},
|
||||
share(){
|
||||
console.log('分享');
|
||||
},
|
||||
assist(){
|
||||
console.log('客服');
|
||||
shopInfo: {},
|
||||
showM: false
|
||||
}
|
||||
},
|
||||
onLoad: function(options) {
|
||||
// const shopInfomation = JSON.parse(decodeURIComponent(options.shopInfo))
|
||||
// console.log(shopInfomation);
|
||||
// this.shopInfo = shopInfomation
|
||||
console.log('detail',options);
|
||||
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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
}
|
||||
.tab-right{
|
||||
|
||||
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user