sadjv3_jishi/pages/my/shangjiaInp.vue

332 lines
7.9 KiB
Vue

<template>
<view style="padding-bottom: 100upx; margin-top: 20rpx;">
<view class="padding bg radius margin">
<u-form :model="form" ref="uForm" label-position="top" :label-style='lableStyle'>
<u-form-item label="" :border-bottom='false' style="border-bottom: 1px #f7f7f7 solid;">
<view class="skleft">
店铺名称
</view>
<u-input placeholder="请填写(必填)" v-model="form.consortiaName" type="text"
style="color: #999999;" />
</u-form-item>
<u-form-item label="" :border-bottom='false'>
<view class="skleft">
联系方式
</view>
<u-input placeholder="请填写(必填)" v-model="form.phone" type="number"
maxlength="11" style="color: #999999;" />
</u-form-item>
<u-form-item label="" :border-bottom='false'>
<view class="skleft">
店铺标签
</view>
<u-input placeholder="请填写店铺标签(以逗号分隔)" v-model="form.labels" type="text"
style="color: #999999;" />
</u-form-item>
<u-form-item label="" :border-bottom='false'>
<view class="skleft">
店铺介绍
</view>
<view class="margin-tb-sm bg">
<u-input v-model="form.consortiaContent" style="border-radius: 20rpx;"
type="textarea" height="200" placeholde="请填写店铺介绍" maxlengt="200" :clearable="false" />
</view>
</u-form-item>
</u-form>
</view>
<view class=" padding bg radius margin"
style="padding-top: 20rpx; margin-top: 20rpx;">
<view class="margin-top-sm">头像上传</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view class="margin-top flex margin-right-sm flex-wrap" v-if="form.headImg && form.headImg.length">
<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;">
<image :src="form.headImg" style="width: 100%;height: 100%;"></image>
<view v-if="renzheng == 0 || renzheng == 3"
style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="headImgremove(index)">
<u-icon name="close-circle-fill" color="#d81e06" size="50rpx"></u-icon>
</view>
<!-- <image :src="form.headImg" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="headImgremove(index)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view> -->
</view>
</view>
<view class="margin-top" @click="addImage(4)" v-if="form.headImg.length<=0">
<view style="width: 200rpx;height: 200rpx;background: #f7f8fa;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../../static/images/my/avatar.png" style="width: 80rpx;height: 80rpx;">
</image>
</view>
<view class="text-center add-word">添加头像</view>
</view>
</view>
</view>
</view>
</view>
<view class="tabbar" style="background: linear-gradient(to right, #019c88, #2dbe93); border-radius: 50rpx;"
@click="submit()" v-if="renzheng == 0||renzheng==3">提交</view>
</view>
</template>
<script>
import * as websocketUtils from 'utils/websocketUtils.js';
export default {
data() {
return {
showAgree: false,
form: {
consortiaName: '',
consortiaContent:'',
phone: '',
labels:'',
consortiaId:'',
//头像上传
headImg: '',
},
// disabled: false,
lableStyle: {
color: '#000000',
fontSize: '30upx'
},
customStyle: {
backgroundColor: '#005DFF',
color: '#ffffff',
border: 0
},
customStyle1: {
backgroundColor: '#ccc',
color: '#000000',
border: 0
},
renzheng: '',
show: false,
showData: false,
//头像上传
headImg: [],
showpay: false,
openLists: [],
openWay: 1,
typeId: '',
closeable: true,
XCXIsSelect: '否',
renzhengStatus: false,
}
},
onLoad() {
this.getData()
},
methods: {
getData(){
var that=this;
that.$Request.get('/app/consortia/selectConsortiaUserId').then(res => {
if (res.code == 0) {
that.form.consortiaName = res.data.consortiaName ? res.data.consortiaName : ''
that.form.consortiaContent = res.data.consortiaContent ? res.data.consortiaContent : ''
that.form.phone = res.data.phone ? res.data.phone : ''
that.form.labels=res.data.tags ? res.data.tags : ''
that.form.headImg=res.data.logo ? res.data.logo : ''
that.form.consortiaId=res.data.consortiaId ? res.data.consortiaId : ''
console.log("that.form",that.form)
}
})
},
headImgremove(index) {
this.form.headImg = ''
},
submit() {
if (!this.form.consortiaName) {
uni.showToast({
title: '请输入真实姓名',
icon: 'none',
duration: 1000
})
return;
}
if (!this.form.phone) {
uni.showToast({
title: '请输入联系方式',
icon: 'none',
duration: 1000
})
return;
}
if (!this.form.headImg) {
uni.showToast({
title: '请上传头像',
icon: 'none',
duration: 1000
})
return;
}
let data = {
consortiaId:this.form.consortiaId,
consortiaName: this.form.consortiaName,
phone: this.form.phone,
tags:this.form.labels,
logo: this.form.headImg,
consortiaContent:this.form.consortiaContent,
}
this.$Request.postJson("/app/consortia/updateConsortia", data).then(res => {
if (res.code == 0) {
uni.showToast({
title: '修改成功!',
icon: 'none'
})
setTimeout(function() {
uni.switchTab({
url: '/pages/my/index'
})
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
},
addImage(e) {
let that = this
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
success: res => {
for (let i = 0; i < res.tempFilePaths.length; i++) {
that.$queue.showLoading("上传中...");
uni.uploadFile({ // 上传接口
url: websocketUtils.uploadFileUrl(), //真实的接口地址
filePath: res.tempFilePaths[i],
name: 'file',
success: (uploadFileRes) => {
if (e == 1) {
that.form.front = JSON.parse(uploadFileRes.data).data
} else if (e == 2) {
that.form.back = JSON.parse(uploadFileRes.data).data
} else if (e == 4) {
that.form.headImg = JSON.parse(uploadFileRes.data).data
console.log(that.form.headImg)
}
uni.hideLoading();
}
});
}
}
})
},
}
}
</script>
<style>
page {
background-color: #F7F7F7;
}
.bg {
width: 94%;
margin:30rpx auto;
background-color: #FFFFFF;
padding: 20rpx 36rpx;
border-radius: 26rpx;
}
.add-word{
font-size: 26rpx;
color: #afb5c1;
}
.skbox {}
.skleft {
width: 160rpx;
font-size: 28rpx;
}
.u-form-item {
padding: 10rpx !important;
}
.u-form-item--right__content__slot {
flex: 200rpx 1 !important;
}
.footer {
padding-left: 30upx;
font-size: 24upx;
color: #666666;
text-align: center;
display: flex;
margin-bottom: 20rpx;
}
.u-input__input {
color: balck !important;
}
.title_btn {
height: 78upx;
line-height: 78upx;
/* background: #f7f7f7; */
}
.tabbar {
width: 690upx;
height: 86upx;
background: #019c88;
border-radius: 8upx;
margin: 0 auto;
text-align: center;
line-height: 86upx;
color: #FFFFFF;
margin-top: 20rpx;
}
.popup_pay {
width: 100%;
position: relative;
padding-bottom: 45rpx;
/* height: 160px; */
/* #ifndef MP-WEIXIN */
/* height: 130px; */
/* #endif */
}
.pay_btn {
width: 90%;
margin: 0 auto;
text-align: center;
background: #1777FF;
height: 80rpx;
border-radius: 16rpx;
color: #ffffff;
line-height: 80rpx;
}
.hb {
/* #ifdef H5 */
padding-bottom: 180rpx;
/* #endif */
}
.bgCol2 {
color: #557EFD;
}
</style>