You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
9.0 KiB
376 lines
9.0 KiB
<template> |
|
<view class="wrap"> |
|
<view class="top"> |
|
<view class="name-wrap"> |
|
<image v-if="form.logoUrl" class="icon logo" :src="form.logoUrl"></image> |
|
<image v-else class="icon" :src="Common.shopIcon"></image> |
|
<view class="name ell2">{{ form.classificationName }}</view> |
|
</view> |
|
|
|
<view v-if="form.slogan" class="slogan">{{ form.slogan }}</view> |
|
|
|
<view class="star" @click.stop="collect"> |
|
<uni-icons class="star-icon" color="#ffcf47" :type="collectInfo.whetherAttention ? 'star-filled' : 'star'" size="25"></uni-icons> |
|
{{ collectInfo.whetherAttention ? '取消关注' : '关注' }} |
|
</view> |
|
</view> |
|
|
|
<ul class="tab"> |
|
<li :class="{active: curTab === 0}" @click="tabChange(0)">主页</li> |
|
<li :class="{active: curTab === 1}" @click="tabChange(1)">商品</li> |
|
</ul> |
|
<view v-if="!curTab" class="detail"> |
|
<view class="title">公司简介</view> |
|
<uni-swiper-dot v-if="desPics.length" class="pics" :info="desPics" :current="curPic" mode="round" :dots-styles="dotsStyles"> |
|
<swiper class="swiper-box" autoplay @change="picChange"> |
|
<swiper-item v-for="(item ,i) in desPics" :key="i"> |
|
<image class="pic" :src="item"></image> |
|
</swiper-item> |
|
</swiper> |
|
</uni-swiper-dot> |
|
<view class="des">{{ form.briefIntroduction || '暂无数据' }}</view> |
|
|
|
<view class="title">联系我们</view> |
|
<view class="info address"> |
|
<image class="icon" src="http://124.71.79.122/images/miniProgram/address.png" mode="widthFix" /> |
|
地址：{{ form.address || '' }} |
|
</view> |
|
<view class="info"> |
|
<image class="icon" src="http://124.71.79.122/images/miniProgram/tel.png" mode="widthFix" /> |
|
联系电话：{{ form.phone || '' }} |
|
</view> |
|
|
|
<view class="qrcodes"> |
|
<view v-if="form.qrCodeOneUrl" class="qrcode"> |
|
<image class="pic" :src="form.qrCodeOneUrl" /> |
|
<view class="text">{{ form.qrCodeOneName }}</view> |
|
</view> |
|
<view v-if="form.qrCodeTwoUrl" class="qrcode"> |
|
<image class="pic" :src="form.qrCodeTwoUrl" /> |
|
<view class="text">{{ form.qrCodeTwoName }}</view> |
|
</view> |
|
<view v-if="form.qrCodeThreeUrl" class="qrcode"> |
|
<image class="pic" :src="form.qrCodeThreeUrl" /> |
|
<view class="text">{{ form.qrCodeThreeName }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view v-else-if="goods.length" class="list"> |
|
<view v-for="(item, i) in goods" :key="i" class="item" @click="toGoods(item)"> |
|
<image class="pic" :src="item.pic"></image> |
|
<view class="texts"> |
|
<view class="name">{{ item.prodName }}</view> |
|
<view class="prices"> |
|
<text class="price">{{ item.price ? '￥' + item.price : '面议' }}</text> |
|
<text v-if="item.oriPrice" class="ori">￥{{ item.oriPrice }}</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="order-btn" @click="toOrder"> |
|
<image class="icon" src="http://124.71.79.122/images/miniProgram/order.png" mode="widthFix"></image> |
|
<view class="text">我想采购</view> |
|
</view> |
|
|
|
<order ref="order" /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { collect, cancelCollection } from '@/apis/modules/supplier.js' |
|
import { queryTeamInfo } from '@/apis/modules/user.js' |
|
import { page } from '@/apis/modules/goods.js' |
|
import Common from '@/config/common' |
|
export default { |
|
data() { |
|
return { |
|
Common, |
|
teamId: '', |
|
accountId: '', |
|
curTab: 0, |
|
form: { |
|
collectionInformation: { |
|
whetherAttention: 0 |
|
}, |
|
classificationName: '', |
|
slogan: '', |
|
briefIntroduction: '', |
|
address: '', |
|
phone: '' |
|
}, |
|
desPics: [], |
|
curPic: 0, |
|
dotsStyles: { |
|
backgroundColor: 'rgba(83, 200, 249,0.3)', |
|
border: '1px rgba(83, 200, 249,0.3) solid', |
|
color: '#fff', |
|
selectedBackgroundColor: 'rgba(255, 255, 249,0.9)', |
|
selectedBorder: '1px rgba(251, 251, 251,0.9) solid' |
|
}, |
|
mpStyle: { |
|
p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;', |
|
span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;' |
|
}, |
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据 |
|
status: 'more', // 上拉加载状态 more|loading|noMore |
|
goods: [], |
|
page: 1, |
|
pageSize: 5, |
|
total: 0, |
|
submiting: false, |
|
collectInfo: {}, |
|
} |
|
}, |
|
// 下拉刷新 |
|
onPullDownRefresh() { |
|
this.initList() |
|
setTimeout(() => { |
|
uni.stopPullDownRefresh() |
|
}, 1500) |
|
}, |
|
// 上拉加载 |
|
onReachBottom() { |
|
if (this.reachBottom >= 0) { |
|
this.reachBottom = 1 |
|
this.status = 'loading' |
|
this.getList() |
|
} |
|
}, |
|
onShow() { |
|
const pages = getCurrentPages() |
|
const { options } = pages[pages.length - 1] |
|
this.teamId = options.teamId |
|
this.accountId = options.accountId |
|
this.page = 1 |
|
this.getInfo() |
|
this.getGoods() |
|
}, |
|
methods: { |
|
// 获取详情 |
|
async getInfo() { |
|
uni.showLoading({ |
|
title: '加载中' |
|
}) |
|
const res = await queryTeamInfo({ |
|
teamId: this.teamId |
|
}) |
|
const data = res.teamInfo |
|
if (data) { |
|
// 处理描述图片 |
|
if (data.pictureUrl) { |
|
this.desPics = data.pictureUrl.split(',') |
|
} |
|
} |
|
this.collectInfo = res.collectionInformation |
|
this.form = data |
|
uni.hideLoading() |
|
}, |
|
// 描述图片切换 |
|
picChange(e) { |
|
this.curPic = e.detail.current; |
|
}, |
|
// 获取商品列表 |
|
async getGoods() { |
|
const res = await page({ |
|
status: 1, |
|
current: this.page, |
|
shopId: this.teamId, |
|
}) |
|
const list = res.page.records |
|
list.forEach(e => { |
|
if (e.pic) e.pic = e.pic.split(',')[0] |
|
}) |
|
this.goods = this.reachBottom > 0 ? [...this.goods, ...list] : list |
|
this.page++ // 每次获取了数据后page+1 |
|
const noMore = this.goods.length === res.page.total // 是否加载完所有数据 |
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore |
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1 |
|
}, |
|
// tab切换 |
|
tabChange(id) { |
|
this.curTab = id |
|
}, |
|
// 关注 |
|
async collect() { |
|
if (this.submiting) return false |
|
this.submiting = true |
|
if (this.collectInfo.whetherAttention) { |
|
const that = this |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确定要取消关注吗？', |
|
async success(res) { |
|
if (res.confirm) { |
|
await cancelCollection(that.collectInfo.attentionId) |
|
that.submiting = false |
|
that.$util.sucMsg('取消关注成功') |
|
that.getInfo() |
|
} |
|
} |
|
}) |
|
|
|
} else { |
|
const res = await collect({ |
|
supplierAccountId: this.accountId |
|
}) |
|
this.submiting = false |
|
this.getInfo() |
|
} |
|
}, |
|
// 跳转商品详情 |
|
toGoods(item) { |
|
this.$util.to(`/other/goodsDetail/goodsDetail?prodId=${item.prodId}`) |
|
}, |
|
// 我想采购 |
|
toOrder() { |
|
const el = this.$refs.order |
|
el.remarks = '' |
|
el.getGoods(this.teamId) |
|
el.$refs.popup.open() |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.title { |
|
margin-bottom: 20rpx; |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
color: #333; |
|
} |
|
.top { |
|
position: relative; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
min-height: 300rpx; |
|
padding: 40rpx; |
|
background: url(http://124.71.79.122/images/miniProgram/supplier-bg.jpg) 0 0/100% 100% no-repeat; |
|
box-sizing: border-box; |
|
.name-wrap { |
|
display: flex; |
|
align-items: center; |
|
} |
|
.name { |
|
font-size: 38rpx; |
|
font-weight: 600; |
|
color: #000; |
|
} |
|
.icon { |
|
width: 80rpx; |
|
min-width: 80rpx; |
|
height: 80rpx; |
|
margin-right: 20rpx; |
|
border-radius: 50%; |
|
object-fit: cover; |
|
} |
|
.logo { |
|
width: 120rpx; |
|
min-width: 120rpx; |
|
height: 120rpx; |
|
} |
|
.slogan { |
|
margin-top: 40rpx; |
|
font-size: 28rpx; |
|
color: #333; |
|
} |
|
.star { |
|
display: flex; |
|
justify-content: flex-end; |
|
align-items: center; |
|
margin-top: 20rpx; |
|
font-size: 28rpx; |
|
color: #333; |
|
.star-icon { |
|
margin-right: 10rpx; |
|
} |
|
} |
|
} |
|
.detail { |
|
padding: 40rpx; |
|
background-color: #fff; |
|
.pics { |
|
margin: 20rpx 0; |
|
swiper, .pic { |
|
width: 100%; |
|
height: 500rpx; |
|
} |
|
} |
|
.des { |
|
margin: 20rpx 0 50rpx; |
|
font-size: 26rpx; |
|
line-height: 1.6; |
|
} |
|
} |
|
.info { |
|
display: flex; |
|
align-items: center; |
|
font-size: 26rpx; |
|
color: #333; |
|
&.address { |
|
margin: 30rpx 0 20rpx; |
|
} |
|
.icon { |
|
width: 30rpx; |
|
min-width: 30rpx; |
|
margin-right: 10rpx; |
|
} |
|
} |
|
.qrcodes { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-top: 50rpx; |
|
text-align: center; |
|
.pic { |
|
width: 200rpx; |
|
height: 200rpx; |
|
} |
|
.text { |
|
margin-top: 20rpx; |
|
font-size: 24rpx; |
|
color: #333; |
|
} |
|
} |
|
.list { |
|
display: flex; |
|
flex-wrap: wrap; |
|
padding: 0 10rpx; |
|
.item { |
|
width: calc((100% - 40rpx) / 2); |
|
margin: 20rpx 10rpx; |
|
background-color: #fff; |
|
border-radius: 8px; |
|
overflow: hidden; |
|
} |
|
.pic { |
|
width: 100%; |
|
height: 200rpx; |
|
object-fit: cover; |
|
} |
|
.texts { |
|
padding: 20rpx; |
|
} |
|
.name { |
|
margin-bottom: 10rpx; |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
} |
|
.prices { |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
.price { |
|
font-size: 34rpx; |
|
color: #ff0047; |
|
} |
|
.ori { |
|
font-size: 24rpx; |
|
text-decoration: line-through; |
|
color: #666; |
|
} |
|
} |
|
</style>
|
|
|