shop-applet/pages/commissionedSales/addDelegation/index.vue

534 lines
9.9 KiB
Vue

<template>
<view class="content">
<form @submit="formSubmit" report-submit='true'>
<view class="release_content">
<view class="release_item">
<view class="release_item-one">
<view class="item-one">
被委托商家
</view>
<e-select v-model="formData.entrust_mer_id" :value='formData.entrust_mer_id' :options="options1" @change="change1"
placeholder="选择选项"></e-select>
</view>
<view class="release_item-one">
<view class="item-one">
委托周期
</view>
<view class="">
<input type="number" v-model="formData.entrust_day" />
</view>
</view>
<view class='item acea-row row-between-wrapper'>
<view class='name'><text class="iconfont icon-baobeilianjie"></text>添加产品({{productList.length}})
</view>
<view class="select">
<view class="select_count" @click.stop="addProduct">
<text v-if="productList.length == 0" class="text">选择产品</text>
<view v-else class="text">
<image class="image" v-for="(item,index) in productList" :key="index"
:src="item.image"></image>
</view>
<text class="iconfont icon-xiangyou"></text>
</view>
</view>
</view>
<view class="content_center-one" v-for="(item,i) in productList" :key="i">
<view class="center-one">
<view class="center-one-img">
<image :src="item.image||''" mode="aspectFit"></image>
</view>
<view class="center-one-txt">
<view class="one-txta">
{{item.store_name}}
</view>
<view class="one-txtb">
<view class="">
委托价:¥<span>{{item.price}}</span>
</view>
<view class="">
数量:{{item.number}}
</view>
</view>
</view>
</view>
</view>
</view>
<button class="release_btn button" form-type="submit">提交</button>
</view>
</form>
<!-- 提到的宝贝弹窗 -->
<uni-popup ref="associated" type="bottom">
<associated @close="close" @getProduct="getProduct" :checkedObj="productList"></associated>
</uni-popup>
</view>
</template>
<script>
import associated from '@/components/realselist/realselist.vue';
import {
supplychain,
entrustchain,
editentrust,
entrustdetail
} from '@/api/sale.js'
export default {
components: {
associated
},
data() {
return {
value1: 1,
value2: "",
options1: [],
productList: [],
info: {
startDate: '',
endDate: '',
lunar: false,
range: true,
insert: false,
selected: [],
showMonth: false
},
formData: {
entrust_mer_id: '',
entrust_day: 15,
is_type: "4",
product_info: [],
content: ''
},
type: ''
};
},
computed: {
},
onLoad(e) {
this.id = e.id;
this.type = e.type
if (this.type) {
uni.setNavigationBarTitle({
title: '编辑打折'
})
this.editlist(e.id)
}
},
mounted() {
this.list()
},
methods: {
change1(item) {
console.log(item);
},
list() {
supplychain({
page: 1
}).then((res => {
for (let i in res.data.list) {
this.options1.push({
text: res.data.list[i].mer_name,
value: res.data.list[i].mer_id
})
}
// console.log(res)
}))
},
editlist(id) {
entrustdetail(id).then((res) => {
this.formData.entrust_mer_id = res.data.entrust_mer_id
this.formData.entrust_day = res.data.entrust_day
this.productList = res.data.product_list
this.getProduct(res.data.product_list)
})
},
calendar() {
this.$refs.calendar.open()
},
//关闭商品弹窗
close() {
this.$refs.associated.close()
},
//打开商品弹窗
addProduct() {
this.$refs.associated.open()
},
//获取商品信息
getProduct(data) {
this.productList = [];
this.formData.product_info = [];
this.formData.content = '';
if (data.length > 0) {
this.productList = data;
for (let i in data) {
this.formData.content += data[i].store_name + ',';
if(typeof this.productList[i].image == 'object'){
this.productList[i].image = this.productList[i].image[0]
}
this.formData.product_info.push({
product_attr_unique: data[i].product_attr_unique,
number: Number(data[i].number),
price: data[i].price
})
}
}
this.formData.content = this.formData.content.slice(0,-1);
this.$refs.associated.close()
},
//提交
formSubmit(e) {
console.log(e)
let that = this,
value = that.formData;
if (value.entrust_day.length == 0 || value.entrust_day <= 0) return that.$util.Tips({
title: '请选择委托周期'
});
if (value.product_info.length == 0) return that.$util.Tips({
title: '请选择产品'
});
if (!value.entrust_mer_id) return that.$util.Tips({
title: '请添加商家'
});
this.type?
editentrust(this.id,value).then(res => {
if (res.status == '200') {
uni.hideLoading()
that.$util.Tips({
title: '编辑成功',
icon: 'success'
});
that.formData = {
entrust_mer_id: '',
entrust_day: 0,
is_type: "4",
product_info: []
}
uni.redirectTo({
url: '/pages/commissionedSales/initiateDelegation/index'
})
} else {
that.$util.Tips({
title: res.messge,
icon: 'success'
});
}
}).catch(err => {
return that.$util.Tips({
title: err
});
})
:
entrustchain(value).then(res => {
if (res.status == '200') {
uni.hideLoading()
that.$util.Tips({
title: '提交成功',
icon: 'success'
});
that.formData = {
entrust_mer_id: '',
entrust_day: 0,
is_type: "4",
product_info: []
}
uni.redirectTo({
url: '/pages/commissionedSales/initiateDelegation/index'
})
} else {
that.$util.Tips({
title: res.messge,
icon: 'success'
});
}
}).catch(err => {
return that.$util.Tips({
title: err
});
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background: #F5F5F5;
}
.content {
height: 100vh;
position: relative;
}
.release_content {
padding: 0 28rpx;
margin-top: 28rpx;
.content_center-one {
display: flex;
.center-one {
margin-top: 32rpx;
margin-bottom: 32rpx;
display: flex;
.center-one-img {
width: 154rpx;
height: 154rpx;
margin-right: 21rpx;
image {
width: 154rpx;
height: 154rpx;
}
}
.center-one-txt {
.one-txta {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.one-txtb {
display: flex;
margin-top: 28rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 400;
color: #999999;
span {
color: #F84221;
margin-right: 30rpx;
}
}
}
}
}
.release_item {
background: #ffffff;
padding: 0 30rpx;
border-radius: 10rpx;
padding-top: 20rpx;
.release_item-one {
.item-one {
margin-top: 32rpx;
margin-bottom: 20rpx;
font-size: 32rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
.photo_count {
padding: 30rpx 0;
}
}
/deep/.loading-img {
width: 180rpx;
height: 180rpx;
border-radius: 12rpx;
}
.input_photo .pictrue {
margin-bottom: 20rpx;
.videoHover {
width: 180rpx;
height: 180rpx;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 10;
>view {
width: 50rpx;
height: 50rpx;
background: #000000;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
color: #ffffff;
font-size: 21rpx;
}
}
}
.video-text {
display: block;
width: 180rpx;
text-align: center;
color: #ffffff;
font-size: 18rpx;
z-index: 13;
position: absolute;
bottom: 20rpx;
}
video {
width: 180rpx;
height: 180rpx;
border-radius: 12rpx;
}
}
.input_photo .add {
background: #f6f6f6;
color: #666666;
.iconfont {
font-size: 50rpx;
}
.text {
margin-top: 20rpx;
font-size: 27rpx;
}
}
.textarea textarea {
font-size: 28rpx;
padding-bottom: 38rpx;
width: 100%;
box-sizing: border-box;
height: 400rpx;
overflow: hidden;
}
.textarea .placeholder {
color: #BBBBBB;
}
.release_item .item {
height: 106rpx;
border-bottom: 1rpx solid #eee;
position: relative;
font-size: 30rpx;
&:last-child {
border-bottom: none;
}
.name {
color: #333333;
.iconfont {
margin-right: 10rpx;
font-size: 28rpx;
}
}
.select {
color: #bbbbbb;
.select_count {
display: flex;
align-items: center;
}
.text {
margin-right: 15rpx;
display: flex;
align-items: center;
.image,
image,
uni-image {
width: 60rpx;
height: 60rpx;
margin-right: 5rpx;
}
}
.iconfont {
font-size: 24rpx;
}
.text_name {
color: var(--view-theme);
padding: 5rpx 12rpx;
background: var(--view-minorColor);
border-radius: 23rpx;
font-size: 24rpx;
margin-right: 10rpx;
.icon {
color: var(--view-theme);
font-weight: bold;
font-size: 24rpx;
}
.title {
margin: 0 10rpx;
}
.iconfont {
font-size: 16rpx;
}
}
}
}
.button {
width: 694rpx;
height: 84rpx;
line-height: 84rpx;
text-align: center;
background: linear-gradient(84deg, #F98649 0%, #F34E45 100%);
border-radius: 42px 42px 42px 42px;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.release_btn {
position: fixed;
bottom: 150rpx;
left: 50%;
margin-left: -347rpx;
}
</style>