211 lines
5.6 KiB
Vue
211 lines
5.6 KiB
Vue
<template>
|
||
<view class='content'>
|
||
|
||
<u--form :model="model1" :rules="rules" ref="uForm" labelPosition="top"
|
||
:labelStyle="{fontSize:'32rpx',color:'#444444'}" labelWidth='120'>
|
||
<view class="good-baseInfo">
|
||
<u-form-item label="商品标题" prop="userInfo.name" ref="item1">
|
||
<u--input placeholder="建议描述产品品牌、名称" v-model="text"></u--input>
|
||
</u-form-item>
|
||
<u-form-item class='formItem' label="商品主图" prop="userInfo.name" ref="item1">
|
||
<view class="">
|
||
<view style="color: #E18C34;font-size: 24rpx;margin-bottom: 30rpx;">
|
||
上传时应注重真实性、清晰度
|
||
</view>
|
||
<view class="">
|
||
<uploadImgVideo />
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item label="商品细节图" prop="userInfo.name" ref="item1">
|
||
<view class="">
|
||
<view style="color: #E18C34;font-size: 24rpx;margin-bottom: 30rpx;">
|
||
请上传突出商品卖点细节图片
|
||
</view>
|
||
<view class="">
|
||
<uploadImgVideo />
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class='tips'>
|
||
商品图片上传时应注重真实性、清晰度和美观性，在平台上的展示效果至关重要。确保商品能够得到有效的展示和推广。
|
||
</view>
|
||
<view class="label-cls">
|
||
<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/goodsType')">
|
||
<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</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="description">
|
||
规格与价格
|
||
</view>
|
||
<view class="label-cls">
|
||
<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/goodsPrice')">
|
||
<view style="margin-right: 10rpx;line-height: 25rpx;">请设置</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="description">
|
||
服务与承诺
|
||
</view>
|
||
<view class="label-cls">
|
||
<u-form-item label="商品详细描述" prop="userInfo.name" ref="item1">
|
||
<u--textarea v-model="value1" placeholder="货品描述请严格遵循《广告法》规定，避免出
|
||
现虚假宣传和误导消费者的词语" count border="bottom" style="background-color:#F1F1F1;border-radius: 20rpx;"></u--textarea>
|
||
</u-form-item>
|
||
<u-line color="#F3F3F3"></u-line>
|
||
<u-form-item label="送货方式" labelPosition="left">
|
||
<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 type="primary" shape="circle" text="确认发布"></u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uploadImgVideo from "../addGood/components/uploadImgVideo.vue"
|
||
export default {
|
||
components: {
|
||
uploadImgVideo,
|
||
},
|
||
data() {
|
||
return {
|
||
showSex: false,
|
||
model1: {
|
||
userInfo: {
|
||
name: '',
|
||
sex: '',
|
||
},
|
||
},
|
||
range: [{
|
||
value: 0,
|
||
text: "篮球"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "足球"
|
||
},
|
||
{
|
||
value: 2,
|
||
text: "游泳"
|
||
},
|
||
],
|
||
text: "",
|
||
text1: "",
|
||
value1: "",
|
||
checkboxValue1: [],
|
||
checkboxList1: [{
|
||
name: '到店核销',
|
||
},
|
||
{
|
||
name: '快递配送',
|
||
},
|
||
|
||
],
|
||
rules: {
|
||
// 'userInfo.name': {
|
||
// type: 'string',
|
||
// required: true,
|
||
// message: '请填写姓名',
|
||
// trigger: ['blur', 'change']
|
||
// },
|
||
// 'userInfo.sex': {
|
||
// type: 'string',
|
||
// max: 1,
|
||
// required: true,
|
||
// message: '请选择男或女',
|
||
// trigger: ['blur', 'change']
|
||
// },
|
||
},
|
||
radio: '',
|
||
switchVal: false
|
||
};
|
||
},
|
||
methods: {
|
||
sexSelect(e) {
|
||
this.model1.userInfo.sex = e.name
|
||
this.$refs.uForm.validateField('userInfo.sex')
|
||
},
|
||
navgo(url) {
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss'>
|
||
.content {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #F1F1F1;
|
||
box-sizing: border-box;
|
||
padding-bottom: 280rpx;
|
||
font-family: PingFangFamily;
|
||
|
||
|
||
.good-baseInfo {
|
||
background-color: white;
|
||
padding: 30rpx 30rpx 10rpx 30rpx;
|
||
|
||
}
|
||
|
||
.tips {
|
||
color: #E18C34;
|
||
font-size: 24rpx;
|
||
background-color: #FFF1E9;
|
||
padding: 26rpx 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.label-cls {
|
||
background-color: white;
|
||
padding: 8rpx 30rpx;
|
||
}
|
||
|
||
.description {
|
||
background-color: #F1F1F1;
|
||
padding: 30rpx 26rpx;
|
||
font-size: 28rpx;
|
||
color: #777777;
|
||
}
|
||
|
||
.submit-btn {
|
||
position: fixed;
|
||
bottom: 86rpx;
|
||
width: 750rpx;
|
||
padding: 20rpx 30rpx;
|
||
background-color: white;
|
||
z-index: 10;
|
||
box-shadow: 0 0 0.2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
}
|
||
</style> |