更新
This commit is contained in:
xiaozhiyong
17
api/packageIntegral/orderList.js
Normal file
17
api/packageIntegral/orderList.js
Normal file
@@ -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',
|
||||
})
|
||||
}
|
||||
}
|
||||
322
packageIntegral/orderDetails/index.vue
Normal file
322
packageIntegral/orderDetails/index.vue
Normal file
@@ -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>
|
||||
279
packageIntegral/orderList/index.vue
Normal file
279
packageIntegral/orderList/index.vue
Normal file
@@ -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>
|
||||
323
packageIntegral/productList/index.vue
Normal file
323
packageIntegral/productList/index.vue
Normal file
@@ -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>
|
||||
298
packageIntegral/takeGoods/index.vue
Normal file
298
packageIntegral/takeGoods/index.vue
Normal file
@@ -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>
|
||||
16
pages.json
16
pages.json
@@ -87,6 +87,22 @@
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "packageIntegral",
|
||||
"pages": [{
|
||||
"path": "takeGoods/index",
|
||||
"style": {}
|
||||
},{
|
||||
"path": "orderDetails/index",
|
||||
"style": {}
|
||||
},{
|
||||
"path": "orderList/index",
|
||||
"style": {}
|
||||
},{
|
||||
"path": "productList/index",
|
||||
"style": {}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "packageOrders",
|
||||
"pages": [{
|
||||
"path": "pages/orderList/OrderDetail/OrderDetail",
|
||||
|
||||
@@ -421,6 +421,24 @@
|
||||
obj.color = 'blue',
|
||||
obj.badge = 0
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '订单提货') {
|
||||
obj.cuIcon = 'punch',
|
||||
obj.path = '/packageIntegral/takeGoods/index',
|
||||
obj.color = 'blue',
|
||||
obj.badge = 0
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '商城订单') {
|
||||
obj.cuIcon = 'punch',
|
||||
obj.path = '/packageIntegral/orderList/index',
|
||||
obj.color = 'blue',
|
||||
obj.badge = 0
|
||||
obj.name = list.roleName
|
||||
}else if (list.roleName == '商品列表') {
|
||||
obj.cuIcon = 'punch',
|
||||
obj.path = '/packageIntegral/productList/index',
|
||||
obj.color = 'blue',
|
||||
obj.badge = 0
|
||||
obj.name = list.roleName
|
||||
}
|
||||
return obj
|
||||
},
|
||||
|
||||
@@ -173,65 +173,65 @@
|
||||
|
||||
})
|
||||
},
|
||||
Splicing(list) {
|
||||
let obj = {
|
||||
cuIcon: '',
|
||||
path: '',
|
||||
color: '',
|
||||
badge: 0,
|
||||
name: ''
|
||||
}
|
||||
if (list.roleName == '扫码加油') {
|
||||
obj.cuIcon = 'scan',
|
||||
obj.path = '/pages/station-info/scan-camera/scan-camera',
|
||||
obj.color = 'olive',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '经营分析') {
|
||||
obj.cuIcon = 'new',
|
||||
obj.path = '',
|
||||
obj.color = 'orange',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '加油订单') {
|
||||
obj.cuIcon = 'form',
|
||||
obj.path = '/packageOrders/pages/orderList/orderList',
|
||||
obj.color = 'yellow',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '油站二维码') {
|
||||
obj.cuIcon = 'qr_code',
|
||||
obj.path = '/packageQr/pages/qrsite/QrCode_xy',
|
||||
obj.color = 'cyan',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '员工管理') {
|
||||
obj.cuIcon = 'expressman',
|
||||
obj.path = '/packageStaff/pages/staff/List/List',
|
||||
obj.color = 'mauve',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '油站信息') {
|
||||
obj.cuIcon = 'punch',
|
||||
obj.path = '/packageQr/pages/partnership/partnership',
|
||||
obj.color = 'blue',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '交易统计') {
|
||||
obj.cuIcon = 'punch',
|
||||
obj.path = '/pages/TransactionStatistics/TransactionStatistics',
|
||||
obj.color = 'blue',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
} else if (list.roleName == '星油云站超级管理员') {
|
||||
obj.cuIcon = 'punch',
|
||||
obj.path = ' ',
|
||||
obj.color = 'blue',
|
||||
obj.badge = 0,
|
||||
obj.name = list.roleName
|
||||
}
|
||||
return obj
|
||||
},
|
||||
// Splicing(list) {
|
||||
// let obj = {
|
||||
// cuIcon: '',
|
||||
// path: '',
|
||||
// color: '',
|
||||
// badge: 0,
|
||||
// name: ''
|
||||
// }
|
||||
// if (list.roleName == '扫码加油') {
|
||||
// obj.cuIcon = 'scan',
|
||||
// obj.path = '/pages/station-info/scan-camera/scan-camera',
|
||||
// obj.color = 'olive',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// } else if (list.roleName == '经营分析') {
|
||||
// obj.cuIcon = 'new',
|
||||
// obj.path = '',
|
||||
// obj.color = 'orange',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// } else if (list.roleName == '加油订单') {
|
||||
// obj.cuIcon = 'form',
|
||||
// obj.path = '/packageOrders/pages/orderList/orderList',
|
||||
// obj.color = 'yellow',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// } else if (list.roleName == '油站二维码') {
|
||||
// obj.cuIcon = 'qr_code',
|
||||
// obj.path = '/packageQr/pages/qrsite/QrCode_xy',
|
||||
// obj.color = 'cyan',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// } else if (list.roleName == '员工管理') {
|
||||
// obj.cuIcon = 'expressman',
|
||||
// obj.path = '/packageStaff/pages/staff/List/List',
|
||||
// obj.color = 'mauve',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// } else if (list.roleName == '油站信息') {
|
||||
// obj.cuIcon = 'punch',
|
||||
// obj.path = '/packageQr/pages/partnership/partnership',
|
||||
// obj.color = 'blue',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// } else if (list.roleName == '交易统计') {
|
||||
// obj.cuIcon = 'punch',
|
||||
// obj.path = '/pages/TransactionStatistics/TransactionStatistics',
|
||||
// obj.color = 'blue',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// } else if (list.roleName == '星油云站超级管理员') {
|
||||
// obj.cuIcon = 'punch',
|
||||
// obj.path = ' ',
|
||||
// obj.color = 'blue',
|
||||
// obj.badge = 0,
|
||||
// obj.name = list.roleName
|
||||
// }
|
||||
// return obj
|
||||
// },
|
||||
// getSiteInfo() {
|
||||
// //获取油站基本资料
|
||||
// oliSiteApi.getSiteDetail(this.channelId)
|
||||
|
||||
46
uni_modules/xt-verify-code/changelog.md
Normal file
46
uni_modules/xt-verify-code/changelog.md
Normal file
@@ -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'
|
||||
}
|
||||
}
|
||||
35
uni_modules/xt-verify-code/components/xt-verify-code/util.js
Normal file
35
uni_modules/xt-verify-code/components/xt-verify-code/util.js
Normal file
@@ -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>
|
||||
79
uni_modules/xt-verify-code/package.json
Normal file
79
uni_modules/xt-verify-code/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
20
uni_modules/xt-verify-code/readme.md
Normal file
20
uni_modules/xt-verify-code/readme.md
Normal file
@@ -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)=>{}} | |
|
||||
Reference in New Issue
Block a user