mkm/new_shop_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitea.lihaink.cn/mkm/new_shop_app

Browse Source
This commit is contained in:
weipengfei 2024-03-19 13:47:12 +08:00
commit e4695c875d
6 changed files with 207 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

308
components/cu-keyboard/cu-keyboard.vue
View File

@ -1,308 +0,0 @@
<template>
<view class="key-container" @click="hide" v-show="showMask">
<uni-transition :modeClass="['slide-bottom']" :show="show" :styles="{height:'100vh'}" :duration="duration">
<view class="key-content" @click.stop>
<slot></slot>
{{value}}
<view class="key-box block flex">
<view class="key-left">
<view class="key-top flex flex-wrap">
<view class="btn-box" v-for="(item,index) in numArr" :key="index">
<button hover-class="active" class="cu-btn key-btn text-black text-xl"
@click.stop="keydown(item)">{{item}}</button>
</view>
</view>
<view class="key-bottom">
<view class="btn-zero">
<button hover-class="active" class="cu-btn key-btn text-black text-xl"
@click.stop="keydown('0')">0</button>
</view>
<view class="btn-point">
<button hover-class="active" class="cu-btn key-btn text-black text-xl"
@click.stop="keydown('.')">.</button>
</view>
</view>
</view>
<view class="key-right">
<view class="del">
<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="del">
<text class="zm iconbackspace text-xl"></text>
</button>
</view>
<view class="confirm">
<button hover-class="active" :style="[confirmStyle]" class="cu-btn" @click.stop="confirm">
<text class="confirm-text">{{confirmText}}</text>
</button>
</view>
</view>
</view>
</view>
</uni-transition>
</view>
</template>
<script>
/**
* 付款组件
* @property {Number} duration - 弹出动画时长，默认为300
* @event {Function} change - 数字改变触发，参数为数字
* @event {Function} confirm - 付款时触发，参数为数字
* @event {Function} hide - 关闭键盘触发，参数为空
*/
// 使用方法,查看同级目录exmple
import uniTransition from '../uni-transition/uni-transition.vue'
export default {
components: {
uniTransition
},
props: {
duration: {
type: Number, //弹出动画时常
default: 300
},
confirmText: {
type: String,
default: '付款'
},
confirmStyle: {
type: Object,
default: () => {
return {
backgroundColor: '#57BE6D'
}
}
}
},
data() {
return {
value: '', //输出的值
show: false, //显示键盘
showMask: false, //遮罩层
numArr: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
watch: {
value(newval, oldval) {
this.$emit("change", newval);
}
},
methods: {
close() {
this.show = false;
setTimeout(() => {
this.showMask = false;
}, this.duration)
},
open() {
this.value = '';
this.show = true;
this.showMask = true;
},
del() {
if (this.value.length) {
setTimeout(() => {
this.value = this.value.slice(0, this.value.length - 1);
}, 10);
}
},
keydown(e) {
if (this.value.lastIndexOf('.') != -1 && this.value.length - this.value.lastIndexOf('.') == 3) return;
if (this.value.length >= 9) return;
switch (e) {
case '.':
// 当输入为点的时候，如果第一次输入点，则补零
if (!this.value.length) {
this.value = '0.';
} else {
if (this.value.indexOf('.') > -1) {
// 如果已经有点，则无效
} else {
this.value = this.value + '' + e;
}
}
break;
case '0':
if (this.value.length === 0) {
this.value = this.value + '' + e;
}
if (Number(this.value) === 0 && this.value.indexOf('.') == -1) {
// 当输入为零的时候，如果value转换成数字为零，且没有点则无效
} else {
this.value = this.value + '' + e;
}
break;
default:
this.value = this.value + '' + e;
break;
}
},
hide() {
this.$emit('hide');
this.close();
},
confirm() {
this.$emit('confirm', this.value);
this.close();
}
}
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: 'zm';
/* project id 2442084 */
src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot');
src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff') format('woff'),
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm') format('svg');
}
.zm {
font-family: "zm" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconbackspace:before {
content: "\ef11";
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.cu-btn {
position: relative;
border: 0rpx;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 30rpx;
font-size: 28rpx;
height: 64rpx;
line-height: 1;
text-align: center;
text-decoration: none;
overflow: visible;
margin-left: initial;
transform: translate(0rpx, 0rpx);
margin-right: initial;
}
.cu-btn::after {
display: none;
}
.text-xl {
font-size: 36rpx;
font-weight: bold;
font-family: 'microsoft-yahei';
}
.text-black {
color: #333;
}
.active {
background-color: #ddd !important;
transform: translate(2rpx, 2rpx);
}
.key-container {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
.key-content {
position: absolute;
bottom: 0;
width: 100vw;
background-color: #F7F7F7;
}
}
.key-box {
width: 100%;
box-sizing: border-box;
padding: 10rpx 10rpx 0;
.key-left {
width: 75%;
}
.key-right {
width: 25%;
display: flex;
flex-direction: column;
}
.key-bottom {
width: 100%;
display: flex;
}
}
.del {
width: 100%;
}
.btn-box {
width: 33.33%;
padding: 0 10rpx 10rpx 0;
box-sizing: border-box;
}
.btn-zero {
width: 66.66%;
padding: 0 10rpx 10rpx 0;
box-sizing: border-box;
}
.btn-point {
width: 33.33%;
padding: 0 10rpx 10rpx 0;
box-sizing: border-box;
}
.key-right {
flex-shrink: 0;
}
.key-btn {
background-color: #fff;
width: 100%;
height: 90rpx;
}
.confirm {
width: 100%;
flex: 1;
padding: 10rpx 0 10rpx 0;
box-sizing: border-box;
button {
width: 100%;
height: 100%;
.confirm-text {
color: #fff;
display: block;
font-size: 32rpx;
}
}
}
</style>

41
components/cu-keyboard/exmple.vue
View File

@ -1,41 +0,0 @@
<template>
<view class="container">
<button type="default" @click="open">打开键盘</button>
{{value}}
<cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide"></cu-keyboard>
</view>
</template>
<script>
export default {
data() {
return {
value:''
}
},
mounted() {
},
methods: {
change(e){
this.value = e;
console.log("数字改变",e);
},
open(){
console.log("打开键盘");
this.$refs.cukeyboard.open();
},
confirm(e){
console.log("付款",e);
},
hide(){
console.log("关闭键盘")
}
}
}
</script>
<style>
</style>

151
components/popups/index.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<uni-popup ref="popup" type="bottom" safeArea backgroundColor="#fff" :animation="true">
<view class="keyboard">
<view class="keyboard-left">
<block v-for="(item,indx) in keys" :key="indx">
<view class="keyboard-left-item word active" v-if="item != 'del'" @click="handleClick(item)">
{{item}}
</view>
<view class="keyboard-left-item active del" v-else @click="handleClick(item)">
<image style="width: 60rpx;height: 60rpx;" src="@/static/del.webp" />
</view>
</block>
</view>
<view class="keyboard-right">
<view class="keyboard-right-clear word active" @click="handleClear">清空</view>
<view class="keyboard-right-pay word active-pay" @click="handlePay">付款</view>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
name: "popups",
data() {
return {
keys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.', 'del'],
value: ''
}
},
methods: {
// 键盘点击
handleClick(item) {
if (this.value.length >= 10) return;
if (item == ".") {
if (!this.value) {
this.value = '0.';
} else {
if (this.value.indexOf('.') > -1) return;
this.value = this.value + item;
}
} else if (item == 'del') {
if (this.value == "0.")
this.value = this.value.substring(0, 0);
else
this.value = this.value.substring(0, this.value.length - 1);
} else if (item == 0) {
if (this.value) {
if (this.value.lastIndexOf('.') != -1 && this.value.length - this.value.lastIndexOf('.') == 3)
return;
this.value = this.value + item;
}
} else {
if (this.value.lastIndexOf('.') != -1 && this.value.length - this.value.lastIndexOf('.') == 3) return;
this.value = this.value + item;
}
this.$emit('change', this.value);
},
// 清空
handleClear() {
this.value = '';
this.$emit('clear');
},
// 付款
handlePay() {
this.$emit('confirm', this.value);
this.handleClose();
},
// 开启
handleOpen() {
this.$refs.popup.open();
},
// 关闭
handleClose() {
this.$refs.popup.close();
}
}
}
</script>
<style lang="scss">
/deep/.uni-transition {
background-color: rgba(0, 0, 0, 0) !important;
}
.keyboard {
display: flex;
padding-bottom: 20rpx;
.keyboard-left {
width: 75%;
display: flex;
flex-wrap: wrap;
.keyboard-left-item {
width: 33.3%;
height: 120rpx;
line-height: 102rpx;
border-bottom: 2rpx solid #E6E6E6;
border-right: 2rpx solid #E6E6E6;
}
.del {
display: flex;
justify-content: center;
align-items: center;
}
}
.keyboard-right {
width: 25%;
.keyboard-right-clear {
width: 100%;
height: 240rpx;
line-height: 226rpx;
}
.keyboard-right-pay {
width: 100%;
height: 240rpx;
line-height: 226rpx;
text-align: center;
background-color: #40AE36;
color: #fff !important;
}
}
.word {
font-weight: 600;
font-size: 34rpx;
color: #000000;
text-align: center;
}
.active:active {
background-color: rgba(232, 232, 232, 0.5);
}
.active-pay:active {
opacity: .9;
}
}
</style>

3
pages/order_details/stay.vue
View File

@ -209,7 +209,8 @@
<view class="content-clip"></view>
<view class='footer acea-row row-right row-middle'>
<view class="bnt cancel" @click.stop="cancelOrder">取消订单</view>
<view class='bnt bgColor' @tap='pay_open(orderInfo.order_id)'>立即付款</view>
<view class='bnt bgColor' @tap='pay_open(orderInfo.order_id)' v-if="orderInfo.pay_type != 10">立即付款
</view>
</view>
</view>
<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id"

69
pages/payment/get_payment.vue
View File

@ -6,24 +6,22 @@
</u-navbar>
</view>
<view style="height: 50rpx;"></view>
<view class="wrap" >
<view class="wrap">
<view class="shop">
<image src="@/static/shop_logo.webp" style="width: 62rpx;height: 54rpx;" />
<text class="shop-name" v-if="mer_name">{{mer_name||''}}</text>
</view>
<uni-popup type="bottom" ref="pop">
<view style="height: 500rpx;background-color: #fff;width: 100%;"></view>
</uni-popup>
<!-- 付款金额 -->
<view class="v-con">
<view class="v-con-text">订单金额</view>
<view class="v-con-input">
<view class="v-con-input" @click="handleOpenKeyboard">
<text style="color: #303133;font-size:32rpx;">￥</text>
<u--input type="text" fontSize="23" height="112rpx" placeholder="请输入金额" border="none"
<u--input type="text" fontSize="23" height="112rpx" placeholder="请输入金额" border="none" readonly
v-model="cartForm.total_amount" placeholderStyle="color:#999;font-size:32rpx"
@input="validateDecimal">
</u--input>
<view class="placeholder"></view>
</view>
<view class="v-con-group">
@ -65,6 +63,7 @@
@authColse="authColse" @onLoadFun="onLoadFun">
</authorize>
</view> -->
<popups ref="popups" @confirm="handleConfirm" @clear="handleClear" @change="handleChange"></popups>
</view>
</template>
@ -83,9 +82,11 @@
import {
Toast
} from "../../libs/uniApi";
import popups from "@/components/popups/index.vue";
export default {
components: {
authorize,
popups
},
computed: {
...mapGetters(['isLogin']),
@ -120,7 +121,7 @@
mer_id: '',
tips: '暂未登陆~',
changeTxt: '展开',
isOpen: true,
isOpen: false,
keyBoardShow: false,
mer_name: ''
}
@ -130,8 +131,8 @@
that = this;
this.mer_id = opt.mer_id;
},
onShow() {
this.getProductInfoByMerid(this.mer_id);
if (!this.isLogin) {
Cache.set("login_back_url_weixin", "/" + getCurrentPages()[0].route + "?mer_id=" + this.mer_id);
this.isAuto = true;
@ -146,12 +147,42 @@
this.checkForm.cart_id = [];
this.getProductInfoByMerid(this.mer_id);
}
},
methods: {
test(){
this.$refs.pop.open()
},
// 打开键盘
handleOpenKeyboard() {
if (!this.isLogin) {
Cache.set("login_back_url_weixin", "/" + getCurrentPages()[0].route + "?mer_id=" + this.mer_id);
this.isAuto = true;
this.isShowAuth = true;
if (this.isWeixin) {
this.tips = '加载中...';
this.$nextTick(() => {
this.$refs.authRef.toWecahtAuth();
})
}
} else {
this.$refs.popups.handleOpen();
}
},
// 键盘回调
handleConfirm(e) {
if (!e) return;
this.cartForm.total_amount = e;
this.submitOrder();
},
// 清空
handleClear() {
this.cartForm.total_amount = '';
},
// 输入数字
handleChange(e) {
this.cartForm.total_amount = e;
},
validateDecimal(event) {
let val = (that.cartForm.total_amount.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
that.$nextTick(() => {
@ -237,12 +268,12 @@
},
getProductInfoByMerid(merid, money) {
// if (!that.cartForm.total_amount) return;
console.log(123123);
getProductInfo({
mer_id: that.mer_id,
money: that.cartForm.total_amount
}).then(res => {
console.log(res);
console.log(res);
if (!that.cartForm.total_amount) {
this.mer_name = res.data.merchant;
} else {
@ -316,7 +347,7 @@
<style lang="scss" scoped>
page {
background-color: #fff;
background-color: #F9F9F9;
}
.empty {
@ -413,6 +444,14 @@
font-size: 32rpx;
color: #000000;
}
.placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.v-wrap {

BIN
static/del.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB