Files
tcwm-uniapp-shop/my/publish/index.vue
2024-06-06 11:49:50 +08:00

822 lines
23 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="padding" v-if="XCXIsSelect!='否'">
<view style="padding-bottom: 20upx;color: red;" v-if="auditReason && shop.status == 2">拒绝原因{{auditReason}}</view>
<view class="text-white padding bg radius">
<u-form :model="shop" label-position="top">
<!-- <u-form-item label="入驻学校">
<u-input v-model="schoolName" placeholder="请输入入驻学校(选填)" disabled @click="show1 = true" />
</u-form-item>
<u-form-item label="入驻学区">
<u-input v-model="shop.schoolName" placeholder="请输入入驻学区(选填)" disabled @click="show2 = true" />
</u-form-item> -->
<u-form-item label="商铺主营类型">
<u-input v-model="shop.shopTypeName" placeholder="请输入商铺主营类型" disabled @click="show = true" />
</u-form-item>
<u-form-item label="商铺名称">
<u-input v-model="shop.name" placeholder="请填写 (必填)" />
</u-form-item>
<u-form-item label="省市区">
<u-input v-model="shop.address" disabled placeholder="请填写" @click="bindOpen" />
</u-form-item>
<u-form-item label="商铺详细地址">
<!-- <u-input v-model="shop.detailedAddress" placeholder="请填写" /> -->
<textarea v-model="shop.detailedAddress" placeholder-style="color: #aaaaaa;font-size: 28rpx;"
placeholder="请填写商铺详细地址" style="height: 120rpx;width: 100%;font-size: 28rpx;" />
</u-form-item>
</u-form>
</view>
<view class="text-white padding bg radius margin-top">
<u-form :model="shop" label-position="top">
<u-form-item label="联系人姓名">
<u-input v-model="shop.userName" placeholder="请输入真实姓名" />
</u-form-item>
<u-form-item label="身份证号">
<u-input v-model="shop.isNumber" maxlength="20" placeholder="请填写 (必填)" />
</u-form-item>
<u-form-item label="联系电话">
<u-input v-model="shop.phone" type="number" placeholder="请填写 (必填)" />
</u-form-item>
<u-form-item label="验证码" v-if="shop.status == null||shop.status == 2">
<!-- #ifndef MP-WEIXIN -->
<u-input v-model="shop.verCode" type="number" placeholder="请填写 (必填)"
style="width: 50%;" />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<u-input v-model="shop.verCode" type="number" placeholder="请填写 (必填)"
style="width: 50%;display: inline-block;" />
<!-- #endif -->
<button class="send-msg" @click="sendMsg">{{sendTime}}</button>
</u-form-item>
</u-form>
</view>
<view class="text-white padding bg radius margin-tb">
<view>
<view class="text-lg margin-top-sm text-black">店铺logo</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="detailsImg.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
<image :src="detailsImg" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImg(1)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImages(2)" v-if="detailsImg.length<=0">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top-sm text-black">营业执照</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="shop.business.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
<image :src="shop.business" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImgs(1)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImage(1)" v-if="shop.business.length<=0">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top-sm text-black">身份证正面</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="shop.front.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
<image :src="shop.front" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImgs(2)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImage(2)" v-if="shop.front.length<=0">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top-sm text-black">身份证反面片</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="shop.back.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
<image :src="shop.back" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImgs(3)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImage(3)" v-if="shop.back.length<=0">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view>
</view>
</view>
<u-button v-if="shop.status == null || shop.status == 2" @click="submit" class="margin-top"
:custom-style="customStyle" shape="square" :hair-line="false">提交审核
</u-button>
<u-button v-if="shop.status == 0" class="margin-top" disabled :custom-style="customStyle" shape="square"
:hair-line="false">审核中
</u-button>
<!-- 分类列表 -->
<u-select v-model="show" :list="shopList" valueName='id' labelName="shopTypeName" @confirm="confirm"></u-select>
<!-- 学校列表 -->
<u-select v-model="show1" :list="shopList1" valueName='schoolId' labelName="schoolName" @confirm="confirms">
</u-select>
<!-- 校区列表 -->
<u-select v-model="show2" :list="shopList2" valueName='schoolId' labelName="schoolName" @confirm="confirm1">
</u-select>
</view>
</template>
<script>
import configdata from '@/common/config.js';
export default {
data() {
return {
shop: {
schoolName: '',
schoolId: '',
type: '',
typeid: '',
name: '',
address: '',
shopTypeName: '',
detailedAddress: '',
userName: '',
isNumber: '',
phone: '',
verCode: '',
latitude: '',
longitude: '',
//详情图
detailsImg: [],
business: '',
front: '',
back: ""
},
customStyle: {
backgroundColor: '#FFCC00',
color: '#000000',
border: 0
},
status: 1,
//详情图
detailsImg: [],
shopId: '',
page: 1,
limit: 100,
show: false,
show1: false,
show2: false,
shopList: [],
city: '',
province: '',
district: '',
auditReason: '',
Settedlist: [],
sending: false,
sendTime: '获取验证码',
count: 60,
XCXIsSelect: '是',
platform: "h5",
shopList1: [],
shopList2: [],
schoolName: '',
schoolId: '',
}
},
onLoad(option) {
this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
if (this.XCXIsSelect == '否') {
uni.setNavigationBarTitle({
title: '隐私政策'
});
} else {
uni.setNavigationBarTitle({
title: '商家入驻'
});
}
// uni.getLocation({
// type: 'gcj02',
// success: (res) => {
// console.log(res.latitude);
// console.log(res.longitude);
// console.log("res___:" + JSON.stringify(res));
// },
// fail(e) {
// console.log(e);
// }
// });
this.Settedlist = uni.getStorageSync("Settedlist")
if (this.Settedlist) {
this.shopId = this.Settedlist.shopId
this.auditReason = this.Settedlist.auditReason
this.shop.name = this.Settedlist.shopName
this.shop.typeid = this.Settedlist.shopTypeId
this.shop.shopTypeName = this.Settedlist.shopTypeName
this.shop.address = this.Settedlist.province + this.Settedlist.city + this.Settedlist.district
this.shop.detailedAddress = this.Settedlist.detailedAddress
this.shop.latitude = this.Settedlist.shopLat
this.shop.longitude = this.Settedlist.shopLng
this.province = this.Settedlist.province
this.city = this.Settedlist.city
this.district = this.Settedlist.district
this.shop.status = this.Settedlist.status
this.shop.userName = this.Settedlist.realName
this.shop.isNumber = this.Settedlist.identitycardNumber
this.shop.phone = this.Settedlist.phone
this.shop.business = this.Settedlist.businessLicense
this.shop.front = this.Settedlist.identitycardPro
this.shop.back = this.Settedlist.identitycardCon
this.shop.detailsImg = this.Settedlist.shopCover
this.detailsImg = this.Settedlist.shopCover.split(',')
uni.removeStorageSync("Settedlist")
}
this.getShopList()
let token = this.$queue.getData('XCXIsSelect');
if (token) {
this.getData()
}
},
onShow() {
},
onHide() {
},
methods: {
getData() {
this.$Request.get("/app/shop/selectShopByUserId").then(res => {
if (res.code == 0 && res.data) {
this.auditReason = res.data.auditReason
this.shop.shopTypeName = res.data.shopTypeName
this.shop.name = res.data.shopName
this.shop.address = res.data.province + res.data.city + res.data.district
this.shop.detailedAddress = res.data.detailedAddress
this.shop.userName = res.data.realName
this.shop.isNumber = res.data.identitycardNumber
this.shop.phone = res.data.phone
this.shop.detailsImg = res.data.shopCover //商铺图片
this.detailsImg = res.data.shopCover.split(',')
this.shop.business = res.data.businessLicense //营业执照
this.shop.front = res.data.identitycardPro //身份证正面
this.shop.back = res.data.identitycardCon //身份证反面
this.shop.latitude = res.data.shopLat
this.shop.longitude = res.data.shopLng
this.province = res.data.province
this.city = res.data.city
this.district = res.data.district
this.shop.status = res.data.status
}
});
},
confirm(e) {
console.log(e)
this.shop.shopTypeName = e[0].label
this.shop.typeid = e[0].value
},
confirms(e) {
console.log(e)
this.schoolName = e[0].label
this.schoolId = e[0].value
this.getShopList2()
},
confirm1(e) {
console.log(e)
this.shop.schoolName = e[0].label
this.shop.schoolId = e[0].value
},
// 店铺列表
getShopList() {
let data = {
page: this.page,
limit: this.limit,
}
this.$Request.get("/app/shoptype/selectShopTypeList", data).then(res => {
if (res.code == 0) {
this.shopList = res.data.list
}
});
},
// 学校列表
getShopList1() {
let data = {
page: this.page,
limit: this.limit,
}
this.$Request.get("/app/school/getSchoolList", data).then(res => {
if (res.code == 0) {
this.shopList1 = res.data.records
}
});
},
// 校区列表
getShopList2() {
let data = {
schoolId: this.schoolId,
}
this.$Request.get("/app/school/getChildrenByParentId", data).then(res => {
if (res.code == 0) {
this.shopList2 = res.data
}
});
},
// 详情图删除
removeImg(index) {
this.detailsImg = ''
},
// 身份证 资格证删除
removeImgs(index) {
if (index == 1) {
this.shop.business = ''
} else if (index == 2) {
this.shop.front = ''
} else if (index == 3) {
this.shop.back = ''
}
},
bindOpen() {
const that = this;
uni.chooseLocation({
success: function(res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
that.shop.detailedAddress = res.address
that.shop.latitude = res.latitude
that.shop.longitude = res.longitude
that.getcity(res.latitude, res.longitude)
}
});
},
getcity(latitude, longitude) {
let data = {
lat: latitude,
lng: longitude,
}
this.$Request.get("/app/address/selectCity", data).then(res => {
if (res.code == 0) {
this.city = res.data.city
this.province = res.data.province
this.district = res.data.district
this.shop.address = res.data.province + res.data.city + res.data.district
}
});
},
// 图片上传
addImages(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: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
filePath: res.tempFilePaths[i],
name: 'file',
success: (uploadFileRes) => {
// if (that.detailsImg.length < 6) {
that.detailsImg = JSON.parse(uploadFileRes.data).data
// }
console.log(that.detailsImg)
uni.hideLoading();
}
});
}
}
})
},
// 图片上传
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: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
filePath: res.tempFilePaths[i],
name: 'file',
success: (uploadFileRes) => {
if (e == 1) {
that.shop.business = JSON.parse(uploadFileRes.data).data
} else if (e == 2) {
that.shop.front = JSON.parse(uploadFileRes.data).data
} else if (e == 3) {
that.shop.back = JSON.parse(uploadFileRes.data).data
}
console.log(that.detailsImg)
uni.hideLoading();
}
});
}
}
})
},
config: function(name) {
var info = null;
if (name) {
var name2 = name.split("."); //字符分割
if (name2.length > 1) {
info = configdata[name2[0]][name2[1]] || null;
} else {
info = configdata[name] || null;
}
if (info == null) {
let web_config = cache.get("web_config");
if (web_config) {
if (name2.length > 1) {
info = web_config[name2[0]][name2[1]] || null;
} else {
info = web_config[name] || null;
}
}
}
}
return info;
},
// 发布
submit() {
let that = this;
console.log(this.detailsImg)
this.shop.detailsImg = this.detailsImg
this.shop.detailsImg = this.shop.detailsImg.toString();
uni.getSystemInfo({
success: function(res) {
console.log(res.model);
if (res.model == 'iPhone') {
that.sysphone = 2
} else if (res.model != 'iPhone') {
that.sysphone = 1
}
}
});
if (!this.shop.shopTypeName) {
uni.showToast({
title: '请填写商铺主营类型',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.name) {
uni.showToast({
title: '请填写商铺名称',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.address) {
uni.showToast({
title: '请填写商铺地址',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.detailedAddress) {
uni.showToast({
title: '请填写店铺详细地址',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.userName) {
uni.showToast({
title: '请填写真实姓名',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.isNumber) {
uni.showToast({
title: '请填写身份证号',
icon: 'none',
duration: 1000
})
return
}
let regX = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (!regX.test(this.shop.isNumber)) {
uni.showToast({
title: '请输入正确的身份证号',
icon: 'none',
duration: 1000
})
return;
}
if (!this.shop.phone) {
uni.showToast({
title: '请填写联系电话',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.verCode) {
uni.showToast({
title: '请填写验证码',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.detailsImg) {
uni.showToast({
title: '请上传商铺图片',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.business) {
uni.showToast({
title: '请上传营业执照',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.front) {
uni.showToast({
title: '请上传身份证正面',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.back) {
uni.showToast({
title: '请上传身份证反面',
icon: 'none',
duration: 1000
})
return
}
var openId = this.$queue.getData("openid") ? this.$queue.getData("openid") : '';
let data = {
msg: this.shop.verCode,
phone: this.shop.phone,
userType: 1,
openId: openId,
platform: this.platform,
sysPhone: this.sysphone,
shopName: this.shop.name,
shopTypeId: this.shop.typeid,
shopTypeName: this.shop.shopTypeName,
detailedAddress: this.shop.address,
detailedAddress: this.shop.detailedAddress,
shopLat: this.shop.latitude,
shopLng: this.shop.longitude,
province: this.province,
city: this.city,
district: this.district,
realName: this.shop.userName,
identitycardNumber: this.shop.isNumber,
// phone: this.shop.phone,
// code: this.shop.verCode,
businessLicense: this.shop.business,
identitycardPro: this.shop.front,
identitycardCon: this.shop.back,
shopCover: this.shop.detailsImg,
// schoolId:this.shop.schoolId
}
// uni.setStorageSync('updataShopId', this.shop.shopId)
if (this.Settedlist) {
data.shopId = this.shopId;
this.$Request.postJson("/admin/goodsShop/updateGoodsShop", data).then(res => {
if (res.code == 0) {
uni.showToast({
title: '提交成功,等待审核通过',
icon: 'none'
})
setTimeout(function() {
uni.navigateBack()
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
}else{
this.$Request.postJson("/admin/goodsShop/quickGoodsShop", data).then(res => {
if (res.code == 0) {
uni.showToast({
title: '提交成功,等待审核通过',
icon: 'none'
})
setTimeout(function() {
uni.navigateBack()
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
}
},
sendMsg() {
// const {
// phone
// } = this.shop;
if(this.sendTime != '获取验证码'){
return;
}
console.log('this.shop.phone', this.shop.phone)
if (!this.shop.phone) {
this.$queue.showToast("请输入手机号");
} else if (this.shop.phone.length !== 11) {
this.$queue.showToast("请输入正确的手机号");
} else {
this.$queue.showLoading("正在发送验证码...");
this.$Request.getT("/app/Login/sendMsg/" + this.shop.phone + "/ruzhu").then(res => {
if (res.code === 0) {
this.sending = true;
this.$queue.showToast('验证码发送成功请注意查收');
this.countDown();
uni.hideLoading();
} else {
uni.hideLoading();
uni.showModal({
showCancel: false,
title: '短信发送失败',
content: res.msg ? res.msg : '请一分钟后再获取验证码'
});
}
});
}
},
countDown() {
const {
count
} = this;
if (count === 1) {
this.count = 60;
this.sending = false;
this.sendTime = '获取验证码'
} else {
this.count = count - 1;
this.sending = true;
this.sendTime = count - 1 + '秒后重新获取';
setTimeout(this.countDown.bind(this), 1000);
}
},
},
}
</script>
<style>
page {
background-color: #F5F5F5;
}
.bg {
background-color: #FFFFFF;
}
textarea::-webkit-input-placeholder {
color: #303133;
font-size: 20rpx;
}
textarea:-moz-placeholder {
color: #303133;
font-size: 20rpx;
}
textarea::-moz-placeholder {
color: #303133;
font-size: 20rpx;
}
textarea::-ms-input-placeholder {
color: #303133;
font-size: 20rpx;
}
.tabBox {
border: 1rpx solid #999999;
padding: 15rpx 20rpx;
border-radius: 15rpx;
font-size: 28rpx;
}
.btnnum {
color: #005DFF;
border: 1rpx solid #005DFF;
}
.send-msg {
border-radius: 30px;
color: #FFFFFF;
/*#FCD202 */
background: #FCD202;
height: 60rpx;
font-size: 28rpx;
line-height: 60rpx;
display: inline-block;
width: 45%;
margin-left: 4%;
position: relative;
/* #ifndef MP-WEIXIN */
top: 0;
/* #endif */
/* #ifdef MP-WEIXIN */
top: 20rpx;
/* #endif */
}
</style>