jinna
3 years ago
parent
935d7125b8
commit
460089cf03
21 changed files with 17030 additions and 75 deletions
@ -0,0 +1,4 @@ |
||||
const DOMAIN_PREFIX = "http://47.104.224.41:80"; |
||||
module.exports = { |
||||
save: DOMAIN_PREFIX + "/blade-desk/custom-made-info/save", |
||||
} |
||||
@ -0,0 +1,915 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<page-meta :root-font-size="fontsize+'px'"></page-meta> <!--动态设置html字体大小--> |
||||
<view class="content_box"> |
||||
<view class="rele_content"> |
||||
<view class="form_box"> |
||||
<view class="top_header"> |
||||
<img class="top_img" src="../../../static/image/top.png" alt=""> |
||||
</view> |
||||
<view class="top_content"> |
||||
<view class="title"> |
||||
枕头定制信息表 |
||||
</view> |
||||
<view class="content"> |
||||
<p style="font-size: 0.28rem;">不满意一直换，直到满意为止。</p> |
||||
<p style="font-size: 0.28rem;"> |
||||
<span style="color: hsl(354,74%,57%);margin-right: 0.1rem;">统一定制价格：699元</span> |
||||
包邮到家 |
||||
</p> |
||||
<p style="font-size: 0.28rem;">如需定制请点击表格右下方小电话，长按二维码添加微信沟通付款。</p> |
||||
<p style="font-size: 0.28rem;">最终解释权归青岛易旅家居科技有限公司所有。</p> |
||||
</view> |
||||
</view> |
||||
<view class="form_content"> |
||||
<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="180px" |
||||
label-position="top"> |
||||
<uni-forms-item label="姓名" required name="username" :label-style="{'font-size':'40rpx'}"> |
||||
<uni-easyinput v-model="valiFormData.username" placeholder="请输入姓名" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="手机" required name="phone"> |
||||
<uni-easyinput v-model="valiFormData.phone" placeholder="请输入手机" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地址" required name="address"> |
||||
<!-- <uni-data-picker v-model="valiFormData.city" :localdata="aCityData" popup-title="选择城市"> |
||||
</uni-data-picker> --> |
||||
<!-- <view class=""> |
||||
<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">顶部</text></button> |
||||
</view> --> |
||||
|
||||
<picker class="picker_box" :range="locationArr" @change="cityChange" mode="multiSelector" |
||||
@columnchange="columnchange" :value="multiIndex"> |
||||
<view class="city_box" v-show="province !== '' && city !== ''"> |
||||
{{province}} / {{city}} {{district ? '/' : ''}} {{district}} |
||||
</view> |
||||
<view class="city_box" v-show="province == '' && city == '' && district == ''"> |
||||
<span style="color: #999;">请选择地区</span> |
||||
</view> |
||||
</picker> |
||||
<uni-easyinput class="address_item" v-model="valiFormData.address" placeholder="详细地址" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="身高" required name="height"> |
||||
<p class="item_txt">单位：厘米cm</p> |
||||
<uni-easyinput v-model="valiFormData.height" placeholder="请输入身高" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="体重" required name="weight"> |
||||
<p class="item_txt">单位：公斤kg</p> |
||||
<uni-easyinput v-model="valiFormData.weight" placeholder="请输入体重" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="肩颈宽度"> |
||||
<p class="item_txt">单位：厘米cm</p> |
||||
<uni-easyinput v-model="valiFormData.neckShoulderWidth" placeholder="请输入肩颈宽度" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="颈肩宽度示意图"> |
||||
<view class="wid_pre"> |
||||
<img class="wid_img" src="../../../static/image/jian.png" alt=""> |
||||
<uni-data-checkbox v-model="valiFormData.width" :localdata="widthData" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="颈长"> |
||||
<p class="item_txt">单位：厘米cm</p> |
||||
<uni-easyinput v-model="valiFormData.neckLength" placeholder="请输入颈长" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="颈长示意图"> |
||||
<view class="hei_pre"> |
||||
<img class="hei_img" src="../../../static/image/length.jpg" alt=""> |
||||
<uni-data-checkbox v-model="valiFormData.length" :localdata="lengthData" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="年龄"> |
||||
<uni-data-checkbox v-model="valiFormData.ageRange" :localdata="ageData" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="您每晚的睡眠时间"> |
||||
<uni-data-checkbox v-model="valiFormData.sleepLength" :localdata="sleepData" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="您习惯的睡眠姿势" required name="sleepingPosture"> |
||||
<view class="pos_box"> |
||||
<view class="pos_pre"> |
||||
<img class="hei_img" src="../../../static/image/yang.jpg" alt=""> |
||||
<uni-data-checkbox v-model="valiFormData.sleepingPosture" |
||||
:localdata="sleepPosData" /> |
||||
</view> |
||||
<view class="pos_pre"> |
||||
<img class="hei_img" src="../../../static/image/ce.jpg" alt=""> |
||||
<uni-data-checkbox v-model="valiFormData.sleepingPosture" |
||||
:localdata="sleepPosData1" /> |
||||
</view> |
||||
</view> |
||||
|
||||
</uni-forms-item> |
||||
<uni-forms-item label="您习惯的枕头软硬度" required name="pillowHardness"> |
||||
<uni-data-checkbox v-model="valiFormData.pillowHardness" :localdata="posData" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="您喜欢的枕头类型" required name="pillowMaterial"> |
||||
<uni-data-checkbox v-model="valiFormData.pillowMaterial" :localdata="matData" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="您现在的颈椎出现问题了吗"> |
||||
<uni-data-checkbox v-model="valiFormData.cervicalVertebra" :localdata="cerData" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="您的其他需求"> |
||||
<uni-easyinput type="textarea" v-model="valiFormData.otherNeed" /> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<button class="btn_box" @click="submit('valiForm')">提交</button> |
||||
<!-- <uni-popup ref="popup" background-color="#fff" @change="change"> |
||||
<picker :range="locationArr" @change="cityChange" mode="multiSelector" @columnchange="columnchange" |
||||
:value="multiIndex"> |
||||
<view class="city_box" v-show="province !== '' && city !== ''"> |
||||
{{province}} / {{city}} {{district ? '/' : ''}} {{district}} |
||||
</view> |
||||
<view class="city_box" v-show="province == '' && city == '' && district == ''"> |
||||
<span style="color: #999;">请选择地区</span> |
||||
</view> |
||||
</picker> |
||||
</uni-popup> --> |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<!-- <a href="#page_privacy_modal" data-toggle="modal">《隐私协议》</a> --> |
||||
<span>提交即授权该表单收集你的填写信息</span> |
||||
</view> |
||||
<view class="mask_box" v-show="isShowCode"></view> |
||||
<view class="phone_box" @click="clickPhone" v-show="widthScreen <= 500"> |
||||
<uni-icons type="phone" size="30" color="#2eaadd"></uni-icons> |
||||
</view> |
||||
<view class="code_box" v-show="isShowCode"> |
||||
<span style="color: #333;font-size: 0.28rem;margin-bottom: 0.12rem;">扫码添加</span> |
||||
<img class="code_img" src="../../../static/image/add.png" alt=""> |
||||
</view> |
||||
<view class="link_box" v-show="widthScreen > 750" @click="isShowLink = !isShowLink"> |
||||
<uni-icons type="phone" size="20" color="#2eaadd"></uni-icons> |
||||
联系我们 |
||||
</view> |
||||
<view class="add_item" v-show="isShowLink"> |
||||
<span style="color: #333;font-size: 0.28rem;margin-bottom: 0.12rem;">扫码添加</span> |
||||
<img class="code_img" src="../../../static/image/add.jpg" alt=""> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
<script> |
||||
import aCityData from "../../../util/city.json"; |
||||
import allCityData from "../../../util/all_city.json" |
||||
const NET = require('@/util/request') |
||||
const API = require('@/config/api') |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
isShowLink:false, |
||||
fontsize: 12, |
||||
// 校验表单数据 |
||||
valiFormData: {}, |
||||
isShowCode: false, |
||||
aCityData, |
||||
allCityData, |
||||
userArea: '', |
||||
province: '', |
||||
city: '', |
||||
district: '', |
||||
widthScreen: '', |
||||
locationIndex: 0, |
||||
locationArr: [ |
||||
[], |
||||
[], |
||||
[] |
||||
], |
||||
multiIndex: [0, 0, 0], |
||||
select: '', |
||||
rules: { |
||||
username: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '姓名不能为空' |
||||
}] |
||||
}, |
||||
phone: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '手机号不能为空' |
||||
}, { |
||||
validateFunction: function(rule, value, data, callback) { |
||||
const moblie = /^1(3|4|5|6|7|8|9)\d{9}$/; |
||||
if (!moblie.test(value)) { |
||||
callback('请填写正确的手机号格式'); |
||||
} else { |
||||
return true; |
||||
} |
||||
} |
||||
}] |
||||
}, |
||||
address: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '地址不能为空' |
||||
}] |
||||
}, |
||||
height: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '身高不能为空' |
||||
}] |
||||
}, |
||||
weight: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '体重不能为空' |
||||
}] |
||||
}, |
||||
pillowHardness: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '请选择枕头软硬度' |
||||
}] |
||||
}, |
||||
pillowMaterial: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '请选择枕头类型' |
||||
}] |
||||
}, |
||||
sleepingPosture: { |
||||
rules: [{ |
||||
required: true, |
||||
errorMessage: '请选择睡眠姿势' |
||||
}] |
||||
}, |
||||
|
||||
}, |
||||
lengthData: [{ |
||||
text: '颈椎长度', |
||||
value: '1' |
||||
}], |
||||
widthData: [{ |
||||
text: '颈肩宽度', |
||||
value: '1' |
||||
}], |
||||
// 年龄数据源 |
||||
ageData: [{ |
||||
text: '18~30', |
||||
value: '18~30' |
||||
}, { |
||||
text: '31~50', |
||||
value: '31~50' |
||||
}, { |
||||
text: '51~60', |
||||
value: '51~60' |
||||
}, { |
||||
text: '60以上', |
||||
value: '60以上' |
||||
}], |
||||
//睡眠范围 |
||||
sleepData: [{ |
||||
text: '2~4小时', |
||||
value: '2~4小时' |
||||
}, { |
||||
text: '4~6小时', |
||||
value: '4~6小时' |
||||
}, { |
||||
text: '6~8小时', |
||||
value: '6~8小时' |
||||
}, { |
||||
text: '8小时以上', |
||||
value: '8小时以上' |
||||
}], |
||||
// 枕头软硬度 |
||||
posData: [{ |
||||
text: '偏硬', |
||||
value: '1' |
||||
}, { |
||||
text: '适中', |
||||
value: '2' |
||||
}, { |
||||
text: '偏软', |
||||
value: '3' |
||||
}], |
||||
// 枕头材质 |
||||
matData: [{ |
||||
text: '羽丝绒枕', |
||||
value: '1' |
||||
}, |
||||
{ |
||||
text: '草本植物枕(荞麦、决明子等)', |
||||
value: '2' |
||||
}, |
||||
{ |
||||
text: '乳胶枕', |
||||
value: '3' |
||||
}, |
||||
{ |
||||
text: '慢回弹记忆枕', |
||||
value: '4' |
||||
}, |
||||
{ |
||||
text: '软管枕', |
||||
value: '5' |
||||
}, |
||||
{ |
||||
text: '其他', |
||||
value: '6' |
||||
}, |
||||
], |
||||
cerData: [{ |
||||
text: "是", |
||||
value: 1 |
||||
}, |
||||
{ |
||||
text: "否", |
||||
value: 0 |
||||
}, |
||||
], |
||||
sleepPosData: [{ |
||||
text: '仰睡', |
||||
value: 1 |
||||
}, |
||||
|
||||
], |
||||
sleepPosData1: [{ |
||||
text: '侧睡', |
||||
value: 2 |
||||
}, ] |
||||
} |
||||
}, |
||||
onShow(){ |
||||
console.log(getApp().globalData) |
||||
}, |
||||
onLoad() { |
||||
// let srceenNunber=15; //因设计图是1920所有把设计图分为19.2份，所以html字体大小为100px |
||||
let that = this; |
||||
|
||||
// //窗体改变大小触发事件 |
||||
// uni.onWindowResize((res) => { |
||||
// console.log('变化后的窗口宽度=' ,res.size.windowWidth); |
||||
// that.fontsize=parseFloat(res.size.windowWidth)/srceenNunber; |
||||
// }) |
||||
|
||||
// //打开获取屏幕大小 |
||||
// uni.getSystemInfo({ |
||||
// success(res) { |
||||
// console.log('设备信息：',res); |
||||
// that.fontsize=res.screenWidth/srceenNunber; |
||||
// console.log('字体大小：',that.fontsize); |
||||
// } |
||||
// }) |
||||
const res = uni.getSystemInfoSync(); |
||||
console.log(res.screenWidth) |
||||
that.widthScreen = res.screenWidth |
||||
if (res.screenWidth < 750) { |
||||
that.fontsize = 100 * (res.screenWidth / 750) |
||||
} else if (res.screenWidth > 750 && res.screenWidth == 1920) { |
||||
that.fontsize = 100 * (res.screenWidth / 3840) |
||||
}; |
||||
// console.log(this.a) |
||||
this.getData() |
||||
|
||||
}, |
||||
methods: { |
||||
toggle(type) { |
||||
this.$refs.popup.open(type) |
||||
}, |
||||
clickPhone() { |
||||
this.isShowCode = !this.isShowCode; |
||||
}, |
||||
getData() { |
||||
console.log(this.allCityData) |
||||
this.allCityData.map(item => { |
||||
this.locationArr[0].push(item.province); |
||||
}) |
||||
this.allCityData[0].citys[0].areas.map(item => { |
||||
this.locationArr[1].push(item.area) |
||||
}) |
||||
|
||||
console.log(this.locationArr) |
||||
}, |
||||
cityChange(e) { |
||||
console.log(e) |
||||
this.multiIndex = e.detail.value; |
||||
console.log(this.locationArr) |
||||
this.province = this.locationArr[0][this.multiIndex[0]] |
||||
this.city = this.locationArr[1][this.multiIndex[1]] |
||||
this.district = this.locationArr[2][this.multiIndex[2]] |
||||
}, |
||||
columnchange(e) { |
||||
let value = e.detail.value; |
||||
console.log(e.detail) |
||||
if (e.detail.column == 0) { |
||||
this.locationArr[1] = []; |
||||
this.locationArr[2] = [] |
||||
let tmp = this.allCityData.find(item => item.province == this.locationArr[0][value]) |
||||
console.log(tmp) |
||||
if (tmp.citys.length == 1) { |
||||
tmp.citys[0].areas.map(item => { |
||||
this.locationArr[1].push(item.area) |
||||
}) |
||||
} else { |
||||
tmp.citys.map(item => { |
||||
this.locationArr[1].push(item.city) |
||||
}) |
||||
tmp.citys[0].areas.map(item => { |
||||
this.locationArr[2].push(item.area); |
||||
}) |
||||
} |
||||
// 第一列滑动 第二列 和第三列 都变为第一个 |
||||
this.multiIndex = [value, 0, 0] |
||||
|
||||
} |
||||
if (e.detail.column == 1) { |
||||
this.locationArr[2] = []; |
||||
this.multiIndex[1] = value; |
||||
if (this.allCityData[this.multiIndex[0]].citys.length !== 1) { |
||||
this.allCityData[this.multiIndex[0]].citys[value].areas.map(item => { |
||||
this.locationArr[2].push(item.area) |
||||
}) |
||||
} |
||||
this.multiIndex.splice(2, 1, 0) |
||||
console.log(this.multiIndex) |
||||
} |
||||
// 第三列滑动 |
||||
if (e.detail.column === 2) { |
||||
this.multiIndex[2] = e.detail.value |
||||
} |
||||
}, |
||||
submit(ref) { |
||||
this.$refs[ref].validate().then(res => { |
||||
// console.log(this.baseFormData); |
||||
let params = {}; |
||||
params = { |
||||
username: this.valiFormData.username, |
||||
phone: this.valiFormData.phone, |
||||
province: this.province, |
||||
city: this.city, |
||||
district: this.district, |
||||
detail: this.valiFormData.detail, |
||||
height: this.valiFormData.height, |
||||
weight: this.valiFormData.weight, |
||||
sleepingPosture: this.valiFormData.sleepingPosture, |
||||
pillowHardness: this.valiFormData.pillowHardness, |
||||
pillowMaterial: this.valiFormData.pillowMaterial, |
||||
neckShoulderWidth: this.valiFormData.neckShoulderWidth, |
||||
neckLength: this.valiFormData.neckLength, |
||||
ageRange: this.valiFormData.ageRange, |
||||
sleepLength: this.valiFormData.sleepLength, |
||||
cervicalVertebra: this.valiFormData.cervicalVertebra, |
||||
otherNeed: this.valiFormData.otherNeed, |
||||
} |
||||
console.log(getApp().globalData.baseUrl) |
||||
uni.request({ |
||||
url: getApp().globalData.baseUrl + '/blade-desk/custom-made-info/save', |
||||
data: params, |
||||
method: 'post', |
||||
success: res => { |
||||
console.log(res) |
||||
if (res.data.code == "200" || data.code === "") { |
||||
uni.showToast({ |
||||
title: '提交成功', |
||||
icon: 'none' |
||||
}); |
||||
this.valiFormData = {}, |
||||
this.multiIndex[0, 0, 0]; |
||||
this.city = '' |
||||
this.province = ''; |
||||
this.district = '' |
||||
} else { |
||||
uni.showToast({ |
||||
title: '提交失败', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
}, |
||||
fail: res => { |
||||
reject(res) |
||||
} |
||||
}) |
||||
// NET.request1(API.save, params, 'post').then(res => { |
||||
|
||||
// console.log(res) |
||||
// if (res.code == 200) { |
||||
// uni.showToast({ |
||||
// title: '提交成功', |
||||
// icon: 'none' |
||||
// }); |
||||
// this.valiFormData = {}, |
||||
// this.multiIndex[0, 0, 0]; |
||||
// this.city = '' |
||||
// this.province = ''; |
||||
// this.district = '' |
||||
// } |
||||
// }) |
||||
}).catch(err => { |
||||
console.log('err', err); |
||||
}) |
||||
}, |
||||
// 省市区确认事件 |
||||
pickerChange(e) { |
||||
var _this = this |
||||
_this.multiIndex = e.detail.value |
||||
// 获取省市区总数据 |
||||
|
||||
let firstCity = this.oldpProvinceDataList[_this.multiIndex[0]].dictName |
||||
let selectName = '' |
||||
if (_this.locationArr[0][_this.multiIndex[0]] == firstCity) { |
||||
selectName = this.oldpProvinceDataList[_this.multiIndex[0]].dictCode |
||||
} |
||||
let secondCity = this.oldpProvinceDataList[_this.multiIndex[0]].children[_this.multiIndex[1]] |
||||
|
||||
if (_this.locationArr[1][_this.multiIndex[1]] == secondCity.dictName) { |
||||
selectName += '/' + secondCity.dictCode |
||||
} |
||||
|
||||
let thirdCity = this.oldpProvinceDataList[_this.multiIndex[0]].children[_this.multiIndex[1]].children[_this |
||||
.multiIndex[2]] |
||||
if (_this.locationArr[2][_this.multiIndex[2]] == thirdCity.dictName) { |
||||
selectName += '/' + thirdCity.dictCode |
||||
} |
||||
|
||||
_this.select = |
||||
_this.locationArr[0][_this.multiIndex[0]] + "," + |
||||
_this.locationArr[1][_this.multiIndex[1]] + "," + |
||||
_this.locationArr[2][_this.multiIndex[2]] |
||||
_this.locationPro = selectName |
||||
_this.proDetail.region = _this.locationPro |
||||
}, |
||||
// 每列滑动的监听 |
||||
pickerColumnchange(e) { |
||||
// this.moveTypes = 'bottom' |
||||
// this.type = 'suuccess' |
||||
// this.msg = '成功！' |
||||
// this.imgUrl = this.successUrl |
||||
var _this = this |
||||
// 第几列滑动 |
||||
console.log("第几列滑动 = " + JSON.stringify(e.detail.column)) |
||||
// 第几列滑动选中的下标 |
||||
console.log("第几列滑动选中的下标 = " + JSON.stringify(e.detail.value)) |
||||
// 第一列滑动 |
||||
if (e.detail.column === 0) { |
||||
_this.multiIndex[0] = e.detail.value |
||||
// 第二列更新相应的数据 |
||||
_this.locationArr[1] = _this.oldpProvinceDataList[_this.multiIndex[0]].children.map((item, |
||||
index) => { |
||||
return item.dictName |
||||
}) |
||||
if (_this.oldpProvinceDataList[_this.multiIndex[0]].children.length === 1) { |
||||
_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[0].children |
||||
.map(( |
||||
item, |
||||
index) => { |
||||
return item.dictName |
||||
}) |
||||
} else { |
||||
_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[_this |
||||
.multiIndex[ |
||||
1]].children.map((item, index) => { |
||||
return item.dictName |
||||
}) |
||||
} |
||||
// 第一列滑动 第二列 和第三列 都变为第一个 |
||||
_this.multiIndex.splice(1, 1, 0) |
||||
_this.multiIndex.splice(2, 1, 0) |
||||
} |
||||
// // 第二列滑动 |
||||
if (e.detail.column === 1) { |
||||
_this.multiIndex[1] = e.detail.value |
||||
_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[_this |
||||
.multiIndex[ |
||||
1]].children.map((item, index) => { |
||||
return item.dictName |
||||
}) |
||||
// // 第二列 滑动 第三列 变成第一个 |
||||
_this.multiIndex.splice(2, 1, 0) |
||||
} |
||||
// 第三列滑动 |
||||
if (e.detail.column === 2) { |
||||
_this.multiIndex[2] = e.detail.value |
||||
} |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.uni-form-item .title { |
||||
padding: 20rpx 0; |
||||
} |
||||
|
||||
.container { |
||||
position: relative; |
||||
/* max-width: 1920px; |
||||
max-height: 920px; */ |
||||
background-image: url('../../../static/image/bag.png'); |
||||
background-position: top center; |
||||
background-size: cover; |
||||
background-repeat: no-repeat; |
||||
overflow-y: hidden; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: absolute; |
||||
/* padding-bottom: 30px; */ |
||||
|
||||
.content_box { |
||||
/* max-width: 700px; */ |
||||
height: 96%; |
||||
margin: 0 auto; |
||||
margin-top: 2%; |
||||
overflow: auto; |
||||
border-radius: 24rpx; |
||||
|
||||
.rele_content{ |
||||
width: 100%; |
||||
height: 100%; |
||||
margin: 0 auto; |
||||
position: relative; |
||||
} |
||||
|
||||
.footer { |
||||
margin: 0 auto; |
||||
max-width: 700px; |
||||
height: 0.8rem; |
||||
font-size: 0.28rem; |
||||
color: #e9e9e9; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
|
||||
.link_box { |
||||
position: absolute; |
||||
top: 0; |
||||
// left: 68.5%; |
||||
right: 0; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
background-color: #fff; |
||||
border: 1px dashed transparent; |
||||
border-radius: 6px; |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, .1); |
||||
height: 2.2rem; |
||||
line-height: 20px; |
||||
padding: 16px 10px; |
||||
text-align: center; |
||||
font-size: 0.28rem; |
||||
width: 0.4rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.add_item{ |
||||
width: 3rem; |
||||
height: 3rem; |
||||
position: absolute; |
||||
background: #fff; |
||||
right: 1.2rem; |
||||
bottom: 43%; |
||||
z-index: 99; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, .1); |
||||
|
||||
.code_img { |
||||
width: 2rem; |
||||
} |
||||
} |
||||
.form_box { |
||||
max-width: 700px; |
||||
background: #fff; |
||||
margin: 0 auto; |
||||
border-radius: 0.24rem; |
||||
/* margin-top: 0.64rem; */ |
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, .05); |
||||
|
||||
.top_header { |
||||
width: 100%; |
||||
/* height: 342rpx; */ |
||||
border-top-left-radius: 0.24rem; |
||||
border-top-right-radius: 0.24rem; |
||||
|
||||
.top_img { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-top-left-radius: 0.24rem; |
||||
border-top-right-radius: 0.24rem; |
||||
} |
||||
} |
||||
|
||||
.top_content { |
||||
padding: 0.3rem; |
||||
|
||||
.title { |
||||
font-family: inherit; |
||||
font-size: 0.4rem; |
||||
font-weight: normal; |
||||
color: rgb(7, 0, 89); |
||||
text-align: center; |
||||
margin-bottom: 0.16rem; |
||||
} |
||||
|
||||
.content { |
||||
color: #666; |
||||
line-height: 1.5; |
||||
max-width: 100%; |
||||
overflow: visible; |
||||
word-break: break-word; |
||||
|
||||
p { |
||||
text-align: left; |
||||
font-size: 0.28rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.form_content { |
||||
margin: 0rem 0.3rem; |
||||
padding: 0.2rem 0rem; |
||||
|
||||
.btn_box { |
||||
width: 4.84rem; |
||||
font-family: inherit; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
color: rgb(255, 255, 255); |
||||
padding: 10px 55px; |
||||
background-color: rgb(245, 189, 55); |
||||
border-color: rgb(255, 255, 255); |
||||
border-width: 0px; |
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px; |
||||
margin-top: 0.64rem; |
||||
margin-bottom: 0.64rem; |
||||
} |
||||
|
||||
.uni-forms-item { |
||||
|
||||
/* background-color: red; */ |
||||
::v-deep.checklist-box { |
||||
width: 6.86rem; |
||||
height: 0.92rem; |
||||
border: 1px solid #eaeaea; |
||||
padding-left: 0.2rem; |
||||
border-radius: 0.12rem; |
||||
} |
||||
|
||||
.address_item { |
||||
margin-top: 0.16rem; |
||||
} |
||||
|
||||
.uni-forms-item__label { |
||||
font-family: inherit; |
||||
font-size: 14px; |
||||
font-weight: bold; |
||||
color: rgb(7, 0, 89); |
||||
|
||||
.is-required { |
||||
margin-right: 0.1rem; |
||||
} |
||||
} |
||||
|
||||
.wid_pre { |
||||
width: 3.06rem; |
||||
height: 4rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.wid_img { |
||||
border-top-left-radius: 0.16rem; |
||||
border-top-right-radius: 0.16rem; |
||||
} |
||||
|
||||
::v-deep.checklist-box { |
||||
width: 3.06rem; |
||||
height: 0.94rem; |
||||
margin: 0; |
||||
border-radius: 0px; |
||||
border-bottom-left-radius: 0.16rem; |
||||
border-bottom-right-radius: 0.16rem; |
||||
} |
||||
} |
||||
|
||||
.hei_pre { |
||||
width: 3.06rem; |
||||
height: 4rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.hei_img { |
||||
border-top-left-radius: 0.16rem; |
||||
border-top-right-radius: 0.16rem; |
||||
} |
||||
|
||||
::v-deep.checklist-box { |
||||
width: 3.06rem; |
||||
height: 0.94rem; |
||||
margin: 0; |
||||
border-radius: 0px; |
||||
border-bottom-left-radius: 0.16rem; |
||||
border-bottom-right-radius: 0.16rem; |
||||
} |
||||
} |
||||
|
||||
.pos_box { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
|
||||
.pos_pre { |
||||
width: 3.06rem; |
||||
height: 4rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.hei_img { |
||||
border-top-left-radius: 0.16rem; |
||||
border-top-right-radius: 0.16rem; |
||||
} |
||||
|
||||
::v-deep.checklist-box { |
||||
width: 3.06rem; |
||||
height: 0.94rem; |
||||
margin: 0; |
||||
border-radius: 0px; |
||||
border-bottom-left-radius: 0.16rem; |
||||
border-bottom-right-radius: 0.16rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.item_txt { |
||||
font-size: .28rem; |
||||
margin-bottom: 0.24rem; |
||||
color: #666; |
||||
} |
||||
|
||||
.city_box { |
||||
width: 100%; |
||||
height: 0.7rem; |
||||
padding-left: 0.2rem; |
||||
border: 1px solid; |
||||
display: flex; |
||||
align-items: center; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
border: 1px solid #dcdfe6; |
||||
border-radius: 0.08rem; |
||||
font-size: 0.24rem; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.mask_box { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #000; |
||||
position: absolute; |
||||
z-index: 98; |
||||
top: 0; |
||||
opacity: 0.6; |
||||
} |
||||
|
||||
.phone_box { |
||||
align-items: center; |
||||
background-color: #fff; |
||||
border-radius: 50%; |
||||
bottom: 2.2rem; |
||||
box-shadow: 0 0.24rem 0.24rem rgba(0, 0, 0, .1); |
||||
display: flex; |
||||
height: 1.2rem; |
||||
justify-content: center; |
||||
margin-top: 0.12rem; |
||||
position: fixed; |
||||
right: 0.24rem; |
||||
width: 1.2rem; |
||||
z-index: 98; |
||||
} |
||||
|
||||
.code_box { |
||||
width: 3.5rem; |
||||
height: 3.2rem; |
||||
background: url('../../../static/image/add_bag.png') no-repeat; |
||||
background-size: 100% 100%; |
||||
position: fixed; |
||||
right: 0.24rem; |
||||
bottom: 3.6rem; |
||||
z-index: 99; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.code_img { |
||||
width: 2rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,68 @@ |
||||
<template> |
||||
<view> |
||||
<view class="img_box"> |
||||
<!-- <image class="img" src="../../../static/image/bag.jpg" mode=""></image> --> |
||||
<img class="img" src="../../../static/image/bag.jpg" mode=""></img> |
||||
</view> |
||||
<view class="bottom_box"> |
||||
<button class="btn" @click="addForm">填写报名单（其他渠道已购买）</button> |
||||
<button class="btn" @click="clickCustom">定制</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
// 点击定制 |
||||
clickCustom(){ |
||||
console.log('点击定制') |
||||
}, |
||||
// 填写表单 |
||||
addForm(){ |
||||
this.$route.push('../') |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.img_box{ |
||||
.img{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
.bottom_box{ |
||||
width: 100%; |
||||
height: 280rpx; |
||||
background: #fff; |
||||
position: fixed; |
||||
bottom: 99rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
|
||||
.btn{ |
||||
width: 85%; |
||||
height: 80rpx; |
||||
background-color: rgb(245, 19, 19); |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
&:first-child{ |
||||
background-color: rgb(164, 173, 179); |
||||
margin-bottom: 40rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<view> |
||||
我的 |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<view> |
||||
订单页面 |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 741 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,74 @@ |
||||
const request = (url, data, method = 'GET') => { |
||||
return new Promise((resolve, reject) => { |
||||
let header = { |
||||
"Content-Type": "application/json" |
||||
} |
||||
const res = uni.getStorageSync('storage_key'); |
||||
const token = res.token |
||||
if (token) { |
||||
header['Authorization'] = token |
||||
} |
||||
console.log(url) |
||||
uni.request({ |
||||
url: url, |
||||
data: data, |
||||
method: method, |
||||
header: header, |
||||
success: res => { |
||||
if (res.statusCode == 200) { |
||||
if (res.data.code === "200" || res.data.code === "" || res.data.status == "200") { |
||||
resolve(res.data) |
||||
} else if (res.data.code === "20004" || res.data.code === "20005") { |
||||
uni.removeStorageSync("storage_key") |
||||
uni.navigateTo({ |
||||
url: '/pages_category_page2/userModule/login' |
||||
}) |
||||
} else { |
||||
resolve(res.data) |
||||
uni.showToast({ |
||||
title: res.data.message, |
||||
icon: "none" |
||||
}) |
||||
} |
||||
} else { |
||||
reject(res) |
||||
} |
||||
}, |
||||
fail: res => { |
||||
reject(res) |
||||
} |
||||
}) |
||||
}); |
||||
} |
||||
//不带token接口请求，首页
|
||||
const request1 = (url, data, method = 'GET') => { |
||||
return new Promise((resolve, reject) => { |
||||
let header = { |
||||
'Content-Type': 'application/json', |
||||
} |
||||
uni.request({ |
||||
url: url, |
||||
data: data, |
||||
method: method, |
||||
header: header, |
||||
success: res => { |
||||
console.log(res) |
||||
if (res.data.code == "200" || data.code === "") { |
||||
console.log('进入1') |
||||
resolve(res.data) |
||||
} else { |
||||
console.log('进入2') |
||||
reject(res) |
||||
} |
||||
}, |
||||
fail: res => { |
||||
reject(res) |
||||
} |
||||
}) |
||||
}); |
||||
} |
||||
|
||||
module.exports = { |
||||
request: request, |
||||
request1: request1 |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue