469 lines
15 KiB
Vue
469 lines
15 KiB
Vue
<template>
|
||
<view>
|
||
<view class="list">
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
商品标题：
|
||
</text>
|
||
<input type="text" placeholder="必填" v-model="form.titleName" class="flex-grow input">
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
商品编号：
|
||
</text>
|
||
<input type="text" placeholder="选填" v-model="form.goodsNumber" class="flex-grow input">
|
||
</view>
|
||
<!-- <view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
供货价格：
|
||
</text>
|
||
<input type="number" placeholder="0" v-model="form.buying" class="flex-grow input">
|
||
</view> -->
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
零售价格：
|
||
</text>
|
||
<input type="number" placeholder="0" v-model="form.wholesalePrice" class="flex-grow input">
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
平台分类：
|
||
</text>
|
||
<view class="flex flex-align-center color-b9" @click="visible = true">
|
||
<text>{{className||"请选择"}}</text>
|
||
<text class="iconfont font40"></text>
|
||
</view>
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
商品分类：
|
||
</text>
|
||
<view class="flex flex-align-center color-b9" @click="selectClass">
|
||
<text>{{classData.name || "请选择"}}</text>
|
||
<text class="iconfont font40"></text>
|
||
</view>
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
是否新品：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.isNewProducts === 2 ?true:false" @change="switchChange($event, 'isNewProducts')" class="switch" />
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
商品类型：
|
||
</text>
|
||
<picker class="flex-grow flex flex-space-end" mode="selector" range-key="name" :value="goodsTypeIndex" :range="goodsTypeList" @change="pickerChange">
|
||
<view class="flex flex-align-center color-b9">
|
||
<text v-if="goodsTypeList.length > 0">{{goodsTypeList[goodsTypeIndex].name}}</text>
|
||
<text class="iconfont font40"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
商品分区：
|
||
</text>
|
||
<picker class="flex-grow flex flex-space-end" mode="selector" range-key="label" :value="goodsAreaIndex" :range="goodsArea" @change="pickerChangeArea">
|
||
<view class="flex flex-align-center color-b9">
|
||
<text v-if="goodsArea.length > 0">{{ goodsAreaIndex != null ? goodsArea[goodsAreaIndex].label:'请选择商品分区'}}</text>
|
||
<text class="iconfont font40"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<!-- 商品类型为精品商品时不显示 -->
|
||
<block v-if="goodsTypeIndex !== 1 && false">
|
||
<view class="list-item">
|
||
<text>
|
||
<text class="color-red">*</text>
|
||
积分赠送比例：
|
||
</text>
|
||
<input type="number" placeholder="必填" :maxlength="4" v-model="form.bonusIntegral" class="flex-grow input">
|
||
</view>
|
||
<view class="list-item" style="height: auto;">
|
||
<text class="font26 color-b9">
|
||
1、积分赠送比例可最低设置为0，不赠送任何积分。
|
||
2、如设置赠送积分为1%，该商品价格为100元，则用户获得1积分，商家实际收入为99元，赠送的积分与商品金额对等。
|
||
</text>
|
||
</view>
|
||
<view class="list-item">
|
||
<text>
|
||
<text class="color-red">*</text>
|
||
商品分润比例：
|
||
</text>
|
||
<input type="number" placeholder="必填" :maxlength="4" v-model="form.bonusProfit" style="width: 200rpx;" class="flex-grow input">
|
||
<text class="font26 color-b9">最低：{{profit}}</text>
|
||
</view>
|
||
<view class="list-item" style="height: auto;">
|
||
<text class="font26 color-b9">
|
||
1、如需平台配送，则该设置的分润内的（{{distributionFee}}%）为平台配送员的配送费（如商品价格为100元，分润设置1%，配送费为1元的{{distributionFee}}%，就是{{parseFloat(distributionFee)/100}}元），剩余的为平台佣金和平台的分销奖励。
|
||
2、如不需要平台配送，则该分润全部为平台佣金和平台的分销奖励。
|
||
</text>
|
||
</view>
|
||
</block>
|
||
<!-- 普通商品 -->
|
||
<block v-if="goodsTypeIndex === 0">
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
组合支付：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.paymentCombination === 1 ?true:false" @change="switchChange($event, 'paymentCombination')" class="switch" />
|
||
</view>
|
||
<view class="list-item bor-no" v-if="form.paymentCombination === 1">
|
||
<block>
|
||
<text style="width: 180rpx;">
|
||
人民币：
|
||
</text>
|
||
<input type="number" :maxlength="3" placeholder="%" @input="onInput" v-model="form.paymentRmb" class="input" style="width: 200rpx;">%
|
||
</block>
|
||
<block>
|
||
<text style="width: 220rpx;">
|
||
绿色积分：
|
||
</text>
|
||
<input type="number" :maxlength="3" placeholder="自动计算" disabled v-model="form.paymentIntegral" class="input" style="width: 160rpx;">%
|
||
</block>
|
||
</view>
|
||
<view class="list-item" style="height: auto;" v-if="form.paymentCombination === 1">
|
||
<!-- <text class="font26 color-b9">
|
||
当前绿色积分价格：1积分={{greenPrice}}元
|
||
如：人民币90%，积分10%，商品价格为100元，用户支付90元+10积分，商家实际收益为：90元+{{parseFloat(pointCombinationPaymentMerchantIncome)*10}}元。
|
||
</text> -->
|
||
<text class="font26 color-b9">
|
||
当前绿色积分价格：1绿色积分={{greenPrice}}元
|
||
如：单价1000元如果90%则需要支付价值100元的绿色积分{{ greenNum }}个
|
||
</text>
|
||
</view>
|
||
|
||
</block>
|
||
<view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
打赏比例：
|
||
</text>
|
||
<input @blur="getRatio" type="number" :placeholder="'请输入打赏比例' + rewardSection[0] +'-'+rewardSection[1]" v-model="form.rewardRatio" class="flex-grow input">%
|
||
</view>
|
||
<!-- 精品商品 -->
|
||
<view class="list-item bor-no" v-if="goodsTypeIndex === 1">
|
||
<text>
|
||
<text class="color-red">*</text>
|
||
进货实付比例：
|
||
</text>
|
||
<input type="number" placeholder="必填" :maxlength="3" v-model="form.boutiqueBuying" class="flex-grow input">%
|
||
</view>
|
||
<view class="list-item" style="height: auto;" v-if="goodsTypeIndex === 1">
|
||
<text class="font26 color-b9">
|
||
配送员进货实付：￥{{parseFloat(form.wholesalePrice)*(parseFloat(form.boutiqueBuying)/100)}}
|
||
如：商品价格为100元，配送员进货该商品仅需要支付商品价格的{{form.boutiqueBuying}}%。
|
||
配送员进货付款的金额全部都归商家收入。
|
||
</text>
|
||
</view>
|
||
<!-- 限时秒杀 -->
|
||
<view class="list-item bor-no" v-if="goodsTypeIndex === 3">
|
||
<text>
|
||
<text class="color-red">*</text>
|
||
结束时间：
|
||
</text>
|
||
<view class="flex flex-grow flex-space-end" @click="timeVisible = true">
|
||
<view class="flex flex-align-center color-b9">
|
||
<text>{{endTime || "请选择"}}</text>
|
||
<text class="iconfont font40"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 拼团 -->
|
||
<view class="list-item bor-no" v-if="goodsTypeIndex === 5">
|
||
<text>
|
||
<text class="color-red">*</text>
|
||
拼团人数：
|
||
</text>
|
||
<input type="number" placeholder="2人起,最多10人" :maxlength="2" v-model="form.groupNumber" class="flex-grow input">
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
<button type="primary" class="bg-base item" @click="next">下一步，填写商品规格</button>
|
||
</view>
|
||
|
||
<!-- 分类 -->
|
||
<w-picker
|
||
:visible.sync="visible"
|
||
ref="mpvueCityPicker"
|
||
mode="linkage"
|
||
:level="3"
|
||
:options="newClassList"
|
||
@confirm="onConfirm"
|
||
themeColor="#3a2397"
|
||
:default-props="{label:'name',value:'id',children:'children'}"
|
||
></w-picker>
|
||
|
||
<!-- 秒杀到期时间 -->
|
||
<w-picker
|
||
:visible.sync="timeVisible"
|
||
mode="date"
|
||
:value="endTime"
|
||
:current="true"
|
||
fields="minute"
|
||
@confirm="endTimeConfirm($event)"
|
||
:disabled-after="false"
|
||
themeColor="#3a2397"
|
||
ref="date"
|
||
></w-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import url from "@/common/http/url.js"
|
||
import imToods from "@/common/im/imTools.js"
|
||
import selectOptions from "@/common/utils/selectOptions.js"
|
||
import wPicker from "@/components/w-picker/w-picker.vue"
|
||
import { calcFn } from '@/utils/calc.js'
|
||
export default{
|
||
components: { wPicker },
|
||
props:{
|
||
form: {
|
||
default: {}
|
||
},
|
||
classData: {
|
||
default: {}
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
timeVisible: false,
|
||
visible: false,
|
||
classList: [],
|
||
newClassList: [],
|
||
className: "",
|
||
profit: 0,
|
||
goodsTypeList: [],
|
||
goodsTypeIndex: 0,
|
||
goodsArea: [],
|
||
goodsAreaIndex: null,
|
||
endTime: "",
|
||
distributionFee: "",
|
||
pointCombinationPaymentMerchantIncome: "",
|
||
greenPrice: null,
|
||
greenNum: 0,
|
||
rewardSection: []
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化商品类型
|
||
let goodsTypeList = JSON.parse(JSON.stringify(selectOptions.goodsTypeList))
|
||
goodsTypeList.splice(2, 1)
|
||
this.form.qvyu
|
||
this.goodsTypeList = goodsTypeList
|
||
// this.goodsArea = JSON.parse(JSON.stringify(selectOptions.goodsArea))
|
||
this.$http("GET", url.store.getGoodsArea).then(({ code, data}) => {
|
||
if (code == 200) this.goodsArea = data;
|
||
})
|
||
this.$http("GET", url.goods.getGoodsClass).then(res =>{
|
||
this.classList = res.data
|
||
let newClassList = filterArray(res.data, 0)
|
||
console.log('newClassList====', newClassList)
|
||
this.newClassList = newClassList
|
||
if (this.form.categoryThreeId) {
|
||
this.classList.map(v=>{
|
||
if (v.id === this.form.categoryThreeId) {
|
||
this.className = v.name
|
||
}
|
||
})
|
||
}
|
||
})
|
||
// 获取分润比例
|
||
this.$http("GET", url.store.minBonusProfit).then(res=>{
|
||
this.profit = res.data
|
||
})
|
||
// 获取配送员佣金比例
|
||
this.$http("GET", url.common.distributionFee).then(res=>{
|
||
this.distributionFee = res.data.unBoutique
|
||
})
|
||
// 获取积分组合支付时商家实际收入比例
|
||
this.$http("GET", url.common.pointCombinationPaymentMerchantIncome).then(res=>{
|
||
this.pointCombinationPaymentMerchantIncome = res.data
|
||
})
|
||
this.getGreenPrice();
|
||
this.getRewardSection()
|
||
},
|
||
methods:{
|
||
getRatio (e) {
|
||
let { value } = e.detail;
|
||
value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
|
||
let { rewardSection } = this.$data;
|
||
console.log(rewardSection)
|
||
console.log(value > Number(rewardSection[1]));
|
||
console.log(value < Number(rewardSection[0]));
|
||
// console.log('222', value < rewardSection[0] && value != 0)
|
||
if (value > Number(rewardSection[1]) || (value < Number(rewardSection[0]) && value != 0)) {
|
||
// this.$showToast({
|
||
// text: ,
|
||
// duration: 2000
|
||
// })
|
||
console.log('=======')
|
||
this.$msg(`打赏比例区间:${rewardSection[0]}-${rewardSection[1]}`)
|
||
value = ''
|
||
}
|
||
this.$nextTick(() => {
|
||
this.form.rewardRatio = value;
|
||
})
|
||
// value =
|
||
},
|
||
getRewardSection () {
|
||
this.$http("GET", url.user.getRewardSection).then((res) => {
|
||
let { code, data } = res;
|
||
if (code == 200) {
|
||
this.rewardSection = data.split("-");
|
||
|
||
}
|
||
})
|
||
},
|
||
getGreenPrice () {
|
||
this.$http("GET", url.user.getGreenPrice).then(res=>{
|
||
let { code, data } = res;
|
||
if (code == 200) {
|
||
this.greenPrice = data;
|
||
this.greenNum = calcFn.divide(100, data)
|
||
}
|
||
})
|
||
},
|
||
onConfirm(e){
|
||
console.log(e)
|
||
this.form.categoryOneId = e.value[0]
|
||
this.form.categoryTwoId = e.value[1]
|
||
this.form.categoryThreeId = e.value[2]
|
||
this.className = e.obj.col3.name
|
||
},
|
||
endTimeConfirm(e){
|
||
console.log(e)
|
||
this.endTime = e.result
|
||
this.form.dueDateTime = imToods.dateTimeToTimeStamp(e.value) * 1000
|
||
},
|
||
switchChange(e, name){
|
||
let value = e.detail.value ? 1 : 2
|
||
if (name === "isNewProducts") { // 是否是新品，1=不是，2=是
|
||
value = e.detail.value ? 2 : 1
|
||
}
|
||
this.form[name] = value
|
||
this.$forceUpdate()
|
||
},
|
||
onInput(e){
|
||
console.log("....e...", e.detail.value)
|
||
let number = Number(e.detail.value)
|
||
console.log("。。。number...", number)
|
||
if (number > 100) {
|
||
number = 100
|
||
this.form.paymentRmb = "100"
|
||
}
|
||
this.form.paymentIntegral = 100 - number
|
||
this.$forceUpdate()
|
||
},
|
||
pickerChange(e){
|
||
this.goodsTypeIndex = e.detail.value
|
||
this.form.goodsType = this.goodsTypeList[this.goodsTypeIndex].value
|
||
// 精品商品时默认勾选平台配送
|
||
this.form.deliveryPlatform = this.form.goodsType === 2 ? 1 : 2
|
||
this.$emit("edit", this.form)
|
||
},
|
||
pickerChangeArea (e) {
|
||
this.goodsAreaIndex = e.detail.value
|
||
this.form.qvyu = this.goodsArea[this.goodsAreaIndex].value
|
||
// 精品商品时默认勾选平台配送
|
||
this.$emit("edit", this.form)
|
||
},
|
||
selectClass(){
|
||
this.$navigateTo("/pages/merchants/class/index?select=true")
|
||
},
|
||
next(){
|
||
console.log('next', this.form);
|
||
if (!this.form.titleName) return this.$msg("请输入商品标题");
|
||
// if (!this.form.buying) return this.$msg("请输入供货价格");
|
||
// if (this.form.buying <= 0) return this.$msg("请输入正确的供货价格");
|
||
if (!this.form.wholesalePrice) return this.$msg("请输入零售价格");
|
||
if (this.form.wholesalePrice <= 0) return this.$msg("请输入正确的零售价格");
|
||
// if (eval(this.form.wholesalePrice) < eval(this.form.buying)) return this.$msg("零售价格不能小于供货价格");
|
||
if (!this.className) return this.$msg("请选择平台分类");
|
||
if (!this.classData.name) return this.$msg("请选择商品分类");
|
||
if (this.form.paymentCombination == 1 && !this.form.paymentRmb) return this.$msg("请输入组合支付比例");
|
||
if (!this.form.qvyu) return this.$msg("请选择商品分区");
|
||
if (!this.form.rewardRatio) return this.$msg("请输入打赏比例");
|
||
if (this.form.rewardRatio > Number(this.rewardSection[1]) || (this.form.rewardRatio < Number(this.rewardSection[0]) && this.form.rewardRatio != 0)) {
|
||
this.$msg(`打赏比例区间:${rewardSection[0]}-${rewardSection[1]}`)
|
||
}
|
||
this.$emit("next", this.form)
|
||
}
|
||
}
|
||
}
|
||
|
||
function filterArray(data, pid) {
|
||
var tree = [];
|
||
var temp;
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (data[i].pid === pid) {
|
||
var obj = data[i];
|
||
temp = filterArray(data, data[i].id);
|
||
if (temp.length > 0) {
|
||
obj.children = temp;
|
||
} else {
|
||
obj.children = []
|
||
}
|
||
tree.push(obj);
|
||
}
|
||
}
|
||
return tree;
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.list{
|
||
border-radius: 10rpx;
|
||
background-color: #FFFFFF;
|
||
padding: 0rpx 30rpx;
|
||
&-item{
|
||
border-bottom: 2rpx solid #EEEEEE;
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 34rpx;
|
||
.label{
|
||
width: 200rpx;
|
||
}
|
||
.input{
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
.tips{
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
height: auto;
|
||
border: none;
|
||
padding: 36rpx 0;
|
||
.name{
|
||
font-size: 26rpx;
|
||
margin-left: 20rpx;
|
||
line-height: 40rpx;
|
||
color: #999999;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.btn{
|
||
margin-top: 80rpx;
|
||
padding-bottom: 50rpx;
|
||
.item{
|
||
border-radius: 50rpx;
|
||
width: 80%;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
</style>
|