Skip to content

html / wanda-ball

Go to a project
Commit afdde5b8 by hank
Options

bug

parent d4c16422
Showing with 339 additions and 313 deletions
src/pages/user/Address.vue
<template>
<section class="mainWrap">
<group>
<x-input title="姓&nbsp;&nbsp;&nbsp;&nbsp;名:" v-model="realName" placeholder="姓名"></x-input>
<x-input title="手机号:" is-type="china-mobile" v-model="phoneNumber" placeholder="11位手机号"></x-input>
<cell title="城市" is-link :value="area" placeholder="您所在的城市" value-align="left" @click.native="showPopupVisible">
<div slot="title">
城&nbsp;&nbsp;&nbsp;&nbsp;市:
</div>
<div>
<span v-if="!area" style="color: #aab2bd">您所在的城市</span>
<span v-else style="color: black">{{area}}</span>
</div>
</cell>
<x-textarea
title="地&nbsp;&nbsp;&nbsp;&nbsp;址:"
v-model="address"
placeholder="您的详细地址"
></x-textarea>
<!-- <x-input title="摄协单位:" v-model="company" placeholder="摄协单位"></x-input> -->
</group>
<div class="textBox">
<p>说明:</p>
<p>此地址将作为您的奖品收货地址</p>
<p>请确认您的提交信息正确无误</p>
<p>如因填写信息错误导致未能收到奖品，责任自负哦~</p>
<section class="mainWrap">
<group>
<x-input title="姓&nbsp;&nbsp;&nbsp;&nbsp;名:" v-model="realName" placeholder="姓名"></x-input>
<x-input title="手机号:" is-type="china-mobile" v-model="phoneNumber" placeholder="11位手机号"></x-input>
<cell
title="城市"
is-link
:value="area"
placeholder="您所在的城市"
value-align="left"
@click.native="showPopupVisible"
>
<div slot="title">城&nbsp;&nbsp;&nbsp;&nbsp;市:</div>
<div>
<span v-if="!area" style="color: #aab2bd">您所在的城市</span>
<span v-else style="color: black">{{area}}</span>
</div>
<div class="save" @click="save">保存</div>
<popup
class="select"
v-model="popupVisible"
position="bottom"
>
<div class="noy">
<p class="no" @click="handleNot">取消</p>
<p class="yes" @click="handleYes">确定</p>
</div>
<picker :slots="slots" @change="onValuesChange" @touchmove.prevent :valueKey="'name'"></picker>
</popup>
</section>
</cell>
<x-textarea title="地&nbsp;&nbsp;&nbsp;&nbsp;址:" v-model="address" placeholder="您的详细地址"></x-textarea>
<!-- <x-input title="摄协单位:" v-model="company" placeholder="摄协单位"></x-input> -->
</group>
<div class="textBox">
<p>说明:</p>
<p>此地址将作为您的奖品收货地址</p>
<p>请确认您的提交信息正确无误</p>
<p>如因填写信息错误导致未能收到奖品，责任自负哦~</p>
</div>
<div class="save" @click="save">保存</div>
<popup class="select" v-model="popupVisible" position="bottom">
<div class="noy">
<p class="no" @click="handleNot">取消</p>
<p class="yes" @click="handleYes">确定</p>
</div>
<picker :slots="slots" @change="onValuesChange" @touchmove.prevent :valueKey="'name'"></picker>
</popup>
</section>
</template>
<script>
import { Group, XInput, XTextarea, Cell } from 'vux';
import { MessageBox, Toast, Picker, Popup } from 'mint-ui';
import citys from './/assets/city.js'
import axios from 'axios';
import { clearTimeout } from 'timers';
import { Group, XInput, XTextarea, Cell } from "vux";
import { MessageBox, Toast, Picker, Popup } from "mint-ui";
import citys from ".//assets/city.js";
import axios from "axios";
import { clearTimeout } from "timers";
export default {
data() {
return {
realName: '',
phoneNumber: '',
address: '',
company: '',
userId: '',
alertOnoff: false,
area: '',
popupVisible: false,
slots: [
{
flex: 1,
defaultIndex: 0,
values: [],
className: 'slot1',
textAlign: 'center'
},{
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: [],
className: 'slot3',
textAlign: 'center'
},{
divider: true,
content: '-',
className: 'slot4'
}, {
flex: 1,
values: [],
className: 'slot3',
textAlign: 'center'
}
],
addressTemp: ['请选择', '请选择', '请选择'],
address1: '',
};
},
created() {
let city = citys.provinceList;
let [obj1, obj2, obj3] = [[],[],[]];
for(let i = 0; i < city.length; i++){
let obj = {
name: city[i].name,
id: city[i].id,
childs: city[i].childs
}
// console.log(obj.childs)
obj1[i] = obj
}
obj2 = obj1[0].childs
obj3 = obj2[0].childs
console.log(obj1[0].childs, 'obj1')
this.obj2 = obj1[0].childs
console.log(this.obj2, 'obj2')
this.obj3 = obj2[0].childs
console.log(obj3, 'obj3')
// console.log(obj1, obj2, obj3, this.obj3)
this.slots[0].values = obj1
this.slots[2].values = obj2
this.slots[4].values = obj3
// console.log(this.slots)
this.hiddenBar();
this.getUserInfo();
},
activated() {
this.getUserInfo()
},
methods: {
getUserInfo() {
axios.get('/contest/user/info').then(res => {
// alert(JSON.stringify(res.data.data))
this.realName = res.data.data.real_name.trim();
this.phoneNumber = res.data.data.mobile.trim();
this.address = res.data.data.address.trim();
this.area = res.data.data.area.trim();
this.userId = res.data.data.id;
this.company = res.data.data.company.trim();
});
data() {
return {
realName: "",
phoneNumber: "",
address: "",
company: "",
userId: "",
alertOnoff: false,
area: "",
popupVisible: false,
slots: [
{
flex: 1,
defaultIndex: 0,
values: [],
className: "slot1",
textAlign: "center"
},
getIndex(arr, key, value) {
// let arr = []
var children = []
var index
for(let i = 0; i < arr.length; i++){
let obj = {
name: arr[i].name,
id: arr[i].id,
childs: arr[i].childs
}
// arr[i] = obj
if(arr[i][key] === value ) {
index = i
children = arr[i].children
}
}
return index
{
divider: true,
content: "-",
className: "slot2"
},
onValuesChange(p, v){
this.Picker = p
// if(this.area) {
// p.setValues(this.address)
// }
console.log(v)
if (v[0]) {
p.setSlotValues(1, v[0].childs)
}
if (v[1]) {
p.setSlotValues(2, v[1].childs)
}
this.address3 = v
{
flex: 1,
values: [],
className: "slot3",
textAlign: "center"
},
showPopupVisible() {
if(this.area) {
this.addressTemp = JSON.parse(JSON.stringify(this.area)).split('-')
let index , index2, index3
index = this.getIndex( citys.provinceList, 'name', this.addressTemp[0])
index2 = this.getIndex( citys.provinceList[index].childs, 'name', this.addressTemp[1])
index3 = this.getIndex( citys.provinceList[index].childs[index2].childs, 'name', this.addressTemp[2])
console.log(index , index2, index3 , citys.provinceList[index].childs[index2].childs, 'aaaa')
this.slots[0].defaultIndex = index
this.slots[2].defaultIndex = index2
this.slots[4].defaultIndex = index3
}
this.popupVisible = true;
{
divider: true,
content: "-",
className: "slot4"
},
handleNot(){
this.popupVisible = false;
},
//确认
handleYes(){
this.address3 = this.address3.map(item => {
return item.name
})
if(this.address3.length && this.address3.includes('请选择')) {
return
}
if(this.address3.join('-') !== '' && this.address3.join('-') !== '--' ) {
this.area = this.address3.join('-')
}
this.popupVisible = false;
},
save() {
if (!this.realName.trim()) {
Toast({ message: '姓名必须填写' });
return
}
{
flex: 1,
values: [],
className: "slot3",
textAlign: "center"
}
],
addressTemp: ["请选择", "请选择", "请选择"],
address1: ""
};
},
mounted() {
var modal = document.getElementsByClassName("mint-popup")[0];
modal.addEventListener(
"touchmove",
function(e) {
e.preventDefault();
},
false
);
},
created() {
let city = citys.provinceList;
let [obj1, obj2, obj3] = [[], [], []];
for (let i = 0; i < city.length; i++) {
let obj = {
name: city[i].name,
id: city[i].id,
childs: city[i].childs
};
// console.log(obj.childs)
obj1[i] = obj;
}
obj2 = obj1[0].childs;
obj3 = obj2[0].childs;
console.log(obj1[0].childs, "obj1");
this.obj2 = obj1[0].childs;
console.log(this.obj2, "obj2");
this.obj3 = obj2[0].childs;
console.log(obj3, "obj3");
// console.log(obj1, obj2, obj3, this.obj3)
this.slots[0].values = obj1;
this.slots[2].values = obj2;
this.slots[4].values = obj3;
// console.log(this.slots)
this.hiddenBar();
this.getUserInfo();
},
activated() {
this.getUserInfo();
},
methods: {
getUserInfo() {
axios.get("/contest/user/info").then(res => {
// alert(JSON.stringify(res.data.data))
this.realName = res.data.data.real_name.trim();
this.phoneNumber = res.data.data.mobile.trim();
this.address = res.data.data.address.trim();
this.area = res.data.data.area.trim();
this.userId = res.data.data.id;
this.company = res.data.data.company.trim();
});
},
getIndex(arr, key, value) {
// let arr = []
var children = [];
var index;
for (let i = 0; i < arr.length; i++) {
let obj = {
name: arr[i].name,
id: arr[i].id,
childs: arr[i].childs
};
// arr[i] = obj
if (arr[i][key] === value) {
index = i;
children = arr[i].children;
}
}
return index;
},
onValuesChange(p, v) {
this.Picker = p;
// if(this.area) {
// p.setValues(this.address)
// }
console.log(v);
if (v[0]) {
p.setSlotValues(1, v[0].childs);
}
if (v[1]) {
p.setSlotValues(2, v[1].childs);
}
this.address3 = v;
},
showPopupVisible() {
if (this.area) {
this.addressTemp = JSON.parse(JSON.stringify(this.area)).split("-");
let index, index2, index3;
index = this.getIndex(citys.provinceList, "name", this.addressTemp[0]);
index2 = this.getIndex(
citys.provinceList[index].childs,
"name",
this.addressTemp[1]
);
index3 = this.getIndex(
citys.provinceList[index].childs[index2].childs,
"name",
this.addressTemp[2]
);
console.log(
index,
index2,
index3,
citys.provinceList[index].childs[index2].childs,
"aaaa"
);
this.slots[0].defaultIndex = index;
this.slots[2].defaultIndex = index2;
this.slots[4].defaultIndex = index3;
}
this.popupVisible = true;
},
handleNot() {
this.popupVisible = false;
},
//确认
handleYes() {
this.address3 = this.address3.map(item => {
return item.name;
});
if (this.address3.length && this.address3.includes("请选择")) {
return;
}
if (this.address3.join("-") !== "" && this.address3.join("-") !== "--") {
this.area = this.address3.join("-");
}
this.popupVisible = false;
},
save() {
if (!this.realName.trim()) {
Toast({ message: "姓名必须填写" });
return;
}
if (!this.phoneNumber.trim()) {
Toast({ message: '手机号码必须填写' });
return
}
if (!this.phoneNumber.trim()) {
Toast({ message: "手机号码必须填写" });
return;
}
if (!this.area.trim()) {
Toast({ message: '所在城市必须填写' });
return
}
if (!this.area.trim()) {
Toast({ message: "所在城市必须填写" });
return;
}
axios
.post('/contest/user/save', {
address: this.address.trim(),
area: this.area.trim(),
real_name: this.realName.trim(),
mobile: this.phoneNumber.trim(),
id: this.userId,
company: this.company
})
.then(res => {
console.log(res);
if (res.data.code === 0) {
Toast({ message: '保存成功' });
setTimeout(() => {
if (location.href.includes('isIndex')) {
window.wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
window.wx.miniProgram.navigateTo({url: '/pages/upload/upload'})
} else {
this.$router.push({ path: '/imgup' });
}
})
} else {
this.$router.push({ path: '/' });
}
}, 500);
} else {
Toast({ message: '保存失败' });
}
}).catch((err) => {
console.log(err);
Toast({ message: err.response.data.msg });
axios
.post("/contest/user/save", {
address: this.address.trim(),
area: this.area.trim(),
real_name: this.realName.trim(),
mobile: this.phoneNumber.trim(),
id: this.userId,
company: this.company
})
.then(res => {
console.log(res);
if (res.data.code === 0) {
Toast({ message: "保存成功" });
setTimeout(() => {
if (location.href.includes("isIndex")) {
window.wx.miniProgram.getEnv(res => {
if (res.miniprogram) {
window.wx.miniProgram.navigateTo({
url: "/pages/upload/upload"
});
} else {
this.$router.push({ path: "/imgup" });
}
});
},
hiddenBar() {
document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
// WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
// WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
// WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
});
},
} else {
this.$router.push({ path: "/" });
}
}, 500);
} else {
Toast({ message: "保存失败" });
}
})
.catch(err => {
console.log(err);
Toast({ message: err.response.data.msg });
});
},
components: {
Group,
XInput,
XTextarea,
Cell,
Picker, Popup
hiddenBar() {
document.addEventListener(
"WeixinJSBridgeReady",
function onBridgeReady() {
WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
// WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
// WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
// WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
}
);
}
},
components: {
Group,
XInput,
XTextarea,
Cell,
Picker,
Popup
}
};
</script>
......@@ -274,75 +300,75 @@ export default {
// @import '~vux/src/styles/reset.less';
.mainWrap {
.picker{
width: 100vw;
}
.noy{
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: .28rem 10vw;
font-size: 0.5rem;
.no { }
.yes {
}
.picker {
width: 100vw;
}
.noy {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0.28rem 10vw;
font-size: 0.5rem;
.no {
}
background: #f5f5f5;
height: 100%;
overflow: hidden;
.weui-cell_access .weui-cell__ft:after {
content: " ";
display: inline-block;
height: 0.28rem;
width: 0.28rem;
}
.weui-cell {
font-size: 34px !important;
padding: 24px !important;
.yes {
}
}
background: #f5f5f5;
height: 100%;
overflow: hidden;
.weui-cell_access .weui-cell__ft:after {
content: " ";
display: inline-block;
height: 0.28rem;
width: 0.28rem;
}
.weui-cell {
font-size: 34px !important;
padding: 24px !important;
}
.weui-cells {
margin-top: 0;
}
.weui-cells {
margin-top: 0;
}
.vux-no-group-title {
margin-top: 0;
}
.vux-no-group-title {
margin-top: 0;
}
label {
width: 5em !important;
}
label {
width: 5em !important;
}
.weui_icon_clear {
font-size: 30px;
}
.weui_icon_clear {
font-size: 30px;
}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
color: #aab2bd;
font-size: 32px;
text-align: left;
}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
color: #aab2bd;
font-size: 32px;
text-align: left;
}
.textBox {
color: #ccc;
font-size: 30px;
line-height: 45px;
padding-left: 20px;
padding-top: 100px;
}
.textBox {
color: #ccc;
font-size: 30px;
line-height: 45px;
padding-left: 20px;
padding-top: 100px;
}
.save {
width: 100%;
height: 90px;
line-height: 90px;
text-align: center;
color: white;
position: absolute;
bottom: 0;
font-size: 38px;
background: #2459a8;
}
.save {
width: 100%;
height: 90px;
line-height: 90px;
text-align: center;
color: white;
position: absolute;
bottom: 0;
font-size: 38px;
background: #2459a8;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment