czg_team
/
cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cashier_weapp/pagesPoints/exchangeRecordDetail/index.vue

383 lines
8.4 KiB
Vue
Raw Blame History

<template>
<view class="container">
<view class="card_box">
<view class="card_head_box">
<view class="card_head_item" v-for="(item,index) in 8" :key="index"></view>
</view>
<view class="card">
<!-- 订单头部 -->
<view class="top">
<view class="title">
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/icon_order.png" mode="aspectFill" />
<view>自提凭证</view>
</view>
</view>
<view class="card_item" v-if="orderInfo.status == 'waiting'">
<view>
<view class="code">提货码：{{orderInfo.couponCode}}</view>
<tki-qrcode ref="tkiQrcode" show :size="qrcodeSize"></tki-qrcode>
</view>
<view class="semicircle_icon" >
<view class="semicircle_left_icon"></view>
<view class="semicircle_right_icon"></view>
</view>
</view>
<view class="card_item status" v-else>
<view class="status_left">
<view class="status_title">
{{
orderInfo.status == 'unpaid' ? '待支付' :
orderInfo.status == 'waiting' ? '待自取' :
orderInfo.status == 'done' ? '已使用' :
orderInfo.status == 'cancel' ? '已取消' : ""
}}
</view>
<view class="status_code" v-if="orderInfo.status == 'done'">{{orderInfo.couponCode}}</view>
</view>
<view class="status_qrcode" >
<image class="qrcode" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/qrcode.png" mode="aspectFill" />
<image class="status" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/status.png" mode="aspectFill" />
</view>
</view>
<view class="total-wrap">
<view class="info">
<u-icon name="map" color="#666" size="28"></u-icon>
<view class="shopName">自取店：{{ shopUserInfo.shopName }}</view>
<!-- <u-icon name="phone" color="#666" size="28"></u-icon> -->
<view class="phone">{{shopUserInfo.telephone}}</view>
</view>
<view class="address">
<view class="lable">门店地址：</view>
<view>{{shopUserInfo.address}}</view>
</view>
</view>
</view>
</view>
<view class="product">
<image class="thumbnail" :src="orderInfo.goodsImageUrl" mode="aspectFill" />
<view class="product_info">
<view class="name">{{orderInfo.pointsGoodsName}}</view>
<view class="numBox"><view class="points">{{orderInfo.spendPoints}}积分</view><view class="num">X1</view></view>
</view>
<!-- <view class="productInfo"></view> -->
</view>
<view class="orderInfo">
<view class="row">
<text class="t">支付方式：</text>
<text class="info">{{orderInfo.payMethod}}</text>
</view>
<view class="row">
<text class="t">兑换时间：</text>
<text class="info">{{orderInfo.createTime}}</text>
</view>
<view class="row" @click="copyHandle(orderInfo.orderNo)">
<text class="t">订单编号：</text>
<text class="info">{{orderInfo.orderNo}}</text>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
data() {
return {
qrcodeSize: 200,
shopId: null,
orderInfo: null,
shopUserInfo: uni.cache.get('shopUserInfo'),
}
},
onLoad(options) {
console.log(JSON.parse(options.orderInfo))
if ( options.shopId ) {
this.shopId = options.shopId;
this.orderInfo = JSON.parse(options.orderInfo);
}
},
mounted() {
this.setQrcode();
},
methods: {
setQrcode () {
this.$refs.tkiQrcode.setval(this.orderInfo.couponCode) //操作属性
},
/**
* 复制订单号
* @param {Object} e
*/
copyHandle(e) {
uni.setClipboardData({
data: e,
success() {
uni.showToast({
title: '复制成功',
icon: 'none'
});
}
});
},
}
}
</script>
<style lang="scss">
.container{
padding: 32rpx 20rpx;
}
.card_box{
background-color: #fff;
position: relative;
width: 100%;
height: 100%;
border-radius: 18rpx;
padding-bottom: 32rpx;
.card_head_box{
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
top: -22.5rpx;
padding: 0 44rpx;
.card_head_item{
width: 45rpx;
height: 45rpx;
background-color: #f9f9f9;
border-radius: 50%;
// box-shadow: inset 0rpx -13rpx 18rpx -16rpx rgba(87, 86, 86, 0.35);
}
}
.card {
// background-color: #fff;
border-radius: 20upx;
margin-bottom: 28upx;
position: relative;
.top{
padding: 0 34rpx;
}
.title{
font-weight: 500;
font-size: 24rpx;
color: #333333;
border-bottom: 2rpx dashed #E3E3E3;
padding-bottom: 36rpx;
padding-top: 50rpx;
display: flex;
align-items: center;
.icon{
width: 25.45rpx;
height: 28.53rpx;
margin-right: 16rpx;
}
}
.card_item{
display: flex;
flex-direction: column;
position: relative;
padding: 32rpx 34rpx 48rpx 34rpx;
border-bottom: 2rpx dashed #E3E3E3;
align-items: center;
.code{
font-weight: bold;
font-size: 28rpx;
color: #333333;
margin-bottom: 48rpx;
}
::v-deep.vue-ref{
display: flex;
justify-content: center;
}
.semicircle_icon{
width: 100%;
position: absolute;
bottom: -22.5rpx;
left: 0;
display: flex;
justify-content: space-between;
.semicircle_left_icon{
width: 45rpx;
height: 45rpx;
margin-left: -22.5rpx;
background-color: #f9f9f9;
border-radius: 50%;
// box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
}
.semicircle_right_icon{
width: 45rpx;
height: 45rpx;
margin-right: -22.5rpx;
background-color: #f9f9f9;
border-radius: 50%;
// box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
}
}
}
.card_item.status{
display: flex;
flex-direction: row;
justify-content: space-between;
.status_left{
display: flex;
flex-direction: column;
justify-content: space-between;
.status_title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
margin-bottom: 24rpx;
}
.status_code{
text-decoration:line-through;
font-weight: bold;
font-size: 32rpx;
color: #999999;
}
}
.status_qrcode{
width: 112rpx;
height: 112rpx;
position: relative;
.qrcode{
width: 112rpx;
height: 112rpx;
}
.status{
width: 54.82rpx;
height: 48rpx;
position: absolute;
bottom: 0;
right: 0;
}
}
}
.total-wrap {
width: 100%;
display: flex;
flex-direction: column;
padding: 0 34rpx;
font-weight: bold;
font-size: 28rpx;
color: #333333;
margin-top: 38rpx;
.info{
display: flex;
align-items: center;
font-weight: bold;
font-size: 24rpx;
color: #333333;
.shopName{
margin-right: 5rpx;
margin-left: 16rpx;
}
.phone{
margin-left: 16rpx;
}
}
.address{
margin-left: 36rpx;
align-self: center;
display: flex;
font-weight: 400;
font-size: 24rpx;
color: #666666;
margin-top: 24rpx;
align-self: flex-start;
.lable{
flex-shrink: 0;
}
}
}
}
}
.product{
padding: 32rpx 34rpx;
background-color: #FFFFFF;
margin-top: 32rpx;
border-radius: 18rpx;
display: flex;
.thumbnail{
width: 152rpx;
height: 152rpx;
border-radius: 10rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.product_info{
width: 100%;
display: flex;
flex-direction: column;
margin-top: 15rpx;
.name{
font-weight: bold;
font-size: 24rpx;
color: #333333;
margin-bottom: 32rpx;
}
.numBox{
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 24rpx;
.points{
color: #F7853D;
}
.num{
color: #999999
}
}
}
}
.orderInfo{
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
margin-top: 32rpx;
padding: 32rpx 34rpx;
// box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(87,86,86,0.35);
.row {
display: flex;
justify-content: space-between;
margin-bottom: 32rpx;
.t {
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.info {
font-weight: 400;
font-size: 28rpx;
color: #666666;
}
}
.row:last-child{
margin-bottom: none;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink