688 lines
15 KiB
Vue
688 lines
15 KiB
Vue
<!-- 我要卖 -->
|
|
<template>
|
|
<view class="page-container">
|
|
<view class="page-title-box">
|
|
<view class="search-container-fixed">
|
|
<view class="search-box">
|
|
<icon class="mr-10" type="search" size="20"></icon>
|
|
<input type="text" @confirm="doSearch" class="search-input" @input="inputKeywords" :value="keywords"
|
|
placeholder="请输入软著名称" />
|
|
<view @click="doSearch">搜索</view>
|
|
</view>
|
|
</view>
|
|
<view class="header">
|
|
<view class="condition-page-box">
|
|
<view class="condition-item">
|
|
<view class="condition-item-title">软著分类</view>
|
|
<scroll-view scroll-x style="width: 75vw;padding-left: 20rpx;">
|
|
<view class="list-tabs">
|
|
<block v-for="(item,index) in typeList" :key="index">
|
|
<view
|
|
:class="['item-margin',includes(selType,item.dataId) ? 'tab-select' :'tab-normal']"
|
|
@click="bindChooseType" :data-item="item">
|
|
{{item.dataName}}
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="condition-item mt-20">
|
|
<view class="condition-item-title">所属者类型</view>
|
|
<scroll-view scroll-x style="flex:1;">
|
|
<view class="list-tabs ml-20">
|
|
<block v-for="(item,index) in ownerList" :key="index">
|
|
<view :class="[selOwner==item.dataId? 'tab-select':'tab-normal','item-margin']"
|
|
@click="bindChooseOwner" :data-item="item">
|
|
{{item.dataName}}
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="container-box">
|
|
<containerLoading style="min-height: 70vh;" :loadingVisible="listLoading" @refresh="doRefreshList">
|
|
<view class="page-list-content">
|
|
<view class="content-box">
|
|
<block v-for="(item,index) in goodsList" :key="index">
|
|
<view class="content-item" @click="doDetail" :data-value="item">
|
|
<view class="content-item-img-box">
|
|
<image :src="item.preImg" class="content-item-img" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="content-item-txt">{{item.goodsName}}</view>
|
|
<view class="content-item-bottom">
|
|
<rich-text class="content-item-price"
|
|
:nodes="moneyTxt(8,14,item.goodsPrice+'')"></rich-text>
|
|
<view class="content-item-time">截止:{{item.goodsLastTime}}</view>
|
|
</view>
|
|
<view class="status-tag">
|
|
{{goodsStatus(item.goodsCheckStatus,item.goodsStatus,item.goodsOrderStatus)}}
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<uni-load-more :status="hasMore"></uni-load-more>
|
|
</view>
|
|
|
|
</containerLoading>
|
|
<view :class="isScrolling ? 'create-box-hide' : 'create-box-show'" @click="doCreateGoods">
|
|
<image src="/static/images/icon_create_goods_bg.png" class="create-box-bg" mode="scaleToFill">
|
|
</image>
|
|
<view class="create-txt">发布软著</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup type="message" ref="msg">
|
|
<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Shop from '@/common/js/net/shop.js'
|
|
import {
|
|
sImgPrefix
|
|
} from '@/common/js/net/mainUrl.js'
|
|
import containerLoading from '../../../components/container-loading.vue'
|
|
import {
|
|
inject
|
|
} from 'vue';
|
|
import {
|
|
goodsStatus,
|
|
includes,
|
|
moneyTxt
|
|
} from '@/common/js/conver.js'
|
|
export default {
|
|
components: {
|
|
containerLoading
|
|
},
|
|
setup() {
|
|
const globalData = inject('globalData')
|
|
return {
|
|
globalData
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
pageData: {
|
|
page: 1,
|
|
rows: 10,
|
|
keywords: '',
|
|
keywords: '',
|
|
goodsLeaderType: '',
|
|
goodsGetTime: '',
|
|
goodsDevelop: '',
|
|
goodsType: ''
|
|
},
|
|
keywords: '',
|
|
priceStart: '',
|
|
priceEnd: '',
|
|
isLoadMore: false,
|
|
hasMore: true,
|
|
listLoading: 'loading',
|
|
listRefreshTrig: false,
|
|
goodsList: [],
|
|
imgPrefix: sImgPrefix,
|
|
localAssets: this.globalData.localAssets,
|
|
imgAssets: this.globalData.imgAssetsUrl,
|
|
typeList: [],
|
|
selType: '',
|
|
ownerList: [{
|
|
dataName: '自然人',
|
|
dataId: '1'
|
|
}, {
|
|
dataName: '法人',
|
|
dataId: '2'
|
|
}, {
|
|
dataName: '非法人组织或其他',
|
|
dataId: '3'
|
|
}],
|
|
selOwner: '',
|
|
msgType: 'info',
|
|
msgHint: '',
|
|
msgShow: false,
|
|
isScrolling: false,
|
|
scrollTimer: null,
|
|
needRefresh: false
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: "我要卖",
|
|
});
|
|
uni.setNavigationBarColor({
|
|
frontColor: "#000000",
|
|
backgroundColor: "#FFFFFF",
|
|
animation: {
|
|
duration: 500,
|
|
timingFunc: "easeIn",
|
|
},
|
|
});
|
|
this.doGetDic()
|
|
this.doRefreshList()
|
|
},
|
|
onShow() {
|
|
if (this.needRefresh) {
|
|
this.needRefresh = false
|
|
this.doRefreshList()
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
if (this.scrollTimer) {
|
|
clearTimeout(this.scrollTimer);
|
|
}
|
|
if (!this.isScrolling) {
|
|
this.isScrolling = true
|
|
}
|
|
const timer = setTimeout(() => {
|
|
this.isScrolling = false
|
|
}, 300);
|
|
this.scrollTimer = timer
|
|
},
|
|
onPullDownRefresh() {
|
|
this.doRefreshList()
|
|
},
|
|
onReachBottom() {
|
|
this.doLoadMore()
|
|
},
|
|
methods: {
|
|
goodsStatus,
|
|
includes,
|
|
moneyTxt,
|
|
inputKeywords(e) {
|
|
this.keywords = e.detail.value
|
|
},
|
|
doSearch() {
|
|
this.doRefreshList()
|
|
},
|
|
bindChooseType(e) {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0
|
|
})
|
|
setTimeout(() => {
|
|
const item = e.currentTarget.dataset.item;
|
|
let newSelType = this.selType;
|
|
// 先转数组，处理空字符串情况
|
|
const typeArr = newSelType ? newSelType.split(',') : [];
|
|
|
|
if (typeArr.includes(item.dataId)) {
|
|
// 删除
|
|
const index = typeArr.indexOf(item.dataId);
|
|
typeArr.splice(index, 1);
|
|
} else {
|
|
// 添加
|
|
typeArr.push(item.dataId);
|
|
}
|
|
|
|
// 转回字符串，自动处理空数组（转成空字符串）
|
|
newSelType = typeArr.join(',');
|
|
this.selType = newSelType
|
|
console.log('选择分类:', this.data.selType);
|
|
this.doRefreshList();
|
|
}, 500);
|
|
},
|
|
bindChooseOwner(e) {
|
|
const item = e.currentTarget.dataset.item
|
|
this.selOwner = this.selOwner == item.dataId ? '' : item.dataId
|
|
this.doRefreshList()
|
|
},
|
|
doGetDic() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
})
|
|
const that = this
|
|
Shop.doGetGoodsDic('0b00884a-f7a2-425f-93e5-599fbaad4bde')
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
that.typeList = res
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
//刷新
|
|
doRefreshList() {
|
|
this.goodsList = []
|
|
this.isLoadMore = false
|
|
this.hasMore = 'more'
|
|
this.listRefreshTrig = true
|
|
this.pageData.page = 1
|
|
this.pageData.keywords = this.keywords
|
|
this.pageData.goodsLeaderType = this.selOwner
|
|
this.pageData.priceRangeStart = this.priceStart
|
|
this.pageData.priceRangeEnd = this.priceEnd
|
|
this.pageData.goodsType = this.selType
|
|
this.getIndexList(true)
|
|
},
|
|
//加载更多
|
|
doLoadMore() {
|
|
if (this.isLoadMore || this.hasMore == 'noMore') {
|
|
return
|
|
}
|
|
//判断是否有更多
|
|
this.hasMore = 'loading'
|
|
this.isLoadMore = true
|
|
this.pageData.page = ++this.pageData.page
|
|
this.getIndexList(false)
|
|
},
|
|
//获取列表
|
|
getIndexList(isRefresh) {
|
|
const _self = this
|
|
this.listLoading = isRefresh ? 'loading' : ''
|
|
Shop.doGetMineSellGoods(_self.pageData)
|
|
.then(res => {
|
|
uni.stopPullDownRefresh()
|
|
console.log(res)
|
|
var status = 'success'
|
|
status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
|
|
const list = _self.addPrefixToPreviewImgs(res.rows)
|
|
_self.listLoading = isRefresh ? status : ''
|
|
_self.goodsList = _self.goodsList.concat(list)
|
|
_self.listRefreshTrig = false
|
|
_self.isLoadMore = false
|
|
_self.hasMore = _self.goodsList.length < res.total ? 'more' : 'noMore'
|
|
})
|
|
.catch(err => {
|
|
uni.stopPullDownRefresh()
|
|
console.log(err)
|
|
_self.listLoading = 'error'
|
|
_self.listRefreshTrig = false
|
|
_self.isLoadMore = false
|
|
_self.hasMore = 'more'
|
|
})
|
|
},
|
|
//为数据中图片添加前缀
|
|
addPrefixToPreviewImgs(data) {
|
|
const prefix = this.imgPrefix;
|
|
return data.map(item => {
|
|
if (item.goodsPhoto && item.goodsPhoto != '') {
|
|
item.preImg = prefix + item.goodsPhoto
|
|
}
|
|
return item;
|
|
});
|
|
},
|
|
//详情
|
|
doDetail(e) {
|
|
const goods = e.currentTarget.dataset.value
|
|
if (goods.goodsOrderStatus == '0') {
|
|
//未售卖
|
|
uni.navigateTo({
|
|
url: '/pages/shop/manageGoods/manageGoods?id=' + goods.goodsId,
|
|
animation: 'fade'
|
|
})
|
|
} else {
|
|
this.msgHint = goods.goodsOrderStatus != '4' ? '商品已被买家购买,无法操作' : '商品已经出售'
|
|
this.msgType = 'info'
|
|
this.$refs.msg.open()
|
|
}
|
|
},
|
|
//去创建软著商品
|
|
doCreateGoods() {
|
|
uni.navigateTo({
|
|
url: '/pages/shop/publishGoods/publishGoods'
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-title-box {
|
|
background-color: $white-color;
|
|
position: fixed;
|
|
/* #ifdef MP-BAIDU */
|
|
top: 0rpx;
|
|
/* #endif */
|
|
/* #ifndef MP-BAIDU */
|
|
top: 82rpx;
|
|
/* #endif */
|
|
left: 0;
|
|
z-index: 3;
|
|
width: 100%;
|
|
padding: 10rpx 30rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2rpx 4rpx $bg-gray-input-color;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.search-container-fixed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.search-box {
|
|
background-color: $bg-gray-color;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 15rpx 20rpx;
|
|
border-radius: 60rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.divider-20 {
|
|
background-color: $bg-gray-input-color;
|
|
min-height: 20rpx;
|
|
margin: 0rpx -30rpx;
|
|
}
|
|
|
|
.title-box {
|
|
position: relative;
|
|
margin-top: 60rpx;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.title-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
background-size: cover;
|
|
}
|
|
|
|
.page-list-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.title-container {
|
|
position: relative;
|
|
}
|
|
|
|
.title-hint-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.title-hint-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.title-hint-item:nth-of-type(n+2) {
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.title-hint-txt {
|
|
margin-left: 8rpx;
|
|
font-size: 24rpx;
|
|
color: $text-gray-desc-color;
|
|
}
|
|
|
|
.hook {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(0deg, #FFB540 0%, #FF4800 100%);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hook::after {
|
|
content: "";
|
|
display: block;
|
|
width: 8rpx;
|
|
height: 15rpx;
|
|
border: solid white;
|
|
border-width: 0 2rpx 2rpx 0;
|
|
transform: rotate(45deg);
|
|
position: absolute;
|
|
top: 6rpx;
|
|
}
|
|
|
|
.title-func-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.title-func-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.func-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.func-txt {
|
|
font-size: 28rpx;
|
|
color: $text-color;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.container-box {
|
|
background-color: $white-color;
|
|
margin: 180rpx -30rpx 0rpx -30rpx;
|
|
padding: 30rpx;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.header {
|
|
transition: all 0.3s;
|
|
margin-top: 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header.sticky {
|
|
background-color: $white-color;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2rpx 4rpx $bg-gray-input-color;
|
|
}
|
|
|
|
.condition-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30rpx 0rpx 20rpx 0rpx;
|
|
}
|
|
|
|
.condition-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.condition-item-title {
|
|
white-space: nowrap;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.list-tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.tab-select {
|
|
white-space: nowrap;
|
|
line-height: 17px;
|
|
border-radius: 5rpx;
|
|
background-color: $btn-primary-color;
|
|
color: $text-primary-deep-color;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
padding: 5rpx 15rpx;
|
|
}
|
|
|
|
.tab-normal {
|
|
background-color: $bg-gray-input-color;
|
|
color: $text-gray-hint-color;
|
|
white-space: nowrap;
|
|
line-height: 17px;
|
|
border-radius: 5rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
padding: 5rpx 15rpx;
|
|
}
|
|
|
|
.item-margin {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-margin:nth-of-type(n+2) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
|
|
.content-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.content-item {
|
|
width: 48%;
|
|
margin-top: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.content-item:nth-of-type(even) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.status-tag {
|
|
display: inline-block;
|
|
padding: 0rpx 20rpx;
|
|
background-color: $primary-color;
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
line-height: 40rpx;
|
|
height: 40rpx;
|
|
text-align: center;
|
|
border-bottom-right-radius: 30rpx;
|
|
border-top-right-radius: 30rpx;
|
|
position: absolute;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
}
|
|
|
|
.status-tag::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0rpx;
|
|
bottom: -15rpx;
|
|
border-width: 18rpx 18rpx 0 0rpx;
|
|
border-style: solid;
|
|
border-color: $primary-color transparent transparent transparent;
|
|
}
|
|
|
|
.special-tag {
|
|
display: inline-block;
|
|
padding: 0rpx 20rpx;
|
|
background-color: $red-color;
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
border-bottom-right-radius: 30rpx;
|
|
border-top-right-radius: 30rpx;
|
|
position: absolute;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
}
|
|
|
|
.special-tag::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0rpx;
|
|
bottom: -15rpx;
|
|
border-width: 18rpx 18rpx 0 0rpx;
|
|
border-style: solid;
|
|
border-color: $red-color transparent transparent transparent;
|
|
}
|
|
|
|
|
|
.content-item-img-box {
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background-color: $bg-gray-input-color;
|
|
}
|
|
|
|
.content-item-img {
|
|
width: 200rpx;
|
|
height: 260rpx;
|
|
}
|
|
|
|
.content-item-txt {
|
|
font-size: 28rpx;
|
|
margin-top: 15rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.content-item-bottom {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.content-item-time {
|
|
font-size: 24rpx;
|
|
color: $text-gray-hint-color;
|
|
}
|
|
|
|
.content-item-price {
|
|
color: red;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.create-box-show,
|
|
.create-box-hide {
|
|
position: fixed;
|
|
bottom: 300rpx;
|
|
right: 35rpx;
|
|
color: white;
|
|
border-radius: 10rpx;
|
|
transition: all 0.3s ease;
|
|
opacity: 1;
|
|
z-index: 100;
|
|
height: 200rpx;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.create-box-hide {
|
|
opacity: 0;
|
|
transform: translate(-50%, 20rpx);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.create-box-bg {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.create-txt {
|
|
position: absolute;
|
|
color: $white-color;
|
|
top: 117rpx;
|
|
left: 45rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
</style> |