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.
334 lines
7.3 KiB
334 lines
7.3 KiB
<template>
|
|
<view class="warpper">
|
|
<qnHeader class="header">
|
|
<view class="header-title">店铺首页</view>
|
|
<view class=""></view>
|
|
</qnHeader>
|
|
<view class="top-box">
|
|
<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view>
|
|
<view class="center">
|
|
<view class="title">东莞市隆兴纸业有限公司</view>
|
|
<view class="desc">全部商品 39 | 上新 9</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="search"
|
|
@confirm="addHistory"
|
|
/>
|
|
</view>
|
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
|
|
<view class="content" v-for="(item, index) in 4" :key="index">
|
|
<view class="box">
|
|
<view class="image-box">
|
|
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
|
|
</view>
|
|
<view class="title">
|
|
博汇朱雀白卡
|
|
</view>
|
|
<view class="desc">
|
|
<view class="">
|
|
<image class="icon" src="/static/imgs/store/address-icon.png"></image>
|
|
<text style="padding-left: 6rpx;">广州市</text>
|
|
|
|
</view>
|
|
<view class="">
|
|
库存:9600张
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="">
|
|
<text class="price">¥2300</text>
|
|
<text class="unit">/吨</text>
|
|
</view>
|
|
<view class="btn">
|
|
马上抢
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view class="image-box">
|
|
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
|
|
</view>
|
|
<view class="title">
|
|
博汇朱雀白卡
|
|
</view>
|
|
<view class="desc">
|
|
<view class="">
|
|
<image class="icon" src="/static/imgs/store/address-icon.png"></image>
|
|
<text style="padding-left: 6rpx;">广州市</text>
|
|
|
|
</view>
|
|
<view class="">
|
|
库存:9600张
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="">
|
|
<text class="price">¥2300</text>
|
|
<text class="unit">/吨</text>
|
|
</view>
|
|
<view class="btn">
|
|
马上抢
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-list>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import qnHeader from '@/components/qn-header/qn-header.vue'
|
|
export default {
|
|
components: {qnHeader},
|
|
data() {
|
|
return {
|
|
option: {
|
|
size: 10,
|
|
auto: true,
|
|
emptyText: '暂无数据~',
|
|
background: '#F7F8FA',
|
|
disabled: false
|
|
},
|
|
params: {},
|
|
pagination: {
|
|
pageNum: 0, // 初始会执行一次下拉加载
|
|
pageSize: 10
|
|
},
|
|
enterpriseName: '',
|
|
list: [],
|
|
}
|
|
},
|
|
methods: {
|
|
getList() {
|
|
// return new Promise((resolve, reject) => {
|
|
// getDeviceInfo({ ...this.params, ...this.pagination })
|
|
// .then(res => {
|
|
// res.records.forEach(el => {
|
|
// el.collapse = false
|
|
// el.isShowSelect = false
|
|
// })
|
|
// if (res) {
|
|
// if (this.pagination.pageNum == 1) {
|
|
// this.list = res.records
|
|
// } else {
|
|
// this.list = this.list.concat(res.records)
|
|
// }
|
|
// // this.list = []
|
|
// // this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]
|
|
// resolve({ list: this.list, total: res.total })
|
|
// }
|
|
// })
|
|
// .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()
|
|
})
|
|
},
|
|
search() {},
|
|
addHistory(value) {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.warpper {
|
|
.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-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0rpx 32rpx 20rpx 32rpx;
|
|
.box {
|
|
// height: 514rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(112,112,112,0.1);
|
|
border-radius: 10rpx;
|
|
.image {
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
}
|
|
.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;
|
|
.price {
|
|
font-size: 34rpx;
|
|
color: #F5222D;
|
|
letter-spacing: 0;
|
|
font-weight: 600;
|
|
}
|
|
.unit {
|
|
font-size: 24rpx;
|
|
color: #F5222D;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// text-align: center;
|
|
width: 108rpx;
|
|
height: 48rpx;
|
|
background: #FF4849;
|
|
border-radius: 27rpx;
|
|
ont-size: 26rpx;
|
|
color: #FFFFFF;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|