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.
368 lines
9.3 KiB
368 lines
9.3 KiB
<template>
|
|
<view class="wrapper">
|
|
<uni-nav-bar statusBar fixed title="店铺首页"></uni-nav-bar>
|
|
<view class="top-box">
|
|
<view class="">
|
|
<image
|
|
class="image"
|
|
:src="customerInfo.logo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/paper-default-small.png'"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
<view class="center">
|
|
<view class="title">{{ customerInfo.name }}</view>
|
|
<view class="desc">全部商品 {{ customerInfo.productNumber }} | 上新 {{ customerInfo.currentProductNumber }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="search-box">
|
|
<uni-easyinput
|
|
v-model="enterpriseName"
|
|
:inputBorder="false"
|
|
:clearSize="18"
|
|
:placeholderStyle="'font-size:25rpx;text-align: center;font-weight: 400;color: rgba(34,34,34,0.75);'"
|
|
placeholder="搜索"
|
|
confirmType="search"
|
|
type="text"
|
|
class="easyinput"
|
|
prefixIcon="search"
|
|
@input="searchConfirm"
|
|
/>
|
|
</view>
|
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #ffffff">
|
|
<view class="content flex-row-start-start">
|
|
<view class="box" v-for="(item, index) in list" :key="index" @tap="seeDetailsTap(item)" :style="{ marginRight: index % 2 != 0 ? '0' : '20rpx' }">
|
|
<view class="image-box">
|
|
<view class=""><image class="special-img" :src="item.isPromoting ? '/static/imgs/store/special-offe.png' : ''" mode=""></image></view>
|
|
<image
|
|
class="image"
|
|
:src="item.litPicUrl || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/paper-default-small.png'"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
<view class="title">{{ item.name }}</view>
|
|
<view class="desc">
|
|
<view class="">
|
|
<image class="icon" src="/static/imgs/store/address-icon.png"></image>
|
|
<text style="padding-left: 6rpx">{{ customerInfo.area }}</text>
|
|
</view>
|
|
<view class="">库存:{{ item.stock || 'XX' }} {{ item.stockUnit == 1 ? '张' : '吨' }}</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="left">
|
|
<text :class="{ price: true, 'price-single': hasLogin, 'price-range': !hasLogin }">{{ transformPrice(item.priceRange) }}</text>
|
|
</view>
|
|
<view class="btn">马上抢</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-list>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import qnHeader from '@/components/qn-header/qn-header.vue'
|
|
import { loginGo2 } from '@/utils/hook.js'
|
|
import { getCustomer, getPaperList } from '@/apis/storeApi.js'
|
|
export default {
|
|
components: { qnHeader },
|
|
data() {
|
|
return {
|
|
option: {
|
|
size: 10,
|
|
auto: true,
|
|
emptyText: '暂无数据~',
|
|
background: '#F7F8FA',
|
|
disabled: false
|
|
},
|
|
params: {
|
|
asc: '',
|
|
desc: '',
|
|
name: '',
|
|
supplierId: this.$store.state.supplierId || null
|
|
},
|
|
pagination: {
|
|
pageNum: 0, // 初始会执行一次下拉加载
|
|
pageSize: 10
|
|
},
|
|
enterpriseName: '',
|
|
list: [],
|
|
customerParams: {
|
|
supplierId: this.$store.state.supplierId || null
|
|
// supplierId: '677166944742412288'
|
|
},
|
|
customerInfo: {},
|
|
timer: null
|
|
}
|
|
},
|
|
methods: {
|
|
seeDetailsTap(item) {
|
|
loginGo2('paper-details', { paperId: item.id })
|
|
},
|
|
// 获取店铺信息
|
|
getCustomer() {
|
|
getCustomer(this.customerParams).then((res) => {
|
|
if (res) {
|
|
this.customerInfo = res
|
|
}
|
|
})
|
|
},
|
|
getList() {
|
|
return new Promise((resolve, reject) => {
|
|
getPaperList({ ...this.params, ...this.pagination })
|
|
.then((res) => {
|
|
console.log('纸品列表', res)
|
|
if (res) {
|
|
if (res.current == 1) {
|
|
this.list = res.records
|
|
} else {
|
|
this.list = this.list.concat(res.records)
|
|
}
|
|
resolve({ list: this.list, total: res.total })
|
|
} else {
|
|
reject()
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
reject(err)
|
|
})
|
|
})
|
|
},
|
|
downCallback() {
|
|
this.pagination.pageNum = 1
|
|
this.getList()
|
|
.then(({ list, total }) => {
|
|
this.$refs.list.refreshSuccess({ list, total })
|
|
})
|
|
.catch(() => {
|
|
this.$refs.list.refreshFail()
|
|
})
|
|
},
|
|
upCallback() {
|
|
this.pagination.pageNum++
|
|
this.getList()
|
|
.then(({ list, total }) => {
|
|
this.$refs.list.loadSuccess({ list, total })
|
|
})
|
|
.catch(() => {
|
|
this.$refs.list.loadFail()
|
|
})
|
|
},
|
|
searchConfirm(value) {
|
|
this.params.name = value
|
|
if (this.timer) {
|
|
clearTimeout(this.timer)
|
|
this.timer = null
|
|
}
|
|
this.timer = setTimeout(() => {
|
|
this.downCallback()
|
|
}, 500)
|
|
},
|
|
transformPrice(value) {
|
|
if (this.hasLogin) {
|
|
return `¥${value}`
|
|
} else {
|
|
return `¥${value - 150 > 0 ? value - 150 : 0}~¥${value - 0 + 400}`
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
// this.downCallback()
|
|
this.getCustomer()
|
|
},
|
|
computed: {
|
|
hasLogin() {
|
|
return this.$store.state.qnToken != ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wrapper {
|
|
.header {
|
|
justify-content: space-between;
|
|
.header-title {
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.right-title {
|
|
font-size: 28rpx;
|
|
color: #007aff;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.top-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
// justify-content: space-around;
|
|
height: 180rpx;
|
|
background: url('/static/imgs/store/store-icon.png') no-repeat;
|
|
background-size: 100%;
|
|
.image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
margin-left: 32rpx;
|
|
}
|
|
.right {
|
|
width: 140rpx;
|
|
}
|
|
.center {
|
|
padding-left: 20rpx;
|
|
}
|
|
.title {
|
|
font-size: 34rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 2rpx;
|
|
font-weight: 600;
|
|
padding-bottom: 12rpx;
|
|
}
|
|
.desc {
|
|
opacity: 0.75;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
padding-right: 32rpx;
|
|
padding-top: 12rpx;
|
|
}
|
|
.cut {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
.cut-icon {
|
|
width: 29.42rpx;
|
|
height: 26.67rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.set {
|
|
opacity: 0.75;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
position: relative;
|
|
top: 39rpx;
|
|
left: 60rpx;
|
|
}
|
|
}
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0rpx 32rpx;
|
|
height: 104rpx;
|
|
background: #ffffff;
|
|
.easyinput {
|
|
height: 72rpx;
|
|
background: #f5f6f7;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
.content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0rpx 32rpx 20rpx 32rpx;
|
|
.box {
|
|
// height: 514rpx;
|
|
width: 330rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(112, 112, 112, 0.1);
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
.special-img {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
.image {
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
z-index: 9;
|
|
border-top-left-radius: 10rpx;
|
|
}
|
|
.title {
|
|
padding: 0rpx 16rpx;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
padding-top: 10rpx;
|
|
}
|
|
.desc {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 20rpx;
|
|
color: #333333;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
padding: 16rpx 16rpx 10rpx 16rpx;
|
|
.icon {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
}
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10rpx 16rpx 37rpx 16rpx;
|
|
.left {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.price {
|
|
color: #f5222d;
|
|
letter-spacing: 0;
|
|
font-weight: 600;
|
|
}
|
|
.price-single {
|
|
font-size: 34rpx;
|
|
}
|
|
.price-range {
|
|
font-size: 24rpx;
|
|
}
|
|
.unit {
|
|
font-size: 24rpx;
|
|
color: #f5222d;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
}
|
|
.btn {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// text-align: center;
|
|
width: 108rpx;
|
|
height: 48rpx;
|
|
background: #ff4849;
|
|
border-radius: 27rpx;
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|