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.
276 lines
7.8 KiB
276 lines
7.8 KiB
<template>
|
|
<view class="flex-col group">
|
|
<view class="flex-col items-center section_1">
|
|
<view class="flex-row section_2">
|
|
<text class="text">原纸商城</text>
|
|
<view class="flex-row items-center section_3">
|
|
<image src="/static/imgs/mall/search-icon.png" class="image_1" />
|
|
<qn-easyinput @confirm="downCallback" :maxlength="15" v-model="condition.searchValue" :inputBorder="false" placeholder="输入搜索信息"></qn-easyinput>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
|
|
<view class="flex-col list">
|
|
<view class="list-item flex-col" :key="i" v-for="(item, i) in storeList">
|
|
<view class="flex-row">
|
|
<image src="/static/imgs/mall/default-avatar.png" class="image_2" />
|
|
<view class="right-group flex-col" @click="jumpStore(item)">
|
|
<view class="text_2" v-html="item.enterpriseName"></view>
|
|
<view class="bottom-group flex-row">
|
|
<text>全部商品 {{ item.productNumber }}</text>
|
|
<view class="center-section"></view>
|
|
<text class="text_5">上新 {{ item.currentProductNumber }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-group_1 flex-row">
|
|
<view
|
|
class="paper-group flex-col"
|
|
v-for="paper in item.skuList"
|
|
:key="paper.productSkuId"
|
|
@click="go2('paper-details', { paperId: paper.productId })"
|
|
>
|
|
<view class="top-group flex-col items-center">
|
|
<image :src="paper.litPicUrl || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/paper-default-small.png'" class="image_4" />
|
|
<view class="flex-col text-wrapper">
|
|
<text class="text_7">{{ paper.listPrice }}元/{{ paper.stockUnit | formatUnit }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-text-wrapper flex-col items-start">
|
|
<view class="text_8 text_9" v-html="paper.productName"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-list>
|
|
<image @click="go2('cart')" src="/static/imgs/mall/cart-icon.png" class="image_11" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { paperUnitMap } from '@/enums/index.js'
|
|
import { getStoreList } from '@/apis/mallApi.js'
|
|
import { go2 } from '@/utils/hook.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
condition: {
|
|
searchValue: '',
|
|
pageSize: 10,
|
|
pageIdentifier: ''
|
|
},
|
|
option: {
|
|
size: 10,
|
|
auto: true,
|
|
emptyText: '我是有底线的~',
|
|
background: '#F7F8FA',
|
|
fontSize: '40rpx'
|
|
},
|
|
storeList: []
|
|
}
|
|
},
|
|
methods: {
|
|
go2,
|
|
// 获取设备列表
|
|
getList() {
|
|
return new Promise((resolve, reject) => {
|
|
getStoreList({ ...this.condition })
|
|
.then((res) => {
|
|
if (res) {
|
|
if (this.condition.pageIdentifier) {
|
|
this.storeList = this.storeList.concat(res.records)
|
|
} else {
|
|
this.storeList = res.records
|
|
}
|
|
// 手动判断是否还有数据
|
|
if (res.next && res.records.length == this.condition.pageSize) {
|
|
res.total = this.storeList.length + 1
|
|
this.condition.pageIdentifier = res.pageIdentifier?.join(',') || ''
|
|
} else {
|
|
res.total = this.storeList.length
|
|
}
|
|
resolve({ list: this.storeList, total: res.total })
|
|
} else {
|
|
reject()
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
reject(err)
|
|
})
|
|
})
|
|
},
|
|
downCallback() {
|
|
this.condition.pageIdentifier = ''
|
|
this.getList()
|
|
.then(({ list, total }) => {
|
|
this.$refs.list.refreshSuccess({ list, total })
|
|
})
|
|
.catch(() => {
|
|
this.$refs.list.refreshFail()
|
|
})
|
|
},
|
|
upCallback() {
|
|
this.getList()
|
|
.then(({ list, total }) => {
|
|
this.$refs.list.loadSuccess({ list, total })
|
|
})
|
|
.catch(() => {
|
|
this.$refs.list.loadFail()
|
|
})
|
|
},
|
|
jumpStore(store) {
|
|
this.$store.commit('setSupplierId', store.mallSupplierId)
|
|
go2('store')
|
|
}
|
|
},
|
|
filters: {
|
|
formatUnit(value) {
|
|
return paperUnitMap[value] || ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.group {
|
|
flex: 1 1 auto;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
.section_1 {
|
|
height: 170rpx;
|
|
width: 750rpx;
|
|
background: url('/static/imgs/mall/top-bg.png') no-repeat center/contain;
|
|
padding-top: 82rpx;
|
|
.section_2 {
|
|
width: 750rpx;
|
|
padding: 12rpx 32rpx;
|
|
.text {
|
|
align-self: center;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
line-height: 42rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.section_3 {
|
|
margin-left: 66rpx;
|
|
padding: 14rpx 23rpx;
|
|
flex: 1 1 auto;
|
|
color: rgb(34, 34, 34);
|
|
font-size: 25rpx;
|
|
line-height: 36rpx;
|
|
white-space: nowrap;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 10rpx;
|
|
height: 64rpx;
|
|
.image_1 {
|
|
margin-right: 10rpx;
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
width: 750rpx;
|
|
padding: 0 16rpx 20rpx;
|
|
background-color: #f7f8fa;
|
|
.list-item {
|
|
background-color: #fff;
|
|
margin-top: 20rpx;
|
|
padding: 24rpx 14rpx 17rpx;
|
|
overflow: hidden;
|
|
height: 401rpx;
|
|
.bottom-group_1 {
|
|
margin-top: 16rpx;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
.paper-group {
|
|
width: 220rpx;
|
|
margin-right: 8rpx;
|
|
.top-group {
|
|
color: rgb(255, 255, 255);
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
border-radius: 8rpx;
|
|
position: relative;
|
|
.image_4 {
|
|
border: 2rpx solid #f7f8fa;
|
|
border-radius: 8rpx;
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
}
|
|
.text-wrapper {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
border-radius: 20rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
bottom: 10rpx;
|
|
.text_7 {
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.bottom-text-wrapper {
|
|
padding-top: 16rpx;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 24rpx;
|
|
line-height: 33rpx;
|
|
white-space: nowrap;
|
|
width: 220rpx;
|
|
.text_8 {
|
|
margin: 0 10rpx;
|
|
}
|
|
.text_9 {
|
|
margin: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.image_2 {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
}
|
|
.right-group {
|
|
margin-left: 16rpx;
|
|
.text_2 {
|
|
width: 612rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: rgb(0, 0, 0);
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.bottom-group {
|
|
margin-top: 3rpx;
|
|
color: rgb(136, 136, 136);
|
|
font-size: 24rpx;
|
|
line-height: 33rpx;
|
|
white-space: nowrap;
|
|
.center-section {
|
|
margin: 5rpx 0 3rpx 16rpx;
|
|
background-color: rgb(136, 136, 136);
|
|
width: 2rpx;
|
|
height: 24rpx;
|
|
}
|
|
.text_5 {
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.image_11 {
|
|
border-radius: 50%;
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
position: fixed;
|
|
right: 32rpx;
|
|
bottom: 162rpx;
|
|
}
|
|
}
|
|
</style>
|