You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

288 lines
6.1 KiB

<template>
<view class="page" style="background: #FFFFFF;">
<view class="title">商家信息填写</view>
<view class="feedback-title">店铺名称</view>
<view class="feedback-body"><input class="feedback-input" v-model="name" placeholder="请输入您的店铺名称" /></view>
<view class="feedback-title">联系人姓名</view>
<view class="feedback-body"><input class="feedback-input" v-model="username" placeholder="请输入您的真实姓名" /></view>
<view class="feedback-title">手机号</view>
<view class="feedback-body"><input class="feedback-input" v-model="phone" maxlength="11"
placeholder="请输入您的电话号码" /></view>
<!-- <view class="feedback-title"><text>地址信息</text></view>
<view class="feedback-body"><input @tap="dingwei" disabled="false" class="feedback-input" v-model="address"
placeholder="请选择地址信息" /></view>
<view class="feedback-title">
<text>详细位置</text>
</view>
<view class="feedback-body"><textarea placeholder="小区楼栋/乡村名称" v-model="content" class="feedback-textare" />
</view> -->
<button type="primary" style="width: 152px;margin: 0 auto;
height: 32px;background: linear-gradient(141deg, #FF4848 0%, #FF2929 100%);
border-radius: 16px;" class="feedback-submit" @tap="send">
<p>提交申请</p>
</button>
</view>
</template>
<script>
var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
var qqmapsdk;
export default {
data() {
return {
name: '',
address: '',
content: '',
phone: '',
username: '',
city: "",
district: "",
province: ""
};
},
onLoad() {
// #ifdef MP-WEIXIN
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'SH4BZ-BS7CO-3X7WH-SBP6U-O7AM7-GNF4X'
});
// #endif
},
methods: {
dingwei() {
const that = this;
uni.chooseLocation({
success: function(res) {
console.log(res)
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
that.initLocation(res.latitude, res.longitude);
}
});
},
initLocation(latitude, longitude) {
var that = this;
qqmapsdk.reverseGeocoder({
location: latitude + ',' + longitude || '',
success: function(res) { //成功后的回调
if (res.status == 0) {
console.log(res)
that.province = res.result.address_component.province;
that.city = res.result.address_component.city;
that.district = res.result.address_component.district;
that.address = that.province + that.city + that.district;
}
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
})
},
send() {
let userId = this.$queue.getData('userId');
if (this.name === '') {
this.$queue.showToast('请输入您的店铺名称');
return;
}
if (this.username === '') {
this.$queue.showToast('请输入您的真实姓名');
return;
}
if (this.phone.length != 11) {
this.$queue.showToast('请输入您正确的电话号码');
return;
}
// if (this.city === '') {
// this.$queue.showToast('请选择您的地址信息');
// return;
// }
// if (this.content === '') {
// this.$queue.showToast('请输入详细位置');
// return;
// }
let data = {
"address": this.content,
"city": this.city,
"district": this.district,
"merchantName": this.name,
"phone": this.phone,
"province": this.province,
"userId": userId,
"userName": this.username
}
this.$queue.showLoading('加载中...');
this.$Request
.postJson('/merchant/insertMerchant', data).then(res => {
if (res.code === 0) {
uni.showToast({
title: '申请成功,等待审核!'
});
setTimeout(function() {
uni.navigateBack();
}, 1000);
} else {
uni.hideLoading();
uni.showModal({
showCancel: false,
title: '提交失败',
content: res.msg
});
}
});
},
bindPickerChangeClassify(e) {
console.log(e.target.value)
this.classifyIndex = e.target.value;
},
}
};
</script>
<style>
page {
background-color: #FFFFFF;
}
view {
font-size: 28upx;
}
.title {
font-size: 15px;
font-family: PingFang SC;
font-weight: 600;
color: #000000;
opacity: 1;
padding: 0 20upx;
margin-bottom: 8px;
}
/*问题反馈*/
.feedback-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20upx;
color: #333;
font-size: 15px;
font-weight: 500;
}
.feedback-body {
font-size: 32upx;
padding-left: 16upx;
margin: 16upx;
border-radius: 4upx;
/* background: #F8F8F8; */
border-bottom: 1px solid #ccc;
}
.feedback-textare {
height: 200upx;
font-size: 28upx;
line-height: 50upx;
width: 100%;
box-sizing: border-box;
/* padding: 20upx 30upx 0; */
}
.feedback-input {
font-size: 28upx;
height: 60upx;
/* padding: 15upx 20upx; */
line-height: 60upx;
}
.feedback-submit {
background: #007aff;
color: #ffffff;
margin: 20upx;
}
.integral {
width: 95%;
height: 70upx;
color: #333;
font-weight: 600;
border-bottom: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 20upx 20upx;
}
.left {
font-size: 32upx !important;
display: flex;
align-items: center;
flex: 1;
}
.uni-picker-container div {
position: relative;
}
.leftSpan {
position: absolute;
margin-left: 20upx;
color: #999;
font-size: 20upx;
width: 600upx;
left: 80upx;
bottom: 8upx;
}
image {
width: 42upx;
height: 42upx;
}
text {
margin-left: 20upx;
color: #333333;
font-size: 11upx;
}
button::after {
border: none;
}
button::before {
border: none;
}
.view-text {
font-size: 28upx;
color: #333333;
margin-left: 20upx;
}
.cuIcon-right {
font-size: 28upx;
color: #999;
}
uni-text {
font-size: 32upx;
}
button p {
line-height: 32px;
font-size: 12px;
}
</style>