<template>
<view class="content">
<view class="title">订单信息</view>
<view class="box">
<view class="box_item hflex acenter">
<view class="left left_red">联系人</view>
<u-input v-model="name" border="none" placeholder="请输入联系人姓名"></u-input>
</view>
<view class="box_item hflex acenter">
<view class="left left_red">联系电话</view>
<u-input v-model="phone" border="none" placeholder="请输入手机号"></u-input>
</view>
</view>
<view class="hflex acenter jbetween" style="padding-right: 30rpx;">
<view class="title">商品信息</view>
<view class="hflex acenter " @click="addGood">
<image src="/static/images/common/add_icon2.png" style="width: 36rpx;height: 36rpx;"></image>
<view class="add_text">添加</view>
</view>
</view>
<block v-for="(item,index) in items" :key="index">
<view class="box">
<view class="box_item hflex acenter">
<view class="left left_red">商品{{index + 1}}</view>
<u-input v-model="item.name" border="none" placeholder="请输入标题"></u-input>
</view>
<view class="box_item hflex acenter">
<view class="left left_red">规格</view>
<u-input v-model="item.spec" border="none" placeholder="如颜色/尺寸等"></u-input>
</view>
<view class="box_item hflex acenter">
<view class="left left_red">数量</view>
<u-input v-model="item.number" type="number" border="none" placeholder="请输入数量"></u-input>
</view>
<view class="box_item1">
<view class="left">质量标准</view>
<u-textarea v-model="item.standard" confirmType="done" placeholder="请填写质量标准要求"></u-textarea>
</view>
<view class="box_item hflex acenter">
<view class="left">原采购价</view>
<u-input v-model="item.price" border="none" placeholder="请输入原采购价格"></u-input>
</view>
<view class="hflex acenter jend">
<view class="dte_btn hflex acenter jcenter" @click="delGood(index)">删除</view>
</view>
</view>
</block>
<view class="box">
<view class="box_title">图片/视频</view>
<view class="hflex acenter fwrap" style="padding-bottom: 20rpx;">
<block v-for="(item,index) in fileList1" :key="index">
<view v-if="item.type == 'image'" style="position: relative;">
<image :src="item.url" class="img" mode="aspectFill" v-if="item.type == 'image'"></image>
<image src="/static/images/common/popu_close.png" class="close_icon" @click="deletePic2(index)"></image>
</view>
<view v-if="item.type == 'video'" style="position: relative;">
<video :src="item.url" direction="0" class="img" v-if="item.type == 'video'"></video>
<image src="/static/images/common/popu_close.png" class="close_icon" @click="deletePic2(index)"></image>
</view>
<!-- <image :src="item.url" class="img" mode="aspectFill" v-if="item.type == 'image'"></image>
<video :src="item.url" direction="0" class="img" v-if="item.type == 'video'"></video> -->
</block>
<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9" width="200rpx" height="200rpx"></u-upload> -->
<image src="/static/images/common/upload_img.png" class="img" @click="choose"></image>
</view>
</view>
<view class="box">
<view class="box_item hflex acenter">
<view class="left left_red">交货地址</view>
<u-input v-model="post_address" border="none" placeholder="请填写交货地址"></u-input>
</view>
<view class="box_item hflex acenter" @click="showTime">
<view class="left left_red">交货时间</view>
<u-input v-model="post_time" border="none" disabled disabledColor="#fff" placeholder="请选择交货时间" suffixIcon="arrow-right"></u-input>
</view>
<u-datetime-picker :show="show_time" :minDate="Number(new Date())" mode="date" @cancel="close" @confirm="selectTime"></u-datetime-picker>
</view>
<view class="btn hflex acenter jcenter" @click="release">立即发布</view>
<u-popup :show="show_choose" @close="close">
<view class="vflex acenter">
<view class="hflex acenter jcenter choose" @click="choose_img">
<view>图片</view>
</view>
<view class="hflex acenter jcenter choose" @click="choose_video">
<view>视频</view>
</view>
<view class="hflex acenter jcenter choose" @click="close">
<view>取消</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import $api from '@/static/js/api.js'
var that = ''
export default {
data() {
return {
name: '',
phone: '',
items: [
{
name: '',
spec: '',
number: '',
standard: '',
price: ''
}
],
good: {
name: '',
spec: '',
number: '',
standard: '',
price: ''
},
show: false,
fileList1: [],
post_address: '',
post_time: '',
show_time: false,
id: '',
back: false,
show_choose: false
}
},
onLoad(options) {
that = this
if(options.id) {
that.id = options.id
that.getData()
}
if(options.back) {
that.back = options.back
}
},
methods: {
getData() {
$api.req({
url: '/data/api.business.Purchase/show',
data: {
tab: 1,
id: that.id
}
}, function(res) {
if(res.code == 1) {
that.name = res.data.real_name
that.phone = res.data.mobile
that.items = res.data.items
that.fileList1 = res.data.images
that.post_address = res.data.post_address
that.post_time = res.data.post_time
}
})
},
showTime() {
that.show_time = true
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
close() {
that.show_time = false
that.show_choose = false
},
selectTime(e) {
that.post_time = $api.formatDate(e)
that.close()
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
deletePic2(index) {
that.fileList1.splice(index,1)
},
// 新增图片
async afterRead(event) {
uni.showLoading({
title: '上传中',
mask: true
})
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
// status: 'uploading',
// message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
// status: 'success',
type: result.type,
url: result.url
}))
fileListLen++
if(lists.length - 1 == i) {
uni.hideLoading()
}
}
console.log(that.fileList1);
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: $api.config.baseUrl + '/data/api.auth.Center/upload',
filePath: url,
name: 'file',
header: {
'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
'api-name': 'iosapp'
},
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
var data = JSON.parse(res.data)
console.log('data:',data);
var type = data.data.key.split('.')
if(type[1] == 'mp4') {
that.$set(data.data,'type','video')
} else {
that.$set(data.data,'type','image')
}
resolve(data.data)
}, 1000)
}
});
})
},
addGood() {
that.good = {
name: '',
spec: '',
number: '',
standard: '',
price: ''
},
that.items.push(that.good)
},
delGood(index) {
that.items.splice(index,1)
},
release() {
var images = []
var image = {}
for(var i=0;i<that.fileList1.length;i++) {
image = {
type: that.fileList1[i].type,
src: that.fileList1[i].url,
url: that.fileList1[i].url
}
images.push(image)
}
console.log(images);
for(var i=0;i<that.items.length;i++) {
if(!that.items[i].name || !that.items[i].spec || !that.items[i].number) {
$api.info('商品不能为空')
return
}
}
/* if(images.length <=0) {
$api.info('请选择图片')
return
} */
$api.req({
url: '/data/api.business.Purchase/purchase_order',
method: 'POST',
data: {
id: that.id,
real_name: that.name,
mobile: that.phone,
post_time: that.post_time,
post_address: that.post_address,
images: JSON.stringify(images),
item: JSON.stringify(that.items)
}
}, function(res) {
if(res.code == 1) {
$api.info('发布成功')
setTimeout(() => {
if(that.back) {
$api.jump(-1)
} else {
$api.jump('/pages/tabbar/index/index',2)
}
},2000)
}
})
},
choose() {
that.show_choose = true
},
choose_img() {
that.close()
uni.chooseImage({
count: 9, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'], //从相册选择
success: function (res) {
uni.showLoading({
title: '上传中',
mask: true
})
let fileListLen = that.fileList1.length
let file = res.tempFiles[0].path
console.log(file);
uni.uploadFile({
url: $api.config.baseUrl + '/data/api.auth.Center/upload',
filePath: file,
name: 'file',
header: {
'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
'api-name': 'iosapp'
},
formData: {
user: 'test'
},
success: (res2) => {
var data = JSON.parse(res2.data)
console.log('data:',data);
let item = {
type: 'image',
url: data.data.url
}
that.fileList1.push(item)
uni.hideLoading()
},
fail(err) {
console.log(err);
}
});
}
});
},
choose_video() {
that.close()
uni.chooseVideo({
sourceType: ['camera', 'album'],
success: function (res) {
uni.showLoading({
title: '上传中',
mask: true
})
let fileListLen = that.fileList1.length
let file = res.tempFilePath
console.log(file);
uni.uploadFile({
url: $api.config.baseUrl + '/data/api.auth.Center/upload',
filePath: file,
name: 'file',
header: {
'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
'api-name': 'iosapp'
},
formData: {
user: 'test'
},
success: (res2) => {
var data = JSON.parse(res2.data)
let item = {
type: 'video',
url: data.data.url
}
that.fileList1.push(item)
uni.hideLoading()
},
fail(err) {
console.log(err);
}
});
}
});
}
},
}
</script>
<style lang="scss" scoped>
.content::v-deep {
background: #F5F5F5;
.title {
font-size: 30rpx;
font-weight: 500;
color: #222222;
line-height: 42rpx;
padding: 24rpx 0 14rpx 30rpx;
}
.add_text {
font-size: 28rpx;
font-weight: 500;
color: #222222;
line-height: 40rpx;
padding-left: 2rpx;
}
.box {
width: 100%;
box-sizing: border-box;
padding: 0 30rpx;
background: #fff;
margin-bottom: 20rpx;
.box_title {
font-size: 28rpx;
font-weight: 500;
color: #222222;
line-height: 40rpx;
padding: 24rpx 0 20rpx;
}
.img {
width: 200rpx;
height: 200rpx;
margin: 0 20rpx 20rpx 0;
border-radius: 16rpx;
}
video {
width: 200rpx;
height: 200rpx;
margin: 0 20rpx 20rpx 0;
}
.close_icon {
position: absolute;
top: 0;
right: 15rpx;
width: 30rpx;
height: 30rpx;
}
.img_bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 36rpx;
background: rgba(0,0,0,0.5);
border-radius: 0px 0px 16rpx 16rpx;
font-size: 20rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 28rpx;
}
.box_item {
padding: 28rpx 0;
border-bottom: 1rpx solid #F5F5F5;
.left {
width: 156rpx;
font-size: 30rpx;
font-weight: 400;
color: #222222;
line-height: 42rpx;
}
.left_red {
position: relative;
}
.left_red::after {
position: absolute;
content: "*";
color: #ff0000;
font-size: 30rpx;
left: -15rpx;
top: 0;
}
}
.box_item1 {
padding: 28rpx 0;
.left {
// width: 156rpx;
font-size: 30rpx;
font-weight: 400;
color: #222222;
line-height: 42rpx;
}
.u-textarea {
margin: 28rpx 0 0;
border: none;
background: #F5F5F5;
border-radius: 16rpx;
}
}
.dte_btn {
width: 132rpx;
height: 52rpx;
margin: 30rpx 0;
border-radius: 26rpx;
border: 1rpx solid #D3D3D3;
font-size: 26rpx;
font-weight: 400;
color: #222222;
line-height: 36rpx;
}
}
.btn {
margin: 28rpx auto;
width: 690rpx;
height: 84rpx;
background: #5471FF;
border-radius: 46rpx;
font-size: 36rpx;
font-weight: 500;
color: #FFFFFF;
}
.popu_title {
font-size: 36rpx;
font-weight: 500;
color: #222222;
line-height: 50rpx;
}
.choose {
padding: 20rpx 0;
}
}
</style>