初始化代码
This commit is contained in:
188
uniapp/uni-app/home/pages/farm/info.vue
Normal file
188
uniapp/uni-app/home/pages/farm/info.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="home-farm-info" v-if="detail.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="商户信息">
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<image mode="aspectFill" lazy-load class="common-bg abs" :style="{height: `${configInfo.navBarHeight + 104}px`}"
|
||||
src="https://lbqny.migugu.com/admin/farm/bg-cash.png"></image>
|
||||
<view class="common-top-img"></view>
|
||||
<view class="common-top-info rel">
|
||||
<view class="top-box abs">
|
||||
<view class="farm-item fill-base flex-center ml-md mr-md pd-lg box-shadow radius-24">
|
||||
<image mode="aspectFill" lazy-load class="cover box-shadow-mini radius-24" :src="detail.cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-title c-title ellipsis" style="max-width: 460rpx;">{{detail.title}}</view>
|
||||
<view class="f-caption c-caption mt-sm">浏览量 {{detail.iv || 0}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-md"></view>
|
||||
<view class="fill-base pt-sm pl-lg pr-lg pb-lg">
|
||||
<view class="common-nav-title flex-center c-title">
|
||||
<view class="common-line" :style="{background:primaryColor}"></view>
|
||||
<view class="f-title text-bold flex-1">店铺描述</view>
|
||||
</view>
|
||||
<view class="f-paragraph c-desc">
|
||||
<text decode="emsp" style="word-break:break-all;">{{detail.desc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-list fill-base pl-lg pb-lg">
|
||||
<image mode="aspectFill" @tap.stop="$util.previewImage({current:item,urls:detail.imgs})"
|
||||
class="info-img fill-body radius-16"
|
||||
:class="[{'mr-md':index!=detail.imgs.length},{'mr-lg': index == detail.imgs.length}]" :src="item"
|
||||
v-for="(item,index) in detail.imgs" :key="index"></image>
|
||||
</view>
|
||||
|
||||
<view class="space-md"></view>
|
||||
<view class="fill-base pt-sm pl-lg pr-lg pb-lg">
|
||||
<view class="common-nav-title flex-center c-title">
|
||||
<view class="common-line" :style="{background:primaryColor}"></view>
|
||||
<view class="f-title text-bold flex-1">基础信息</view>
|
||||
</view>
|
||||
<view class="f-paragraph c-desc mt-sm">
|
||||
<view @tap.stop="$util.goUrl({url:detail.mobile,openType:'call'})" class="flex-between">
|
||||
<view>联系电话</view>
|
||||
<view>{{detail.mobile}}</view>
|
||||
</view>
|
||||
<view @tap.stop="toMap" class="flex-warp mt-md">
|
||||
<view>店铺地址</view>
|
||||
<view class="flex-1 ml-lg pl-lg">{{detail.address}}</view>
|
||||
</view>
|
||||
<!-- <view class="flex-between mt-md">
|
||||
<view>开店时间</view>
|
||||
<view>{{detail.create_time}}</view>
|
||||
</view> -->
|
||||
<view class="flex-between mt-md">
|
||||
<view>是否营业</view>
|
||||
<view>{{openType[detail.is_open]}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-footer"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
options: {},
|
||||
detail: {},
|
||||
openType: {
|
||||
0: '闭店中',
|
||||
1: '营业中'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.initIndex()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
methods: {
|
||||
async initIndex() {
|
||||
let {
|
||||
id
|
||||
} = this.options
|
||||
let data = await this.$api.home.farmerInfo({
|
||||
id
|
||||
})
|
||||
data.is_open = 1
|
||||
data.star_percent = (data.star * 1 / 5 * 100).toFixed(2) + '%'
|
||||
data.iv = data.iv*1+1
|
||||
this.detail = data
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
async toMap() {
|
||||
let {
|
||||
lat,
|
||||
lng,
|
||||
address
|
||||
} = this.detail
|
||||
await this.$util.checkAuth({
|
||||
type: 'userLocation'
|
||||
})
|
||||
await uni.getLocation({
|
||||
type: 'gcj02',
|
||||
})
|
||||
await uni.openLocation({
|
||||
latitude: lat * 1,
|
||||
longitude: lng * 1,
|
||||
name: address,
|
||||
scale: 28
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.home-farm-info {
|
||||
.farm-item {
|
||||
.cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.icon-dingwei,
|
||||
.icon-right {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
.status-btn {
|
||||
width: 80rpx;
|
||||
height: 36rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.max-title {
|
||||
max-width: 370rpx;
|
||||
}
|
||||
|
||||
.addr-text {
|
||||
max-width: 420rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.info-img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user