This commit is contained in:
zmj 2024-06-22 11:31:01 +08:00
commit 6b2ebb94ab
18 changed files with 1176 additions and 178 deletions

View File

@ -21,4 +21,12 @@ export const villageListApi = (data) => {
} }
export const brigadeListApi = (data) => { export const brigadeListApi = (data) => {
return request.get('/brigade', data); return request.get('/brigade', data);
}
export const getMassageCode = (data) => {
return request.get('/user/user/send_sms', data);
}
export const setPayPassword = (data) => {
return request.post('/user/user/set_payPassword', data);
} }

View File

@ -1,159 +1,165 @@
<template> <template>
<up-popup :show="show" closeable round="10" @close="close" :safeAreaInsetBottom="false"> <up-popup :show="show" closeable round="10" @close="close" :safeAreaInsetBottom="false">
<view class="good-popup"> <view class="good-popup">
<view class="head-title"> <view class="head-title">
{{datas.is_bulk ? '称重商品' : '计件商品'}} {{ datas.is_bulk ? '称重商品' : '计件商品' }}
</view> </view>
<view class="row"> <view class="row">
<view>商品名称</view> <view>商品名称</view>
<view>{{datas.name || datas.goods_name || datas.store_name}}</view> <view>{{ datas.name || datas.goods_name || datas.store_name }}</view>
</view> </view>
<view class="row"> <view class="row">
<view>商品单位</view> <view>商品单位</view>
<view>{{datas.unit_name}}</view> <view>{{ datas.unit_name }}</view>
</view> </view>
<view class="row"> <view class="row">
<view>商品价格</view> <view>商品价格</view>
<view>¥ {{datas.price}}</view> <view>¥ {{ datas.price }} / {{ datas.unit_name }}</view>
</view> </view>
<view class="row"> <view class="row" v-if="datas.batch > 0">
<view>小计</view> <view>起批量</view>
<view style="color: #F55726;" v-if="+datas.cart_num<+datas.batch"> <view>{{ datas.batch }}{{ datas.unit_name }}起批 </view>
{{`${datas.batch}${datas.unit_name}起批`}} </view>
</view>
<view style="color: #F55726;" v-else>¥ {{subtotal}}</view> <view class="row">
</view> <view>小计</view>
<view v-if="datas.is_bulk" class="row"> <view style="color: #F55726;" v-if="+datas.cart_num < +datas.batch">
<view>购买重量<text style="color: #F55726;">*</text></view> {{ `${datas.batch}${datas.unit_name}起批` }}
<view style="flex: 1;"> </view>
<up-input v-model="datas.cart_num" :cursorSpacing='120' type="number" border="none" <view style="color: #F55726;" v-else>¥ {{ subtotal }}</view>
placeholder="请输入购买重量" inputAlign="right"></up-input> </view>
</view> <view v-if="datas.is_bulk" class="row">
</view> <view>购买重量<text style="color: #F55726;">*</text></view>
<view v-else class="row"> <view style="flex: 1;">
<view>购买数量<text style="color: #F55726;">*</text></view> <up-input v-model="datas.cart_num" :cursorSpacing='120' type="digit" border="none" placeholder="请输入购买重量"
<view style="flex: 1;"> inputAlign="right"></up-input>
<up-input v-model="datas.cart_num" :cursorSpacing='120' type="number" border="none" </view>
placeholder="请输入购买数量" inputAlign="right"> </view>
<template #suffix> <view v-else class="row">
<span style="color: #20b128;">{{datas.unit_name}}</span> <view>购买数量<text style="color: #F55726;">*</text></view>
</template> <view style="flex: 1;">
</up-input> <up-input v-model="datas.cart_num" :cursorSpacing='120' type="digit" border="none" placeholder="请输入购买数量"
</view> inputAlign="right">
</view> <template #suffix>
<view class="row" style="padding-top: 30px;padding-bottom: 30rpx;"> <span style="color: #20b128;">{{ datas.unit_name }}</span>
<view style="width: 30%;margin-right: 30rpx;"> </template>
<up-button @click="close" color="#f7f7f7"><text style="color: #333;">取消</text></up-button> </up-input>
</view> </view>
<view style="flex: 1;"> </view>
<up-button @click="change" color="#20b128">确定</up-button> <view class="row" style="padding-top: 30px;padding-bottom: 30rpx;">
</view> <view style="width: 30%;margin-right: 30rpx;">
</view> <up-button @click="close" color="#f7f7f7"><text style="color: #333;">取消</text></up-button>
</view> </view>
</up-popup> <view style="flex: 1;">
<up-button @click="change" color="#20b128">确定</up-button>
</view>
</view>
</view>
</up-popup>
</template> </template>
<script setup> <script setup>
import { import {
computed, computed,
ref ref
} from "vue" } from "vue"
import { import {
toast toast
} from "../uni_modules/uview-plus"; } from "../uni_modules/uview-plus";
const props = defineProps({ const props = defineProps({
show: { show: {
type: Boolean, type: Boolean,
default: false default: false
}, },
}) })
const datas = ref({ const datas = ref({
cart_num: '' cart_num: ''
}); });
const setData = (e) => { const setData = (e) => {
datas.value = e; datas.value = e;
if (Number(e.batch) > 0) datas.value.cart_num = Number(e.batch).toFixed(0); if (Number(e.batch) > 0) datas.value.cart_num = e.batch;
else datas.value.cart_num = ''; else datas.value.cart_num = '';
}
const emit = defineEmits(['close', 'change']); }
const close = () => {
emit('close');
}
const change = () => { const emit = defineEmits(['close', 'change']);
if (+datas.value.cart_num < +datas.value.batch) return uni.$u.toast( const close = () => {
`购买数量不能小于${datas.value.batch}${datas.value.unit_name}`); emit('close');
if (subtotal.value <= 0) { }
uni.$u.toast('金额不可小于等于0');
datas.value.cart_num = '';
return;
}
emit('change', datas.value);
}
const subtotal = computed(() => { const change = () => {
let num = +datas.value.cart_num || 0; if (+datas.value.cart_num < +datas.value.batch) return uni.$u.toast(
let sell = +datas.value.sell || +datas.value.price; `购买数量不能小于${datas.value.batch}${datas.value.unit_name}`);
return Number(num * sell * 100 / 100).toFixed(2) if (subtotal.value <= 0) {
}) uni.$u.toast('金额不可小于等于0');
datas.value.cart_num = '';
return;
}
emit('change', datas.value);
}
defineExpose({ const subtotal = computed(() => {
setData let num = +datas.value.cart_num || 0;
}) let sell = +datas.value.sell || +datas.value.price;
return Number(num * sell * 100 / 100).toFixed(2)
})
defineExpose({
setData
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.good-popup { .good-popup {
padding: 30rpx; padding: 30rpx;
.head-title { .head-title {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.row { .row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 20rpx; padding-bottom: 20rpx;
border-bottom: 1rpx solid #f6f6f6; border-bottom: 1rpx solid #f6f6f6;
margin-bottom: 20rpx; margin-bottom: 20rpx;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
} }
.content { .content {
.top { .top {
display: flex; display: flex;
view { view {
margin-right: 20rpx; margin-right: 20rpx;
} }
} }
.bottom {} .bottom {}
} }
image { image {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
flex-shrink: 0; flex-shrink: 0;
} }
} }
} }
@keyframes disappear { @keyframes disappear {
to { to {
opacity: 0; opacity: 0;
/* 渐隐 */ /* 渐隐 */
transform: scale(0); transform: scale(0);
/* 缩小 */ /* 缩小 */
} }
} }
</style> </style>

View File

@ -1,8 +1,8 @@
let BASE_URL let BASE_URL
import store from "@/store/user.js" import store from "@/store/user.js"
// 环境 // 环境
// let env = "dev" let env = "dev"
let env = "prod" // let env = "prod"
// let env = "liu"; // let env = "liu";
switch (env) { switch (env) {

View File

@ -161,6 +161,13 @@
"navigationBarTitleText": "确认订单", "navigationBarTitleText": "确认订单",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
{
"path": "setPayPassword/index",
"style": {
"navigationBarTitleText": "设置密码",
"enablePullDownRefresh": false
}
} }
] ]
}, },
@ -228,6 +235,8 @@
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
} }
] ]
} }
], ],

View File

@ -144,12 +144,17 @@
<text>{{item.spec}}</text> <text>{{item.spec}}</text>
</view> </view>
</view> </view>
<view style="display: flex;" v-if='userStore?.userInfo?.user_ship==1'> <view style="display: flex;" v-if='item.batch>0'>
<view class="price" style="margin-right: 10rpx;">{{item.vip_price}}</view> <view>{{item.batch}}{{item.unit_name }}起卖</view>
<text class='price'>会员价</text> </view>
<view style="display: flex;align-items: center;" v-if='userStore?.userInfo?.user_ship==1'>
<text class='price' style="font-size: 24rpx;">会员价</text>
<text class="price" style="margin-right: 10rpx;">{{item.vip_price}}
</text>
<text class='price' style="font-size: 24rpx;">/{{item.unit_name}}</text>
</view> </view>
<view class="price-btn"> <view class="price-btn">
<view class="price" style="font-size: 24rpx;">{{item.price}}</view> <view class="price" style="font-size: 24rpx;">{{item.price}}/{{item.unit_name}}</view>
<view class="btn"> <view class="btn">
<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon> <u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
</view> </view>

View File

@ -16,10 +16,10 @@
<up-button @click="weixinLogin" color="#20B128" size="large"><up-icon name="weixin-fill" <up-button @click="weixinLogin" color="#20B128" size="large"><up-icon name="weixin-fill"
color="#fff" size="28"></up-icon></up-button> color="#fff" size="28"></up-icon></up-button>
</view> </view>
<!-- <view class="btn"> <view class="btn" v-if="config.ENV=='dev'">
<up-button @click="navgo('/pages/login/test')" color="#20B128" size="large"><up-icon <up-button @click="navgo('/pages/login/test')" color="#20B128" size="large"><up-icon
name="weixin-fill" color="#fff" size="28"></up-icon></up-button> name="weixin-fill" color="#fff" size="28"></up-icon></up-button>
</view> --> </view>
<!-- <view class="btn"> <!-- <view class="btn">
<up-button @click="officialCode" color="#20B128" size="large"><up-icon name="weixin-fill" color="#fff" <up-button @click="officialCode" color="#20B128" size="large"><up-icon name="weixin-fill" color="#fff"
size="28"></up-icon></up-button> size="28"></up-icon></up-button>
@ -96,6 +96,9 @@
import useUserStore from "@/store/user.js" import useUserStore from "@/store/user.js"
import bindPhone from "@/components/bindPhone.vue" import bindPhone from "@/components/bindPhone.vue"
import modal from "@/components/modal.vue" import modal from "@/components/modal.vue"
import {
config
} from "@/config/app.js"
const showOfficial = ref(false); const showOfficial = ref(false);

View File

@ -108,7 +108,7 @@
<view class="card"> <view class="card">
<up-cell-group> <up-cell-group>
<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell> <up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
<!-- <up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></up-cell> --> <up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></up-cell>
</up-cell-group> </up-cell-group>
</view> </view>

View File

@ -1,38 +1,119 @@
<template> <template>
<view class='card'> <view class='card'>
<up-input v-model="code" placeholder="手机号" border="none"></up-input> <up-input v-model="form.phone" placeholder="手机号" border="none" readonly></up-input>
<up-line color="#D3E3FD" style="margin: 30rpx 0;"></up-line> <view style="margin: 30rpx 0;">
<up-line color="#D3E3FD"></up-line>
</view>
<view style="display: flex;justify-content: space-between;align-items: center;"> <view style="display: flex;justify-content: space-between;align-items: center;">
<up-input v-model="code" placeholder="验证码" border="none"></up-input> <up-input v-model="form.code" placeholder="验证码" border="none" type='number'></up-input>
<view class="code-btn"> <view class="code-btn">
<up-line color="grey" direction="col" length="30rpx" style="margin: 0 20rpx;"></up-line> <view style="margin: 0 20rpx;">
<text class='btn-text'>获取验证码</text> <up-line color="grey" direction="col" length="30rpx"></up-line>
</view>
<text class='btn-text' style="color: grey;" v-if='cutDown'>重新获取({{cutDown}})</text>
<text @click="getCode" class='btn-text' v-else> {{flag?'获取验证码':'重新获取' }} </text>
</view> </view>
</view> </view>
</view> </view>
<view class='card'> <view class='card'>
<up-input v-model="code" placeholder="请输入你的密码" border="none" type='password' readonly></up-input> <view @click="showKeyBorad=true,type=1">
<up-line color="#D3E3FD" style="margin: 30rpx 0;"></up-line> <up-input style="pointer-events: none;" type='password' v-model="form.password" placeholder="请输入你的密码"
<up-input v-model="code" placeholder="请再次输入你的密码" border="none" type='password' readonly></up-input> border="none" readonly></up-input>
</view>
<view style="margin: 30rpx 0;">
<up-line color="#D3E3FD"></up-line>
</view>
<view @click="showKeyBorad=true,type=2">
<up-input style="pointer-events: none;" type='password' v-model="form.rePassword" placeholder="请再次输入你的密码"
border="none" readonly></up-input>
</view>
</view> </view>
<view class='submit-btn'> <view class='submit-btn'>
<up-button color="#20B128" shape="circle" @click="submit">确认</up-button> <up-button color="#20B128" shape="circle" @click="submit">确认</up-button>
</view> </view>
<up-keyboard dotDisabled safeAreaInsetBottom ref="uKeyboard" @close="showKeyBorad=false" mode="number"
:tooltip="false" :show="showKeyBorad" @change='onKetDown' @backspace='backspaceFn' />
</template> </template>
<script setup> <script setup>
import useUserStore from "@/store/user";
import { import {
ref getMassageCode,
setPayPassword
} from "@/api/address.js"
import {
ref,
reactive
} from "vue" } from "vue"
const userInfo = useUserStore().userInfo;
const form = reactive({
phone: userInfo.mobile, //
code: "", //
password: "", //6
rePassword: "" //
})
//
const cutDown = ref(0)
const flag = ref(true)
const code = ref('') const code = ref('')
const submit = () => { const checkPhone = (phone) => {
const regex = /^1[3-9]\d{9}$/;
return regex.test(phone) ? true : false
}
const getCode = async () => {
if (!checkPhone(form.phone)) return uni.$u.toast('请输入正确的手机号')
await getMassageCode()
flag.value = false
cutDown.value = 60
let timer = setInterval(() => {
cutDown.value--
if (cutDown.value <= 0) clearInterval(timer)
}, 1000)
}
//
//
const showKeyBorad = ref(false)
const type = ref(1) // 1 2
const onKetDown = (e) => {
if (type.value == 1) {
form.password.length < 6 ?
form.password += e :
showKeyBorad.value = false
} else {
form.rePassword.length < 6 ?
form.rePassword += e :
showKeyBorad.value = false
}
}
const backspaceFn = () => {
if (type.value == 1) {
form.password = form.password.slice(0, -1);
} else {
form.rePassword = form.rePassword.slice(0, -1);
}
}
//
const submit = async () => {
if (!form.code) return uni.$u.toast('请输入验证码');
if (form.password !== form.rePassword) return uni.$u.toast('两次密码不一致');
await setPayPassword({
...form
})
uni.$u.toast('设置成功')
setTimeout(() => {
uni.navigateBack()
}, 1000)
} }
</script> </script>

View File

@ -67,7 +67,7 @@
<view class="row" v-if="[4,5,6].includes(userInfo.user_ship)" style="color: red;"> <view class="row" v-if="[4,5,6].includes(userInfo.user_ship)" style="color: red;">
<view>优惠减免</view> <view>优惠减免</view>
<view> <view>
<text>-¥</text>{{ c_price(orderInfo.preferential_amount, 0) }}<text>.{{ c_price(orderInfo.preferential_amount, 1) }}</text> <text>-¥</text>{{ c_price(orderInfo.activity_price, 0) }}<text>.{{ c_price(orderInfo.activity_price, 1) }}</text>
</view> </view>
</view> </view>
<view class="row" v-if="userInfo.user_ship==1 "> <view class="row" v-if="userInfo.user_ship==1 ">
@ -93,11 +93,12 @@
<view class="row" <view class="row"
v-if="userInfo.user_ship == 4 || userInfo.user_ship == 5 || userInfo.user_ship == 6 || userInfo.user_ship == 1"> 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"> <view class="icon-text">
<image src="@/static/icon/YEZF.png" style="width:40rpx;height: 40rpx;" /> <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: 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>
<view class="icon" @click="onChoosePaytype(3)"> <view class="icon" @click="onChoosePaytype(3)">
<image v-if="pay_type == 3" src="@/static/icon/check.png" /> <image v-if="pay_type == 3" src="@/static/icon/check.png" />
@ -110,7 +111,8 @@
<view class="icon-text"> <view class="icon-text">
<image src="@/static/icon/cgkzf.png" style="width:40rpx;height: 40rpx;" /> <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: 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>
<view class="icon" @click="onChoosePaytype(18)"> <view class="icon" @click="onChoosePaytype(18)">
<image v-if="pay_type == 18" src="@/static/icon/check.png" /> <image v-if="pay_type == 18" src="@/static/icon/check.png" />
@ -152,8 +154,11 @@
@change="changeShop" @search="searchShop" /> @change="changeShop" @search="searchShop" />
<modal title="尚未设置收货地址" content="您还没有添加收货地址,请点击添加" cancleText="添加地址" confirmText="继续支付" :show="toastAddressShow" <modal title="尚未设置收货地址" content="您还没有添加收货地址,请点击添加" cancleText="添加地址" confirmText="继续支付" :show="toastAddressShow"
@close="addAddress" @change="goPay" /> @close="addAddress" @change="goPay" />
<!-- <modal title="是否要拨打电话" :content="`即将拨打电话${phone}`" cancleText="取消" confirmText="拨打" :show="callShow" @close="callShow = false" <ZyPasswordboard v-if='passwordBoardVisible' v-model:visible="passwordBoardVisible" v-bind="passwordBoardProps"
@change="onCall" /> --> @close='closeKeyBord' />
<up-modal :show="showModal" title="您还没设置密码" :closeOnClickOverlay="true" zoom confirmText='去设置' showCancelButton
@close='showModal=false' @cancel='showModal=false' @confirm="navgo('/pagesOrder/setPayPassword/index')"
confirmColor='#27B52F' cancelText='取消'></up-modal>
</view> </view>
</template> </template>
@ -175,17 +180,16 @@
checkOrderApi checkOrderApi
} from "@/api/cart.js"; } from "@/api/cart.js";
import { import {
userInfoApi,
addressListsApi, addressListsApi,
merchantListApi merchantListApi
} from "@/api/user.js"; } from "@/api/user.js";
import { import {
createOrderApi createOrderApi
} from "@/api/order.js"; } from "@/api/order.js";
import ZyPasswordboard from '@/uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue';
const userInfo = useUserStore().userInfo; const userInfo = useUserStore().userInfo;
console.log(userInfo)
// //
let STORE_INFO = uni.getStorageSync('STORE_INFO'); let STORE_INFO = uni.getStorageSync('STORE_INFO');
if (STORE_INFO) if (STORE_INFO)
@ -297,14 +301,6 @@
const searchShop = (e) => { const searchShop = (e) => {
getMerchantList(e) getMerchantList(e)
} }
//
// const callShow = ref(false)
// const phone = ref('');
// const callphone = (e) => {
// callShow.value = true;
// phone.value = e;
// }
const onCall = (e) => { const onCall = (e) => {
uni.makePhoneCall({ uni.makePhoneCall({
phoneNumber: e, phoneNumber: e,
@ -357,10 +353,28 @@
const pay_type = ref('7'); const pay_type = ref('7');
const createOrder = () => {
if (!pay_type.value) return uni.$u.toast('请选择支付方式'); //
const passwordBoardVisible = ref(false);
const passwordBoardProps = {
title: '输入支付密码',
onComplete(value) {
password.value = value
passwordBoardVisible.value = false
payFn()
}
};
const closeKeyBord = () => {
password.value = ''
}
const password = ref('')
const payFn = () => {
let shareInfo = uni.getStorageSync('SHARE_INFO'); let shareInfo = uni.getStorageSync('SHARE_INFO');
createOrderApi({ createOrderApi({
password: password.value,
spread_uid: (shareInfo && shareInfo.uid) ? shareInfo.uid : '', spread_uid: (shareInfo && shareInfo.uid) ? shareInfo.uid : '',
cart_id: cartStore.cartList, cart_id: cartStore.cartList,
address_id: addressInfo.value.address_id, address_id: addressInfo.value.address_id,
@ -423,6 +437,24 @@
}) })
} }
const showModal = ref(false)
const navgo = (url) => {
showModal.value &&= false
uni.navigateTo({
url
})
}
const createOrder = async () => {
if (!pay_type.value) return uni.$u.toast('请选择支付方式');
if (pay_type.value == 3 || pay_type.value == 18) {
let res = await userInfoApi()
return res.data.pay_password ? passwordBoardVisible.value = true : showModal.value = true
}
payFn()
}
const c_price = (price, index = 0) => { const c_price = (price, index = 0) => {
price = price + ''; price = price + '';
return price.split('.')[index] || (index ? '00' : '0'); return price.split('.')[index] || (index ? '00' : '0');

View File

@ -0,0 +1,24 @@
## 1.3.32024-04-23
- 修复 当元素会受变量影响自动隐藏的bug
## 1.3.22023-05-04
- 修复 NVUE 平台报错的问题
## 1.3.12021-11-23
- 修复 init 方法初始化问题
## 1.3.02021-11-19
- 优化 组件UI并提供设计资源详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
## 1.2.12021-09-27
- 修复 init 方法不生效的 Bug
## 1.2.02021-07-30
- 组件兼容 vue3如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.12021-05-12
- 新增 示例地址
- 修复 示例项目缺少组件的 Bug
## 1.1.02021-04-22
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑,使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.22021-02-05
- 调整为 uni_modules 目录规范

View File

@ -0,0 +1,131 @@
// const defaultOption = {
// duration: 300,
// timingFunction: 'linear',
// delay: 0,
// transformOrigin: '50% 50% 0'
// }
// #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation')
// #endif
class MPAnimation {
constructor(options, _this) {
this.options = options
// 在iOS10+QQ小程序平台下传给原生的对象一定是个普通对象而不是Proxy对象否则会报parameter should be Object instead of ProxyObject的错误
this.animation = uni.createAnimation({
...options
})
this.currentStepAnimates = {}
this.next = 0
this.$ = _this
}
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next]
let styles = {}
if (!aniObj) {
styles = {
styles: {},
config: {}
}
} else {
styles = aniObj
}
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
}
let unit = ''
if(type === 'rotate'){
unit = 'deg'
}
styles.styles.transform += `${type}(${args+unit}) `
} else {
styles.styles[type] = `${args}`
}
this.currentStepAnimates[this.next] = styles
}
_animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref
if (!ref) return
return new Promise((resolve, reject) => {
nvueAnimation.transition(ref, {
styles,
...config
}, res => {
resolve()
})
})
}
_nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step]
if (obj) {
let {
styles,
config
} = obj
this._animateRun(styles, config).then(() => {
step += 1
this._nvueNextAnimate(animates, step, fn)
})
} else {
this.currentStepAnimates = {}
typeof fn === 'function' && fn()
this.isEnd = true
}
}
step(config = {}) {
// #ifndef APP-NVUE
this.animation.step(config)
// #endif
// #ifdef APP-NVUE
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
this.next++
// #endif
return this
}
run(fn) {
// #ifndef APP-NVUE
this.$.animationData = this.animation.export()
this.$.timer = setTimeout(() => {
typeof fn === 'function' && fn()
}, this.$.durationTime)
// #endif
// #ifdef APP-NVUE
this.isEnd = false
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0
// #endif
}
}
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ'
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) {
// #ifndef APP-NVUE
this.animation[type](...args)
// #endif
// #ifdef APP-NVUE
this._nvuePushAnimates(type, args)
// #endif
return this
}
})
export function createAnimation(option, _this) {
if(!_this) return
clearTimeout(_this.timer)
return new MPAnimation(option, _this)
}

View File

@ -0,0 +1,286 @@
<template>
<!-- #ifndef APP-NVUE -->
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式 css 样式注意带-连接符的属性需要使用小驼峰写法如`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
},
customClass:{
type: String,
default: ''
},
onceRender:{
type:Boolean,
default:false
},
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// close,
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
//
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
//
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
//
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj),this)
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
for (let i in obj) {
try {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
this.animation[i](obj[i])
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
this.animation.step(config)
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
//
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// nextTick wx
this.$nextTick(() => {
// TODO
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
//
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
//
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
//
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 0 : 1,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
//
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
<style></style>

View File

@ -0,0 +1,85 @@
{
"id": "uni-transition",
"displayName": "uni-transition 过渡动画",
"version": "1.3.3",
"description": "元素的简单过渡动画",
"keywords": [
"uni-ui",
"uniui",
"动画",
"过渡",
"过渡动画"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

View File

@ -0,0 +1,11 @@
## Transition 过渡动画
> **组件名uni-transition**
> 代码块: `uTransition`
元素过渡动画
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
#### 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839

View File

@ -0,0 +1,4 @@
## 2022.0513.00012022-05-13
小程序样式不支持 *,调整样式配置
## 2022.0513.00002022-05-13
初建

View File

@ -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>

View File

@ -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"
}
}
}
}
}

View File

@ -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>
```