liaofei
/
mall-app-t
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(物流)

This commit is contained in:
unknown 2024-06-04 01:13:55 +08:00
parent b6f8d5a656
commit 0a2d2e4601
1 changed files with 229 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

477
pages/product/manageGoods.vue
View File

@ -1,114 +1,68 @@
<template> <template>
<pb-layout <pb-layout class="manage-goods" title="发布商品" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
class="manage-goods" opacityBgUi="bg-white" color="black">
title="发布商品" <view class="goods-form">
leftIcon="leftIcon" <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
navbar="normal" <uni-forms-item label="商品封面图" name="picUrl" required>
:bgStyle="bgStyle" <p-uploader v-model:url="formData.picUrl" fileMediatype="image" limit="1" mode="grid"
opacityBgUi="bg-white" :imageStyles="{ width: '168rpx', height: '168rpx' }" />
color="black" </uni-forms-item>
> <uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
<view class="goods-form"> <p-uploader v-model:url="formData.sliderPicUrls" fileMediatype="image" limit="6" mode="grid"
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160"> :imageStyles="{ width: '168rpx', height: '168rpx' }" />
<uni-forms-item label="商品封面图" name="picUrl" required> </uni-forms-item>
<p-uploader <uni-forms-item label="商品名称" name="name" required>
v-model:url="formData.picUrl" <uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
fileMediatype="image" </uni-forms-item>
limit="1" <uni-forms-item label="商品分类" name="categoryId" label-position="left" required>
mode="grid" <uni-easyinput type="text" v-model="formData.categoryId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
:imageStyles="{ width: '168rpx', height: '168rpx' }" :clearable="false" :inputBorder="false" placeholder="请选择商品分类" disabled>
/> <template v-slot:right>
</uni-forms-item> <uni-icons type="right" />
<uni-forms-item label="商品轮播图" name="sliderPicUrls" required> </template>
<p-uploader </uni-easyinput>
v-model:url="formData.sliderPicUrls" </uni-forms-item>
fileMediatype="image" <uni-forms-item label="商品品牌" name="brandId" label-position="left" required>
limit="6" <uni-easyinput type="text" v-model="formData.brandId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
mode="grid" :clearable="false" :inputBorder="false" placeholder="请选择商品品牌" disabled>
:imageStyles="{ width: '168rpx', height: '168rpx' }" <template v-slot:right>
/> <uni-icons type="right" />
</uni-forms-item> </template>
<uni-forms-item label="商品名称" name="name" required> </uni-easyinput>
<uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" /> </uni-forms-item>
</uni-forms-item> <uni-forms-item label="商品规格" name="skus" label-position="left" required>
<uni-forms-item label="商品分类" name="categoryId" label-position="left" required> <uni-easyinput type="text" v-model="formData.skus" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
<uni-easyinput :clearable="false" :inputBorder="false" placeholder="请添加商品规格" disabled>
type="text" <template v-slot:right>
v-model="formData.categoryId" <uni-icons type="right" /> </template></uni-easyinput>
:styles="selfStyles" </uni-forms-item>
placeholderStyle="color:#8a8a8a" <uni-forms-item label="商品关键词" name="keyword" required>
:clearable="false" <uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
:inputBorder="false" </uni-forms-item>
placeholder="请选择商品分类" <uni-forms-item label="商品简介" name="introduction" required>
disabled <uni-easyinput type="textarea" trim="all" autoHeight v-model="formData.introduction" placeholder="请输入商品简介" />
> </uni-forms-item>
<template v-slot:right> <uni-forms-item label="物流设置" @click="openPicker" name="deliveryTypes" label-position="left" required>
<uni-icons type="right" /> <uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
</template> :inputBorder="false" v-model="formData.keyword" placeholder="请选择配送方式" disabled>
</uni-easyinput> <template v-slot:right>
</uni-forms-item> <uni-icons type="right" />
<uni-forms-item label="商品品牌" name="brandId" label-position="left" required> </template>
<uni-easyinput </uni-easyinput>
type="text" </uni-forms-item>
v-model="formData.brandId" </uni-forms>
:styles="selfStyles" </view>
placeholderStyle="color:#8a8a8a"
:clearable="false"
:inputBorder="false" <uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
placeholder="请选择商品品牌" <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
disabled class="picker-view">
> <picker-view-column>
<template v-slot:right> <view class="item" v-for="(item, index) in DELIVERY_TYPES" :key="index">{{ item.label }}</view>
<uni-icons type="right" /> </picker-view-column>
</template> </picker-view>
</uni-easyinput> </uni-popup>
</uni-forms-item> </pb-layout>
<uni-forms-item label="商品规格" name="skus" label-position="left" required>
<uni-easyinput
type="text"
v-model="formData.skus"
:styles="selfStyles"
placeholderStyle="color:#8a8a8a"
:clearable="false"
:inputBorder="false"
placeholder="请添加商品规格"
disabled
>
<template v-slot:right>
<uni-icons type="right" /> </template
></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="商品关键词" name="keyword" required>
<uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
</uni-forms-item>
<uni-forms-item label="商品简介" name="introduction" required>
<uni-easyinput
type="textarea"
trim="all"
autoHeight
v-model="formData.introduction"
placeholder="请输入商品简介"
/>
</uni-forms-item>
<uni-forms-item label="物流设置" name="deliveryTypes" label-position="left" required>
<uni-easyinput
type="text"
:clearable="false"
:styles="selfStyles"
placeholderStyle="color:#8a8a8a"
:inputBorder="false"
v-model="formData.keyword"
placeholder="请选择配送方式"
disabled
>
<template v-slot:right>
<uni-icons type="right" />
</template>
</uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
</pb-layout>
</template> </template>
<script setup> <script setup>
@ -119,174 +73,201 @@ import GoodsApi from '@/peach/api/trade/goods'
import _ from 'lodash' import _ from 'lodash'
const bgStyle = { const bgStyle = {
backgroundImage: '', backgroundImage: '',
backgroundColor: '#fff', backgroundColor: '#fff',
description: '', description: '',
} }
const DELIVERY_TYPES = [{
value: 3,
label: '到店核销'
}, {
value: 4,
label: '商家配送'
}]
const indicatorStyle = 'height: 50px'
const selfStyles = { const selfStyles = {
backgroundColor: '#f9f9f9', backgroundColor: '#f9f9f9',
} }
const popupRef = ref()
const formData = ref({ const formData = ref({
picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png', picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
sliderPicUrls: [ sliderPicUrls: [
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png', 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png', 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png', 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
], ],
name: '测试商品', name: '测试商品',
categoryId: 91, categoryId: 91,
brandId: 4, brandId: 4,
keyword: '香酥鸭，但家', keyword: '香酥鸭，但家',
deliveryTypes: [3], deliveryTypes: [3],
introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭', introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
}) })
const rules = { const rules = {
name: { name: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请输入商品名称', errorMessage: '请输入商品名称',
}, },
], ],
}, },
picUrl: { picUrl: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请上传商品封面图', errorMessage: '请上传商品封面图',
}, },
], ],
}, },
sliderPicUrls: { sliderPicUrls: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请上传商品轮播图', errorMessage: '请上传商品轮播图',
}, },
], ],
}, },
categoryId: { categoryId: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请选择商品分类', errorMessage: '请选择商品分类',
}, },
], ],
}, },
brandId: { brandId: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请选择商品品牌', errorMessage: '请选择商品品牌',
}, },
], ],
}, },
skus: { skus: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请选择商品规格', errorMessage: '请选择商品规格',
}, },
], ],
}, },
keyword: { keyword: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请输入商品关键字', errorMessage: '请输入商品关键字',
}, },
], ],
}, },
introduction: { introduction: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请输入商品简介', errorMessage: '请输入商品简介',
}, },
], ],
}, },
deliveryTypes: { deliveryTypes: {
rules: [ rules: [
{ {
required: true, required: true,
errorMessage: '请选择商品物流', errorMessage: '请选择商品物流',
}, },
], ],
}, },
} }
const formRef = ref(null) const formRef = ref(null)
function openPicker() {
console.log('123')
popupRef.value.open()
}
function onSubmit() { function onSubmit() {
console.log('res', formData.value) console.log('res', formData.value)
formRef.value formRef.value
.validate() .validate()
.then(async (res) => { .then(async (res) => {
let tempObj = { ...res } let tempObj = { ...res }
if (formData.value.id) { if (formData.value.id) {
tempObj.id = formData.value.id tempObj.id = formData.value.id
await GoodsApi.editProduct(tempObj) await GoodsApi.editProduct(tempObj)
} else { } else {
await GoodsApi.addProduct(tempObj) await GoodsApi.addProduct(tempObj)
} }
}) })
.catch((err) => { .catch((err) => {
console.log('err', err) console.log('err', err)
}) })
} }
// 获取商品详情 // 获取商品详情
function getGoodsInfo() {} function getGoodsInfo() { }
onLoad((options) => { onLoad((options) => {
if (options.id) { if (options.id) {
getProduct() getProduct()
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.manage-goods { .manage-goods {
.goods-form { .goods-form {
margin: 40rpx; margin: 40rpx;
:deep() { :deep() {
.uni-easyinput__content-input { .uni-easyinput__content-input {
font-size: 28rpx !important; font-size: 28rpx !important;
color: #333333 !important; color: #333333 !important;
line-height: normal !important; line-height: normal !important;
} }
.uni-easyinput__placeholder-class { .uni-easyinput__placeholder-class {
font-size: 14px; font-size: 14px;
} }
.is-direction-left { .is-direction-left {
.uni-forms-item__label { .uni-forms-item__label {
padding-left: 10px; padding-left: 10px;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
}
uni-icons {
margin-right: 10px;
}
.uni-easyinput__content {
border-radius: 0 10px 10px 0;
}
}
.is-disabled {
color: #333333;
text-align: right;
}
} }
uni-icons {
margin-right: 10px;
}
.uni-easyinput__content {
border-radius: 0 10px 10px 0;
}
}
.is-disabled {
color: #333333;
text-align: right;
}
} }
}
.picker-view {
width: 750rpx;
height: 600rpx;
margin-top: 20rpx;
}
.item {
line-height: 100rpx;
text-align: center;
}
} }
</style> </style>