add
This commit is contained in:
parent
05a69374ea
commit
c5af02d7c0
|
|
@ -93,11 +93,12 @@
|
|||
|
||||
<view class="row"
|
||||
v-if="userInfo.user_ship == 4 || userInfo.user_ship == 5 || userInfo.user_ship == 6 || userInfo.user_ship == 1">
|
||||
<!-- <view class="row"> -->
|
||||
<!-- <view class="row"> -->
|
||||
<view class="icon-text">
|
||||
<image src="@/static/icon/YEZF.png" style="width:40rpx;height: 40rpx;" />
|
||||
<text style="margin-left: 20rpx;font-size: 26rpx;">余额支付</text>
|
||||
<text style="margin-left: 20rpx;font-size: 22rpx;color: #FFB76D;">( 可用¥{{userInfo.now_money}} )</text>
|
||||
<text style="margin-left: 20rpx;font-size: 22rpx;color: #FFB76D;">( 可用¥{{userInfo.now_money}}
|
||||
)</text>
|
||||
</view>
|
||||
<view class="icon" @click="onChoosePaytype(3)">
|
||||
<image v-if="pay_type == 3" src="@/static/icon/check.png" />
|
||||
|
|
@ -110,7 +111,8 @@
|
|||
<view class="icon-text">
|
||||
<image src="@/static/icon/cgkzf.png" style="width:40rpx;height: 40rpx;" />
|
||||
<text style="margin-left: 20rpx;font-size: 26rpx;">采购款支付</text>
|
||||
<text style="margin-left: 20rpx;font-size: 22rpx;color: #1296DB;">( 可用¥{{userInfo.purchase_funds}} )</text>
|
||||
<text style="margin-left: 20rpx;font-size: 22rpx;color: #1296DB;">( 可用¥{{userInfo.purchase_funds}}
|
||||
)</text>
|
||||
</view>
|
||||
<view class="icon" @click="onChoosePaytype(18)">
|
||||
<image v-if="pay_type == 18" src="@/static/icon/check.png" />
|
||||
|
|
@ -152,6 +154,7 @@
|
|||
@change="changeShop" @search="searchShop" />
|
||||
<modal title="尚未设置收货地址" content="您还没有添加收货地址，请点击添加" cancleText="添加地址" confirmText="继续支付" :show="toastAddressShow"
|
||||
@close="addAddress" @change="goPay" />
|
||||
<ZyPasswordboard v-model:visible="passwordBoardVisible" v-bind="passwordBoardProps" />
|
||||
<!-- <modal title="是否要拨打电话" :content="`即将拨打电话${phone}`" cancleText="取消" confirmText="拨打" :show="callShow" @close="callShow = false"
|
||||
@change="onCall" /> -->
|
||||
</view>
|
||||
|
|
@ -181,11 +184,9 @@
|
|||
import {
|
||||
createOrderApi
|
||||
} from "@/api/order.js";
|
||||
import ZyPasswordboard from '@/uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue';
|
||||
|
||||
const userInfo = useUserStore().userInfo;
|
||||
|
||||
console.log(userInfo)
|
||||
|
||||
// 用户选择的门店信息
|
||||
let STORE_INFO = uni.getStorageSync('STORE_INFO');
|
||||
if (STORE_INFO)
|
||||
|
|
@ -357,9 +358,32 @@
|
|||
|
||||
const pay_type = ref('7');
|
||||
|
||||
|
||||
// 支付密码
|
||||
const passwordBoardVisible = ref(false);
|
||||
const handleItemClick = () => {
|
||||
passwordBoardVisible.value = true;
|
||||
};
|
||||
const passwordBoardProps = {
|
||||
title: '输入支付密码',
|
||||
onComplete(value) {
|
||||
console.log(value);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const createOrder = () => {
|
||||
if (!pay_type.value) return uni.$u.toast('请选择支付方式');
|
||||
let shareInfo = uni.getStorageSync('SHARE_INFO');
|
||||
|
||||
|
||||
if (pay_type.value == 3 || pay_type.value == 17) {
|
||||
passwordBoardVisible.value = true
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
createOrderApi({
|
||||
spread_uid: (shareInfo && shareInfo.uid) ? shareInfo.uid : '',
|
||||
cart_id: cartStore.cartList,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
## 2022.0513.0001（2022-05-13）
|
||||
小程序样式不支持 *，调整样式配置
|
||||
## 2022.0513.0000（2022-05-13）
|
||||
初建
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, watch, computed } from 'vue';
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: () => true },
|
||||
random: { type: Boolean, default: () => true },
|
||||
num: { type: Number, default: () => 6 },
|
||||
title: { type: String }
|
||||
});
|
||||
const emits = defineEmits<{
|
||||
(event : 'update:visible', value : boolean);
|
||||
(event : 'complete', value : string);
|
||||
(event : 'close');
|
||||
}>();
|
||||
const tplInputs = computed(() => {
|
||||
return Array(props.num).fill(0);
|
||||
});
|
||||
const refKeys = ref([]);
|
||||
const makeKeys = () => {
|
||||
refKeys.value = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].sort(() => (props.random ? 0.5 - Math.random() : 0)).concat('删除');
|
||||
refKeys.value.splice(9, 0, '清空');
|
||||
};
|
||||
watch(
|
||||
() => props.visible,
|
||||
newValue => {
|
||||
if (newValue) {
|
||||
makeKeys();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const refValue = ref([]);
|
||||
const handleKeyClick = (key : string | number) => {
|
||||
switch (key.toLowerCase()) {
|
||||
case '清空':
|
||||
refValue.value = [];
|
||||
break;
|
||||
case '删除':
|
||||
refValue.value.pop();
|
||||
break;
|
||||
default:
|
||||
if (refValue.value.length < props.num) {
|
||||
refValue.value.push(key);
|
||||
}
|
||||
break;
|
||||
}
|
||||
if (refValue.value.length === props.num) {
|
||||
emits('complete', refValue.value.join(''));
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = $event => {
|
||||
handleKeyClick('c');
|
||||
emits('update:visible', false);
|
||||
emits('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<uni-transition :show="props.visible">
|
||||
<view class="zy-passwordboard" @click="handleClose">
|
||||
<uni-transition :show="props.visible">
|
||||
<view class="zy-passwordboard__board" @click.stop>
|
||||
<uni-transition :mode-class="['slide-bottom']" :show="props.visible">
|
||||
<view class="title" v-if="props.title">{{ props.title }}</view>
|
||||
<view class="inputs">
|
||||
<view class="input" v-for="(input, inputi) in tplInputs" :key="inputi"><text class="text"
|
||||
:class="{ filled: refValue[inputi] }"></text></view>
|
||||
</view>
|
||||
<view class="keys">
|
||||
<view class="key" v-for="key in refKeys" :key="key">
|
||||
<text class="text" :class="[`key-${key}`]" @click="handleKeyClick(key)">{{ key }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</uni-transition>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
view,
|
||||
text {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zy-passwordboard {
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
bottom: constant(safe-area-inset-bottom);
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--bg-color, rgba(0, 0, 0, 0.3));
|
||||
|
||||
&__board {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// padding: 10rpx;
|
||||
background-color: white;
|
||||
backdrop-filter: blur(2rpx);
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
|
||||
.title {
|
||||
padding: 20rpx;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: 35rpx;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
|
||||
.input {
|
||||
padding: 10rpx;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
background-color: #E6E6E6;
|
||||
|
||||
&.filled:before {
|
||||
content: '';
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keys {
|
||||
width: 101vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: white;
|
||||
|
||||
.key {
|
||||
flex: 0 1 33%;
|
||||
padding: 10rpx;
|
||||
border: 1px solid #E6E6E6;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20rpx 10rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
|
||||
&.key- {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
{
|
||||
"id": "zy-passwordboard",
|
||||
"displayName": "zy-passwordboard",
|
||||
"version": "2022.0513.0001",
|
||||
"description": "密码弹框",
|
||||
"keywords": [
|
||||
"zy-passwordboard",
|
||||
"密码弹框",
|
||||
"支付密码"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-transition"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "u",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u",
|
||||
"小红书": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
# zy-passwordboard
|
||||
密码弹框
|
||||
|
||||
## 兼容说明
|
||||
仅基于H5进行了开发，未进行全面测试，后续用到再补
|
||||
|
||||
## 属性
|
||||
|属性名 |类型 |说明 | 默认值 |
|
||||
|:-- |:-- |:-- |:-- |
|
||||
|visible|Boolean|是否显示（支持 v-model:visible） | `false` |
|
||||
|random |Boolean|是否随机排位 | `true` |
|
||||
|num |Number |密码位数，过多显示会有问题 | `6` |
|
||||
|title |String |显示标题 | -- |
|
||||
|
||||
## 事件
|
||||
|事件名 |说明 |
|
||||
|:-- |:-- |
|
||||
| complete | 输入完毕 |
|
||||
| colse | 关闭 |
|
||||
|
||||
## 样式说明
|
||||
未使用 `scoped`, 通过顶层样式名`.zy-passwordboard`就可以进行调整。
|
||||
|
||||
## 使用案例
|
||||
|
||||
``` vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import ZyPasswordboard from '@/uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue';
|
||||
const passwordBoardVisible = ref(false);
|
||||
const handleItemClick = () => {
|
||||
passwordBoardVisible.value = true;
|
||||
};
|
||||
const passwordBoardProps = {
|
||||
title: '输入支付密码',
|
||||
onComplete(value) {
|
||||
console.log(value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<button @click="handleItemClick">开</button>
|
||||
<ZyPasswordboard v-model:visible="passwordBoardVisible" v-bind="passwordBoardProps" />
|
||||
</template>
|
||||
```
|
||||
Loading…
Reference in New Issue