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

订单部分

master
Enzo 4 years ago
parent
e88566a136
commit
8c43d2a794
29 changed files with 1047 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      App.vue
  2. 2
      colorui/icon.css
  3. 31
      colorui/main.css
  4. 4
      common/styles/common.css
  5. 1
      components/me-tabs/me-tabs.vue
  6. 2
      components/mescroll-uni/mescroll-body.vue
  7. 16
      components/self-line/self-line.vue
  8. 11
      main.js
  9. 52
      package-lock.json
  10. 44
      pages.json
  11. 200
      pages/order/apply-details.vue
  12. 214
      pages/order/apply-refund.vue
  13. 217
      pages/order/confirm-order.vue
  14. 2
      pages/order/index.vue
  15. 211
      pages/order/order-details.vue
  16. 4
      pages/order/order-item.vue
  17. 54
      pages/order/pay-success.vue
  18. BIN
      static/images/logo.gif
  19. BIN
      static/images/mescroll-empty.png
  20. BIN
      static/images/system/payfail.png
  21. BIN
      static/images/system/paysuccess.png
  22. BIN
      static/images/system/refresh.png
  23. BIN
      static/images/system/user-default.jpg
  24. BIN
      static/tabbar/home-active.png
  25. BIN
      static/tabbar/home.png
  26. BIN
      static/tabbar/my-active.png
  27. BIN
      static/tabbar/my.png
  28. BIN
      static/tabbar/order-active.png
  29. BIN
      static/tabbar/order.png

8
App.vue
View File

@ -19,6 +19,14 @@
@import "@/colorui/animation.css"; @import "@/colorui/animation.css";
@import '@/common/styles/common.css'; @import '@/common/styles/common.css';
/*每个页面公共css */ /*每个页面公共css */
//底部按钮
.btn-bottom {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 1;
}
// loading加载 // loading加载
.loading-more { .loading-more {

2
colorui/icon.css
View File

@ -430,7 +430,7 @@
} }
.cuIcon-fold:before { .cuIcon-fold:before {
content: "\e6de";
/* content: "\e6de"; */
} }
.cuIcon-game:before { .cuIcon-game:before {

31
colorui/main.css
View File

@ -331,10 +331,10 @@ checkbox.green.checked .uni-checkbox-input,
checkbox.checked .uni-checkbox-input, checkbox.checked .uni-checkbox-input,
radio.green.checked .uni-radio-input, radio.green.checked .uni-radio-input,
radio.checked .uni-radio-input { radio.checked .uni-radio-input {
background-color: #39b54a !important;
border-color: #39b54a !important;
/* background-color: #39b54a !important;
border-color: #39b54a !important; */
color: #ffffff !important; color: #ffffff !important;
border-color: #39B54A !important;
/* border-color: #39B54A !important; */
} }
switch.cyan[checked] .wx-switch-input, switch.cyan[checked] .wx-switch-input,
@ -3383,6 +3383,9 @@ scroll-view.cu-steps .cu-item {
.fr { .fr {
float: right; float: right;
} }
.border {
border: 1px solid #ccc;
}
/* ================== /* ==================
背景 背景
@ -3469,8 +3472,8 @@ scroll-view.cu-steps .cu-item {
} }
.bg-orange { .bg-orange {
background-color: #FE9903;
color: #ffffff;
background-color: #FE9903!important;
color: #ffffff!important;
} }
.bg-yellow { .bg-yellow {
@ -3494,10 +3497,14 @@ scroll-view.cu-steps .cu-item {
} }
.bg-blue { .bg-blue {
background-color: #0081ff;
background-color: #1E89FF!important;
color: #ffffff; color: #ffffff;
} }
.border-blue {
border: 1px solid #1E89FF!important;
}
.bg-purple { .bg-purple {
background-color: #6739b6; background-color: #6739b6;
color: #ffffff; color: #ffffff;
@ -3524,8 +3531,8 @@ scroll-view.cu-steps .cu-item {
} }
.bg-gray { .bg-gray {
background-color: #f0f0f0;
color: #333333;
background-color: #999999!important;
color: white!important;
} }
.bg-black { .bg-black {
@ -3890,7 +3897,7 @@ scroll-view.cu-steps .cu-item {
.text-orange, .text-orange,
.line-orange, .line-orange,
.lines-orange { .lines-orange {
color: #f37b1d;
color: #FE9903;
} }
.text-yellow, .text-yellow,
@ -3908,7 +3915,7 @@ scroll-view.cu-steps .cu-item {
.text-green, .text-green,
.line-green, .line-green,
.lines-green { .lines-green {
color: #39b54a;
color: #10CB3B;
} }
.text-cyan, .text-cyan,
@ -3920,7 +3927,7 @@ scroll-view.cu-steps .cu-item {
.text-blue, .text-blue,
.line-blue, .line-blue,
.lines-blue { .lines-blue {
color: #0081ff;
color: #1E89FF!important;
} }
.text-purple, .text-purple,
@ -3956,7 +3963,7 @@ scroll-view.cu-steps .cu-item {
.text-gray, .text-gray,
.line-gray, .line-gray,
.lines-gray { .lines-gray {
color: #aaaaaa;
color: #777777;
} }
.text-black, .text-black,

4
common/styles/common.css
View File

@ -14,13 +14,13 @@ uni-radio .uni-radio-input {
/* #ifdef H5 */ /* #ifdef H5 */
radio .uni-radio-input, radio .uni-radio-input,
checkbox .uni-checkbox-input { checkbox .uni-checkbox-input {
border-radius: 50%;
/* border-radius: 50%; */
transform: scale(0.8); transform: scale(0.8);
} }
radio .uni-radio-input.uni-radio-input-checked, radio .uni-radio-input.uni-radio-input-checked,
checkbox .uni-checkbox-input.uni-checkbox-input-checked { checkbox .uni-checkbox-input.uni-checkbox-input-checked {
border-radius: 50%;
/* border-radius: 50%; */
border: 1px solid #FF4B48 !important; border: 1px solid #FF4B48 !important;
background: #FF4B48 !important; background: #FF4B48 !important;
color: #FFFFFF !important; color: #FFFFFF !important;

1
components/me-tabs/me-tabs.vue
View File

@ -137,6 +137,7 @@
box-sizing: border-box; box-sizing: border-box;
overflow-y: hidden; overflow-y: hidden;
background-color: #FE9903; background-color: #FE9903;
border-radius: 10px;
// box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, .1); // box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, .1);
&.tabs-fixed { &.tabs-fixed {

2
components/mescroll-uni/mescroll-body.vue
View File

@ -11,7 +11,7 @@
<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> --> <!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
<view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}"> <view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
<view class="downwarp-content"> <view class="downwarp-content">
<image style="width: 80rpx;" src="/static/images/logo.gif" mode="widthFix"></image>
<image style="width: 80rpx;" src="../../static/images/logo.gif" mode="widthFix"></image>
<view class="margin-top-sm"> <view class="margin-top-sm">
<view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view> <view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
<view class="downwarp-tip">{{downText}}</view> <view class="downwarp-tip">{{downText}}</view>

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: 10px;
}
.bg-gray1 {
background-color: #f7f7fb;
color: #333333;
}
</style>

11
main.js
View File

@ -30,6 +30,17 @@ Vue.component('my-nocontent', myNocontent);
import aMount from './components/amount/index.vue' import aMount from './components/amount/index.vue'
Vue.component('amount', aMount) Vue.component('amount', aMount)
Vue.prototype.$toast=msg=>{
uni.showToast({
icon:'none',
title:msg
})
}
//H5复制到剪切板
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
//路由跳转 //路由跳转
Vue.prototype.$routerGo = (obj) => { Vue.prototype.$routerGo = (obj) => {
uni.navigateTo({ uni.navigateTo({

52
package-lock.json
View File

@ -0,0 +1,52 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"clipboard": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"tki-qrcode": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/tki-qrcode/-/tki-qrcode-0.1.6.tgz",
"integrity": "sha512-EnnlS8psowC7PsW3MDYcxvJYkuklX3WAZ/BYanR4TdBHTu74GfjTBX8Y16REP+AeDENiVtBPh4jtTRL2P736hQ=="
},
"vue-clipboard2": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
"integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
"requires": {
"clipboard": "^2.0.0"
}
}
}
}

44
pages.json
View File

@ -16,6 +16,36 @@
"navigationBarTitleText": "我的订单" "navigationBarTitleText": "我的订单"
} }
}, },
{
"path": "pages/order/order-details",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/order/confirm-order",
"style": {
"navigationBarTitleText": "确认订单"
}
},
{
"path": "pages/order/pay-success",
"style": {
"navigationBarTitleText": "支付结果"
}
},
{
"path": "pages/order/apply-refund",
"style": {
"navigationBarTitleText": "申请退款"
}
},
{
"path": "pages/order/apply-details",
"style": {
"navigationBarTitleText": "退款详情"
}
},
{ {
"path": "pages/center/index", "path": "pages/center/index",
"style": { "style": {
@ -31,24 +61,24 @@
}, },
"tabBar": { "tabBar": {
"color": "#909399", "color": "#909399",
"selectedColor": "#303133",
"selectedColor": "#FE9903",
"borderStyle": "black", "borderStyle": "black",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff",
"list": [{ "list": [{
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
"iconPath": "static/tabbar/index.png",
"selectedIconPath": "static/tabbar/index-selected.png",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png",
"text": "首页" "text": "首页"
}, { }, {
"pagePath": "pages/order/index", "pagePath": "pages/order/index",
"iconPath": "static/tabbar/center.png",
"selectedIconPath": "static/tabbar/center-selected.png",
"iconPath": "static/tabbar/order.png",
"selectedIconPath": "static/tabbar/order-active.png",
"text": "订单" "text": "订单"
}, },
{ {
"pagePath": "pages/center/index", "pagePath": "pages/center/index",
"iconPath": "static/tabbar/center.png",
"selectedIconPath": "static/tabbar/center-selected.png",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/my-active.png",
"text": "我的" "text": "我的"
} }
] ]

200
pages/order/apply-details.vue
View File

@ -0,0 +1,200 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
</view>
<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g <text class="margin-left text-gray">x1</text></text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<view>
<button class="cu-btn border-blue bg-white text-blue round margin-left-sm text-sm">等待审核</button>
</view>
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-red text-price text-lg">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">67432428794847982374</text>
<text class="text-orange text-sm" @tap="copy('67432428794847982374')">复制</text>
</view>
</view>
</view>
<self-line/>
<view class="padding bg-white" style="border-radius: 6rpx 6rpx 0 0">
<view class="cu-self menu">
<view class="text-gray">退款说明</view>
</view>
<view class="cu-self menu margin-top">
<view class="text-gray">看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！看着不是很新鲜了，然后还有一些都烂了！！！</view>
</view>
</view>
<view class="cu-form-group solid-bottom">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
skeletonLoading: true,
loading: false,
// 选择的本地图片路径
hostImg: '',
// 已上传服务器的图片名称
serverImg:'',
}
},
computed: {
},
onLoad(e) {
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
},1000)
},
methods: {
// 选择图片
ChooseImage(e) {
uni.chooseImage({
count: 1,
success: e => {
this.hostImg = e.tempFilePaths[0];
}
});
},
// 预览图片
showImg() {
uni.previewImage({
urls: ['../../static/tu.png']
});
},
// 删除图片
DelImg() {
uni.showModal({
title: '提示',
content: '即将取消上传这张图片，请确认？',
success: e => {
if (!e.confirm) return;
this.hostImg = '';
this.serverImg = '';
}
});
},
// 点击复制
copy(text) {
//app的复制方法
// #ifdef APP-PLUS
uni.setClipboardData({
data: text
});
// #endif
//html的复制方法
// #ifdef H5
this.$copyText(text)
.then(res => {
uni.showToast({
title: '复制成功'
});
})
.catch(err => {
uni.showToast({
icon: 'none',
title: '复制失败，您的浏览器不支持'
});
});
// #endif
},
//下拉刷新
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
this.mescroll.endErr(); // 请求失败,隐藏加载状态
},1000)
},
}
}
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

214
pages/order/apply-refund.vue
View File

@ -0,0 +1,214 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
</view>
<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g <text class="margin-left text-gray">x1</text></text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-red text-price text-lg">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">67432428794847982374</text>
<text class="text-orange text-sm" @tap="copy('67432428794847982374')">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">退款说明</text>
<input type="text" class="text-right text-df" placeholder="请输入反馈信息" />
</view>
</view>
<self-line/>
<view class="padding bg-white" style="border-radius: 6rpx 6rpx 0 0">
<view class="cu-self menu">
<view class="text-gray">请上传退款凭证</view>
</view>
</view>
<view class="cu-form-group solid-bottom">
<view class="grid col-4 grid-square flex-sub">
<view class="solids" @tap="ChooseImage" v-if="hostImg == ''"><text class="cuIcon-cameraadd"></text></view>
<view class="bg-img" v-else>
<image :src="hostImg" @tap="showImg" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg"><text class="cuIcon-close"></text></view>
</view>
</view>
</view>
<view class="padding-top-sm padding-lr-lg">
<button class="cu-btn block bg-orange lg margin-top round" @tap="$routerGo('/pages/order/apply-details')">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">确认申请</text>
</button>
</view>
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
skeletonLoading: true,
loading: false,
// 选择的本地图片路径
hostImg: '',
// 已上传服务器的图片名称
serverImg:'',
}
},
computed: {
},
onLoad(e) {
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
},1000)
},
methods: {
// 选择图片
ChooseImage(e) {
uni.chooseImage({
count: 1,
success: e => {
this.hostImg = e.tempFilePaths[0];
this.upload(this.hostImg)
}
});
},
// 上传图片到服务器
upload(url){
this.$http.upload({
url: '/user/api/file/image',
data: url,
}).then(res=>{
let imgurl = JSON.parse(res.data)
this.serverImg=imgurl.data;
})
},
// 预览图片
showImg() {
uni.previewImage({
urls: [this.hostImg]
});
},
// 删除图片
DelImg() {
uni.showModal({
title: '提示',
content: '即将取消上传这张图片，请确认？',
success: e => {
if (!e.confirm) return;
this.hostImg = '';
this.serverImg = '';
}
});
},
// 点击复制
copy(text) {
//app的复制方法
// #ifdef APP-PLUS
uni.setClipboardData({
data: text
});
// #endif
//html的复制方法
// #ifdef H5
this.$copyText(text)
.then(res => {
uni.showToast({
title: '复制成功'
});
})
.catch(err => {
uni.showToast({
icon: 'none',
title: '复制失败，您的浏览器不支持'
});
});
// #endif
},
//下拉刷新
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
this.mescroll.endErr(); // 请求失败,隐藏加载状态
},1000)
},
}
}
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

217
pages/order/confirm-order.vue
View File

@ -0,0 +1,217 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt" style="min-height: 645px;">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
</view>
<view class="flex justify-between">
<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g</text>
<view class="flex align-center margin-top-sm">
<text class="cuIcon-move" @tap="reduce"></text>
<input type="number" v-model="num" class="text-center margin-lr-sm radius" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
<text class="cuIcon-add" @tap="add"></text>
</view>
</view>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(19.90*num || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<!-- <view>
<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm">申请退款</button>
<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
</view> -->
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
</view>
</view>
<self-line/>
</mescroll-body>
<view class="btn-bottom">
<view class="padding flex justify-around align-center">
<view class="margin-right">
<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view>
<view class="text-sm text-gray">请认真阅读并同意《时空网协议》，在小程序下单购买即表示您已默认同意《时空网协议》的所有条款。</view>
</view>
<self-line/>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top shadow">
<view class="flex align-center">
<text class="">应付款：</text>
<view class="text-lg text-price text-red">
<amount :value="Number(total || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<button class="cu-btn block bg-orange round shadow" @tap="submit">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
</button>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "tki-qrcode" // 二维码生成器
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
num: 1,
area: '币种地址',
base64Img: '', //
skeletonLoading: true,
payCur: 0, //支付方式下标
loading: false,
address: {},
shopData: {},
payPwd: '',
price: '', //价格
checkbox: [{
value: 'A',
checked: true
}, {
value: 'B',
checked: true
}, {
value: 'C',
checked: false
}],
}
},
components: {
tkiQrcode
},
computed: {
disabled() {
// 必须输入 邮箱和验证码 才能点击下一步
// if (this.payPwd) return false
return true
},
total(){
return this.num * this.price
}
},
onLoad(e) {
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
},1000)
},
methods: {
reduce() {
if (this.num === 1) return
this.num--
},
add() {
this.num++
},
CheckboxChange(e) {
var items = this.checkbox,
values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value == values[j]) {
items[i].checked = true;
break
}
}
}
},
//二维码回调
qrR(data) {
this.base64Img = data;
},
// 点击复制
copy(text) {
//app的复制方法
// #ifdef APP-PLUS
uni.setClipboardData({
data: text
});
// #endif
//html的复制方法
// #ifdef H5
this.$copyText(text)
.then(res => {
uni.showToast({
title: '复制成功'
});
})
.catch(err => {
uni.showToast({
icon: 'none',
title: '复制失败，您的浏览器不支持'
});
});
// #endif
},
submit(){
this.$routerGo('/pages/order/pay-success')
},
//下拉刷新
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
this.mescroll.endErr(); // 请求失败,隐藏加载状态
},1000)
},
}
}
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

2
pages/order/index.vue
View File

@ -44,7 +44,7 @@
this.assetsType = e.type this.assetsType = e.type
this.tabIndex = this.assetsType === 'all' ? 0 : this.assetsType === 'delivered' ? 1 : this.assetsType === 'receiving' ? 2 : 0 this.tabIndex = this.assetsType === 'all' ? 0 : this.assetsType === 'delivered' ? 1 : this.assetsType === 'receiving' ? 2 : 0
// 需要固定swiper的高度 // 需要固定swiper的高度
this.height = (uni.getSystemInfoSync().windowHeight -30) + 'px'
this.height = (uni.getSystemInfoSync().windowHeight) + 'px'
}, },
methods: { methods: {

211
pages/order/order-details.vue
View File

@ -0,0 +1,211 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
</view>
<text class="block margin-top-sm text-gray text-sm">网红辣椒棒 500g <text class="margin-left text-gray">x1</text></text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<view>
<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
</view>
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">67432428794847982374</text>
<text class="text-orange text-sm">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">下单时间</text>
<text>2021-6-17 15:35:46</text>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">付款时间</text>
<text>微信支付</text>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">支付方式</text>
<text>2021-6-17 15:35:46</text>
</view>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
</view>
</view>
<self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<tki-qrcode ref="qrcode" @result="qrR" :val="area" :size="120" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/user-default.jpg')" />
</view>
<view class="flex justify-around align-center text-center margin-top-sm">
<view>
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view>
<view class="text-lg">SP738644872</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
</view>
<view class="margin-top-sm text-green text-sm">
待使用
</view>
</view>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top">
<view class="flex align-center">
<text class="text-gray text-sm">已付款：</text>
<view class="text-lg text-price text-red">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<view>
已付款
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
import tkiQrcode from "tki-qrcode" // 二维码生成器
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
area: '币种地址',
base64Img: '', //
skeletonLoading: true,
payCur: 0, //支付方式下标
loading: false,
address: {},
shopData: {},
num: 0,
payPwd: '',
price: '', //价格
}
},
components: {
tkiQrcode
},
computed: {
disabled() {
// 必须输入 邮箱和验证码 才能点击下一步
if (this.payPwd) return false
return true
},
total(){
return this.num * this.price
}
},
onLoad(e) {
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
},1000)
},
methods: {
//二维码回调
qrR(data) {
this.base64Img = data;
},
// 点击复制
copy(text) {
//app的复制方法
// #ifdef APP-PLUS
uni.setClipboardData({
data: text
});
// #endif
//html的复制方法
// #ifdef H5
this.$copyText(text)
.then(res => {
uni.showToast({
title: '复制成功'
});
})
.catch(err => {
uni.showToast({
icon: 'none',
title: '复制失败，您的浏览器不支持'
});
});
// #endif
},
submit(){
this.$routerGo('/pages/order/order?type=all')
},
//下拉刷新
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
this.mescroll.endErr(); // 请求失败,隐藏加载状态
},1000)
},
}
}
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

4
pages/order/order-item.vue
View File

@ -7,7 +7,7 @@
<block v-for="(item, index) in assetsFlow" :key="index"> <block v-for="(item, index) in assetsFlow" :key="index">
<view class="margin-top bg-white"> <view class="margin-top bg-white">
<view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr">
<view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr" @tap="$routerGo('/pages/order/order-details')">
<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> <image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm"> <view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs"> <view class="bref-box margin-top-xs">
@ -23,7 +23,7 @@
<button v-if="i==1" class="cu-btn line-gray round margin-left-sm" @tap="orderClick(item,'modalShowCancel')">取消订单</button> <button v-if="i==1" class="cu-btn line-gray round margin-left-sm" @tap="orderClick(item,'modalShowCancel')">取消订单</button>
<button v-if="i==2" class="cu-btn line-red round margin-left-sm" @tap="$routerGo('/pages/shop/returngoods?id=1')">我要退货</button> <button v-if="i==2" class="cu-btn line-red round margin-left-sm" @tap="$routerGo('/pages/shop/returngoods?id=1')">我要退货</button>
<button v-if="i==2" class="cu-btn line-black round margin-left-sm" @tap="orderClick(item,'modalShowConfirm')">确认收货</button> <button v-if="i==2" class="cu-btn line-black round margin-left-sm" @tap="orderClick(item,'modalShowConfirm')">确认收货</button>
<button v-if="i !=1 && i != 2" class="cu-btn line-orange round margin-left-sm" @tap="orderClick(item,'modalShowDel')">立即付款</button>
<button v-if="i !=1 && i != 2" class="cu-btn line-orange round margin-left-sm" @tap.stop="$routerGo('/pages/order/confirm-order')">立即付款</button>
</view> </view>
</view> </view>
</view> </view>

54
pages/order/pay-success.vue
View File

@ -0,0 +1,54 @@
<template>
<view>
<view v-if="false" class="flex flex-direction justify-around text-center align-center margin-bottom margin-top-lg">
<view>
<image src="@/static/images/system/paysuccess.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>
</view>
<view v-else class="flex flex-direction justify-around text-center align-center margin-bottom margin-top-lg">
<view>
<image src="@/static/images/system/payfail.png" mode="widthFix" style="height: 100px;width: 100px;"></image>
</view>
<view class="text-xxl margin-tb text-gray text-bold">订单支付失败</view>
<view class="text-gray">
您可以在我的订单中查询订单详情
</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="$routerGo('/pages/order/order-details')">
<text class="text-df text-white">查看订单</text>
</button>
</view>
<view class="padding-top-sm padding-lr-lg">
<button class="cu-btn block bg-white border lg margin-top round" @tap="returnIndex()">
<text class="text-df text-black">返回首页</text>
</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
returnIndex() {
uni.switchTab({
url: '/pages/order/index'
})
}
}
}
</script>
<style>
</style>

BIN
static/images/logo.gif
View File

Side by Side

After

Width: 120  |  Height: 120  |  Size: 4.7 KiB

BIN
static/images/mescroll-empty.png
View File

Side by Side

After

Width: 500  |  Height: 500  |  Size: 47 KiB

BIN
static/images/system/payfail.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 6.6 KiB

BIN
static/images/system/paysuccess.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 7.1 KiB

BIN
static/images/system/refresh.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 6.8 KiB

BIN
static/images/system/user-default.jpg
View File

Side by Side

After

Width: 55  |  Height: 55  |  Size: 2.5 KiB

BIN
static/tabbar/home-active.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 5.8 KiB

BIN
static/tabbar/home.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 5.7 KiB

BIN
static/tabbar/my-active.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 6.9 KiB

BIN
static/tabbar/my.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 6.8 KiB

BIN
static/tabbar/order-active.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 3.3 KiB

BIN
static/tabbar/order.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 3.4 KiB

Write Preview
Loading…
Cancel
Save