623 lines
15 KiB
Vue
623 lines
15 KiB
Vue
<template>
|
||
<view class="index" :style="[theme]">
|
||
<view class="onecontent">
|
||
<view class="onecontentone">
|
||
<text v-if="datalist.status == 0">待付款</text>
|
||
<text v-if="datalist.status == 1">待发货</text>
|
||
<text v-if="datalist.status == 2">待收货</text>
|
||
<text v-if="datalist.status == 3">已收货/评价</text>
|
||
<text v-if="datalist.status == 4">退款中 </text>
|
||
<text v-if="datalist.status == 5">退款成功</text>
|
||
<text v-if="datalist.status == 6">取消订单</text>
|
||
<text v-if="datalist.status == 7">已拒绝</text>
|
||
</view>
|
||
<view class="onecontenttow">
|
||
感谢您的支持，欢迎再次光临
|
||
</view>
|
||
<view class="onecontentthere flex-between">
|
||
<view class="onecontentthere_one" v-if="datalist.status == 5 || datalist.status == 3 "
|
||
@click="orderorderdelete(datalist)">
|
||
删除订单
|
||
</view>
|
||
<view class="onecontentthere_tow"
|
||
v-if="datalist.status == 1 || datalist.status == 2 ||datalist.status == 3"
|
||
@click="orderordercancelrefund(datalist)">
|
||
申请退款
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontent" >
|
||
<view class="towcontentone flex-between">
|
||
<view class="towcontentone_one flex-start">
|
||
<u-icon name="home" color="#ffffff" size="20"></u-icon>
|
||
<text class="towcontentone_one_text">{{datalist.store_title}}</text>
|
||
</view>
|
||
<u-icon @click="phonefill(item.store_mobile)" name="phone-fill" color="#ffffff" size="20"></u-icon>
|
||
</view>
|
||
<view class="towcontenttow flex-start" v-for="(item,index) in datalist.goods" :key="index" @click="detailsInfo(item.goods_id)">
|
||
<image class="towcontenttow_image" :src="item.img" mode="aspectFill"></image>
|
||
<view class="towcontenttowone flex-colum-start">
|
||
<view class="towcontenttowone_one">
|
||
{{item.title}}
|
||
</view>
|
||
<view class="towcontenttowone_tow flex-start">
|
||
<view class="towcontenttowone_tow_one flex-start">
|
||
<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
|
||
随时退
|
||
</view>
|
||
<view class="towcontenttowone_tow_one flex-start">
|
||
<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
|
||
过期退
|
||
</view>
|
||
</view>
|
||
<view class="towcontenttowone_there">
|
||
{{item.spec||''}}
|
||
</view>
|
||
<view class="towcontenttowone_four">
|
||
¥{{item.price}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--<view class="towcontentthere flex-between">
|
||
<text class="towcontentthere_text"></text>
|
||
</view>
|
||
<view class="qr-box flex-colum" @longpress="save()">
|
||
<canvas canvas-id="qrcode" style="width:288rpx;" />
|
||
</view>
|
||
<view class="towcontenttfour flex-colum">
|
||
123 2345 567
|
||
</view> -->
|
||
<!-- <view class="towcontenttfive flex-between">
|
||
<view class="towcontenttfive_one flex-start">
|
||
<view class="towcontenttfive_oneone">
|
||
退款:
|
||
</view>
|
||
<view class="towcontenttfive_onetow">
|
||
08-22 23:59:59到期
|
||
</view>
|
||
</view>
|
||
<view class="towcontenttfive_tow">
|
||
申请退款
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="therecontent">
|
||
<view class="therecontentone">
|
||
订单信息
|
||
</view>
|
||
<view class="therecontentsix entowakst" v-if="datalist.people_nickname">
|
||
发型师：{{datalist.people_nickname}}
|
||
</view>
|
||
<view class="therecontentow entowakst">
|
||
实付金额：<text>¥{{datalist.price}}</text>
|
||
</view>
|
||
<view class="therecontentthere entowakst">
|
||
购买数量：{{datalist.number}}
|
||
</view>
|
||
<view class="therecontentthere entowakst">
|
||
购买数量：{{datalist.username}}
|
||
</view>
|
||
<view class="therecontenfour entowakst">
|
||
手机号码：{{datalist.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') || '-'}}
|
||
</view>
|
||
<view class="therecontentthere entowakst">
|
||
收货地址：{{datalist.address}}
|
||
</view>
|
||
<view class="therecontentfive flex-start entowakst">
|
||
订单编号：{{datalist.out_trade_no}}
|
||
<text class="therecontentfive_box" @click="copy(datalist.out_trade_no)">复制</text>
|
||
</view>
|
||
<view class="therecontentsix entowakst">
|
||
下单时间：{{datalist.createtime}}
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view class="fourcontent">
|
||
<view class="fourcontentone">
|
||
购买须知
|
||
</view>
|
||
<view v-html="datalist.details">
|
||
|
||
</view>
|
||
<view class="entowakst" v-html="datalist.details">
|
||
·预约须知：请您提前1小时预约
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="fivecontent">
|
||
<view class="fivecontentone">
|
||
用户评价
|
||
</view>
|
||
<view class="fivecontenttow flex-between">
|
||
<view class="fivecontenttow_one flex-start">
|
||
<text class="fivecontenttow_text">综合评分</text>
|
||
<u-rate :count="5" value="4" active-color="#f1cb66" inactive-color="#F1CB66"></u-rate>
|
||
</view>
|
||
<view class="fivecontenttow_tow">
|
||
满意
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uQRCode from '@/common/js/uqrCode.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
datalist: {
|
||
mobile:''
|
||
},
|
||
imgCode: '', // 后续保存到手机相册所需要用到的字段}
|
||
form: {
|
||
phone: '18092171236'
|
||
}
|
||
}
|
||
},
|
||
async onLoad(e) {
|
||
try {
|
||
let res = await this.api.shoppingorderoorderdetail({
|
||
id: e.id
|
||
})
|
||
if (res) {
|
||
this.datalist = res
|
||
this.datalist.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||
}
|
||
} catch (e) {}
|
||
// this.generate()
|
||
},
|
||
computed: {
|
||
theme() {
|
||
return this.$store.getters.theme
|
||
},
|
||
},
|
||
methods: {
|
||
orderorderdelete(item) { //删除订单
|
||
uni.showModal({
|
||
content: '确定删除订单吗?',
|
||
confirmColor: '#f55850',
|
||
cancelColor: '#333333',
|
||
success: async (resdata) => {
|
||
if (resdata.confirm) {
|
||
let res = await this.api.shoppingorderorderorderdelete({
|
||
order_id: item.id
|
||
})
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
orderordercancelrefund(item) { //取消订单去退款
|
||
uni.pro.navigateTo('mall/order/refund', {
|
||
id: item.id
|
||
})
|
||
},
|
||
// 生成二维码事件
|
||
generate(e) {
|
||
uQRCode.make({
|
||
canvasId: 'qrcode',
|
||
componentInstance: this,
|
||
text: "https://ky.sxczgkj.cn/wap/merchant/authPay?userAppId=244", // 想生成二维码到内容
|
||
size: 150,
|
||
margin: 0,
|
||
backgroundColor: '#ffffff',
|
||
foregroundColor: '#000000',
|
||
fileType: 'jpg',
|
||
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
|
||
success: res => {
|
||
this.imgCode = res // base64的图片格式
|
||
}
|
||
})
|
||
},
|
||
// 保存到手机
|
||
save() {
|
||
uni.getSetting({ //获取用户的当前设置
|
||
success: (res) => {
|
||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||
this.aveImageToPhotosAlbum();
|
||
} else {
|
||
uni.authorize({ //如果没有授权，向用户发起请求
|
||
scope: 'scope.writePhotosAlbum',
|
||
success: () => {
|
||
this.aveImageToPhotosAlbum();
|
||
},
|
||
fail: () => {
|
||
// 提示
|
||
uni.showToast({
|
||
title: "请打开保存相册权限，再点击保存到手机",
|
||
icon: "none",
|
||
duration: 3000
|
||
});
|
||
setTimeout(() => {
|
||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||
success: (res2) => {
|
||
// console.log(res2.authSetting)
|
||
}
|
||
});
|
||
}, 3000);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
copy(value) {
|
||
//提示模板
|
||
uni.setClipboardData({
|
||
data: value, //要被复制的内容
|
||
success: () => { //复制成功的回调函数
|
||
uni.showToast({
|
||
title: '复制成功'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
detailsInfo(e) { //查看订单详情
|
||
uni.pro.navigateTo('mall/mallInfo', {
|
||
id: e,
|
||
})
|
||
},
|
||
phonefill(value) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: value //仅为示例
|
||
});
|
||
},
|
||
aveImageToPhotosAlbum() {
|
||
let base64 = this.imgCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; // 路径文件名
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
|
||
filePath: filePath, //创建一个临时文件名
|
||
data: base64, //写入的文本或二进制数据
|
||
encoding: 'base64', //写入当前文件的字符编码
|
||
success: res => {
|
||
uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
|
||
filePath: filePath,
|
||
success: function(res2) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: "none",
|
||
duration: 5000
|
||
})
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
// console.log(err.errMsg);
|
||
}
|
||
})
|
||
},
|
||
fail: err => {
|
||
uni.hideLoading();
|
||
//console.log(err)
|
||
}
|
||
})
|
||
},
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F6F6F6;
|
||
}
|
||
|
||
.index {
|
||
padding: 32rpx 28rpx;
|
||
|
||
.onecontent {
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
.onecontentone {
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.onecontenttow {
|
||
margin-top: 16rpx;
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
}
|
||
|
||
.onecontentthere {
|
||
margin-top: 24rpx;
|
||
|
||
.onecontentthere_one {
|
||
background: #333333;
|
||
border-radius: 8rpx;
|
||
padding: 16rpx 94rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.onecontentthere_tow {
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
padding: 16rpx 94rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontent {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx;
|
||
|
||
.towcontentone {
|
||
position: relative;
|
||
padding: 16rpx 32rpx;
|
||
border-radius: 18rpx 18rpx 0 0;
|
||
background:var(--bg-color-buttonone);
|
||
|
||
.towcontentone_one {
|
||
.towcontentone_one_image {
|
||
width: 33.04rpx;
|
||
height: 29.79rpx;
|
||
}
|
||
|
||
.towcontentone_one_text {
|
||
margin-left: 10rpx;
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.towcontentone_one::after {
|
||
z-index: 10;
|
||
position: absolute;
|
||
bottom: -22rpx;
|
||
content: '';
|
||
display: inline-block;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 0 0 22rpx 22rpx;
|
||
background:var(--bg-color-buttonone);
|
||
}
|
||
}
|
||
|
||
.towcontenttow {
|
||
position: relative;
|
||
padding: 32rpx;
|
||
width: 100%;
|
||
background: #fff;
|
||
|
||
.towcontenttow_image {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
}
|
||
|
||
.towcontenttowone {
|
||
height: 128rpx;
|
||
margin-left: 36rpx;
|
||
justify-content: space-around;
|
||
|
||
.towcontenttowone_one {
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontenttowone_tow {
|
||
.towcontenttowone_tow_one {
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.towcontenttowone_there {
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
.towcontenttowone_four{
|
||
position: absolute;
|
||
font-weight: bold;
|
||
top:32rpx;
|
||
right: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontentthere {
|
||
position: relative;
|
||
height: 44rpx;
|
||
width: 100%;
|
||
|
||
.towcontentthere_text {
|
||
width: 100%;
|
||
height: 0px;
|
||
border: 1rpx dashed #EAEAEA;
|
||
}
|
||
|
||
.towcontentthere_text::after {
|
||
z-index: 10;
|
||
position: absolute;
|
||
content: '';
|
||
display: inline-block;
|
||
left: 0;
|
||
top: 0;
|
||
width: 22rpx;
|
||
height: 44rpx;
|
||
border-radius: 0 44rpx 44rpx 0;
|
||
background: #f6f6f6;
|
||
}
|
||
|
||
.towcontentthere_text::before {
|
||
z-index: 10;
|
||
position: absolute;
|
||
content: '';
|
||
display: inline-block;
|
||
right: 0;
|
||
top: 0;
|
||
width: 22rpx;
|
||
height: 44rpx;
|
||
border-radius: 44rpx 0 0 44rpx;
|
||
background: #f6f6f6;
|
||
}
|
||
}
|
||
|
||
.towcontenttfour {
|
||
margin-top: 16rpx;
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontenttfive {
|
||
padding: 32rpx;
|
||
width: 100%;
|
||
|
||
.towcontenttfive_one {
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontenttfive_onetow {
|
||
margin-left: 16rpx;
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
}
|
||
|
||
.towcontenttfive_tow {
|
||
padding: 10rpx 16rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #D5D5D5;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.therecontent {
|
||
margin-top: 24rpx;
|
||
padding: 32rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx;
|
||
|
||
.therecontentone {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.entowakst {
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.therecontentfive_box {
|
||
padding: 6rpx 10rpx;
|
||
font-size: 20rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
background: #FFFFFF;
|
||
margin-left: 6rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #D5D5D5;
|
||
}
|
||
}
|
||
|
||
.fourcontent {
|
||
margin-top: 24rpx;
|
||
padding: 32rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx;
|
||
|
||
.fourcontentone {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.fourcontentone::after {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 1rpx;
|
||
border: 1px solid #F7F7F7;
|
||
}
|
||
|
||
.entowakst {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.fivecontent {
|
||
margin-top: 24rpx;
|
||
padding: 32rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx;
|
||
|
||
.fivecontentone {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.fivecontenttow {
|
||
margin-top: 16rpx;
|
||
|
||
.fivecontenttow_one {
|
||
.fivecontenttow_text {
|
||
padding-right: 24rpx;
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.fivecontenttow_tow {
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |