508 lines
13 KiB
Vue
508 lines
13 KiB
Vue
<template>
|
||
<view class="news-edit">
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd">内容：</view>
|
||
<view class="m-cell-bd">
|
||
<textarea
|
||
class="input"
|
||
name="text"
|
||
v-model="formData.category_content"
|
||
placeholder-class="placeholder"
|
||
></textarea>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd">关键字：</view>
|
||
<view class="m-cell-bd">
|
||
<input
|
||
class="input input-1"
|
||
placeholder-class="placeholder"
|
||
type="text"
|
||
v-model="formData.message_keywords"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd">分类：</view>
|
||
<view class="m-cell-bd">
|
||
<select
|
||
name="public-choice"
|
||
class="input input-1"
|
||
v-model="formData.category_id"
|
||
@change="getCouponSelected"
|
||
>
|
||
<option value="">请选择</option>
|
||
<option :value="item.category_id" v-for="item in category">
|
||
{{ item.category_name }}
|
||
</option>
|
||
</select>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd">区域：</view>
|
||
<view class="m-cell-bd">
|
||
<select
|
||
name="public-choice"
|
||
class="input input-1"
|
||
v-model="formData.message_area"
|
||
@change="getCouponSelected"
|
||
>
|
||
<option value="">请选择</option>
|
||
<option :value="item.id" v-for="item in area">
|
||
{{ item.category_name }}
|
||
</option>
|
||
</select>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell m-cell-select-before" @click="showbox">
|
||
<view class="m-cell-hd">省/市/区：</view>
|
||
<view class="m-cell-bd">
|
||
<label>{{ seladstr }}</label>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd">详细地址：</view>
|
||
<view class="m-cell-bd">
|
||
<input
|
||
class="input input-1"
|
||
placeholder-class="placeholder"
|
||
type="text"
|
||
v-model="formData.message_address"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd">联系人：</view>
|
||
<view class="m-cell-bd">
|
||
<input
|
||
class="input input-1"
|
||
placeholder-class="placeholder"
|
||
type="text"
|
||
v-model="formData.message_username"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd">手机号：</view>
|
||
<view class="m-cell-bd">
|
||
<input
|
||
class="input input-1"
|
||
placeholder-class="placeholder"
|
||
type="number"
|
||
v-model="formData.message_mobile"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="bk_box">
|
||
<view class="m-cell-hd">图片：</view>
|
||
<view class="pic_box">
|
||
<view class="pic_box_img">
|
||
<!-- 视频 -->
|
||
<view v-if="story_video" class="hjs-select-img">
|
||
<view
|
||
class="uni-icon uni-icon-clear mp-clean-icon icon-cuo"
|
||
@tap="delectVideo"
|
||
v-if="false"
|
||
></view>
|
||
<video :src="story_video" class="pic_box_image"></video>
|
||
<cover-view class="shanchu">
|
||
<label
|
||
@tap="delectVideo"
|
||
class="iconfont icon-delete"
|
||
style="color: #fff"
|
||
></label>
|
||
</cover-view>
|
||
</view>
|
||
|
||
<block v-for="(item, index) in ImgList" :key="index">
|
||
<view class="hjs-select-img">
|
||
<image
|
||
class="pic_box_image"
|
||
:src="item.Url"
|
||
:data-src="item.Url"
|
||
@click="previewImage"
|
||
mode="scaleToFill"
|
||
></image>
|
||
<view class="shanchu" style=""
|
||
><label
|
||
@tap="delImg"
|
||
class="iconfont icon-delete"
|
||
:data-id="item.SkuId"
|
||
:data-index="index"
|
||
style="color: #fff"
|
||
></label>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view @click="chooseVideoImage" class="hjs-select-img">
|
||
<image
|
||
class="pic_box_image"
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/pic_11.png"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="u-btn u-btn-default" @click="submitInfo">提交</button>
|
||
<mpvue-city-picker
|
||
:themeColor="themeColor"
|
||
ref="mpvueCityPicker"
|
||
:pickerValueDefault="cityPickerValueDefault"
|
||
@onCancel="onCancel"
|
||
@onConfirm="onConfirm"
|
||
></mpvue-city-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import mpvueCityPicker from "../../components/mpvue-citypicker/mpvueCityPicker.vue";
|
||
import { mapMutations, mapState } from "vuex";
|
||
var picPath = [];
|
||
export default {
|
||
components: {
|
||
mpvueCityPicker,
|
||
},
|
||
data() {
|
||
return {
|
||
formData: {
|
||
category_content: "",
|
||
message_keywords: "",
|
||
category_id: "",
|
||
message_area: "",
|
||
message_full_area: "",
|
||
message_address: "",
|
||
message_username: "",
|
||
message_mobile: "",
|
||
},
|
||
themeColor: "#007AFF",
|
||
cityPickerValueDefault: [0, 0, 0],
|
||
form: {},
|
||
story_video: "",
|
||
ImgList: [],
|
||
Pindex: 0,
|
||
selectedProId: 0,
|
||
selectedCityId: 0,
|
||
selectedCountyId: 0,
|
||
selectedPro: "",
|
||
selectedCity: "",
|
||
selectedCounty: "",
|
||
seladstr: "请选择所属地区",
|
||
category: [],
|
||
area: [],
|
||
isShow: false,
|
||
};
|
||
},
|
||
computed: mapState(["Config"]),
|
||
onLoad: function (options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__("发布信息"),
|
||
});
|
||
|
||
this.GetAddressList();
|
||
},
|
||
methods: {
|
||
onUnload() {
|
||
if (this.$refs.mpvueCityPicker.showPicker) {
|
||
this.$refs.mpvueCityPicker.pickerCancel();
|
||
}
|
||
},
|
||
onBackPress() {
|
||
if (this.$refs.mpvueCityPicker.showPicker) {
|
||
this.$refs.mpvueCityPicker.pickerCancel();
|
||
return true;
|
||
}
|
||
},
|
||
onConfirm(e) {
|
||
let that = this;
|
||
console.info(e);
|
||
console.info(JSON.stringify(e));
|
||
this.pickerText = JSON.stringify(e);
|
||
this.setData({
|
||
Pindex: this.cityCode,
|
||
selectedProId: e.value[0],
|
||
selectedCityId: e.value[1],
|
||
selectedCountyId: e.value[2],
|
||
selectedPro: e.label[0],
|
||
selectedCity: e.label[1],
|
||
selectedCounty: e.label[2],
|
||
seladstr: that.$.isNull(e.label.toString())
|
||
? that.__("请选择地址")
|
||
: e.label.toString(),
|
||
});
|
||
},
|
||
onCancel(e) {
|
||
console.log(e);
|
||
},
|
||
GetAddressList: function () {
|
||
var that = this;
|
||
var params = {};
|
||
that.setData({
|
||
isdata: false,
|
||
category: [],
|
||
area: [],
|
||
});
|
||
that.$.request({
|
||
url: that.Config.URL.user.serviceMessage,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status) {
|
||
if (data.items.length > 0) {
|
||
that.addresslist = data.items;
|
||
that.setData({
|
||
isdata: true,
|
||
category: data.category,
|
||
area: data.area,
|
||
});
|
||
} else {
|
||
that.setData({
|
||
isdata: false,
|
||
});
|
||
}
|
||
}
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
});
|
||
},
|
||
submitInfo(e) {
|
||
var that = this;
|
||
var params = this.formData;
|
||
params.message_full_area = this.seladstr;
|
||
params.photos_area = JSON.stringify(that.ImgList);
|
||
params.user_birthday == that.__("请选择生日日期") &&
|
||
(params.user_birthday = "");
|
||
that.$.request({
|
||
url: this.Config.URL.user.addServiceMessage, //新加提交接口，家胜
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (status == 200) {
|
||
that.$.showToast({
|
||
title: that.__("更新成功!"),
|
||
});
|
||
|
||
setTimeout(function () {
|
||
that.$.navigateBack(1);
|
||
}, 2000);
|
||
} else {
|
||
that.$.confirm(msg);
|
||
}
|
||
},
|
||
});
|
||
},
|
||
chooseVideoImage() {
|
||
let that = this;
|
||
uni.showActionSheet({
|
||
title: that.__("选择上传类型"),
|
||
itemList: [that.__("图片")],
|
||
success: (res) => {
|
||
console.log(res);
|
||
if (res.tapIndex == 0) {
|
||
this.chooseImages();
|
||
} else {
|
||
this.chooseVideo();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
UploadImg() {
|
||
var that = this,
|
||
max_num = 9;
|
||
|
||
if (
|
||
(that.$.isNull(that.ImgList) || (max_num = 9 - that.ImgList.length),
|
||
0 != max_num)
|
||
) {
|
||
that.$.chooseImage({
|
||
count: max_num,
|
||
sizeType: ["compressed"],
|
||
sourceType: ["album", "camera"],
|
||
success: function (result) {
|
||
for (
|
||
var num = that.ImgList.length,
|
||
path = result.tempFilePaths,
|
||
idx = 0;
|
||
idx < path.length;
|
||
idx++
|
||
) {
|
||
that.$.uploadFile({
|
||
url: that.Config.URL.upload,
|
||
method: "POST",
|
||
filePath: path[idx],
|
||
name: "upfile",
|
||
formData: { user: idx + num },
|
||
//header: {"content-type": "multipart/form-data"},
|
||
success: function (t) {
|
||
console.log(t), console.log(t.data);
|
||
var a = JSON.parse(t.data);
|
||
console.log(a);
|
||
var s = that.$.parseJSON(t.data);
|
||
let info = { Url: s.data.url, SkuId: 1 };
|
||
picPath.push(info);
|
||
for (var o = picPath.length - 1; 0 < o; o--) {
|
||
for (var e = 0; e < o; e++) {
|
||
if (picPath[e].order > picPath[e + 1].order) {
|
||
var i = picPath[e];
|
||
(picPath[e] = picPath[e + 1]), (picPath[e + 1] = i);
|
||
}
|
||
}
|
||
}
|
||
that.setData({ ImgList: picPath });
|
||
},
|
||
fail: function (t) {},
|
||
complete: function (t) {},
|
||
});
|
||
}
|
||
},
|
||
fail: function (t) {},
|
||
complete: function (t) {},
|
||
});
|
||
} else {
|
||
that.$.alert(that.__("最多上传9张图片！"));
|
||
}
|
||
},
|
||
delImg(e) {
|
||
var that = this;
|
||
that.$.confirm(
|
||
"是否放弃上传本张图片?",
|
||
function (t) {
|
||
if (t.confirm) {
|
||
var a = that.ImgList,
|
||
s = [];
|
||
for (var o in ((picPath = []), a)) {
|
||
o != e.target.dataset.index && (s.push(a[o]), picPath.push(a[o]));
|
||
}
|
||
that.setData({ ImgList: s });
|
||
}
|
||
},
|
||
true
|
||
);
|
||
},
|
||
chooseImages() {
|
||
this.UploadImg();
|
||
|
||
return;
|
||
|
||
// 上传图片
|
||
uni.chooseImage({
|
||
count: 4, //默认9
|
||
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ["album", "camera"], //从相册选择
|
||
success: (res) => {
|
||
this.ImgList = this.ImgList.concat(res.tempFilePaths);
|
||
|
||
if (this.ImgList.length == 4) {
|
||
this.VideoOfImagesShow = false;
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 三级联动选择
|
||
showbox() {
|
||
/*
|
||
this.setData({
|
||
isShow: true
|
||
})
|
||
*/
|
||
this.$refs.mpvueCityPicker.show();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../../styles/_variables.scss";
|
||
.input {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
border: 1rpx dashed #666;
|
||
width: auto;
|
||
height: 100px;
|
||
border-radius: 5px;
|
||
padding: 20rpx;
|
||
&.input-1 {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
border-style: solid;
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
.placeholder {
|
||
line-height: 40rpx;
|
||
font-size: 30rpx;
|
||
color: #cccccc;
|
||
}
|
||
.m-cell-hd {
|
||
width: 120rpx;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.m-cell {
|
||
padding: 30rpx;
|
||
}
|
||
.m-cell-hd {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
}
|
||
.bk_box {
|
||
display: flex;
|
||
.pic_box_image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.pic_box_img {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hjs-select-img {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin: 0 20rpx 20rpx;
|
||
}
|
||
}
|
||
.m-select-box-msk {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 3;
|
||
}
|
||
|
||
.m-select-box {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 300px;
|
||
background-color: #fff;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.u-select {
|
||
width: 100%;
|
||
height: 300px;
|
||
text-align: center;
|
||
}
|
||
|
||
.u-select .m-cell-bd {
|
||
width: 100%;
|
||
line-height: 50px;
|
||
font-size: 28rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.u-select .m-cell-bd label {
|
||
width: 100%;
|
||
}
|
||
|
||
.m-select-content {
|
||
position: relative;
|
||
}
|
||
</style>
|