root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

简直注册，支付订单

master
tianyi 1 month ago
parent
262c7a8ac3
commit
ce9859d845
2 changed files with 666 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 534
      package1/myCenter/partTimeJobRegister.vue
  2. 133
      package1/order/orderConfirm.vue

534
package1/myCenter/partTimeJobRegister.vue
View File

@ -1,9 +1,541 @@
<template>
<!-- 兼职注册 -->
<view class="page1">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
<uni-icons type="left" size="28"></uni-icons>
</view>
</view>
</view>
<view class="content">
<view class="box1">
<view class="reg-name">
* 姓名
</view>
<view class="reg-value">
<input type="text" placeholder="请填写姓名"
style="background: #eee;height: 40px;line-height: 40px;padding: 9px 10px;border-radius: 10px;">
</view>
</view>
<view class="box1">
<view class="reg-name">
* 学生证上传 <text style="font-size: 12px;font-weight: 400;color: #777;">身份信息仅用于认证身份，平台会严格保密</text>
</view>
<view class="reg-value">
<img @tap="pictureAdd('mentou')"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/89d37db7e34c490da24c5dd62183bf2d.png" alt=""
style="width: 80px;height: 80px;background-size: 100%;margin-right: 10px;" />
<img @tap="largeImg" :src="formData.studentCard" alt=""
style="width: 80px;height: 80px;background-size: 100%;" />
</view>
</view>
<view class="box1">
<view class="reg-name">
* 兼职类型
</view>
<view class="reg-value" style="display: flex;">
<view class="box-check-btn" @tap="daimaiOrpaotui('daimai')"
:style="{background:formData.daimai?'rgba(180, 255, 238, 0.27)':'#eee',border:formData.daimai?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
代买饭
</view>
<view class="box-check-btn" @tap="daimaiOrpaotui('paotui')"
:style="{background:formData.paotui?'rgba(180, 255, 238, 0.27)':'#eee',border:formData.paotui?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
快递
</view>
</view>
</view>
<view class="box1" v-if="formData.daimai != false || formData.paotui != false">
<view class="reg-name">
* 规则配置
</view>
<view class="reg-value">
<view class="value1" v-if="formData.daimai">
<view class="value-title">
<view class="title-1">
代买饭规则
</view>
<view class="title-2" @tap="checkAddress">
选择地址
<uni-icons type="right" size="12"></uni-icons>
</view>
</view>
<view class="guize-list">
<view class="guize1">
<view class="guize1-qusong">
<view class="qusong1">
取
</view>
<view class="qusong2">
第三食堂
</view>
</view>
<view class="guize1-qusong">
<view class="qusong1">
送
</view>
<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
1号宿舍楼
</view>
</view>
<view class="qusong3">
<input type="number" placeholder="填写配送费">
</view>
</view>
<view class="guize1">
<view class="guize1-qusong">
<view class="qusong1">
取
</view>
<view class="qusong2">
第三食堂
</view>
</view>
<view class="guize1-qusong">
<view class="qusong1">
送
</view>
<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
1号宿舍楼
</view>
</view>
<view class="qusong3">
<input type="number" placeholder="填写配送费">
</view>
</view>
</view>
</view>
<view class="value1" v-if="formData.paotui">
<view class="value-title">
<view class="title-1">
快递规则
</view>
<view class="title-2" @tap="checkAddress">
选择地址
<uni-icons type="right" size="12"></uni-icons>
</view>
</view>
<view class="guize-list">
<view class="guize1">
<view class="guize1-qusong">
<view class="qusong1">
取
</view>
<view class="qusong2">
第三食堂
</view>
</view>
<view class="guize1-qusong">
<view class="qusong1">
送
</view>
<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
1号宿舍楼
</view>
</view>
<view class="qusong3">
<input type="number" placeholder="填写配送费">
</view>
</view>
<view class="guize1">
<view class="guize1-qusong">
<view class="qusong1">
取
</view>
<view class="qusong2">
第三食堂
</view>
</view>
<view class="guize1-qusong">
<view class="qusong1">
送
</view>
<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
1号宿舍楼
</view>
</view>
<view class="qusong3">
<input type="number" placeholder="填写配送费">
</view>
</view>
</view>
</view>
</view>
</view>
<view
style="width: 120px;height: 140px;background: rgba(166, 255, 234, 1);margin: 10px auto;border-radius: 20px;text-align: center;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3a4e68eb14d7417cbb4f15fa85907c64.jpg" alt=""
style="width: 90px;height: 90px;margin-top: 10px;" />
<view style="height: 25px;line-height: 25px;font-weight: 700;">关注公众号</view>
</view>
<view class="btn">
提交注册
</view>
</view>
<!-- 查看大图弹出层 -->
<uni-popup ref="imgPopup" background-color="#fff">
<view class="img-popup-content">
<img :src="bigImg" alt="" style="width: 100%;height: 100%;">
</view>
</uni-popup>
<!-- 规则选择弹出层 -->
<uni-popup ref="guizePopup" background-color="#fff">
<view class="guize-popup-content">
<view style="margin-top: 10px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f06433fa1bd34b31948eaefe5338c357.png"
alt="" style="width: 102px;height: 25px;" />
</view>
<view style="margin-top: 10px;height: 45px;">
<view class="box-check-btn" @tap="qucanOrsongcan('qucan',index)" v-for="(item,index) in qucan" :key="index"
style="float: left;padding: 0 10px;width: auto;margin-bottom:10px;"
:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'#eee',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
{{item.name}}
</view>
</view>
<view style="margin-top: 65px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/32fd9d723fbf4d778f2631277d316940.png"
alt="" style="width: 102px;height: 25px;" />
</view>
<view style="margin-top: 10px;height: 45px;">
<view class="box-check-btn" @tap="qucanOrsongcan('songcan',index)" v-for="(item,index) in songcan" :key="index"
style="float: left;padding: 0 10px;width: auto;margin-bottom:10px;"
:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'#eee',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
{{item.name}}
</view>
</view>
<view class="guize-btn" @tap="closeGuize">
确定
</view>
<view style="position: absolute;bottom: -50px;left: 150px;" @tap.stop="$refs.guizePopup.close()">
<uni-icons type="close" size="40" color="#fff"></uni-icons>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {},
formData: {
paotui: false,
daimai: false,
studentCard: '',
},
bigImg: '',
qucan:[{
name:'第一食堂',
checked:false,
},{
name:'第二食堂',
checked:false,
},{
name:'第三食堂',
checked:false,
},{
name:'第四食堂',
checked:false,
}],
songcan:[{
name:'男生宿舍1号楼',
checked:false,
},{
name:'男生宿舍2号楼',
checked:false,
},{
name:'男生宿舍3号楼',
checked:false,
},{
name:'男生宿舍4号楼',
checked:false,
}]
}
},
components: {
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
back() {
uni.navigateBack()
},
//查看大图
largeImg(img) {
this.bigImg = this.formData.studentCard;
this.$refs.imgPopup.open()
},
daimaiOrpaotui(type) {
if (type == 'daimai') {
this.formData.daimai = !this.formData.daimai
} else {
this.formData.paotui = !this.formData.paotui
}
this.$forceUpdate()
},
qucanOrsongcan(type,index){
if (type == 'qucan') {
this.qucan[index].checked = !this.qucan[index].checked
} else {
this.songcan[index].checked = !this.songcan[index].checked
}
this.$forceUpdate()
},
closeGuize(){
this.$refs.guizePopup.close()
},
checkAddress(type) {
if (type == 'daimai') {
this.$refs.guizePopup.open()
} else {
this.$refs.guizePopup.open()
}
},
pictureAdd() {
let that = this
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album'],
success(res) {
uni.showLoading({
title: '加载中...',
mask: true
})
for (let i = 0; i < res.tempFiles.length; i++) {
that.upLoadFile(res.tempFiles[i].tempFilePath)
}
}
})
},
async upLoadFile(path) {
let that = this;
let hiver_token = uni.getStorageSync("hiver_token")
await uni.uploadFile({
url: that.tui.interfaceUrl() + '/upload/file',
filePath: path,
name: 'file',
header: {
"content-type": "multipart/form-data",
'accessToken': hiver_token
},
formData: {},
success: (uploadFileRes) => {
let pathData = JSON.parse(uploadFileRes.data)
that.formData.studentCard = pathData.result
that.$forceUpdate()
},
fail: (err) => {
uni.hideLoading();
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
})
}
});
await setTimeout(res => {
uni.hideLoading();
}, 1000)
},
}
}
</script>
<style>
<style lang="scss">
page {
width: 100%;
height: 100%;
font-size: 24rpx;
background: #F5F8F5;
color: #00231C;
}
.page1 {
width: 100%;
height: 100%;
font-size: 24rpx;
position: relative;
}
.title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/461dd2d5ba1f462ca05da7e2379d1d90.png') no-repeat;
width: 100%;
height: 320px;
background-size: 100%;
}
.title-sreach {
width: 100%;
display: flex;
height: 200rpx;
position: relative;
}
.back-btn {
position: absolute;
bottom: 0;
left: 0;
}
.content {
position: absolute;
top: 225px;
width: 100%;
border-radius: 20px;
background: #fff;
padding: 8px 10px;
}
.reg-name {
font-size: 16px;
font-weight: 700;
height: 35px;
line-height: 35px;
margin-top: 10px;
}
.reg-value {
margin-top: 5px;
}
.img-popup-content {
width: 500rpx;
height: 500rpx;
}
.box-check-btn {
width: 80px;
height: 35px;
background: rgba(180, 255, 238, 0.27);
text-align: center;
line-height: 35px;
border-radius: 35px;
font-weight: 700;
border: 1px solid rgba(180, 255, 238, 1);
margin-right: 10px;
}
.value1 {
background: #eee;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
.value-title {
display: flex;
height: 35px;
line-height: 35px;
font-size: 15px;
font-weight: 400;
}
.title-1 {
font-weight: 700;
}
.title-2 {
flex: 1;
color: #777;
text-align: right;
}
.guize1-qusong {
display: flex;
flex: 1;
padding-top: 10px;
}
.guize1 {
display: flex;
margin-top: 10px;
}
.qusong1 {
width: 20px;
height: 20px;
background: rgba(0, 35, 28, 1);
color: #fff;
border-radius: 20px;
text-align: center;
line-height: 20px;
font-size: 10px;
z-index: 80;
}
.qusong2 {
height: 20px;
font-size: 12px;
line-height: 19px;
text-align: center;
background: rgba(166, 255, 234, 0.5);
padding: 0 10px;
margin-left: -5px;
font-weight: 700;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.qusong3 {
width: 95px;
height: 35px;
background: #fff;
border-radius: 5px;
padding: 5px 10px;
flex: 1;
}
.btn {
width: 95%;
height: 50px;
font-size: 16px;
font-weight: 700;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
border-radius: 50px;
line-height: 50px;
text-align: center;
margin: 20px auto;
}
.guize-popup-content {
height: auto;
background: #fff;
padding: 20px;
border-radius: 20px;
width: 90%;
margin: 0 auto;
max-height: 430px;
overflow: scroll;
position: relative;
}
.guize-btn{
background: #00231c;
border-radius: 50px;
height: 50px;
width: 100%;
margin: 60px auto 0;
color: #b4ffee;
clear: both;
text-align: center;
line-height: 50px;
font-size:15px;
font-weight: 700
}
</style>

133
package1/order/orderConfirm.vue
View File

@ -0,0 +1,133 @@
<template>
<!-- 支付确认页 -->
<view class="page1">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
支付订单
</view>
</view>
</view>
<view class="content">
<view class="box1">
<view style="height: 35px;line-height: 35px;text-align: center;">
支付剩余时间 59:09
</view>
<view style="height: 45px;line-height: 45px;text-align: center;font-weight: 700;font-size: 15px;">
￥<text style="font-size: 30px;">449.96</text>
</view>
<view style="height: 20px;text-align: center;color: red;">
若拼团失败，将会为您自动退款
</view>
</view>
<view class="box1" style="display: flex;padding: 20px;">
<view style="flex: 1;">
<view style="height: 21px;line-height: 21px;display: flex;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png" alt="" style="width: 21px;height: 21px;margin-right: 10px;" />
<text style="font-size: 15px;font-weight: 700;">微信支付</text>
</view>
<view style="text-align: right;margin-left: 30px;color: #777;width: 73px;">
使用微信支付
</view>
</view>
<view style="width: 18px;padding-top: 10px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png" alt="" style="width: 18px;height: 18px;" />
</view>
</view>
<view class="btn">
确认付款
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {}
}
},
onLoad(option) {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
back() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss">
page {
width: 100%;
height: 100%;
font-size: 24rpx;
background: #F5F8F5;
color: #00231C;
}
.page1 {
width: 100%;
height: 100%;
font-size: 24rpx;
position: relative;
}
.title{
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
width: 100%;
height: 54%;
}
.title-sreach{
width: 100%;
display: flex;
height: 200rpx;
position: relative;
}
.back-btn{
position: absolute;
bottom: 0;
left: 0;
}
.title-name{
padding-top: 55px;
font-size: 36rpx;
font-weight: 700;
flex: 1;
text-align: center;
}
.content{
position: absolute;
top: 100px;
width: 95%;
margin-left: 2.5%;
}
.box1{
width: 95%;
margin: 0 auto 10px;
background: #fff;
border-radius: 10px;
padding: 10px;
}
.btn {
width: 95%;
height: 50px;
font-size: 16px;
font-weight: 700;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
border-radius: 50px;
line-height: 50px;
text-align: center;
margin: 20px auto;
}
</style>
Write Preview
Loading…
Cancel
Save