351 lines
12 KiB
Vue
351 lines
12 KiB
Vue
<template>
|
|
<view class="padding-bottom-with-bar">
|
|
<!-- 顶部操作条 -->
|
|
<cu-custom :bgColor="'bg-main-color'">
|
|
<block slot="content">商品管理</block>
|
|
</cu-custom>
|
|
<view>
|
|
<!-- 展示商品/服务tab -->
|
|
<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
|
|
<!-- tab header -->
|
|
<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
|
|
:scroll-left="scrollLeft">
|
|
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in tabHeaders"
|
|
:key="index" @tap="tabSelect" :data-id="index">
|
|
{{item.name}}
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 条件筛选栏 -->
|
|
<view class="padding bg-white solid-bottom">
|
|
<view class="flex justify-between align-center">
|
|
<input class="line-input radius-input" v-model="formData.keywords" placeholder="请输入关键字"></input>
|
|
<button class="cu-btn bg-main-color shadow-blur">搜索</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- tab content -->
|
|
<view>
|
|
<view class="padding bg-white margin-top-sm margin-lr-sm name-card" v-for="(good, index) in goodsList" v-if="good.status !== 2">
|
|
<view class="flex justify-start">
|
|
<view class="cu-avatar xxl-view" :style="'background-image:url(' + good.goodsImgUrl + ');'"></view>
|
|
<view class="margin-left-sm flex-column-between">
|
|
<view class="text-black text-cut" style="width: 330rpx;">{{good.goodsName}}</view>
|
|
<view>
|
|
<view v-if="good.goodsStandardList[0].discountPrice" class="flex justify-start align-center">
|
|
<text class="text-price text-red text-bold text-lg">{{good.goodsStandardList[0].discountPrice}}</text>
|
|
<text class="text-del" v-if="good.goodsPrice">¥{{good.goodsStandardList[0].goodsPrice}}</text>
|
|
</view>
|
|
<view v-else-if="good.goodsStandardList[0].goodsPrice" class="flex justify-start align-center">
|
|
<text class="text-price text-red text-bold text-lg">{{good.goodsStandardList[0].goodsPrice}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="text-gray" v-if="good.remark">{{good.remark}}</view>
|
|
<view v-if="good.goodsAreaList && good.goodsAreaList.length">
|
|
<view class="cu-capsule">
|
|
<view class='cu-tag bg-main-color sm'>
|
|
<text class='cuIcon-locationfill'></text>
|
|
</view>
|
|
<view class="cu-tag line-main-color sm">
|
|
服务区域
|
|
</view>
|
|
</view>
|
|
<text v-for="(item,index) in good.goodsAreaList">
|
|
<text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != good.goodsAreaList.length - 1">,</text></text>
|
|
</text>
|
|
</view>
|
|
<!-- <view class="text-gray">团购日期：</view> -->
|
|
<!-- <uni-datetime-picker :value="good.groupBuyDate" type="datetimerange" rangeSeparator="至" @change="changeGroupBuyDate($event, good)"/> -->
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-end oper-bar">
|
|
<view class="text-center margin-right-sm" v-if="good.isGoldenServ">
|
|
<view class="cuIcon-selectionfill text-orange"></view>
|
|
<view class="text-xs">金牌服务</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="addEditGood(good)">编辑</button>
|
|
<button class="cu-btn line-main-color margin-right-xs margin-top-sm" v-if="good.status === 0" @click="offGood(good)">下架</button>
|
|
<button class="cu-btn line-main-color margin-right-xs margin-top-sm" v-if="good.status === 1" @click="onGood(good)">上架</button>
|
|
<!-- <button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="copyGood(good)">复制</button> -->
|
|
<!-- <button class="cu-btn line-main-color margin-right-xs margin-top-sm">优惠券</button> -->
|
|
<!-- <button class="cu-btn line-red shadow-blur margin-right-xs margin-top-sm" @click="delGood(good)">删除</button> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<load-status-bar ref="loadStatusBar" @loadMore="loadProductPage"></load-status-bar>
|
|
<view class="margin-bottom-with-bar"></view>
|
|
<!-- 底部操作栏 -->
|
|
<view class="padding-tb-sm flex justify-around padding-tb-sm fixed-bottom-bar-with-bar bg-back">
|
|
<button class="cu-btn bg-main-color lg shadow-blur margin-left-xs" @click="addEditGood(null)">新增服务</button>
|
|
<button class="cu-btn bg-main-color lg shadow-blur" disabled type="">优惠券</button>
|
|
<button class="cu-btn bg-main-color lg shadow-blur" disabled type="">暂停售卖</button>
|
|
<!-- <button class="cu-btn bg-main-color lg shadow-blur margin-right-xs" data-modal="communityModal" @tap="showModal">社区</button> -->
|
|
<button class="cu-btn bg-main-color lg shadow-blur margin-right-xs" disabled type="">社区</button>
|
|
</view>
|
|
<!-- 模态框 -->
|
|
<view class="cu-modal" :class="communityModal?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="cu-bar bg-white justify-end solid-bottom">
|
|
<view class="content">社区入驻</view>
|
|
<view class="action" data-modal="communityModal" @tap="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding bg-white text-left">
|
|
<view>你可选择一个物业/楼盘作为入驻的社区，则你所有服务或商品将展示在该社区。社区服务属于一公里范围便利服务内容，你必须选择你驻点所在地入驻，以便提供快捷便利的社区服务。</view>
|
|
<view class="margin-top">社区入驻：</view>
|
|
<view>
|
|
<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="provinceList" placeholder="省"
|
|
v-model="selectedCommunity.province" @input="changeCommunity($event, 0)"></my-uni-combox>
|
|
<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="cityList" placeholder="市"
|
|
v-model="selectedCommunity.city" @input="changeCommunity($event, 0)"></my-uni-combox>
|
|
<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="districtList" placeholder="区"
|
|
v-model="selectedCommunity.district" @input="changeCommunity($event, 0)"></my-uni-combox>
|
|
<my-uni-combox class="inline-combox margin-bottom-xs" :candidates="streetList" placeholder="街道"
|
|
v-model="selectedCommunity.street" @input="changeCommunity($event, 0)"></my-uni-combox>
|
|
</view>
|
|
<my-uni-combox :candidates="communityList" placeholder="社区/物业选择"
|
|
v-model="selectedCommunity.community" @input="changeCommunity($event, 0)"></my-uni-combox>
|
|
<view class="margin-top text-gray">注：未创建的社区可在商城端创建再行入驻</view>
|
|
</view>
|
|
<view class="cu-bar bg-white solid-top">
|
|
<view class="action margin-0 flex-sub text-black" data-modal="communityModal" @tap="hideModal">新增社区上架</view>
|
|
<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="communityModal" @tap="hideModal" @click="comfirmCommunity">确认入驻社区</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
|
|
import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
|
|
|
|
export default {
|
|
name: 'goods-manage',
|
|
components: {
|
|
myUniCombox,
|
|
loadStatusBar
|
|
},
|
|
data() {
|
|
return {
|
|
tabCur: 0,
|
|
tabHeaders: [{
|
|
code: 0,
|
|
name: '服务商品'
|
|
}, {
|
|
code: 1,
|
|
name: '配件商品'
|
|
}],
|
|
scrollLeft: 0,
|
|
stickyTop: this.CustomBar,
|
|
formData: {
|
|
keywords: ''
|
|
},
|
|
goodsList: [],
|
|
pageNum: 0,
|
|
pageSize: 0,
|
|
datetimerange: ["", ""],
|
|
communityModal: false,
|
|
provinceList: [],
|
|
cityList: [],
|
|
districtList: [],
|
|
streetList: [],
|
|
communityList: {},
|
|
selectedCommunity: {
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
this.pageNum = this.$globalData.initPageNum;
|
|
this.pageSize = this.$globalData.initPageSize;
|
|
this.loadProductPage();
|
|
},
|
|
resetData() {
|
|
this.pageNum = this.$globalData.initPageNum;
|
|
this.pageSize = this.$globalData.initPageSize;
|
|
this.goodsList = [];
|
|
},
|
|
reloadData() {
|
|
this.resetData();
|
|
this.loadProductPage();
|
|
},
|
|
async loadProductPage(params = {}) {
|
|
params.pageNum = this.pageNum;
|
|
params.pageSize = this.pageSize;
|
|
params.workerId = this.$request.getCurUserInfo().workerId;
|
|
this.$refs.loadStatusBar.showLoading();
|
|
try {
|
|
let res = await this.$request.qryProductPage(params);
|
|
let rowsLength = res.rows.length;
|
|
if (rowsLength > 0) {
|
|
this.goodsList = this.goodsList.concat(res.rows);
|
|
this.pageNum++;
|
|
if (rowsLength === this.pageSize) {
|
|
this.$refs.loadStatusBar.showLoadMore();
|
|
return;
|
|
}
|
|
}
|
|
this.$refs.loadStatusBar.showLoadOver();
|
|
} catch (e) {
|
|
console.error(e)
|
|
this.$refs.loadStatusBar.showLoadErr();
|
|
}
|
|
},
|
|
async loadAreaObj() {
|
|
this.areaObj = await this.$api.data('areaObj');
|
|
this.provinceList = this.areaObj.provinceList;
|
|
this.cityList = this.areaObj.cityList;
|
|
this.districtList = this.areaObj.districtList;
|
|
this.streetList = this.areaObj.streetList;
|
|
this.communityList = this.areaObj.communityList;
|
|
},
|
|
tabSelect(e) {
|
|
this.tabCur = e.currentTarget.dataset.id;
|
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
|
},
|
|
showModal(e) {
|
|
let modalName = e.currentTarget.dataset.modal;
|
|
this[modalName] = true;
|
|
if (modalName === 'communityModal') {
|
|
this.loadAreaObj();
|
|
}
|
|
this[modalName] = true;
|
|
},
|
|
hideModal(e) {
|
|
this[e.currentTarget.dataset.modal] = false;
|
|
},
|
|
changeGroupBuyDate(value, good) {
|
|
console.log(value)
|
|
},
|
|
editGood(good) {
|
|
|
|
},
|
|
async offGood(good) {
|
|
let params = {
|
|
goodsId: good.goodsId,
|
|
status: 1
|
|
}
|
|
let res = await this.$request.updateGoodsStatus(params);
|
|
if (res && res.code === 0) {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '下架成功'
|
|
})
|
|
good.status = 1;
|
|
}
|
|
},
|
|
async onGood(good) {
|
|
let params = {
|
|
goodsId: good.goodsId,
|
|
status: 0
|
|
}
|
|
let res = await this.$request.updateGoodsStatus(params);
|
|
if (res && res.code === 0) {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '上架成功'
|
|
})
|
|
good.status = 0;
|
|
}
|
|
},
|
|
copyGood(good) {
|
|
|
|
},
|
|
async delGood(good) {
|
|
let params = {
|
|
goodsId: good.goodsId,
|
|
status: 2
|
|
}
|
|
let res = await this.$request.updateGoodsStatus(params);
|
|
if (res && res.code === 0) {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '删除成功'
|
|
})
|
|
}
|
|
this.reloadData();
|
|
},
|
|
changeCommunity(selectObj, communityCode) {
|
|
// TODO: 不同的code加载不同的数据
|
|
console.log(selectObj)
|
|
},
|
|
comfirmCommunity() {
|
|
|
|
},
|
|
addEditGood(servItem) {
|
|
let params = '';
|
|
if (servItem != null) {
|
|
params = '?goodId=' + servItem.goodsId
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/my/new-serv' + params
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nav .cu-item {
|
|
width: 50%;
|
|
margin: 0;
|
|
}
|
|
|
|
.line-input {
|
|
width: 77%;
|
|
}
|
|
|
|
.xxl-view {
|
|
min-width: 200rpx;
|
|
min-height: 200rpx;
|
|
}
|
|
|
|
.name-card {
|
|
position: relative;
|
|
}
|
|
|
|
.name-card .oper-bar {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
/deep/ .uni-date__x-input {
|
|
height: 30px;
|
|
}
|
|
|
|
.inline-combox {
|
|
display: inline-block;
|
|
width: calc((100vw - 158rpx)/4);
|
|
}
|
|
|
|
.fixed-bottom-bar-with-bar {
|
|
position: fixed;
|
|
bottom: calc(100rpx + constant(safe-area-inset-bottom) / 2);
|
|
bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
|
|
z-index: 98;
|
|
width: 100%;
|
|
}
|
|
|
|
.padding-bottom-with-bar {
|
|
padding-bottom: calc((100rpx + constant(safe-area-inset-bottom) / 2));
|
|
padding-bottom: calc((100rpx + env(safe-area-inset-bottom) / 2));
|
|
}
|
|
|
|
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
|
|
display: inline-block;
|
|
margin-left: 0;
|
|
height: 28rpx;
|
|
font-size: 16rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
</style>
|