12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <template>
- <view class="pay-options">
- <view class="flex align_center justify_between">
- <text>{{title}}:</text>
- </view>
- <view class="pay-item">
- <view class="flex align_center justify_between" v-if="hasBalancePay" @tap="changeItem(0)">
- <view>
- <uni-icons size="18" :type="defaultValue=='0'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
- </view>
- <view class="flex align_center">充值余额(<text class="pf">¥</text>{{balance}})</view>
- </view>
- <view class="flex align_center justify_between" v-if="hasPay" @tap="changeItem(1)">
- <view>
- <uni-icons size="18" :type="defaultValue=='1'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
- </view>
- <view class="flex_auto u-text-right">微信支付</view>
- </view>
- <view class="flex align_center justify_between" v-if="!hasPay" @tap="changeItem(2)">
- <view>
- <uni-icons size="18" :type="defaultValue=='2'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
- </view>
- <view class="flex_auto u-text-right">线下支付</view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- title: {
- type: String,
- default: '支付方式'
- },
- value: {
- type: String,
- default: '2'
- },
- balance: {
- type: Number,
- default: 0
- },
- hasBalancePay:{
- type: Boolean,
- default: false
- },
- hasPay: {
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- defaultValue: this.value,
- }
- },
- methods: {
- changeItem(val){
- this.defaultValue = val
- this.$emit('input',this.defaultValue)
- this.$emit('change',this.defaultValue)
- }
- },
- watch: {
- value(val) {
- this.defaultValue = val
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .pay-options {
- padding: 0;
- .pay-item {
- margin-top: 10upx;
- >view {
- padding: 10upx 0;
- font-size: 28upx;
- color: #666;
- }
- .pf{
- font-size:20rpx;
- }
- >view:last-child {
- border-bottom: none;
- }
- }
- }
- </style>
|