耀实惠小程序
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.
 
 
 

878 lines
23 KiB

<template>
<view class="page_box">
<view class="bg_img">
<image :src="img_url+'webmaster_application_pic.png'" mode=""></image>
</view>
<view class="card">
<!-- <view class="row">
<text>推荐人</text>
<view class="text_box" >
<u-input v-model="top_name" disabled> </u-input>
</view>
</view> -->
<u-form :model="form" ref="uForm">
<u-form-item prop="share_id" :border-bottom="false">
<view class="row">
<text>邀请码</text>
<view class="text_box" >
<u-input v-model="form.share_id" :disabled="state>0" placeholder="请输入邀请码"> </u-input>
</view>
</view>
<view class="flex align-center" style="color: #FF0000;">
<text class="p-l-30 font-22">{{stationmaster_code.title }}: {{stationmaster_code.value}}</text>
<view class="text-white font-22 my-header-copy--txt" @click="copy(stationmaster_code.value)">复制</view>
</view>
</u-form-item>
<u-form-item prop="shop_name" :border-bottom="false">
<view class="row">
<text>店铺名称</text>
<view class="text_box" >
<u-input v-model="form.shop_name" :disabled="state>0" placeholder="请输入店铺名称"> </u-input>
</view>
</view>
</u-form-item>
<u-form-item prop="address" :border-bottom="false" @tap="chooseCity(1)">
<view class="row" @tap="chooseCity(1)" >
<text>店铺地址</text>
<view class="text_box">
<text v-if="!form.address">请选择区域</text>
<text class="black" v-else>{{form.address}}</text>
<!-- <u-input placeholder="请选择区域" v-model="" disabled> </u-input> -->
</view>
</view>
</u-form-item>
<u-form-item prop="area" :border-bottom="false">
<view class="row">
<text>详细地址</text>
<view class="text_box black" >
<u-input v-model="form.area" :disabled="state>0" type="textarea" height="79" auto-height />
<!-- <input type="text" v-model="area" placeholder="请输入店铺地址"> -->
<!-- <text v-if="!area"></text>
<text class="black" v-else>{{area}}</text> -->
</view>
</view>
</u-form-item>
<u-form-item prop="name" :border-bottom="false">
<view class="row">
<text>联系人</text>
<view class="text_box" >
<u-input placeholder="请输入联系人" :disabled="state>0" v-model="form.name"> </u-input>
</view>
</view>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<view class="row">
<text>联系电话</text>
<view class="text_box" >
<u-input placeholder="请输入电话号码" :disabled="state>0" v-model="form.phone" type="number" maxlength="11"> </u-input>
</view>
</view>
</u-form-item>
<u-form-item prop="nature">
<view class="row">
<text>站长性质</text>
<view class="text_box" @click="toshow">
<text v-if="!form.nature">请选择</text>
<text class="black" v-else>{{form.nature}}</text>
</view>
</view>
</u-form-item>
<view class="row">
<text>地图定位</text>
<view @tap.stop="getChooseLocation" class="text_box" v-if="form.latitude == null && form.longitude == null" >
<text>请选择区域</text>
</view>
<map v-else style="width: 480rpx; height: 160rpx; position: relative;"
:latitude="form.latitude" :longitude="form.longitude" :markers="markers"
@regionchange="onMapDrag" show-location>
<!-- :polyline="polyline" 线 onLocationChange handleAuthorize-->
<!-- <cover-image class="locate-img" src="https://cheum.oss-cn-beijing.aliyuncs.com/chemuXcx-img/newimg/locate2.png"></cover-image> -->
<view class="location-img-box" @click.stop="getChooseLocation">
<image style="width: 80rpx; height:80rpx;" :src="img_url + 'location.png'" mode=""></image>
</view>
<!-- <cover-view class="" @click.stop="getChooseLocation">
<cover-image class="location-img" :src="img_url + 'location.png'"></cover-image>
</cover-view> -->
</map>
</view>
</u-form>
<view class="hint" v-if="form.nature !== '非商户'">
<text class="">*上传营业执照照片</text>
</view>
<view class="img_box" v-if="form.nature !== '非商户'">
<view class="hint_pic">
<u-upload ref="uUpload3"
:header="headerInfo"
:action="upload_img"
:custom-btn="true"
:disabled="state>0"
image-mode="none"
@before-upload="isUpload"
@on-success="onSuccess3"
@on-error="onErrorInfo"
max-count="1" width="281" height="192" >
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image :src="form.hintImage?form.hintImage:(img_url+'upLoad.png')" mode=""></image>
</view>
</u-upload>
<template v-if="state>0">
<image :src="form.hintImage" mode=""></image>
</template>
</view>
</view>
<view class="hint">
<text class="">*上传站长身份证正反面照片</text>
</view>
<view class="img_box">
<view class="pic_box">
<u-upload ref="uUpload"
:header="headerInfo"
:action="upload_img"
:custom-btn="true"
:disabled="state>0"
@before-upload="isUpload"
image-mode="none"
@on-success="onSuccess"
@on-error="onErrorInfo"
max-count="1" width="281" height="192" >
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image :src="form.idPhoto?form.idPhoto:(img_url+'member/obverse.png')" mode=""></image>
</view>
</u-upload>
<template v-if="state>0">
<image :src="form.idPhoto" mode=""></image>
</template>
</view>
<view class="pic_box">
<u-upload ref="uUpload2"
:header="headerInfo"
:action="upload_img"
:custom-btn="true"
image-mode="none"
:disabled="state>0"
@on-success="onSuccess2"
@before-upload="isUpload"
@on-error="onErrorInfo"
max-count="1" width="281" height="192" >
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image :src="form.idPhotoImage?form.idPhotoImage:(img_url+'member/reverse.png')" mode=""></image>
</view>
</u-upload>
<template v-if="state>0">
<image :src="form.idPhotoImage" mode=""></image>
</template>
</view>
</view>
<view class="pay_info" v-if="stationmaster_go_money.isOpen == 0">
<text>¥</text>
<text>{{stationmaster_go_money.value}}</text>
<text>元/年</text>
</view>
<view class="m-l-30 m-t-20" v-if="state == '-1' || state == '0'">
<u-checkbox-group active-color="#01AD19" >
<u-checkbox v-model="isAgreement" shape="circle" @change="handleChekChange">
<view class="login-agreement">
请勾选
<text class="login-agreement--text" @click.stop="toAgreement('合作协议', 0)">《合作协议》</text>
<!-- <text class="login-agreement--text" @click.stop="toAgreement('隐私政策', 1)"></text> -->
</view>
</u-checkbox>
</u-checkbox-group>
</view>
<!-- <button class="sumbtn success" @click="submit">{{title_pay}}</button> -->
<button class="sumbtn" @click="submit" v-if="title_text == '提交申请'">{{title_text}}</button>
<button class="sumbtn_shz" @click="submit" v-if="title_text == '审核中'">{{title_text}}</button>
<button class="sumbtn_pay" @click="submit" v-if="title_text == '去支付'">{{title_text}}</button>
<button class="sumbtn" @click="submit" v-if="title_text == '编辑'">{{title_text}}</button>
<button class="sumbtn_success" @click="submit" v-if="title_text == '已完成'">{{title_text}}</button>
<u-picker :popup="true" v-model="is_show" mode="selector" zIndex="1000" :default-selector="[0]" :range="selectChange" @confirm='selectNature' @cancel="onCancel"></u-picker>
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
</view>
</view>
</template>
<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import config_img from "@/utils/js/config.js";
export default {
components: {
mpvueCityPicker
},
data() {
return {
img_url: config_img.img_url,
isAgreement: false,
upload_img: '',
href: 'api/info/upload',
headerInfo: {
"content-type": "application/x-www-form-urlencoded",
"X-Access-Token": ''
},
fileList1: [],
is_show: false,
selectChange: ['商户', '非商户'],
cityPickerValue: [0, 0, 0],
themeColor: '#007AFF',
markers: [], // 标记点列表
select_show: 0, //用户点击的是那一个0 区域 1 地址
form: {
share_id: '',
shop_name: "",
name: "",
phone: "",
address: "",
area: "",
latitude: 1, // 当前位置经纬度
longitude: 1, // 当前位置经纬度
nature: "",
idPhoto: "", //正面身份证
idPhotoImage: "", //反面身份证
hintImage: "", // 营业执照
},
rules: {
share_id: [
{
required: true,
message: '请输入邀请码',
trigger: ['blur']
}
],
shop_name: [
{
required: true,
message: '请输入店铺名称',
trigger: ['blur']
}
],
address: [
{
required: true,
message: '请选择店铺地址',
trigger: ['change', 'blur']
}
],
area: [
{
required: true,
message: '请输入店铺地址',
trigger: ['blur']
}
],
name: [
{
message: '请输入联系人',
},
{
validator: (rule, value, callback) => {
let username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,99}$/;
return username.test(value);
},
message: '请输入正确格式的联系人',
trigger: ['blur']
}
],
phone: [
{
required: true,
message: '请输入手机号码',
trigger: ['change', 'blur']
},
{
message: '请输入正确格式的手机号码',
validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
}
}
],
nature: [
{
required: true,
message: '站长性质',
trigger: ['change', 'blur']
}
],
},
title_text: "提交申请",
title_pay: "去支付",
isEdit: false,
id: '', //支付id
payType: null, // 是否已经支付
stationmaster_go_money: {},
stationmaster_code: {},
state: -1, //-1为添加 0为编辑 1 支付 2 已完成
isReject : 0 ,// 0 不是 3 是
}
},
onLoad() {
let token = uni.getStorageSync("__user_token");
this.headerInfo["X-Access-Token"] = token;
this.upload_img = this.$upload_img;
this.getIsStation()
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
methods: {
toAgreement(title, type) {
this.$tools.navigateTo({
url: `/pages/agreement/index?title=${title}&type=${type}`
})
},
// 查询站长是否存在
getIsStation() {
uni.showLoading()
this.$api('getIsStation')
.then(res => {
let { code, result, message } = res
if (code === 200) {
console.log(result)
if (result.stationmaster) {
this.form.share_id = result.pid
this.form.shop_name = result.stationmaster.shopName
this.form.name = result.stationmaster.name
this.form.phone = result.stationmaster.phone
this.form.address = result.stationmaster.shopAddress
this.form.area = result.stationmaster.address
this.form.nature = result.stationmaster.nature
this.form.latitude = result.stationmaster.latitude // 当前位置经纬度
this.form.longitude = result.stationmaster.longitude // 当前位置经纬度
this.form.idPhoto = result.stationmaster.idPhoto //正面身份证
this.form.idPhotoImage = result.stationmaster.idPhotoImage //反面身份证
this.form.hintImage = result.stationmaster.businessLicenseImage // 营业执照
this.state = result.stationmaster.state //状态
if( result.stationmaster.state == 0){
this.title_text = "审核中";
this.isEdit = true
}else if (result.stationmaster.state == 1){
this.title_text = "初步审核通过";
}else if (result.stationmaster.state == 3){
this.title_text = "编辑";
this.isEdit = true
this.isReject = result.stationmaster.state;
}
else if (result.stationmaster.state == 4){
this.title_text = "去支付";
this.isEdit = true
this.isReject = result.stationmaster.state;
}else{
this.title_text = "已完成";
}
this.id = result.stationmaster.id
this.payType = result.stationmaster.payType
// this.isEdit = true;
// 是站长
}else {
// 不是
}
this.stationmaster_code = result.stationmaster_code
this.stationmaster_go_money = result.stationmaster_go_money
uni.hideLoading();
} else {
this.$Toast(message)
uni.hideLoading();
}
})
.catch(err => {
this.$Toast(err.message)
})
},
onSuccess(data) {
this.form.idPhoto = data.result
},
onSuccess2(data){
this.form.idPhotoImage = data.result
},
onSuccess3(data){
this.form.hintImage = data.result
},
onErrorInfo(data) {
console.log(data)
if(data.code == 401){
this.$tools.navigateTo({
url: '/pages/login/login'
})
}
},
getChooseLocation() {
if(this.latitude == null && this.longitude == null){
uni.getLocation({
type: 'gcj02 ',
success: res => {
console.log(res)
this.form.latitude = res.latitude;
this.form.longitude = res.longitude;
this.handleAuthorize()
},
fail: err=> {
this.$Toast('定位失败!')
}
})
}else {
this.handleAuthorize()
}
},
// 授权定位
handleAuthorize() {
uni.chooseLocation({
latitude: this.form.latitude,
longitude: this.form.longitude,
success: res =>{
console.log(res)
this.latitude = res.latitude
this.longitude = res.longitude
},
fail: err => {
console.log(err)
}
})
},
copy (val) {
uni.setClipboardData({
data: val,
showToast: true
})
},
onMapDrag(e){
// 获取用户定位的经纬度
var map = uni.createMapContext('myMap', this);
map.getCenterLocation({
success:(res)=>{
console.log(res)
this.qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: (location) => {
let {result} = location
console.log('location=======>',result,result.formatted_addresses.recommend)
this.locale = result.formatted_addresses.recommend
},
})
setTimeout(()=>{
this.getMarkeres(res.latitude, res.longitude)
},1000)
}
})
},
submit() {
if(this.title_text == '已完成' || this.title_text == '审核中') return false
// 是否勾选协议
if(!this.isAgreement && (this.state == '-1' || this.state == '0')) {
this.$Toast('请勾选合作协议!');
return
}
// share_id //未确定
const params = {
pid: this.form.share_id,
name: this.form.name,
phone: this.form.phone,
nature: this.form.nature,
// pid: this.top_name,
shopName: this.form.shop_name,
shopAddress: this.form.address ,
address: this.form.area,
latitude: this.form.latitude,
longitude: this.form.longitude,
idPhoto: this.form.idPhoto,
idPhotoImage: this.form.idPhotoImage,
businessLicenseImage: this.form.hintImage,
}
if(this.isReject === 3) {
params.state = 3
}
if(params.nature == '非商户'){
delete params.businessLicenseImage;
}
console.log(params)
this.$refs.uForm.validate(valid => {
if (valid) {
// 检测是否都输入了
if(!this.detection()) {
return "";
}
if(this.title_text == '去支付') {
// 支付
this.payMoney()
}else {
// 是否是编辑
if(this.isEdit){
this.addStation(params,'editStation');
}else{
this.addStation(params,'addStation');
}
}
} else {
console.log('验证失败');
}
});
},
detection() {
if(this.form.latitude == null && this.form.longitude == null){
this.$Toast('请进行地图定位!');
return false;
}
if(this.hintImage == "") {
this.$Toast('请上传营业执照!');
return false;
}
if(this.idPhoto == "") {
this.$Toast('请上传身份证正面图片!');
return false;
}
if(this.idPhotoImage == "") {
this.$Toast('请上传身份证反面图片!');
return false;
}
return true
},
// 支付
payMoney(){
this.$api("createStation",{id:this.id}).then(res => {
let { code, result, message} = res;
if(code == 200) {
this.weChatPay(result)
}else {
this.$Toast(message)
}
}).catch(err => {
this.$Toast(err.message)
})
},
weChatPay (params) {
uni.requestPayment({
provider: 'wxpay',
timeStamp: params.timeStamp,
nonceStr: params.nonceStr,
package: params.packageValue,
signType: params.signType,
paySign: params.paySign,
success: res => {
this.title_text = '已完成'
this.$Toast('支付成功');
},
fail:error=>{
this.$Toast('取消支付')
}
})
},
// 提交
addStation (params,url) {
uni.showLoading()
this.$api(url,params)
.then(res => {
let { code, result, message } = res
if (code === 200) {
console.log(result)
this.$Toast(message+"请耐心等待!")
uni.hideLoading();
setTimeout(() => {
this.getIsStation();
},1500)
this.id = result.id
this.isDisabled = true
} else {
this.$Toast(message);
uni.hideLoading();
}
})
.catch(err => {
this.$Toast(err.message)
})
},
toshow(){
// 0 为编辑状态 1 支付 2已完成
if(this.state > 0) {
return
}
this.is_show = true;
console.log(this.is_show)
},
onCancel(e) {
},
selectNature(res) {
// 选择的性质
console.log(res)
const index = res[0];
this.form.nature = this.selectChange[index];
},
chooseCity(index) {
// 0 为编辑状态 1 支付 2已完成
if(this.state > 0) {
return
}
this.select_show = index;
console.log(index)
this.$refs.mpvueCityPicker.show();
},
onConfirm(e) {
// console.log(e)
let arr = e.label.split('-');
this.form.address = `${arr[0]} ${arr[1]} ${arr[2]}`
console.log(e)
},
}
}
</script>
<style lang="scss" scoped>
/deep/ .u-form-item{
padding: 0 !important;
margin: 0 !important;
}
.locate-img {
width: 50rpx;
height: 82rpx;
}
.location-img-box{
width: 80rpx;
position: absolute;
bottom: 0;
right: 20rpx;
z-index: 11;
}
.pic_box {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 40rpx;
/deep/.u-list-item {
margin: 0;
width: 264rpx !important;
height: 158rpx !important;
border-radius: 12rpx;
.u-preview-image{
width: 264rpx;
height: 158rpx;
}
image {
width: 264rpx;
height: 158rpx;
}
}
image {
width: 264rpx;
height: 158rpx;
border-radius: 12rpx;
}
}
.hint_pic{
display: flex;
flex-direction: column;
align-items: center;
margin-right: 40rpx;
/deep/.u-list-item {
margin: 0;
width: 232rpx !important;
height: 232rpx !important;
border-radius: 12rpx;
.u-preview-image{
width: 264rpx;
height: 232rpx;
}
image {
width: 232rpx;
height: 232rpx;
}
}
image {
width: 232rpx;
height: 232rpx;
border-radius: 12rpx;
}
}
.page_box{
position: relative;
.bg_img{
width: 100%;
height: 494rpx;
background-size: 750rpx 494rpx;
}
.card{
position: absolute;
top: 320rpx;
left: 38rpx;
background-color: #fff;
border-radius: 17rpx;
width: 674rpx;
padding-bottom: 50rpx;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
.row{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 17rpx;
margin-right: 20rpx;
margin-left: 40rpx;
&:first-child{
margin-top: 34rpx;
}
&:nth-child(3){
margin-left: 32rpx;
}
.mome_box{
height: inherit;
min-height: 79rpx;
border: none;
.mome_address{
width: 480rpx;
min-height: 79rpx;
box-sizing: border-box;
border: 1px solid #DCDCDC;
padding-left: 32rpx;
padding-top: 20rpx;
padding-right: 10rpx;
padding-bottom: 10rpx;
box-sizing: border-box;
font-size: 28rpx;
line-height: 36rpx;
}
}
}
.text_box{
width: 480rpx;
min-height: 79rpx;
border: 1px solid #DCDCDC;
/deep/ .u-input__input{
padding-left: 35rpx;
}
.black{
color: #000000;
}
text{
padding-left: 35rpx;
line-height: 79rpx;
font-size: 28rpx;
color: #9B9B9B;
}
}
.hint{
margin-top: 33rpx;
margin-left: 32rpx;
margin-bottom: 39rpx;
font-size: 28rpx;
color: #000000;
}
.img_box{
margin-left: 59rpx;
display: flex;
}
.sumbtn{
width: 611rpx;
height: 88rpx;
margin-top: 70rpx;
border-radius: 38rpx;
background-color: #01AEEA;
color: #fff;
font-size: 28rpx;
line-height: 88rpx;
text-align: center;
}
.sumbtn_pay{
width: 611rpx;
height: 88rpx;
margin-top: 70rpx;
border-radius: 38rpx;
background-color: #FF0000;
color: #fff;
font-size: 28rpx;
line-height: 88rpx;
text-align: center;
}
.sumbtn_shz{
width: 611rpx;
height: 88rpx;
margin-top: 70rpx;
border-radius: 38rpx;
background-color: #C0C0C0;
color: #fff;
font-size: 28rpx;
line-height: 88rpx;
text-align: center;
}
.sumbtn_success{
width: 611rpx;
height: 88rpx;
margin-top: 70rpx;
border-radius: 38rpx;
background-color: #00FF00;
color: #fff;
font-size: 28rpx;
line-height: 88rpx;
text-align: center;
}
.sumbtn{
width: 611rpx;
height: 88rpx;
margin-top: 70rpx;
border-radius: 38rpx;
background-color: #01AEEA;
color: #fff;
font-size: 28rpx;
line-height: 88rpx;
text-align: center;
}
.sumbtn_stop{
background-color: #a5a5a5;
}
.pay_info{
width: 611rpx;
height: 102rpx;
margin: 0 auto;
border-radius: 17rpx;
line-height: 102rpx;
text-align: center;
background-color: #FFEDCF;
color: #8B5B13;
margin-top: 17rpx;
text{
&:nth-child(1){
font-size: 36rpx;
}
&:nth-child(2){
font-size: 50rpx;
}
&:nth-child(3){
font-size: 30rpx;
}
}
}
.red{
background-color: #DB0618;
}
.success{
background-color: #1AA810;
}
}
}
// 合作协议样式
.login-agreement--text{
color: $u-type-primary;
}
.my-header-copy--txt{
margin-left: 20rpx;
opacity: 0.4;
background: #000000;
width: 100rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
border-radius: 10rpx;
}
</style>