Browse Source

确认订单 文章详情 公告详情 支付结果等

test
Enzo 4 years ago
parent
commit
b36305fd40
  1. 1
      App.vue
  2. 3
      common/styles/common.css
  3. 4021
      common/styles/main.css
  4. 8
      common/styles/theme.css
  5. 46
      components/lf-price/lf-price.vue
  6. 16
      components/self-line/self-line.vue
  7. 24
      pages.json
  8. 54
      pages/discover/discover.vue
  9. 32
      pages/notice/article.vue
  10. 32
      pages/notice/notice.vue
  11. 103
      pages/order/confirm_order.vue
  12. 34
      pages/payState/paystate.vue

1
App.vue

@ -119,6 +119,7 @@
@import "@/uview-ui/index.scss"; @import "@/uview-ui/index.scss";
@import '@/common/styles/theme.css'; @import '@/common/styles/theme.css';
@import '@/common/styles/common.css'; @import '@/common/styles/common.css';
@import '@/common/styles/main.css';
// //
.btn-bottom { .btn-bottom {

3
common/styles/common.css

@ -1,5 +1,8 @@
/* 公共的 */ /* 公共的 */
/* 常用的 */ /* 常用的 */
.lf-line-through {
text-decoration: line-through;
}
.lf-w-100 { .lf-w-100 {
width: 100%; width: 100%;
} }

4021
common/styles/main.css
File diff suppressed because it is too large
View File

8
common/styles/theme.css

@ -100,6 +100,10 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
background: #777777 !important; background: #777777 !important;
} }
.lf-bg-blue {
background: #1998FE !important;
}
/* 一些常用的字体颜色 */ /* 一些常用的字体颜色 */
.lf-color-price { .lf-color-price {
color: #FF0000 !important; color: #FF0000 !important;
@ -115,4 +119,8 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
} }
.lf-color-333{ .lf-color-333{
color: #333333 !important; color: #333333 !important;
}
.lf-color-blue {
color: #1998FE !important;
} }

46
components/lf-price/lf-price.vue

@ -0,0 +1,46 @@
<template>
<view>
<block v-if="isPoint">
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text>
<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text>
</block>
<block v-else>
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }}</text>
</block>
</view>
</template>
<script>
export default {
props: {
price: {
type: [Number, String],
default: ''
}
},
computed: {
//
isPoint(){
let price = parseFloat(this.$props.price).toString();
return price.indexOf('.') >= 0;
},
showPrice(){
let price = parseFloat(this.$props.price).toString(); // .00
return function(type){
let price_arr = price.split('.');
if(type == 1){
return price_arr[0];
}else if(type == 2){
return price_arr[1];
}else{
return price_arr[0];
}
}
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>

16
components/self-line/self-line.vue

@ -0,0 +1,16 @@
<template>
<view class="bg-gray1 h-20" />
</template>
<script>
</script>
<style>
.h-20 {
height: 20rpx;
}
.bg-gray1 {
background-color: #F6F6F6;
color: #333333;
}
</style>

24
pages.json

@ -3,6 +3,30 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages "pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/notice/notice",
"style": {
"navigationBarTitleText": "公告详情"
}
},
{
"path": "pages/notice/article",
"style": {
"navigationBarTitleText": "文章"
}
},
{
"path": "pages/discover/discover",
"style": {
"navigationBarTitleText": "发现"
}
},
{
"path": "pages/order/confirm_order",
"style": {
"navigationBarTitleText": "确认订单"
}
},
{ {
"path": "pages/payState/paystate", "path": "pages/payState/paystate",
"style": { "style": {

54
pages/discover/discover.vue

@ -0,0 +1,54 @@
<template>
<view class="page-color">
<view class="padding-lr lf-p-t-30 lf-p-b-30">
<view class="bg-red card-discover lf-m-b-30">
<view>
<image src="../../static/images/empty.png" mode="aspectFill" style="width: 686rpx;height: 300rpx;"></image>
</view>
<view class="flex-direction bg-white discover-radius">
<view class="flex align-center text-center lf-p-30 solid-bottom" v-for="i of 3">
<view>
<image src="../../static/logo.png" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
</view>
<view class="lf-line-2 lf-color-333 lf-font-28 lf-text-left lf-m-l-20" style="line-height: 44rpx;">
南澳站·潮玩旅游胜地 身处亚热带风情心享甜美假日/玩转南澳
</view>
</view>
</view>
</view>
<view class="bg-red card-discover lf-m-b-30">
<view>
<image src="../../static/images/empty.png" mode="aspectFill" style="width: 686rpx;height: 300rpx;"></image>
</view>
<view class="flex-direction bg-white discover-radius">
<view class="flex align-center text-center lf-p-30 solid-bottom" v-for="i of 3">
<view>
<image src="../../static/logo.png" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
</view>
<view class="lf-line-2 lf-color-333 lf-font-28 lf-text-left lf-m-l-20" style="line-height: 44rpx;">
南澳站·潮玩旅游胜地 身处亚热带风情心享甜美假日/玩转南澳
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style scoped>
.page-color {
width: 100%;
height: 100%;
background-color: #F6F6F6;
}
.card-discover {
border-radius: 20rpx;
}
.discover-radius {
border-radius: 0 0 20rpx 20rpx;
}
</style>

32
pages/notice/article.vue

@ -0,0 +1,32 @@
<template>
<view>
<rich-text :nodes="content" v-if="content"></rich-text>
<my-nocontent v-else></my-nocontent>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</view>
</template>
<script>
export default {
data(){
return {
content: ''
}
},
onLoad(){
// this.getData();
},
methods: {
getData(){
this.$http(this.API.API_ARTICLE_QA).then(res => {
this.content = res.data?.content;
})
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>

32
pages/notice/notice.vue

@ -0,0 +1,32 @@
<template>
<view>
<rich-text :nodes="content" v-if="content"></rich-text>
<my-nocontent v-else></my-nocontent>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</view>
</template>
<script>
export default {
data(){
return {
content: ''
}
},
onLoad(){
// this.getData();
},
methods: {
getData(){
this.$http(this.API.API_ARTICLE_QA).then(res => {
this.content = res.data?.content;
})
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>

103
pages/order/confirm_order.vue

@ -0,0 +1,103 @@
<template>
<view>
<view class="lf-bg-white lf-p-t-30 lf-p-b-30 lf-p-l-32 lf-p-r-32">
<view class="lf-row-between">
<image src="../../static/logo.png" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 20rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box lf-font-32 lf-color-333 lf-line-2" style="height: 88rpx;line-height: 44rpx;">
南澳站·潮玩旅游胜地 身处亚热带风情/玩转南澳
</view>
<view class="flex lf-m-t-25 align-center text-center">
<text class="block lf-color-gray lf-font-24" style="line-height: 40rpx;">数量</text>
<text class="lf-m-l-10 lf-color-gray lf-font-24">x 1</text>
</view>
<view class="flex align-center text-center lf-m-t-25">
<lf-price :price="599.00" />
<view class="lf-m-l-20 lf-line-through lf-color-gray">
599.00
</view>
</view>
</view>
</view>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr">
<text class="lf-color-555 lf-font-28">优惠</text>
<text class="lf-color-price lf-font-28">活动优惠-50</text>
</view>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="lf-color-555 lf-font-28">联系人</text>
<input type="text" class="lf-color-999 lf-font-28 lf-text-right" placeholder="请输入联系人" />
</view>
<view class="cu-bar padding-lr">
<text class="lf-color-555 lf-font-28">联系方式</text>
<input type="text" class="lf-color-999 lf-font-28 lf-text-right" placeholder="请输入联系电话" />
</view>
</view>
<self-line/>
<view class="bg-white">
<view class="lf-p-t-30 lf-p-l-32 lf-p-b-36">
<view class="lf-font-28 lf-color-555">退款说明</view>
</view>
<view class="lf-p-r-32 lf-p-l-32">
<button class="cu-btn bg-white margin-self border-green" @tap="$url('/pages/order/order-details?order_id='+order_id,{type: 'launch'})">
<u-icon name="weixin-fill" class="text-green lf-font-44 lf-m-r-23"></u-icon>
<text class="lf-font-32 text-green">微信支付</text>
<u-icon name="checkmark-circle" class="lf-font-44" style="position: absolute;right: 22rpx;"></u-icon>
</button>
</view>
<view class="lf-p-r-32 lf-p-l-32 lf-m-t-30">
<button class="cu-btn bg-white margin-self border" @tap="$url('/pages/order/order-details?order_id='+order_id,{type: 'launch'})">
<text class="lf-font-32 lf-color-333">线下支付</text>
</button>
</view>
</view>
<view class="btn-bottom solid-top1">
<view class="padding-lr lf-p-t-10 lf-p-b-10 bg-white flex justify-between align-center shadow">
<view class="flex align-center">
<text class="lf-font-24 lf-font-555">应付款</text>
<lf-price :price="549.00" />
</view>
<button class="btn" @tap="submit">
<text class="lf-font-32 text-white" v-if="type == 1">立即付款</text>
<text class="lf-font-32 text-white" v-else>下单付款</text>
</button>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.btn{
margin: 0;
padding: 0;
width: 212rpx;
height: 82rpx;
background-color: #1998FE;
color: #FFFFFF;
line-height: 80rpx;
font-size: 32rpx;
border-radius: 41rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>

34
pages/payState/paystate.vue

@ -1,12 +1,12 @@
<template> <template>
<view> <view>
<view v-if="ifpaySuccess==1" class="flex flex-direction justify-around text-center align-center margin-bottom margin-top-lg">
<view v-if="ifpaySuccess==1" class="lf-flex lf-flex-column lf-row-round" style="margin-top: 100px;">
<view> <view>
<image src="@/static/images/empty.png" mode="widthFix" style="height: 100px;width: 100px;"></image> <image src="@/static/images/empty.png" mode="widthFix" style="height: 100px;width: 100px;"></image>
</view> </view>
<view class="text-xxl margin-tb text-orange text-bold">订单支付成功</view>
<view class="text-gray">
您可以在我的订单中查询订单详情
<view class="lf-m-t-40 lf-font-bold lf-color-black lf-font-42 lf-color-blue">订单支付成功</view>
<view class="lf-color-666 lf-m-t-20 lf-font-28">
您可以在我的订单中查询详情
</view> </view>
</view> </view>
<view v-else class="lf-flex lf-flex-column lf-row-round" style="margin-top: 100px;"> <view v-else class="lf-flex lf-flex-column lf-row-round" style="margin-top: 100px;">
@ -15,18 +15,18 @@
</view> </view>
<view class="lf-m-t-40 lf-font-bold lf-color-black lf-font-42 lf-color-333">订单支付失败</view> <view class="lf-m-t-40 lf-font-bold lf-color-black lf-font-42 lf-color-333">订单支付失败</view>
<view class="lf-color-666 lf-m-t-20 lf-font-28"> <view class="lf-color-666 lf-m-t-20 lf-font-28">
您可以在我的订单中查询订单详情
您可以在我的订单中查询详情
</view> </view>
</view> </view>
<view class="margin-top flex flex-direction justify-around"> <view class="margin-top flex flex-direction justify-around">
<view class="padding-top padding-lr-lg">
<button class="cu-btn block bg-orange lg margin-top round" @tap="$url('/pages/order/order-details?order_id='+order_id,{type: 'launch'})">
<text class="lf-font-32 text-white">查看订单</text>
<view class="lf-p-r-32 lf-p-l-32">
<button class="cu-btn margin-self" @tap="$url('/pages/order/order-details?order_id='+order_id,{type: 'launch'})">
<text class="lf-font-32 lf-color-white">查看订单</text>
</button> </button>
</view> </view>
<view class="padding-top-sm padding-lr-lg">
<button class="cu-btn block bg-white lg margin-top round" style="border: 1px solid #555;" @tap="$url('/pages/index/index',{type: 'switch'})">
<text class="lf-font-32" style="color: #555!important;">返回首页</text>
<view class="lf-p-r-32 lf-p-l-32 lf-m-t-40">
<button class="cu-btn lf-bg-white" style="border: 1px solid #1998FE;" @tap="$url('/pages/index/index',{type: 'switch'})">
<text class="lf-font-32 lf-color-blue">返回首页</text>
</button> </button>
</view> </view>
</view> </view>
@ -48,5 +48,15 @@
} }
</script> </script>
<style>
<style scoped>
.margin-self {
margin-top: 85rpx;
}
.cu-btn {
border-radius: 10rpx;
background-color: #1998FE;
height: 82rpx;
line-height: 82rpx;
text-align: center;
}
</style> </style>
Loading…
Cancel
Save