yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1. H5 小程序2.0的订单详情页面

Browse Source 
2. 肯德基订单详情页面修改
yj-dev
杨杰 2 years ago
parent f0745691f6
commit 208037760e
12 changed files with 598 additions and 832 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      pages.json
  2. 4
      pages/goods/goods-list/goods-list.vue
  3. 379
      pages/goods/goods.vue
  4. 80
      pages/tabBar/home/home.vue
  5. 99
      pages/tabBar/user/user.vue
  6. 17
      pages/user/coupon/coupon.vue
  7. 11
      pages/user/news/news.vue
  8. 296
      pages/user/order_details/order_details.vue
  9. 13
      pages/user/order_list/order_list.vue
  10. 2
      pages/welcome/welcome.vue
  11. 7
      qianzhu-KFC/order-details/order-details.vue
  12. 4
      uni.scss

2
pages.json
Unescape View File

@ -83,7 +83,7 @@
"path": "pages/user/order_details/order_details",
"style": {
"navigationBarTitleText": "订单详情",
"navigationBarBackgroundColor": "#0083f5",
"navigationBarBackgroundColor": "#3da7e7",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false
}

4
pages/goods/goods-list/goods-list.vue
Unescape View File

@ -267,8 +267,8 @@
toSearch() {
this.pageNum = 1;
this.pageSize = 10;
this.isNoMoreData = false;
this.goodsList = [];
this.isNoMoreData = false;
if (this.typeId == 3) {
this.getBrandCouponList();
} else {
@ -295,7 +295,7 @@
margin-left: 5%;
margin-top: 15px;
height: 70rpx;
background-color: #f5f5f5;
background-color: #ffffff;
border-radius: 10rpx;
position: relative;
display: flex;

379
pages/goods/goods.vue
Unescape View File

@ -1,15 +1,14 @@
<template>
<view>
<!-- #ifdef H5 -->
<view class="header">
<!-- 头部-默认显示 -->
<!-- <view class="header">
<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
<view class="back">
<view class="icon xiangqian" @tap="back" v-if="showBack"></view>
</view>
<view class="middle"></view>
</view>
</view>
</view> -->
<!-- #endif -->
<!-- 底部菜单 -->
<view class="footer">
@ -37,19 +36,7 @@
</view>
<view class="font14 width50 margle">价格: <text class="paddleft5"
style="text-decoration: line-through;">￥{{goodsData[0].salesPrice}}</text></view>
<!-- </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 class="font15 margle20">门市参考价: <image style="width: 20px;height: 20px;vertical-align: sub;"
src="../../static/img/jfh.png">
</image><text class="paddleft5"
style="text-decoration: line-through;">{{goodsData[0].salesPrice *100}}</text></view>
</view> -->
<view class=" width30">
<view class="xgnum">限购{{goodsData[0].limitNumber}}件</view>
</view>
@ -64,12 +51,6 @@
<view class="font16 fcor333 fontwig6 mart10 width96">
{{goodsData[0].couponName}}
</view>
<!-- <view class="mart10 width100 font14 fcor999 height20">
<view class="width70 flleft">有效期至: {{goodsData[0].salesEndTime | formatDate('-')}}</view>
<view class="width30 flright fotrt" v-if="goodsData[0].couponSource != 4">库存 :
{{goodsData[0].stockCount}}件
</view>
</view> -->
<view class="width96 mart10 alijusstart">
<view class="fcorfff font12 height20" style="background-color: #3da7e7;border-radius: 20px;padding: 0px 5px;">嗨森逛
</view>
@ -110,7 +91,7 @@
<image mode="widthFix" class="flleft" src="../../static/img/logo.png"></image>
<view class="tcrig">
<view class="font16 fontwig6 fcor333 text1">{{ product.highCouponModel.couponName }}</view>
<view class="font13 fcor999 mart5">有效期至：{{product.highCouponModel.salesEndTime | formatDate('-')}}
<view class="font13 fcor999 mart5">有效期至:{{product.highCouponModel.salesEndTime | formatDate('-')}}
</view>
<view class="info mart5" v-if="product.highCouponModel.payType == 1">
<view class="price">￥{{ product.highCouponModel.discountPrice}}</view>
@ -643,21 +624,6 @@
margin-bottom: 20rpx;
}
.goods-info {
.price {
font-size: 15px;
font-weight: 600;
color: #f47925;
}
.zprice {
text-decoration: line-through;
}
.title {
font-size: 30upx;
}
}
.spec {
.row {
@ -712,69 +678,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 {
.title {
width: 100%;
@ -863,280 +766,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>

80
pages/tabBar/home/home.vue
Unescape View File

@ -26,12 +26,14 @@
</button>
<!-- #endif -->
<!-- #ifdef H5-->
<image :src="imagewxUrl+imgadres4" mode="widthFix" class="h5xfimg" @click="playPhone"></image>
<image :src="imagewxUrl+imgadres4" mode="widthFix" style="background-color: transparent;padding: 0px;"
class="h5xfimg" @click="playPhone"></image>
<!-- #endif -->
</view>
</view>
<!-- 顶部菜单 -->
<view class="height80 backcorltop mart50">
<view v-for="(item,index) in homeCateList" :key="index">
<view class="height80 backcorltop mart50" v-if="item.type == 1">
<view class="category-list">
<view class="category" style="width: 25%;" v-for="(row, index) in categoryList" :key="index"
@tap="toCategory(row)">
@ -43,10 +45,10 @@
</view>
</view>
<!-- 顶部活动图片 -->
<image class="width100" mode="widthFix" :src="imagewxUrl+imgadres"></image>
<!-- <image class="width100" mode="widthFix" :src="imagewxUrl+imgadres"></image> -->
<!-- 顶部菜单 -->
<view class="category-list backcorfff" style="margin-top: -5px;">
<view class="category-list backcorfff" style="margin-top: -5px;" v-if="item.type == 7">
<view class="category" style="width: 20%;" v-for="(row, index) in categoryList" :key="index"
@tap="toCategory(row)">
<view class="img">
@ -56,7 +58,7 @@
</view>
</view>
<!-- 消息 -->
<view class="height120 backcorfff">
<view class="height120 backcorfff" v-if="item.type == 3">
<view class="height20 width100"></view>
<view class="width92 message alijus">
<swiper circular="true" autoplay="true" display-multiple-items="2" :vertical="true">
@ -77,7 +79,7 @@
</view>
<!-- 轮播图 -->
<view class="swiper mart20">
<view class="swiper mart20" v-if="item.type == 2">
<view class="swiper-box">
<swiper circular="true" autoplay="true" @change="swiperChange">
<swiper-item v-for="swiper in swiperList" :key="swiper.id">
@ -87,13 +89,13 @@
</view>
</view>
<!-- 加油专区 -->
<view class="width90 mart20 alijusstart" @click="goGoodsList(2)">
<view class="width90 mart20 alijusstart" v-if="item.type == 6" @click="goGoodsList(2)">
<view class="width70 font18 fcor333">
加油专区
</view>
<view class="width30 font14 fotrt fcor666">更多</view>
</view>
<view class="width94 alijus mart20">
<view class="width94 alijus mart20" v-if="item.type == 6">
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home3.png"></image>
<view class="width96 fcor333 font15 fontwig6">ETC加油券</view>
@ -114,25 +116,25 @@
</view>
</view>
<!-- 惠享生活 -->
<view class="width90 mart20 alijusstart">
<view class="width90 mart20 alijusstart" v-if="item.type == 5">
<view class="width70 font18 fcor333">
惠享生活
</view>
</view>
<image class="width90 mart10" mode="widthFix" :src="imagewxUrl+imgadres1"></image>
<view class="width90 alijusstart mart10">
<image class="width90 mart10" mode="widthFix" v-if="item.type == 5" :src="imagewxUrl+imgadres1"></image>
<view class="width90 alijusstart mart10" v-if="item.type == 5">
<image src="../../../static/img/home/home6.png" mode="widthFix" class="width31"></image>
<image src="../../../static/img/home/home7.png" mode="widthFix" class="width31"></image>
<image src="../../../static/img/home/home5.png" mode="widthFix" class="width31"></image>
</view>
<!-- 天天好券 -->
<view class="width90 mart20 alijusstart">
<view class="width90 mart20 alijusstart" v-if="item.type == 6">
<view class="width70 font18 fcor333">
天天好券
</view>
<view class="width30 font14 fotrt fcor666">更多</view>
</view>
<view class="width94 alijus mart20">
<view class="width94 alijus mart20" v-if="item.type == 6">
<view class="backcorfff spcarea">
<image mode="widthFix" class="width100" src="../../../static/img/home/home4.png"></image>
<view class="width96 fcor333 font15 fontwig6">加油优惠券包</view>
@ -152,6 +154,7 @@
<view class="width94 fcoreb5 font15 fontwig6">¥240</view>
</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>
@ -234,15 +237,15 @@
onShow() {
if (app.globalData.cityName != '') {
this.city = app.globalData.qianzhuCityName;
this.getCouponListArea();
this.getCouponListgold();
this.getunioncardCouponListgold();
this.getCmsContent();
this.getCmsContentcmshome();
// this.getCouponListArea();
// this.getCouponListgold();
// this.getunioncardCouponListgold();
// this.getCmsContent();
// this.getCmsContentcmshome();
this.getCmsContentcmsContent();
if (app.globalData.userInfo.phone) {
this.getMembershipLevel();
}
// if (app.globalData.userInfo.phone) {
// this.getMembershipLevel();
// }
}
// #ifdef H5
uni.getStorage({
@ -334,12 +337,12 @@
that.city = '重庆市';
app.globalData.cityName = '重庆市';
app.globalData.cityId = '500000';
that.getCouponListArea();
that.getCouponListgold();
that.getunioncardCouponListgold();
that.getCmsContent();
that.getCmsAactibity();
that.getCmsContentcmshome();
// that.getCouponListArea();
// that.getCouponListgold();
// that.getunioncardCouponListgold();
// that.getCmsContent();
// that.getCmsAactibity();
// that.getCmsContentcmshome();
that.getCmsContentcmsContent();
}
);
@ -379,14 +382,15 @@
getCmsContentcmsContent() {
let code;
// #ifdef H5
code = 'CMS_H5_IMG'
code = '2'
// #endif
// #ifdef MP
code = 'CMS_HOME_CONTENT'
code = '1'
// #endif
let params = {
regionId: app.globalData.cityId,
categoryCode: code
companyId: app.globalData.companyId,
platform: code,
categoryCode: 'CMS_HOME'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000') {
@ -560,12 +564,12 @@
})
// app.globalData.cityId = '500103';
if (res.return_data.regionId) {
that.getCouponListArea();
that.getCouponListgold();
that.getunioncardCouponListgold();
that.getCmsContent();
that.getCmsAactibity();
that.getCmsContentcmshome();
// that.getCouponListArea();
// that.getCouponListgold();
// that.getunioncardCouponListgold();
// that.getCmsContent();
// that.getCmsAactibity();
// that.getCmsContentcmshome();
that.getCmsContentcmsContent();
}
uni.getStorage({
@ -761,7 +765,7 @@
},
test(item) {
uni.navigateTo({
url:'../../user/news/news'
url: '../../user/news/news'
})
},

99
pages/tabBar/user/user.vue
Unescape View File

@ -1,10 +1,7 @@
<template>
<view>
<!-- #ifdef H5 -->
<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}"></view>
<!-- 占位 -->
<view v-if="showHeader" class="place"></view>
<view class="status"></view>
<!-- #endif -->
<view class="user">
<!-- 头像 -->
@ -155,7 +152,6 @@
</view>
</view>
<view class="place-bottom"></view>
<!-- <authorize></authorize> -->
</view>
</template>
<script>
@ -176,16 +172,12 @@
return {
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'head.png',
headerPosition: "fixed",
textnum: '',
textSend: '',
therrNum: '',
rechargeOrderNum: '', //话费待支付
whetherCheckNum: '', //未查看数量
orderPayNum: '', //支付订单数量
headerTop: null,
statusTop: null,
showHeader: true,
//个人信息,
user: "",
// 订单类型
@ -205,25 +197,6 @@
icon: "../../../static/img/user/user4.png"
}
],
huafeiList: [{
text: '待支付',
icon: "fukuan"
},
{
text: '已支付',
icon: "fahuo"
},
{
text: '已完成',
icon: "shouhuo"
}, {
text: '已取消',
icon: "pingjia"
}, {
text: '已退款',
icon: "tuihuo"
}
],
//操作列表
czList: '',
nopaylist: [1, 2, 3, 4, 5],
@ -237,18 +210,7 @@
uni.stopPullDownRefresh();
}, 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() {
this.statusHeight = 0;
// #ifdef H5
this.showHeader = true;
// this.statusHeight = plus.navigator.getStatusbarHeight();
// #endif
if (!app.globalData.userInfo) {
this.findUser()
}
@ -493,49 +455,10 @@
.status {
width: 100%;
height: 0;
position: fixed;
z-index: 10;
background-color: #0083f5;
top: 0;
/* #ifdef APP-PLUS */
height: var(--status-bar-height); //覆盖样式
/* #endif */
height: 44px;
background-color: #6fbdee;
}
.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 {
border: none
@ -557,22 +480,6 @@
color: #009DFF;
}
.place {
background-color: #0083f5;
padding-left: 20px;
padding-right: 20px;
text-align: right;
height: 100upx;
/* #ifdef APP-PLUS */
margin-top: var(--status-bar-height);
/* #endif */
image {
width: 30px;
height: 30px;
}
}
.place-bottom {
height: 200upx;
}

17
pages/user/coupon/coupon.vue
Unescape View File

@ -7,7 +7,7 @@
<view :class="{on:typeClass=='noinvalid'}" @tap="switchType('noinvalid')">已过期</view>
</view>
<scroll-view scroll-x='true' class="srollview width100" scroll-with-animation>
<scroll-view scroll-x='true' :style="{top:headerswiperTop}" 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>
@ -153,6 +153,7 @@
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png',
headerTop: 0,
headerswiperTop:'45px',
//控制滑动效果
typeClass: 'valid',
subState: '',
@ -178,18 +179,11 @@
}, 1000);
},
onLoad() {
this.getUserDiscountList(1);
//兼容H5下排序栏位置
// #ifdef H5
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
let Timer = setInterval(() => {
let uniHead = document.getElementsByTagName('uni-page-head');
if (uniHead.length > 0) {
this.headerTop = uniHead[0].offsetHeight + 'px';
clearInterval(Timer); //清除定时器
}
}, 1);
this.headerTop = '44PX';
this.headerswiperTop = '89px';
// #endif
this.getUserDiscountList(1);
},
filters: {
//过滤器 用于格式化时间
@ -335,7 +329,6 @@
.srollview {
position: fixed;
z-index: 9999;
top: 45px;
height: 60px;
background-color: #ffffff;
display: flex;

11
pages/user/news/news.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<view>
<!-- 顶部类型 -->
<scroll-view scroll-x='true' class="srollview width100" scroll-with-animation>
<scroll-view scroll-x='true' class="srollview width100" :style="{top:headerTop}" scroll-with-animation>
<view class="conent" :class="[newstypeid == index ? 'activeconent' : 'frontconent']"
v-for="(item,index) in newsTyplist" :key="index">{{item}}</view>
</scroll-view>
@ -62,9 +62,15 @@
data() {
return {
newsTyplist: ['全部订单', '在线加油', '肯德基', '星巴克', '话费充值', '卡券订单'], //消息类型
newstypeid: 1 //类型id
newstypeid: 1 ,//类型id
headerTop:'0px'
}
},
onLoad() {
// #ifdef H5
this.headerTop = '44px';
// #endif
},
methods: {
}
@ -78,7 +84,6 @@
.srollview {
position: fixed;
top: 0px;
height: 70px;
background-color: #ffffff;
display: flex;

296
pages/user/order_details/order_details.vue
Unescape View File

@ -1,22 +1,141 @@
<template>
<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 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 3">已完成</view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 4">已退款</view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 5">已取消</view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 6">退款中</view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.orderStatus == 7">退款失败</view>
<!-- 待支付 -->
<view class="width100 paddtop10 paddbotm10 backcorfff fotct" v-if="recinfo.orderStatus == 1">
<view class="height20"></view>
<view class="headstu font24 fontwig6">
{{countdownm}}:{{countdowns}}
</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 backcorfff height50 fcor333 font15 border-8r">
<view class="width94">感谢您信任嗨森逛，欢迎再次消费</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="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)">
<!-- v-for="(row,index) in buylist" :key="index" -->
<view class="row">
<view class="goods-info">
<view class="img">
<image mode="widthFix" :src="imageUrl+rec.goodsImg" v-if="rec.goodsType == 1 || rec.goodsType == 7"></image>
<image mode="widthFix" :src="imageUrl+rec.goodsImg"
v-if="rec.goodsType == 1 || rec.goodsType == 7"></image>
<image mode="widthFix" :src="imagewxUrl+imgadres1" v-if="rec.goodsType == 6"></image>
<image mode="widthFix" :src="rec.goodsImg" v-if="rec.goodsType != 1 && rec.goodsType != 6 && rec.goodsType != 7"></image>
<image mode="widthFix" :src="rec.goodsImg"
v-if="rec.goodsType != 1 && rec.goodsType != 6 && rec.goodsType != 7"></image>
</view>
<view class="info">
<view class="title">{{rec.goodsName}}</view>
@ -34,9 +153,9 @@
</view>
</view>
</view>
</view>
</view> -->
<!-- 提示-备注 -->
<view class="order">
<!-- <view class="order">
<view class="row" v-if="recinfo.orderNo">
<view class="left">
订单流水号 :
@ -110,8 +229,7 @@
￥{{recinfo.totalPrice}}
</view>
<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 * 10 * 10).toFixed(0)}}
</view>
</view>
@ -123,8 +241,7 @@
￥{{recinfo.payPrice}}
</view>
<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* 10 * 10).toFixed(0)}}
</view>
</view>
@ -136,8 +253,7 @@
￥{{recinfo.payRealPrice}}
</view>
<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 * 10 * 10).toFixed(0)}}
</view>
</view>
@ -149,8 +265,7 @@
￥{{recinfo.deductionPrice}}
</view>
<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 * 10 * 10).toFixed(0)}}
</view>
</view>
@ -202,9 +317,9 @@
{{recinfo.finishTime | formatDate('-')}}
</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="row">
<view class="left">
@ -282,7 +397,7 @@
{{preByOrderInfo.preUserRemark}}
</view>
</view>
</view>
</view> -->
<view class="width100 height60"></view>
<view class="footer" @click="orderComplete" v-if="preByOrderInfo && preByOrderInfo.status == 2">
@ -297,8 +412,7 @@
<view class="sum">合计:
<view class="money" v-if="recinfo.payType != 3">￥{{recinfo.payPrice}}</view>
<view class="money" 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}}
</view>
</view>
@ -306,6 +420,13 @@
<view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</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>
</template>
@ -332,7 +453,20 @@
imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg,
imgadres1: 'dhf.png',
preByOrderInfo:''
preByOrderInfo: '',
countdownh: '', //倒计时时
countdownm: '', // 倒计时分
countdowns: '', // 倒计时秒
timer: null, //重复执行
typeText: {
1: '待支付',
2: '已支付',
3: '已完成',
4: '已退款',
5: '已取消',
6: '退款中',
7: '退款失败'
},
};
},
@ -343,6 +477,9 @@
},
onHide() {
},
onUnload() {
clearInterval(this.timer);
},
onLoad(option) {
this.orderId = option.id
@ -408,8 +545,31 @@
}
})
},
//倒计时
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;
uni.showModal({
title: '预约完成',
@ -420,7 +580,7 @@
title: '加载中...'
})
let params = {
preOrderId : this.preByOrderInfo.id
preOrderId: this.preByOrderInfo.id
}
orderComplete(params).then(res => {
if (res.return_code == '000000') {
@ -507,7 +667,8 @@
uni.redirectTo({
url: "/pages/pay/payment/payment?amount=" + this.recinfo.payPrice +
'&paytype=' + payTypes + '&orderId=' + this.recinfo.id + '&couponId=' + this.recinfo
.highChildOrderList[0].goodsId + '&typeaout='+ this.recinfo.highChildOrderList[0].ext1+'&goodsType='+ this.recinfo.highChildOrderList[0].goodsType
.highChildOrderList[0].goodsId + '&typeaout=' + this.recinfo.highChildOrderList[0].ext1 +
'&goodsType=' + this.recinfo.highChildOrderList[0].goodsType
})
},
}
@ -515,6 +676,23 @@
</script>
<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 {
width: 86%;
padding: 20upx 3%;
@ -760,4 +938,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>

13
pages/user/order_list/order_list.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<view>
<!-- 搜索 -->
<view class="backcorfff width100 height120" style="position: fixed;top: 0px;z-index: 999;">
<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>
@ -20,7 +20,7 @@
</view>
</view>
<scroll-view scroll-x='true' class="srollview width100" scroll-with-animation>
<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>
@ -98,11 +98,11 @@
export default {
data() {
return {
headerPosition: "fixed",
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png',
imgadres1: 'dhf.png',
headerTop: "0px",
headerswper:'120px',
typeText: {
1: '等待付款',
2: '订单已支付',
@ -133,6 +133,7 @@
onLoad(option) {
// #ifdef H5
this.headerTop = '44px';
this.headerswper = '150px';
// #endif
let tbIndex = parseInt(option.tbIndex) + 1;
if (tbIndex == 0) {
@ -144,11 +145,6 @@
this.tabbarIndex = tbIndex;
this.getUserOrderList();
},
onPageScroll(e) {
return;
//兼容iOS端下拉时顶部漂移
this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
},
onReachBottom() {
this.getUserOrderList();
},
@ -445,7 +441,6 @@
position: fixed;
z-index: 999;
height: 50px;
top: 120px;
background-color: #f3f3f3;
display: flex;
flex-direction: row;

2
pages/welcome/welcome.vue
Unescape View File

@ -137,7 +137,7 @@
},
jumpcdx() {
location.href =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa075e8509802f826&redirect_uri=https%3A%2F%2Fhsg.dctpay.com%2FhsgH5%2Findex.html%23%2F&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa075e8509802f826&redirect_uri=https%3A%2F%2Fhsgcs.dctpay.com%2FhsgH5%2Findex.html%23%2F&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
},
}
}

7
qianzhu-KFC/order-details/order-details.vue
Unescape View File

@ -2,15 +2,10 @@
<view>
<view class="width100 paddtop10 paddbotm10 backcorfff fotct" v-if="orderList.orderStatus == 1">
<view class="height20"></view>
<view class="headstu font18 fontwig6">
<view class="headstu font24 fontwig6">
{{countdownm}}:{{countdowns}}
</view>
<!-- <view class="width100 font18 colorc72 mart5">
{{typeText[orderList.orderStatus]}}
</view> -->
<view class="width100 font13 fcor666 mart10">若超时未支付,订单将自动取消</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" style="background-color: #0F8FE8;" @click="jumppay()">立即支付
</view>
</view>

4
uni.scss
Unescape View File

@ -217,6 +217,10 @@ $uni-font-size-paragraph:30upx;
color: #666666;
}
.fcor777 {
color: #777777;
}
.fcor999 {
color: #b2b2b2;
}

Write Preview
Loading…
Cancel
Save