pull/7/head
xiaozhiyong
1 year ago
parent
a7f693f88f
commit
a54f8c3f0a
14 changed files with 1971 additions and 59 deletions
@ -0,0 +1,17 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
export default{ |
||||
getByPageCloudMini(data) { |
||||
return request({ |
||||
url: `/oil-mall/mallOrderInfo/getByPageCloudMini`, |
||||
method: 'post', |
||||
data |
||||
}) |
||||
}, |
||||
get(id) { |
||||
return request({ |
||||
url: `/oil-mall/mallOrderInfo/get/${id}`, |
||||
method: 'get', |
||||
}) |
||||
} |
||||
} |
||||
@ -0,0 +1,322 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
||||
<block slot="backText">返回</block> |
||||
<block slot="content">订单详情</block> |
||||
</cu-custom> |
||||
|
||||
<view class="status-frame"> |
||||
<view v-if="info.orderStatus">{{statusEnum[info.orderStatus].value}}</view> |
||||
<view>提货码: <text>{{info.takeCode}}</text></view> |
||||
<view>提货时间：2024-1-9</view> |
||||
</view> |
||||
|
||||
|
||||
<view class="info-frame"> |
||||
<view class="header">用户手机: 18879008955<text>用户名: 张小明</text></view> |
||||
<view class="introduce" v-for="item,index in info.mallOrderInfoDetails" :key="index"> |
||||
<image :src="item.oderDetailImg"></image> |
||||
<view>{{item.productName}}</view> |
||||
<view>规格：{{handler(item.attributeJson)}}</view> |
||||
<view>￥120.61 X1</view> |
||||
</view> |
||||
<view class="detial"> |
||||
<view>订单编号: <text>{{info.orderCode}}</text></view> |
||||
<view>下单时间: <text>{{info.createTime}}</text></view> |
||||
<view>站点电话: <text>18879008956</text></view> |
||||
<view>支付方式: <text>积分</text></view> |
||||
<view>商品金额: <text>￥{{info.marketPrice}}</text></view> |
||||
<view>支付积分: <text>{{info.integral}}</text></view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="button" @click="determine">确定提货</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<uni-popup ref="popup"> |
||||
<view class="determine-frame"> |
||||
<view class="title">是否立即提货</view> |
||||
<view class="buttons"> |
||||
<view @click="$refs.popup.close()">取消</view> |
||||
<view @click="submit">确认</view> |
||||
</view> |
||||
</view> |
||||
</uni-popup> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/packageIntegral/orderList.js' |
||||
|
||||
export default { |
||||
options: { |
||||
styleIsolation: 'shared' |
||||
}, |
||||
data() { |
||||
return { |
||||
info: { |
||||
mallOrderInfoDetails: [] |
||||
}, |
||||
statusEnum: { |
||||
'-1': { |
||||
color: 'red', |
||||
value: "已取消" |
||||
}, |
||||
0: { |
||||
color: 'blue', |
||||
value: "订单新建" |
||||
}, |
||||
1: { |
||||
color: 'orange', |
||||
value: "待核销" |
||||
}, |
||||
2: { |
||||
color: 'blue', |
||||
value: "已核销" |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
|
||||
onLoad(options) { |
||||
this.get(options.orderId) |
||||
}, |
||||
methods: { |
||||
determine() { |
||||
this.$refs.popup.open('center') |
||||
}, |
||||
handler(json) { |
||||
json = json.replace(/'/g, '"') |
||||
let res = JSON.parse(json) |
||||
let values = Object.values(res) |
||||
let text = values.reduce((prev, item, index) => { |
||||
let _text = `${index == 0 ? '' :','}${item}` |
||||
return prev += _text |
||||
}, '') |
||||
return text |
||||
}, |
||||
get(orderId) { |
||||
serve.get(orderId).then(res => { |
||||
if (res.code === 20000) { |
||||
this.info = res.data |
||||
} |
||||
}) |
||||
}, |
||||
confirm() { |
||||
this.controlWindows.code = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container { |
||||
background: #F1F2F7; |
||||
|
||||
>.status-frame { |
||||
position: relative; |
||||
margin-top: 20rpx; |
||||
padding-top: 37rpx; |
||||
padding-right: 30rpx; |
||||
width: 100%; |
||||
height: 170rpx; |
||||
background: #fff; |
||||
|
||||
>view { |
||||
&:nth-of-type(1) { |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
left: 34rpx; |
||||
font-size: 40rpx; |
||||
font-weight: 550; |
||||
color: #333; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
text-align: right; |
||||
font-size: 36rpx; |
||||
font-weight: 550; |
||||
color: #333; |
||||
|
||||
>text { |
||||
color: #F83D3D; |
||||
} |
||||
} |
||||
|
||||
&:nth-of-type(3) { |
||||
margin-top: 12rpx; |
||||
text-align: right; |
||||
font-size: 28rpx; |
||||
color: #666; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.determine-frame { |
||||
padding-top: 85rpx; |
||||
width: 681rpx; |
||||
height: 340rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 15rpx; |
||||
|
||||
>.title { |
||||
text-align: center; |
||||
font-size: 38rpx; |
||||
color: #000; |
||||
|
||||
} |
||||
|
||||
>.buttons { |
||||
|
||||
display: flex; |
||||
justify-content: space-evenly; |
||||
margin-top: 80rpx; |
||||
|
||||
>view { |
||||
width: 250rpx; |
||||
height: 76rpx; |
||||
text-align: center; |
||||
line-height: 76rpx; |
||||
border-radius: 10rpx; |
||||
font-size: 28rpx; |
||||
|
||||
&:nth-of-type(1) { |
||||
background: #FFFFFF; |
||||
border: 1rpx solid #B6B6B6; |
||||
color: #333; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
background: #FE0505; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.info-frame { |
||||
margin-top: 20rpx; |
||||
position: relative; |
||||
background: #fff; |
||||
border-bottom: 12rpx solid #F1F2F7; |
||||
|
||||
&:nth-last-of-type(1) { |
||||
border-bottom: none |
||||
} |
||||
|
||||
.header { |
||||
padding: 35rpx 30rpx 0 34rpx; |
||||
height: 83rpx; |
||||
width: 100%; |
||||
font-size: 28rpx; |
||||
color: #666; |
||||
border-bottom: 1rpx solid #D7D7D7; |
||||
|
||||
>text { |
||||
float: right; |
||||
} |
||||
} |
||||
|
||||
.introduce { |
||||
position: relative; |
||||
padding: 28rpx 29rpx 0 268rpx; |
||||
min-height: 233rpx; |
||||
|
||||
&:nth-last-of-type(1) { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
>image { |
||||
position: absolute; |
||||
top: 13rpx; |
||||
left: 32rpx; |
||||
width: 220rpx; |
||||
height: 220rpx; |
||||
// border: 1px solid #333; |
||||
} |
||||
|
||||
>view { |
||||
&:nth-of-type(1) { |
||||
font-size: 28rpx; |
||||
color: #000; |
||||
} |
||||
|
||||
&:nth-of-type(2), |
||||
&:nth-of-type(3) { |
||||
margin-top: 11rpx; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
} |
||||
|
||||
&:nth-of-type(3) { |
||||
margin-top: 18rpx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
>.detial { |
||||
margin-top: 26rpx; |
||||
padding: 0 32rpx; |
||||
|
||||
>view { |
||||
|
||||
font-size: 28rpx; |
||||
|
||||
>text { |
||||
float: right; |
||||
} |
||||
|
||||
&:nth-of-type(1), |
||||
&:nth-of-type(2), |
||||
{ |
||||
margin-bottom: 17rpx; |
||||
color: #999; |
||||
} |
||||
|
||||
&:nth-of-type(3) { |
||||
color: #999; |
||||
} |
||||
|
||||
&:nth-of-type(4) { |
||||
margin-top: 30rpx; |
||||
color: #000; |
||||
} |
||||
|
||||
&:nth-of-type(5) { |
||||
margin-top: 17rpx; |
||||
color: #000; |
||||
} |
||||
|
||||
&:nth-of-type(6) { |
||||
margin-top: 17rpx; |
||||
color: #F83D3D; |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.footer { |
||||
position: relative; |
||||
margin-top: 40rpx; |
||||
|
||||
.button { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 32rpx; |
||||
width: 198rpx; |
||||
height: 78rpx; |
||||
line-height: 78rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #FFF; |
||||
background: #FE0606; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,279 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
||||
<block slot="backText">返回</block> |
||||
<block slot="content">订单列表</block> |
||||
</cu-custom> |
||||
|
||||
<view class="search"> |
||||
<uni-easyinput prefixIcon="search" borderColor="#DCDFE6" v-model="paramter.customerphone" placeholder="请输入手机号后四位" |
||||
@confirm="search" maxlength="4" /> |
||||
</view> |
||||
|
||||
<scroll-view v-if="dataList.length" class="list" :scroll-y="true" @scrolltolower="lower"> |
||||
<view class="item" v-for="item,index in dataList" :key="index" @click="toDetails(item)"> |
||||
<view class="header">用户手机：{{item.customerPhone}}<text |
||||
:style="{color:statusEnum[item.orderStatus].color}">{{statusEnum[item.orderStatus].value}}</text> |
||||
</view> |
||||
<view class="introduce"> |
||||
<image :src="item.oderDetailImg"></image> |
||||
<view>{{item.productName}}</view> |
||||
<view>规格：{{handler(item.attributeJson)}}</view> |
||||
<view>￥{{item.marketPrice}} X{{item.orderNum}}</view> |
||||
<view>共{{item.orderNum}}件商品已支付积分：{{item.payIntegral}}</view> |
||||
</view> |
||||
</view> |
||||
<view style="height: 30rpx; background: #fff;"></view> |
||||
</scroll-view> |
||||
<view v-else class="empty"> |
||||
<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/yunsite-empty.png"></image> |
||||
<view>还没有订单哦~</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/packageIntegral/orderList.js' |
||||
|
||||
export default { |
||||
options: { |
||||
styleIsolation: 'shared' |
||||
}, |
||||
data() { |
||||
return { |
||||
code: '', |
||||
controlWindows: { |
||||
code: false |
||||
}, |
||||
paramter: { |
||||
currentPage: 1, |
||||
pagesize: 20, |
||||
params: { |
||||
customerphone: '' |
||||
}, |
||||
}, |
||||
dataList: [], |
||||
statusEnum: { |
||||
'-1': { |
||||
color: 'red', |
||||
value: "已取消" |
||||
}, |
||||
0: { |
||||
color: 'blue', |
||||
value: "订单新建" |
||||
}, |
||||
1: { |
||||
color: 'orange', |
||||
value: "待核销" |
||||
}, |
||||
2: { |
||||
color: 'blue', |
||||
value: "已核销" |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
|
||||
onLoad() { |
||||
this.getByPageCloudMini() |
||||
}, |
||||
|
||||
methods: { |
||||
handler(json) { |
||||
json = json.replace(/'/g, '"') |
||||
let res = JSON.parse(json) |
||||
let values = Object.values(res) |
||||
let text =values.reduce((prev,item,index) => { |
||||
let _text = `${index == 0 ? '' :','}${item}` |
||||
return prev += _text |
||||
},'') |
||||
return text |
||||
// let text = '' |
||||
// values.forEach((item, index) => { |
||||
// let _text = `${index == 0 ? '' :','}${item}` |
||||
// text += _text |
||||
// }) |
||||
// return text |
||||
// console.log('values',values) |
||||
}, |
||||
toDetails(item) { |
||||
uni.navigateTo({ |
||||
url: `../orderDetails/index?orderId=${item.orderId}` |
||||
}) |
||||
}, |
||||
search() { |
||||
|
||||
this.paramter.currentPage = 1 |
||||
this.getByPageCloudMini() |
||||
}, |
||||
getByPageCloudMini() { |
||||
serve.getByPageCloudMini(this.paramter).then(res => { |
||||
if (res.code === 20000) { |
||||
if (!res.data.list.length) { |
||||
uni.showToast({ |
||||
title: '没有更多订单啦~', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (this.paramter.currentPage == 1) { |
||||
this.dataList = [] |
||||
} |
||||
this.dataList = this.dataList.concat(res.data.list) |
||||
// console.log(this.dataList) |
||||
} |
||||
}) |
||||
}, |
||||
lower() { |
||||
this.paramter.currentPage += 1 |
||||
this.getByPageCloudMini() |
||||
}, |
||||
determine() { |
||||
this.$refs.popup.open('center') |
||||
}, |
||||
confirm() { |
||||
this.controlWindows.code = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .xt__verify-code .xt__input-ground .xt__box { |
||||
width: 146rpx; |
||||
height: 146rpx; |
||||
border-width: 1rpx; |
||||
border-radius: 14rpx; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
.container { |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background: #F1F2F7; |
||||
|
||||
>.search { |
||||
margin: 50rpx auto 0; |
||||
width: 689rpx; |
||||
height: 74rpx; |
||||
background: #FFF; |
||||
|
||||
} |
||||
|
||||
>.list { |
||||
margin-top: 35rpx; |
||||
flex: 1; |
||||
overflow-y: hidden; |
||||
|
||||
.item { |
||||
position: relative; |
||||
margin-top: 20rpx; |
||||
background: #fff; |
||||
// min-height: 106rpx; |
||||
// border-bottom: 12rpx solid #F1F2F7; |
||||
|
||||
&:nth-of-type(1) { |
||||
margin-top: 0 |
||||
} |
||||
|
||||
.header { |
||||
padding: 26rpx 23rpx 0; |
||||
height: 80rpx; |
||||
// line-height: 83rpx; |
||||
width: 100%; |
||||
font-size: 30rpx; |
||||
color: #666; |
||||
border-bottom: 1rpx solid #D7D7D7; |
||||
|
||||
>text { |
||||
float: right; |
||||
// color: #F83D3D; |
||||
} |
||||
} |
||||
|
||||
.introduce { |
||||
position: relative; |
||||
padding: 24rpx 29rpx 31rpx 268rpx; |
||||
min-height: 220rpx; |
||||
|
||||
>image { |
||||
position: absolute; |
||||
top: 13rpx; |
||||
left: 34rpx; |
||||
width: 220rpx; |
||||
height: 220rpx; |
||||
// border: 1px solid #333; |
||||
} |
||||
|
||||
>view { |
||||
&:nth-of-type(1) { |
||||
font-size: 28rpx; |
||||
color: #000; |
||||
} |
||||
|
||||
&:nth-of-type(2), |
||||
&:nth-of-type(3) { |
||||
margin-top: 11rpx; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
} |
||||
&:nth-of-type(3) { |
||||
margin-top: 18rpx; |
||||
|
||||
} |
||||
|
||||
&:nth-of-type(4) { |
||||
margin-top: 11rpx; |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.footer { |
||||
position: relative; |
||||
margin-top: 40rpx; |
||||
line-height: 78rpx; |
||||
padding: 0 34rpx 40rpx; |
||||
font-size: 32rpx; |
||||
color: #000; |
||||
font-weight: 550; |
||||
|
||||
.button { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 40rpx; |
||||
width: 198rpx; |
||||
height: 78rpx; |
||||
line-height: 78rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #FFF; |
||||
background: #FE0606; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.empty { |
||||
margin: 218rpx auto 0; |
||||
|
||||
>image { |
||||
width: 473rpx; |
||||
height: 404rpx; |
||||
} |
||||
|
||||
>view { |
||||
margin-top: 45rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,323 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
||||
<block slot="backText">返回</block> |
||||
<block slot="content">商品列表</block> |
||||
</cu-custom> |
||||
|
||||
<view class="options-frame"> |
||||
<view v-for="item,index in optionsList" :key="index" :class="index == currentIndex ? 'active':''" |
||||
@click="selectOptions(index)">{{item.text}}<text>({{item.count}})</text></view> |
||||
</view> |
||||
|
||||
<view class="search"> |
||||
<uni-easyinput prefixIcon="search" v-model="paramter.customerphone" placeholder="请输入手机号后四位" |
||||
@confirm="search" maxlength="4" /> |
||||
</view> |
||||
|
||||
<scroll-view v-if="dataList.length" class="list" :scroll-y="true" @scrolltolower="lower"> |
||||
<view class="item" v-for="item,index in dataList" :key="index" @click="toDetails(item)"> |
||||
<view class="header">用户手机：{{item.customerPhone}}<text |
||||
:style="{color:statusEnum[item.orderStatus].color}">{{statusEnum[item.orderStatus].value}}</text> |
||||
</view> |
||||
<view class="introduce"> |
||||
<image :src="item.oderDetailImg"></image> |
||||
<view>{{item.productName}}</view> |
||||
<view>规格：1</view> |
||||
<view>￥{{item.marketPrice}} X{{item.orderNum}}</view> |
||||
<view>共{{item.orderNum}}件商品已支付积分：{{item.payIntegral}}</view> |
||||
</view> |
||||
</view> |
||||
<view style="height: 30rpx; background: #fff;"></view> |
||||
</scroll-view> |
||||
<view v-else class="empty"> |
||||
<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/yunsite-empty.png"></image> |
||||
<view>还没有订单哦~</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/packageIntegral/orderList.js' |
||||
|
||||
export default { |
||||
options: { |
||||
styleIsolation: 'shared' |
||||
}, |
||||
data() { |
||||
return { |
||||
|
||||
currentIndex: 0, |
||||
code: '', |
||||
controlWindows: { |
||||
code: false |
||||
}, |
||||
paramter: { |
||||
currentPage: 1, |
||||
pagesize: 20, |
||||
params: { |
||||
customerphone: '' |
||||
}, |
||||
}, |
||||
dataList: [{},{}], |
||||
optionsList: [{ |
||||
text: '全部', |
||||
count: 0, |
||||
value: '' |
||||
}, { |
||||
text: '已上架', |
||||
count: 0, |
||||
value: '' |
||||
}, { |
||||
text: '未上架', |
||||
count: 0, |
||||
value: '' |
||||
}, { |
||||
text: '待审核', |
||||
count: 0, |
||||
value: '' |
||||
}], |
||||
statusEnum: { |
||||
'-1': { |
||||
color: 'red', |
||||
value: "已取消" |
||||
}, |
||||
0: { |
||||
color: 'blue', |
||||
value: "订单新建" |
||||
}, |
||||
1: { |
||||
color: 'orange', |
||||
value: "待核销" |
||||
}, |
||||
2: { |
||||
color: 'blue', |
||||
value: "已核销" |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
|
||||
onLoad() { |
||||
// this.getByPageCloudMini() |
||||
}, |
||||
|
||||
methods: { |
||||
selectOptions(index) { |
||||
this.currentIndex = index |
||||
}, |
||||
handler(json) { |
||||
json = json.replace(/'/g, '"') |
||||
let res = JSON.parse(json) |
||||
let values = Object.values(res) |
||||
let text = values.reduce((prev, item, index) => { |
||||
let _text = `${index == 0 ? '' :','}${item}` |
||||
return prev += _text |
||||
}, '') |
||||
return text |
||||
}, |
||||
toDetails(item) { |
||||
uni.navigateTo({ |
||||
url: `../orderDetails/index?orderId=${item.orderId}` |
||||
}) |
||||
}, |
||||
search() { |
||||
this.paramter.currentPage = 1 |
||||
this.getByPageCloudMini() |
||||
}, |
||||
getByPageCloudMini() { |
||||
serve.getByPageCloudMini(this.paramter).then(res => { |
||||
if (res.code === 20000) { |
||||
if (!res.data.list.length) { |
||||
uni.showToast({ |
||||
title: '没有更多订单啦~', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (this.paramter.currentPage == 1) { |
||||
this.dataList = [] |
||||
} |
||||
this.dataList = this.dataList.concat(res.data.list) |
||||
} |
||||
}) |
||||
}, |
||||
lower() { |
||||
this.paramter.currentPage += 1 |
||||
this.getByPageCloudMini() |
||||
}, |
||||
determine() { |
||||
this.$refs.popup.open('center') |
||||
}, |
||||
confirm() { |
||||
this.controlWindows.code = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .uni-easyinput__content { |
||||
background: #F7F7F7 !important; |
||||
} |
||||
|
||||
.container { |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background: #fff; |
||||
|
||||
>.options-frame { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 43rpx; |
||||
padding: 0 31rpx; |
||||
|
||||
|
||||
>view { |
||||
width: 144rpx; |
||||
height: 66rpx; |
||||
font-size: 25rpx; |
||||
line-height: 66rpx; |
||||
text-align: center; |
||||
color: #000000; |
||||
background: #F7F7F7; |
||||
|
||||
>text { |
||||
color: #F83D3D; |
||||
} |
||||
|
||||
&.active { |
||||
color: #FFF; |
||||
background: #F83D3D; |
||||
|
||||
>text { |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.search { |
||||
margin: 50rpx auto 0; |
||||
width: 689rpx; |
||||
height: 74rpx; |
||||
background: #F7F7F7; |
||||
|
||||
} |
||||
|
||||
>.list { |
||||
margin-top: 35rpx; |
||||
flex: 1; |
||||
overflow-y: hidden; |
||||
|
||||
.item { |
||||
position: relative; |
||||
margin-top: 20rpx; |
||||
background: #fff; |
||||
// min-height: 106rpx; |
||||
// border-bottom: 12rpx solid #F1F2F7; |
||||
|
||||
&:nth-of-type(1) { |
||||
margin-top: 0 |
||||
} |
||||
|
||||
.header { |
||||
padding: 26rpx 23rpx 0; |
||||
height: 80rpx; |
||||
// line-height: 83rpx; |
||||
width: 100%; |
||||
font-size: 30rpx; |
||||
color: #666; |
||||
border-bottom: 1rpx solid #D7D7D7; |
||||
|
||||
>text { |
||||
float: right; |
||||
// color: #F83D3D; |
||||
} |
||||
} |
||||
|
||||
.introduce { |
||||
position: relative; |
||||
padding: 24rpx 29rpx 31rpx 268rpx; |
||||
min-height: 220rpx; |
||||
|
||||
>image { |
||||
position: absolute; |
||||
top: 13rpx; |
||||
left: 34rpx; |
||||
width: 220rpx; |
||||
height: 220rpx; |
||||
// border: 1px solid #333; |
||||
} |
||||
|
||||
>view { |
||||
&:nth-of-type(1) { |
||||
font-size: 28rpx; |
||||
color: #000; |
||||
} |
||||
|
||||
&:nth-of-type(2), |
||||
&:nth-of-type(3) { |
||||
margin-top: 11rpx; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
} |
||||
|
||||
&:nth-of-type(3) { |
||||
margin-top: 18rpx; |
||||
|
||||
} |
||||
|
||||
&:nth-of-type(4) { |
||||
margin-top: 11rpx; |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.footer { |
||||
position: relative; |
||||
margin-top: 40rpx; |
||||
line-height: 78rpx; |
||||
padding: 0 34rpx 40rpx; |
||||
font-size: 32rpx; |
||||
color: #000; |
||||
font-weight: 550; |
||||
|
||||
.button { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 40rpx; |
||||
width: 198rpx; |
||||
height: 78rpx; |
||||
line-height: 78rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #FFF; |
||||
background: #FE0606; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.empty { |
||||
margin: 218rpx auto 0; |
||||
|
||||
>image { |
||||
width: 473rpx; |
||||
height: 404rpx; |
||||
} |
||||
|
||||
>view { |
||||
margin-top: 45rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,298 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
||||
<block slot="backText">返回</block> |
||||
<block slot="content">订单提货</block> |
||||
</cu-custom> |
||||
|
||||
<view class="code">提货码: 1899</view> |
||||
|
||||
<scroll-view v-if="dataList.length" class="list" :scroll-y="true" @scrolltolower="lower"> |
||||
<view class="item" v-for="item,index in dataList" :key="index"> |
||||
<view class="header">用户手机：18879008955<text>待提货</text></view> |
||||
<view class="introduce"> |
||||
<image></image> |
||||
<view>康师傅方便面 经典红烧牛肉面*5+番茄鸡蛋牛肉*1</view> |
||||
<view>规格：默认</view> |
||||
<view>￥120.61 X1</view> |
||||
<view>共1件商品已支付积分：20000</view> |
||||
</view> |
||||
<view class="footer"> |
||||
提货码：1899 |
||||
<view class="button" @click="determine">确定提货</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
<view v-else class="empty"> |
||||
<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/yunsite-empty.png"></image> |
||||
<view>还没有订单哦~</view> |
||||
</view> |
||||
|
||||
|
||||
<view class="take-frame" v-if="controlWindows.code"> |
||||
<view>请输入提货码</view> |
||||
<view>提货码或手机后四位</view> |
||||
<view class="code"> |
||||
<xt-verify-code v-model="code" cursorColor="#333" boxNormalColor="#EAEAEA" boxActiveColor="#EAEAEA" |
||||
@confirm="confirm" :size="4" :isFocus="false"></xt-verify-code> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- <button class="button" type="primary" @click="toggle('center')"><text class="button-text">居中</text></button> --> |
||||
|
||||
|
||||
|
||||
|
||||
<uni-popup ref="popup"> |
||||
<view class="determine-frame"> |
||||
<view class="title">是否立即提货</view> |
||||
<view class="buttons"> |
||||
<view>取消</view> |
||||
<view>确认</view> |
||||
</view> |
||||
</view> |
||||
</uni-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/packageBill/push.js' |
||||
|
||||
export default { |
||||
options: { |
||||
styleIsolation: 'shared' |
||||
}, |
||||
data() { |
||||
return { |
||||
code: '', |
||||
controlWindows: { |
||||
code: false |
||||
}, |
||||
dataList: [1] |
||||
} |
||||
}, |
||||
|
||||
onLoad() {}, |
||||
|
||||
methods: { |
||||
determine() { |
||||
this.$refs.popup.open('center') |
||||
}, |
||||
confirm() { |
||||
this.controlWindows.code = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .xt__verify-code .xt__input-ground .xt__box { |
||||
width: 146rpx; |
||||
height: 146rpx; |
||||
border-width: 1rpx; |
||||
border-radius: 14rpx; |
||||
} |
||||
|
||||
.determine-frame { |
||||
padding-top: 85rpx; |
||||
width: 681rpx; |
||||
height: 340rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 15rpx; |
||||
|
||||
>.title { |
||||
text-align: center; |
||||
font-size: 38rpx; |
||||
color: #000; |
||||
|
||||
} |
||||
|
||||
>.buttons { |
||||
|
||||
display: flex; |
||||
justify-content: space-evenly; |
||||
margin-top: 80rpx; |
||||
|
||||
>view { |
||||
width: 250rpx; |
||||
height: 76rpx; |
||||
text-align: center; |
||||
line-height: 76rpx; |
||||
border-radius: 10rpx; |
||||
font-size: 28rpx; |
||||
|
||||
&:nth-of-type(1) { |
||||
background: #FFFFFF; |
||||
border: 1rpx solid #B6B6B6; |
||||
color: #333; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
background: #FE0505; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.take-frame { |
||||
position: fixed; |
||||
top: 84px; |
||||
left: 0; |
||||
z-index: 100; |
||||
padding-top: 94rpx; |
||||
height: calc(100vh - 84px); |
||||
width: 100%; |
||||
background: #fff; |
||||
|
||||
>view { |
||||
padding-left: 31rpx; |
||||
|
||||
&:nth-of-type(1) { |
||||
font-size: 48rpx; |
||||
font-weight: 550; |
||||
color: #000; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
margin-top: 18rpx; |
||||
font-size: 36rpx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
>.code { |
||||
padding-right: 31rpx; |
||||
margin-top: 61rpx; |
||||
} |
||||
} |
||||
|
||||
.container { |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background: #fff; |
||||
|
||||
>.code { |
||||
margin: 37rpx auto 0; |
||||
width: 686rpx; |
||||
height: 88rpx; |
||||
line-height: 88rpx; |
||||
text-align: center; |
||||
font-size: 32rpx; |
||||
color: #000; |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
>.list { |
||||
margin-top: 23rpx; |
||||
flex: 1; |
||||
overflow-y: hidden; |
||||
|
||||
.item { |
||||
position: relative; |
||||
background: #fff; |
||||
border-bottom: 12rpx solid #F1F2F7; |
||||
|
||||
&:nth-last-of-type(1) { |
||||
border-bottom: none |
||||
} |
||||
|
||||
.header { |
||||
padding: 26rpx 23rpx 0; |
||||
height: 80rpx; |
||||
width: 100%; |
||||
font-size: 30rpx; |
||||
color: #666; |
||||
border-bottom: 1rpx solid #D7D7D7; |
||||
|
||||
>text { |
||||
float: right; |
||||
color: #F83D3D; |
||||
} |
||||
} |
||||
|
||||
.introduce { |
||||
position: relative; |
||||
padding: 24rpx 29rpx 0 268rpx; |
||||
min-height: 220rpx; |
||||
|
||||
>image { |
||||
position: absolute; |
||||
top: 13rpx; |
||||
left: 34rpx; |
||||
width: 220rpx; |
||||
height: 220rpx; |
||||
// border: 1px solid #333; |
||||
} |
||||
|
||||
>view { |
||||
&:nth-of-type(1) { |
||||
font-size: 28rpx; |
||||
color: #000; |
||||
} |
||||
|
||||
&:nth-of-type(2), |
||||
&:nth-of-type(3) { |
||||
margin-top: 11rpx; |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
} |
||||
|
||||
&:nth-of-type(3) { |
||||
margin-top: 18rpx; |
||||
|
||||
} |
||||
|
||||
&:nth-of-type(4) { |
||||
margin-top: 11rpx; |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.footer { |
||||
position: relative; |
||||
margin-top: 40rpx; |
||||
line-height: 78rpx; |
||||
padding: 0 34rpx 40rpx; |
||||
font-size: 32rpx; |
||||
color: #000; |
||||
font-weight: 550; |
||||
|
||||
.button { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 40rpx; |
||||
width: 198rpx; |
||||
height: 78rpx; |
||||
line-height: 78rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #FFF; |
||||
background: #FE0606; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
>.empty { |
||||
margin: 218rpx auto 0; |
||||
|
||||
>image { |
||||
width: 473rpx; |
||||
height: 404rpx; |
||||
} |
||||
|
||||
>view { |
||||
margin-top: 45rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,46 @@ |
||||
## 1.3.1（2023-06-08） |
||||
- 修改验证码过小 出现两个光标的问题 |
||||
## 1.3.0（2023-05-20） |
||||
- 增加自定义输入文字的颜色 |
||||
## 1.2.6（2023-05-17） |
||||
- 光标增加层级 |
||||
## 1.2.5（2023-05-14） |
||||
- 处理多次触犯confirm 问题 |
||||
## 1.2.4（2023-05-07） |
||||
- 兼容vue3 h5打包后运行找到createSelectorQuery 函数的问题 |
||||
## 1.2.3（2023-04-25） |
||||
- 双向绑定v-model 写法兼容性 |
||||
## 1.2.2（2023-03-31） |
||||
- 抽离公共代码，部分优化 |
||||
## 1.2.1（2023-03-19） |
||||
- 处理vue2情况下，出现引入vue3api bug |
||||
## 1.2.0（2023-03-19） |
||||
- 增加vue3 环境 |
||||
## 1.1.6（2023-01-01） |
||||
- scss样式修改成css |
||||
- size 去除 数量限制，限制只能输入正整数 |
||||
## 1.1.5（2022-12-08） |
||||
- 修复支付宝小程序，因input组件遮蔽的问题。显示样式不一致问题 |
||||
## 1.1.4（2022-12-02） |
||||
- 修复密码形式ios手机失去焦点后再聚焦，不能删除的问题 |
||||
## 1.1.3（2022-12-02） |
||||
- 撤销对ios手机的特殊处理 |
||||
## 1.1.2（2022-11-13） |
||||
- 处理ios问题，添加ios机型判断 |
||||
## 1.1.1（2022-10-11） |
||||
- 优化对ios的input组件bug的处理 |
||||
## 1.1.0（2022-10-11） |
||||
- 修复ios环境下input组件，失去焦点后再次输入会自动清空bug |
||||
## 1.0.4（2021-12-27） |
||||
## 修改文档 |
||||
## 1.0.3（2021-10-18） |
||||
修改说明文档 |
||||
## 1.0.2（2021-10-18） |
||||
修改size 传入值，可以传入1~6 的值 |
||||
|
||||
## 1.0.1（2021-09-02） |
||||
- type 属性参数修改 box、middle、bottom 三种 |
||||
- 新增middle模式 |
||||
## 1.0.0（2021-08-31） |
||||
- 验证码输入 |
||||
- 提供两种显示模式 |
||||
@ -0,0 +1,51 @@ |
||||
export const propsMap = { |
||||
// #ifdef VUE2
|
||||
value: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
modelValue: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
// #endif
|
||||
type: { |
||||
type: String, |
||||
default: () => 'box' |
||||
}, |
||||
inputType: { |
||||
type: String, |
||||
default: () => 'number' |
||||
}, |
||||
size: { |
||||
type: Number, |
||||
default: () => 6 |
||||
}, |
||||
isFocus: { |
||||
type: Boolean, |
||||
default: () => true |
||||
}, |
||||
isPassword: { |
||||
type: Boolean, |
||||
default: () => false |
||||
}, |
||||
cursorColor: { |
||||
type: String, |
||||
default: () => '#cccccc' |
||||
}, |
||||
boxNormalColor: { |
||||
type: String, |
||||
default: () => '#cccccc' |
||||
}, |
||||
boxActiveColor: { |
||||
type: String, |
||||
default: () => '#000000' |
||||
}, |
||||
color: { |
||||
type: String, |
||||
default: () => '#333333' |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
/** |
||||
* @description 获取元素节点 - 大小等信息 |
||||
* @param {string} elm - 节点的id、class 相当于 document.querySelect的参数 -eg: #id |
||||
* @param {string} type = [single|array] - 单个元素获取多个元素 默认是单个元素 |
||||
* @param {Function} callback - 回调函数 |
||||
* @param {object} that - 上下文环境 vue2：this ,vue3: getCurrentInstance(); |
||||
*/ |
||||
export const getElementRect = (that) => (elm, type = 'single', callback) => { |
||||
|
||||
// #ifndef H5
|
||||
uni |
||||
.createSelectorQuery() |
||||
.in(that)[type === 'array' ? 'selectAll' : 'select'](elm) |
||||
.boundingClientRect() |
||||
.exec(data => { |
||||
callback(data[0]); |
||||
}); |
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
let elmArr = []; |
||||
const result = []; |
||||
if (type === 'array') { |
||||
elmArr = document.querySelectorAll(elm); |
||||
} else { |
||||
elmArr.push(document.querySelector(elm)); |
||||
} |
||||
|
||||
for (let elm of elmArr) { |
||||
result.push(elm.getBoundingClientRect()); |
||||
} |
||||
console.log('result', result) |
||||
callback(type === 'array' ? result : result[0]); |
||||
// #endif
|
||||
} |
||||
@ -0,0 +1,408 @@ |
||||
<template> |
||||
<!-- #ifdef VUE2 --> |
||||
<view class="xt__verify-code"> |
||||
<!-- 输入框 --> |
||||
<input id="xt__input" :value="code" class="xt__input" :focus="isFocus" :type="inputType" :maxlength="itemSize" @input="onInput" @focus="inputFocus" @blur="inputBlur" /> |
||||
|
||||
<!-- 光标 --> |
||||
<view |
||||
id="xt__cursor" |
||||
v-if="cursorVisible && type !== 'middle'" |
||||
class="xt__cursor" |
||||
:style="{ left: codeCursorLeft[code.length] + 'px', height: cursorHeight + 'px', backgroundColor: cursorColor }" |
||||
></view> |
||||
|
||||
<!-- 输入框 - 组 --> |
||||
<view id="xt__input-ground" class="xt__input-ground"> |
||||
<view |
||||
v-for="(item, index) in itemSize" |
||||
:key="index" |
||||
:style="{ borderColor: code.length === index && cursorVisible ? boxActiveColor : boxNormalColor }" |
||||
:class="['xt__box', `xt__box-${type + ''}`, `xt__box::after`]" |
||||
> |
||||
<view :style="{ borderColor: boxActiveColor }" class="xt__middle-line" v-if="type === 'middle' && !code[index]"></view> |
||||
|
||||
<text :style="{ color: color }" class="xt__code-text">{{ code[index] | codeFormat(isPassword) }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- #endif --> |
||||
|
||||
<!-- #ifdef VUE3 --> |
||||
<view class="xt__verify-code"> |
||||
<!-- 输入框 --> |
||||
<input |
||||
id="xt__input" |
||||
:value="code" |
||||
class="xt__input" |
||||
:focus="props.isFocus" |
||||
:type="props.inputType" |
||||
:maxlength="itemSize" |
||||
@input="onInput" |
||||
@focus="inputFocus" |
||||
@blur="inputBlur" |
||||
/> |
||||
|
||||
<!-- 光标 --> |
||||
<view |
||||
id="xt__cursor" |
||||
v-if="cursorVisible && props.type !== 'middle'" |
||||
class="xt__cursor" |
||||
:style="{ left: codeCursorLeft[code.length] + 'px', height: cursorHeight + 'px', backgroundColor: props.cursorColor }" |
||||
></view> |
||||
|
||||
<!-- 输入框 - 组 --> |
||||
<view id="xt__input-ground" class="xt__input-ground"> |
||||
<view |
||||
v-for="(item, index) in itemSize" |
||||
:key="index" |
||||
:style="{ borderColor: code.length === index && cursorVisible ? props.boxActiveColor : props.boxNormalColor }" |
||||
:class="['xt__box', `xt__box-${props.type + ''}`, `xt__box::after`]" |
||||
> |
||||
<view :style="{ borderColor: props.boxActiveColor }" class="xt__middle-line" v-if="props.type === 'middle' && !code[index]"></view> |
||||
<text :style="{ color: props.color }" class="xt__code-text">{{ codeFormat(code[index], props.isPassword) }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- #endif --> |
||||
</template> |
||||
|
||||
<!-- #ifdef VUE3 --> |
||||
<script setup> |
||||
/** |
||||
* @description 输入验证码组件 |
||||
* @property {string} type = [box|middle|bottom] - 显示类型 默认：box -eg:bottom |
||||
* @property {string} inputType = [text|number] - 输入框类型 默认：number -eg:number |
||||
* @property {number} size - 验证码输入框数量 默认：6 -eg:6 |
||||
* @property {boolean} isFocus - 是否立即聚焦 默认：true |
||||
* @property {boolean} isPassword - 是否以密码形式显示 默认false -eg: false |
||||
* @property {string} cursorColor - 光标颜色 默认：#cccccc |
||||
* @property {string} boxNormalColor - 光标未聚焦到的框的颜色 默认：#cccccc |
||||
* @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认：#000000 |
||||
* @property {string} color - 光标聚焦到的框的颜色 默认：#333333 |
||||
* @event {Function(data)} confirm - 输入完成回调函数 |
||||
*/ |
||||
import { defineProps, onMounted, ref, getCurrentInstance, watch } from 'vue'; |
||||
import { propsMap } from './config.js'; |
||||
import { getElementRect } from './util.js'; |
||||
|
||||
const props = defineProps(propsMap); |
||||
const emits = defineEmits(['update:modelValue', 'confirm']); |
||||
|
||||
// 获取当前组件的实例 |
||||
const currentInstance = getCurrentInstance(); |
||||
|
||||
const getElement = getElementRect(currentInstance); |
||||
|
||||
const cursorVisible = ref(false); |
||||
const cursorHeight = ref(35); |
||||
const code = ref(''); // 输入的验证码 |
||||
const codeCursorLeft = ref([]); // 向左移动的距离数组, |
||||
const itemSize = ref(6); |
||||
const isPatch = ref(false); |
||||
|
||||
/** |
||||
* 设置验证码框数量 |
||||
*/ |
||||
function validatorSize() { |
||||
if (props.size > 0) { |
||||
itemSize.value = Math.floor(props.size); |
||||
} else { |
||||
throw "methods of 'size' is integer"; |
||||
} |
||||
} |
||||
/** |
||||
* @description 初始化 |
||||
*/ |
||||
function init() { |
||||
getCodeCursorLeft(); |
||||
setCursorHeight(); |
||||
} |
||||
|
||||
/** |
||||
* @description 计算光标的高度 |
||||
*/ |
||||
function setCursorHeight() { |
||||
getElement('.xt__box', 'single', boxElm => { |
||||
cursorHeight.value = boxElm.height * 0.6; |
||||
}); |
||||
} |
||||
/** |
||||
* @description 获取光标在每一个box的left位置 |
||||
*/ |
||||
function getCodeCursorLeft() { |
||||
// 获取父级框的位置信息 |
||||
getElement('#xt__input-ground', 'single', parentElm => { |
||||
const parentLeft = parentElm.left; |
||||
// 获取各个box信息 |
||||
getElement('.xt__box', 'array', elms => { |
||||
codeCursorLeft.value = []; |
||||
elms.forEach(elm => { |
||||
codeCursorLeft.value.push(elm.left - parentLeft + elm.width / 2); |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
// 输入框输入变化的回调 |
||||
function onInput(e) { |
||||
let { value, keyCode } = e.detail; |
||||
cursorVisible.value = value.length < itemSize.value; |
||||
code.value = value; |
||||
emits('update:modelValue', value); |
||||
inputSuccess(value); |
||||
} |
||||
|
||||
// 输入完成回调 |
||||
function inputSuccess(value) { |
||||
if (value.length === itemSize.value && !isPatch.value) { |
||||
isPatch.value = true; |
||||
emits('confirm', value); |
||||
} else { |
||||
isPatch.value = false; |
||||
} |
||||
} |
||||
// 输入聚焦 |
||||
function inputFocus() { |
||||
cursorVisible.value = code.value.length < itemSize.value; |
||||
} |
||||
// 输入失去焦点 |
||||
function inputBlur() { |
||||
cursorVisible.value = false; |
||||
} |
||||
|
||||
// 判断文本如何显示 |
||||
function codeFormat(val, isPassword) { |
||||
return val ? (isPassword ? '*' : val) : ''; |
||||
} |
||||
|
||||
onMounted(() => { |
||||
cursorVisible.value = props.isFocus; |
||||
validatorSize(); |
||||
init(); |
||||
}); |
||||
|
||||
watch( |
||||
() => props.modelValue, |
||||
val => { |
||||
if (val !== code.value) { |
||||
code.value = val; |
||||
} |
||||
} |
||||
); |
||||
</script> |
||||
<!-- #endif --> |
||||
|
||||
<!-- #ifdef VUE2 --> |
||||
<script> |
||||
/** |
||||
* @description 输入验证码组件 |
||||
* @property {string} type = [box|middle|bottom] - 显示类型 默认：box -eg:bottom |
||||
* @property {string} inputType = [text|number] - 输入框类型 默认：number -eg:number |
||||
* @property {number} size - 验证码输入框数量 默认：6 -eg:6 |
||||
* @property {boolean} isFocus - 是否立即聚焦 默认：true |
||||
* @property {boolean} isPassword - 是否以密码形式显示 默认false -eg: false |
||||
* @property {string} cursorColor - 光标颜色 默认：#cccccc |
||||
* @property {string} boxNormalColor - 光标未聚焦到的框的颜色 默认：#cccccc |
||||
* @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认：#000000 |
||||
* @property {string} color - 光标聚焦到的框的颜色 默认：#333333 |
||||
* @event {Function(data)} confirm - 输入完成回调函数 |
||||
*/ |
||||
import { propsMap } from './config.js'; |
||||
import { getElementRect } from './util.js'; |
||||
export default { |
||||
name: 'xt-verify-code', |
||||
props: propsMap, |
||||
model: { |
||||
prop: 'value', |
||||
event: 'input' |
||||
}, |
||||
data() { |
||||
return { |
||||
cursorVisible: false, |
||||
cursorHeight: 35, |
||||
code: '', // 输入的验证码 |
||||
codeCursorLeft: [], // 向左移动的距离数组, |
||||
itemSize: 6, |
||||
getElement: getElementRect(this), |
||||
isPatch: false |
||||
}; |
||||
}, |
||||
created() { |
||||
this.cursorVisible = this.isFocus; |
||||
this.validatorSize(); |
||||
}, |
||||
mounted() { |
||||
this.init(); |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 设置验证码框数量 |
||||
*/ |
||||
validatorSize() { |
||||
if (this.size > 0) { |
||||
this.itemSize = Math.floor(this.size); |
||||
} else { |
||||
throw "methods of 'size' is integer"; |
||||
} |
||||
}, |
||||
/** |
||||
* @description 初始化 |
||||
*/ |
||||
init() { |
||||
this.getCodeCursorLeft(); |
||||
this.setCursorHeight(); |
||||
}, |
||||
/** |
||||
* @description 计算光标的高度 |
||||
*/ |
||||
setCursorHeight() { |
||||
this.getElement('.xt__box', 'single', boxElm => { |
||||
this.cursorHeight = boxElm.height * 0.6; |
||||
}); |
||||
}, |
||||
/** |
||||
* @description 获取光标在每一个box的left位置 |
||||
*/ |
||||
getCodeCursorLeft() { |
||||
// 获取父级框的位置信息 |
||||
this.getElement('#xt__input-ground', 'single', parentElm => { |
||||
const parentLeft = parentElm.left; |
||||
// 获取各个box信息 |
||||
this.getElement('.xt__box', 'array', elms => { |
||||
this.codeCursorLeft = []; |
||||
elms.forEach(elm => { |
||||
this.codeCursorLeft.push(elm.left - parentLeft + elm.width / 2); |
||||
}); |
||||
}); |
||||
}); |
||||
}, |
||||
|
||||
// 输入框输入变化的回调 |
||||
onInput(e) { |
||||
let { value, keyCode } = e.detail; |
||||
this.cursorVisible = value.length < this.itemSize; |
||||
this.code = value; |
||||
this.$emit('input', value); |
||||
this.inputSuccess(value); |
||||
}, |
||||
|
||||
// 输入完成回调 |
||||
inputSuccess(value) { |
||||
if (value.length === this.itemSize && !this.isPatch) { |
||||
this.$emit('confirm', value); |
||||
} else { |
||||
this.isPatch = false; |
||||
} |
||||
}, |
||||
// 输入聚焦 |
||||
inputFocus() { |
||||
this.cursorVisible = this.code.length < this.itemSize; |
||||
}, |
||||
// 输入失去焦点 |
||||
inputBlur() { |
||||
this.cursorVisible = false; |
||||
} |
||||
}, |
||||
watch: { |
||||
value(val) { |
||||
if (val !== this.code) { |
||||
this.code = val; |
||||
} |
||||
} |
||||
}, |
||||
filters: { |
||||
codeFormat(val, isPassword) { |
||||
return val ? (isPassword ? '*' : val) : ''; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<!-- #endif --> |
||||
|
||||
<style > |
||||
.xt__verify-code { |
||||
position: relative; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.xt__verify-code .xt__input { |
||||
height: 100%; |
||||
width: 200vw; |
||||
position: absolute; |
||||
left: -100vw; |
||||
z-index: 1; |
||||
color: transparent; |
||||
caret-color: transparent; |
||||
background-color: rgba(0, 0, 0, 0); |
||||
} |
||||
.xt__verify-code .xt__cursor { |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
display: inline-block; |
||||
width: 2px; |
||||
animation-name: xt__cursor; |
||||
animation-duration: 0.8s; |
||||
animation-iteration-count: infinite; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.xt__verify-code .xt__input-ground { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.xt__verify-code .xt__input-ground .xt__box { |
||||
position: relative; |
||||
display: inline-block; |
||||
width: 100rpx; |
||||
height: 140rpx; |
||||
} |
||||
|
||||
.xt__verify-code .xt__input-ground .xt__box-bottom { |
||||
border-bottom-width: 2px; |
||||
border-bottom-style: solid; |
||||
} |
||||
|
||||
.xt__verify-code .xt__input-ground .xt__box-box { |
||||
border-width: 2px; |
||||
border-style: solid; |
||||
} |
||||
|
||||
.xt__verify-code .xt__input-ground .xt__box-middle { |
||||
border: none; |
||||
} |
||||
|
||||
.xt__input-ground .xt__box .xt__middle-line { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 50%; |
||||
transform: translate(-50%, -50%); |
||||
border-bottom-width: 2px; |
||||
border-bottom-style: solid; |
||||
} |
||||
|
||||
.xt__input-ground .xt__box .xt__code-text { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
font-size: 80rpx; |
||||
transform: translate(-50%, -50%); |
||||
} |
||||
|
||||
@keyframes xt__cursor { |
||||
0% { |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,79 @@ |
||||
{ |
||||
"id": "xt-verify-code", |
||||
"displayName": "xt-verify-code验证码输入", |
||||
"version": "1.3.1", |
||||
"description": "xt-verify-code验证码输入组件，提供三种显示模式", |
||||
"keywords": [ |
||||
"xt-verify-code", |
||||
"verify", |
||||
"验证码" |
||||
], |
||||
"repository": "https://github.com/xiaodaweb/xt-ui/tree/main/uni_modules/xt-verify-code", |
||||
"engines": { |
||||
"HBuilderX": "^3.1.0" |
||||
}, |
||||
"dcloudext": { |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "1010161292" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "", |
||||
"type": "component-vue" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": [], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
}, |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "u" |
||||
}, |
||||
"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" |
||||
}, |
||||
"快应用": { |
||||
"华为": "y", |
||||
"联盟": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
# 验证码输入框 |
||||
## 使用方法 |
||||
```vue |
||||
<xt-verify-code v-model="verifyCode" @confirm="confirm"></xt-verify-code> |
||||
``` |
||||
|
||||
## 参数 |
||||
|属性 |类型 |说明 |默认值 | |
||||
|-- |-- |-- |-- | |
||||
|value(v-model) |string |值(可双向绑定) |'' | |
||||
|type |string |验证输入框类型可选值: box、middle、bottom |box | |
||||
|inputType |string |输入类型 可选值：text、number |number | |
||||
|size |number |验证码框数量 |6 | |
||||
|isFocus |boolean|是否一开始聚焦 |true | |
||||
|isPassword |boolean|是否使用密码方式显示 |false | |
||||
|cursorColor |string |光标颜色 |#cccccc| |
||||
|boxNormalColor |string |显示框未选中的颜色 |#cccccc| |
||||
|boxActiveColor |string |显示框选中的颜色如果type='middle' 则是线的默认样式 |#000000| |
||||
|color |string |输入文字的颜色 |#333333| |
||||
|@confirm |event |输入完成的回调事件 {(code)=>{}} | | |
||||
Loading…
Reference in new issue