1.银联 改版2.0

master
杨杰 3 years ago
parent e34c3241d4
commit 02a7098a88
  1. 16
      high-unionPay/App.vue
  2. 5
      high-unionPay/Utils/Api.js
  3. 16
      high-unionPay/pages.json
  4. 57
      high-unionPay/pages/goods/goods-list/goods-list.vue
  5. 421
      high-unionPay/pages/goods/goods.vue
  6. 679
      high-unionPay/pages/tabBar/home/home.vue
  7. 545
      high-unionPay/pages/tabBar/user/user.vue
  8. 283
      high-unionPay/pages/user/coupon/coupon.vue
  9. 120
      high-unionPay/pages/user/news/news.vue
  10. 323
      high-unionPay/pages/user/order_details/order_details.vue
  11. 339
      high-unionPay/pages/user/order_list/order_list.vue
  12. 281
      high-unionPay/qianzhu-KFC/order-details/order-details.vue
  13. BIN
      high-unionPay/qianzhu-KFC/static/imgs/desloca.png
  14. BIN
      high-unionPay/static/img/cusservice.png
  15. BIN
      high-unionPay/static/img/home/cusser.png
  16. BIN
      high-unionPay/static/img/home/home3.png
  17. BIN
      high-unionPay/static/img/home/home4.png
  18. BIN
      high-unionPay/static/img/home/home5.png
  19. BIN
      high-unionPay/static/img/home/home6.png
  20. BIN
      high-unionPay/static/img/home/home7.png
  21. BIN
      high-unionPay/static/img/user/user1.png
  22. BIN
      high-unionPay/static/img/user/user10.png
  23. BIN
      high-unionPay/static/img/user/user11.png
  24. BIN
      high-unionPay/static/img/user/user12.png
  25. BIN
      high-unionPay/static/img/user/user13.png
  26. BIN
      high-unionPay/static/img/user/user14.png
  27. BIN
      high-unionPay/static/img/user/user15.png
  28. BIN
      high-unionPay/static/img/user/user16.png
  29. BIN
      high-unionPay/static/img/user/user2.png
  30. BIN
      high-unionPay/static/img/user/user3.png
  31. BIN
      high-unionPay/static/img/user/user4.png
  32. BIN
      high-unionPay/static/img/user/user5.png
  33. BIN
      high-unionPay/static/img/user/user6.png
  34. BIN
      high-unionPay/static/img/user/user7.png
  35. BIN
      high-unionPay/static/img/user/user8.png
  36. BIN
      high-unionPay/static/img/user/user9.png
  37. 57
      high-unionPay/uni.scss

@ -5,15 +5,15 @@
// brestUrl: 'http://192.168.3.4:9302/brest', // brestUrl: 'http://192.168.3.4:9302/brest',
// imgUrl: 'https://192.168.3.4:9301/filesystem/', // imgUrl: 'https://192.168.3.4:9301/filesystem/',
// //
url: 'https://hsg.dctpay.com/crest', // url: 'https://hsg.dctpay.com/crest',
imgUrl: 'https://hsg.dctpay.com/filesystem/', // imgUrl: 'https://hsg.dctpay.com/filesystem/',
brestUrl : 'https://hsg.dctpay.com/brest', // brestUrl : 'https://hsg.dctpay.com/brest',
imageWxImg:'https://hsg.dctpay.com/filesystem/wxApplets/', // imageWxImg:'https://hsg.dctpay.com/filesystem/wxApplets/',
// //
// url: 'https://hsgcs.dctpay.com/crest', url: 'https://hsgcs.dctpay.com/crest',
// brestUrl : 'https://hsgcs.dctpay.com/brest', brestUrl : 'https://hsgcs.dctpay.com/brest',
// imgUrl: 'https://hsgcs.dctpay.com/filesystem/', imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
// imageWxImg:'https://hsgcs.dctpay.com/filesystem/wxApplets/', imageWxImg:'https://hsgcs.dctpay.com/filesystem/wxApplets/',
userInfo: "", userInfo: "",
brestUserInfo : '', brestUserInfo : '',
openId: '', openId: '',

@ -131,6 +131,11 @@ export const cancelOrder = params => {
export const getOrderById = params => { export const getOrderById = params => {
return POST('GET', `${base}/highOrder/getOrderById`, params).then(res => res.data); return POST('GET', `${base}/highOrder/getOrderById`, params).then(res => res.data);
} }
//已完成未查看
export const orderCheck = params => {
return POST('GET', `${base}/highOrder/orderCheck`, params).then(res => res.data);
}
//获取商户列表 //获取商户列表
export const getMerchantList = params => { export const getMerchantList = params => {
return POST('GET', `${base}/highMerchantStore/getMerchantList`, params).then(res => res.data); return POST('GET', `${base}/highMerchantStore/getMerchantList`, params).then(res => res.data);

@ -5,8 +5,8 @@
"style": { "style": {
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
"navigationBarTitleText": "嗨森逛", "navigationBarTitleText": "嗨森逛",
"navigationBarBackgroundColor": "#0083f5", "navigationBarBackgroundColor": "#3da7e7",
"backgroundColorTop": "#0083f5", "backgroundColorTop": "#3da7e7",
"onReachBottomDistance": 50, "onReachBottomDistance": 50,
"app-plus": { "app-plus": {
"titleNView": false, // "titleNView": false, //
@ -699,6 +699,18 @@
} }
} }
}
,{
"path" : "pages/user/news/news",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false //
}
}
} }
], ],
"subpackages": [{ "subpackages": [{

@ -2,7 +2,7 @@
<view> <view>
<view class="input-box"> <view class="input-box">
<view class="icon search"></view> <view class="icon search"></view>
<input placeholder="搜索卡券" v-model="couponName" placeholder-style="color:#c0c0c0;" @input="toSearch()" /> <input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" @input="toSearch()" />
</view> </view>
<view class="swiper"> <view class="swiper">
@ -24,35 +24,21 @@
@click="switchid(item)" :class="[goodtyid == item.id ? 'fcor089 borbtom fontwig6' : '']" :key="index"> @click="switchid(item)" :class="[goodtyid == item.id ? 'fcor089 borbtom fontwig6' : '']" :key="index">
{{item.title}}</view> {{item.title}}</view>
</view> </view>
<view v-if="goodsList == '' " class="mart60 fotct font14 fcor666"> <view v-if="goodsList == '' " class="mart60 fotct font14 fcor666">
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
</view> </view>
<view class="width90 height110 mart5" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)"> <view class="width90 height110 mart10 backcorfff border-8r alijusstart" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)">
<image class="goodsimg flleft mart5" mode="widthFix" :src="imageUrl+row.couponImg"></image> <image class="goodsimg mart5" mode="widthFix" :src="imageUrl+row.couponImg"></image>
<view class="goodsli "> <view class="goodsli width65">
<view class="text2 fcor333 font14 fontwig6">{{row.couponName}}</view> <view class="text1 fcor333 font16 fontwig6">{{row.couponName}}</view>
<view class="goodsxg font12 fotct">限购{{row.limitNumber}}</view> <view class="goodsxg font12 fotct">限购{{row.limitNumber}}</view>
<view class="info mart10"> <view class="alijusstart mart10">
<view class="price" v-if="row.payType != 1"> <view class="price">
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image> {{ row.discountPrice*100}}
</view>
<view class="price" v-else>
{{ row.discountPrice}} {{ row.discountPrice}}
</view> </view>
<!-- v-if="product.discountPrice !== product.salesPrice" --> <view class="slogan margle10" v-if="row.discountPrice !== row.salesPrice">
<view class="slogan" v-if="row.discountPrice !== row.salesPrice"> <view>{{ row.salesPrice}}</view>
<!-- <image v-if="row.payType != 1" style="width: 15px;height: 15px;vertical-align: sub;"
src="../../../static/img/jfh.png">
</image>{{ row.salesPrice*100}} <text v-else></text>{{row.salesPrice}} -->
<view v-if="row.payType != 1">
<image style="width: 15px;height: 15px;vertical-align: sub;"
src="../../../static/img/jfh.png">
</image>{{ row.salesPrice*100}}
</view>
<view v-else>{{ row.salesPrice}}</view>
</view> </view>
</view> </view>
</view> </view>
@ -61,6 +47,7 @@
</view> </view>
</template> </template>
<script> <script>
import { import {
getCouponList, getCouponList,
@ -284,12 +271,15 @@
</script> </script>
<style lang="scss"> <style lang="scss">
page {
background-color: #f3f3f3;
}
.input-box { .input-box {
width: 90%; width: 90%;
margin-left: 5%; margin-left: 5%;
margin-top: 15px; margin-top: 15px;
height: 70rpx; height: 70rpx;
background-color: #f5f5f5; background-color: #ffffff;
border-radius: 10rpx; border-radius: 10rpx;
position: relative; position: relative;
display: flex; display: flex;
@ -374,30 +364,25 @@
} }
.goodsli { .goodsli {
margin-left: 100px; margin-left: 10px;
padding-top: 5px; padding-top: 5px;
} }
.goodsxg { .goodsxg {
margin-top: 5px; margin-top: 5px;
border: 1px solid #eb5823; border: 1px solid #3da7e7;
border-radius: 5px; border-radius: 5px;
color: #eb5823; color: #3da7e7;
width: 55px; width: 55px;
padding: 3px; padding: 3px;
} }
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
.price { .price {
color: #e65339; color: #e65339;
font-size: 30upx; font-size: 40upx;
font-weight: 600; font-weight: 600;
width: 50%; // width: 50%;
} }
.slogan { .slogan {
@ -406,5 +391,9 @@
font-size: 24upx; font-size: 24upx;
text-decoration: line-through; text-decoration: line-through;
} }
// }
.borbtom {
border-bottom: 2px solid #089bf5;
} }
</style> </style>

@ -1,15 +1,14 @@
<template> <template>
<view> <view>
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<view class="header"> <!-- <view class="header">
<!-- 头部-默认显示 -->
<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }"> <view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
<view class="back"> <view class="back">
<view class="icon xiangqian" @tap="back" v-if="showBack"></view> <view class="icon xiangqian" @tap="back" v-if="showBack"></view>
</view> </view>
<view class="middle"></view> <view class="middle"></view>
</view> </view>
</view> </view> -->
<!-- #endif --> <!-- #endif -->
<!-- 底部菜单 --> <!-- 底部菜单 -->
<view class="footer"> <view class="footer">
@ -29,39 +28,34 @@
</swiper> </swiper>
<view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view> <view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view>
</view> </view>
<view class="width100 height60 backcorlr"> <view class="width100 height60 backcorltop alijusstart">
<view class="flleft width70 fcorfff" v-if="goodsData[0].payType == 1"> <view class=" width70 fcorfff alijusstart font13 margle20 ">
<view class="font13 mart10 margle20"><text <!-- <view class=""> -->
class="font20 paddleft5">{{goodsData[0].discountPrice}}</text></view> <view class="font14">
<view class="font15 margle20">门市参考价: <text class="paddleft5" <text class="font20 paddleft5">{{goodsData[0].discountPrice}}</text>
style="text-decoration: line-through;">{{goodsData[0].salesPrice}}</text></view>
</view>
<view class="flleft width70 fcorfff" v-else>
<view class="font13 mart10 margle20">
<image style="width: 20px;height: 20px;vertical-align: sub;"
src="../../static/img/jfx.png">
</image><text class="font20 paddleft5">{{goodsData[0].discountPrice *100}}</text>
</view> </view>
<view class="font15 margle20">门市参考价: <image style="width: 20px;height: 20px;vertical-align: sub;" <view class="font14 width50 margle">价格: <text class="paddleft5"
src="../../static/img/jfh.png"> style="text-decoration: line-through;">{{goodsData[0].salesPrice}}</text></view>
</image><text class="paddleft5"
style="text-decoration: line-through;">{{goodsData[0].salesPrice *100}}</text></view>
</view> </view>
<view class="flright width30"> <view class=" width30">
<view class="xgnum">限购{{goodsData[0].limitNumber}}</view> <view class="xgnum">限购{{goodsData[0].limitNumber}}</view>
</view> </view>
</view> </view>
<!-- 标题 价格 --> <!-- 标题 价格 -->
<view class="info-box goods-info"> <view class="backcorfff border-r paddtop10 paddbotm10 mart10 width94">
<view class="font16 fcor333 fontwig6"> <view class="width96">
<view class="font12 height20 fotct" style="width: 75px;border: 1px solid #3da7e7;color: #3da7e7;">购买返积分
</view>
</view>
<view class="font16 fcor333 fontwig6 mart10 width96">
{{goodsData[0].couponName}} {{goodsData[0].couponName}}
</view> </view>
<view class="mart10 width100 font14 fcor999 height20"> <view class="width96 mart10 alijusstart">
<view class="width70 flleft">有效期至: {{goodsData[0].salesEndTime | formatDate('-')}}</view> <view class="fcorfff font12 height20"
<view class="width30 flright fotrt" v-if="goodsData[0].couponSource != 4">库存 : style="background-color: #3da7e7;border-radius: 20px;padding: 0px 5px;">嗨森逛
{{goodsData[0].stockCount}}
</view> </view>
<view class="width70 fotrt font14 fcor666">月销 500</view>
</view> </view>
</view> </view>
<!-- 服务-规则选择 --> <!-- 服务-规则选择 -->
@ -73,14 +67,14 @@
</view> </view>
</view> </view>
</view> </view>
<view class="height60 width100 backcorfff" v-if="goodsData[0].handselCouponList != '' " @click="showPopup()"> <!-- <view class="height60 width100 backcorfff" v-if="goodsData[0].handselCouponList != '' " @click="showPopup()">
<view class="width80p flleft" style="padding-left: 4%;line-height: 60px; "> <view class="width80p flleft" style="padding-left: 4%;line-height: 60px; ">
赠送卡券 赠送卡券
</view> </view>
<view class="width15 flright fotct"> <view class="width15 flright fotct">
<image class="jtcs" src="../../static/img/jt.png"></image> <image class="jtcs" src="../../static/img/jt.png"></image>
</view> </view>
</view> </view> -->
<!-- 详情 --> <!-- 详情 -->
<view class="description"> <view class="description">
<view class="title"> 商品详情 </view> <view class="title"> 商品详情 </view>
@ -90,7 +84,7 @@
</image> </image>
</view> </view>
</view> </view>
<wybPopup ref="popup" type="bottom" width="500" radius="6" :showCloseIcon="true"> <wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true">
<view class="fotct font18 fontwig6 fcor333 mart10 height30">赠送卡券</view> <view class="fotct font18 fontwig6 fcor333 mart10 height30">赠送卡券</view>
<view class="width92 height110 tccs mart10" v-for="product in goodsData[0].handselCouponList" <view class="width92 height110 tccs mart10" v-for="product in goodsData[0].handselCouponList"
:key="product.id"> :key="product.id">
@ -98,7 +92,8 @@
<image mode="widthFix" class="flleft" src="../../static/img/logo.png"></image> <image mode="widthFix" class="flleft" src="../../static/img/logo.png"></image>
<view class="tcrig"> <view class="tcrig">
<view class="font16 fontwig6 fcor333 text1">{{ product.highCouponModel.couponName }}</view> <view class="font16 fontwig6 fcor333 text1">{{ product.highCouponModel.couponName }}</view>
<view class="font13 fcor999 mart5">有效期至:{{product.highCouponModel.salesEndTime | formatDate('-')}}</view> <view class="font13 fcor999 mart5">有效期至:{{product.highCouponModel.salesEndTime | formatDate('-')}}
</view>
<view class="info mart5" v-if="product.highCouponModel.payType == 1"> <view class="info mart5" v-if="product.highCouponModel.payType == 1">
<view class="price">{{ product.highCouponModel.discountPrice}}</view> <view class="price">{{ product.highCouponModel.discountPrice}}</view>
<view class="slogan" <view class="slogan"
@ -107,14 +102,12 @@
</view> </view>
<view class="info mart5" v-else> <view class="info mart5" v-else>
<view class="price"> <view class="price">
<image style="width: 15px;height: 15px;vertical-align: sub;" <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfx.png">
src="../../static/img/jfx.png">
</image>{{ product.highCouponModel.discountPrice*100}} </image>{{ product.highCouponModel.discountPrice*100}}
</view> </view>
<view class="slogan" <view class="slogan"
v-if="product.highCouponModel.discountPrice !== product.highCouponModel.salesPrice"> v-if="product.highCouponModel.discountPrice !== product.highCouponModel.salesPrice">
<image style="width: 15px;height: 15px;vertical-align: sub;" <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfh.png">
src="../../static/img/jfh.png">
</image>{{ product.highCouponModel.salesPrice*100}} </image>{{ product.highCouponModel.salesPrice*100}}
</view> </view>
</view> </view>
@ -389,7 +382,7 @@
.xgnum { .xgnum {
background-color: #FFFFFF; background-color: #FFFFFF;
color: #ff722e; color: #6fbdee;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
font-size: 13px; font-size: 13px;
@ -397,7 +390,6 @@
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
border-radius: 15px; border-radius: 15px;
margin-top: 15px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
} }
@ -590,8 +582,10 @@
.swiper-box { .swiper-box {
position: relative; position: relative;
width: 100%; width: 100%;
swiper { swiper {
width: 100%; width: 100%;
swiper-item { swiper-item {
image { image {
width: 100%; width: 100%;
@ -622,21 +616,6 @@
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.goods-info {
.price {
font-size: 15px;
font-weight: 600;
color: #f47925;
}
.zprice {
text-decoration: line-through;
}
.title {
font-size: 30upx;
}
}
.spec { .spec {
.row { .row {
@ -691,69 +670,6 @@
} }
} }
.comments {
.row {
width: 100%;
height: 40upx;
display: flex;
align-items: center;
margin: 0 0 30upx 0;
.text {
font-size: 30upx;
}
.arrow {
font-size: 28upx;
position: absolute;
right: 4%;
color: #17e6a1;
.show {
display: flex;
align-items: center;
.icon {
color: #17e6a1;
}
}
}
}
.comment {
width: 100%;
.user-info {
width: 100%;
height: 40upx;
display: flex;
align-items: center;
.face {
width: 40upx;
height: 40upx;
margin-right: 8upx;
image {
width: 40upx;
height: 40upx;
border-radius: 100%;
}
}
.username {
font-size: 24upx;
color: #999;
}
}
.content {
margin-top: 10upx;
font-size: 26upx;
}
}
}
.description { .description {
.title { .title {
width: 100%; width: 100%;
@ -841,281 +757,4 @@
} }
} }
} }
.popup {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 20;
display: none;
.mask {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 21;
background-color: rgba(0, 0, 0, 0.6);
}
.layer {
position: fixed;
z-index: 22;
bottom: -70%;
width: 92%;
padding: 0 4%;
height: 70%;
border-radius: 20upx 20upx 0 0;
background-color: #fff;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.content {
width: 100%;
padding: 20upx 0;
}
.btn {
width: 100%;
height: 100upx;
.button {
width: 100%;
height: 80upx;
border-radius: 40upx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-color: #f47952;
font-size: 28upx;
}
}
}
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
}
}
&.hide {
display: block;
.mask {
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
&.service {
.row {
margin: 30upx 0;
.title {
font-size: 30upx;
margin: 10upx 0;
}
.description {
font-size: 28upx;
color: #999;
}
}
}
&.spec {
.title {
font-size: 30upx;
margin: 30upx 0;
}
.sp {
display: flex;
view {
font-size: 28upx;
padding: 5upx 20upx;
border-radius: 8upx;
margin: 0 30upx 20upx 0;
background-color: #f6f6f6;
&.on {
padding: 3upx 18upx;
border: solid 1upx #f47925;
}
}
}
.length {
margin-top: 30upx;
border-top: solid 1upx #aaa;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20upx;
.text {
font-size: 30upx;
}
.number {
display: flex;
justify-content: center;
align-items: center;
.input {
width: 80upx;
height: 60upx;
margin: 0 10upx;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
input {
width: 80upx;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 26upx;
}
}
.sub,
.add {
width: 60upx;
height: 60upx;
background-color: #f3f3f3;
border-radius: 5upx;
.icon {
font-size: 30upx;
width: 60upx;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
.share {
display: none;
&.show {
display: block;
.mask {
animation: showPopup 0.15s linear both;
}
.layer {
animation: showLayer 0.15s linear both;
}
}
&.hide {
display: block;
.mask {
animation: hidePopup 0.15s linear both;
}
.layer {
animation: hideLayer 0.15s linear both;
}
}
&.none {
display: none;
}
.mask {
background-color: rgba(0, 0, 0, .5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
z-index: 11;
}
.layer {
width: 92%;
position: fixed;
z-index: 12;
padding: 0 4%;
top: 100%;
background-color: rgba(255, 255, 255, 0.9);
.list {
width: 100%;
display: flex;
padding: 10upx 0 30upx 0;
.box {
width: 25%;
display: flex;
justify-content: center;
flex-wrap: wrap;
image {
width: 13.8vw;
height: 13.8vw;
}
.title {
margin-top: 10upx;
display: flex;
justify-content: center;
width: 100%;
font-size: 26upx;
}
}
}
.btn {
width: 100%;
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28upx;
border-top: solid 1upx #666666;
}
.h1 {
width: 100%;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 34upx;
}
}
}
</style> </style>

@ -1,58 +1,133 @@
<template> <template>
<view> <view>
<view class="status"></view>
<!-- 顶部菜单 -->
<view class="height80 backcorltop">
<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 class="height90 backcor008 viewbor"></view> <view class="swiper mart20">
<view class="swiper">
<view class="swiper-box"> <view class="swiper-box">
<swiper circular="true" autoplay="true" @change="swiperChange"> <swiper circular="true" autoplay="true" @change="swiperChange">
<swiper-item v-for="swiper in swiperList" :key="swiper.id"> <swiper-item v-for="swiper in swiperList" :key="swiper.id">
<image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image> <image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="indicator">
<view class="dots" v-for="(swiper, index) in swiperList"
:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
</view> </view>
</view> </view>
<!-- 加油专区 -->
<view class="width90 mart20 alijusstart" @click="goGoodsList(2)">
<view class="width70 font18 fcor333">
加油专区
</view> </view>
<!-- / --> <view class="width30 font14 fotrt fcor666">更多</view>
<view class="height60 backcorfff"></view>
<view class="category-list">
<view class="category" v-for="(row, index) in categoryList" :key="index" @tap="jumphuafei(row)">
<view class="img">
<image :src="imageUrl+row.imgData"></image>
</view> </view>
<view class="text">{{ row.title }}</view> <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>
<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>
<!-- 银联赠券 --> <view class="backcorfff spcarea">
<view style="width: 91%;margin-left: 5%;" v-if='productList.length != 0' @click="goGoodsList(3)"> <image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
<image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres"></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" 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">
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image>{{pro.discountPrice *100}}
</view> </view>
<!-- 惠享生活 -->
<view class="width90 mart20 alijusstart">
<view class="width70 font18 fcor333">
惠享生活
</view> </view>
</swiper-item> </view>
</swiper> <image class="width90 mart10" mode="widthFix" :src="imagewxUrl+imgadres1"></image>
<view class="width90 alijusstart mart10">
<image mode="widthFix" style="margin-top: 30px;width: 90%;margin-left: 5%;" v-for="(row, index) in homeCateList" <image src="../../../static/img/home/home6.png" mode="widthFix" class="width31"></image>
:key="index" @click="jumphuafei(row)" :src="imageUrl+row.imgData"></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>
<wybPopup ref="popup" type="center" height="850" width="600" radius="6" bgColor="" :showCloseIcon="true"> </view>
<!-- 天天好券 -->
<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> <image class="popImg" :src="imageUrl+imgadres3" @click="jumpWeb"></image>
</wybPopup> </wybPopup>
<image :src="imagewxUrl+imgadres4" mode="widthFix" class="h5xfimg" @click="playPhone"></image> <view class="height40"></view>
<view class="height60"></view>
</view> </view>
</template> </template>
@ -88,9 +163,10 @@
currentSwiper: 0, currentSwiper: 0,
imageUrl: app.globalData.imgUrl, imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres: 'headunion.png', imgadres: '/home/home1.png',
imgadres1: 'jbhed.png', imgadres1: '/home/home2.png',
imgadres2: 'jt.png', imgadres2: 'jt.png',
imgadres5: 'unionarea.png',
imgadres3: '', imgadres3: '',
imgadres4: 'cusservice.png', imgadres4: 'cusservice.png',
webUrl: '', webUrl: '',
@ -152,26 +228,10 @@
success(e) { success(e) {
app.globalData.token = e.data; app.globalData.token = e.data;
} }
// fail() {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// }
}) })
// if (!app.globalData.userInfo.phone) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
that.getCacheParam(); that.getCacheParam();
} }
}) })
// if (app.globalData.cityName != '') {
// this.city = app.globalData.cityName;
// this.getCouponListArea();
// this.getCouponListgold();
// }
}, },
onLoad() { onLoad() {
this.hqaddress(); this.hqaddress();
@ -214,6 +274,11 @@
}) })
}, },
test(item) {
uni.navigateTo({
url:'../../user/news/news'
})
},
// //
hqaddress() { hqaddress() {
let that = this; let that = this;
@ -451,49 +516,6 @@
uni.navigateTo({ uni.navigateTo({
url: item.ext1 url: item.ext1
}) })
// if (!app.globalData.userInfo) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
// if (!app.globalData.userInfo.phone) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
// if (item.title == '线') {
// uni.navigateTo({
// url: '/pages/goods/refuel/refuel'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '../../unionPay/recharge/recharge'
// })
// return;
// }
// if (item.title == '') {
// uni.navigateTo({
// url: '/pages/goods/goods-list/goods-list?id=3'
// })
// 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;
// }
}, },
// //
goGoodsList(item) { goGoodsList(item) {
@ -507,10 +529,20 @@
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
position: relative;
background-color: #F5F5F5; background-color: #F5F5F5;
} }
.status {
width: 100%;
height: 44px;
background-color: #6fbdee;
}
.popImg {
width: 100%;
height: 430px;
}
.h5xfimg { .h5xfimg {
width: 80rpx; width: 80rpx;
bottom: 140rpx; bottom: 140rpx;
@ -518,9 +550,11 @@
right: 40rpx; right: 40rpx;
} }
.popImg { .xfimg {
width: 300px; width: 80rpx;
height: 440px; bottom: 60rpx;
position: fixed;
right: 40rpx;
} }
@font-face { @font-face {
@ -568,7 +602,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;
background-color: #0083f5; background-color: #3da7e7;
top: 0; top: 0;
z-index: 10; z-index: 10;
@ -633,6 +667,7 @@
width: 60upx; width: 60upx;
height: 60upx; height: 60upx;
flex-shrink: 0; flex-shrink: 0;
margin-left: 5px;
display: flex; display: flex;
.icon { .icon {
@ -647,189 +682,19 @@
} }
} }
.place { //
background-color: #ffffff; button::after {
height: 100upx; border: none
/* #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: 20px;
.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;
}
}
}
}
} }
.category-list { .category-list {
width: 100%; width: 100%;
padding: 0 0 30upx 0;
background-color: #FFFFFF;
border-bottom: solid 2upx #f6f6f6;
display: flex; display: flex;
justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
.category { .category {
width: 25%; margin-top: 40upx;
margin-top: 50upx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -850,264 +715,74 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 24upx; 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 { .swiper {
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%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
}
.product-list { .swiper-box {
width: 92%; width: 92%;
padding: 0 4% 3vw 4%; height: 100px;
display: flex; overflow: hidden;
justify-content: space-between; border-radius: 15upx;
flex-wrap: wrap; box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
//ios
position: relative;
z-index: 1;
.product { swiper {
width: 48%; width: 100%;
border-radius: 20upx; height: 100px;
background-color: #fff;
margin: 0 0 15upx 0;
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
swiper-item {
image { image {
width: 100%; width: 100%;
border-radius: 20upx 20upx 0 0; height: 100px;
} }
.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%;
.price {
color: #e65339;
font-size: 30upx;
font-weight: 600;
} }
.slogan {
color: #807c87;
font-size: 24upx;
text-decoration: line-through;
} }
} }
}
}
}
//
.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 { .spcarea {
font-weight: 700; width: 31%;
font-size: 34rpx; margin-right: auto;
margin-left: auto;
border-radius: 10px 10px 0px 0px;
padding-bottom: 10px;
} }
.orange-title .ar { .message {
font-size: 28rpx; border: 1px solid #f1f1f1;
color: #777; height: 60px;
border-radius: 8px;
overflow: hidden;
position: relative; position: relative;
top: 10rpx; z-index: 1;
padding-top: 5px;
} padding-bottom: 5px;
.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 { swiper {
width: 100%; width: 100%;
height: 100%; height: 60px;
// border-Radius:10rpx;
}
.orange-content .swiper-item .subject { swiper-item {
font-size: 26rpx; view {
width: 100%; height: 20px;
color: #ff5836;
display: flex;
align-items: center;
}
.lookmore {
background-color: #e2e2e2;
text-align: center;
line-height: 140rpx;
}
.lookmore .moretext {
color: #777;
font-size: 28rpx;
} }
//
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;
} }
.Popup { .stus {
.logo-auth { width: 5px;
z-index: -1; height: 5px;
position: absolute; background-color: red;
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%; border-radius: 50%;
background: #fff;
}
image {
height: 80rpx;
margin-top: -54rpx;
}
}
.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> </style>

@ -1,8 +1,7 @@
<template> <template>
<view> <view>
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<!-- 占位 --> <view class="status"></view>
<view v-if="showHeader" class="place"></view>
<!-- #endif --> <!-- #endif -->
<view class="user"> <view class="user">
<!-- 头像 --> <!-- 头像 -->
@ -10,119 +9,142 @@
<image :src="imagewxUrl+imgadres" v-if="!user.headerImg"></image> <image :src="imagewxUrl+imgadres" v-if="!user.headerImg"></image>
<image :src="user.headerImg" v-else></image> <image :src="user.headerImg" v-else></image>
</view> </view>
<!-- 昵称,个性签名 --> <!-- 昵称 -->
<view class="right"> <view class="right">
<view class="username" v-if="!user.name" @click="jumplogin">请授权登录</view> <view class="username">{{user.name}}</view>
<view class="username" v-else>{{user.name}}</view> <view class="font14 fcor333">{{userphone}}</view>
<view class="font14 fcorfff" v-if="!user.gold">积分: 0</view> </view>
<view class="font14 fcorfff" v-else>积分: {{user.gold}} </view> </view>
<!-- <view class="signature" @tap="toSetting">{{user.signature}}</view> --> <!-- 优惠券卡券 -->
</view> <view class="headcoun width100">
<!-- 二维码按钮 --> <view class="height80 alijus width92 border-8r backcorfff">
<!-- #ifdef MP --> <view class="width45 fotct" @click="jumppage(5)">
<button class="erweima fotct aliitem font14" v-if="user.phone == null" open-type="getPhoneNumber" <view class="width100 font12 fcor333"><text class="font20 marglerig">{{textnum}} </text> </view>
@getphonenumber="getPhoneNumber"> <view class="width100 font18 fcor333 mart5">卡券</view>
<image src="../../../static/img/jingbi.png"></image> 充值积分 </view>
</button> <view style="width: 1px;height: 50px;background-color: #f6f6f6;">
<button class="erweima fotct aliitem font14" v-else @click="toDeposit"> </view>
<image src="../../../static/img/jingbi.png"></image> 充值积分 <view class="width45 fotct" @click="jumppage(6)">
</button> <view class="width100 font12 fcor333"><text class="font20 marglerig">{{textSend}} </text> </view>
<!-- #endif --> <view class="width100 font18 fcor333 mart5">优惠券</view>
<!-- #ifdef H5 --> </view>
<button class="erweima fotct aliitem font14" v-if="user.phone == null" @click="jumplogin">
<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>
</view>
<!-- 订单-余额 --> <!-- 订单-余额 -->
<view class="order"> <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="list">
<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)"> <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> :text="therrNum" type="error" size="normal"></uni-badge>
<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="img">
<view class="icon" :class="row.icon"></view> <image :src="row.icon" class="icon40" mode="widthFix"></image>
</view> </view>
<view class="text">{{row.text}}</view> <view class="text mart10">{{row.text}}</view>
</view> </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>
<view class="topay">
<!-- 话费充值 --> 去支付
<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>
<view class="text">{{row.text}}</view>
</view> </view>
</swiper-item>
</swiper>
</view> </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> <view class="order">
<uni-badge style="width: 20px;position: absolute; right: 30%;" <view class="title width94">
v-if="row.text == '我的优惠券' && textSend " :text="textSend" type="error" size="normal"></uni-badge> <view class="width70 fontwig6 alijusstart">我的资产
<view class="img"> <image mode="widthFix" class="icon30" v-if="assetsstu == 2" @click="updatestu(2)"
<image :src="imagewxUrl+row.img"></image> 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>
<view class="text">{{row.text}}</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>
<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>
<!-- 我的推广 --> <view class="width31">
<!-- <view class="toolbar" style="margin-top: 20px;"> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
<view class="title">推广中心</view> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
<view class="list"> <view class="fontspec font14 fcor333 mart5">油卡余额</view>
<view class="box" v-for="(row,index) in mytgbarList" :key="index" @tap="toPage(row.url,row.text)">
<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>
<view class="text" v-if="row.text != '客服' ">{{row.text}}</view> <view class="width31">
<button open-type="contact" style="background-color: transparent;" class="img" show-message-card <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
session-from send-message-path send-message-title v-if="row.text == '客服' "> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
<image :src="imagewxUrl+row.img"></image> <view class="fontspec font14 fcor333 mart5">工会卡余额</view>
</button> </view>
<view class="text" v-if="row.text == '客服' ">{{row.text}}</view> </view>
</view>
<!-- 商务中心 -->
<view class="order">
<view class="title width94">
<view class="width70 fontwig6">商务中心</view>
</view> </view>
<view class="width90 alijusstart 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>
<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> -->
<view class="width30w" @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="list">
<view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)"> <view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)">
<view class="img"> <view class="img" v-if="row.text != '客服' ">
<image :src="row.img" v-if="row.type != 1"></image> <image :src="row.img" class="icon40" mode="widthFix"></image>
<image :src="imagewxUrl+row.img" v-else></image>
</view> </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>
</view> </view>
<!-- 占位 -->
<view class="place-bottom"></view> <view class="place-bottom"></view>
</view> </view>
</template> </template>
@ -142,91 +164,36 @@
isfirst: true, isfirst: true,
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres: 'head.png', imgadres: 'head.png',
headerPosition: "fixed",
textnum: '', textnum: '',
textSend: '', textSend: '',
therrNum: '', therrNum: '',
rechargeOrderNum:'', // rechargeOrderNum:'', //
headerTop: null, whetherCheckNum: '', //
statusTop: null, orderPayNum: '', //
showHeader: true,
//, //,
user: "", user: "",
// //
orderList: [{ orderList: [{
text: '待支付', text: '待支付',
icon: "fukuan" icon: "../../../static/img/user/user1.png"
}, },
{ {
text: '已支付', text: '已支付',
icon: "fahuo" icon: "../../../static/img/user/user2.png"
}, },
{ {
text: '已完成', text: '已完成',
icon: "shouhuo" icon: "../../../static/img/user/user3.png"
}, { }, {
text: '已退款', text: '已退款',
icon: "tuihuo" icon: "../../../static/img/user/user4.png"
}, {
text: '已取消',
icon: "pingjia"
} }
], ],
huafeiList: [{
text: '待支付',
icon: "fukuan"
},
{
text: '已支付',
icon: "fahuo"
},
{
text: '已完成',
icon: "shouhuo"
}, {
text: '已取消',
icon: "pingjia"
}, {
text: '已退款',
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'
},
{
url: '/pages/user/myPromotion/myPromotion',
text: '我的推广',
img: 'user/extension.png'
}
// ,
// {
// url: '/pages/user/generatePoster/generatePoster',
// text: '',
// img: 'user/poster.png'
// }
],
// //
czList: '', czList: '',
nopaylist: [1, 2, 3, 4, 5],
assetsstu: 2,
userphone:'' //
} }
}, },
//page.json "enablePullDownRefresh": true //page.json "enablePullDownRefresh": true
@ -235,18 +202,10 @@
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}, 1000); }, 1000);
}, },
onPageScroll(e) {
//iOS
this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
this.headerTop = e.scrollTop >= 0 ? null : 0;
this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
},
onLoad() { onLoad() {
this.statusHeight = 0; if (!app.globalData.userInfo) {
// #ifdef H5 this.findUser()
this.showHeader = true; }
// this.statusHeight = plus.navigator.getStatusbarHeight();
// #endif
}, },
onReady() { onReady() {
//, //,
@ -263,43 +222,37 @@
} }
if (!app.globalData.userInfo.isSetPayPwd) { if (!app.globalData.userInfo.isSetPayPwd) {
this.czList = [{ this.czList = [{
url: '../../../subPages/cardsList/cardsList', url: '/pages/goods/recording/recording',
text: '卡包', text: '积分记录',
img: '../../../static/img/ghkpay.png', img: '../../../static/img/ghkpay.png'
type: 2
}, {
url: '',
text: '客服',
img: 'user/kefu.png',
type: 1
}, },
{ {
url: '../../login/updatePas/updatePas', url: '../../login/updatePas/updatePas',
text: '设置积分密码', text: '支付密码',
img: '../../../static/img/pas.png', img: '../../../static/img/user/user11.png'
type: 2 }, {
}, url: '',
text: '客服',
img: '../../../static/img/user/user13.png'
}
] ]
return; return;
} }
// '../../user/unionCard/unionCard'
this.czList = [{ this.czList = [{
url: '../../../subPages/cardsList/cardsList', url: '../../../subPages/cardsList/cardsList',
text: '卡包', text: '卡包',
img: '../../../static/img/ghkpay.png', img: '../../../static/img/ghkpay.png'
type: 2
}, {
url: '',
text: '客服',
img: 'user/kefu.png',
type: 1
}, },
{ {
url: '../../login/updatePas/resetPas', url: '../../login/updatePas/resetPas',
text: '修改积分密码', text: '支付密码',
img: '../../../static/img/pas.png', img: '../../../static/img/user/user11.png'
type: 2
}, },
{
url: '',
text: '客服',
img: '../../../static/img/user/user13.png'
}
] ]
}, },
methods: { methods: {
@ -312,7 +265,10 @@
this.textnum = res.return_data.unusedCouponNum; this.textnum = res.return_data.unusedCouponNum;
this.textSend = res.return_data.unusedDiscount; this.textSend = res.return_data.unusedDiscount;
this.therrNum = res.return_data.unpaid; 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({ uni.setStorage({
key: "user", key: "user",
data: res.return_data data: res.return_data
@ -341,6 +297,53 @@
} }
}); });
}, },
//
geTel(tel) {
var reg = /^(\d{3})\d{4}(\d{4})$/;
this.userphone = tel.replace(reg, "$1****$2");
},
//
updatestu(item) {
if (item == 1) {
this.assetsstu = 2;
}
if (item == 2) {
this.assetsstu = 1;
}
},
// 广
jumppage(item) {
// if (item == 1) {
// uni.navigateTo({
// url: '../../login/login?id=1'
// })
// }
// if (item == 2) {
// uni.navigateTo({
// 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'
})
}
},
// //
jumplogin() { jumplogin() {
uni.navigateTo({ uni.navigateTo({
@ -419,10 +422,6 @@
url: url url: url
}) })
} else { } else {
// uni.showModal({
// title: '',
// content: '4006780738'
// })
this.playPhone(); this.playPhone();
} }
@ -453,124 +452,45 @@
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
position: relative; background-color: #f5f5f5;
background-color: #fff;
} }
.status { .status {
width: 100%; width: 100%;
height: 0; height: 44px;
position: fixed; background-color: #6fbdee;
z-index: 10;
background-color: #0083f5;
top: 0;
/* #ifdef APP-PLUS */
height: var(--status-bar-height); //
/* #endif */
} }
.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;
}
}
}
button::after { button::after {
border: none border: none
} }
.status { .headcoun {
width: 100%; background: linear-gradient(to bottom, #e8eff4, #f5f5f5);
height: 0; height: 100px;
position: fixed;
z-index: 10;
background-color: #0083f5;
top: 0;
/* #ifdef APP-PLUS */
height: var(--status-bar-height); //
/* #endif */
} }
.header { .topay {
width: 92%; width: 70px;
padding: 0 4%; height: 25px;
height: 100upx; font-size: 14px;
display: flex; text-align: center;
justify-content: flex-end; line-height: 25px;
align-items: center; border-radius: 20px;
position: fixed; border: 1px solid #009DFF;
top: 0; color: #009DFF;
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;
}
}
} }
.place { .place-bottom {
background-color: #0083f5; height: 200upx;
padding-left: 20px;
padding-right: 20px;
text-align: right;
height: 50upx;
/* #ifdef APP-PLUS */
margin-top: var(--status-bar-height);
/* #endif */
image {
width: 30px;
height: 30px;
} }
swiper {
height: 60px !important;
} }
.place-bottom { swiper-item {
height: 300upx; height: 60px !important;
} }
.user { .user {
@ -579,8 +499,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
// position: relative; // position: relative;
background-color: #0083f5;
padding-bottom: 40rpx; padding-bottom: 40rpx;
background: linear-gradient(to bottom, #6fbdee, #e8eff4);
.left { .left {
width: 20vw; width: 20vw;
@ -603,7 +523,7 @@
.username { .username {
font-size: 36upx; font-size: 36upx;
color: #fff; color: #333333;
} }
.signature { .signature {
@ -639,9 +559,9 @@
.order { .order {
.title { .title {
padding-top: 10upx; padding-top: 10px;
margin: 0 0 10upx 3%; padding-bottom: 10px;
font-size: 30upx; font-size: 36upx;
height: 80upx; height: 80upx;
display: flex; display: flex;
align-items: center; align-items: center;
@ -649,7 +569,7 @@
width: 92%; width: 92%;
margin: 30rpx 4% 30rpx 4%; margin: 30rpx 4% 30rpx 4%;
padding: 0rpx 0% 20rpx 0%; padding: 0rpx 0% 40rpx 0%;
background-color: #fff; background-color: #fff;
box-shadow: 0rpx 0rpx 25rpx rgba(0, 0, 0, 0.1); box-shadow: 0rpx 0rpx 25rpx rgba(0, 0, 0, 0.1);
border-radius: 15rpx; border-radius: 15rpx;
@ -665,11 +585,6 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.icon {
font-size: 50upx;
color: #464646;
}
} }
.text { .text {
@ -744,42 +659,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 { .toolbar {
width: 92%; width: 92%;
margin: 0 4% 0 4%; margin: 0 4% 0 4%;

@ -1,33 +1,43 @@
<template> <template>
<view> <view>
<view class="tabr" :style="{top:headerTop}"> <view class="tabr" :style="{top:headerTop}">
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">可用({{couponcout}})</view> <!-- ({{couponcout}}) -->
<view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已失效</view> <view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">待使用</view>
<view class="border" :class="typeClass"></view> <view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已使用</view>
<view :class="{on:typeClass=='noinvalid'}" @tap="switchType('noinvalid')">已过期</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>
<view class="place"></view> <view class="place"></view>
<view class="list"> <view class="list">
<!-- 优惠券列表 --> <!-- 优惠券列表 -->
<view class="sub-list valid" :class="subState"> <view class="sub-list" v-if="typeClass == 'valid'">
<view class="tis" v-if="couponValidList.length==0"> <view class="tis" v-if="couponValidList.length==0">
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
</view> </view>
<view class="row" v-for="(row,index) in couponValidList" :key="index" @click="jumpcoupons(row)"> <view class="row" v-for="(row,index) in couponValidList" :key="index" @click="jumpcoupons(row)">
<!-- 删除按钮 -->
<view class="menu" @tap.stop="deleteCoupon(row.id,couponValidList)">
<view class="icon shanchu"></view>
</view>
<!-- content --> <!-- content -->
<view class="carrier"> <view class="carrier">
<view class="left"> <view class="left">
<view class="title"> <view class="alijusstart" style="margin-top: -7px;">
{{row.highDiscount.discountName}} <view class="alijus font12 fotct fcorfff"
style="width: 70px;height: 20px;background-color: #3ecbb0;margin-right: 2px;">
<image src="../../../static/img/user/user15.png" mode="widthFix" class="icon12">
</image>
折扣券
</view>
</view>
<view class="title alijusstart">
<text class="height20 fotct fcorfff font11"
style="width: 50px;background-color: #347edd;border-radius: 20px;">话费券</text>
<view class="text1 width70">{{row.highDiscount.discountName}}</view>
</view> </view>
<view class="term"> <view class="term">
截止时间:{{row.useEndTime | formatDate('-')}} 有效期:{{row.useEndTime | formatDate('-')}}
</view> </view>
<view class="gap-top"></view>
<view class="gap-bottom"></view>
</view> </view>
<view class="right"> <view class="right">
<view class="ticket"> <view class="ticket">
@ -54,15 +64,12 @@
</view> </view>
</view> </view>
</view> </view>
<view class="sub-list invalid" :class="subState"> <!-- //使 -->
<view class="sub-list" v-if="typeClass == 'invalid'">
<view class="tis" v-if="couponinvalidList.length==0"> <view class="tis" v-if="couponinvalidList.length==0">
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
</view> </view>
<view class="row" v-for="(row,index) in couponinvalidList" :key="index"> <view class="row" v-for="(row,index) in couponinvalidList" :key="index">
<!-- 删除按钮 -->
<view class="menu" @tap.stop="deleteCoupon(row.id,couponinvalidList)">
<view class="icon shanchu"></view>
</view>
<!-- content --> <!-- content -->
<view class="carrier"> <view class="carrier">
<view class="left"> <view class="left">
@ -70,13 +77,43 @@
{{row.highDiscount.discountName}} {{row.highDiscount.discountName}}
</view> </view>
<view class="term"> <view class="term">
截止时间:{{row.highDiscount.salesEndTime | formatDate('-')}} 使用时间:{{row.useTime | formatDate('-')}}
</view>
</view>
<view class="right invalid">
<view class="ticket">
<view class="num">
{{row.highDiscount.discountPrice}}
</view>
<view class="unit">
</view>
</view>
<view class="criteria">
{{row.highDiscount.discountName}}
</view>
<view class="use">
已使用
</view>
</view>
</view> </view>
<view class="icon shixiao">
</view> </view>
<view class="gap-top"></view> </view>
<view class="gap-bottom"></view> <!-- 已过期 -->
<view class="sub-list" v-if="typeClass == 'noinvalid'">
<view class="tis" v-if="couponnoinvalidList.length==0">
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
</view>
<view class="row" v-for="(row,index) in couponnoinvalidList" :key="index">
<!-- content -->
<view class="carrier">
<view class="left">
<view class="title">
{{row.highDiscount.discountName}}
</view>
<view class="term">
过期时间:{{row.useEndTime | formatDate('-')}}
</view>
</view> </view>
<view class="right invalid"> <view class="right invalid">
<view class="ticket"> <view class="ticket">
@ -91,7 +128,7 @@
{{row.highDiscount.discountName}} {{row.highDiscount.discountName}}
</view> </view>
<view class="use"> <view class="use">
失效 过期
</view> </view>
</view> </view>
</view> </view>
@ -112,6 +149,7 @@
return { return {
couponValidList: [], couponValidList: [],
couponinvalidList: [], couponinvalidList: [],
couponnoinvalidList: [],
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png', imgadres: 'noorder.png',
headerTop: 0, headerTop: 0,
@ -125,7 +163,9 @@
pageSize: 10, pageSize: 10,
isNoMoreData: false, isNoMoreData: false,
loadingText: '', loadingText: '',
couponcout:0 couponcout: 0,
orderTyplist: ['全部订单', '在线加油', '肯德基', '星巴克', '话费充值', '卡券订单'], //
ordertypeid: 1 //id
} }
}, },
onPageScroll(e) { onPageScroll(e) {
@ -172,8 +212,10 @@
onReachBottom() { onReachBottom() {
if (this.typeClass == 'valid') { if (this.typeClass == 'valid') {
this.getUserDiscountList(1); this.getUserDiscountList(1);
} else { } else if (this.typeClass == 'invalid') {
this.getUserDiscountList(2); this.getUserDiscountList(2);
} else {
this.getUserDiscountList(0);
} }
}, },
methods: { methods: {
@ -203,13 +245,16 @@
if (this.typeClass == 'valid') { if (this.typeClass == 'valid') {
this.couponValidList = this.couponValidList.concat(res.return_data.list); this.couponValidList = this.couponValidList.concat(res.return_data.list);
this.couponcout = res.return_data.total; this.couponcout = res.return_data.total;
} else { } else if (this.typeClass == 'invalid') {
this.couponinvalidList = this.couponinvalidList.concat(res.return_data.list); this.couponinvalidList = this.couponinvalidList.concat(res.return_data.list);
} else {
this.couponnoinvalidList = this.couponnoinvalidList.concat(res.return_data.list);
} }
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else { } else {
this.couponValidList = []; this.couponValidList = [];
this.couponinvalidList = []; this.couponinvalidList = [];
this.couponnoinvalidList = [];
uni.hideLoading() uni.hideLoading()
} }
}) })
@ -218,7 +263,7 @@
jumpcoupons(e) { jumpcoupons(e) {
if (e.highDiscount.useScope == 3) { if (e.highDiscount.useScope == 3) {
uni.navigateTo({ uni.navigateTo({
url: '../../unionPay/recharge/recharge' url: '../../../subPages/recharge/recharge'
}) })
} else if (e.highDiscount.useScope == 4) { } else if (e.highDiscount.useScope == 4) {
app.globalData.distinguishid = 1; app.globalData.distinguishid = 1;
@ -255,99 +300,74 @@
}) })
this.typeClass = type; this.typeClass = type;
this.subState = this.typeClass == '' ? '' : 'show' + type; this.subState = this.typeClass == '' ? '' : 'show' + type;
setTimeout(() => { // setTimeout(() => {
this.oldIndex = null; // this.oldIndex = null;
this.theIndex = null; // this.theIndex = null;
this.subState = this.typeClass == 'valid' ? '' : this.subState; // this.subState = this.typeClass == 'valid' ? '' : this.subState;
}, 200) // }, 200)
if (this.typeClass == 'valid') { if (this.typeClass == 'valid') {
this.pageNum = 1; this.pageNum = 1;
this.couponValidList = [] this.couponValidList = []
this.isNoMoreData = false; this.isNoMoreData = false;
this.getUserDiscountList(1); this.getUserDiscountList(1);
} else { } else if (this.typeClass == 'invalid') {
this.pageNum = 1; this.pageNum = 1;
this.couponinvalidList = [] this.couponinvalidList = []
this.isNoMoreData = false; this.isNoMoreData = false;
this.getUserDiscountList(2); this.getUserDiscountList(2);
} else {
this.pageNum = 1;
this.couponnoinvalidList = []
this.isNoMoreData = false;
this.getUserDiscountList(0);
} }
},
//-begin
touchStart(index, event) {
//
if (event.touches.length > 1) {
this.isStop = true;
return;
}
this.oldIndex = this.theIndex;
this.theIndex = null;
//
this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
},
touchMove(index, event) {
//
if (event.touches.length > 1) {
this.isStop = true;
return;
} }
let moveX = event.touches[0].pageX - this.initXY[0];
let moveY = event.touches[0].pageY - this.initXY[1];
if (this.isStop || Math.abs(moveX) < 5) {
return;
} }
if (Math.abs(moveY) > Math.abs(moveX)) {
// -
this.isStop = true;
return;
} }
</script>
<style lang="scss">
view {
display: flex;
flex-wrap: wrap;
if (moveX < 0) {
this.theIndex = index;
this.isStop = true;
} else if (moveX > 0) {
if (this.theIndex != null && this.oldIndex == this.theIndex) {
this.oldIndex = index;
this.theIndex = null;
this.isStop = true;
setTimeout(() => {
this.oldIndex = null;
}, 150)
}
} }
},
touchEnd(index, $event) { .srollview {
// position: fixed;
this.isStop = false; z-index: 9999;
}, top: 45px;
height: 60px;
// background-color: #ffffff;
deleteCoupon(id, List) { display: flex;
let len = List.length; flex-direction: row;
for (let i = 0; i < len; i++) { flex-wrap: nowrap;
if (id == List[i].id) { white-space: nowrap;
List.splice(i, 1);
break; .conent {
} height: 24px;
line-height: 24px;
margin-top: 15px;
padding-left: 10px;
font-size: 10px;
padding-right: 10px;
border-radius: 20px;
margin-left: 15px;
display: inline-flex;
flex-direction: column;
text-align: center;
position: relative;
} }
this.oldIndex = null;
this.theIndex = null;
},
discard() {
//
} }
.frontconent {
background-color: #eeeeee;
color: #333333;
} }
}
</script>
<style lang="scss">
view {
display: flex;
flex-wrap: wrap;
.activeconent {
background-color: #e8eff4;
color: #009DFF;
} }
page { page {
@ -361,7 +381,7 @@
.place { .place {
width: 100%; width: 100%;
height: 95upx; height: 110px;
} }
.tabr { .tabr {
@ -375,7 +395,7 @@
z-index: 10; z-index: 10;
view { view {
width: 50%; width: 33.3%;
height: 90upx; height: 90upx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -385,16 +405,7 @@
.on { .on {
color: #0083f5; color: #0083f5;
} border-bottom: 2px solid #0083f5;
.border {
height: 4upx;
background-color: #0083f5;
transition: all .3s ease-out;
&.invalid {
transform: translate3d(100%, 0, 0);
}
} }
} }
@ -425,6 +436,16 @@
} }
} }
@keyframes shownoInvalid {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
.sub-list { .sub-list {
&.invalid { &.invalid {
position: absolute; position: absolute;
@ -443,6 +464,11 @@
animation: showInvalid 0.20s linear both; animation: showInvalid 0.20s linear both;
} }
&.shownoinvalid {
display: flex;
animation: shownoInvalid 0.20s linear both;
}
width: 100%; width: 100%;
padding: 20upx 0 120upx 0; padding: 20upx 0 120upx 0;
@ -456,7 +482,7 @@
.row { .row {
width: 92%; width: 92%;
height: 24vw; height: 27vw;
margin: 20upx auto 10upx auto; margin: 20upx auto 10upx auto;
border-radius: 8upx; border-radius: 8upx;
// box-shadow: 0upx 0 10upx rgba(0,0,0,0.1); // box-shadow: 0upx 0 10upx rgba(0,0,0,0.1);
@ -512,7 +538,6 @@
animation: closeMenu 0.15s linear both; animation: closeMenu 0.15s linear both;
} }
background-color: #fff;
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 0 0; padding: 0 0;
@ -521,18 +546,20 @@
flex-wrap: nowrap; flex-wrap: nowrap;
.left { .left {
width: 100%; background-color: #fff;
width: 72%;
background-image: radial-gradient(6px at top right, #f5f5f5 50px, #ffffff);
.title { .title {
padding-top: 3vw;
width: 90%; width: 90%;
margin: 0 5%; margin: 0 5%;
font-size: 36upx; font-size: 36upx;
} }
.term { .term {
width: 90%; width: 95%;
margin: 0 5%; background-image: radial-gradient(6px at bottom right, #f5f5f5 50px, #ffffff);
margin-left: 5%;
font-size: 26upx; font-size: 26upx;
color: #999; color: #999;
} }
@ -570,7 +597,8 @@
flex-shrink: 0; flex-shrink: 0;
width: 28%; width: 28%;
color: #fff; color: #fff;
background: linear-gradient(to right, #ec625c, #ee827f); background: linear-gradient(to right, #66c4ff, #009DFF);
background-image: radial-gradient(6px at bottom left, #f5f5f5 50px, #009DFF);
&.invalid { &.invalid {
background: linear-gradient(to right, #aaa, #999); background: linear-gradient(to right, #aaa, #999);
@ -588,18 +616,18 @@
} }
.ticket { .ticket {
background-image: radial-gradient(6px at top left, #f5f5f5 50px, #009DFF);
padding-top: 1vw; padding-top: 1vw;
justify-content: center; justify-content: center;
align-items: baseline; align-items: baseline;
height: 6vw;
.num { .num {
font-size: 42upx; font-size: 60upx;
font-weight: 600; font-weight: 600;
} }
.unit { .unit {
font-size: 24upx; font-size: 28upx;
} }
} }
@ -610,18 +638,19 @@
} }
.use { .use {
width: 50%; width: 70%;
height: 40upx; height: 60rpx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 24upx; font-size: 28rpx;
background-color: #fff; background-color: #fff;
color: #ee827f; color: #009DFF;
border-radius: 40upx; border-radius: 40rpx;
padding: 0 10upx; padding: 0 10rpx;
} }
} }
} }
} }
} }
</style> </style>

@ -0,0 +1,120 @@
<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="mart10 height70"></view>
<!-- 内容 -->
<view class="newscont width90 border-8r backcorfff mart20" v-for="(item,index) in newsTyplist" :key="index">
<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
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
page {
background-color: #f3f3f3;
}
.srollview {
position: fixed;
top: 0px;
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: 11px;
padding-right: 10px;
margin-left: 15px;
display: inline-flex;
flex-direction: column;
text-align: center;
position: relative;
}
}
.frontconent {
background-color: #eeeeee;
color: #333333;
}
.activeconent {
background-color: #e8eff4;
color: #009DFF;
}
.newscont {
padding-top: 10px;
padding-bottom: 10px;
}
</style>

@ -1,16 +1,131 @@
<template> <template>
<view> <view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 1">待支付</view> <!-- 待支付 -->
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 2">已支付</view> <view class="width100 paddtop10 paddbotm10 backcorfff fotct" v-if="recinfo.orderStatus == 1">
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 3">已完成</view> <view class="height20"></view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 4">已退款</view> <view class="headstu font24 fontwig6">
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 5">已取消</view> {{countdownm}}:{{countdowns}}
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 6">退款中</view> </view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 7">退款失败</view> <view class="width100 font13 fcor666 mart10">若超时未支付,订单将自动取消</view>
<view class="stubtn mart15" style="background-color: #0F8FE8;" @click="jumppay()">立即支付
</view>
</view>
<view class="width100 headsbg paddbotm15" v-if="recinfo.orderStatus != 1">
<view class="width100 font18 fcorfff fotct height40p">
{{typeText[recinfo.orderStatus]}}
</view>
<view class="width90 fcorfff font18 mart10">实付:{{recinfo.payRealPrice}}</view>
<view class="width90 fcorfff font14 mart10">{{recinfo.createTime | formatDate('-')}}</view>
<view class="width90 mart20" style="border-bottom: 1px dashed #7BC1F5;"></view>
<view class="width90 mart20 alijusnostart font12">
<view class="paddleft5 paddtright5 border-r" style="border: 1px solid #5BB5F3;color: #5BB5F3;">本单优惠
</view>
<view class="fcorfff margle">立减-¥8.15</view>
</view>
<view class="width90 mart20 paddleft10 backcorfff height50 fcor333 font15 border-8r">感谢您信任嗨森逛欢迎再次消费</view>
</view>
<!-- 订单信息 -->
<view class="width90 backcorfff border-8r mart10 paddbotm15">
<view class="paddtop20 font22 width94 fcor333">商家/订单信息</view>
<view class="mart15 alijusstart font14 width94">
<view class="width20 fcor777">交易单号</view>
<view class="width80p fotrt fcor333">HF202220823829374671902</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width20 fcor777">流水号</view>
<view class="width80p fotrt fcor333">433423423425123123123211</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width20 fcor777">下单时间</view>
<view class="width80p fotrt fcor333">2022-09-06 10:36:38</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width20 fcor777">油站名称</view>
<view class="width80p fotrt fcor333">延长壳牌南充亚华加油站</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width20 fcor777">支付方式</view>
<view class="width80p fotrt fcor333">微信</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width20 fcor777">地址</view>
<view class="width80p fotrt fcor333 text1">四川省南充市顺庆区金鱼领路541号1</view>
</view>
</view>
<!-- 商品信息 -->
<view class="width90 backcorfff border-8r mart10 paddbotm15">
<view class="paddtop20 font22 width94 fcor333">商品信息</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">商品名称</view>
<view class="width50 fotrt fcor333">100元电信话费充值</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">商品单价</view>
<view class="width50 fotrt fcor333">¥99.00</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">商品数量</view>
<view class="width50 fotrt fcor333">2</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">商品总金额</view>
<view class="width50 fotrt fcor333">¥188.00</view>
</view>
<!-- <view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">油号/枪号</view>
<view class="width50 fotrt fcor333">92#/25号枪</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">油站单价</view>
<view class="width50 fotrt fcor333">¥7.14/L</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width70 fcor777">加油升数<text class="font11 fcor999">实际升数以油站加油机为准</text> </view>
<view class="width30 fotrt fcor333">44.12</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">加油金额</view>
<view class="width50 fotrt fcor333">¥315.00</view>
</view> -->
</view>
<!-- 支付信息 -->
<view class="width90 backcorfff mart10 concont">
<view class="paddtop20 font22 width94 fcor333">商品信息</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">加油优惠</view>
<view class="width50 fotrt fcoreb5">-¥2.86</view>
</view>
<view class="mart15 alijusstart font14 width94">
<view class="width50 fcor777">积分抵扣</view>
<view class="width50 fotrt fcoreb5">-¥1.86</view>
</view>
<view class="width95 height20 borderleft alijusnostart">
<view style="width: 5%;"></view>
<view class="width95" style="border-bottom: 1px dashed #bebcbc;"></view>
</view>
</view>
<view class="gooddes width90 backcorfff marb20">
<view class="width90w height20 bordertopleft alijusnostart">
</view>
<view class="width90 height50 fotrt fcor777 font16 paddbotm10">
加油实付 <text class="font24 fcor333 margle">{{recinfo.payRealPrice}}</text>
</view>
</view>
<!-- 购买商品列表 --> <!-- 购买商品列表 -->
<view class="buy-list" v-for="rec in recinfo.highChildOrderList" :key="rec.id" <!-- <view class="buy-list" v-for="rec in recinfo.highChildOrderList" :key="rec.id"
@click="toGoods(rec.goodsId,rec.goodsType)"> @click="toGoods(rec.goodsId,rec.goodsType)">
<!-- v-for="(row,index) in buylist" :key="index" -->
<view class="row"> <view class="row">
<view class="goods-info"> <view class="goods-info">
<view class="img"> <view class="img">
@ -36,9 +151,9 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view> -->
<!-- 提示-备注 --> <!-- 提示-备注 -->
<view class="order"> <!-- <view class="order">
<view class="row" v-if="recinfo.orderNo"> <view class="row" v-if="recinfo.orderNo">
<view class="left"> <view class="left">
订单流水号 : 订单流水号 :
@ -63,6 +178,47 @@
{{recinfo.paySerialNo}} {{recinfo.paySerialNo}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.payModel">
<view class="left">
支付模式 :
</view>
<view class="right" v-if="recinfo.payModel == 1">
积分
</view>
<view class="right" v-if="recinfo.payModel == 2">
第三方平台
</view>
<view class="right" v-if="recinfo.payModel == 3">
混合
</view>
<view class="right" v-if="recinfo.payModel == 4">
油卡
</view>
</view>
<view class="row" v-if="recinfo.payType">
<view class="left">
支付方式 :
</view>
<view class="right" v-if="recinfo.payType == 1">
支付宝
</view>
<view class="right" v-if="recinfo.payType == 2">
微信
</view>
<view class="right" v-if="recinfo.payType == 3">
积分
</view>
<view class="right" v-if="recinfo.payType == 4">
工会卡
</view>
<view class="right" v-if="recinfo.payType == 5">
银联支付
</view>
<view class="right" v-if="recinfo.payType == 7">
嗨森逛油卡
</view>
</view>
<view class="row" v-if="recinfo.totalPrice"> <view class="row" v-if="recinfo.totalPrice">
<view class="left"> <view class="left">
订单总额 : 订单总额 :
@ -72,7 +228,7 @@
</view> </view>
<view class="right" v-else> <view class="right" v-else>
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image>{{recinfo.totalPrice*100}} </image>{{(recinfo.totalPrice * 10 * 10).toFixed(0)}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.payPrice"> <view class="row" v-if="recinfo.payPrice">
@ -84,7 +240,7 @@
</view> </view>
<view class="right" v-else> <view class="right" v-else>
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image>{{recinfo.payPrice*100}} </image>{{(recinfo.payPrice* 10 * 10).toFixed(0)}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.payRealPrice"> <view class="row" v-if="recinfo.payRealPrice">
@ -96,7 +252,7 @@
</view> </view>
<view class="right" v-else> <view class="right" v-else>
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image>{{recinfo.payRealPrice*100}} </image>{{(recinfo.payRealPrice * 10 * 10).toFixed(0)}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.deductionPrice"> <view class="row" v-if="recinfo.deductionPrice">
@ -108,15 +264,15 @@
</view> </view>
<view class="right" v-else> <view class="right" v-else>
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image>{{recinfo.deductionPrice*100}} </image>{{(recinfo.deductionPrice * 10 * 10).toFixed(0)}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.payGold"> <view class="row" v-if="recinfo.payGold">
<view class="left"> <view class="left">
抵扣积分 : 积分抵扣 :
</view> </view>
<view class="right"> <view class="right">
{{recinfo.payGold}} {{(recinfo.payGold / 100).toFixed(2)}}
</view> </view>
</view> </view>
<view class="row"> <view class="row">
@ -159,9 +315,9 @@
{{recinfo.finishTime | formatDate('-')}} {{recinfo.finishTime | formatDate('-')}}
</view> </view>
</view> </view>
</view> </view> -->
<!-- 优选商品 --> <!-- 优选商品 -->
<view class="width94 font18 fcor333 fontwig6 height40" v-if="preByOrderInfo">预约订单详情</view> <!-- <view class="width94 font18 fcor333 fontwig6 height40" v-if="preByOrderInfo">预约订单详情</view>
<view class="order" v-if="preByOrderInfo"> <view class="order" v-if="preByOrderInfo">
<view class="row"> <view class="row">
<view class="left"> <view class="left">
@ -239,13 +395,15 @@
{{preByOrderInfo.preUserRemark}} {{preByOrderInfo.preUserRemark}}
</view> </view>
</view> </view>
</view> </view> -->
<view class="width100 height60"></view> <view class="width100 height60"></view>
<view class="footer" @click="orderComplete" v-if="preByOrderInfo && preByOrderInfo.status == 2"> <view class="footer" @click="orderComplete" v-if="preByOrderInfo && preByOrderInfo.status == 2">
<view class="settlement"> <view class="settlement">
<view class="btn" style="background-color: #0083f5;color: #fff;width: 100% !important;">预约完成</view> <view class="btn" style="background-color: #0083f5;color: #fff;width: 100% !important;">预约完成</view>
</view> </view>
</view> </view>
<view class="footer" <view class="footer"
v-if="recinfo.orderStatus == 1 && recinfo.highChildOrderList[0].goodsType !=6 && recinfo.highChildOrderList[0].goodsType !=5 && recinfo.highChildOrderList[0].goodsType !=4"> v-if="recinfo.orderStatus == 1 && recinfo.highChildOrderList[0].goodsType !=6 && recinfo.highChildOrderList[0].goodsType !=5 && recinfo.highChildOrderList[0].goodsType !=4">
<view class="settlement"> <view class="settlement">
@ -260,6 +418,13 @@
<view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view> <view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view>
</view> </view>
</view> </view>
<!-- 再来一单 -->
<view class="height50 width100"></view>
<view class="bottomstu backcorfff width100 height50 alijusend">
<button open-type="contact" class="cusservice font12 fcor666">联系客服</button>
<view class="buybtn font12 fcorfff">再来一单</view>
</view>
</view> </view>
</template> </template>
@ -286,15 +451,33 @@
imageUrl: app.globalData.imgUrl, imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres1: 'dhf.png', imgadres1: 'dhf.png',
preByOrderInfo: '' preByOrderInfo: '',
countdownh: '', //
countdownm: '', //
countdowns: '', //
timer: null, //
typeText: {
1: '待支付',
2: '已支付',
3: '已完成',
4: '已退款',
5: '已取消',
6: '退款中',
7: '退款失败'
},
}; };
}, },
onShow() { onShow() {
// //
this.getOrderById(); this.getOrderById();
this.getPreByOrderIdId();
}, },
onHide() { onHide() {
},
onUnload() {
clearInterval(this.timer);
}, },
onLoad(option) { onLoad(option) {
this.orderId = option.id this.orderId = option.id
@ -360,6 +543,29 @@
} }
}) })
}, },
//
showtime() {
var nowtime = new Date(), //
endtime = this.orderList.createTime + 900000; //
var lefttime = endtime - nowtime, //
leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //
lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
24), //
leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
Math.floor(lefttime / (1000 * 60) % 60), //
lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
lefttime / 1000 % 60); //
this.countdownh = lefth //
this.countdownm = leftm //
this.countdowns = lefts //
// 00:00:00
if (lefttime < 0) {
this.getThirdOrderByOrderId();
clearInterval(this.timer);
this.countdownh = this.countdownm = this.countdowns = "00"
}
},
// //
orderComplete() { orderComplete() {
let that = this; let that = this;
@ -468,6 +674,23 @@
</script> </script>
<style lang="scss"> <style lang="scss">
page {
background-color: #f0f0f0;
}
.headstu {
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 50%;
background-color: #C6DEF4;
color: #0189E7;
margin-left: auto;
margin-right: auto;
border: 1px solid #0096FF;
}
.addr { .addr {
width: 86%; width: 86%;
padding: 20upx 3%; padding: 20upx 3%;
@ -713,4 +936,62 @@
} }
} }
} }
.headsbg {
background: linear-gradient(to bottom, #3da7e7, #e8eff4);
}
.stubtn {
width: 30%;
height: 35px;
line-height: 35px;
border-radius: 25px;
color: #ffffff;
margin-left: 35%;
}
.bottomstu {
position: fixed;
bottom: 0px;
border-top: 1px solid #cecdcd;
}
.cusservice {
height: 30px;
width: 90px;
margin-right: 20px;
border: 1px solid #6c6c6c;
border-radius: 25px;
}
.buybtn {
height: 30px;
width: 90px;
line-height: 30px;
text-align: center;
margin-right: 20px;
background-color: #009dff;
border-radius: 25px;
}
.borderleft {
background-image: radial-gradient(10px at bottom left, #f0f0f0 10px, #ffffff);
}
.bordertopleft {
background-image: radial-gradient(10px at top left, #f0f0f0 10px, #ffffff);
}
.concont {
border-radius: 8px 8px 0 0;
background-image: radial-gradient(10px at bottom right, #f0f0f0 10px, #ffffff);
}
.gooddes {
border-radius: 0 0 8px 8px;
background-image: radial-gradient(10px at top right, #f0f0f0 10px, #ffffff);
}
</style> </style>

@ -1,108 +1,85 @@
<template> <template>
<view> <view>
<!-- 搜索 -->
<view class="backcorfff width100 height120" style="position: fixed;z-index: 999;" :style="{top:headerTop}" >
<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" :style="{position:headerPosition,top:headerTop}"> <view class="topTabBar">
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)"> <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="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}
</view>
</view> </view>
</view> </view>
</view>
<scroll-view scroll-x='true' :style="{top:headerswper}" 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本身的滑动 --> <!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿所以漂浮顶部选项卡使用page本身的滑动 -->
<view class="order-list"> <view class="order-list">
<view class="list"> <view class="list">
<view class="onorder" v-if="orderList.length==0"> <view class="onorder" v-if="orderList.length==0">
<image :src="imagewxUrl+imgadres"></image> <image :src="imagewxUrl+imgadres"></image>
</view> </view>
<view class="row" v-for="(row,index) in orderList" :key="index"> <view class="row" v-for="(row,index) in orderList" :key="index"
<view class="width96 height40" @click="jumpDetails(row.highChildOrderList[0].goodsType,row.id)"> @click="jumpDetails(row.highChildOrderList[0].goodsType,row.id)">
<view class="width40 flleft aliitem fotlt font16" <view class="width96 mart10 alijusstart">
v-if="row.highChildOrderList[0].goodsType == 1"> <view class="width70">
<image src="../../../static/img/order2.png" class="marglerig" <view class="orderlabel">在线加油</view>
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> </view>
<view class="width40 flleft aliitem fotlt font16" <view class="width30 fotrt fcor666 font12">
v-if="row.highChildOrderList[0].goodsType == 7"> {{typeText[row.orderStatus]}}
<image src="../../../static/img/order9.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image>
优惠券包
</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> </view>
<view class="width40 flleft aliitem fotlt font16"
v-if="row.highChildOrderList[0].goodsType == 5"> <view class="width96 height25 mart10">
<view class="width70 flleft fotlt ">
<view class="font16 fontwig6 text1 fcor333 alijusstart">
<image src="../../../static/img/order5.png" class="marglerig" <image src="../../../static/img/order5.png" class="marglerig"
style="width: 50rpx;height: 50rpx;"></image> style="width: 50rpx;height: 50rpx;"></image>{{row.highChildOrderList[0].goodsName}}
电影票
</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>
<view class="width40 flleft aliitem fotlt font16" <view class="width30 flright fotrt fcor666 font15 fotrt">
v-if="row.highChildOrderList[0].goodsType == 9"> <view class="font14 fcor333">
<image src="../../../static/img/xbk.png" class="marglerig" x1
style="width: 50rpx;height: 50rpx;"></image>
星巴克<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
</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> </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> </view>
<view class="width60 flright fotrt fcor666 font15"> <view class="width96 mart10 font12 fcor999">
{{row.createTime | formatDate('-')}} 订单编号:{{row.orderNo}}
</view> </view>
<view class="width96 height25 paddbotm10 alijusstart">
<view class="width70 fotlt ">
<view class="font12 text1 fcor999 mart5">
下单时间 : {{row.createTime | formatDate('-')}}
</view> </view>
<view class="width96 line1 mart10"></view>
<view class="width96 height60 mart10" @click="jumpDetails(row.highChildOrderList[0].goodsType,row.id)">
<view class="width70 flleft fotlt ">
<view class="font16 fontwig6 text1 fcor333">
{{row.highChildOrderList[0].goodsName}}
</view> </view>
<view class="font15 text1 fcor999 mart5"> <view class="width30 fotrt fcor666 font15 fotrt">
数量 : {{row.highChildOrderList[0].saleCount}} <view class="fotrt font12 text1 fcor999 mart5">
合计:<text class="fcor333 font18"> {{row.payPrice}} </text>
</view> </view>
</view> </view>
<view class="width30 flright fotrt fcor666 font15 fotrt">
<view class="font16 fontwig6 text1 fcor333" v-if="row.payType != 3">
{{row.payPrice}}
</view> </view>
<view class="font16 fontwig6 text1 fcor333 aliitem" style="justify-content: flex-end;" <view class="width96 mart10 marb5" style="border:1px dashed #f4f4f4;"
v-else>
<image style="width: 15px;height: 15px;" src="../../../static/img/jfx.png">
</image>{{row.payPrice * 10 * 10}}
</view>
<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.orderStatus]}}</view>
</view>
</view>
<view class="width96 line1 mart10 marb5"
v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)"> v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)">
</view> </view>
<view class="btns" <view class="btns"
v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)"> v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)">
<block> <block>
<view class="default" @tap="cancelOrder(row.id)">取消订单</view> <view class="default" @click.stop="cancelOrder(row.id,row.highChildOrderList[0].goodsType)">
<view class="pay" @tap="toPayment(row)">付款</view> 取消订单
</view>
<view class="pay" @click.stop="toPayment(row)">立即支付</view>
</block> </block>
</view> </view>
</view> </view>
@ -113,17 +90,19 @@
<script> <script>
import { import {
getUserOrderList, getUserOrderList,
cancelOrder cancelOrder,
thirdCancelOrder,
orderCheck
} from '../../../Utils/Api.js'; } from '../../../Utils/Api.js';
let app = getApp() let app = getApp()
export default { export default {
data() { data() {
return { return {
headerPosition: "fixed",
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png', imgadres: 'noorder.png',
imgadres1: 'dhf.png', imgadres1: 'dhf.png',
headerTop: "0px", headerTop: "0px",
headerswper:'120px',
typeText: { typeText: {
1: '等待付款', 1: '等待付款',
2: '订单已支付', 2: '订单已支付',
@ -134,7 +113,7 @@
7: '订单退款失败' 7: '订单退款失败'
}, },
// 退 // 退
orderType: ['全部', '待支付', '已支付', '已完成', '已退款', '已取消'], orderType: ['全部', '待支付', '已支付', '已完成', '已退款'],
// //
orderList: [], orderList: [],
list: [], list: [],
@ -145,25 +124,23 @@
loadingText: '', loadingText: '',
typeId: '', typeId: '',
imageUrl: app.globalData.imgUrl, imageUrl: app.globalData.imgUrl,
reFresh: "" reFresh: "",
orderTyplist: ['全部订单', '在线加油', '肯德基', '星巴克', '话费充值', '卡券订单'], //
ordertypeid: 1 //id
} }
}, },
onLoad(option) { onLoad(option) {
// #ifdef H5
this.headerTop = '0px';
// #endif
let tbIndex = parseInt(option.tbIndex) + 1; let tbIndex = parseInt(option.tbIndex) + 1;
this.list = this.orderList[tbIndex]; if (tbIndex == 0) {
this.tabbarIndex = tbIndex; this.typeId = '';
} else {
this.typeId = tbIndex; this.typeId = tbIndex;
}
this.list = this.orderList[this.typeId];
this.tabbarIndex = tbIndex;
this.getUserOrderList(); this.getUserOrderList();
}, },
onPageScroll(e) {
return;
//iOS
this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
},
onReachBottom() { onReachBottom() {
this.getUserOrderList(); this.getUserOrderList();
}, },
@ -242,6 +219,8 @@
}, },
// //
jumpDetails(item, e) { jumpDetails(item, e) {
console.log('===========')
this.orderCheck(e);
if (item == 4 || item == 9 || item == 10) { if (item == 4 || item == 9 || item == 10) {
uni.navigateTo({ uni.navigateTo({
url: '/qianzhu-KFC/order-details/order-details?id=' + e url: '/qianzhu-KFC/order-details/order-details?id=' + e
@ -251,6 +230,16 @@
uni.navigateTo({ uni.navigateTo({
url: '../order_details/order_details?id=' + e url: '../order_details/order_details?id=' + e
}) })
},
//
orderCheck(item) {
let datas = {
orderId: item
}
orderCheck(datas).then(res => {
});
}, },
showType(tbIndex) { showType(tbIndex) {
this.tabbarIndex = tbIndex; this.tabbarIndex = tbIndex;
@ -272,7 +261,7 @@
title: '已提醒商家发货' title: '已提醒商家发货'
}) })
}, },
cancelOrder(row) { cancelOrder(row, item) {
let that = this; let that = this;
uni.showModal({ uni.showModal({
title: '取消订单', title: '取消订单',
@ -285,6 +274,30 @@
let params = { let params = {
orderId: row, orderId: row,
} }
if (item == 9 || item == 4) {
thirdCancelOrder(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
uni.showToast({
title: res.return_data,
icon: 'none',
duration: 2000
})
this.pageNum = 1;
this.orderList = []
this.isNoMoreData = false;
that.getUserOrderList();
} else {
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
})
uni.hideLoading()
}
})
return;
}
cancelOrder(params).then(res => { cancelOrder(params).then(res => {
if (res.return_code == '000000') { if (res.return_code == '000000') {
uni.hideLoading(); uni.hideLoading();
@ -312,22 +325,7 @@
} }
}); });
}, },
doCancelOrder(ordersn) { //
let typeNum = this.orderList.length;
for (let i = 0; i < typeNum; i++) {
let list = this.orderList[i];
let orderNum = list.length;
if (orderNum > 0 && list[0].type == 'unpaid') {
for (let j = 0; j < orderNum; j++) {
if (this.orderList[i][j].ordersn == ordersn) {
this.orderList[i][j].type = 'cancelled';
break;
}
}
}
}
},
toPayment(row) { toPayment(row) {
let payTypes; let payTypes;
if (row.payType == 1 || row.payType == null) { if (row.payType == 1 || row.payType == null) {
@ -361,41 +359,54 @@
background-color: #f3f3f3; background-color: #f3f3f3;
} }
.zspec { .input-box {
font-size: 22rpx; width: 72%;
background-color: #0083f5; margin-left: 5%;
color: #FFFFFF; margin-top: 15px;
height: 40rpx; height: 70rpx;
display: -webkit-box; background-color: #f5f5f5;
display: -webkit-flex; border-radius: 10rpx;
position: relative;
display: flex; display: flex;
width: 44px;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center; align-items: center;
padding: 0 15rpx; border-radius: 15px 0 0 15px;
border-radius: 4px;
margin-bottom: 10px;
margin-left: 5px;
}
.loading-text { .icon {
width: 100%;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
position: absolute;
top: 2px;
left: 5px;
width: 60upx;
height: 60upx; height: 60upx;
color: #979797; font-size: 34upx;
font-size: 24upx; color: #c0c0c0;
}
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 { .topTabBar {
width: 100%; width: 100%;
position: fixed; background-color: #ffffff;
top: 0;
z-index: 10;
background-color: #f8f8f8;
height: 80upx; height: 80upx;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -415,16 +426,53 @@
align-items: center; align-items: center;
&.on { &.on {
color: #0083f5; color: #009dff;
border-bottom: solid 4upx #0083f5; 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 { .order-list {
margin-top: 80upx; margin-top: 170px;
padding-top: 20upx; padding-top: 20upx;
width: 100%; width: 100%;
@ -461,7 +509,17 @@
padding: 10upx 20upx; padding: 10upx 20upx;
border-radius: 10upx; border-radius: 10upx;
background-color: #fff; background-color: #fff;
margin-bottom: 20upx; margin-bottom: 30upx;
.unread {
width: 10px;
height: 10px;
background-color: #e75e58;
border-radius: 50%;
margin-top: -25px;
position: absolute;
margin-left: 60px;
}
.type { .type {
font-size: 26upx; font-size: 26upx;
@ -547,7 +605,7 @@
view { view {
min-width: 120upx; min-width: 120upx;
height: 70rpx; height: 60rpx;
padding: 0 20upx; padding: 0 20upx;
border-radius: 50upx; border-radius: 50upx;
display: flex; display: flex;
@ -570,4 +628,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> </style>

@ -1,171 +1,183 @@
<template> <template>
<view> <view>
<view class="width100 paddtop10 paddbotm10 headsbg backcorfff fotct" v-if="orderList.orderStatus == 1"> <view class="width100 paddtop10 paddbotm10 backcorfff fotct" v-if="orderList.orderStatus == 1">
<view class="height20"></view> <view class="height20"></view>
<view class="headstu font18 fontwig6"> <view class="headstu font24 fontwig6">
{{countdownm}}:{{countdowns}} {{countdownm}}:{{countdowns}}
</view> </view>
<view class="width100 font18 colorc72 mart5"> <view class="width100 font13 fcor666 mart10">若超时未支付,订单将自动取消</view>
{{typeText[orderList.orderStatus]}} <view class="stubtn mart15" style="background-color: #0F8FE8;" @click="jumppay()">立即支付
</view>
<view class="width100 font13 fcor666 mart5">若超时未支付,订单将自动取消</view>
<view class="stubtn mart15 backcorf2f6" v-if="typeid == 9" @click="jumppay()">立即支付</view>
<!-- <view class="stubtn mart15 backcorf2f6" v-if="colorc3 == 9">¥ {{orderList.payPrice}}</view>
<view class="stubtn mart15 backcorf2f6" v-if="typeid == 4 || typeid == 10">¥ {{orderList.payPrice}}</view> -->
<view class="stubtn mart15" v-if="typeid == 4 || typeid == 10" style="background-color: #c72a20;"
@click="jumppay()">立即支付
</view> </view>
</view> </view>
<view class=" paddtop10 paddbotm10 headsbg backcorfff fotct" v-if="orderList.orderStatus != 1 "> <view class=" paddtop10 paddbotm10 headsbg backcorfff fotct" v-if="orderList.orderStatus != 1 && typeid != 10">
<view class="headotherstu alijus font18 fontwig6" <view class="headotherstu alijus font18 fontwig6"
v-if="orderList.orderStatus != 2 && orderList.orderStatus != 3"> v-if="orderList.orderStatus != 2 && orderList.orderStatus != 3">
<image mode="widthFix" class="width50" src="../static/imgs/otherstu.png"></image> <image mode="widthFix" class="width50" src="../static/imgs/otherstu.png"></image>
</view> </view>
<view class="width100 font18 fcor666 mart15" <view class="width100 font18 fcorfff mart15"
v-if=" orderList.orderStatus != 2 && orderList.orderStatus != 3"> v-if=" orderList.orderStatus != 2 && orderList.orderStatus != 3">
{{typeText[orderList.orderStatus]}} {{typeText[orderList.orderStatus]}}
</view> </view>
<view v-if="(orderList.orderStatus == 2 || orderList.orderStatus == 3 ) && typeid != 10"> <view v-if="(orderList.orderStatus == 2 || orderList.orderStatus == 3 )">
<view class="fotct font14 width100 fcor999">您的取餐码为</view>
<view v-if="typeid == 4 && orderList.list && phonestu == 2"> <view v-if="typeid == 4 && orderList.list && phonestu == 2">
<view class="width90 alijusstart mart20" v-for="(item,index) in orderList.list" :key='index'> <view class="width90 mart15" style="display: flow-root;">
<view class="font14 width50 fcor666">取餐号: <text class="colorc3 font18">{{item.code}}</text> <view class="fcor333 mart15 font24 fontspec width50 fotlt flleft height30h fontwig6"
</view> v-for="(item,index) in orderList.list" :key='index'>{{item.code}}
<view class="font14 width50 fcor666">手机尾号: <text class="colorc3 font18">{{item.phone}}</text> <text class="medldcode fcorfff border-r font11">尾号{{item.phone}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="fotct" v-if="typeid == 4 && orderList.list && phonestu == 1"> <view class="fotct" v-if="typeid == 4 && orderList.list && phonestu == 1">
<view class="width90 alicntend mart10 " v-for="(item,index) in orderList.list" :key='index'> <view class="width90 mart15" style="display: flow-root;">
<view class="font14 width100 fcor666">取餐号: <text class="colorc3 font18">{{item.code}}</text> <view class="fcor333 mart15 font24 fontspec width50 fotlt flleft height30h fontwig6"
v-for="(item,index) in orderList.list" :key='index'>{{item.code}}
<text class="medldcode fcorfff border-r font11">取餐码</text>
</view>
</view>
</view>
<view class="font12 width90 fcor666 mart10 marb10 fotlt">订单已准备完毕喜欢您再来</view>
<view class="width90 height70 backcorfff border-r alijusstart paddbotm10">
<view class="width70 fotlt">
<view class="width94 fcor333 font14">请至柜台凭取餐码取餐</view>
<view class="width94 fcor666 font12 mart5">如有询问手机尾号请点击右侧按钮查看</view>
</view>
<view class="width30">
<view class="phoneck width85 border-r" v-if="typeid == 4 && orderList.list && phonestu == 1"
@click="updatestu(2)">
查看手机尾号
</view> </view>
<view class="phoneck width85 border-r" v-if="typeid == 4 && orderList.list && phonestu == 2"
@click="updatestu(1)">
隐藏手机尾号
</view> </view>
</view> </view>
</view>
<!-- 星巴克 -->
<view v-if="typeid == 9 && orderList.object.orderItems[0].code"> <view v-if="typeid == 9 && orderList.object.orderItems[0].code">
<view class="fotct font18 width100 mart10 color2f6f43" <view class="fotct font18 width100 mart10 color2f6f43"
v-for="(item,index) in orderList.object.orderItems" :key='index'>{{item.code}}</view> v-for="(item,index) in orderList.object.orderItems" :key='index'>{{item.code}}</view>
</view> </view>
<view class="fotct font20 width100 mart10 colorc3" v-if="typeid == 4 && orderList.list">请取餐</view>
<view class="phoneck" v-if="typeid == 4 && orderList.list && phonestu == 1" @click="updatestu">查看手机号</view>
<view class="fotct font20 width100 mart10 colorc3" v-if="typeid == 4 && !orderList.list"> <view class="fotct font20 width100 mart10 colorc3" v-if="typeid == 4 && !orderList.list">
{{orderList.statusDesc}} {{orderList.statusDesc}}
</view> </view>
<view class="fotct font20 width100 mart10 color2f6f43"
v-if="typeid == 9 && orderList.object.orderItems[0].code">请取餐</view>
<view class="fotct font20 width100 mart10 color2f6f43" <view class="fotct font20 width100 mart10 color2f6f43"
v-if="typeid == 9 && !orderList.object.orderItems[0].code">{{orderList.statusDesc}}</view> v-if="typeid == 9 && !orderList.object.orderItems[0].code">{{orderList.statusDesc}}</view>
<view class="fotct font13 width100 mart15 fcor666">请至柜台凭取餐码取餐</view>
<view class="fotct font13 width100 mart5 fcor666">如有询问手机号尾号请告知</view>
</view> </view>
</view> </view>
<!-- <view class="width96 mart20 colorc3 font12 fotct">
:约5分钟后取餐,请尽快到餐厅取餐哦
</view> -->
<view class="concont width94 mart10 backcorfff"> <view class="concont width94 mart10 backcorfff">
<view class="width94 paddtop10 font16 fontwig6" v-if="typeid == 10"> <view class="width94 paddtop15 font16 fontwig6" v-if="typeid == 10">
充值明细 充值明细
</view> </view>
<view class="width94 paddtop10 font16 fontwig6" v-else> <view class="width94 paddtop15 font16 fontwig6 alijusstart" v-else>
餐品明细 <image src="../static/imgs/desloca.png" mode="widthFix" class="icon20 marglerig"></image> 南充麦当劳潆华南路餐厅
</view> </view>
<view class="width100 bor-botm1 mart10 marb10"></view> <view class="width100 mart5">
<view class="width100"> <view class="width90 alijusstart mart15" v-for="(item,index) in orderList.highChildOrderList"
<view class="width90 alijusstart mart10 bor-botm1" v-for="(item,index) in orderList.highChildOrderList"
:key="index"> :key="index">
<view class="width30"> <view class="width30">
<image :src="item.goodsImg" v-if="item.goodsImg" mode="widthFix" class="width100"></image> <image :src="item.goodsImg" v-if="item.goodsImg" mode="widthFix" class="width100"></image>
<image src="../static/imgs/vipcz.png" v-else mode="widthFix" class="width90w"></image> <image src="../static/imgs/vipcz.png" v-else mode="widthFix" class="width90w"></image>
</view> </view>
<view class="width40 font13 fcor666">{{item.goodsName}}</view> <view class="width50 font13 fcor666">
<view class="width10 font12 fcor999">x{{item.saleCount}}</view> <view>{{item.goodsName}}</view>
<view class="font12 fcor999">{{item.saleCount}} </view>
</view>
<view class="width20"> <view class="width20">
<view class="width100 fcor333 font12">¥<text class="fontwig6 font16">{{item.goodsActualPrice}}</text> <view class="width100 fcor333 font12">¥<text
class="fontwig6 font16">{{item.goodsActualPrice}}</text>
</view> </view>
<view class="width100 fcor999 font12" v-if="item.goodsActualPrice != item.goodsPrice" style="text-decoration: line-through;"> <view class="width100 fcor999 font12" v-if="item.goodsActualPrice != item.goodsPrice"
style="text-decoration: line-through;">
¥{{item.goodsPrice}}</view> ¥{{item.goodsPrice}}</view>
</view> </view>
</view> </view>
<view class="width90 fotrt height50 font13 fcor999">
<text class="fcor333 fontwig6" style="margin: 0px 5px;"> {{coutnums}} </text> 小计:
<text class="font16 colorc3 fontwig6 margle" v-if="typeid == 4 || typeid == 10">
¥{{orderList.totalPrice}}</text>
<text class="font16 color2f6f43 fontwig6 margle" v-if="typeid == 9 ">
¥{{orderList.totalPrice}}</text>
</view> </view>
<view class="width95 height20 borderleft alijusnostart">
<view style="width: 5%;"></view>
<view class="width95" style="border-bottom: 1px dashed #bebcbc;"></view>
</view>
<!-- <view class="width96" style="border:1px dashed #f4f4f4;"></view> -->
</view>
<view class="gooddes width94 backcorfff marb20">
<view class="width90w height20 bordertopleft alijusnostart">
<view class="width10"></view>
</view>
<view class="width94 alijusstart paddtop10 ">
<view class="font15 fcor333 fontwig6 width50">商品小计</view>
<view class="font14 fcor666 fotrt width50">金额 <text
class="margle fontwig6 font18 fcor333">¥{{orderList.totalPrice}}</text>
</view> </view>
</view> </view>
<view class="concont width94 mart10 backcorfff marb30"> <view class="width92 fotrt mart5 font14 fcor999">
<view class="width94 alijusstart paddtop10 font14 fcor666"> 优惠券 <text class="margle fcoreb5 font16 fontwig6">¥ {{orderList.deductionPrice}}</text>
</view>
<view class="width92 fotrt mart5 font14 fcor999">
积分抵扣 <text class="margle fcoreb5 font16 fontwig6">¥ {{(orderList.payGold / 100).toFixed(2)}}</text>
</view>
<view class="width90 mart10 marb10" style="border-bottom: 1px dashed #bebcbc;"></view>
<view class="width92 fotrt mart14 font14 fcor333">
实付 <text class="margle fcoreb5 font22 fontwig6">¥ {{orderList.payPrice}}</text>
</view>
<view class="width100 height20"></view>
</view>
<view class="width94 backcorfff marb30" style="border-radius: 12px;">
<view class="width94 alijusstart paddtop10 font16 fontwig6 fcor333">
订单信息 订单信息
</view> </view>
<!-- <view class="width94 alijusstart mart20 font14 fcor666">
<view class="width30">取餐门店</view>
<view class="width70 fotrt">{{orderList.storeName}}-{{orderList.storeAddress}}</view>
</view> -->
<view class="width94 alijusstart mart20 font14 fcor666"> <view class="width94 alijusstart mart20 font14 fcor666">
<view class="width30">订单号</view> <view class="width30">交易单号</view>
<view class="width70 fotrt">{{orderList.orderNo}}</view> <view class="width70 fcor333 fotrt">{{orderList.orderNo}}</view>
</view> </view>
<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.paySerialNo"> <view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.paySerialNo">
<view class="width30">支付流水号</view> <view class="width30">流水号</view>
<view class="width70 fotrt">{{orderList.paySerialNo}}</view> <view class="width70 fcor333 fotrt">{{orderList.paySerialNo}}</view>
</view> </view>
<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.paySerialNo"> <view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.paySerialNo">
<view class="width30">下单时间</view> <view class="width30">下单时间</view>
<view class="width70 fotrt">{{orderList.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view> <view class="width70 fcor333 fotrt">{{orderList.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view>
</view> </view>
<view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 4"> <view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 4">
<view class="width30">就餐方式</view> <view class="width30">就餐方式</view>
<view class="width70 fotrt" v-if="orderList.eatType == 1">店内就餐</view> <view class="width70 fotrt" v-if="orderList.eatType == 1">店内就餐</view>
<view class="width70 fotrt" v-if="orderList.eatType == 2">打包带走</view> <view class="width70 fcor333 fotrt" v-if="orderList.eatType == 2">打包带走</view>
</view>
<view class="width94 alijusstart mart20 font14 fcor666">
<view class="width30">实付金额</view>
<view class="width70 fotrt">¥ {{orderList.payPrice}}</view>
</view>
<view class="width94 alijusstart mart20 font14 fcor666">
<view class="width30">积分抵扣</view>
<view class="width70 fotrt">¥ {{(orderList.payGold / 100).toFixed(2)}}</view>
</view>
<view class="width94 alijusstart mart20 font14 fcor666">
<view class="width30">优惠券抵扣</view>
<view class="width70 fotrt">¥ {{orderList.deductionPrice}}</view>
</view> </view>
<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.payType"> <view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.payType">
<view class="width30">支付方式</view> <view class="width30">支付方式</view>
<view class="width70 fotrt" v-if="orderList.payType == 2">微信</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 2">微信</view>
<view class="width70 fotrt" v-if="orderList.payType == 3">积分</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 3">积分</view>
<view class="width70 fotrt" v-if="orderList.payType == 4">工会卡</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 4">工会卡</view>
<view class="width70 fotrt" v-if="orderList.payType == 5">银联支付</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 5">银联支付</view>
</view>
<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.remarks && typeid != 10">
<view class="width30">联系方式</view>
<view class="width70 fotrt">{{orderList.remarks}}</view>
</view> </view>
<view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 10"> <view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 10">
<view class="width30">充值手机号</view> <view class="width30">充值手机号</view>
<view class="width70 fotrt">{{orderList.remarks}}</view> <view class="width70 fotrt fcor333">{{orderList.remarks}}</view>
</view>
<view class="width94 alijusstart mart20 font14 fcor666">
<view class="width30">支付状态</view>
<view class="width70 fotrt">{{typeText[orderList.orderStatus]}}</view>
</view>
<view class="width94 alijusend mart20 font14 fcor666" v-if="orderList.orderStatus == 1">
<view class="canbtn height30 marRight20" @click="thirdCancelOrder()">取消订单</view>
<!-- <view class="canbtn height30">联系客服</view> -->
</view> </view>
<view class="width100 height20"></view> <view class="width100 height20"></view>
</view> </view>
<view class="width90 mart10 font13 fcor666" v-if="typeid != 10">友情提示</view> <view class="width90 mart10 font13 fcor666" v-if="typeid != 10">友情提示</view>
<view class="width90 mart10 font12 fcor999" v-if="typeid != 10">1如遇到商品售罄将导致您无法取到所定食物系统将自动为您安排退款1个工作日内到账 <view class="width90 mart10 font12 fcor999" v-if="typeid != 10">1如遇到商品售罄将导致您无法取到所定食物系统将自动为您安排退款1个工作日内到账
</view> </view>
<view class="width90 mart5 font12 fcor999 marb40" v-if="typeid != 10">2如遇更多问题请及时联系在线客服处理</view> <view class="width90 mart5 font12 fcor999 marb40" v-if="typeid != 10">2如遇更多问题请及时联系在线客服处理</view>
<!-- 再来一单 -->
<view class="height50 width100"></view>
<view class="bottomstu backcorfff width100 height50 alijusend">
<button open-type="contact" class="cusservice font12 fcor666">联系客服</button>
<view class="buybtn font12 fcorfff">再来一单</view>
</view>
</view> </view>
</template> </template>
@ -209,11 +221,12 @@
onUnload() { onUnload() {
clearInterval(this.timer); clearInterval(this.timer);
clearInterval(this.timerdjs); clearInterval(this.timerdjs);
console.log('')
}, },
methods: { methods: {
// //
updatestu() { updatestu(item) {
this.phonestu = 2 this.phonestu = item;
}, },
getAllCount() { getAllCount() {
this.orderList.highChildOrderList.forEach((food) => { this.orderList.highChildOrderList.forEach((food) => {
@ -351,15 +364,16 @@
} }
.headstu { .headstu {
width: 80px; width: 90px;
height: 80px; height: 90px;
line-height: 80px; line-height: 90px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
background-color: #faf1f1; background-color: #C6DEF4;
color: #c72a20; color: #0189E7;
margin-left: 40%; margin-left: auto;
border: 1px solid #c72a20; margin-right: auto;
border: 1px solid #0096FF;
} }
.headotherstu { .headotherstu {
@ -368,7 +382,8 @@
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
margin-left: 40%; margin-left: auto;
margin-right: auto;
background-color: #999999; background-color: #999999;
} }
@ -386,12 +401,36 @@
color: #c72a20; color: #c72a20;
} }
.phoneck {
height: 35px;
line-height: 35px;
font-size: 12px;
box-sizing: border-box;
background-color: #0F8FE8;
color: #ffffff;
}
.headsbg { .headsbg {
border-radius: 0 0 30px 30px; // border-radius: 0 0 30px 30px;
background: linear-gradient(to bottom, #3da7e7, #e8eff4);
}
.borderleft {
background-image: radial-gradient(10px at bottom left, #f0f0f0 10px, #ffffff);
}
.bordertopleft {
background-image: radial-gradient(10px at top left, #f0f0f0 10px, #ffffff);
} }
.concont { .concont {
border-radius: 12px; border-radius: 12px 12px 0 0;
background-image: radial-gradient(10px at bottom right, #f0f0f0 10px, #ffffff);
}
.gooddes {
border-radius: 0 0 12px 12px;
background-image: radial-gradient(10px at top right, #f0f0f0 10px, #ffffff);
} }
.footbtn { .footbtn {
@ -426,15 +465,35 @@
text-align: center; text-align: center;
} }
.phoneck { .bottomstu {
height: 35px; position: fixed;
width: 120px; bottom: 0px;
line-height: 35px; border-top: 1px solid #cecdcd;
font-size: 14px; }
border-radius: 39px;
border: 1px solid #CD2314; .cusservice {
box-sizing: border-box; height: 30px;
color: #CD2314; width: 90px;
margin: 10px auto; margin-right: 20px;
border: 1px solid #6c6c6c;
border-radius: 25px;
}
.buybtn {
height: 30px;
width: 90px;
line-height: 30px;
text-align: center;
margin-right: 20px;
background-color: #009dff;
border-radius: 25px;
}
.medldcode {
background-color: #D20507;
padding-left: 8px;
padding-right: 8px;
position: absolute;
margin-left: 2px;
} }
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 904 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

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: 312 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 487 B

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

@ -111,6 +111,10 @@ $uni-font-size-paragraph:30upx;
font-size: 20px; font-size: 20px;
} }
.font22 {
font-size: 22px;
}
.font24 { .font24 {
font-size: 24px; font-size: 24px;
} }
@ -278,6 +282,20 @@ $uni-font-size-paragraph:30upx;
background-color: #333333; background-color: #333333;
} }
.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{ .backcorf06{
background-color: #0083f5; background-color: #0083f5;
@ -349,6 +367,10 @@ $uni-font-size-paragraph:30upx;
width: 50%; width: 50%;
} }
.width45 {
width: 45%;
}
.width40 { .width40 {
width: 40%; width: 40%;
} }
@ -371,6 +393,11 @@ $uni-font-size-paragraph:30upx;
width: 30%; width: 30%;
margin-left: 3%; margin-left: 3%;
} }
.width31{
width: 31%;
margin-right: auto;
margin-left: auto;
}
.width35 { .width35 {
width: 35%; width: 35%;
} }
@ -493,6 +520,9 @@ $uni-font-size-paragraph:30upx;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.height30h {
height: 30px;
}
.height40 { .height40 {
height: 40px; height: 40px;
@ -518,11 +548,6 @@ $uni-font-size-paragraph:30upx;
height: 25px; height: 25px;
} }
.height20 {
height: 20px;
line-height: 20px;
}
.height50 { .height50 {
height: 50px; height: 50px;
@ -692,6 +717,10 @@ $uni-font-size-paragraph:30upx;
border-radius: 5px; border-radius: 5px;
} }
.border-8r{
border-radius: 8px;
}
/* button样式 */ /* button样式 */
.btnw70 { .btnw70 {
width: 70%; width: 70%;
@ -754,6 +783,11 @@ $uni-font-size-paragraph:30upx;
display: flex; display: flex;
} }
.alijusnostart{
justify-content: flex-start;
display: flex;
}
.font12{ .font12{
font-size: 12px; font-size: 12px;
} }
@ -777,6 +811,19 @@ $uni-font-size-paragraph:30upx;
.icon12 { .icon12 {
width: 12px; width: 12px;
} }
.icon25 {
width: 25px;
}
.icon30 {
width: 30px;
}
.icon40 { .icon40 {
width: 40px; width: 40px;
} }
.icon45 {
width: 45px;
}
Loading…
Cancel
Save