956 lines
26 KiB
Vue
956 lines
26 KiB
Vue
<template>
|
||
<view class='content'>
|
||
<u--form :model="formData" :rules="rules" ref="formData" :labelStyle="{fontSize:'32rpx',color:'#444444'}"
|
||
labelWidth='auto'>
|
||
<view class="good-baseInfo card">
|
||
<u-form-item label="商品标题" prop="store_name" ref="item1" required>
|
||
<text slot='right'
|
||
style="font-size:28rpx ; color:#989898 ;">{{stroeNameLength}}/{{maxLength}}</text>
|
||
</u-form-item>
|
||
<u-form-item label="" prop="userInfo.name" ref="item1">
|
||
<u--textarea v-model="formData.store_name" placeholder="建议描述产品品牌、名称、规格、口味"
|
||
style="background-color: #F9F9F9;height: 166rpx;" :maxlength='maxLength'></u--textarea>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="商品主图" prop="formData.imageList" ref="item1" required>
|
||
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
|
||
</u-form-item>
|
||
<view class="card" style="min-height: 150rpx;margin-bottom: 0;padding: 0;">
|
||
<view class="" style="display: flex;flex-wrap: wrap;">
|
||
<view v-for="(item,index) in formData.imageList"
|
||
style="margin-right: 20rpx;margin-bottom: 20rpx;">
|
||
<view class="video_list" v-if='vidioTypeList.includes(getSuffix(item))'>
|
||
<view class="video_list_item photo" style="position: relative;">
|
||
<view class="jiao">
|
||
<!-- video标签在app端层级过高 -->
|
||
<!--#ifndef APP-PLUS-->
|
||
<video :src="item"></video>
|
||
<!--#endif-->
|
||
<!--#ifdef APP-PLUS-->
|
||
<view class="" style="position: relative;">
|
||
<img :src="item+coverUrl" style=" width:140rpx;height: 140rpx;"></img>
|
||
<view class="image-play-icon">
|
||
<u-icon name="play-right-fill" size="30" color="white"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!--#endif-->
|
||
<image @click="formData.imageList.splice(index,1)"
|
||
src="@/static/images/gban.png" mode="widthFix"></image>
|
||
</view>
|
||
<view style="position: absolute;top: 20rpx;z-index: 99;width: 140rpx;height: 100%;"
|
||
@click="videoshow(index)">
|
||
<view class="videoHover">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="position: relative;" v-else>
|
||
<view class="jiao" @click="formData.imageList.splice(index,1)">
|
||
<image src="@/static/images/gban.png" mode="widthFix"></image>
|
||
</view>
|
||
<u--image @click="preViewImg(item)" :src="item" :fade="true" duration="450"
|
||
width='140rpx' height='140rpx'></u--image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='uploadimg' @click="show=true,isDetail=false">
|
||
<u-icon name="plus" color="#777777"></u-icon>
|
||
<view class="" style="color: #777777;font-size: 20rpx;">
|
||
上传图片/视频
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<u-form-item label="商品详情" prop="formData.content.image" required>
|
||
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
|
||
</u-form-item>
|
||
<view class="card" style="min-height: 150rpx;margin-bottom: 0;padding: 0;">
|
||
<view class="" style="display: flex;flex-wrap: wrap;">
|
||
<view v-for="(item,index) in formData.content.image"
|
||
style="margin-right: 20rpx;margin-bottom: 20rpx;">
|
||
<view class="video_list" v-if='vidioTypeList.includes(getSuffix(item))'>
|
||
<view class="video_list_item photo" style="position: relative;">
|
||
<view class="jiao" @click="formData.content.image.splice(index,1)">
|
||
<!-- video标签在app端层级过高 -->
|
||
<!--#ifndef APP-PLUS-->
|
||
<video :src="item"></video>
|
||
<!--#endif-->
|
||
<!--#ifdef APP-PLUS-->
|
||
<view class="" style="position: relative;">
|
||
<img :src="item+coverUrl" style=" width:140rpx;height: 140rpx;"></img>
|
||
<view class="image-play-icon">
|
||
<u-icon name="play-right-fill" size="30" color="white"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!--#endif-->
|
||
<image src="@/static/images/gban.png" mode="widthFix"></image>
|
||
</view>
|
||
<view style="position: absolute;top: 20rpx;z-index: 99;width: 140rpx;height: 100%;"
|
||
@click="videoshow(index)">
|
||
<view class="videoHover">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="position: relative;" v-else>
|
||
<view class="jiao" @click="formData.content.image.splice(index,1)">
|
||
<image src="@/static/images/gban.png" mode="widthFix"></image>
|
||
</view>
|
||
<u--image @click="preViewImg(item)" :src="item" :fade="true" duration="450"
|
||
width='140rpx' height='140rpx'></u--image>
|
||
</view>
|
||
</view>
|
||
<view class='uploadimg' @click="show=true,isDetail=true">
|
||
<u-icon name="plus" color="#777777"></u-icon>
|
||
<view class="" style="color: #777777;font-size: 20rpx;">
|
||
上传图片/视频
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='tips'>
|
||
商品类目属性
|
||
</view>
|
||
<view class="card" style="padding: 14rpx 30rpx;">
|
||
<u-form-item label="商品分类" prop="cate_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}&&formData=${JSON.stringify(formData)}`)">
|
||
<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?mer_id=${mer_id}&&formData=${JSON.stringify(formData)}`)">
|
||
<view style="margin-right: 10rpx;line-height: 25rpx;">
|
||
{{isSet(formData.product_attribute)?'已设置':'未设置' }}
|
||
</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class='tips'>
|
||
规格与价格
|
||
</view>
|
||
<view class="card" style="min-height: 100rpx;padding: 14rpx 30rpx;">
|
||
<u-form-item label="规格与价格" prop="formData.attrValue" 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?formData=${JSON.stringify(formData)}&&mer_id=${mer_id}`)">
|
||
<view style="margin-right: 10rpx;line-height: 25rpx;">{{sets?"已设置":""}}
|
||
</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
|
||
<view class="" v-if="showSet">
|
||
<view class="" v-for="(item,index) in formData.attrValue.filter(item=> item.is_use==0)">
|
||
<view class="" v-if='formData.attrValue.filter(item=> item.is_use==0).length==1'>
|
||
<u-form-item label="零售价格" label-width="auto" labelPosition="left" border-bottom>
|
||
<view style="font-size: 28rpx;color:#777777 ;width: 100%;text-align: right;">
|
||
{{item.price}}元/{{item.unit_name}}
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item v-if='isWholeSale' label="批发价格" label-width="auto" labelPosition="left"
|
||
border-bottom>
|
||
<view style="font-size: 28rpx;color:#777777 ;width: 100%;text-align: right;">
|
||
{{item.wholesale_price}}元/{{item.wholesale_unit_name}}
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item label="商品库存" label-width="auto" labelPosition="left" border-bottom>
|
||
<view style="font-size: 28rpx;color:#777777 ;width: 100%;text-align: right;">
|
||
{{item.stock}}
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="" v-else>
|
||
<u-form-item :label="item.sku" label-width="350rpx" prop="userInfo.name" ref="item1"
|
||
labelPosition="left" border-bottom>
|
||
<view class="" style="display: flex;justify-content: space-between;width: 100%">
|
||
<view style="font-size: 28rpx;color:#777777 ;">
|
||
零售价
|
||
</view>
|
||
<view style="font-size: 28rpx;color:#777777 ;">
|
||
{{item.price}}元/{{item.unit_name}}
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item label=" " label-width="350rpx" prop="userInfo.name" ref="item1"
|
||
labelPosition="left" border-bottom v-if='isWholeSale'>
|
||
<view class="" style="display: flex;justify-content: space-between;width: 100%">
|
||
<view style="font-size: 28rpx;color:#777777 ;">
|
||
批发价
|
||
</view>
|
||
<view style="font-size: 28rpx;color:#777777 ;">
|
||
{{item.wholesale_price}}元/{{item.wholesale_unit_name}}
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</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 ;">{{storeInfoLength}}/{{300}}</text>
|
||
</u-form-item>
|
||
<u--textarea v-model="formData.store_info" placeholder="货品描述请严格遵循《广告法》规定，避免出现虚假宣传和误导消费者的词语"
|
||
style="background-color: #F9F9F9;height: 166rpx;" :maxlength='300'></u--textarea>
|
||
|
||
<u-line color="#F3F3F3" style="margin: 30rpx 0;"></u-line>
|
||
<u-form-item label="送货方式" labelPosition="left" prop='delivery_way' required>
|
||
<u-checkbox-group v-model="formData.delivery_way" placement="row" slot="right">
|
||
<u-checkbox shape="circle" v-for="(item, index) in checkboxList1" :key="index"
|
||
:label="item.name" :name="item.value" 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-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>
|
||
|
||
<u-picker :show="show" :columns="columns" confirmColor='#33BB3C' @close='show=false' @confirm='choseMedia'
|
||
@cancel='show=false'></u-picker>
|
||
|
||
<view v-if="showVideo" class="video-count">
|
||
<video id="myVideo" class="videoLink" autoplay loop muted
|
||
:src=" isDetail?formData.content.image[videoIndex]: formData.imageList[videoIndex]"></video>
|
||
</view>
|
||
<view class='mask' catchtouchmove="true" :hidden='showVideo==false' @tap="showVideo=false"></view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
Toast,
|
||
Modal
|
||
} from "@/libs/uniApi.js";
|
||
import {
|
||
HTTP_REQUEST_URL,
|
||
TOKENNAME
|
||
} from '@/config/app.js';
|
||
import store from 'store';
|
||
import {
|
||
productCreate,
|
||
productUpdate,
|
||
productDetail
|
||
|
||
} from '@/api/product.js';
|
||
import uploadImgVideo from "../addGood/components/uploadImgVideo.vue"
|
||
import form from "../../../uni_modules/uview-ui/libs/config/props/form";
|
||
export default {
|
||
components: {
|
||
uploadImgVideo,
|
||
},
|
||
data() {
|
||
return {
|
||
coverUrl: '?spm=a2c4e.11153940.blogcont573781.6.c1032027sQ46VG&x-oss-process=video/snapshot,t_1000,m_fast',
|
||
mode: 'add',
|
||
isDetail: false,
|
||
columns: [
|
||
['图片', '视频', ]
|
||
],
|
||
sets: false,
|
||
showVideo: false,
|
||
vidioTypeList: ['mp4', 'avi', 'mov', 'wmv', 'mkv', 'flv', 'mpeg', '3gp', 'webm'],
|
||
videoIndex: 0,
|
||
upload_max: 100,
|
||
uploadUrl: `${HTTP_REQUEST_URL}/api/upload/video`,
|
||
show: false, //选择图片还是视屏
|
||
showSet: false,
|
||
delivery_way: [],
|
||
isWholeSale: false,
|
||
formData: {
|
||
store_info: "",
|
||
product_id: "",
|
||
"store_name": "",
|
||
"imageList": [
|
||
|
||
],
|
||
attr: [{
|
||
detail: [{
|
||
attr: 'name'
|
||
}],
|
||
value: " "
|
||
}, ],
|
||
"attrValue": [{
|
||
detail: {
|
||
|
||
},
|
||
"price": "",
|
||
"unit_name": "",
|
||
"wholesale_unit_name": "",
|
||
"wholesale_price": '',
|
||
"cost": "",
|
||
"stock": "",
|
||
sku: '',
|
||
"ot_price": "",
|
||
"procure_price": "",
|
||
"bar_code": "",
|
||
"weight": "",
|
||
"extension_one": "",
|
||
"extension_two": "",
|
||
uuid: "",
|
||
volume: "",
|
||
"is_use": 0,
|
||
}],
|
||
"cate_name": "",
|
||
"unit_name": "",
|
||
"cate_id": '',
|
||
"mer_cate_id": [
|
||
|
||
],
|
||
"mer_cate_name": "",
|
||
"spec_type": "",
|
||
|
||
"specifica": "",
|
||
"delivery_way": [
|
||
|
||
],
|
||
"delivery_free": "1",
|
||
"temp_id": "",
|
||
"tempName": "",
|
||
"once_min_count": "",
|
||
"image": "",
|
||
"slider_image": [
|
||
""
|
||
],
|
||
"is_good": 0,
|
||
"is_gift_bag": 0,
|
||
"sort": "",
|
||
"once_count": "",
|
||
"video_link": "",
|
||
"content": {
|
||
"title": "",
|
||
"image": []
|
||
},
|
||
"stock": "",
|
||
product_attribute: {
|
||
address: "",
|
||
leval: "",
|
||
pack: "",
|
||
attr: [{
|
||
label: "",
|
||
value: ''
|
||
}]
|
||
}
|
||
|
||
},
|
||
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: '到店核销',
|
||
value: '1',
|
||
},
|
||
{
|
||
name: '快递配送',
|
||
value: '2',
|
||
},
|
||
|
||
],
|
||
attrRules: {
|
||
price: '单价不能为空',
|
||
unit_name: '计量单位不能为空',
|
||
wholesale_price: '批发价格不能为空',
|
||
wholesale_unit_name: '批发单位不能为空',
|
||
stock: '库存不能为空'
|
||
},
|
||
rules: {
|
||
"formData.imageList": [{
|
||
validator: (rule, value, callback) => {
|
||
return this.formData.imageList.length >= 2
|
||
},
|
||
message: '请至少上传2张图片',
|
||
trigger: ['change', 'blur'],
|
||
}],
|
||
"formData.attrValue": [{
|
||
validator: (rule, value, callback) => {
|
||
if (!this.isWholeSale) {
|
||
delete this.attrRules.wholesale_unit_name
|
||
delete this.attrRules.wholesale_price
|
||
}
|
||
let errList = []
|
||
this.formData.attrValue.forEach(item => {
|
||
for (let key in this.attrRules) {
|
||
if (!item[key]) {
|
||
errList.push(this.rules[key])
|
||
}
|
||
}
|
||
})
|
||
return errList.length == 0
|
||
},
|
||
message: '请填写完整商品规格',
|
||
trigger: ['change', 'blur'],
|
||
}],
|
||
|
||
'store_name': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写商品标题',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'cate_name': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写商品分类',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'delivery_way': {
|
||
validator: (rule, value, callback) => {
|
||
return this.formData.delivery_way.length > 0
|
||
},
|
||
required: true,
|
||
message: '请选择送货方式',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'formData.content.image': {
|
||
validator: (rule, value, callback) => {
|
||
return this.formData.content.image.length > 0
|
||
},
|
||
required: true,
|
||
message: '请上传商品详情图',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
|
||
|
||
},
|
||
radio: '',
|
||
switchVal: false
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
stroeNameLength() {
|
||
return this.formData.store_name?.length || 0
|
||
},
|
||
storeInfoLength() {
|
||
return this.formData.store_info?.length || 0
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
test(index) {
|
||
// this.formData.imageList.splice(index, 1)
|
||
console.log(this.formData, index)
|
||
},
|
||
preViewImg(url) {
|
||
let that = this
|
||
uni.previewImage({
|
||
urls: [url],
|
||
});
|
||
|
||
},
|
||
deleteImage(index) {
|
||
// this.addGoodsSecoundData.video_link = '';
|
||
},
|
||
videoshow(index) {
|
||
this.videoIndex = index
|
||
this.showVideo = true
|
||
this.videoContext = uni.createVideoContext('myVideo', this);
|
||
this.$nextTick(() => {
|
||
this.videoContext.play();
|
||
})
|
||
},
|
||
getSuffix(url) {
|
||
const str = url;
|
||
const lastIndex = str.lastIndexOf(".");
|
||
if (lastIndex !== -1) {
|
||
const extension = str.substring(lastIndex + 1);
|
||
return extension
|
||
} else {
|
||
return 'asdasdsadsd'
|
||
}
|
||
},
|
||
choseMedia(e) {
|
||
console.log(e.value)
|
||
this.show = false
|
||
if (e.value[0] == '图片') {
|
||
this.handleChooseImage()
|
||
|
||
} else {
|
||
this.uploadVideo()
|
||
|
||
}
|
||
|
||
},
|
||
|
||
// 选择图片
|
||
handleChooseImage() {
|
||
let that = this;
|
||
that.$util.uploadImages({
|
||
count: 6,
|
||
url: 'upload/image'
|
||
}, function(res) {
|
||
if (that.isDetail) {
|
||
that.formData.content.image.push(res.data.path.replace(
|
||
/\\/g, ""));
|
||
|
||
} else {
|
||
that.$set(that.formData.imageList, that.formData.imageList.length, res.data.path.replace(
|
||
/\\/g,
|
||
""));
|
||
|
||
}
|
||
|
||
// that.formData.imageList.push(res.data.path);
|
||
});
|
||
},
|
||
// 上传视频
|
||
uploadVideo() {
|
||
let that = this
|
||
uni.chooseVideo({
|
||
sourceType: ['camera', 'album'],
|
||
success: res => {
|
||
uni.showLoading({
|
||
title: '正在上传中。。。'
|
||
});
|
||
if (Math.ceil(res.size / 1024) < this.upload_max * 1024) {
|
||
uni.uploadFile({
|
||
url: this.uploadUrl, //仅为示例，非真实的接口地址
|
||
filePath: res.tempFilePath,
|
||
name: 'file',
|
||
header: {
|
||
// #ifdef MP
|
||
'Content-Type': 'multipart/form-data',
|
||
// #endif
|
||
[TOKENNAME]: 'Bearer ' + store.state.app.token
|
||
},
|
||
success: uploadFileRes => {
|
||
uni.hideLoading();
|
||
let data = JSON.parse(uploadFileRes.data);
|
||
if (that.isDetail) {
|
||
that.formData.content.image.push(data.data.src.replace(
|
||
/\\/g, ""));
|
||
|
||
} else {
|
||
that.formData.imageList.push(data.data.src.replace(/\\/g,
|
||
""))
|
||
}
|
||
|
||
|
||
},
|
||
complete: a => {
|
||
// console.log(a);
|
||
}
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `视频超出限制${this.upload_max}MB,已过滤`
|
||
});
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
}
|
||
});
|
||
},
|
||
|
||
isSet(obj) {
|
||
for (let key in obj) {
|
||
if (typeof obj[key] == 'object') this.isSet(obj[key])
|
||
else {
|
||
if (Boolean(obj[key])) return 'true12';
|
||
}
|
||
}
|
||
|
||
},
|
||
isSet2(obj) {
|
||
let lists = ['unit_name', 'price', 'wholesale_price', 'stock']
|
||
lists.forEach(item => {
|
||
if (Boolean(this.formData.attrValue[0][item])) {
|
||
this.sets = true
|
||
}
|
||
})
|
||
|
||
|
||
|
||
},
|
||
|
||
|
||
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)
|
||
// },
|
||
getAttr(object) {
|
||
this.formData.product_attribute = object
|
||
},
|
||
getAttrValue(object) {
|
||
this.formData.attrValue = object
|
||
},
|
||
async handAdd() {
|
||
let that = this
|
||
let data = uni.$u.deepClone(this.formData)
|
||
data.image = data.imageList.find(item => {
|
||
return !this.vidioTypeList.includes(this.getSuffix(item))
|
||
})
|
||
data.slider_image = this.formData.imageList.filter((item, index) => index != 0)
|
||
that.formData.product_id ?
|
||
productUpdate(that.mer_id, that.formData.product_id, data)
|
||
.then(res => {
|
||
Modal('提交成功', '点击确定，前往商品列表页面').then(() => {
|
||
if (this.import == 1) {
|
||
uni.$emit('importAttrValueOK', this.setFormData.import_id);
|
||
uni.navigateBack();
|
||
} else {
|
||
uni.redirectTo({
|
||
url: `/pages/product/list/index?mer_id=${that.mer_id}&type=6`
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.navigateBack()
|
||
})
|
||
})
|
||
.catch(rej => {
|
||
// Toast(rej);
|
||
}) :
|
||
productCreate(that.mer_id, data)
|
||
.then(res => {
|
||
Modal('提交成功', '点击确定，前往商品列表页面').then(() => {
|
||
if (this.import == 1) {
|
||
uni.$emit('importAttrValueOK', this.setFormData.import_id);
|
||
uni.redirectTo({
|
||
url: `/pages/product/list/index?mer_id=${this.mer_id}&type=6`
|
||
})
|
||
} else {
|
||
uni.redirectTo({
|
||
url: `/pages/product/list/index?mer_id=${this.mer_id}&type=6`
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.redirectTo({
|
||
url: `/pages/product/list/index?mer_id=${this.mer_id}&type=6`
|
||
})
|
||
})
|
||
})
|
||
.catch(rej => {
|
||
// Toast(rej);
|
||
})
|
||
},
|
||
submit() {
|
||
console.log(this.formData)
|
||
this.$refs.formData.validate().then(res => {
|
||
this.handAdd()
|
||
}).catch(errors => {
|
||
// console.log(errors)
|
||
uni.$u.toast(errors[0].message)
|
||
})
|
||
|
||
},
|
||
oldToNew(formData) {
|
||
if (formData.attr.length <= 1) return
|
||
formData.attr.splice(1, 999)
|
||
formData.attr[0].value = ' '
|
||
formData.attr[0].detail = formData.attrValue.map(item => item.sku)
|
||
|
||
formData.attrValue.forEach((item, index) => {
|
||
item.detail = {}
|
||
item.detail[' '] = formData.attr[0].detail[index]
|
||
})
|
||
this.formData = formData
|
||
},
|
||
|
||
|
||
initFormData(option) {
|
||
this.isWholeSale = this.$store.state.app.userInfo?.mer_info?.wholesale == 2;
|
||
this.mer_id = option.mer_id
|
||
if (option.formData) {
|
||
this.formData = JSON.parse(option.formData)
|
||
}
|
||
if (option.goodsInfo) {
|
||
let goods = JSON.parse(option.goodsInfo)
|
||
console.log(goods)
|
||
this.formData.store_name = goods.store_name
|
||
this.formData.imageList = [goods.image, ...goods.slider_image]
|
||
console.log(this.formData)
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
onLoad(option) {
|
||
// let that = this
|
||
this.initFormData(option)
|
||
this.showSet = option.showSet ? JSON.parse(option.showSet) : this.showSet
|
||
this.isSet2()
|
||
this.formData.delivery_way = this.$store.state.app.userInfo?.mer_info.delivery_way.split(',')
|
||
if (this.formData.delivery_way.length == 1) {
|
||
this.checkboxList1 = this.checkboxList1.filter(item => {
|
||
return item.value == this.formData.delivery_free[0]
|
||
})
|
||
}
|
||
|
||
if (option.product_id) {
|
||
this.formData.product_id = option.product_id
|
||
this.mode = 'edit'
|
||
this.showSet = true
|
||
productDetail(option.mer_id, option.product_id).then(res => {
|
||
Object.assign(this.formData, res.data)
|
||
this.$set(this.formData, "imageList", res.data.image_list)
|
||
this.formData.product_attribute = JSON.parse(this.formData.product_attribute)
|
||
this.formData.cate_name = this.formData.storeCategory.cate_name
|
||
this.formData.cate_id = this.formData.storeCategory.store_category_id
|
||
delete this.formData.image_list
|
||
if (!this.formData.imageList) this.formData.imageList = []
|
||
this.oldToNew(this.formData)
|
||
if (this.formData.delivery_free.length == 1) {
|
||
this.checkboxList1 = this.checkboxList1.filter(item => {
|
||
return item.value == this.formData.delivery_free[0]
|
||
})
|
||
}
|
||
console.log(this.formData, 'formDATA')
|
||
})
|
||
}
|
||
|
||
|
||
console.log(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;
|
||
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;
|
||
overflow: hidden;
|
||
|
||
}
|
||
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
|
||
.jiao {
|
||
image {
|
||
position: absolute;
|
||
top: -14rpx;
|
||
right: -14rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
padding: 8rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
video {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
}
|
||
}
|
||
|
||
.preview_video {
|
||
position: absolute;
|
||
background-color: red;
|
||
|
||
}
|
||
|
||
.content_list_video {
|
||
min-height: 154rpx;
|
||
padding: 23rpx 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.content_list_video_title {
|
||
/* padding-top: 10rpx; */
|
||
}
|
||
|
||
}
|
||
|
||
.video-count {
|
||
position: fixed;
|
||
width: 600rpx;
|
||
height: 500rpx;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-left: -300rpx;
|
||
margin-top: -250rpx;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.videoLink {
|
||
width: 600rpx;
|
||
height: 500rpx;
|
||
}
|
||
}
|
||
|
||
.video-text {
|
||
color: red;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
/* position: absolute; */
|
||
|
||
}
|
||
|
||
.image-play-icon {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
</style> |