450 lines
12 KiB
Vue
450 lines
12 KiB
Vue
<template>
|
||
<view class='content'>
|
||
<u--form :model="model1" :rules="rules" ref="uForm" :labelStyle="{fontSize:'32rpx',color:'#444444'}"
|
||
labelWidth='auto'>
|
||
<view class="good-baseInfo card">
|
||
<u-form-item label="商品标题" prop="userInfo.name" ref="item1" required>
|
||
<text slot='right' style="font-size:28rpx ; color:#989898 ;">{{value1.length}}/{{maxLength}}</text>
|
||
</u-form-item>
|
||
<u-form-item label="" prop="userInfo.name" ref="item1">
|
||
<u--textarea v-model="value1" placeholder="建议描述产品品牌、名称、规格、口味"
|
||
style="background-color: #F9F9F9;height: 166rpx;" :autoHeight='true'
|
||
:maxlength='maxLength'></u--textarea>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="商品主图" prop="userInfo.name" ref="item1" required>
|
||
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
|
||
</u-form-item>
|
||
<u-form-item prop="userInfo.name" ref="item1">
|
||
<u-upload :fileList="formData.imageList" @afterRead="afterRead1" @delete="deletePic1" name="6"
|
||
multiple :maxCount="5">
|
||
<view class='uploadimg'>
|
||
<u-icon name="plus" color="#777777"></u-icon>
|
||
<view class="" style="color: #777777;font-size: 24rpx;">
|
||
上传图片
|
||
</view>
|
||
</view>
|
||
</u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="商品详情" prop="userInfo.name" ref="item1" required>
|
||
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
|
||
</u-form-item>
|
||
<u-form-item prop="userInfo.name" ref="item1">
|
||
<u-upload :fileList="formData.content.image" @afterRead="afterRead" @delete="deletePic" name="6"
|
||
multiple :maxCount="5">
|
||
<view class='uploadimg'>
|
||
<u-icon name="plus" color="#777777"></u-icon>
|
||
<view class="" style="color: #777777;font-size: 24rpx;">
|
||
上传图片
|
||
</view>
|
||
</view>
|
||
</u-upload>
|
||
</u-form-item>
|
||
</view>
|
||
<view class='tips'>
|
||
商品类目属性
|
||
</view>
|
||
<view class="card" style="padding: 14rpx 30rpx;">
|
||
<u-form-item label="商品分类" prop="userInfo.name" ref="item1" labelPosition="left" required>
|
||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||
@click="navgo(`/pages/product/addGoodDetail/goodsType?mer_id=${mer_id}`)">
|
||
<view style="margin-right: 10rpx;line-height: 25rpx;">{{ formData.cate_name|| '请选择'}}</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item label="商品属性" prop="userInfo.name" ref="item1" labelPosition="left">
|
||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||
@click="navgo('/pages/product/addGoodDetail/goodsAttr')">
|
||
<view style="margin-right: 10rpx;line-height: 25rpx;">去设置</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class='tips'>
|
||
规格与价格
|
||
</view>
|
||
<view class="card" style="height: 100rpx;padding: 14rpx 30rpx;">
|
||
<u-form-item label="规格与价格" prop="userInfo.name" ref="item1" labelPosition="left" required>
|
||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||
@click="navgo('/pages/product/addGoodDetail/goodsPrice')">
|
||
<view style="margin-right: 10rpx;line-height: 25rpx;">去设置</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class='tips'>
|
||
服务与承诺
|
||
</view>
|
||
<view class="card" style="padding: 14rpx 30rpx;">
|
||
<u-form-item label="商品详细描述" prop="userInfo.name" ref="item1" labelPosition="left">
|
||
<text slot='right' style="font-size:28rpx ; color:#989898 ;">{{value1.length}}/{{maxLength}}</text>
|
||
</u-form-item>
|
||
<u--textarea v-model="value1" placeholder="货品描述请严格遵循《广告法》规定，避免出现虚假宣传和误导消费者的词语"
|
||
style="background-color: #F9F9F9;height: 166rpx;" :autoHeight='true'
|
||
:maxlength='maxLength'></u--textarea>
|
||
|
||
<u-line color="#F3F3F3" style="margin: 30rpx 0;"></u-line>
|
||
<u-form-item label="送货方式" labelPosition="left" required>
|
||
<u-checkbox-group v-model="checkboxValue1" placement="row" slot="right">
|
||
<u-checkbox shape="circle" v-for="(item, index) in checkboxList1" :key="index"
|
||
:label="item.name" :name="item.name" activeColor="#20B128"
|
||
:customStyle="{marginRight: '8px'}"
|
||
:labelColor="checkboxValue1.includes(item.name)?'#20B128':'#777777'">
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
<view class="submit-btn">
|
||
<u-button text="确认发布" @click="submit" color="#33BB3C" class="custom-style"></u-button>
|
||
</view>
|
||
|
||
<view class="overlay">
|
||
<u-overlay :show="showlay">
|
||
<view class="overlay-content">
|
||
<view class="">
|
||
温馨提示
|
||
</view>
|
||
<view class="" style="font-family: PingFangFamily;font-size: 36rpx;">
|
||
发布中断可能导致商机流失
|
||
</view>
|
||
<view class="" style="font-size: 26rpx;color: #777777;">
|
||
<view class="">
|
||
您的商品信息已经填写了大半，
|
||
</view>
|
||
<view class="">
|
||
只差最后几步就能上架销售了！
|
||
</view>
|
||
</view>
|
||
<view class=""
|
||
style="font-size: 28rpx;color: #444444;background-color: #EDF8ED;padding: 20rpx 44rpx;border-radius: 12rpx;">
|
||
<view class="">
|
||
越早发布产品<text style='color: #21B129;'>曝光量越高</text>
|
||
</view>
|
||
<view class="">
|
||
越早发布产品可提前 <text style='color: #21B129;'>抢占商机</text>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;">
|
||
<view style="width: 236rpx;height: 84rpx;margin-right: 30rpx;">
|
||
<u-button text="确定返回" @click='back'></u-button>
|
||
</view>
|
||
<view style="width: 236rpx;height: 84rpx;">
|
||
<u-button type='primary' text="继续编辑" @click='showlay=false'></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-overlay>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
HTTP_REQUEST_URL
|
||
} from '@/config/app.js';
|
||
import {
|
||
formatDate
|
||
} from '../../../libs/uniApi';
|
||
|
||
import uploadImgVideo from "../addGood/components/uploadImgVideo.vue"
|
||
export default {
|
||
components: {
|
||
uploadImgVideo,
|
||
},
|
||
data() {
|
||
return {
|
||
formData: {
|
||
"store_name": "测试商品",
|
||
"imageList": [
|
||
|
||
],
|
||
"attrValue": [{
|
||
"price": "100",
|
||
"unit_name": "箱",
|
||
"wholesale_unit_name": "件",
|
||
"wholesale_price": 88,
|
||
"cost": "",
|
||
"stock": "20",
|
||
"ot_price": "",
|
||
"procure_price": "",
|
||
"bar_code": "",
|
||
"weight": "",
|
||
"volume": "",
|
||
"extension_one": "",
|
||
"extension_two": ""
|
||
}],
|
||
"cate_name": "兽药",
|
||
"unit_name": "件",
|
||
"cate_id": 1826,
|
||
"mer_cate_id": [
|
||
2331
|
||
],
|
||
"mer_cate_name": "测试",
|
||
"spec_type": "0",
|
||
"attr": [],
|
||
"specifica": "",
|
||
"delivery_way": [
|
||
1,
|
||
2
|
||
],
|
||
"delivery_free": "1",
|
||
"temp_id": "",
|
||
"tempName": "",
|
||
"once_min_count": "",
|
||
"image": "https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/a09b7188e9ef408a3f96d82b2b178082.jpeg",
|
||
"slider_image": [
|
||
|
||
],
|
||
"is_good": 0,
|
||
"is_gift_bag": 0,
|
||
"sort": "",
|
||
"once_count": "",
|
||
"video_link": "",
|
||
"content": {
|
||
"title": "",
|
||
"image": []
|
||
},
|
||
"stock": "20"
|
||
},
|
||
mer_id: "",
|
||
maxLength: 30,
|
||
fileList6: [],
|
||
showSex: false,
|
||
showlay: false,
|
||
go: true,
|
||
model1: {
|
||
userInfo: {
|
||
name: '',
|
||
sex: '',
|
||
},
|
||
},
|
||
range: [{
|
||
value: 0,
|
||
text: "篮球"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "足球"
|
||
},
|
||
{
|
||
value: 2,
|
||
text: "游泳"
|
||
},
|
||
],
|
||
text: "",
|
||
text1: "",
|
||
value1: "",
|
||
checkboxValue1: [],
|
||
checkboxList1: [{
|
||
name: '到店核销',
|
||
},
|
||
{
|
||
name: '快递配送',
|
||
},
|
||
|
||
],
|
||
rules: {
|
||
|
||
},
|
||
radio: '',
|
||
switchVal: false
|
||
};
|
||
},
|
||
methods: {
|
||
|
||
// 删除图片
|
||
deletePic1(event) {
|
||
this.formData[`imageList`].splice(event.index, 1)
|
||
},
|
||
// 新增图片
|
||
async afterRead1(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this.formData[`imageList`].length
|
||
lists.map((item) => {
|
||
this.formData[`imageList`].push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise1(lists[i].url)
|
||
let item = this.formData[`imageList`][fileListLen]
|
||
this.formData[`imageList`].splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result
|
||
}))
|
||
fileListLen++
|
||
}
|
||
},
|
||
uploadFilePromise1(url) {
|
||
return new Promise((resolve, reject) => {
|
||
let a = uni.uploadFile({
|
||
url: HTTP_REQUEST_URL + '/api/upload/image/field',
|
||
filePath: url,
|
||
name: 'field',
|
||
success: (res) => {
|
||
console.log(res.data)
|
||
resolve(JSON.parse(res.data).data.path)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
|
||
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this.formData.content.image.splice(event.index, 1)
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this.formData.content.image.length
|
||
lists.map((item) => {
|
||
this.formData.content.image.push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise(lists[i].url)
|
||
let item = this.formData.content.image[fileListLen]
|
||
this.formData.content.image.splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result
|
||
}))
|
||
fileListLen++
|
||
}
|
||
},
|
||
uploadFilePromise(url) {
|
||
return new Promise((resolve, reject) => {
|
||
let a = uni.uploadFile({
|
||
url: HTTP_REQUEST_URL + '/api/upload/image/field',
|
||
filePath: url,
|
||
name: 'field',
|
||
success: (res) => {
|
||
setTimeout(() => {
|
||
resolve(res.data.data)
|
||
}, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
|
||
sexSelect(e) {
|
||
this.model1.userInfo.sex = e.name
|
||
this.$refs.uForm.validateField('userInfo.sex')
|
||
},
|
||
navgo(url) {
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
},
|
||
back() {
|
||
// console.log('show')
|
||
this.go = false
|
||
uni.navigateBack()
|
||
},
|
||
showlayFn() {
|
||
uni.navigateBack()
|
||
},
|
||
submit() {
|
||
console.log(this.formData)
|
||
}
|
||
|
||
},
|
||
onLoad(option) {
|
||
this.mer_id = option.mer_id
|
||
if (option.typeData) {
|
||
this.formData.cate_name = JSON.parse(option.typeData).label
|
||
this.formData.cate_id = JSON.parse(option.typeData).value
|
||
console.log(this.formData, 'option')
|
||
}
|
||
if (option.formData) {
|
||
Object.assign(this.formData, JSON.parse(option.formData), {})
|
||
}
|
||
|
||
},
|
||
onBackPress: function(e) {
|
||
this.showlay = true
|
||
return this.go;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss'>
|
||
.content {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #F1F1F1;
|
||
box-sizing: border-box;
|
||
padding-bottom: 280rpx;
|
||
font-family: PingFangRegular;
|
||
padding: 20rpx 20rpx 200rpx 20rpx;
|
||
|
||
|
||
.card {
|
||
background-color: white;
|
||
padding: 28rpx 30rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.uploadimg {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #F1F1F1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 20rpx 0;
|
||
|
||
}
|
||
|
||
|
||
|
||
.tips {
|
||
color: #777777;
|
||
font-size: 28rpx;
|
||
margin: 30rpx 0;
|
||
}
|
||
|
||
.submit-btn {
|
||
position: fixed;
|
||
bottom: 50rpx;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
width: 670rpx;
|
||
border-radius: 40rpx;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.overlay-content {
|
||
width: 570rpx;
|
||
height: 640rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 16rpx;
|
||
background-image: url('/static/images/addGodd/addGoodBg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 70rpx 0 40rpx 0;
|
||
}
|
||
</style> |