BJ_web_developers / jy_parkingOS

Blame view

pages/businessCard/buyCard.vue 7.1 KB
Edit Raw Normal View History
19569f2b   刘淇   购买券 
1
2
3
 
  <template>
      <view>
65f63bf8   刘淇   购买券 
4
 
          <uni-section title="2小时(时长券)" type="line" >
19569f2b   刘淇   购买券 
5
 
              <uni-card padding="0" spacing="0">
19569f2b   刘淇   购买券 
6
7
8
9
10
11
 
                  <uni-list>
                      <uni-list-item title="适应车场"   rightText="万达商业广场"  >
                          <text></text>
                      </uni-list-item>
                      <uni-list-item title="价格：¥5/张" rightText="商户库存：0张"></uni-list-item>
                  </uni-list>
19569f2b   刘淇   购买券 
12
19569f2b   刘淇   购买券 
13
14
15
16
17
 
              </uni-card>
          </uni-section>
65f63bf8   刘淇   购买券 
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
          <uni-list >
              <uni-list-item  title="购买数量" >
                  <template v-slot:footer>
                      <uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
                  </template>
              </uni-list-item>
              <uni-list-item  title="应付金额"  >
                  <template v-slot:footer>
                      <text style="color: red">¥25.00元</text>
                  </template>
              </uni-list-item>
              <uni-list-item  title="支付方式" rightText="商户余额" />
              <uni-list-item  note="请认真核对购买信息,卡券一经购买概不支持退款" >
                  <template v-slot:header>
                      <text style="color: red">温馨提示</text>
                  </template>
              </uni-list-item>
          </uni-list>
19569f2b   刘淇   购买券 
36
65f63bf8   刘淇   购买券 
37
38
39
 
          <view class="uni-padding-wrap uni-common-mt">
              <button type="primary" @click="dialogToggle('warn')">立即购买</button>
          </view>
19569f2b   刘淇   购买券 
40
65f63bf8   刘淇   购买券 
41
42
43
44
45
46
47
 
          <view>
              <!-- 提示窗示例 -->
              <uni-popup ref="alertDialog" type="dialog">
                  <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" content="二次确定" @confirm="dialogConfirm"
                                    @close="dialogClose"></uni-popup-dialog>
              </uni-popup>
          </view>
9abdc179   刘淇   购买券 
48
 
          <view class="formWrap">
2271bcd7   刘淇   购买券 
49
50
51
52
 
              <uni-forms ref="baseForm" :modelValue="baseFormData" >
                  <uni-forms-item label="车牌号码" required>
                      <uni-easyinput v-model="baseFormData.name" placeholder="请输入车牌号码" />
                  </uni-forms-item>
9abdc179   刘淇   购买券 
53
54
55
56
57
58
59
 
  
                  <uni-forms-item label="生效时间">
                      <uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
                  </uni-forms-item>
                  <uni-forms-item label="失效时间">
                      <uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
                  </uni-forms-item>
2271bcd7   刘淇   购买券 
60
61
 
              </uni-forms>
          </view>
9abdc179   刘淇   购买券 
62
63
 
          <uni-section title="24小时(包天券)" type="line" >
              <uni-card padding="0" spacing="0">
78e17486   刘淇   商户券明细 
64
9abdc179   刘淇   购买券 
65
66
67
68
69
70
 
                  <uni-list>
                      <uni-list-item title="适应车场"   rightText="万达商业广场"  >
                          <text></text>
                      </uni-list-item>
                      <uni-list-item title="价格：¥5/张" rightText="商户库存：0张"></uni-list-item>
                  </uni-list>
2271bcd7   刘淇   购买券 
71
9abdc179   刘淇   购买券 
72
73
 
              </uni-card>
          </uni-section>
2271bcd7   刘淇   购买券 
74
75
2271bcd7   刘淇   购买券 
76
9abdc179   刘淇   购买券 
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
          <uni-list >
              <uni-list-item  title="购买数量" >
                  <template v-slot:footer>
                      <uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
                  </template>
              </uni-list-item>
              <uni-list-item  title="应付金额"  >
                  <template v-slot:footer>
                      <text style="color: red">¥25.00元</text>
                  </template>
              </uni-list-item>
              <uni-list-item  title="支付方式" rightText="商户余额" />
              <uni-list-item  note="请认真核对购买信息,卡券一经购买概不支持退款" >
                  <template v-slot:header>
                      <text style="color: red">温馨提示</text>
                  </template>
              </uni-list-item>
          </uni-list>
  
          <view class="uni-padding-wrap uni-common-mt">
              <button type="primary" @click="dialogToggle('warn')">立即购买</button>
          </view>
19569f2b   刘淇   购买券 
101
102
103
104
105
 
  
      </view>
  </template>
  
  <script>
19569f2b   刘淇   购买券 
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
  export default {
    data() {
      const currentDate = this.getDate({
        format: true
      })
      return {
        vModelValue: 3,
        title: 'picker',
        array: ['全部', '充值', '支付'],
        arrayWay: ['所有方式', '微信', '线下公对公'],
        index: 0,
        indexWay: 0,
        benginDate: currentDate,
        overDate: currentDate,
2271bcd7   刘淇   购买券 
120
19569f2b   刘淇   购买券 
121
 
        iconType:'auto', // 图标样式
2271bcd7   刘淇   购买券 
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
        datetimesingle: '',
        // 基础表单数据
        baseFormData: {
          name: '',
          datetimesingle: 1627529992399
        },
        // 校验规则
        rules: {
          name: {
            rules: [{
              required: true,
              errorMessage: '车牌号码不能为空'
            }]
          }
        },
19569f2b   刘淇   购买券 
137
138
139
140
141
142
 
      }
    },
    onLoad(params) {
      wx.showShareMenu({
        withShareTicket: true
      })
2271bcd7   刘淇   购买券 
143
19569f2b   刘淇   购买券 
144
145
146
 
    },
    onShow() {
      var me = this;
78e17486   刘淇   商户券明细 
147
19569f2b   刘淇   购买券 
148
 
    },
9abdc179   刘淇   购买券 
149
150
151
152
153
154
 
    mounted() {
      setTimeout(() => {
        this.baseFormData.datetimesingle = Date.now() - 2*24*3600*1000
        this.datetimesingle = Date.now() - 2*24*3600*1000
      },500)
    },
19569f2b   刘淇   购买券 
155
156
157
158
159
160
161
162
163
 
    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
    methods: {
2271bcd7   刘淇   购买券 
164
165
166
 
      changeLog(e) {
        console.log('change事件:', e);
      },
65f63bf8   刘淇   购买券 
167
168
169
170
171
172
173
174
175
176
177
178
 
      dialogClose() {
        console.log('点击关闭')
      },
      dialogConfirm() {
        console.log('点击确认')
        this.messageText = `点击确认了 ${this.msgType} 窗口`
        this.$refs.message.open()
      },
      dialogToggle(type) {
        this.msgType = type
        this.$refs.alertDialog.open()
      },
19569f2b   刘淇   购买券 
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
 
      changeValue(value) {
        console.log('返回数值：', value);
      },
      blur(e) {
        console.log('blur:', e);
      },
      focus(e) {
        console.log('focus:', e);
      },
      actionsClick(text){
        uni.showToast({
          title:text,
          icon:'none'
        })
      },
      bindPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.index = e.detail.value
      },
      bindPickerChangeWay: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.indexWay = e.detail.value
      },
      bindStartDateChange: function (e) {
        this.benginDate = e.detail.value
      },
      bindEndDateChange: function (e) {
        this.overDate = e.detail.value
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
9abdc179   刘淇   购买券 
227
 
      .formWrap {
2271bcd7   刘淇   购买券 
228
229
230
231
 
          padding: 15px;
          background-color: #fff;
      }
19569f2b   刘淇   购买券 
232
233
234
 
      /deep/ .uni-section{
          padding-bottom: 10px;
      }
9abdc179   刘淇   购买券 
235
236
237
 
      /*/deep/ .uni-datetime-picker-btn-text{*/
          /*display: none;*/
      /*}*/
19569f2b   刘淇   购买券 
238
19569f2b   刘淇   购买券 
239
 
  </style>