TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

商品管理模块

Browse Source
This commit is contained in:
唐明明
2021-09-16 18:10:28 +08:00
parent 899dd2d9b1
commit f77b357b3e
10 changed files with 7543 additions and 4810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
pages/goods/add.vue
View File

@@ -23,7 +23,7 @@
<!-- 商品基本信息 -->
<view class="form-block">
<view class="form-box inputs-flex">
<label class="form-label">产品标题</label>
<label class="form-label">商品标题</label>
<input type="text" v-model="name" placeholder="输入商品标题"/>
</view>
<view class="form-box inputs-flex">
@@ -32,7 +32,7 @@
</view>
<view class="form-box inputs-flex">
<label class="form-label">规格单位</label>
<input type="digit" :value="skus_unit" placeholder="输入规格单位 如:件"/>
<input type="text" v-model="skus_unit" placeholder="输入规格单位 如:件"/>
</view>
<view class="form-upd">
<view class="form-title">商品详情（点击预览，长按删除）</view>
@@ -72,62 +72,109 @@
</view>
<!-- 商品详情介绍 -->
<view class="form-block">
<!-- is_change query 否 0 是否支持易货 -->
<view class="form-box inputs-flex">
<label class="form-label">易货起购数量</label>
<input type="number" v-model="skus_number" placeholder="输入易货起购数量"/>
<view class="form-box picker-flex">
<label class="form-label">支持易货</label>
<view class="picker-switch">
<switch :checked="isChange" color="#e93340" @change="pickerChange($event, 'isChange')"/>
</view>
</view>
<view class="form-box inputs-flex" v-if="isChange">
<label class="form-label">最低易货量</label>
<input type="number" v-model="skus_number" placeholder="输入最低易货量"/>
</view>
<view class="form-box inputs-flex">
<label class="form-label">商品库存</label>
<input type="number" v-model="skus_stock" placeholder="输入商品库存"/>
<label class="form-label">发行权证数</label>
<input type="number" v-model="skus_stock" placeholder="输入商品发行权证数"/>
</view>
</view>
<!-- 售后服务 -->
<view class="form-block">
<view class="form-box picker-flex">
<label class="form-label">配送方式</label>
<view class="picker-text">
logistic_type 1.快递，2.自提<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
</view>
<picker :range="logisticArr" range-key="text" :value="logisticType" @change="pickerChange($event, 'logisticType')">
<view class="picker-text">
{{logisticArr[logisticType].text}}
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
</view>
</picker>
</view>
<view class="form-box picker-flex">
<view class="form-box picker-flex" v-if="logisticType === 1">
<label class="form-label">关联店铺</label>
<view class="picker-text">
stores 自提必填<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
<view class="picker-text" @click="opnePopup('storePopup')">
已关联{{stores.length}}家店铺<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
</view>
</view>
<view class="form-box picker-flex">
<label class="form-label">允许售后</label>
<view class="picker-switch">
<switch :checked="isPostSale" color="#e93340" @change="pickerChange($event, 'isPostSale')"/>
</view>
</view>
<view class="form-box picker-flex">
<label class="form-label">可选服务</label>
<view class="picker-text">
321321<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
<view class="picker-text" @click="opnePopup('categoryPopup')">
已选{{services.length}}项服务<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
</view>
</view>
</view>
<!-- 售后服务 -->
<view class="form-block">
<view class="form-block" v-if="type == 2">
<view class="form-box picker-flex">
<label class="form-label">到期时间</label>
<view class="picker-text">
321321<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
</view>
<picker mode="date" :value="expiriedAt" @change="pickerChange($event, 'expiriedAt')">
<view class="picker-text">
{{expiriedAt || '选择服务到期时间'}}
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
</view>
</picker>
</view>
</view>
<!-- 可选服务 -->
<uni-popup ref="categoryPopup">
<view class="category-popup">
<view class="header">
<view class="title">选择商品服务</view>
</view>
<view class="category-flex">
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in servicesArr" :key="index" @click="item.check = !item.check">
<view class="category-name">{{item.name}}</view>
<view class="category-content">{{item.content}}</view>
</view>
</view>
<view class="btns">
<button type="default" size="default" @click="affirmCategory('services', 'categoryPopup')">确定</button>
</view>
</view>
</uni-popup>
<!-- 选择店铺 -->
<uni-popup ref="storePopup">
<view class="category-popup">
<view class="header">
<view class="title">选择店铺</view>
</view>
<view class="category-flex">
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in storesArr" :key="index" @click="item.check = !item.check">
<view class="category-name">{{item.name}}</view>
<view class="category-content">{{item.address}}</view>
</view>
</view>
<view class="btns">
<button type="default" size="default" @click="affirmCategory('stores', 'storePopup')">确定</button>
</view>
</view>
</uni-popup>
<!-- 安全区 -->
<view class="ios-bottom"></view>
<!-- footer -->
<view class="footer">
<button class="footer-btn" type="default">发布</button>
<button class="footer-btn" type="default" @click="submitAdd">{{type == 2 ? '发布': '发布并认证'}}</button>
<view class="ios-bottom"></view>
</view>
</view>
</template>
<script>
import { managesGoodsCreate, managesCreate } from '@/apis/interfaces/goods'
import { managesGoodsCreate, managesCreate, managesGoodsEdit } from '@/apis/interfaces/goods'
import { uploads } from '@/apis/interfaces/uploading'
export default {
data() {
@@ -143,23 +190,51 @@
skus_number : 1, // 易货起购数量
skus_unit : '件', // 规格文字
skus_charge : '0.00',// 分销佣金
skus_stock : 0, // 库存
skus_stock : '', // 库存
isChange : false, // 是否支持易货
logisticType: 0, // 配送方式
stores : [], // 关联店铺
expiriedAt : '', // 活动到期时间
logisticType: 0, // 配送方式
logisticArr : [
{text: '快递', type: 1},
{text: '自提', type: 2}
],
// 配置信息
storesArr : [], // 可选店铺
tags : [], // 可选商品标签
tagsIndex : 0, // 选择标签的下标
servicesArr : [], // 可选服务
type : 1, // 1为商品，0为服务
type : 1, // 1为商品，2为服务
};
},
created() {
if(this.$Route.query.type === 'edit'){
console.log('编辑')
managesGoodsEdit(this.$Route.query.id).then(res => {
console.log(res)
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
return
}
managesCreate({
category_cid: 140
category_cid: this.$Route.query.cid
}).then(res => {
res.services = res.services.map(val => {
return {
check: false,
...val
}
})
res.stores = res.stores.map(val => {
return {
check: false,
...val
}
})
this.storesArr = res.stores
this.tags = res.tags
this.servicesArr= res.services
@@ -172,6 +247,25 @@
})
},
methods: {
// 选择商品服务
opnePopup(key){
this.$refs[key].open('bottom')
},
// 确认选择商品服务
affirmCategory(key, popupKey){
let keyArr = key == 'services' ? 'servicesArr' : 'storesArr'
this[key] = []
for(let val of this[keyArr]){
if(val.check){
this[key].push(val.service_id || val.store_id)
}
}
this.$refs[popupKey].close()
},
// picker选择
pickerChange(e, key){
this[key] = e.detail.value
},
// 图片预览
openImg(index, key){
let paths = this[key].map(val => {
@@ -212,6 +306,55 @@
})
}
})
},
// 发布产品
submitAdd(){
let pictures = this.pictures.map(val => {return val.path}),
content = this.content.map(val => {return val.path})
let submitData = {
name : this.name,
cover : this.pictures[0].path,
category_id : this.$Route.query.id,
category_cid : this.$Route.query.cid,
pictures : pictures,
content : content,
description : this.description,
is_post_sale : this.isPostSale ? 0 : 1,
services : this.services,
skus_cost : this.skus_cost,
skus_price : this.skus_price,
skus_number : this.skus_number,
skus_unit : this.skus_unit,
skus_charge : this.skus_charge,
skus_stock : this.skus_stock,
is_change : this.isChange ? 0 : 1,
logistic_type: this.logisticArr[this.logisticType].type,
stores : this.stores,
expiried_at : this.expiriedAt
}
let submitFund = managesGoodsCreate(submitData)
submitFund.then(res => {
if(this.type === 2){
uni.showModal({
title : '提示',
content : '商品权证已发布，请耐心等待平台审核',
showCancel : false,
success : res => {
if(res.confirm){
this.$Router.back()
}
}
})
return
}
this.$Router.push({name: 'goodsAuth', params: { id: res , type: 'goodsAdd'}})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
@@ -283,6 +426,15 @@
position: absolute;
}
}
.picker-switch{
line-height: 80rpx;
min-height: 80rpx;
text-align: right;
margin-right: -15rpx;
switch{
transform:scale(0.7)
}
}
}
.form-upd{
.form-title{
@@ -334,7 +486,7 @@
right: 0;
padding: 20rpx $padding;
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
z-index: 99;
z-index: 9;
.footer-btn{
border: none;
border-radius: 0;
@@ -348,5 +500,69 @@
border: none;
}
}
}
// 可选服务
.category-popup{
background: #F5F5F5;
padding: 0 $padding * 2 $padding * 2 $padding * 2;
.header{
padding: $padding*2 0;
box-sizing: border-box;
@extend .vertical;
.title{
text-align: center;
font-size: $title-size + 14;
font-weight: bold;
line-height: 90rpx;
}
.subtitle{
font-size: $title-size-m;
color: $text-gray;
text-align: center;
}
}
.category-flex{
max-height: 50vh;
overflow-y: scroll;
.category-flex-item{
margin-bottom: $margin;
padding: $padding;
background: white;
border:solid 1rpx white;
box-sizing: border-box;
.category-name{
padding-bottom: $padding/2;
font-weight: bold;
font-size: $title-size-lg;
}
.category-content{
font-size: $title-size-sm;
color: $text-gray;
@extend .ellipsis;
}
&.show{
color: $text-price;
border:solid 1rpx $text-price;
}
&:last-child{
margin-bottom: 0;
}
}
}
.btns{
padding-top: $padding * 2;
button{
background: $text-price;
border-radius: 0;
height: 90rpx;
line-height: 90rpx;
font-size: $title-size;
color: white;
font-weight: bold;
&::after{
border: none;
}
}
}
}
</style>