积分商城h5版
This commit is contained in:
jxg
commit
44b1101b77
24
api/index.js
24
api/index.js
|
|
@ -85,4 +85,28 @@ export default { // 所有接口
|
|||
|
||||
setSaveActivity: (param) => ajax.post('zksr.zksrservice.autonomous/autonomous-plan-activity/saveActivity?application=true', param), // 保存问卷
|
||||
uploadImg: () => ajax.getUrl('qiniu/uploadImg'), //上传图片
|
||||
|
||||
// 积分签到
|
||||
getIntegralSetting: (param) => ajax.get(`integral/integralSetting/getIntegralSetting`, param), // 获取用户积分设置
|
||||
getUserIntegral: (param) => ajax.get(`integral/userIntegral/getUserIntegral`, param), // 获取用户积分
|
||||
getUserIntegralFlow: (param) => ajax.get(`integral/userIntegralFlow/getUserIntegralFlow`, param), // 获取用户积分流水
|
||||
getUserSignFlow: (param) => ajax.get(`integral/userSignFlow/getUserSignFlow`, param), // 获取用户签到记录
|
||||
userSign: (param) => ajax.get(`integral/userSignFlow/userSign`, param), // 签到
|
||||
// 积分商城
|
||||
|
||||
getCommoditys: (param) => ajax.get(`commodity/commodity/getCommoditysByVo`, param), // 条件获取商品信息
|
||||
getCommodityBrands: (param) => ajax.get(`commodity/commodityBrand/getCommodityBrands`, param), // 获取商品品牌
|
||||
getCommodityCategorys: (param) => ajax.get(`commodity/commodityCategory/getCommodityCategorys`, param), // 获取商品类别
|
||||
|
||||
// 积分订单
|
||||
|
||||
dindan: (param) => ajax.get('order/integralOrderMaster/lookLogistics', param),
|
||||
|
||||
createIntegralOrder: (param) => ajax.post('order/integralOrderMaster/createIntegralOrder?application=true',
|
||||
param), //订单生成
|
||||
getIntegralOrderDetail: (param) => ajax.get(`order/integralOrderMaster/getIntegralOrderMaster`, param), // 获取订单主表
|
||||
getIntegralOrderDetailFlow: (param) => ajax.get(`order/integralOrderDetail/getIntegralOrderDetailFlow`,
|
||||
param), // 获取商品兑换记录
|
||||
// getIntegralOrderDetailFlow: (param) => ajax.get(`order/integralOrderDetail/getIntegralOrderDetailFlow`, param), // 获取商品兑换记录
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
console.log('option',option);
|
||||
uni.setStorageSync('userId', option.query.userId)
|
||||
uni.setStorageSync('openId', option.query.openId)
|
||||
uni.setStorageSync('info', option.query)
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
|
|
|
|||
|
|
@ -73,6 +73,34 @@
|
|||
"navigationBarTitleText": "评估报告",
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/Integral/home/home",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分兑换",
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/Integral/exchangeRecords/exchangeRecords",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换记录",
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/Integral/home/details/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/Integral/home/Confirmed/Confirmed",
|
||||
"style": {
|
||||
"navigationBarTitleText": "确认兑换",
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
|
||||
|
||||
.pageBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.grey{
|
||||
color: #909292;
|
||||
}
|
||||
.topBg{
|
||||
width: 100vw;
|
||||
height: 314rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: $uni-color;
|
||||
}
|
||||
.contioner{
|
||||
padding: 16rpx 32rpx 88rpx;
|
||||
height: calc(314rpx - 104rpx);
|
||||
color: #fff;
|
||||
.caret-down-small.png{
|
||||
$wh:32rpx;
|
||||
width: $wh;
|
||||
height: $wh;
|
||||
}
|
||||
.posabition{
|
||||
position: absolute;
|
||||
bottom: -44rpx;
|
||||
z-index: 1;
|
||||
.tabber{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100vw - 160rpx);
|
||||
padding: 0 48rpx;
|
||||
height: 94rpx;
|
||||
background: #FFFFFF;
|
||||
color: #909292;
|
||||
font-weight: bold;
|
||||
box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(56,176,184,0.5);
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cardPadding{
|
||||
padding: 92rpx 32rpx;
|
||||
.cutt{
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #EEEEEE;
|
||||
margin: 34rpx 0 20rpx 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.swiper{
|
||||
flex: 1;
|
||||
height: 0;
|
||||
.scrol {
|
||||
height: 97%;
|
||||
background-color: #E6EFF1;
|
||||
padding: 20rpx;
|
||||
.box{
|
||||
margin-right: 35rpx;
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 40rpx;
|
||||
.box_txt{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
}
|
||||
.flex_box{
|
||||
// margin-top: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #C3C9D3;
|
||||
// border-radius: 10px;
|
||||
.flex_item{
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 120rpx;
|
||||
|
||||
.img_txt{
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #FE8025;
|
||||
}
|
||||
.top_txt{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.bot_txt{
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #8F98A6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<view class="pageBox">
|
||||
<view class="topBg"></view>
|
||||
<view class="contioner bg-video">
|
||||
<view class="flex flex-direction justify-between" style="height: 100%;">
|
||||
<view>
|
||||
<view class="text-xs">账户可用积分</view>
|
||||
<view class="text-bold" style="font-size: 80rpx;">{{currentIntegral}}</view>
|
||||
</view>
|
||||
<view class="flex-align text-sm text-bold">
|
||||
<view class="flex-contion" @click="showPop()">
|
||||
<image src="https://shayu5qny.yhy.ren/caret-down-small.png" class="caret-down-small.png">
|
||||
</image>
|
||||
<view>{{defaultData.month}}</view>
|
||||
</view>
|
||||
<view class="flex">
|
||||
<view style="margin-right: 52rpx;">收入<text class="margin-left-xs">{{currentIncome}}</text>
|
||||
</view>
|
||||
<view>支出<text class="margin-left-xs">{{currentDisbursement}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="posabition">
|
||||
<view class="tabber">
|
||||
<view :class="taberIndex==0?'themColor':''" @click="changeSelect(0)">全部</view>
|
||||
<view :class="taberIndex==1?'themColor':''" @click="changeSelect(1)">收入</view>
|
||||
<view :class="taberIndex==2?'themColor':''" @click="changeSelect(2)">支出</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="isShow">
|
||||
<view class="flex-sub" style="height: 0;" v-if="List.length!=0">
|
||||
<scroll-view style="height: 100%;" scroll-y @scrolltolower="scrollBottom">
|
||||
<view class="cardPadding text-sm">
|
||||
<block v-for="(item,index) in List" :key="index">
|
||||
<view class="flex-align">
|
||||
<view>
|
||||
<view class="text-bold">{{item.dictionaries}}</view>
|
||||
<view class="text-four marginTop-sm grey">
|
||||
{{item.integralChange=='0'?'收入':'支出'}}<text
|
||||
class="margin-left-xs">{{item.createTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="item.integralChange=='0'?'themColor':'grey'">
|
||||
{{item.integralChange=='0'?'+':'-'}}{{item.integralFlow}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cutt" v-if="List.length-1!=index"></view>
|
||||
</block>
|
||||
</view>
|
||||
<uni-load-more iconType="auto" status="loading" v-if="isMore"></uni-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<nothing :marginTop="250" v-else></nothing>
|
||||
</block>
|
||||
<!-- 时间弹框 -->
|
||||
<lingfeng-timepicker ref="timePop" type="year-month" :defaultData="defaultData" @change="timeChange">
|
||||
</lingfeng-timepicker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'userInfo'
|
||||
])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false, //数据是否渲染完成
|
||||
taberIndex: 0, //索引
|
||||
defaultData: {
|
||||
month: new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
|
||||
},
|
||||
currentIntegral: 0, //账户积分余额
|
||||
currentIncome: 0, //当月收入
|
||||
currentDisbursement: 0, //当月支出
|
||||
List: [], //列表数据
|
||||
pageNum: 1, //当前页码
|
||||
pageSize: 20, //每页数据量
|
||||
total: 0, //总条数
|
||||
isMore: false, //上滑加载状态
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
showPop() {
|
||||
this.$refs.timePop.show();
|
||||
},
|
||||
timeChange(val) {
|
||||
this.isShow = false
|
||||
this.List = []
|
||||
this.pageNum = 1
|
||||
this.defaultData.month = val
|
||||
this.getList()
|
||||
},
|
||||
// 跳转到详细的订单页面
|
||||
goList(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Integral/home/orderDetails/orderDetails?id=${id}`
|
||||
})
|
||||
},
|
||||
async getList(val) {
|
||||
if (val == undefined) {
|
||||
let ret = await this.$API.getUserIntegralFlowVo({
|
||||
data: {
|
||||
flowDate: this.defaultData.month,
|
||||
userId: this.userInfo.userId
|
||||
}
|
||||
})
|
||||
if (ret.data != null) {
|
||||
console.log(ret.data,'ret.data')
|
||||
this.currentIntegral = ret.data.currentIntegral
|
||||
this.currentIncome = ret.data.currentIncome
|
||||
this.currentDisbursement = ret.data.currentDisbursement
|
||||
}
|
||||
}
|
||||
let index = 2 //收入/支出(0 收入 1 支出)
|
||||
if (this.taberIndex == 1) {
|
||||
index = 0
|
||||
} else if (this.taberIndex == 2) {
|
||||
index = 1
|
||||
} else {
|
||||
index = 2
|
||||
}
|
||||
let reg = await this.$API.getUserIntegralFlow({
|
||||
data: {
|
||||
flowDate: this.defaultData.month,
|
||||
integralChange: index,
|
||||
pageNum: this.pageNum, //当前页码
|
||||
pageSize: this.pageSize, //每页数据量
|
||||
}
|
||||
})
|
||||
let list = []
|
||||
list = reg.rows
|
||||
this.List = this.List.concat(list)
|
||||
this.total = reg.total
|
||||
this.isMore = false
|
||||
this.isShow = true
|
||||
},
|
||||
// tab切换
|
||||
changeSelect(index) {
|
||||
this.isShow = false
|
||||
this.List = []
|
||||
this.pageNum = 1
|
||||
this.taberIndex = index
|
||||
this.getList('重新加载')
|
||||
},
|
||||
//触底后触发
|
||||
scrollBottom() {
|
||||
if (this.List.length == this.total) return //如果数组长度等于总条数 显示“我是有底线的”
|
||||
this.isMore = true
|
||||
this.pageNum++
|
||||
this.getList('重新加载')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './recordsList.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<view class="pageBox">
|
||||
<block v-for="(item,index) in List" :key="index">
|
||||
<view class="card">
|
||||
<view class="flex-align text-sm">
|
||||
<view class="grey">订单编号：{{item.orderNo}}</view>
|
||||
<view class="themColor" style="width: 100rpx;">
|
||||
{{item.orderState=='0'?'待发货':item.orderState=='1'?'待收货':item.orderState=='2'?'已完成':'已撤销'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="flex">
|
||||
<image :src="item.commodityImg" class="commodityImg"></image>
|
||||
<view class="flex flex-direction justify-between marginLeft-sm">
|
||||
<view class="text-bold">{{item.commodityName}}</view>
|
||||
<view>
|
||||
<view class="redColor text-sm"><text class="text">{{item.singleIntegral}}</text>积分
|
||||
</view>
|
||||
<view class="text-four grey margin-top-xs" style="text-decoration: line-through;">
|
||||
￥{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grey text-bold text-sm flex align-end">x{{item.orderDetailTotal}}</view>
|
||||
</view>
|
||||
<view class="text-sm flex-contion justify-end marginTop-sm">
|
||||
实付款:<text class="text redColor">{{item.singleIntegral}}</text>
|
||||
<text class="redColor">积分</text>
|
||||
</view>
|
||||
<!-- 分割线 -->
|
||||
<view class="cutt"></view>
|
||||
<view class="flex justify-end">
|
||||
<view class="btnTag" @click="redeemAgain">再次兑换</view>
|
||||
<view class="btnTag marginLeft-sm" @click="goLoglitics(item)" v-if="item.orderState=='1'||item.orderState=='2'">查看物流</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
List: [],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getInfo()
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getInfo() {
|
||||
let ret = await this.$API.getIntegralOrderDetailFlow()
|
||||
this.List = ret.rows
|
||||
},
|
||||
// 再次兑换跳转
|
||||
redeemAgain() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
// 查看物流
|
||||
goLoglitics(item) {
|
||||
let obj = {
|
||||
id: item.orderNo,
|
||||
img: item.commodityImg
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/Integral/home/Logistics/Logistics?obj=' + encodeURIComponent(JSON.stringify(obj))
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background: #E8EFF1;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.grey {
|
||||
color: #909292;
|
||||
}
|
||||
|
||||
.redColor {
|
||||
color: #FF4545;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 22rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
margin: 0 32rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.center {
|
||||
padding-top: 38rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.commodityImg {
|
||||
width: 204rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.cutt {
|
||||
width: calc(100% + 64rpx);
|
||||
height: 2rpx;
|
||||
background: #EEEEEE;
|
||||
margin: 32rpx 0 18rpx 0;
|
||||
margin-left: -32rpx;
|
||||
}
|
||||
|
||||
.btnTag {
|
||||
width: 168rpx;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #CCCCCC;
|
||||
color: #909292;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
.pageBox{
|
||||
background-color: #E6EFF1;
|
||||
// padding-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
.top{
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
// margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
.one{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #323232;
|
||||
.one_img{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.two{
|
||||
|
||||
.two_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px solid #C3C9D3;
|
||||
.two_flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;width: 80%;
|
||||
.two_img{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.two_bot{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.center{
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
width: 700rpx;
|
||||
margin: 30rpx auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.center_left{
|
||||
.center_img{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.center_right{
|
||||
margin-left: 25rpx;
|
||||
.center_top{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.center_bot{
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
img{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
.bot_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px solid #C3C9D3;
|
||||
}
|
||||
.bot_bot{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
.btn_left{
|
||||
|
||||
}
|
||||
.btn_right{
|
||||
width: 400rpx;
|
||||
height: 80rpx;
|
||||
background: #3AAFB8;
|
||||
text-align: center;
|
||||
border-radius: 21px;
|
||||
line-height: 80rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<view class="pageBox" >
|
||||
<view class="" style="flex: 1;">
|
||||
<view class="" style="height: 20rpx;">
|
||||
|
||||
</view>
|
||||
<!-- 地址 -->
|
||||
<!-- <view class="top">
|
||||
<view class="one" v-if="flg" @click="chooseAddress()">
|
||||
<text>请填写收货地址</text>
|
||||
<img src="../../static/images/3.png" alt="" class='one_img'>
|
||||
</view>
|
||||
<view class="two" v-else @click="chooseAddress()">
|
||||
<view class="two_top">
|
||||
<view class="" style="width: 150rpx;color: #7C8A9F;">
|
||||
收货人
|
||||
</view>
|
||||
<view class="two_flex" style="">
|
||||
<view class="" style="">
|
||||
<text>{{form.orderUser}} </text>
|
||||
<text style="margin-left: 20rpx;"> {{form.phonenumber}}</text>
|
||||
</view>
|
||||
<img src="../../static/images/3.png" alt="" class='two_img'>
|
||||
</view>
|
||||
</view>
|
||||
<view class="two_bot">
|
||||
<view class="" style="width: 150rpx;color: #7C8A9F;">
|
||||
收货地址
|
||||
</view>
|
||||
<view class="" style="width: 80%;">
|
||||
{{form.orderAddress}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 商品数量 -->
|
||||
<view class="center">
|
||||
<view class="center_left">
|
||||
<img :src="list.commodityImg" alt="" class='center_img'>
|
||||
</view>
|
||||
<view class="center_right">
|
||||
<view class="center_top">
|
||||
{{list.commodityName}}
|
||||
</view>
|
||||
<view class="center_bot">
|
||||
<img src="../../static/images/6.png" alt="" @click='del()'>
|
||||
<text style="margin-left: 20rpx;">{{num}}</text>
|
||||
<img src="../../static/images/7.png" alt="" @click='add()'>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格 -->
|
||||
<view class="bottom">
|
||||
<view class="bot_top">
|
||||
<view class="" style="width: 320rpx;color: #7C8A9F;">
|
||||
订单总价(含运费)
|
||||
</view>
|
||||
<view class="" style="font-size: 32rpx;color: #112950;">
|
||||
<text>￥ </text><text> 0</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bot_bot">
|
||||
<view class="" style="width: 150rpx;color: #7C8A9F;">
|
||||
积分
|
||||
</view>
|
||||
<view class="" style="color: #112950;">
|
||||
<text style="font-size: 40rpx;">{{list.commodityIntegral}}</text
|
||||
style="font-size: 28rpx;"><text>积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部提交 -->
|
||||
<view class="btn">
|
||||
<view class="btn_left">
|
||||
<text style="color: #8E9AAB;">合计： </text>
|
||||
<text style="font-size: 40rpx;color: #FE8025;">{{list.commodityIntegral*num}}</text>
|
||||
<text style="font-size: 28rpx;color: #FE8025;"> 积分</text>
|
||||
</view>
|
||||
<view class="btn_right" @click="goOrder" v-if="jf">
|
||||
提 交
|
||||
</view>
|
||||
<view class="btn_right" v-else style="background-color: #fff;color: #8E9AAB;">
|
||||
积分不足
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'userInfo'
|
||||
])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flg: true,
|
||||
num: 1,
|
||||
dz: false,
|
||||
jf: false,
|
||||
list: {
|
||||
commodityName:'',
|
||||
commodityIntegral:0
|
||||
},
|
||||
form: {
|
||||
// 订单地址
|
||||
orderAddress: "string",
|
||||
// 订单详情
|
||||
orderDetail: [{
|
||||
// 商品id
|
||||
commodityCode: "string",
|
||||
|
||||
// 数量
|
||||
orderDetailTotal: 0,
|
||||
|
||||
// 积分
|
||||
singleIntegral: 0,
|
||||
// 总积分
|
||||
totalDetailIntegral: 0,
|
||||
|
||||
}],
|
||||
|
||||
// 收件人
|
||||
orderUser: "string",
|
||||
// 手机号
|
||||
phonenumber: 0,
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// this.chooseAddress()
|
||||
},
|
||||
onLoad(option) {
|
||||
this.list = JSON.parse(decodeURIComponent(option.obj))
|
||||
this.Pd()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// 判断是否显示立即兑换
|
||||
Pd() {
|
||||
if (this.list.jf < (this.list.commodityIntegral * this.num)) {
|
||||
this.jf = false
|
||||
} else {
|
||||
this.jf = true
|
||||
}
|
||||
},
|
||||
// 数量增加
|
||||
add() {
|
||||
this.num++
|
||||
this.Pd()
|
||||
},
|
||||
// 数量减少
|
||||
del() {
|
||||
if (this.num > 1) {
|
||||
this.num--
|
||||
}
|
||||
this.Pd()
|
||||
},
|
||||
goOrder() {
|
||||
if (this.dz) {
|
||||
let obj = {
|
||||
// 订单地址
|
||||
orderAddress: this.form.orderAddress,
|
||||
// 订单详情
|
||||
orderDetail: [{
|
||||
// 商品id
|
||||
commodityCode: this.list.id,
|
||||
// 数量
|
||||
orderDetailTotal: this.num,
|
||||
// 积分
|
||||
singleIntegral: this.list.commodityIntegral,
|
||||
// 总积分
|
||||
totalDetailIntegral: this.list.commodityIntegral * this.num,
|
||||
}],
|
||||
// 收件人
|
||||
orderUser: this.form.orderUser,
|
||||
// 手机号
|
||||
phonenumber: this.form.phonenumber,
|
||||
|
||||
userCode: this.userInfo.userId
|
||||
}
|
||||
|
||||
this.$API.createIntegralOrder({
|
||||
data: obj
|
||||
}).then(res => {
|
||||
console.log(res, '积分')
|
||||
if (res.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Integral/home/orderDetails/orderDetails?id=${res.data}`
|
||||
})
|
||||
}else{
|
||||
wx.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
console.log(obj, '请求数据')
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '请填写收货地址！',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
// 获取地址
|
||||
chooseAddress() {
|
||||
let _this = this
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
console.log("vres.authSetting['scope.address']：", res.authSetting['scope.address'])
|
||||
if (res.authSetting['scope.address']) {
|
||||
uni.chooseAddress({
|
||||
success(res) {
|
||||
console.log(res, '收货地址')
|
||||
_this.form.orderUser = res.userName
|
||||
_this.form.phonenumber = res.telNumber
|
||||
_this.form.orderAddress =
|
||||
`${res.provinceName}${res.cityName}${res.countyName}${res.detailInfo}`
|
||||
_this.flg = false
|
||||
_this.dz = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (res.authSetting['scope.address'] == false) {
|
||||
uni.openSetting({
|
||||
success(res) {
|
||||
console.log(res.authSetting)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.chooseAddress({
|
||||
success(res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './Confirmed.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
.pageBox{
|
||||
padding-top: 20rpx;
|
||||
background-color: #E6EFF1;
|
||||
.top{
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
.top_img{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
vertical-align: middle;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.txt{
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #7C8A9F;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.txt1{
|
||||
|
||||
}
|
||||
}
|
||||
.center{
|
||||
display: flex;
|
||||
width: 700rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
margin: 20rpx auto;
|
||||
.center_left{
|
||||
margin-right: 30rpx;
|
||||
.center_img{
|
||||
height: 120rpx;
|
||||
width: 120rpx;
|
||||
}
|
||||
}
|
||||
.center_right{
|
||||
width: 100%;
|
||||
.center_flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.center_flex_left{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
}
|
||||
.center_flex_right{
|
||||
margin-right: 30rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #3AAFB8;
|
||||
}
|
||||
}
|
||||
.center_txt{
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #7C8A9F;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.bottom{
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.title{
|
||||
padding-left: 20rpx;
|
||||
border-left: 3px solid #3AAFB8;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
}
|
||||
.body{
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
.body_left{
|
||||
width: 30rpx;
|
||||
padding-top: 10rpx;
|
||||
.box{
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.body_right{
|
||||
width: 100%;
|
||||
.body_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.body_bot{
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #112950;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<view class="pageBox">
|
||||
<view class="contioner">
|
||||
<!-- 物流状态 -->
|
||||
<view class="logisticsStatus">
|
||||
<view class="flex">
|
||||
<!-- <image :src="goodsCoverImg" class="img"></image> -->
|
||||
<img :src="goodsCoverImg" alt="" class="img">
|
||||
<view class="flex-sub" style="line-height: 48rpx;">
|
||||
<view class="text-df bottomColor">承运来源：{{formState.ShipperName}}</view>
|
||||
<view class="text-df bottomColor">快递编码：{{formState.ShipperCode}}</view>
|
||||
<view class="text-df bottomColor">运单编号：{{formState.LogisticCode}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 物流跟踪 -->
|
||||
<view class="logisticsTracking marginTop-sm" v-if="formState.Traces.length>0">
|
||||
<view class="flex-contion">
|
||||
<view class="widthLeft"></view>
|
||||
<view class="rightColor text-lg text-bold">物流跟踪</view>
|
||||
</view>
|
||||
<!-- 分割线 -->
|
||||
<view class="cutt"></view>
|
||||
<!-- 纵向排列 -->
|
||||
<uni-steps :options="formState.Traces" active-color="#3AAFB8" :active="active" direction="column" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
toast,
|
||||
showLoading,
|
||||
hideLoading
|
||||
} from "@/tool/index.js"
|
||||
import * as types from '@/store/types.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'openId'
|
||||
])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formState: {
|
||||
ShipperName:'',
|
||||
ShipperCode:'',
|
||||
LogisticCode:''
|
||||
},
|
||||
goodsCoverImg: '', //商品封面图
|
||||
active: 0,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
let obj = JSON.parse(decodeURIComponent(option.obj))
|
||||
this.orderId = obj.id
|
||||
this.goodsCoverImg = obj.img
|
||||
this.getInfo()
|
||||
},
|
||||
methods: {
|
||||
async getInfo() {
|
||||
this.$API.dindan({
|
||||
data: {
|
||||
orderNo: this.orderId
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res,'数据')
|
||||
var d = []
|
||||
for (var i = res.data.Traces.length - 1; i >= 0; i--) {
|
||||
d.push(res.data.Traces[i])
|
||||
}
|
||||
this.formState = res.data
|
||||
this.formState.Traces = d
|
||||
this.formState.Traces = this.formState.Traces.map((item) => {
|
||||
return {
|
||||
title: item.AcceptStation,
|
||||
desc: item.AcceptTime
|
||||
}
|
||||
});
|
||||
console.log(this.formState.Traces);
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pageBox {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: #E6EFF1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.contioner {
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
.user {
|
||||
padding: 38rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 28rpx;
|
||||
}
|
||||
|
||||
.leftColor {
|
||||
color: #7C8A9F;
|
||||
}
|
||||
|
||||
.rightColor {
|
||||
color: $uni-color;
|
||||
}
|
||||
}
|
||||
|
||||
.logisticsStatus {
|
||||
padding: 26rpx 38rpx 26rpx 26rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.topColor {
|
||||
color: #112950;
|
||||
}
|
||||
|
||||
.bottomColor {
|
||||
color: #7C8A9F;
|
||||
}
|
||||
|
||||
.rightColor {
|
||||
color: $uni-color;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 32rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.logisticsTracking {
|
||||
padding: 26rpx 32rpx 64rpx 34rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.widthLeft {
|
||||
width: 8rpx;
|
||||
height: 24rpx;
|
||||
background: $uni-color;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.rightColor {
|
||||
color: #112950;
|
||||
}
|
||||
|
||||
.cutt {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #C3C9D3;
|
||||
margin: 26rpx 0 36rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
.pageBox{
|
||||
background-color: #E6EFF1;
|
||||
// padding-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
|
||||
.top{
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.bot_box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10px;
|
||||
.center_top{
|
||||
// margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #C3C9D3;
|
||||
.center_txt{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
padding-left: 10rpx;
|
||||
border-left: 3px solid #3AAFB8;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.center_bot{
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10px;
|
||||
// margin-bottom: 50rpx;
|
||||
.bottom_top{
|
||||
// margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #C3C9D3;
|
||||
.bottom_txt{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
padding-left: 10rpx;
|
||||
border-left: 3px solid #3AAFB8;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.bottom_bot{
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
// padding: 0 25rpx;
|
||||
left: 0;
|
||||
.btn{
|
||||
width: 700rpx;
|
||||
border-radius: 21px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background-color: #3AAFB8;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
margin: 10rpx 25rpx;
|
||||
}
|
||||
}
|
||||
.box{
|
||||
height: 140rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<view class="pageBox" >
|
||||
<view class="" style="flex: 1;">
|
||||
<view class="" style="height:20rpx">
|
||||
|
||||
</view>
|
||||
<view class="top">
|
||||
<img :src="list.commodityImg" alt="" class='img'>
|
||||
<view class="" style="padding: 20rpx;">
|
||||
<view class="">
|
||||
{{list.commodityName}}
|
||||
</view>
|
||||
<view class="bot_box" style="">
|
||||
<view class="" style="font-size: 24rpx;font-weight: 400;color: #8F98A6;">
|
||||
品牌:{{list.brandName}}
|
||||
</view>
|
||||
<view class="" style="color: #FE8025;">
|
||||
<text style="font-size: 40rpx;">{{list.commodityIntegral}}</text>
|
||||
<text style="font-size: 24rpx;">积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="center_top">
|
||||
<text class="center_txt">关于退换货</text>
|
||||
</view>
|
||||
<view class="center_bot">
|
||||
不支持退货
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="bottom_top">
|
||||
<text class="bottom_txt">商品详情</text>
|
||||
</view>
|
||||
<view class="bottom_bot">
|
||||
<rich-text :nodes="list.commodityTxt"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnbox" style="">
|
||||
<view class="btn" @click="goConfirmed" v-if="list.commodityStock>0" >
|
||||
立即兑换
|
||||
</view>
|
||||
<view class="btn" v-else>
|
||||
暂无库存
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
// scrollH: function() {
|
||||
// let sys = uni.getSystemInfoSync();
|
||||
// let winWidth = sys.windowWidth;
|
||||
// let winrate = 750 / winWidth;
|
||||
// let winHeight = parseInt(sys.windowHeight * winrate)
|
||||
// return winHeight
|
||||
// console.log(sys)
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: {
|
||||
commodityName:'',
|
||||
brandName:'',
|
||||
commodityIntegral:'',
|
||||
commodityTxt:'',
|
||||
|
||||
},
|
||||
// 积分数量
|
||||
num: undefined,
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.list = JSON.parse(decodeURIComponent(option.obj))
|
||||
console.log(this.list,'数据')
|
||||
this.$set(this.list,'commodityTxt',this.list.commodityTxt.replace(/\<p/gi, '<p style="word-break: break-all;overflowWrap:break-word"'))
|
||||
this.$set(this.list,'commodityTxt',this.list.commodityTxt.replace(/\<img/gi, '<img style="max-width:100%"'))
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
goConfirmed() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Integral/home/Confirmed/Confirmed?obj=${encodeURIComponent(JSON.stringify(this.list))}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './details.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
.pageBox{
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
background: #E6EFF1;
|
||||
.top{
|
||||
background-color: #fff;
|
||||
}
|
||||
.center{
|
||||
.flexbox{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
.box{
|
||||
width: 250rpx;
|
||||
height: 90rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
padding: 30rpx 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.lefttext{
|
||||
.p{
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
font-size: 28rpx;
|
||||
|
||||
}
|
||||
.txt{
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
width:170rpx;
|
||||
color: #8E9AAB;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
margin-top:10rpx;
|
||||
}
|
||||
}
|
||||
.rightimg{
|
||||
.img{
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
vertical-align:middle;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
.tabs{
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
// width: 100%;
|
||||
.tabs_top{
|
||||
padding-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #8E9AAB;
|
||||
}
|
||||
.active{
|
||||
border-bottom: 3px solid #3AAFB8;
|
||||
font-weight: 500;
|
||||
color: #112950;
|
||||
}
|
||||
}
|
||||
.drawerContent {
|
||||
padding:50rpx 30rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
.row {
|
||||
margin-bottom: 50rpx;
|
||||
.btn_box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20rpx;
|
||||
// box-sizing: border-box;
|
||||
.noselde,.selde {
|
||||
padding: 10rpx 10rpx;
|
||||
margin: 14rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.noselde {
|
||||
background-color: #E6EFF1;
|
||||
border: 1px solid #E6EFF1;
|
||||
}
|
||||
.selde {
|
||||
border: 1px solid #FE8025;
|
||||
color: #FE8025;
|
||||
background-color: #fdf2df;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bom_btn {
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
right: 0;
|
||||
width: 280px;
|
||||
height: 80rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 28rpx;
|
||||
view {
|
||||
width:100rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
|
||||
}
|
||||
.left {
|
||||
color: #333;
|
||||
border: 1px solid #8E9AAB;
|
||||
}
|
||||
.right {
|
||||
color: #fff;
|
||||
background-color: #FE8025;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.tabs_center{
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
.ComBox {
|
||||
width: 700rpx; //根据微信定义设置 如非必要不建议改为100%；
|
||||
// padding: 10rpx 30rpx;
|
||||
// background-color: #f7f7f7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.ComList {
|
||||
//未设置高度
|
||||
width: 270rpx;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 30rpx;
|
||||
.ImgBOX {
|
||||
width: 270rpx;
|
||||
height: 270rpx;
|
||||
border-radius: 12rpx;
|
||||
.Img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.Title {
|
||||
width: 270rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
height: 88rpx;
|
||||
padding-top: 15rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.Price {
|
||||
width: 100%;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
padding-top: 15rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #3AAFB8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,488 @@
|
|||
<template>
|
||||
<view class="pageBox" :style="{minHeight:scrollH+'rpx'}">
|
||||
<view class="top">
|
||||
<uni-search-bar placeholder="搜索商品名称" bgColor="#EEEEEE" @confirm="search" @input="input" />
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="flexbox">
|
||||
<view class="box" @click="goList">
|
||||
<view class="lefttext">
|
||||
<view calss='p'>兑换记录</view>
|
||||
</view>
|
||||
<view class="rightimg">
|
||||
<image src="../static/images/10.png" mode="" class="img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box" @click="goComponent">
|
||||
|
||||
<view class="lefttext">
|
||||
<view calss='p'>我可兑换</view>
|
||||
<view class="txt">可用积分{{currentIntegral}}分</view>
|
||||
</view>
|
||||
|
||||
<view class="rightimg">
|
||||
<image src="../static/images/11.png" mode="" class="img"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="tabs">
|
||||
<view class="tabs_top" v-for="(item,index) in arr" :key="index" :class="[num==index?'active':'']"
|
||||
@click="all(index)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="tabs_top" @click="showDrawer">
|
||||
筛选
|
||||
</view>
|
||||
</view>
|
||||
<!-- 抽屉 -->
|
||||
<uni-drawer ref="showRight" mode="right" :mask-click="true" width="280">
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<view class="drawerContent">
|
||||
<view class="row" v-for="(item,index) in btnList" :key="index">
|
||||
<view class="title">{{item.label}}</view>
|
||||
<view class="btn_box">
|
||||
<view v-for="(v,i) in item.children" :key="i" :data-vaule="v.data"
|
||||
@click="choice(item.type,i,$event)" :class="[v.selected?'selde':'noselde']"
|
||||
style="width: 40%;box-sizing: border-box;">
|
||||
{{v.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="height: 80rpx;">
|
||||
|
||||
</view>
|
||||
<view class="bom_btn">
|
||||
<view class="left" @click="reset">重置</view>
|
||||
<view class="right" @click="confirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-drawer>
|
||||
|
||||
<view class="tabs_center">
|
||||
|
||||
<view class="ComBox" v-if="ComListSon">
|
||||
<view class="ComList" v-for="(item,index) in ComListSon" :key="item.id" @click="ToDel(item)">
|
||||
<view class="ImgBOX">
|
||||
<img :src="item.commodityImg" class="Img" alt="">
|
||||
</view>
|
||||
<view class="Title">
|
||||
{{item.commodityName}}
|
||||
</view>
|
||||
<view class="Price">
|
||||
{{item.commodityIntegral}}<text style="color: #8E9AAB;">积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="height: 50rpx;">
|
||||
|
||||
</view>
|
||||
<view class="" v-if="ComListSon.length<1&&imgflg">
|
||||
<view class="" style="width: 100%;display: flex;justify-content: center;" >
|
||||
<img src="../static/images/nth2.png" alt="" style='height: 320rpx;width:320rpx'>
|
||||
</view>
|
||||
<view class="" style="text-align: center;width: 100%;font-size: 30rpx; color: #ccc;">
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
scrollH: function() {
|
||||
let sys = uni.getSystemInfoSync();
|
||||
let winWidth = sys.windowWidth;
|
||||
let winrate = 750 / winWidth;
|
||||
let winHeight = parseInt(sys.windowHeight * winrate)
|
||||
return winHeight
|
||||
console.log(sys)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
imgflg:false,
|
||||
ComList: [], //被合并的列表
|
||||
ComListSon: [],
|
||||
|
||||
num: 0,
|
||||
arr: [{
|
||||
name: '全部'
|
||||
}, {
|
||||
name: '只看兑换过的'
|
||||
}],
|
||||
// 请求参数
|
||||
query: {
|
||||
|
||||
// 商品id
|
||||
commodityId: '',
|
||||
// 商品名称
|
||||
commodityName: '',
|
||||
// 类别id
|
||||
categoryCode: '',
|
||||
// 品牌id
|
||||
brandCode: '',
|
||||
// 兑换积分
|
||||
integralMin: '',
|
||||
// 最大兑换积分
|
||||
integralMax: '',
|
||||
// 兑换过的 0 已兑换过
|
||||
redeemed: '',
|
||||
deptId: uni.getStorageSync("info").deptId,
|
||||
agentMerId: uni.getStorageSync("info").agentMerId,
|
||||
agentMerCode: uni.getStorageSync("info").agentMerCode,
|
||||
customerCode: uni.getStorageSync("info").customerCode,
|
||||
customerId: uni.getStorageSync("info").customerId,
|
||||
customerLoginId: uni.getStorageSync("info").customerLoginId,
|
||||
// userId
|
||||
// userId: 111
|
||||
},
|
||||
// 防抖
|
||||
timeId: null,
|
||||
// 筛选数据
|
||||
btnList: [
|
||||
// {
|
||||
// label: "筛选",
|
||||
// type: 0,
|
||||
// children: [{
|
||||
// id: true, //1看过 2没看过
|
||||
// data: 'redeemed',
|
||||
// selected: false,
|
||||
// name: '只看兑换过的'
|
||||
// }]
|
||||
// },
|
||||
{
|
||||
label: "分类",
|
||||
type: 0,
|
||||
children: [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "品牌",
|
||||
type: 1,
|
||||
children: [
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "所需积分",
|
||||
type: 2,
|
||||
children: [{
|
||||
id: 1,
|
||||
data: 'isReviev',
|
||||
selected: false,
|
||||
name: '1-100'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
data: 'isReviev',
|
||||
selected: false,
|
||||
name: '101-1000'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
data: 'isReviev',
|
||||
selected: false,
|
||||
name: '1000-3000'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
data: 'isReviev',
|
||||
selected: false,
|
||||
name: '3000以上'
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// 用户积分
|
||||
currentIntegral: '',
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
this.getbrand()
|
||||
this.getList()
|
||||
},
|
||||
onShow(){
|
||||
this.getjifen()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
onReachBottom: function() {
|
||||
//下拉触发事件
|
||||
// this.page++;
|
||||
// this.getDefault(this.page);
|
||||
console.log('触发了下拉加载更多的事件')
|
||||
},
|
||||
methods: {
|
||||
async getjifen(){
|
||||
let reb = await this.$API.getUserIntegral({
|
||||
data: {
|
||||
userId: uni.getStorageSync("userId")
|
||||
}
|
||||
})
|
||||
console.log(reb, '用户积分')
|
||||
if (reb.code == 200) {
|
||||
this.currentIntegral = reb.data.currentIntegral
|
||||
// this.$emit('currentIntegral',this.currentIntegral)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
async getbrand() {
|
||||
|
||||
let res = await this.$API.getCommodityCategorys({
|
||||
data: {
|
||||
userId: uni.getStorageSync("userId")
|
||||
}
|
||||
})
|
||||
console.log(res, '商品分类', this.btnList[0].children)
|
||||
res.data.length && res.data.forEach(item => {
|
||||
this.btnList[0].children.push({
|
||||
id: item.id,
|
||||
data: 'categoryCode',
|
||||
selected: false,
|
||||
name: item.categoryName,
|
||||
})
|
||||
|
||||
})
|
||||
// this.arr[1] = this.btnList[0].children[0] || {name:''}
|
||||
// this.arr[2] = this.btnList[1].children[1] || {name:''}
|
||||
// this.arr[3] = this.btnList[1].children[2] || {name:''}
|
||||
|
||||
let ree = await this.$API.getCommodityBrands({
|
||||
data: {
|
||||
userId:uni.getStorageSync("userId")
|
||||
}
|
||||
}).then(ree => {
|
||||
console.log(ree, '商品品牌')
|
||||
ree.data.forEach(item => {
|
||||
this.btnList[1].children.push({
|
||||
id: item.id,
|
||||
data: 'brandCode',
|
||||
selected: false,
|
||||
name: item.brandName
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 获取商品列表
|
||||
async getList() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
duration: 2000
|
||||
});
|
||||
let rer = await this.$API.getCommoditys({
|
||||
data: this.query
|
||||
}).then(rer => {
|
||||
console.log(rer, '商品信息')
|
||||
if (rer.code == 200) {
|
||||
// if (rer.data.length < 1) {
|
||||
// uni.showToast({
|
||||
// title: '暂无数据！',
|
||||
// icon: 'none',
|
||||
// duration: 2000
|
||||
// });
|
||||
// }
|
||||
this.ComListSon = rer.data
|
||||
|
||||
this.imgflg=true
|
||||
}else{
|
||||
this.imgflg=true
|
||||
}
|
||||
uni.hideLoading()
|
||||
|
||||
})
|
||||
},
|
||||
// 点击我能兑换
|
||||
goComponent() {
|
||||
this.query.integralMin = 0
|
||||
this.query.integralMax = this.currentIntegral
|
||||
this.getList()
|
||||
},
|
||||
// 跳转兑换记录页面
|
||||
goList() {
|
||||
setTimeout(()=>{
|
||||
uni.navigateTo({
|
||||
url: `/pages/Integral/exchangeRecords/exchangeRecords`
|
||||
})
|
||||
},0)
|
||||
},
|
||||
// 跳转到详情
|
||||
ToDel(id) {
|
||||
|
||||
//参数在跳转页的onLoad(id){ console.log('id为' + id) } 中获取
|
||||
this.$set(id, 'jf', this.currentIntegral)
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/Integral/home/details/details?obj=${encodeURIComponent(JSON.stringify(id))}`
|
||||
})
|
||||
// wx.showToast({
|
||||
// title: '将要跳转的详情页id为' + id,
|
||||
// icon: 'none',
|
||||
// duration: 500
|
||||
// });
|
||||
},
|
||||
getComList(page) {
|
||||
//参数为页数
|
||||
// 将获取的第page页数据合并进原数组 举例
|
||||
// axios.post('/list',{page:page}).then(res=>{
|
||||
// if(res.code == 1){ //接口调用成功
|
||||
// this.ComListSon = res.data
|
||||
// }else{
|
||||
// wx.showToast(
|
||||
// { title: res.mes?res.msg:'信息获取错误',
|
||||
// icon: 'none', duration: 500 });
|
||||
// }
|
||||
// Array.prototype.push.apply(this.ComList, this.ComListSon);
|
||||
//合并加载更多的数据与源数据.
|
||||
// })
|
||||
//
|
||||
},
|
||||
// 重置筛选
|
||||
reset() {
|
||||
this.btnList.forEach(item => {
|
||||
item.children.forEach(v => {
|
||||
v.selected = false
|
||||
})
|
||||
})
|
||||
// this.query. = {
|
||||
// 商品id
|
||||
this.query.commodityId='',
|
||||
// 商品名称
|
||||
this.query.commodityName= this.query.commodityName,
|
||||
// 类别id
|
||||
this.query.categoryCode= '',
|
||||
// 品牌id
|
||||
this.query.brandCode= '',
|
||||
// 兑换积分
|
||||
this.query.integralMin= '',
|
||||
// 最大兑换积分
|
||||
this.query.integralMax= '',
|
||||
// 兑换过的 0 已兑换过
|
||||
this.query.redeemed= this.query.redeemed,
|
||||
// userId
|
||||
this.query.userId= uni.getStorageSync("userId")
|
||||
// }
|
||||
// this.$refs.showRight.close();
|
||||
this.getList()
|
||||
},
|
||||
// 确认按钮
|
||||
confirm() {
|
||||
// this.getPageData()
|
||||
this.getList()
|
||||
this.$refs.showRight.close();
|
||||
},
|
||||
//筛选-选择按钮
|
||||
choice(type, index, e) {
|
||||
// 第几行 第几个
|
||||
console.log(type, index, e.currentTarget.dataset.vaule, '点击的数据')
|
||||
const v = e.currentTarget.dataset.vaule
|
||||
this.btnList[type].children.forEach(item => {
|
||||
item.selected = false
|
||||
this.query[item.data] = undefined
|
||||
|
||||
})
|
||||
let item = this.btnList[type]
|
||||
item.children[index].selected = true
|
||||
this.$set(this.btnList, type, item)
|
||||
//
|
||||
this.query[v] = this.btnList[type].children[index].id
|
||||
// 处理数据按后台传参
|
||||
if (this.query.isReviev == 1) {
|
||||
this.query.integralMin = 1,
|
||||
this.query.integralMax = 100
|
||||
}
|
||||
if (this.query.isReviev == 2) {
|
||||
this.query.integralMin = 101,
|
||||
this.query.integralMax = 1000
|
||||
}
|
||||
if (this.query.isReviev == 3) {
|
||||
this.query.integralMin = 1000,
|
||||
this.query.integralMax = 3000
|
||||
}
|
||||
if (this.query.isReviev == 4) {
|
||||
this.query.integralMin = 3000,
|
||||
this.query.integralMax = 1000000
|
||||
}
|
||||
if (this.btnList[0].children[0].selected) {
|
||||
this.query.redeemed = 0
|
||||
} else {
|
||||
this.query.redeemed = ''
|
||||
}
|
||||
},
|
||||
// 控制抽屉打开
|
||||
showDrawer() {
|
||||
this.$refs.showRight.open();
|
||||
// this.num = 0
|
||||
},
|
||||
// 控制抽屉关闭
|
||||
closeDrawer() {
|
||||
this.$refs.showRight.close();
|
||||
this.reset()
|
||||
},
|
||||
// 筛选选择
|
||||
all(index) {
|
||||
console.log(index)
|
||||
this.num = index
|
||||
if (this.arr[index].name == '全部') {
|
||||
// this.reset()
|
||||
this.query.categoryCode = ''
|
||||
this.query.redeemed = ''
|
||||
this.getList()
|
||||
} else {
|
||||
this.query.redeemed = 0
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 搜索
|
||||
search(res) {
|
||||
// uni.showToast({
|
||||
// title: '搜索：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
},
|
||||
|
||||
input(res) {
|
||||
// 输入框使用防抖
|
||||
this.query.commodityName = res
|
||||
if (this.timeId) {
|
||||
// 有就清除定时器
|
||||
clearInterval(this.timeId)
|
||||
}
|
||||
// 为 this.timeId赋值,定时器表示1000毫秒内触发了input事件就不执行,只有超过了1000毫秒才执行
|
||||
this.timeId = setTimeout(() => {
|
||||
console.log(res)
|
||||
this.getList()
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home.scss';
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,128 @@
|
|||
.pageBox{
|
||||
background-color: #E6EFF1;
|
||||
// padding-top: 20rpx;
|
||||
.background{
|
||||
background-color: #3AAFB8;
|
||||
height: 250rpx;
|
||||
position: relative;
|
||||
margin-bottom: 150rpx;
|
||||
|
||||
.top{
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: -120rpx;
|
||||
left: 50%;
|
||||
margin-left: -350rpx;
|
||||
.two{
|
||||
.two_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px solid #C3C9D3;
|
||||
.two_flex{
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
}
|
||||
.two_bot{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.center{
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
width: 700rpx;
|
||||
margin: 30rpx auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.center_left{
|
||||
.center_img{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.center_right{
|
||||
margin-left: 25rpx;
|
||||
.center_top{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.center_bot{
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
img{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
.bot_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
border-bottom: 1px solid #C3C9D3;
|
||||
.bot_top_img{
|
||||
height: 24rpx;
|
||||
width: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.bot_bot{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 30rpx;
|
||||
.bot_top_img{
|
||||
height: 24rpx;
|
||||
width: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 700rpx;
|
||||
position: fixed;
|
||||
bottom: 20rpx;
|
||||
left: 50%;
|
||||
margin-left: -350rpx;
|
||||
border-radius: 21px;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background-color: #3AAFB8;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<view class="pageBox" :style="{height:scrollH+'rpx'}">
|
||||
<view class="background">
|
||||
<view class="" style="text-align: center;">
|
||||
<img src="/pages/Integral/static/images/8.png" alt="" style='height: 92rpx;width: 92rpx;vertical-align: middle;'>
|
||||
<text style="margin-left: 20rpx;color: #fff;" v-if="list.orderState==1">待收货</text>
|
||||
<text style="margin-left: 20rpx;color: #fff;" v-if="list.orderState==0">待发货</text>
|
||||
<text style="margin-left: 20rpx;color: #fff;" v-if="list.orderState==2">已完成</text>
|
||||
<text style="margin-left: 20rpx;color: #fff;" v-if="list.orderState==3">已撤销</text>
|
||||
</view>
|
||||
<!-- 地址 -->
|
||||
<view class="top">
|
||||
<view class="two" >
|
||||
<view class="two_top">
|
||||
<view class="" style="width: 150rpx;color: #7C8A9F;">
|
||||
收货人
|
||||
</view>
|
||||
<view class="two_flex" style="">
|
||||
<view class="" style="">
|
||||
<text>{{list.orderUser}} </text>
|
||||
<text style="margin-left: 20rpx;">{{list.phonenumber}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="two_bot">
|
||||
<view class="" style="width: 150rpx;color: #7C8A9F;">
|
||||
收货地址
|
||||
</view>
|
||||
<view class="" style="width: 80%;">
|
||||
{{list.orderAddress}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 商品数量 -->
|
||||
<view class="center">
|
||||
<view class="center_left">
|
||||
<img :src="list.detailList[0].commodityImg" alt="" class='center_img'>
|
||||
</view>
|
||||
<view class="center_right">
|
||||
<view class="center_top">
|
||||
{{list.detailList[0].commodityName}}
|
||||
</view>
|
||||
<view class="center_bot">
|
||||
<text style="">X{{list.detailList[0].orderDetailTotal}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格 -->
|
||||
<view class="bottom">
|
||||
<view class="bot_top">
|
||||
<view class="" style="width: 250rpx;color: #7C8A9F;font-size: 28rpx;">
|
||||
订单总价(含运费)
|
||||
</view>
|
||||
<view class="" style="font-size: 28rpx;color: #112950;">
|
||||
<text>￥ </text><text> 0</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bot_top">
|
||||
<view class="" style="width: 250rpx;color: #7C8A9F;font-size: 28rpx;">
|
||||
消耗积分
|
||||
</view>
|
||||
<view class="" style="font-size: 28rpx;color: #112950;">
|
||||
<text> {{list.totalIntegral}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bot_top">
|
||||
<view class="" style="width: 250rpx;color: #7C8A9F;font-size: 28rpx;">
|
||||
兑换时间
|
||||
</view>
|
||||
<view class="" style="font-size: 28rpx;color: #112950;">
|
||||
<text> {{list.detailList[0].createTime}} </text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bot_top">
|
||||
<view class="" style="width: 120rpx;color: #7C8A9F;font-size: 28rpx;">
|
||||
订单编号
|
||||
</view>
|
||||
<view class="" style="font-size: 28rpx;color: #112950;" @tap="copy(list.orderNo)">
|
||||
<text> {{list.orderNo}}</text><img src="/pages/Integral/static/images/9.png" alt="" class='bot_top_img'>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bot_bot">
|
||||
<view class="" style="width: 150rpx;color: #7C8A9F;font-size: 28rpx;">
|
||||
快递单号
|
||||
</view>
|
||||
<view class="" style="color: #112950;" @tap="copy(list.logisticsNo)">
|
||||
<text style="font-size: 28rpx;">{{list.logisticsNo==null?'':list.logisticsNo}}</text > <img v-if="list.logisticsNo!=null" src="/pages/Integral/static/images/9.png" alt="" class='bot_top_img'>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 查看物流 -->
|
||||
<view class="btn" @click="goLoglitics" v-if="list.orderState>0">
|
||||
<!-- <view class="btn" @click="goLoglitics" > -->
|
||||
查看物流
|
||||
</view>
|
||||
<view class="" style="height: 120rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
scrollH: function() {
|
||||
let sys = uni.getSystemInfoSync();
|
||||
let winWidth = sys.windowWidth;
|
||||
let winrate = 750 / winWidth;
|
||||
let winHeight = parseInt(sys.windowHeight * winrate)
|
||||
return winHeight
|
||||
console.log(sys)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flg: false,
|
||||
num: 1,
|
||||
list:undefined,
|
||||
id:''
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
,
|
||||
onLoad(option) {
|
||||
console.log(option.id,'订单号')
|
||||
if(option.id){
|
||||
this.getdata(option.id)
|
||||
this.id=option.id
|
||||
}else{
|
||||
wx.showToast({
|
||||
title: '没有获取到订单号！',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
copy(value) {
|
||||
console.log(value)
|
||||
uni.setClipboardData({
|
||||
data: value,
|
||||
success: function () {
|
||||
//调用方法成功
|
||||
console.log('success',value);
|
||||
}
|
||||
})
|
||||
},
|
||||
goLoglitics(){
|
||||
let obj = {
|
||||
id:this.id,
|
||||
img:this.list.detailList[0].commodityImg
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:'/pages/Integral/home/Logistics/Logistics?obj='+ encodeURIComponent(JSON.stringify(obj))
|
||||
})
|
||||
},
|
||||
async getdata(id){
|
||||
let res = await this.$API.getIntegralOrderDetail({data:{orderNo:id}}).then(res=>{
|
||||
console.log(res,'订单')
|
||||
if(res.code==200){
|
||||
this.list=res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './orderDetails.scss';
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 467 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 663 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 739 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
## 1.2.1（2021-11-22）
|
||||
- 修复 vue3中个别scss变量无法找到的问题
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
|
||||
## 1.1.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.1.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.7（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.6（2021-02-04）
|
||||
- 调整为uni_modules目录规范
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
|
||||
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
|
||||
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
|
||||
<slot />
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress @esc="close('mask')" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
/**
|
||||
* Drawer 抽屉
|
||||
* @description 抽屉侧滑菜单
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
|
||||
* @property {Boolean} mask = [true | false] 是否显示遮罩
|
||||
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
|
||||
* @property {Boolean} mode = [left | right] Drawer 滑出位置
|
||||
* @value left 从左侧滑出
|
||||
* @value right 从右侧侧滑出
|
||||
* @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
|
||||
* @event {Function} close 组件关闭时触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDrawer',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
emits:['change'],
|
||||
props: {
|
||||
/**
|
||||
* 显示模式（左、右），只在初始化生效
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 蒙层显示状态
|
||||
*/
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 遮罩是否可点击关闭
|
||||
*/
|
||||
maskClick:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 抽屉宽度
|
||||
*/
|
||||
width: {
|
||||
type: Number,
|
||||
default: 220
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleSync: false,
|
||||
showDrawer: false,
|
||||
rightMode: false,
|
||||
watchTimer: null,
|
||||
drawerWidth: 220
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifndef APP-NVUE
|
||||
this.drawerWidth = this.width
|
||||
// #endif
|
||||
this.rightMode = this.mode === 'right'
|
||||
},
|
||||
methods: {
|
||||
clear(){},
|
||||
close(type) {
|
||||
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
|
||||
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
|
||||
this._change('showDrawer', 'visibleSync', false)
|
||||
},
|
||||
open() {
|
||||
// fixed by mehaotian 处理重复点击打开的事件
|
||||
if(this.visibleSync) return
|
||||
this._change('visibleSync', 'showDrawer', true)
|
||||
},
|
||||
_change(param1, param2, status) {
|
||||
this[param1] = status
|
||||
if (this.watchTimer) {
|
||||
clearTimeout(this.watchTimer)
|
||||
}
|
||||
this.watchTimer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit('change',status)
|
||||
}, status ? 50 : 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
|
||||
// 抽屉宽度
|
||||
$drawer-width: 220px;
|
||||
|
||||
.uni-drawer {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.uni-drawer__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $drawer-width;
|
||||
bottom: 0;
|
||||
background-color: $uni-bg-color;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.uni-drawer--left {
|
||||
left: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: translateX(-$drawer-width);
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translateX(-100%);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-drawer--right {
|
||||
right: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: translateX($drawer-width);
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translateX(100%);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-drawer__content--visible {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
|
||||
.uni-drawer__mask {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: $uni-mask;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.uni-drawer__mask--visible {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
{
|
||||
"id": "uni-drawer",
|
||||
"displayName": "uni-drawer 抽屉",
|
||||
"version": "1.2.1",
|
||||
"description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"drawer",
|
||||
"抽屉",
|
||||
"侧滑导航"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
|
||||
## Drawer 抽屉
|
||||
> **组件名：uni-drawer**
|
||||
> 代码块： `uDrawer`
|
||||
|
||||
抽屉侧滑菜单。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
## 1.2.3（2022-05-24）
|
||||
- 新增 readonly 属性，组件只读
|
||||
## 1.2.2（2022-05-06）
|
||||
- 修复 vue3 input 事件不生效的bug
|
||||
## 1.2.1（2022-05-06）
|
||||
- 修复 多余代码导致的bug
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
|
||||
## 1.1.2（2021-08-30）
|
||||
- 修复 value 属性与 modelValue 属性不兼容的Bug
|
||||
## 1.1.1（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.1.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.9（2021-05-12）
|
||||
- 新增 项目示例地址
|
||||
## 1.0.8（2021-04-21）
|
||||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||
## 1.0.7（2021-04-15）
|
||||
- uni-ui 新增 uni-search-bar 的 focus 事件
|
||||
|
||||
## 1.0.6（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
|
||||
## 1.0.5（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持双向绑定
|
||||
- 更改 input 事件的返回值，e={value:Number} --> e=value
|
||||
- 新增 支持图标插槽
|
||||
- 新增 支持 clear、blur 事件
|
||||
- 新增 支持 focus 属性
|
||||
- 去掉组件背景色
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"uni-search-bar.cancel": "cancel",
|
||||
"uni-search-bar.placeholder": "Search enter content"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"uni-search-bar.cancel": "cancel",
|
||||
"uni-search-bar.placeholder": "请输入搜索内容"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"uni-search-bar.cancel": "cancel",
|
||||
"uni-search-bar.placeholder": "請輸入搜索內容"
|
||||
}
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
<template>
|
||||
<view class="uni-searchbar">
|
||||
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
|
||||
@click="searchClick">
|
||||
<view class="uni-searchbar__box-icon-search">
|
||||
<slot name="searchIcon">
|
||||
<uni-icons color="#c0c4cc" size="18" type="search" />
|
||||
</slot>
|
||||
</view>
|
||||
<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
|
||||
class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal"
|
||||
@confirm="confirm" @blur="blur" @focus="emitFocus" />
|
||||
<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
|
||||
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
|
||||
class="uni-searchbar__box-icon-clear" @click="clear">
|
||||
<slot name="clearIcon">
|
||||
<uni-icons color="#c0c4cc" size="20" type="clear" />
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<text @click="cancel" class="uni-searchbar__cancel"
|
||||
v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from './i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
|
||||
/**
|
||||
* SearchBar 搜索栏
|
||||
* @description 搜索栏组件，通常用于搜索商品、文章等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=866
|
||||
* @property {Number} radius 搜索栏圆角
|
||||
* @property {Number} maxlength 输入最大长度
|
||||
* @property {String} placeholder 搜索栏Placeholder
|
||||
* @property {String} clearButton = [always|auto|none] 是否显示清除按钮
|
||||
* @value always 一直显示
|
||||
* @value auto 输入框不为空时显示
|
||||
* @value none 一直不显示
|
||||
* @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
|
||||
* @value always 一直显示
|
||||
* @value auto 输入框不为空时显示
|
||||
* @value none 一直不显示
|
||||
* @property {String} cancelText 取消按钮的文字
|
||||
* @property {String} bgColor 输入框背景颜色
|
||||
* @property {Boolean} focus 是否自动聚焦
|
||||
* @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
|
||||
* @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
* @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
|
||||
* @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
* @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
* @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "UniSearchBar",
|
||||
emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
radius: {
|
||||
type: [Number, String],
|
||||
default: 5
|
||||
},
|
||||
clearButton: {
|
||||
type: String,
|
||||
default: "auto"
|
||||
},
|
||||
cancelButton: {
|
||||
type: String,
|
||||
default: "auto"
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#F8F8F8"
|
||||
},
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
},
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
showSync: false,
|
||||
searchVal: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cancelTextI18n() {
|
||||
return this.cancelText || t("uni-search-bar.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-search-bar.placeholder")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.searchVal = newVal
|
||||
if (newVal) {
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.searchVal = newVal
|
||||
if (newVal) {
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
focus: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
if(this.readonly) return
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.showSync = true
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
searchVal(newVal, oldVal) {
|
||||
this.$emit("input", newVal)
|
||||
// #ifdef VUE3
|
||||
this.$emit("update:modelValue", newVal)
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchClick() {
|
||||
if(this.readonly) return
|
||||
if (this.show) {
|
||||
return
|
||||
}
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.showSync = true
|
||||
})
|
||||
},
|
||||
clear() {
|
||||
this.$emit("clear", {
|
||||
value: this.searchVal
|
||||
})
|
||||
this.searchVal = ""
|
||||
},
|
||||
cancel() {
|
||||
if(this.readonly) return
|
||||
this.$emit("cancel", {
|
||||
value: this.searchVal
|
||||
});
|
||||
this.searchVal = ""
|
||||
this.show = false
|
||||
this.showSync = false
|
||||
// #ifndef APP-PLUS
|
||||
uni.hideKeyboard()
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord()
|
||||
// #endif
|
||||
},
|
||||
confirm() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.hideKeyboard();
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord()
|
||||
// #endif
|
||||
this.$emit("confirm", {
|
||||
value: this.searchVal
|
||||
})
|
||||
},
|
||||
blur() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.hideKeyboard();
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord()
|
||||
// #endif
|
||||
this.$emit("blur", {
|
||||
value: this.searchVal
|
||||
})
|
||||
},
|
||||
emitFocus(e) {
|
||||
this.$emit("focus", e.detail)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-searchbar-height: 36px;
|
||||
|
||||
.uni-searchbar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
// background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-searchbar__box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: $uni-searchbar-height;
|
||||
padding: 5px 8px 5px 0px;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-icon-search {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
// width: 32px;
|
||||
padding: 0 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-search-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-icon-clear {
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
padding-left: 8px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-searchbar__text-placeholder {
|
||||
font-size: 14px;
|
||||
color: #B3B3B3;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.uni-searchbar__cancel {
|
||||
padding-left: 10px;
|
||||
line-height: $uni-searchbar-height;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
{
|
||||
"id": "uni-search-bar",
|
||||
"displayName": "uni-search-bar 搜索栏",
|
||||
"version": "1.2.3",
|
||||
"description": "搜索栏组件，通常用于搜索商品、文章等",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"搜索框",
|
||||
"搜索栏"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
|
||||
## SearchBar 搜索栏
|
||||
|
||||
> **组件名：uni-search-bar**
|
||||
> 代码块： `uSearchBar`
|
||||
|
||||
|
||||
搜索栏组件
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
Loading…
Reference in New Issue