product_platform/yxt-yyth-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1111

Browse Source
This commit is contained in:
wangjiahai
2023-11-22 16:55:50 +08:00
parent 87acee7242
commit 6264fe5c86
1 changed files with 74 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
pages/card/card_detail.vue
View File

@@ -1,60 +1,66 @@
<template>
<view>
<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image>
<view style="display: flex;flex-direction: column;margin-top: -40vw;">
<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;">
<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;">
{{data.state}}
</view>
<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;">
{{data.name}}
</view>
<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;">
{{data.time}}
<loading-state ref="pageView" @request="request">
<view>
<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image>
<view style="display: flex;flex-direction: column;margin-top: -40vw;">
<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;">
<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;">
{{data.state}}
</view>
<view
style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;box-sizing: border-box;">
{{data.name}}
</view>
<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;">
{{data.time}}
</view>
</view>
<image src='../../static/gift2.png'
style="width: 40px;height: 40px;padding-right: 30px;flex-shrink: 0;">
</image>
</view>
<image src='../../static/gift2.png'
style="width: 40px;height: 40px;padding-right: 20px;flex-shrink: 0;">
</image>
</view>
<view
style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;height: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex;align-items: center;">
<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image>
<view style="margin-left: 15px;font-size: 14px;">{{data.pname}}</view>
</view>
<view style="background: #FFFFFF;border-radius: 20rpx;padding: 15px;margin: 10px 15px;">
<view
style="display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx #f1f2f3 solid;padding-bottom: 10px;">
<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image>
<view style="margin-left: 10px;font-size: 14px;">商品明细</view>
style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;height: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex;align-items: center;">
<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image>
<view style="margin-left: 15px;font-size: 14px;">{{data.pname}}</view>
</view>
<view v-for="(item,index) in data.list" style="display: flex;flex-direction: row;margin-top: 15px;">
<image src="../../static/logo.png" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
<view style="margin-left: 10px;margin-right: 10px;">
<text class="text" style="flex: 1;font-weight: 500;">background: #FFFFFF;border-radius:
20rpx;padding: 15px;margin: 10px 15px;
</text>
<view style="font-size: 12px;color: #666666;">可用数量：{{item.lNum}}</view>
<view style="background: #FFFFFF;border-radius: 20rpx;padding: 15px;margin: 10px 15px;">
<view
style="display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx #f1f2f3 solid;padding-bottom: 10px;">
<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image>
<view style="margin-left: 10px;font-size: 14px;">商品明细</view>
</view>
<view style="flex-shrink: 0;font-size: 12px;color: #666666;">x{{item.num}}</view>
<view v-for="(item,index) in data.goodsVos"
style="display: flex;flex-direction: row;margin-top: 15px;">
<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
<view style="margin-left: 10px;margin-right: 10px;flex: 1;">
<text class="text" style="font-weight: 500;">{{item.goods}}
</text>
<view style="font-size: 12px;color: #666666;">可用数量：{{item.lnum}}</view>
</view>
<view style="flex-shrink: 0;font-size: 12px;color: #666666;">x{{item.num}}</view>
</view>
</view>
</view>
<view style="height: 60px;"></view>
<view v-if="data.showBtn||data.showRecord"
style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;">
<view style="flex: 1;"></view>
<view v-if="data.showRecord" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: #191919;">
预约记录</view>
<view v-if="data.showBtn" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: royalblue;">预约提货
</view>
</view>
</view>
<view style="height: 60px;"></view>
<view
style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;">
<view style="flex: 1;"></view>
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;">
预约记录</view>
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: royalblue;">预约提货</view>
</view>
</view>
</loading-state>
</template>
<script>
@@ -65,70 +71,34 @@
sid: ''
},
data: {
time: "2023.10.20-2025.10.20",
name: "卡号:123456789",
pname: "闭包名称",
state: "已失效",
time: "",
name: "",
pname: "",
state: "",
showBtn: false,
list: [{
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}, {
goods: '大白菜',
pic: '',
num: 10,
lNum: 1
}]
showRecord: false,
goodsVos: []
}
}
},
onLoad(options) {
this.page.sid = options.sid
this.request()
},
methods: {
request() {
let _this = this
_this.$api.cardDetail(this.page.sid).then((resp) => {
_this.data = resp
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(2)
})
}).catch(e => {
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(1)
})
})
}
}
}
</script>
@@ -152,12 +122,12 @@
.btn {
border: 1px solid;
padding-left: 25rpx;
padding-right: 25rpx;
padding-left: 30rpx;
padding-right: 30rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
border-radius: 50rpx;
height: 20px;
height: 15px;
margin-left: 25rpx;
}
</style>