Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

test
Enzo 4 years ago
parent
1deb33f89b
commit
b36305fd40
12 changed files with 4362 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

3
common/styles/common.css
View File

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

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

8
common/styles/theme.css
View File

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

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

@ -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
View File

@ -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
View File

@ -3,6 +3,30 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://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",
"style": {

54
pages/discover/discover.vue
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -1,12 +1,12 @@
<template>
<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>
<image src="@/static/images/empty.png" mode="widthFix" style="height: 100px;width: 100px;"></image>
</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 v-else class="lf-flex lf-flex-column lf-row-round" style="margin-top: 100px;">
@ -15,18 +15,18 @@
</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>
</view>
<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>
</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>
</view>
</view>
@ -48,5 +48,15 @@
}
</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>
Write Preview
Loading…
Cancel
Save