版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/88988508
页面效果如下
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>共享农场-我要开店</title>
<script src="../script/jquery-1.10.2.js"></script>
<script src="../script/bootstrap.js"></script>
<script src="../script/beseller.js"></script>
<script src="../script/api.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
#step1{
display:block;
}
#step2,#step3,#step4{
display: none;
}
#step1,#step2,#step3,#step4{
position: absolute;
width: 96%;
height: 40%;
left: 2%;
top: 43%;
}
.inp{
width: 100%;
height: 50px;
border: 1px solid #cccccc;
font-size: 16px;
margin-top: 6%;
}
.poster{
width:100%;
height: 40%;
position: relative;
}
#avatar{
width:150px;
height: 150px;
}
</style>
<body>
<div class="row">
<img src="../image/ruzhu.PNG" class="poster"/>
</div>
<!-- 下一步，下一步 -->
<div id="step1" >
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">商铺名称</h3>
</div>
<div class="panel-body">
<input type="text" placeholder="请输入商铺名称" class="inp"/><br><br>
<button type="button" class="btn btn-success" onclick="getnext('step2')" >下一步</button>
</div>
</div>
</div>
<div id="step2">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">手机号码</h3>
</div>
<div class="panel-body">
<input type="text" placeholder="手机号码" class="inp"/><br><br>
<button type="button" class="btn btn-primary" onclick="getnext('step1')">上一步</button>
<button type="button" class="btn btn-success" onclick="getnext('step3')">下一步</button>
</div>
</div>
</div>
<!-- 下一步，下一步 -->
<div id="step3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">实体店地址</h3>
</div>
<div class="panel-body">
<input type="text" placeholder="地址" id="address" class="inp"/>
<button onclick="fnopen()">请选择地址</button><br><br>
<button type="button" class="btn btn-primary" onclick="getnext('step2')">上一步</button>
<button type="button" class="btn btn-success" onclick="getnext('step4')">下一步</button>
</div>
</div>
</div>
<!-- 下一步，下一步 -->
<div id="step4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">店铺图标</h3>
</div>
<div class="panel-body">
<img src="../image/file.png" onclick="showAction();" id="avatar"/>
<br><br>
<button type="button" class="btn btn-primary" onclick="getnext('step3')">上一步</button>
<button type="button" class="btn btn-primary" onclick="getnext('step3')">我要开店</button>
</div>
</div>
</div>
</body>
<script>
function getnext(i){
var sz=new Array("step1","step2","step3","step4");
for(var j=0;j<sz.length;j++){
if(i==sz[j]){
document.getElementById(i).style.display="block";
}else{
document.getElementById(sz[j]).style.display="none";
}
}
}
</script>
</html>
beseller.js代码
//调用手机相册和相机
var imgSrc="";
function showAction(){
api.actionSheet({
title: '上传头像',
cancelTitle: '取消',
buttons: ['拍照','从手机相册选择']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);
}
});
}
//获取相机还是相册
function getPicture(sourceType) {
var user=$api.getStorage('username');
if(sourceType==1){ // 拍照
//获取一张图片
api.getPicture({
sourceType: 'camera', //拍照
encodingType: 'png',
mediaValue: 'pic',
allowEdit: false,
//destinationType: 'base64', //返回base64地址
quality: 90,
saveToPhotoAlbum: true
}, function(ret, err) {
//var imgSrc = ret.base64Data; 如果是base64，要用这个属性获取地址
// 获取拍照数据并处理
if (ret) {
imgSrc = ret.data;
if (imgSrc != "") {
var ele=$api.dom('#avatar');
$api.attr(ele,'src',imgSrc);
//最后一步
//ajax
api.ajax({
url: 'http://192.168.0.107:8080/jiekou/cim.action',
method: 'post',
data: {
values: {
name: user
},
files: {
file: imgSrc
}
}
},function(ret, err){
if (ret) {
alert("上传成功");
}
});
//ajax
//最后一步
}
}
});
}else if(sourceType==2){ // 从相册中选择
api.getPicture({
sourceType: 'album', //从相册中选择
encodingType: 'jpg',
mediaValue: 'pic',
allowEdit: false,
//destinationType: 'base64', //返回base64地址
quality: 90,
saveToPhotoAlbum: true
}, function(ret, err) {
// 获取拍照数据并处理
//var imgSrc = ret.base64Data; 如果是base64，要用这个属性获取地址
if (ret) {
imgSrc = ret.data;
if (imgSrc != "") {
var ele=$api.dom('#avatar');
$api.attr(ele,'src',imgSrc);
//最后一步
//ajax
api.ajax({
url: '',
method: 'post',
data: {
values: {
name: user
},
files: {
file: imgSrc
}
}
},function(ret, err){
if (ret) {
alert("上传成功");
}
});
//ajax
//最后一步
}
}
});
}
}
//调用手机相册和相机
//三联地址
function fnopen() {
var UIActionSelector = api.require('UIActionSelector');
UIActionSelector.open({
datas: 'widget://res/city.json',
layout: {
row: 5,
col: 3,
height: 30,
size: 12,
sizeActive: 14,
rowSpacing: 5,
colSpacing: 10,
maskBg: 'rgba(0,0,0,0.2)',
bg: '#008000',
color: '#fff',
colorActive: '#f00',
colorSelected: '#000'
},
animation: true,
cancel: {
text: '取消',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
ok: {
text: '确定',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
title: {
text: '请选择',
size: 12,
h: 44,
bg: '#eee',
color: '#888'
},
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
UIActionSelector.getActive(function(ret, err) {
if (ret) {
var pro=JSON.stringify(ret.level1);
pro=pro.substring(1,pro.length-1);
var city=JSON.stringify(ret.level2);
city=city.substring(1,city.length-1);
var x=JSON.stringify(ret.level3);
x=x.substring(1,x.length-1);
document.getElementById("address").value=pro+city+x;
}
});
}
});
}
//三联地址
除了上述的代码以外，还要一些json文件做支撑
完成的代码在这里https://download.csdn.net/download/qq_37591637/11084688