czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

积分抵扣、霸王餐、优惠券分享新增

Browse Source
This commit is contained in:
GaoHao
2024-11-07 15:02:44 +08:00
parent bec723cd69
commit 7b81e2ffb0
29 changed files with 2375 additions and 887 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
pagesInviteFriends/index/index.vue Normal file
View File

@@ -0,0 +1,295 @@
<template>
<view class="container">
<view class="me" v-if="status == 'me'">
<image class="topImg" mode="widthFix" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/InviteFriends/index_bg.png"></image>
<view class="contentBox">
<view class="content">
<view class="title">邀请1人可得，双方各得10元优惠券</view>
<view class="btn">邀请好友</view>
<view class="label o">新用户获得</view>
<view class="card">
<view class="left">
<view class="num"><text>￥</text>10.00</view>
<view class="mnum">满￥100.00可用</view>
</view>
<view class="right">
<view class="rtitle">邀新10元优惠券×1张</view>
<view class="time">领取后30天内有效</view>
</view>
</view>
<view class="label t">每邀请1个用户可获得</view>
<view class="card">
<view class="left">
<view class="num"><text>￥</text>10.00</view>
<view class="mnum">满￥100.00可用</view>
</view>
<view class="right">
<view class="rtitle">邀新10元优惠券×1张</view>
<view class="time">领取后30天内有效</view>
</view>
</view>
</view>
<view class="number">
<view class="tab">
<view class="tabItem"
@click="tabClick(item)"
:class="{active:tabAcitve == item.type}"
v-for="(item,index) in tabList" :key="index"
>{{item.label}}{{item.num||0}}人</view>
</view>
<view class="tabContent">
<viwe class="tabContent_item">
<view class="top">
<view class="name">草莓大福</view>
<view class="status">草莓大福</view>
</view>
<view class="time">2023-22-33 17:33:99</view>
</viwe>
</view>
</view>
</view>
</view>
<view class="he" v-else>
<image class="topImg" mode="widthFix" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/InviteFriends/draw_bg.png"></image>
<view class="contentBox">
<view class="content">
<view class="title">此用户已死，勿Call</view>
<view class="label">[邀请你领取新人专享优惠券！]</view>
<view class="card">
<view class="left">
<view class="num"><text>￥</text>10.00</view>
<view class="mnum">满￥100.00可用</view>
</view>
<view class="right">
<view class="rtitle">邀新10元优惠券×1张</view>
<view class="time">领取后30天内有效</view>
</view>
</view>
<view class="btn">领券</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
status: "he",
tabList: [
{label: '已邀请', type: 1, num: 0},
{label: '无效' ,type: 2, num: 0}
],
tabAcitve: 1,
};
},
onLoad(options) {
},
onShow() {
},
methods: {
tabClick(item) {
this.tabAcitve = item.type;
},
/**
* 解码
* @param {Object} url
* @param {Object} name
*/
getQueryString(url, name) {
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
var r = url.substr(1).match(reg)
if (r != null) {
return r[2]
}
return null;
},
}
};
</script>
<style scoped lang="scss">
.container{
.topImg{
width: 100%;
}
.contentBox{
padding: 0 20rpx;
}
.content{
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
position: relative;
padding: 0 24rpx 32rpx 24rpx;
.title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
text-align: center;
height: 112rpx;
line-height: 112rpx;
}
.btn{
width: 100%;
height: 84rpx;
line-height: 84rpx;
text-align: center;
background: #E3AD7F;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
margin: 0 auto;
}
.label{
font-weight: bold;
font-size: 32rpx;
color: #333333;
margin-bottom: 32rpx;
}
.label.o{
margin-top: 66rpx;
}
.label.t{
margin-top: 48rpx;
}
.card{
display: flex;
align-items: flex-start;
padding: 32rpx 32rpx;
background: #FCF9F4;
border-radius: 18rpx 18rpx 18rpx 18rpx;
border: 2rpx solid #333333;
.left{
border-right: 1rpx dashed #333;
padding-right: 34rpx;
margin-right: 46rpx;
.num{
font-weight: 500;
font-size: 56rpx;
color: #333333;
margin-bottom: 30rpx;
text{
font-size: 32rpx;
}
}
.mnum{
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
}
.right{
.rtitle{
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-bottom: 16rpx;
}
.time{
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
}
}
.me{
.content{
margin-top: -112rpx;
}
.number{
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 32rpx 24rpx 32rpx 24rpx;
.tab{
background: #333333;
border-radius: 12rpx 12rpx 12rpx 12rpx;
padding: 8rpx 16rpx;
display: flex;
align-items: center;
.tabItem{
width: 100%;
height: 100%;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
padding: 8rpx 0;
}
.tabItem.active{
color: #333333;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
.tabContent{
display: flex;
flex-direction: column;
padding-top: 32rpx;
.tabContent_item{
margin-bottom: 32rpx;
.top{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
color: #333333;
.name{
font-weight: bold;
}
.status{
}
}
.time{
font-weight: 400;
font-size: 24rpx;
color: #666666;
margin-top: 16rpx;
}
}
}
}
}
.he{
.content{
margin-top: -210rpx;
padding-top: 48rpx;
.title{
padding-left: 32rpx;
font-weight: 500;
font-size: 28rpx;
color: #666666;
text-align: left;
height: initial;
line-height: initial;
margin-bottom: 18rpx;
}
.label{
padding-left: 32rpx;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
}
.btn{
margin-top: 64rpx;
}
}
}
</style>