1.新版2.0开发

yj-dev
杨杰 2 years ago
parent ed89ec9e35
commit 181a315737
  1. 18
      pages.json
  2. 781
      pages/tabBar/home/home.vue
  3. 542
      pages/tabBar/user/user.vue
  4. 117
      pages/user/news/news.vue
  5. 280
      pages/user/order_list/order_list.vue
  6. BIN
      static/img/home/cusser.png
  7. BIN
      static/img/home/home3.png
  8. BIN
      static/img/home/home4.png
  9. BIN
      static/img/home/home5.png
  10. BIN
      static/img/home/home6.png
  11. BIN
      static/img/home/home7.png
  12. BIN
      static/img/user/user1.png
  13. BIN
      static/img/user/user10.png
  14. BIN
      static/img/user/user11.png
  15. BIN
      static/img/user/user12.png
  16. BIN
      static/img/user/user13.png
  17. BIN
      static/img/user/user14.png
  18. BIN
      static/img/user/user2.png
  19. BIN
      static/img/user/user3.png
  20. BIN
      static/img/user/user4.png
  21. BIN
      static/img/user/user5.png
  22. BIN
      static/img/user/user6.png
  23. BIN
      static/img/user/user7.png
  24. BIN
      static/img/user/user8.png
  25. BIN
      static/img/user/user9.png
  26. 36
      uni.scss

@ -1,6 +1,13 @@
{
"pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/user/news/news",
"style": {
"navigationBarTitleText": "消息",
"enablePullDownRefresh": false
}
}, {
"path": "pages/welcome/welcome",
"style": {
"navigationBarTitleText": "",
@ -12,8 +19,8 @@
"style": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5",
"navigationBarBackgroundColor": "#3da7e7",
"backgroundColorTop": "#3da7e7",
"onReachBottomDistance": 50,
"app-plus": {
"titleNView": false, //
@ -146,8 +153,8 @@
"enablePullDownRefresh": true,
"navigationBarTitleText": "我的",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5",
"navigationBarBackgroundColor": "#6fbdee",
"backgroundColorTop": "#6fbdee",
"navigationBarTextStyle": "white",
"app-plus": {
"titleNView": false, //
@ -298,7 +305,7 @@
"path": "pages/user/order_list/order_list",
"style": {
"navigationBarTitleText": "我的订单",
"navigationBarBackgroundColor": "#f8f8f8",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColorTop": "#f3f3f3",
"backgroundColorBottom": "#ffffff"
}
@ -497,6 +504,7 @@
}
],
"subpackages": [{
"root": "subPages",

@ -17,103 +17,146 @@
<input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
<view class="icon search"></view>
</view>
<!-- 右侧图标按钮 -->
<view class="icon-btn">
<!-- #ifdef MP-->
<button open-type="contact" style="background-color: transparent;padding: 0px;">
<image src="../../../static/img/home/cusser.png" mode="widthFix" class="icon30"></image>
</button>
<!-- #endif -->
<!-- #ifdef H5-->
<image :src="imagewxUrl+imgadres4" mode="widthFix" class="h5xfimg" @click="playPhone"></image>
<!-- #endif -->
</view>
</view>
<!-- 顶部菜单 -->
<view class="height80 backcorltop mart50">
<view class="category-list">
<view class="category" style="width: 25%;" v-for="(row, index) in categoryList" :key="index"
@tap="toCategory(row)">
<view class="img">
<image :src="imageUrl+row.imgData"></image>
</view>
<view class="text fcorfff">{{ row.title }}</view>
</view>
</view>
</view>
<!-- 顶部活动图片 -->
<image class="width100" mode="widthFix" :src="imagewxUrl+imgadres"></image>
<!-- 顶部菜单 -->
<view class="category-list backcorfff" style="margin-top: -5px;">
<view class="category" style="width: 20%;" v-for="(row, index) in categoryList" :key="index"
@tap="toCategory(row)">
<view class="img">
<image :src="imageUrl+row.imgData"></image>
</view>
<view class="text fcor333">{{ row.title }}</view>
</view>
</view>
<!-- 消息 -->
<view class="height120 backcorfff">
<view class="height20 width100"></view>
<view class="width92 message alijus">
<swiper circular="true" autoplay="true" display-multiple-items="2" :vertical="true">
<swiper-item class="alijus" v-for="(swiper,index) in swiperList" :key="swiper.id"
@click="test(index)">
<view class="width80p paddleft10 alijusstart">
<view class="stus"></view>
<view class="paddleft10 font14 fcor666 text1 width70">
放松放松方放松放松方放松放松方</view>
<view class="width25 font13 fcor999">40分钟前</view>
</view>
<view class="width20 alijus">
<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"></image>
</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- 占位 -->
<view v-if="showHeader" class="place"></view>
<!-- 轮播图 -->
<view class="height90 backcor008 viewbor"></view>
<view class="swiper">
<view class="swiper mart20">
<view class="swiper-box">
<swiper circular="true" autoplay="true" @change="swiperChange">
<swiper-item v-for="swiper in swiperList" :key="swiper.id">
<image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image>
</swiper-item>
</swiper>
<view class="indicator">
<view class="dots" v-for="(swiper, index) in swiperList"
:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
</view>
</view>
</view>
<!-- / -->
<view class="height60 backcorfff"></view>
<view class="category-list">
<view class="category" v-for="(row, index) in categoryList" :key="index" @tap="toCategory(row)">
<view class="img">
<image :src="imageUrl+row.imgData"></image>
</view>
<view class="text">{{ row.title }}</view>
<!-- 加油专区 -->
<view class="width90 mart20 alijusstart" @click="goGoodsList(2)">
<view class="width70 font18 fcor333">
加油专区
</view>
<view class="width30 font14 fotrt fcor666">更多</view>
</view>
<!-- 积分 -->
<view style="width: 90%;margin-left: 5%;" v-if='goldproductList.length != 0' @click="goGoodsList(2)">
<image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres1"></image>
<view class="width94 alijus mart20">
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
<view class="width96 fcor333 font15 fontwig6">ETC加油券</view>
<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
</view>
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
<view class="width96 fcor333 font15 fontwig6">ETC加油券</view>
<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
</view>
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
<view class="width96 fcor333 font15 fontwig6">ETC加油券</view>
<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
</view>
</view>
<swiper class="orange-content" :display-multiple-items="goldproductListleg" v-if='goldproductList.length != 0'
next-margin="50rpx">
<swiper-item class="swiper-hed" v-for="(item,index) in goldproductList" :key="index"
@click="toGoods(item.id)">
<view class="swiper-item" :data-id="item.id">
<image class="img" :src="imageUrl+item.couponImg" mode="aspectFit"></image>
<view class="fotlt fcor333 font14 text1 mart10">{{item.couponName}}</view>
<view class="subject fotct mart5">
<image style="width: 15px;height: 15px;vertical-align: sub;margin-right: 5px;"
src="../../../static/img/jfx.png">
</image>{{ item.discountPrice*100}}
</view>
</view>
</swiper-item>
</swiper>
<!-- 工会卡专区 -->
<view style="width: 90%;margin-left: 5%;" v-if='unioncardproductList.length != 0' @click="goGoodsList(5)">
<image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres5"></image>
<!-- 惠享生活 -->
<view class="width90 mart20 alijusstart">
<view class="width70 font18 fcor333">
惠享生活
</view>
</view>
<swiper class="orange-content" :display-multiple-items="unioncardproductListleg"
v-if='unioncardproductList.length != 0' next-margin="50rpx">
<swiper-item class="swiper-hed" v-for="(item,index) in unioncardproductList" :key="index"
@click="toGoods(item.id)">
<view class="swiper-item" :data-id="item.id">
<image class="img" :src="imageUrl+item.couponImg" mode="aspectFit"></image>
<view class="fotlt fcor333 font14 text1 mart10">{{item.couponName}}</view>
<view class="subject fotct mart5">
<view class="subject fotct mart5">{{item.discountPrice}}</view>
</view>
</view>
</swiper-item>
</swiper>
<image mode="widthFix" style="margin-top: 30px;width: 90%;margin-left: 5%;" v-for="(row, index) in homeCateList"
:key="index" @click="jumphuafei(row)" :src="imageUrl+row.imgData"></image>
<!-- 赠券 -->
<view style="width: 91%;margin-left: 5%;" v-if='productList.length != 0' @click="goGoodsList(1)">
<image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres"></image>
<image class="width90 mart10" mode="widthFix" :src="imagewxUrl+imgadres1"></image>
<view class="width90 alijusstart mart10">
<image src="../../../static/img/home/home6.png" mode="widthFix" class="width31"></image>
<image src="../../../static/img/home/home7.png" mode="widthFix" class="width31"></image>
<image src="../../../static/img/home/home5.png" mode="widthFix" class="width31"></image>
</view>
<swiper class="orange-content" style="border: 2px solid #ff5836;" v-if='productList.length != 0'
:display-multiple-items="productListleg">
<swiper-item class="swiper-hed" v-for="pro in productList" :key="pro.id" @click="toGoods(pro.id)">
<view class="swiper-item" :data-id="pro.id">
<image class="img" :src="imageUrl+pro.couponImg" mode="aspectFit">
</image>
<view class="fotlt fcor333 font14 text1 mart10">{{pro.couponName}}</view>
<view class="subject fotct mart5">{{pro.discountPrice}}</view>
</view>
</swiper-item>
</swiper>
<!-- 天天好券 -->
<view class="width90 mart20 alijusstart">
<view class="width70 font18 fcor333">
天天好券
</view>
<view class="width30 font14 fotrt fcor666">更多</view>
</view>
<view class="width94 alijus mart20">
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home4.png"></image>
<view class="width96 fcor333 font15 fontwig6">加油优惠券包</view>
<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
</view>
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home4.png"></image>
<view class="width96 fcor333 font15 fontwig6">加油优惠券包</view>
<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
</view>
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home4.png"></image>
<view class="width96 fcor333 font15 fontwig6">加油优惠券包</view>
<view class="width96 fcor999 font11">2020.09.21-2202.10.12</view>
<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
</view>
</view>
<!-- 弹窗 -->
<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
<image class="popImg" :src="imageUrl+imgadres3" @click="jumpWeb"></image>
</wybPopup>
<!-- #ifdef MP-->
<button open-type="contact">
<image :src="imagewxUrl+imgadres4" mode="widthFix" class="xfimg"></image>
</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<image :src="imagewxUrl+imgadres4" mode="widthFix" class="h5xfimg" @click="playPhone"></image>
<!-- #endif -->
<view class="height40"></view>
<!-- <official-account bindload="bindload" binderror="binderror"></official-account> -->
<!-- <view class="height20"></view> -->
</view>
</template>
@ -149,8 +192,8 @@
currentSwiper: 0,
imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'headzq.png',
imgadres1: 'jbhed.png',
imgadres: '/home/home1.png',
imgadres1: '/home/home2.png',
imgadres2: 'jt.png',
imgadres5: 'unionarea.png',
imgadres3: '',
@ -708,6 +751,10 @@
swiperChange(event) {
this.currentSwiper = event.detail.current;
},
test(item) {
let a = item % 2;
},
eheckStu(item) {
this.cpStuats = item;
},
@ -770,51 +817,9 @@
//
toCategory(item) {
// if (!app.globalData.userInfo.phone) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
// if (!app.globalData.userInfo) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
// if (item.title == '线') {
uni.navigateTo({
url: item.ext1
})
// } else if (item.title == '') {
// uni.navigateTo({
// // url: '/pages/tabBar/order/order?id=1'
// url: '../../../qianzhu-KFC/home/home'
// })
// } else if (item.title == '') {
// uni.navigateTo({
// // url: '/pages/tabBar/order/order?id=2'
// // url: '/qianzhu-Starbucks/home/home'
// })
// } else if (item.title == '') {
// uni.navigateTo({
// url: '../../../subPages/recharge/recharge'
// })
// } else if (item.title == '') {
// uni.navigateTo({
// url: '/qianzhu-Starbucks/home/home'
// })
// }else if (item.title == '') {
// uni.navigateTo({
// url: '/member-Recharge/choicepage/choicepage'
// })
// } else {
// uni.showToast({
// title: '',
// icon: 'none',
// duration: 2000
// })
// }
},
//
jumplottery(item) {
@ -827,76 +832,9 @@
},
//
jumphuafei(item) {
// if (!app.globalData.userInfo) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
// if (!app.globalData.userInfo.phone) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
uni.navigateTo({
url: item.ext1
})
// if (item.title == '') {
// uni.navigateTo({
// url: '/pages/goods/goods-list/goods-list?id=2'
// })
// return;
// }
// if (item.title == '线') {
// uni.navigateTo({
// url: '/pages/goods/refuel/refuel'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '../../../subPages/recharge/recharge'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '/pages/tabBar/order/order?id=2'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '/qianzhu-Starbucks/home/home'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '../../../qianzhu-KFC/home/home'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '../../../subPages/preferred-goods/preferred-goods'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '../../../subPages/coupon-package/coupon-package'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '/member-Recharge/choicepage/choicepage'
// })
// return;
// }
},
//
goGoodsList(item) {
@ -931,7 +869,6 @@
</script>
<style lang="scss">
page {
position: relative;
background-color: #F5F5F5;
}
@ -999,7 +936,7 @@
display: flex;
align-items: center;
position: fixed;
background-color: #0083f5;
background-color: #3da7e7;
top: 0;
z-index: 10;
@ -1064,6 +1001,7 @@
width: 60upx;
height: 60upx;
flex-shrink: 0;
margin-left: 5px;
display: flex;
.icon {
@ -1078,190 +1016,19 @@
}
}
.place {
background-color: #ffffff;
height: 100upx;
/* #ifdef APP-PLUS */
margin-top: var(--status-bar-height);
/* #endif */
}
.viewbor {
border-radius: 0px 0px 10px 10px;
position: relative;
}
.swiper {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
top: 60px;
.swiper-box {
width: 92%;
height: 130px;
overflow: hidden;
border-radius: 15upx;
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
//ios
position: relative;
z-index: 1;
swiper {
width: 100%;
height: 130px;
swiper-item {
image {
width: 100%;
height: 130px;
}
}
}
.indicator {
position: absolute;
bottom: 20upx;
left: 20upx;
background-color: rgba(255, 255, 255, 0.4);
width: 150upx;
height: 5upx;
border-radius: 3upx;
overflow: hidden;
display: flex;
.dots {
width: 0upx;
background-color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
&.on {
width: (100%/3);
}
}
}
}
}
.banner {
width: 92%;
margin: 40upx 4%;
image {
width: 100%;
height: 20vw;
border-radius: 10vw;
}
}
.promotion {
width: 92%;
margin: 0 4%;
.text {
width: 100%;
height: 60upx;
font-size: 34upx;
font-weight: 600;
margin-top: -10upx;
}
.list {
width: 100%;
display: flex;
justify-content: space-between;
.column {
width: 43%;
padding: 15upx 3%;
background-color: #ebf9f9;
border-radius: 10upx;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.top {
width: 100%;
height: 40upx;
display: flex;
align-items: center;
margin-bottom: 5upx;
.title {
font-size: 30upx;
}
.countdown {
margin-left: 20upx;
display: flex;
height: 40upx;
display: flex;
align-items: center;
font-size: 20upx;
view {
height: 30upx;
background-color: #0083f5;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 4upx;
margin: 0 4upx;
padding: 0 2upx;
}
}
}
.left {
width: 50%;
height: 18.86vw;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.ad {
margin-top: 5upx;
width: 100%;
font-size: 22upx;
color: #acb0b0;
}
.into {
width: 100%;
font-size: 24upx;
color: #aaa;
margin-bottom: 5upx;
}
}
.right {
width: 18.86vw;
height: 18.86vw;
image {
width: 18.86vw;
height: 18.86vw;
}
}
}
}
//
button::after {
border: none
}
.category-list {
width: 100%;
padding: 0 0 30upx 0;
background-color: #FFFFFF;
border-bottom: solid 2upx #f6f6f6;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.category {
width: 25%;
margin-top: 50upx;
margin-top: 40upx;
display: flex;
flex-wrap: wrap;
@ -1282,264 +1049,74 @@
display: flex;
justify-content: center;
font-size: 24upx;
color: #3c3c3c;
}
}
}
.goods-list {
background-color: #FFFFFF;
margin-top: 40px;
.title {
height: 80rpx;
color: #333333;
text-align: center;
margin-top: 10px;
font-size: 30rpx;
width: 100px;
line-height: 80rpx;
margin-bottom: 10px;
float: left;
}
.active_tie {
font-size: 42rpx;
font-weight: bold;
height: 80rpx;
color: #333333;
margin-top: 10px;
text-align: center;
width: 100px;
line-height: 80rpx;
margin-bottom: 10px;
float: left;
}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
}
.swiper {
width: 100%;
display: flex;
justify-content: center;
.product-list {
.swiper-box {
width: 92%;
padding: 0 4% 3vw 4%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.product {
width: 48%;
border-radius: 20upx;
background-color: #fff;
margin: 0 0 15upx 0;
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
image {
width: 100%;
border-radius: 20upx 20upx 0 0;
}
.name {
width: 92%;
padding: 8upx 4%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-align: justify;
overflow: hidden;
font-size: 30upx;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 92%;
padding: 10upx 4% 10upx 4%;
height: 100px;
overflow: hidden;
border-radius: 15upx;
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
//ios
position: relative;
z-index: 1;
.price {
color: #e65339;
font-size: 30upx;
font-weight: 600;
}
swiper {
width: 100%;
height: 100px;
.slogan {
color: #807c87;
font-size: 24upx;
text-decoration: line-through;
swiper-item {
image {
width: 100%;
height: 100px;
}
}
}
}
}
//
.orange-wrap {
position: relative;
box-sizing: border-box;
}
.orange-title {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
padding-right: 30rpx;
}
.orange-title .al {
font-weight: 700;
font-size: 34rpx;
.spcarea {
width: 31%;
margin-right: auto;
margin-left: auto;
border-radius: 10px 10px 0px 0px;
padding-bottom: 10px;
}
.orange-title .ar {
font-size: 28rpx;
color: #777;
.message {
border: 1px solid #f1f1f1;
height: 60px;
border-radius: 8px;
overflow: hidden;
position: relative;
top: 10rpx;
}
.orange-content {
height: 170px;
width: 90%;
margin-left: 5%;
border-radius: 0 0 10px 10px;
margin-top: -5px;
background-color: white;
box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.2);
}
.swiper-hed {
width: 28%;
}
.orange-content .swiper-item {
height: 180rpx;
margin-left: 14rpx;
margin-top: 14rpx;
float: left;
}
.orange-content .swiper-item .img {
width: 100%;
height: 100%;
// border-Radius:10rpx;
}
.orange-content .swiper-item .subject {
font-size: 26rpx;
width: 100%;
color: #ff5836;
display: flex;
align-items: center;
}
.lookmore {
background-color: #e2e2e2;
text-align: center;
line-height: 140rpx;
}
.lookmore .moretext {
color: #777;
font-size: 28rpx;
}
z-index: 1;
padding-top: 5px;
padding-bottom: 5px;
//
button::after {
border: none
}
.Popup {
width: 600rpx;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
margin-left: -300rpx;
transform: translateY(-50%);
z-index: 320;
}
swiper {
width: 100%;
height: 60px;
.Popup {
.logo-auth {
z-index: -1;
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
width: 150rpx;
height: 150rpx;
display: flex;
align-items: center;
justify-content: center;
border: 8rpx solid #fff;
border-radius: 50%;
background: #fff;
swiper-item {
view {
height: 20px;
}
}
}
image {
height: 80rpx;
margin-top: -54rpx;
.stus {
width: 5px;
height: 5px;
background-color: red;
border-radius: 50%;
}
}
.Popup .title {
font-size: 28rpx;
color: #000;
text-align: center;
margin-top: 30rpx
}
.Popup .tip {
font-size: 14px;
color: #555;
padding: 0 24rpx;
margin-top: 50rpx;
text-align: center;
}
.Popup .bottom .item {
width: 50%;
height: 90rpx;
background-color: #eeeeee;
text-align: center;
line-height: 90rpx;
font-size: 14px;
color: #666;
margin-top: 54rpx;
}
.Popup .bottom .item.on {
width: 100%
}
.flex {
display: flex;
}
.Popup .bottom .item.grant {
font-size: 28rpx;
color: #fff;
font-weight: bold;
background-color: #a1bac5;
border-radius: 0;
padding: 0;
}
.mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.65);
z-index: 310;
}
</style>

@ -12,7 +12,7 @@
<image :src="imagewxUrl+imgadres" v-if="!user.headerImg"></image>
<image :src="user.headerImg" v-else></image>
</view>
<!-- 昵称,个性签名 -->
<!-- 昵称 -->
<view class="right">
<!-- #ifdef MP -->
<view class="username" v-if="user && user.infoCompleteStatus == 1" @click="jumplogin">点击获取信息</view>
@ -21,126 +21,139 @@
<!-- #ifdef H5 -->
<view class="username">{{user.name}}</view>
<!-- #endif -->
<view class="font14 fcorfff" v-if="!user.gold">积分: 0</view>
<view class="font14 fcorfff" v-else>积分: {{user.gold}} </view>
<!-- <view class="signature" @tap="toSetting">{{user.signature}}</view> -->
<view class="font14 fcor333">{{userphone}}</view>
</view>
<!-- 二维码按钮 -->
<!-- #ifdef MP -->
<!-- <button class="erweima fotct aliitem font14" v-if="user == ''" open-type="getPhoneNumber"
@getphonenumber="loginByPhone">
<image src="../../../static/img/jingbi.png"></image> 充值积分
</button> -->
<button class="erweima fotct aliitem font14" @click="toDeposit">
<image src="../../../static/img/jingbi.png"></image> 充值积分
</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<button class="erweima fotct aliitem font14" v-if="user.phone == null" @click="jumpH5Bding">
<image src="../../../static/img/jingbi.png"></image> 充值积分
</button>
<button class="erweima fotct aliitem font14" v-else @click="toDeposit">
<image src="../../../static/img/jingbi.png"></image> 充值积分
</button>
<!-- #endif -->
</view>
<!-- 优惠券卡券 -->
<view class="headcoun width100">
<view class="height80 alijus width92 border-8r backcorfff">
<view class="width45 fotct" @click="jumppage(5)">
<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textnum}} </text> </view>
<view class="width100 font18 fcor333 mart5">卡券</view>
</view>
<view style="width: 1px;height: 50px;background-color: #f6f6f6;">
</view>
<view class="width45 fotct" @click="jumppage(6)">
<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textSend}} </text> </view>
<view class="width100 font18 fcor333 mart5">优惠券</view>
</view>
</view>
</view>
<!-- 订单-余额 -->
<view class="order">
<!-- 订单类型 -->
<view class="title">我的订单</view>
<view class="title width94">
<view class="width70 fontwig6">订单</view>
<view class="width30 alijusend font14 fcor999" @click="toOrderList(-1)">全部订单<image class="icon15"
mode="widthFix" src="../../../static/img/jt.png">
</image>
</view>
</view>
<view class="list">
<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
<uni-badge style="width: 20px;position: absolute; left: 15%;" v-if="row.text == '待支付' && therrNum "
<uni-badge style="width: 20px;position: absolute; left: 18%;" v-if="row.text == '待支付' && therrNum "
:text="therrNum" type="error" size="normal"></uni-badge>
<uni-badge style="width: 20px;position: absolute; left: 52%;"
v-if="row.text == '已完成' && whetherCheckNum " :text="whetherCheckNum" type="error" size="normal">
</uni-badge>
<uni-badge style="width: 20px;position: absolute; left: 33%;"
<uni-badge style="width: 20px;position: absolute; left: 42%;"
v-if="row.text == '已支付' && orderPayNum " :text="orderPayNum" type="error" size="normal">
</uni-badge>
<view class="img">
<view class="icon" :class="row.icon"></view>
<image :src="row.icon" class="icon40" mode="widthFix"></image>
</view>
<view class="text">{{row.text}}</view>
<view class="text mart10">{{row.text}}</view>
</view>
</view>
<view class="width90 mart10 height60">
<swiper circular="true" interval="3000" autoplay="true">
<swiper-item v-for="(swiper,index) in nopaylist" :key="index">
<view class="alijusstart border-8r backcor9 height60 ">
<image mode="widthFix" class="icon40 margle10" src="../../../static/img/user/user5.png">
</image>
<view class="width50 margle10">
<view class="font15 fcor333 fontspec">等待付款</view>
<view class="font12 fcor666 fontspec mart5">剩余时间: 13:44</view>
</view>
<view class="topay">
去支付
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- 话费充值 -->
<!-- 我的资产 -->
<view class="order">
<!-- 订单类型 -->
<view class="title">话费充值</view>
<view class="list">
<view class="box" v-for="(row,index) in huafeiList" :key="index" @tap="toOrdehuafeirList(index)">
<uni-badge style="width: 20px;position: absolute; left: 15%;"
v-if="row.text == '待支付' && rechargeOrderNum " :text="rechargeOrderNum" type="error"
size="normal"></uni-badge>
<view class="img">
<view class="icon" :class="row.icon"></view>
</view>
<view class="text">{{row.text}}</view>
<view class="title width94">
<view class="width70 fontwig6 alijusstart">我的资产
<image mode="widthFix" class="icon30" v-if="assetsstu == 2" @click="updatestu(2)"
src="../../../static/img/user/user6.png"></image>
<image mode="widthFix" class="icon20 margle" v-if="assetsstu == 1" @click="updatestu(1)"
src="../../../static/img/user/user14.png"></image>
</view>
<view class="width30 alijusend font14 fcor999" @click="jumppage(4)">进入卡包<image class="icon15"
mode="widthFix" src="../../../static/img/jt.png">
</image>
</view>
</view>
</view>
<!-- 工具栏 -->
<view class="toolbar">
<view class="title">卡券中心</view>
<view class="list">
<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url,row.text)">
<!-- <view style="width: 10px;height: 10px;">
<uni-badge text="1" type="error" />
</view> -->
<uni-badge style="width: 20px;position: absolute; right: 55%;" v-if="row.text == '我的卡券' && textnum "
:text="textnum" type="error" size="normal"></uni-badge>
<uni-badge style="width: 20px;position: absolute; right: 30%;"
v-if="row.text == '我的优惠券' && textSend " :text="textSend" type="error" size="normal"></uni-badge>
<view class="img">
<image :src="imagewxUrl+row.img"></image>
</view>
<view class="text">{{row.text}}</view>
<view class="mart15 width90 alijus fotct paddbotm10">
<view class="width31">
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
<view class="fontspec font14 fcor333 mart5">积分余额</view>
</view>
<view class="width31">
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
<view class="fontspec font14 fcor333 mart5">油卡余额</view>
</view>
<view class="width31">
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
<view class="fontspec font14 fcor333 mart5">工会卡余额</view>
</view>
</view>
</view>
<!-- 我的推广 -->
<view class="toolbar" style="margin-top: 20px;">
<view class="title">推广中心</view>
<view class="list">
<view class="box" v-for="(row,index) in mytgbarList" :key="index" @tap="toPage(row.url,row.text)">
<!-- <view style="width: 10px;height: 10px;">
<uni-badge text="1" type="error" />
</view> -->
<uni-badge style="width: 20px;position: absolute; right: 30%;" v-if="row.text == '我的卡券' && textnum "
:text="textnum" type="error" size="normal"></uni-badge>
<uni-badge style="width: 20px;position: absolute; right: 7%;"
v-if="row.text == '我的优惠券' && textSend " :text="textSend" type="error" size="normal"></uni-badge>
<view class="img" v-if="row.text != '客服' ">
<image :src="imagewxUrl+row.img"></image>
</view>
<view class="text" v-if="row.text != '客服' ">{{row.text}}</view>
<button open-type="contact" style="background-color: transparent;" class="img" show-message-card
session-from send-message-path send-message-title v-if="row.text == '客服' ">
<image :src="imagewxUrl+row.img"></image>
</button>
<view class="text" v-if="row.text == '客服' ">{{row.text}}</view>
<!-- 商务中心 -->
<view class="order">
<view class="title width94">
<view class="width70 fontwig6">商务中心</view>
</view>
<view class="width90 alijus fotct paddbotm10 mart10">
<view class="width31" @click="jumppage(1)">
<image mode="widthFix" class="icon45" src="../../../static/img/user/user7.png"></image>
<view class="fontspec font14 fcor333 mart5">门店登陆</view>
</view>
<view class="width31" @click="jumppage(2)">
<image mode="widthFix" class="icon45" src="../../../static/img/user/user8.png"></image>
<view class="fontspec font14 fcor333 mart5">代理商登陆</view>
</view>
<view class="width31" @click="jumppage(3)">
<image mode="widthFix" class="icon45" src="../../../static/img/user/user9.png"></image>
<view class="fontspec font14 fcor333 mart5">我的推广</view>
</view>
</view>
</view>
<view class="toolbar" style="margin-top: 20px;">
<view class="title">我的</view>
<!-- 其他 -->
<view class="order">
<view class="height20 width94">
</view>
<view class="list">
<view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)">
<view class="img">
<image :src="row.img"></image>
<view class="img" v-if="row.text != '客服' ">
<image :src="row.img" class="icon40" mode="widthFix"></image>
</view>
<view class="text">{{row.text}}</view>
<button open-type="contact" style="background-color: transparent;" class="img" show-message-card
session-from send-message-path send-message-title v-if="row.text == '客服' ">
<image class="icon40" mode="widthFix" :src="row.img"></image>
</button>
<view class="text mart10">{{row.text}}</view>
</view>
</view>
</view>
<!-- 占位 -->
<view class="place-bottom"></view>
<!-- <authorize></authorize> -->
</view>
@ -161,7 +174,6 @@
},
data() {
return {
isfirst: true,
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'head.png',
headerPosition: "fixed",
@ -179,21 +191,18 @@
//
orderList: [{
text: '待支付',
icon: "fukuan"
icon: "../../../static/img/user/user1.png"
},
{
text: '已支付',
icon: "fahuo"
icon: "../../../static/img/user/user2.png"
},
{
text: '已完成',
icon: "shouhuo"
icon: "../../../static/img/user/user3.png"
}, {
text: '已退款',
icon: "tuihuo"
}, {
text: '已取消',
icon: "pingjia"
icon: "../../../static/img/user/user4.png"
}
],
huafeiList: [{
@ -215,58 +224,11 @@
icon: "tuihuo"
}
],
//
mytoolbarList: [{
url: '/pages/goods/recording/recording',
text: '积分记录',
img: 'user/mingxi.png'
},
// {
// url: '/pages/goods/recording/recording?id=2',
// text: '',
// img: 'user/quan.png'
// },
{
url: '/pages/user/mineCoupons/mineCoupons',
text: '我的卡券',
img: 'user/choujiang.png'
},
{
url: '../../user/coupon/coupon',
text: '我的优惠券',
img: 'user/momey.png'
}
],
// 广
mytgbarList: [{
url: '',
text: '客服',
img: 'user/kefu.png'
},
{
url: '../../login/login?id=1',
text: '商户入口',
img: 'user/point.png'
},
{
url: '../../login/login?id=2',
text: '代理商登录',
img: 'user/renw.png'
},
{
url: '/pages/user/myPromotion/myPromotion',
text: '我的推广',
img: 'user/extension.png'
}
// ,
// {
// url: '/pages/user/generatePoster/generatePoster',
// text: '',
// img: 'user/poster.png'
// }
],
//
czList: '',
nopaylist: [1, 2, 3, 4, 5],
assetsstu: 2,
userphone:'' //
}
},
//page.json "enablePullDownRefresh": true
@ -307,47 +269,59 @@
// #ifdef MP
if (!app.globalData.userInfo.isSetPayPwd) {
this.czList = [{
url: '../../../subPages/cardsList/cardsList',
text: '卡包',
img: '../../../static/img/ghkpay.png'
url: '/pages/goods/recording/recording',
text: '积分记录',
img: '../../../static/img/user/user10.png'
},
{
url: '../../login/updatePas/updatePas',
text: '设置积分密码',
img: '../../../static/img/pas.png'
text: '支付密码',
img: '../../../static/img/user/user11.png'
}, {
url: '',
text: '客服',
img: '../../../static/img/user/user13.png'
}
]
return;
}
// '../../user/unionCard/unionCard'
this.czList = [{
url: '../../../subPages/cardsList/cardsList',
text: '卡包',
img: '../../../static/img/ghkpay.png'
url: '/pages/goods/recording/recording',
text: '积分记录',
img: '../../../static/img/user/user10.png'
},
{
url: '../../login/updatePas/resetPas',
text: '修改积分密码',
img: '../../../static/img/pas.png'
text: '支付密码',
img: '../../../static/img/user/user11.png'
}, {
url: '',
text: '客服',
img: '../../../static/img/user/user13.png'
}
]
// #endif
// #ifdef H5
if (!app.globalData.userInfo.isSetPayPwd) {
this.czList = [{
url: '../../../subPages/cardsList/cardsList',
text: '卡包',
url: '/pages/goods/recording/recording',
text: '积分记录',
img: '../../../static/img/ghkpay.png'
},
{
url: '../../login/updatePas/updatePas',
text: '设置积分密码',
img: '../../../static/img/pas.png'
text: '支付密码',
img: '../../../static/img/user/user11.png'
}, {
url: '',
text: '退出登录',
img: '../../../static/img/exit.png'
},
img: '../../../static/img/user/user12.png'
}, {
url: '',
text: '客服',
img: '../../../static/img/user/user13.png'
}
]
return;
}
@ -358,13 +332,17 @@
},
{
url: '../../login/updatePas/resetPas',
text: '修改积分密码',
img: '../../../static/img/pas.png'
text: '支付密码',
img: '../../../static/img/user/user11.png'
},
{
url: '',
text: '退出登录',
img: '../../../static/img/exit.png'
}, {
url: '',
text: '客服',
img: '../../../static/img/user/user13.png'
}
]
// #endif
@ -381,7 +359,8 @@
this.therrNum = res.return_data.unpaid;
this.whetherCheckNum = res.return_data.whetherCheckNum;
this.orderPayNum = res.return_data.orderPayNum;
this.rechargeOrderNum = res.return_data.rechargeOrderNum;
this.rechargeOrderNum = res.return_data.rechargeOrderNum;
this.geTel(this.user.phone);
uni.setStorage({
key: "user",
data: res.return_data
@ -389,98 +368,63 @@
}
});
},
loginByPhone(PhoneNumber) {
if (PhoneNumber.detail.iv == undefined) {
uni.showToast({
title: "用户取消授权",
icon: "none"
});
return;
}
let params = {
openId: app.globalData.openId,
iv: PhoneNumber.detail.iv,
encryptedData: PhoneNumber.detail.encryptedData
}
loginByPhone(params).then(res => {
if (res.return_code == '000000') {
app.globalData.userInfo = res.return_data
.object
.highUser;
app.globalData.token = res.return_data.uniqueCode;
uni.setStorage({
key: "token",
data: res.return_data.uniqueCode
})
uni.setStorage({
key: "user",
data: res.return_data
.object
.highUser
})
this.toDeposit();
}
});
},
// H5
jumpH5Bding() {
uni.navigateTo({
url: '/pages/login/register'
})
},
//
jumplogin() {
uni.navigateTo({
url: '../../userLogin/userLogin'
})
},
//
toMsg() {
uni.showToast({
title: '暂未开通',
icon: 'none'
});
},
toOrderList(index) {
uni.navigateTo({
url: '../../user/order_list/order_list?tbIndex=' + index
})
},
//
toOrdehuafeirList(index) {
uni.navigateTo({
url: '../../../subPages/unionPay-orderList/unionPay-orderList?tbIndex=' + index
})
//
geTel(tel) {
var reg = /^(\d{3})\d{4}(\d{4})$/;
this.userphone = tel.replace(reg, "$1****$2");
},
toLogin() {
uni.showToast({
title: '请登录',
icon: "none"
});
uni.navigateTo({
url: '../../login/login'
})
this.isfirst = false;
},
isLogin() {
//,token.
const value = uni.getStorageSync('UserInfo');
if (value) {
return true;
//
updatestu(item) {
if (item == 1) {
this.assetsstu = 2;
}
if (item == 2) {
this.assetsstu = 1;
}
return false
},
toDeposit() {
if (this.user) {
// 广
jumppage(item) {
if (item == 1) {
uni.navigateTo({
url: '../../user/deposit/deposit'
url: '../../login/login?id=1'
})
} else {
}
if (item == 2) {
uni.navigateTo({
url: '/pages/userLogin/userLogin'
url: '../../login/login?id=2'
})
}
if (item == 3) {
uni.navigateTo({
url: '/pages/user/myPromotion/myPromotion'
})
}
if (item == 4) {
uni.navigateTo({
url: '../../../subPages/cardsList/cardsList'
})
}
if (item == 5) {
uni.navigateTo({
url: '/pages/user/mineCoupons/mineCoupons'
})
}
if (item == 6) {
uni.navigateTo({
url: '../../user/coupon/coupon'
})
}
},
toPage(url, item) {
if (item != '客服') {
@ -544,8 +488,7 @@
</script>
<style lang="scss">
page {
position: relative;
background-color: #fff;
background-color: #f5f5f5;
}
.status {
@ -598,50 +541,20 @@
border: none
}
.status {
width: 100%;
height: 0;
position: fixed;
z-index: 10;
background-color: #0083f5;
top: 0;
/* #ifdef APP-PLUS */
height: var(--status-bar-height); //
/* #endif */
.headcoun {
background: linear-gradient(to bottom, #e8eff4, #f5f5f5);
height: 100px;
}
.header {
width: 92%;
padding: 0 4%;
height: 100upx;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
top: 0;
z-index: 10;
background-color: #0083f5;
/* #ifdef APP-PLUS */
top: var(--status-bar-height);
/* #endif */
.icon-btn {
width: 120upx;
height: 60upx;
flex-shrink: 0;
display: flex;
.icon {
color: #fff;
width: 60upx;
height: 60upx;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 42upx;
}
}
.topay {
width: 70px;
height: 25px;
font-size: 14px;
text-align: center;
line-height: 25px;
border-radius: 20px;
border: 1px solid #009DFF;
color: #009DFF;
}
.place {
@ -664,14 +577,22 @@
height: 200upx;
}
swiper {
height: 60px !important;
}
swiper-item {
height: 60px !important;
}
.user {
width: 96%;
padding: 0 4%;
display: flex;
align-items: center;
// position: relative;
background-color: #0083f5;
padding-bottom: 40rpx;
background: linear-gradient(to bottom, #6fbdee, #e8eff4);
.left {
width: 20vw;
@ -694,7 +615,7 @@
.username {
font-size: 36upx;
color: #fff;
color: #333333;
}
.signature {
@ -730,9 +651,9 @@
.order {
.title {
padding-top: 10upx;
margin: 0 0 10upx 3%;
font-size: 30upx;
padding-top: 10px;
padding-bottom: 10px;
font-size: 36upx;
height: 80upx;
display: flex;
align-items: center;
@ -740,7 +661,7 @@
width: 92%;
margin: 30rpx 4% 30rpx 4%;
padding: 0rpx 0% 20rpx 0%;
padding: 0rpx 0% 40rpx 0%;
background-color: #fff;
box-shadow: 0rpx 0rpx 25rpx rgba(0, 0, 0, 0.1);
border-radius: 15rpx;
@ -756,11 +677,6 @@
width: 100%;
display: flex;
justify-content: center;
.icon {
font-size: 50upx;
color: #464646;
}
}
.text {
@ -835,42 +751,6 @@
}
}
.VIP {
width: 84%;
margin: -65upx auto 20upx auto;
padding: 30upx 4%;
background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
border-radius: 15upx;
display: flex;
align-items: center;
.img {
flex-shrink: 0;
width: 60upx;
height: 60upx;
image {
width: 60upx;
height: 60upx;
}
}
.title {
width: 100%;
color: #796335;
font-size: 30upx;
}
.tis {
width: 100%;
display: flex;
justify-content: flex-end;
color: #fcf0d0;
font-size: 26upx;
}
}
.toolbar {
width: 92%;
margin: 0 4% 0 4%;

@ -0,0 +1,117 @@
<template>
<view>
<!-- 顶部类型 -->
<scroll-view scroll-x='true' class="srollview width100" scroll-with-animation>
<view class="conent" :class="[newstypeid == index ? 'activeconent' : 'frontconent']"
v-for="(item,index) in newsTyplist" :key="index">{{item}}</view>
</scroll-view>
<!-- 内容 -->
<view class="newscont width90 border-8r backcorfff mart20" v-for="(item,index) in newsTyplist">
<view class="alijusstart mart10 margle10">
<image src="../../../static/img/cusservice.png" mode="widthFix" class="icon30"></image>
<text class="font18 margle" style="color: #0B1D83;">服务通知</text>
</view>
<view class="width90 line1 mart10"></view>
<!-- 服务通知 -->
<view class="width90 mart20" v-if="index != 1">
<view class="font18 fcor333">最新电影已上映快来抢购</view>
<image mode="widthFix" class="width100 mart10" src="../../../static/img/user/1.png"></image>
</view>
<!-- 交易信息 -->
<view class="width90 mart20" v-if="index == 1">
<view class="font18 fcor333">付款成功</view>
<view class="mart10 border-r backcor9">
<view class="font20 colore95 fontwig6 paddtop10 fotct">¥9.58</view>
<view class="width94 mart10 alijusstart font14">
<view class="fontwig6 fcor333 width30">交易对象</view>
<view class="width70 fcor666 fotrt">电信话费充值200元</view>
</view>
<view class="width94 mart15 alijusstart font14">
<view class="fontwig6 fcor333 width30">交易时间</view>
<view class="width70 fcor666 fotrt">2022年9月30日</view>
</view>
<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
</view>
</view>
</view>
<!-- 客服消息 -->
<view class="width90 mart20" v-if="index == 2">
<view class="font18 fcor333">客服消息提醒</view>
<view class="mart10 border-r backcor9">
<view class="width92 fcor333 fontwig6 paddtop15">
你的问题我们已提交技术人员处理请耐心等候
</view>
<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
newsTyplist: ['全部订单', '在线加油', '肯德基', '星巴克', '话费充值', '卡券订单'], //
newstypeid: 1 //id
}
},
methods: {
}
}
</script>
<style lang="scss">
page {
background-color: #f3f3f3;
}
.srollview {
height: 70px;
background-color: #ffffff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
white-space: nowrap;
.conent {
height: 24px;
line-height: 24px;
margin-top: 15px;
padding-left: 10px;
font-size: 12px;
padding-right: 10px;
margin-left: 10px;
display: inline-flex;
flex-direction: column;
text-align: center;
position: relative;
}
}
.frontconent {
background-color: #ffffff;
color: #333333;
}
.activeconent {
background-color: #e8eff4;
color: #009DFF;
}
.newscont {
padding-top: 10px;
padding-bottom: 10px;
}
</style>

@ -1,110 +1,85 @@
<template>
<view>
<!-- 顶部导航 -->
<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
<!-- 搜索 -->
<view class="backcorfff width100 height120" style="position: fixed;top: 0px;z-index: 999;">
<view class="alijusstart">
<view class="input-box">
<view class="icon search"></view>
<input placeholder="搜索我的订单" v-model="couponName" placeholder-style="color:#c0c0c0;"
@input="toSearch()" />
</view>
<view class="searbtn">搜索</view>
</view>
<view class="width100 bor-botm1 mart10 marb5"></view>
<!-- 顶部导航 -->
<view class="topTabBar">
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}
</view>
</view>
</view>
</view>
<scroll-view scroll-x='true' class="srollview width100" scroll-with-animation>
<view class="conent" :class="[ordertypeid == index ? 'activeconent' : 'frontconent']"
v-for="(item,index) in orderTyplist" :key="index">{{item}}</view>
</scroll-view>
<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿所以漂浮顶部选项卡使用page本身的滑动 -->
<view class="order-list">
<view class="list">
<view class="onorder" v-if="orderList.length==0">
<image :src="imagewxUrl+imgadres"></image>
</view>
<view class="row" v-for="(row,index) in orderList" :key="index">
<view class="width96 height40" @click="jumpDetails(row.highChildOrderList[0].goodsType,row.id)">
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 1">
<image src="../../../static/img/order2.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
卡券订单 <view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 2">
<image src="../../../static/img/order2.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
积分充值<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 7">
<image src="../../../static/img/order9.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
优惠券包<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 3">
<image src="../../../static/img/order4.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
加油订单<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 5">
<image src="../../../static/img/order5.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
电影票<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 4">
<image src="../../../static/img/order3.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
KFC<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 9">
<image src="../../../static/img/xbk.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
星巴克<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 10">
<image src="../../../static/img/Vip.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
会员充值<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
<view class="row" v-for="(row,index) in orderList" :key="index"
@click="jumpDetails(row.highChildOrderList[0].goodsType,row.id)">
<view class="width96 mart10 alijusstart">
<view class="width70">
<view class="orderlabel">在线加油</view>
<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 8">
<image src="../../../static/img/ghkpay.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
工会卡充值<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</view>
<view class="width60 flright fotrt fcor666 font15">
{{row.createTime | formatDate('-')}}
<view class="width30 fotrt fcor666 font12">
{{typeText[row.orderStatus]}}
</view>
</view>
<view class="width96 line1 mart10"></view>
<view class="width96 height60 mart10"
@click="jumpDetails(row.highChildOrderList[0].goodsType,row.id)">
<view class="width96 height25 mart10">
<view class="width70 flleft fotlt ">
<view class="font16 fontwig6 text1 fcor333">
{{row.highChildOrderList[0].goodsName}}
</view>
<view class="font15 text1 fcor999 mart5">
数量 : {{row.highChildOrderList[0].saleCount}}
<view class="font16 fontwig6 text1 fcor333 alijusstart">
<image src="../../../static/img/order5.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>{{row.highChildOrderList[0].goodsName}}
</view>
</view>
<view class="width30 flright fotrt fcor666 font15 fotrt">
<view class="font16 fontwig6 text1 fcor333" v-if="row.payType != 3">
{{row.payPrice}}
<view class="font14 fcor333">
x1
</view>
<view class="font16 fontwig6 text1 fcor333 aliitem" style="justify-content: flex-end;"
v-else>
<image style="width: 15px;height: 15px;" src="../../../static/img/jfx.png">
</image>{{(row.payPrice * 10 * 10).toFixed(0)}}
</view>
</view>
<view class="width96 mart10 font12 fcor999">
订单编号:{{row.orderNo}}
</view>
<view class="width96 height25 alijusstart">
<view class="width70 fotlt ">
<view class="font12 text1 fcor999 mart5">
下单时间 : {{row.createTime | formatDate('-')}}
</view>
</view>
<view class="width30 fotrt fcor666 font15 fotrt">
<view class="fotrt font12 text1 fcor999 mart5">
合计:<text class="fcor333 font18"> {{row.payPrice}} </text>
</view>
<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.orderStatus]}}</view>
</view>
</view>
<view class="width96 line1 mart10 marb5"
<view class="width96 mart10 marb5" style="border:1px dashed #f4f4f4;"
v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)">
</view>
<view class="btns"
v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)">
<block>
<view class="default" @tap="cancelOrder(row.id,row.highChildOrderList[0].goodsType)">取消订单
<view class="default" @click.stop="cancelOrder(row.id,row.highChildOrderList[0].goodsType)">
取消订单
</view>
<view class="pay" @tap="toPayment(row)">付款</view>
<view class="pay" @click.stop="toPayment(row)">立即支付</view>
</block>
</view>
</view>
@ -116,7 +91,7 @@
import {
getUserOrderList,
cancelOrder,
thirdCancelOrder,
thirdCancelOrder,
orderCheck
} from '../../../Utils/Api.js';
let app = getApp()
@ -138,7 +113,7 @@
7: '订单退款失败'
},
// 退
orderType: ['全部', '待支付', '已支付', '已完成', '已退款', '已取消'],
orderType: ['全部', '待支付', '已支付', '已完成', '已退款'],
//
orderList: [],
list: [],
@ -149,7 +124,9 @@
loadingText: '',
typeId: '',
imageUrl: app.globalData.imgUrl,
reFresh: ""
reFresh: "",
orderTyplist: ['全部订单', '在线加油', '肯德基', '星巴克', '话费充值', '卡券订单'], //
ordertypeid: 1 //id
}
},
@ -158,9 +135,13 @@
this.headerTop = '44px';
// #endif
let tbIndex = parseInt(option.tbIndex) + 1;
this.list = this.orderList[tbIndex];
if (tbIndex == 0) {
this.typeId = '';
} else {
this.typeId = tbIndex;
}
this.list = this.orderList[this.typeId];
this.tabbarIndex = tbIndex;
this.typeId = tbIndex;
this.getUserOrderList();
},
onPageScroll(e) {
@ -385,41 +366,54 @@
background-color: #f3f3f3;
}
.zspec {
font-size: 22rpx;
background-color: #0083f5;
color: #FFFFFF;
height: 40rpx;
display: -webkit-box;
display: -webkit-flex;
.input-box {
width: 72%;
margin-left: 5%;
margin-top: 15px;
height: 70rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
position: relative;
display: flex;
width: 44px;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 0 15rpx;
border-radius: 4px;
margin-bottom: 10px;
margin-left: 5px;
}
border-radius: 15px 0 0 15px;
.icon {
display: flex;
align-items: center;
position: absolute;
top: 2px;
left: 5px;
width: 60upx;
height: 60upx;
font-size: 34upx;
color: #c0c0c0;
}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
input {
padding-left: 50upx;
height: 28upx;
font-size: 26upx;
width: 100%;
}
}
.searbtn {
height: 35px;
width: 18%;
background-color: #009DFF;
font-size: 16px;
text-align: center;
margin-top: 15px;
line-height: 35px;
color: #ffffff;
letter-spacing: 2px;
border-radius: 0 15px 15px 0;
}
.topTabBar {
width: 100%;
position: fixed;
top: 0;
z-index: 10;
background-color: #f8f8f8;
background-color: #ffffff;
height: 80upx;
display: flex;
justify-content: space-around;
@ -439,16 +433,53 @@
align-items: center;
&.on {
color: #0083f5;
border-bottom: solid 4upx #0083f5;
color: #009dff;
border-bottom: solid 8upx #0083f5;
}
}
}
}
.srollview {
position: fixed;
z-index: 999;
height: 50px;
top: 120px;
background-color: #f3f3f3;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
white-space: nowrap;
.conent {
height: 24px;
line-height: 24px;
margin-top: 15px;
padding-left: 10px;
font-size: 12px;
padding-right: 10px;
border-radius: 20px;
margin-left: 10px;
display: inline-flex;
flex-direction: column;
text-align: center;
position: relative;
}
}
.frontconent {
background-color: #ffffff;
color: #333333;
}
.activeconent {
background-color: #e8eff4;
color: #009DFF;
}
.order-list {
margin-top: 80upx;
margin-top: 170px;
padding-top: 20upx;
width: 100%;
@ -485,14 +516,16 @@
padding: 10upx 20upx;
border-radius: 10upx;
background-color: #fff;
margin-bottom: 20upx;
margin-bottom: 30upx;
.unread {
width: 10px;
height: 10px;
background-color: #e75e58;
border-radius: 50%;
margin-top: -20px;
margin-top: -25px;
position: absolute;
margin-left: 60px;
}
.type {
@ -579,7 +612,7 @@
view {
min-width: 120upx;
height: 70rpx;
height: 60rpx;
padding: 0 20upx;
border-radius: 50upx;
display: flex;
@ -602,4 +635,17 @@
}
}
}
.orderlabel {
width: 50px;
border-radius: 5px;
height: 22px;
line-height: 22px;
background-color: #eeebeb;
color: #797979;
text-align: center;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

@ -286,11 +286,21 @@ $uni-font-size-paragraph:30upx;
.backcolor32 {
background-color: #32649d;
}
.backcolor3da7e7 {
background-color: #3da7e7;
}
.backcolor87c8f1 {
background-color: #87c8f1;
}
//渐变
.backcorlr{
background: linear-gradient(to right, #fe1a1a, #ff722e);
}
.backcorltop{
background: linear-gradient(to bottom, #3da7e7, #6fbdee);
}
.backcorf06{
background-color: #0083f5;
@ -363,6 +373,10 @@ $uni-font-size-paragraph:30upx;
.width50 {
width: 50%;
}
.width45 {
width: 45%;
}
.width40 {
width: 40%;
@ -387,6 +401,12 @@ $uni-font-size-paragraph:30upx;
margin-left: 3%;
}
.width31{
width: 31%;
margin-right: auto;
margin-left: auto;
}
.width20w {
width: 20%;
margin-left: 40%;
@ -728,6 +748,10 @@ $uni-font-size-paragraph:30upx;
.border-r{
border-radius: 5px;
}
.border-8r{
border-radius: 8px;
}
/* button样式 */
.btnw70 {
@ -836,6 +860,18 @@ $uni-font-size-paragraph:30upx;
width: 12px;
}
.icon25 {
width: 25px;
}
.icon30 {
width: 30px;
}
.icon40 {
width: 40px;
}
.icon45 {
width: 45px;
}
Loading…
Cancel
Save