LAPTOP-D7TKRI82\邓
4 years ago
29 changed files with 1047 additions and 26 deletions
-
8App.vue
-
2colorui/icon.css
-
31colorui/main.css
-
4common/styles/common.css
-
1components/me-tabs/me-tabs.vue
-
2components/mescroll-uni/mescroll-body.vue
-
16components/self-line/self-line.vue
-
11main.js
-
52package-lock.json
-
44pages.json
-
200pages/order/apply-details.vue
-
214pages/order/apply-refund.vue
-
217pages/order/confirm-order.vue
-
2pages/order/index.vue
-
211pages/order/order-details.vue
-
4pages/order/order-item.vue
-
54pages/order/pay-success.vue
-
BINstatic/images/logo.gif
-
BINstatic/images/mescroll-empty.png
-
BINstatic/images/system/payfail.png
-
BINstatic/images/system/paysuccess.png
-
BINstatic/images/system/refresh.png
-
BINstatic/images/system/user-default.jpg
-
BINstatic/tabbar/home-active.png
-
BINstatic/tabbar/home.png
-
BINstatic/tabbar/my-active.png
-
BINstatic/tabbar/my.png
-
BINstatic/tabbar/order-active.png
-
BINstatic/tabbar/order.png
@ -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> |
|||
@ -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" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
|
After Width: 120 | Height: 120 | Size: 4.7 KiB |
|
After Width: 500 | Height: 500 | Size: 47 KiB |
|
After Width: 200 | Height: 200 | Size: 6.6 KiB |
|
After Width: 200 | Height: 200 | Size: 7.1 KiB |
|
After Width: 200 | Height: 200 | Size: 6.8 KiB |
|
After Width: 55 | Height: 55 | Size: 2.5 KiB |
|
After Width: 200 | Height: 200 | Size: 5.8 KiB |
|
After Width: 200 | Height: 200 | Size: 5.7 KiB |
|
After Width: 200 | Height: 200 | Size: 6.9 KiB |
|
After Width: 200 | Height: 200 | Size: 6.8 KiB |
|
After Width: 200 | Height: 200 | Size: 3.3 KiB |
|
After Width: 200 | Height: 200 | Size: 3.4 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue