Commit 0140521f authored by 黄奎's avatar 黄奎

页面调整

parent 9f0b0bf4
......@@ -3,27 +3,21 @@
<view style="width: 100%;height: 100%;">
<u-empty v-if="g.length==0" text="暂无数据" mode="data"></u-empty>
<template v-if="g.length > 0">
<view
style="
<view style="
height: calc(100vh);
width: calc(100vw);
overflow: hidden;
padding: 10px 0;
">
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
<view style="display: flex;flex-direction: column;align-items: center;">
<view v-for="(item, index) in g" :key="index" class="listbox">
<view class="box_t">
<u-avatar :src="item.Photo" size="64"></u-avatar>
<text style="margin-left: 15px;">{{item.UserName}}</text>
</view>
<view class="box_c" v-for="(x, index2) in item.DetailList" :key="index2">
<image :src="x.CoverImagePath" style="width: 65px;height: 65px;border-radius: 6px;" ></image>
<view class="box_c" v-for="(x, index2) in item.DetailList" :key="index2">
<image :src="x.CoverImagePath" style="width: 65px;height: 65px;border-radius: 6px;"></image>
<view style="width: calc(100vw - 30px - 65px - 15px);display: flex;flex-direction: column;margin-left: 15px;">
<view class="box_c_name">{{x.GoodsName}}</view>
<view class="box_c_name" style="font-size: 12px;color: #555555;margin-top: 3px;">
......@@ -32,12 +26,10 @@
</view>
<view class="box_r_b">
<text style="font-size: 12px;color: #555555;">X{{x.Number}}</text>
</view>
</view>
</view>
<view class="OrderNoStyle" >
<view class="OrderNoStyle">
<text>订单号:{{item.OrderNo}}</text>
<view style="font-size: 12px;color: #111111;">
<text>已得佣金:</text>
......@@ -45,24 +37,13 @@
<text></text>
</view>
</view>
</view>
</view>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
</scroll-view>
</view>
</template>
</view>
</view>
</template>
......@@ -71,91 +52,88 @@
data() {
return {
pageTitle: "账单详情",
contentHeight:0,
mainColor:'',
secondary:'',
g:[],
msg:{
contentHeight: 0,
mainColor: '',
secondary: '',
g: [],
msg: {
pageIndex: 1,
pageSize:10,
BillId:0
pageSize: 10,
BillId: 0
},
SelectBillState:0,
page_count:1,
SelectBillState: 0,
page_count: 1,
status: "loadmore",
loadText: {
loadmore: "轻轻上拉,加载更多",
loading: "努力加载中",
nomore: "没有更多了",
loadmore: "轻轻上拉,加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
}
},
created(){
this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
created() {
this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
uni.setNavigationBarTitle({
title: this.pageTitle,
title: this.pageTitle,
});
},
onLoad(options){
if(options){
onLoad(options) {
if (options) {
this.msg.BillId = options.ID
}
this.init()
this.init()
},
mounted() {
},
methods: {
init(){
init() {
uni.showLoading({
title: '加载中'
});
this.request2(
{
url: '/api/AppletUser/GetOrderBilldetailPageList',
data: this.msg
},
(res) => {
uni.hideLoading();
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
this.request2({
url: '/api/AppletUser/GetOrderBilldetailPageList',
data: this.msg
},
(res) => {
uni.hideLoading();
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
}
}
);
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.init();
} else {
this.status = "nomore";
}
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.init();
} else {
this.status = "nomore";
}
},
}
}
</script>
<style>
.billDetailsStyle{
background: #FAF8F9;
}
.billDetailsStyle {
background: #FAF8F9;
.billDetailsStyle .listbox{
}
.billDetailsStyle .listbox {
width: 100%;
margin-bottom: 10px;
padding: 15px;
......@@ -163,9 +141,9 @@
display: flex;
flex-direction: column;
align-items: center
}
.billDetailsStyle .box_t{
.billDetailsStyle .box_t {
display: flex;
flex-direction: row;
align-items: center;
......@@ -173,7 +151,8 @@
overflow: hidden;
height: 32px;
}
.billDetailsStyle .box_c{
.billDetailsStyle .box_c {
display: flex;
flex-direction: row;
align-items: center;
......@@ -181,7 +160,8 @@
overflow: hidden;
margin-top: 15px;
}
.billDetailsStyle .box_c_name{
.billDetailsStyle .box_c_name {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
......@@ -192,7 +172,8 @@
font-size: 13px;
color: #111111;
}
.billDetailsStyle .box_r_b{
.billDetailsStyle .box_r_b {
width: 100%;
display: flex;
flex-direction: row;
......@@ -200,7 +181,8 @@
justify-content: space-between;
margin-top: 3px;
}
.billDetailsStyle .OrderNoStyle{
.billDetailsStyle .OrderNoStyle {
width: 100%;
height: 35px;
background: #F8F6F5;
......@@ -212,6 +194,6 @@
margin-top: 15px;
padding: 0 15px;
justify-content: space-between;
}
</style>
This diff is collapsed.
This diff is collapsed.
<template>
<view class="paySuccess">
<view style="background: #fff;">
<view class="img-box">
<img src="/static/images/icon/pay-success.png" class="img" />
</view>
<view class="title">订单支付成功</view>
<view class="price">实付 ¥{{payInfo.total_price}}</view>
<view class="btn-box">
<u-button
style="display: inline-block;"
shape="circle"
:custom-style="customStyle"
@click="goHome"
>返回首页</u-button
>
<u-button
shape="circle"
style="margin-left: 60rpx; display: inline-block;"
:custom-style="themCustomStyle"
@click.stop="redictToOrders"
>查看订单</u-button
>
</view>
</view>
<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">
<view style="display: flex;">
<u-icon name="like" size="20px" :color="mainColor"></u-icon>
<text style="margin-left: 5px;">为你推荐</text>
</view>
</u-divider>
<view style="padding: 12px;" v-if="recommend.length > 0">
<goodlist :list="recommend"></goodlist>
</view>
<coupon
v-if="showCoupons"
:coupon-message="couponMessage"
@goLook="goLook"
@closeBtn="closeBtn"
></coupon>
</view>
<view class="paySuccess">
<view style="background: #fff;">
<view class="img-box">
<img src="/static/images/icon/pay-success.png" class="img" />
</view>
<view class="title">订单支付成功</view>
<view class="price">实付 ¥{{payInfo.total_price}}</view>
<view class="btn-box">
<u-button style="display: inline-block;" shape="circle" :custom-style="customStyle" @click="goHome">返回首页</u-button>
<u-button shape="circle" style="margin-left: 60rpx; display: inline-block;" :custom-style="themCustomStyle"
@click.stop="redictToOrders">查看订单</u-button>
</view>
</view>
<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">
<view style="display: flex;">
<u-icon name="like" size="20px" :color="mainColor"></u-icon>
<text style="margin-left: 5px;">为你推荐</text>
</view>
</u-divider>
<view style="padding: 12px;" v-if="recommend.length > 0">
<goodlist :list="recommend"></goodlist>
</view>
<coupon v-if="showCoupons" :coupon-message="couponMessage" @goLook="goLook" @closeBtn="closeBtn"></coupon>
</view>
</template>
<script>
import goodlist from "@/components/goods/list";
import coupon from "@/components/coupons/coupons";
export default {
components: {
goodlist,
coupon
},
data() {
return {
customStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
themCustomStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
mainColor: "",
recommend: [],
payInfo:{},
showCoupons:false,
couponMessage:'',
};
},
onLoad(option) {
if (option.payInfo) {
this.payInfo=JSON.parse(option.payInfo)
}
uni.setNavigationBarTitle({
title: "支付成功",
});
this.mainColor = this.$uiConfig.mainColor;
this.themCustomStyle.color = this.mainColor;
this.themCustomStyle.borderColor = this.mainColor;
this.getReceive()
this.initRecommend();
},
methods: {
initRecommend() {
var UserPageType = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
this.request2(
{
url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
data: {
RecommendType: 1,
GoodsPageType:UserPageType
},
},
(res) => {
this.recommend = res.data.List;
}
);
},
redictToOrders() {
if(this.payInfo.type){
if(this.payInfo.type==1){//跳到课程订单
uni.reLaunch({
url:'/pages/school/personal/orderList?status=2'
});
import goodlist from "@/components/goods/list";
import coupon from "@/components/coupons/coupons";
export default {
components: {
goodlist,
coupon
},
data() {
return {
customStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
themCustomStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
mainColor: "",
recommend: [],
payInfo: {},
showCoupons: false,
couponMessage: '',
};
},
onLoad(option) {
if (option.payInfo) {
this.payInfo = JSON.parse(option.payInfo)
}
}else{
uni.reLaunch({
url: "/pages/order/index/index?status=2",
uni.setNavigationBarTitle({
title: "支付成功",
});
}
},
goHome() {
uni.reLaunch({
url: "/pages/index/index",
});
},
getReceive(){//分享进入调取领券接口
// 1-分享,2-购买并付款
this.request2(
{
url: "/api/AppletUser/ShareCoupon",
data: {
TriggerType: 2,
},
},
(res) => {
console.log(res,'res')
if(res.couponResultCode ==1){
this.couponMessage = res.couponMessage
this.mainColor = this.$uiConfig.mainColor;
this.themCustomStyle.color = this.mainColor;
this.themCustomStyle.borderColor = this.mainColor;
this.getReceive()
this.initRecommend();
},
methods: {
initRecommend() {
var UserPageType = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
this.request2({
url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
data: {
RecommendType: 1,
GoodsPageType: UserPageType
},
},
(res) => {
this.recommend = res.data.List;
}
);
},
redictToOrders() {
if (this.payInfo.type) {
if (this.payInfo.type == 1) { //跳到课程订单
uni.reLaunch({
url: '/pages/school/personal/orderList?status=2'
});
}
} else {
uni.reLaunch({
url: "/pages/order/index/index?status=2",
});
}
},
goHome() {
uni.reLaunch({
url: "/pages/index/index",
});
},
getReceive() { //分享进入调取领券接口
// 1-分享,2-购买并付款
this.request2({
url: "/api/AppletUser/ShareCoupon",
data: {
TriggerType: 2,
},
},
(res) => {
console.log(res, 'res')
if (res.couponResultCode == 1) {
this.couponMessage = res.couponMessage
this.showCoupons = true;
}
}
);
},
goLook() {
this.showCoupons = true;
},
closeBtn() {
this.showCoupons = false
}
}
);
},
goLook(){
this.showCoupons = true;
},
closeBtn(){
this.showCoupons = false
}
},
};
},
};
</script>
<style>
.paySuccess {
min-height: 100vh;
padding-bottom: 40rpx;
background: #f5f5f5;
}
.paySuccess .img-box {
display: flex;
align-items: center;
justify-content: center;
}
.paySuccess .img-box .img {
width: 256rpx;
height: 256rpx;
padding: 60rpx 0 0 0;
}
.paySuccess .title {
padding: 40rpx 0 20rpx 0;
font-size: 32rpx;
color: #000;
font-weight: 600;
text-align: center;
}
.paySuccess .price {
font-size: 30rpx;
color: gray;
padding-bottom: 60rpx;
text-align: center;
}
.paySuccess .btn-box {
padding-bottom: 60rpx;
text-align: center;
}
.paySuccess {
min-height: 100vh;
padding-bottom: 40rpx;
background: #f5f5f5;
}
.paySuccess .img-box {
display: flex;
align-items: center;
justify-content: center;
}
.paySuccess .img-box .img {
width: 256rpx;
height: 256rpx;
padding: 60rpx 0 0 0;
}
.paySuccess .title {
padding: 40rpx 0 20rpx 0;
font-size: 32rpx;
color: #000;
font-weight: 600;
text-align: center;
}
.paySuccess .price {
font-size: 30rpx;
color: gray;
padding-bottom: 60rpx;
text-align: center;
}
.paySuccess .btn-box {
padding-bottom: 60rpx;
text-align: center;
}
</style>
<template>
<view class="express">
<view class="status-box">
<view class="item">
<view class="name">快递公司:</view>
<view class="val">{{ express }}</view>
</view>
<view class="item">
<view class="name">运单号:</view>
<view class="val">{{ express_no }}</view>
<view style='margin-left: 20px;'>
<u-button size="mini" shape="circle" @click="paste(express_no)"
>复制</u-button
>
<view class="express">
<view class="status-box">
<view class="item">
<view class="name">快递公司:</view>
<view class="val">{{ express }}</view>
</view>
<view class="item">
<view class="name">运单号:</view>
<view class="val">{{ express_no }}</view>
<view style='margin-left: 20px;'>
<u-button size="mini" shape="circle" @click="paste(express_no)">复制</u-button>
</view>
</view>
</view>
</view>
<!-- <view class="item">
<view class="name">运送状态:</view>
<view class="val" :style="{ color: mainColor }">{{
d.status_text
}}</view>
</view> -->
</view>
<view
style="
margin-top: 40rpx;
background: #fff;
padding: 40rpx;
border-radius: 20rpx;
"
>
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:node>
<view
class="u-node meudim"
:style="{ background: mainColor, color: '#FFF' }"
>收</view
>
</template>
<template v-slot:content>
<view>
<view
class="u-order-desc"
style="
padding-bottom: 60rpx;
margin-top: 5rpx;
font-size: 26rpx;
"
>收货地址:{{address}}</view
>
</view>
</template>
</u-time-line-item>
<!-- <u-time-line-item nodeTop="2" v-if="d.status == 3">
<template v-slot:node>
<view class="u-node" :style="{ background: mainColor }">
<u-icon name="success" color="#fff" :size="32"></u-icon>
</view>
</template>
<template v-slot:content>
<view style="padding-bottom: 30rpx;color:#000 !important;">
<view class="u-order-title">已签收</view>
<view class="u-order-desc">{{ last.desc }}</view>
<view class="u-order-time">{{ last.datetime }}</view>
</view>
</template>
</u-time-line-item> -->
<u-time-line-item v-for="(x, i) in d" :key="i">
<!-- 此处没有自定义左边的内容,会默认显示一个点 -->
<template v-slot:content>
<view style="padding-bottom: 30rpx;" :style="{color:(i==0)?'#000 !important':'gray'}">
<view class="u-order-desc">{{ x.AcceptStation!=null? x.AcceptStation:'' }}</view>
<view class="u-order-desc">{{ x.Remark !=null? x.Remark:''}}</view>
<view class="u-order-time">{{ x.AcceptTime !=null? x.AcceptTime:''}}</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
</view>
</view>
<view style="margin-top: 40rpx;background: #fff;padding: 40rpx;border-radius: 20rpx;">
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:node>
<view class="u-node meudim" :style="{ background: mainColor, color: '#FFF' }">收</view>
</template>
<template v-slot:content>
<view>
<view class="u-order-desc" style="padding-bottom: 60rpx;margin-top: 5rpx;font-size: 26rpx;">收货地址:{{address}}</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item v-for="(x, i) in d" :key="i">
<!-- 此处没有自定义左边的内容,会默认显示一个点 -->
<template v-slot:content>
<view style="padding-bottom: 30rpx;" :style="{color:(i==0)?'#000 !important':'gray'}">
<view class="u-order-desc">{{ x.AcceptStation!=null? x.AcceptStation:'' }}</view>
<view class="u-order-desc">{{ x.Remark !=null? x.Remark:''}}</view>
<view class="u-order-time">{{ x.AcceptTime !=null? x.AcceptTime:''}}</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mainColor: "",
d: [],
loading: false,
last: {},
express:'',
express_no:'',
address:'',
};
},
onLoad(option) {
uni.setNavigationBarTitle({
title: "物流信息",
});
this.mainColor = this.$uiConfig.mainColor;
this.express = option.express || "圆通速递";
this.express_no = option.no || "YT2042624009816";
this.address = option.address || "四川成都市高新西区万景峰二期";
this.id = option.id || 0;
this.init(this.id,this.express_no);
},
methods: {
init(id,express_no) {
// let h = this.apiheader();
// this.request(
// {
// url: "",
// header: h,
// data: {
// r: "api/order/express-detail",
// express: this.express,
// express_no: this.express_no,
// customer_name: "",
// },
// },
// (res) => {
// this.loading = false;
// this.d = res.data.express;
// this.d.list = this.d.list.reverse();
// if (this.d.status == 3) {
// this.last = this.d.list[0];
// this.d.list.splice(0, 1);
// }
// }
// );
this.request2(
{
url: "/api/AppletOrder/GetOrderExpressInfo",
data: {
ExpressId: id,
ExpressNumber: express_no,
},
},
(res) => {
this.d = res.data;
}
);
},
paste(value) {
uni.setClipboardData({
data: value,
});
},
},
};
export default {
data() {
return {
mainColor: "",
d: [],
loading: false,
last: {},
express: '',
express_no: '',
address: '',
};
},
onLoad(option) {
uni.setNavigationBarTitle({
title: "物流信息",
});
this.mainColor = this.$uiConfig.mainColor;
this.express = option.express || "圆通速递";
this.express_no = option.no || "YT2042624009816";
this.address = option.address || "四川成都市高新西区万景峰二期";
this.id = option.id || 0;
this.init(this.id, this.express_no);
},
methods: {
init(id, express_no) {
this.request2({
url: "/api/AppletOrder/GetOrderExpressInfo",
data: {
ExpressId: id,
ExpressNumber: express_no,
},
},
(res) => {
this.d = res.data;
}
);
},
paste(value) {
uni.setClipboardData({
data: value,
});
},
},
};
</script>
<style>
.express {
min-height: 100vh;
background: #f5f5f5;
font-family: "aaa";
}
.express .status-box {
background: #fff;
padding: 60rpx 40rpx;
padding-bottom: 0;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.express .status-box .item {
display: flex;
align-items: center;
padding-bottom: 40rpx;
}
.express .status-box .item .name {
font-size: 24rpx;
color: #888;
width: 120rpx;
margin-right: 40rpx;
}
.express .status-box .item .val {
font-family: "aaa";
font-size: 28rpx;
color: #000;
font-weight: 600;
width: 1rpx;
flex: 1;
}
.u-node {
width: 44rpx;
height: 44rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #d0d0d0;
}
.u-node.meudim {
width: 40rpx;
height: 40rpx;
font-size: 24rpx;
}
.express {
min-height: 100vh;
background: #f5f5f5;
font-family: "aaa";
}
.express .status-box {
background: #fff;
padding: 60rpx 40rpx;
padding-bottom: 0;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.express .status-box .item {
display: flex;
align-items: center;
padding-bottom: 40rpx;
}
.express .status-box .item .name {
font-size: 24rpx;
color: #888;
width: 120rpx;
margin-right: 40rpx;
}
.express .status-box .item .val {
font-family: "aaa";
font-size: 28rpx;
color: #000;
font-weight: 600;
width: 1rpx;
flex: 1;
}
.u-node {
width: 44rpx;
height: 44rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #d0d0d0;
}
.u-node.meudim {
width: 40rpx;
height: 40rpx;
font-size: 24rpx;
}
.u-order-title {
color: #333333;
font-weight: bold;
font-size: 32rpx;
margin-bottom: 20rpx;
}
.u-order-title {
color: #333333;
font-weight: bold;
font-size: 32rpx;
margin-bottom: 20rpx;
}
.u-order-desc {
/* color: rgb(150, 150, 150); */
font-size: 28rpx;
margin-bottom: 10rpx;
}
.u-order-desc {
font-size: 28rpx;
margin-bottom: 10rpx;
}
.u-order-time {
/* color: rgb(200, 200, 200); */
font-size: 26rpx;
}
.u-order-time {
font-size: 26rpx;
}
</style>
<template>
<view>
订单首页
</view>
<view>
订单首页
</view>
</template>
<script>
export default {
export default {
}
}
</script>
<style>
</style>
\ No newline at end of file
</style>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment