详情开发

This commit is contained in:
duan
2024-05-11 14:18:06 +08:00
parent 4d5c78932e
commit 6ff09f5961
12 changed files with 2271 additions and 53 deletions

View File

@@ -1,22 +1,104 @@
<template>
<view>
2
<view class="Box">
<view class="fontStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/Meituanquan.png"
style="width: 39.46rpx;height: 40rpx;" mode=""></image>
<text>美团券</text>
</view>
<view class="content">
{{info.expDate}}
</view>
<button v-if="info.refundAble=='1'" class="buttonStyle" @click="makephone(info.phone)">申请退款</button>
<view style="height: 2rpx;width: 100%;background-color: #EFEFEF;margin-top: 16rpx;"> </view>
<view class="rightStyle" v-for="(item,i) in info.coupons" >
<text>
{{item.couponNo}}
</text>
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/QRcode.png" v-if="info.status=='unused'"
style="width: 39.46rpx;height: 40rpx;margin-right: 50rpx;" mode="" @click="openQR"></image>
<text v-else>已退款</text>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {
}
},
methods: {
makephone(e) {
uni.makePhoneCall({
phoneNumber: e
});
},
openQR() {
this.$emit('clickEvent')
}
}
}
</script>
<style>
<style lang="less" scoped>
.Box {
width: 750rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
</style>
.fontStyle {
.df;
>text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx
}
}
.content {
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-top: 16rpx;
}
.buttonStyle {
position: absolute;
right: 58rpx;
top: 56rpx;
width: 180rpx;
height: 70rpx;
line-height: 70rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 2rpx solid #E8E8E8;
font-size: 28rpx;
color: #000;
}
.rightStyle {
.df(space-between);
margin-top: 16rpx;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>

View File

@@ -1,22 +1,103 @@
<template>
<view>
3
<view class="Box">
<view class="fontStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/shangdian.png"
style="width: 40rpx;height: 36.44rpx;" mode=""></image>
<text>商家信息</text>
</view>
<view class="content">
{{info.shopName}}
</view>
<view class="addreeStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dingwei.png"
style="width: 17.9rpx;height: 22rpx;margin-right: 6rpx;" mode=""></image>{{info.distances}}km |
{{info.address}}
</view>
<view class="rightStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dianhua.png" @click="makephone(info.phone)"
style="width: 39.46rpx;height: 40rpx;margin-right: 50rpx;" mode=""></image>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {
}
},
methods: {
makephone(e) {
uni.makePhoneCall({
phoneNumber: e
});
}
}
}
</script>
<style>
<style lang="less" scoped>
.Box {
width: 750rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
</style>
.fontStyle {
.df;
>text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx
}
}
.content {
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-top: 32rpx;
}
.buttonStyle {
width: 158rpx;
height: 56rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 2rpx solid #E8E8E8;
position: absolute;
right: 58rpx;
top: 56rpx;
}
.addreeStyle {
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-top: 22rpx;
.df;
}
.rightStyle {
position: absolute;
right: 30rpx;
top: 126rpx;
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>

View File

@@ -0,0 +1,127 @@
<template>
<view class="Box">
<view class="fontStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/sfmoney.png"
style="width: 28.29rpx;height: 31.93rpx;" mode=""></image>
<text>订单信息</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text>:</text>
</view>
<text>{{info.orderNo}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text>:</text>
</view>
<text>{{info.phone}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text></text> <text>:</text>
</view>
<text>{{info.payTime}}</text>
</view>
<view class="content">
<view>
<text></text> <text>:</text>
</view>
<text>{{info.number}}</text>
</view>
<view class="content">
<view>
<text></text> <text>:</text>
</view>
<text>{{info.orderAmount}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text></text> <text>:</text>
</view>
<text style="color: #FF4C11;">{{info.saveAmount}}</text>
</view>
<view class="content">
<view>
<text></text><text></text> <text>:</text>
</view>
<text>{{info.payAmount}}</text>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.Box {
width: 750rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
.fontStyle {
.df;
>text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx
}
}
.content {
.df(flex-start, stretch);
margin-top: 16rpx;
margin-left: 20rpx;
>view {
>text {
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
font-weight: 400;
font-size: 24rpx;
color: #666666;
margin-right: 50rpx;
width: 120rpx;
.df(space-between)
}
>text {
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>

View File

@@ -1,22 +1,131 @@
<template>
<view>
6
<view class="Box">
<view class="fontStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/sfmoney.png"
style="width: 28.29rpx;height: 31.93rpx;" mode=""></image>
<text>实付金额</text>
<text>{{info.payAmount}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text>:</text>
</view>
<text>{{info.orderNo}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text>:</text>
</view>
<text>{{info.phone}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text></text> <text>:</text>
</view>
<text>{{info.payTime}}</text>
</view>
<view class="content">
<view>
<text></text> <text>:</text>
</view>
<text>{{info.number}}</text>
</view>
<view class="content">
<view>
<text></text> <text>:</text>
</view>
<text>{{info.orderAmount}}</text>
</view>
<view class="content">
<view>
<text></text> <text>:</text>
</view>
<text>{{info.payAmount}}</text>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {
}
return {}
},
methods: {
}
}
</script>
<style>
<style lang="less" scoped>
.Box {
width: 750rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
</style>
.fontStyle {
.df;
>text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx
}
}
.content {
.df(flex-start, stretch);
margin-top: 16rpx;
margin-left: 20rpx;
>view {
>text {
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
font-weight: 400;
font-size: 24rpx;
color: #666666;
margin-right: 50rpx;
width: 120rpx;
.df(space-between)
}
>text {
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>

View File

@@ -1,22 +1,152 @@
<template>
<view>
5
<view class="Box">
<view class="fontStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dengpao.png"
style="width: 33.19rpx;height: 43.92rpx;" mode=""></image>
<text>温馨提示</text>
</view>
<view class="content">
<view>
有效期:
</view>
<text>{{info.notice.dateUsed}}</text>
</view>
<view class="content">
<view>
使用时间:
</view>
<text>{{info.notice.availableTime}}</text>
</view>
<view class="content">
<view>
使用规则:
</view>
<text>{{info.notice.invoiceInfo}}</text>
</view>
<view @click="clickEvent" class="lookstyle" v-if="islook">
查看更多<u-icon name="arrow-down" color="#575B66" size="28"></u-icon>
</view>
<view class="More" v-else>
{{info.notice.usageRules}}
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {
islook: true
}
},
methods: {
clickEvent() {
this.islook = false
}
}
}
</script>
<style>
<style lang="less" scoped>
.Box {
width: 750rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
</style>
.fontStyle {
.df;
>text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx
}
}
.content {
.df(flex-start, stretch);
margin-top: 16rpx;
>view {
font-weight: 400;
font-size: 24rpx;
color: #999999;
width: 120rpx;
}
>text {
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
}
.More {
margin-left: 119rpx;
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
.buttonStyle {
width: 158rpx;
height: 56rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 2rpx solid #E8E8E8;
position: absolute;
right: 58rpx;
top: 56rpx;
}
.addreeStyle {
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-top: 22rpx;
.df;
}
.rightStyle {
margin-top: 16rpx;
font-weight: 400;
font-size: 24rpx;
color: #333;
.df(space-between);
>view>text {
margin-left: 8rpx;
color: #999999;
font-size: 24rpx;
}
}
.lookstyle {
width: 100%;
font-weight: 400;
font-size: 28rpx;
color: #333333;
.df(center);
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>

View File

@@ -1,22 +1,110 @@
<template>
<view>
4
<view class="Box">
<view class="fontStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/canyin.png"
style="width: 40rpx;height: 36.44rpx;" mode=""></image>
<text>到店吃套餐</text>
</view>
<view v-for="(item ,i ) in info.tagVos" :key="i">
<view class="content">
{{item.title}} {{item.goods.length}} {{item.number}}
</view>
<view class="rightStyle" v-for="(ele,index) in item.goods" :key="index">
<view>
{{ele.name}} <text>({{ele.unitName}})</text>
</view>
<text>{{ele.lowPrice}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {
}
},
methods: {
makephone(e) {
uni.makePhoneCall({
phoneNumber: e
});
}
}
}
</script>
<style>
<style lang="less" scoped>
.Box {
width: 750rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
</style>
.fontStyle {
.df;
>text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx
}
}
.content {
margin-top: 20rpx;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.buttonStyle {
width: 158rpx;
height: 56rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 2rpx solid #E8E8E8;
position: absolute;
right: 58rpx;
top: 56rpx;
}
.addreeStyle {
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-top: 22rpx;
.df;
}
.rightStyle {
margin-top: 16rpx;
font-weight: 400;
font-size: 24rpx;
color: #333;
.df(space-between);
>view>text {
margin-left: 8rpx;
color: #999999;
font-size: 24rpx;
}
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>

View File

@@ -1,22 +1,82 @@
<template>
<view>
1
<view class="title">
<text class="fontStyle">{{info.proName}}</text>
<view class="titleBox">
<image :src="info.proImg" mode="" style="width: 102rpx;height: 102rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;"></image>
<view class="ml-20 rightText">
<view >
{{info.avaTime}}
</view>
<view style="margin-top: 8rpx;">{{info.proDetail}}</view>
</view>
</view>
<view class="moneyStyle">
<text class="moneys">{{info.orderAmount}}</text>
<u-icon name="arrow-right" color="#000" size="28"></u-icon>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {
}
},
methods: {
}
}
</script>
<style>
<style lang="less">
.title {
width: 750rpx;
height: 206rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
</style>
.fontStyle {
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
.titleBox {
.df();
.rightText {
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
.moneyStyle {
position: absolute;
right: 30rpx;
top: 80rpx;
.df();
.moneys{
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>