123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- <template>
- <view class="content">
- <view class="steps">
- <u-steps :list="numList" active-color="#00aaff" :current="current"></u-steps>
- </view>
- <view class="step1" v-if="current==0">
- <view class="form-row form-flex">
- <view><text class="red">*</text>网点名称</view>
- <view>啊撒旦解放拉风小区</view>
- </view>
- <view class="form-row form-flex">
- <view><text class="red">*</text>投递手机号</view>
- <view>
- <u-input v-model="formData.phone" type="number" input-align="right" :custom-style="{color: '#666'}" :maxlength="11" placeholder="请输入手机号码"></u-input>
- </view>
- </view>
- <view class="form-row">
- <view><text class="red">*</text>投递类型</view>
- <view class="form-grid">
- <view class="active">
- <view>废旧纸张</view>
- <view class="texts">200g/1乐豆</view>
- </view>
- <view>
- <view>废旧纸张</view>
- <view class="texts">200g/1乐豆</view>
- </view>
- <view>
- <view>废旧纸张</view>
- <view class="texts">200g/1乐豆</view>
- </view>
- <view>
- <view>废旧纸张</view>
- <view class="texts">200g/1乐豆</view>
- </view>
- </view>
- </view>
- </view>
- <view class="step2" v-if="current==1">
- <view class="form-row form-flex">
- <view>投递手机号</view>
- <view>13709146191</view>
- </view>
- <view class="form-row form-flex">
- <view>用户乐豆余额</view>
- <view><text class="nums">560</text></view>
- </view>
- <view class="form-row form-flex">
- <view>投递类型</view>
- <view>
- 废旧衣服
- <text class="des">(200g/1乐豆)</text>
- </view>
- </view>
- <view class="form-row form-flex">
- <view>投递重量</view>
- <view><text class="nums">{{balanceData}}g</text></view>
- </view>
- <view class="form-row form-flex">
- <view>可兑换乐豆数</view>
- <view><text class="nums">10</text></view>
- </view>
- </view>
- <view class="buttons">
- <view v-if="current==0" ><u-button shape="circle" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
- <view v-if="current==1"><u-button shape="circle" @click="prev()">上一步</u-button></view>
- <view v-if="current==1"><u-button shape="circle" @click="submit()" :custom-style="customStyle" type="primary">提交</u-button></view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- customStyle: {
- background: '#00aaff'
- },
- current: 0,
- numList: [{
- name: '用户认证'
- }, {
- name: '称重'
- }],
- formData:{
- address: '',
- phone: '',
- washType: '0'
- }
- }
- },
- computed: {
- balanceData() {
- let data = this.$store.state.vuex_balanceData
- console.log(data.split(','))
- let weight = data.split(',')[2]
- let uit = ''
- let fh = ''
- weight = weight.replace('\n','')
-
-
- if(weight.indexOf('+')>=0){
- fh = '+'
- }
- if(weight.indexOf('-')>=0){
- fh = '-'
- }
-
-
- if(weight.indexOf('kg')>0){
- weight = weight.replace(/\+|-|[kg]/g,'')
- console.log(weight,'kg-weight')
- weight = Number(weight) * 1000
- uit = 'kg'
- }else if(weight.indexOf('lb')>0){
- weight = weight.replace(/\+|-|[lb]/g,'')
- console.log(weight,'lb-weight')
- weight = Math.floor(Number(weight) * 453.59237)
- uit = 'lb'
- }else{
- weight = weight.replace(/\+|-|g/g,'')
- console.log(weight,'g-weight')
- weight = Number(weight)
- uit = 'g'
- }
- console.log(weight,uit,fh,'weight end')
- return fh + weight
- }
- },
- methods: {
- next(){
- if(this.formData.phone == ''){
- uni.showToast({
- icon: 'none',
- title: '请输入手机号码'
- })
- return
- }
- if(this.formData.washType == ''){
- uni.showToast({
- icon: 'none',
- title: '请选择投递类型'
- })
- return
- }
-
- this.current = this.current + 1
- },
- prev(){
- this.current = this.current - 1
- },
- submit(){
-
- }
- }
- }
- </script>
- <style lang="less">
- .content{
- width: 100%;
- padding: 20rpx;
- background-color: #FFFFFF;
- .steps{
- padding: 40rpx 0;
- border-bottom: 1px solid #f8f8f8;
- }
- .form-flex{
- display: flex;
- align-items: center;
- > view{
- &:first-child{
- width: 30%;
- }
- &:last-child{
- width: 70%;
- text-align: right;
- color: #666;
- }
- }
- }
- .form-row{
- border-bottom: 1px solid #f8f8f8;
- padding: 20rpx 15rpx;
- position: relative;
- .red{
- color: red;
- margin-right: 6rpx;
- }
- .des{
- color: #666;
- margin-left: 5rpx;
- font-size: 24rpx;
- }
- .nums{
- color: red;
- margin-right: 5rpx;
- }
- }
- .form-grid{
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- justify-content: space-around;
- > view{
- width: 45%;
- border: 1px solid #eee;
- margin: 20rpx 0;
- padding: 20rpx;
- border-radius: 6rpx;
- text-align: center;
- .texts{
- font-size: 24rpx;
- color: #999;
- padding: 10rpx 0;
- }
- }
- .active{
- border-color: #ffaa00;
- background-color: #ffd36a;
- color: #FFFFFF;
- .texts{
- color: #FFFFFF;
- }
- }
- }
- .buttons{
- padding: 50rpx 5%;
- display: flex;
- align-items: center;
- justify-content: center;
- >view{
- width: 50%;
- padding: 0 5%;
- }
- }
- }
- </style>
|