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

增加分销页面，订单增加会员折扣

Browse Source
This commit is contained in:
YeMingfei666
2025-10-25 16:31:38 +08:00
parent 26532150b5
commit 845d9f7b40
39 changed files with 5988 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
distribution/shop-detail/components/bind-shangji.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<view class="">
<up-popup
:show="show"
bgColor="transparent"
:safeAreaInsetBottom="false"
:closeOnClickOverlay="false"
@close="close"
mode="center"
>
<view class="box">
<view class="u-flex top justify-between u-p-32">
<text class="title">绑定上级</text>
<up-icon name="close" @click="close"></up-icon>
</view>
<view class="info">
<view class="u-flex u-col-center">
<view class="color-333 small-title">上级邀请码</view>
<view class="u-m-l-32 u-flex-1 border">
<input placeholder="请输入上级邀请码" v-model="code" />
</view>
</view>
<view class="u-m-t-32 u-flex u-col-center" style="gap: 54rpx">
<view class="cancel" @click="close">取消</view>
<view class="confirm" @click="confirm">确认</view>
</view>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import { ref } from "vue";
const show = defineModel({
type: Boolean,
default: false,
});
const code = ref("");
const emits = defineEmits(["cancel", "confirm"]);
function close() {
show.value = false;
emits("cancel");
}
function confirm() {
if (code.value == "") {
uni.showToast({
title: "请输入上级邀请码",
icon: "none",
});
return;
}
show.value = false;
emits("confirm", code.value);
}
</script>
<style lang="scss" scoped>
.border {
border: 2rpx solid #d9d9d9;
padding: 18rpx;
border-radius: 4rpx;
}
.box {
width: 586rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
.title {
color: #000000;
font-size: 32rpx;
font-weight: 700;
}
.top {
border-bottom: 2rpx solid #ededed;
}
.info {
padding: 32rpx 40rpx 40rpx 40rpx;
font-size: 28rpx;
}
.small-title {
min-width: 84rpx;
text-align: right;
}
}
.cancel {
padding: 14rpx 76rpx;
border-radius: 36rpx;
border: 2rpx solid #e8ad7b;
color: #e8ad7b;
font-size: 32rpx;
font-weight: 400;
white-space: nowrap;
line-height: 48rpx;
}
.confirm {
padding: 14rpx 76rpx;
border-radius: 36rpx;
background-color: #e8ad7b;
border: 2rpx solid #e8ad7b;
color: #fff;
font-size: 32rpx;
font-weight: 400;
line-height: 48rpx;
white-space: nowrap;
}
</style>

174
distribution/shop-detail/components/share-popup.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<view class="">
<view class="w-qrcode">
<w-qrcode
:options="codeOptions"
:opacity="0"
ref="wQrcode"
@generate="(e) => qrcodeResult(e)"
></w-qrcode>
</view>
<up-popup
:show="show"
bgColor="transparent"
:safeAreaInsetBottom="false"
:closeOnClickOverlay="false"
@close="close"
mode="center"
>
<view class="box">
<view class="info">
<view class="u-flex justify-center">
<up-avatar size="214rpx"></up-avatar>
</view>
<view
class="u-m-t-48 font-14 font-700 color-333 text-center line-height-54"
>
<view>躺平小王子 </view>
<view>158****0001</view>
</view>
<view class="u-m-t-16 font-14 line-height-54 text-center">
<text class="color-666">邀请码</text>
<text class="u-m-l-16 u-m-r-16 color-333 font-16 font-700"
>59124551</text
>
<text class="" style="color: #fe6d11" @click="copyCode">复制</text>
</view>
<view class="u-flex justify-center" style="margin-top: 90rpx">
<!-- <w-qrcode
:options="codeOptions"
:opacity="1"
ref="wQrcode"
@generate="(e) => qrcodeResult(e)"
></w-qrcode> -->
<up-image width="322rpx" height="322rpx" :src="code"></up-image>
</view>
<view class="u-m-t-60 u-flex u-col-center justify-center">
<view class="confirm" @click="save">保存图片</view>
</view>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import wQrcode from "@/uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue";
import { ref } from "vue";
const codeOptions = ref({
size: 200,
code: "1234",
});
function copyCode() {
uni.setClipboardData({
data: "hello",
success: function () {
console.log("success");
},
});
}
const code = ref("");
function qrcodeResult(e) {
console.log("qrcodeResult", e);
code.value=e.img.tempFilePath
console.log('code',code.value)
}
const show = defineModel({
type: Boolean,
default: false,
});
const emits = defineEmits(["cancel", "confirm"]);
function close() {
show.value = false;
emits("cancel");
}
function save() {
show.value = false;
uni.saveImageToPhotosAlbum({
filePath: code.value,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function () {
uni.showToast({
title: "保存失败",
});
},
});
emits("confirm", code.value);
}
</script>
<style lang="scss" scoped>
:deep(.info .canvas) {
opacity: 1;
}
.border {
border: 2rpx solid #d9d9d9;
padding: 18rpx;
border-radius: 4rpx;
}
.box {
width: 638rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
.title {
color: #000000;
font-size: 32rpx;
font-weight: 700;
}
.top {
border-bottom: 2rpx solid #ededed;
}
.info {
padding: 96rpx 40rpx 96rpx 40rpx;
font-size: 28rpx;
}
.small-title {
min-width: 84rpx;
text-align: right;
}
}
.cancel {
padding: 14rpx 76rpx;
border-radius: 36rpx;
border: 2rpx solid #e8ad7b;
color: #e8ad7b;
font-size: 32rpx;
font-weight: 400;
white-space: nowrap;
line-height: 48rpx;
}
.confirm {
padding: 14rpx 76rpx;
border-radius: 16rpx;
background-color: #e8ad7b;
border: 2rpx solid #e8ad7b;
color: #fff;
font-size: 32rpx;
font-weight: 400;
line-height: 48rpx;
white-space: nowrap;
}
.line-height-54 {
line-height: 54rpx;
}
.w-qrcode{
position: fixed;
left: -9999px;
top: -9999px;
z-index:-1;
}
</style>

400
distribution/shop-detail/index.vue Normal file
View File

@@ -0,0 +1,400 @@
<template>
<view class="min-h-100vh bg-gray">
<up-navbar
bg-color="transparent"
title="分销中心"
@leftClick="back"
:fixed="true"
></up-navbar>
<view class="top">
<image class="top_bg" src="/distribution/static/top_bg.png"></image>
<view class="box type1">
<view class="u-flex align-center justify-between">
<view class="u-flex align-center">
<up-avatar size="62rpx" />
<text class="u-m-l-14 font-14 color-333 font-700"
>这里是店铺名称</text
>
</view>
<view>
<template v-if="false">
<view class="font-12 color-666"> 上级：用户昵称15812340001 </view>
</template>
<template v-if="true">
<view class="bind" @click="showBindShangji = true">
绑定上级
</view>
</template>
</view>
</view>
<view class="top_content u-m-t-32" v-if="false">
<template v-if="false">
<view class="color-333 font-16 font-700"> 如何成为分销员 </view>
<view class="u-m-t-16 color-666 font-14">
<view> 需要邀请人数：1000人</view>
<view>是否需要邀请人数下单：是/否</view>
<view>每人可获得的分销奖励次数：永久/X次</view>
</view>
</template>
<template v-if="false">
<view class="color-333 font-16 font-700 text-center">
如何成为分销员
</view>
<view class="u-m-t-16 color-666 font-14 text-center">
<view>只需付费X元，即可成为分销员</view>
</view>
</template>
<template v-if="false">
<view class="color-333 font-16 font-700 text-center">
如何成为分销员
</view>
<view class="u-m-t-16 color-666 font-14 text-center">
<view>请联系商家咨询详情</view>
</view>
</template>
</view>
<view class="top_content type1 u-m-t-32">
<template v-if="true">
<view class="font-14">
<view>
<text class="color-666">我的分销等级：</text>
<text class="color-333 font-700">一级 普通分销员</text>
</view>
<view class="u-m-t-28 u-flex align-center">
<text class="color-666">距离下一级还差：</text>
<text class="color-333 font-700 u-m-r-18">100人 </text>
<up-icon name="question-circle" size="24rpx" color="#666" />
</view>
<view class="u-flex u-m-t-28">
<view class="u-flex-1">
<view class="u-flex align-center">
<text class="u-m-r-10 font-12 color-666">总收益</text>
<up-icon name="question-circle" size="24rpx" color="#666" />
</view>
<view class="u-m-t-16 price">9925.56</view>
</view>
<view class="u-flex-1">
<view class="u-flex align-center">
<text class="u-m-r-10 font-12 color-666">待入账</text>
<up-icon name="question-circle" size="24rpx" color="#666" />
</view>
<view class="u-m-t-16 price">9925.56</view>
</view>
</view>
</view>
</template>
</view>
</view>
</view>
<template v-if="false">
<view class="bottom">
<view class="u-flex">
<view class="title">规则说明</view>
</view>
<view>
<template v-if="true">
<view class="font-12 color-666 u-m-t-16">
<view>
<view> 我的收益什么时候可以到账？</view>
<view> 分销的结算时长为X天</view>
</view>
<view class="u-m-t-40">
<view>怎么样才能升级分销员等级？</view>
<view>邀请的有效人数达到X人即可升级</view>
<view> 消费金额总计达到X元即可升级</view>
<view> 什么是有效邀请人数？</view>
<view>被邀请人在店铺消费过，即有一笔订单完成才算有效</view>
</view>
<view class="u-m-t-40">
<view>消费金额如何计算？</view>
<view
>消费金额是计算您和您邀请的人在店铺消费的总金额，但退款订单不计入</view
>
</view>
</view>
</template>
</view>
</view>
<view class="parse-html">
<up-parse :content="content"></up-parse>
</view>
</template>
<view class="bottom type1" v-if="true">
<view class="u-flex justify-between align-center">
<view class="u-flex align-center">
<view class="color-333 font-16 u-m-r-6">我的下级（30/10）</view>
<up-icon name="question-circle" size="24rpx" color="#666" />
</view>
<view class="font-10 color-999">一级分成1.99%二级分成3.99%</view>
</view>
<view class="u-m-t-48 font-14">
<view class="u-flex justify-between color-333">
<view>用户</view>
<view>获得利益</view>
<view>邀请时间</view>
</view>
<view class="u-m-t-16">
<view
v-for="(item, index) in 3"
:key="index"
class="u-flex justify-between align-center recoder-item color-666 font-12"
>
<view class="">
<view>用户昵称</view>
<view>158****0001</view>
</view>
<view>0（一级）</view>
<view>2025/03/18 19:12</view>
</view>
</view>
</view>
</view>
<view class="tips u-m-t-32"
>您的分销员身份已取消，不再获得分成有疑问可联系商家</view
>
<view class="u-flex justify-center bottom-btn">
<view class="copy" @click="copyCode">
<view>复制邀请码</view>
<view>123457891231</view>
</view>
<view class="u-flex u-flex-col justify-center">
<view class="share" @click="showSharePopup=true">分享邀请</view>
</view>
</view>
<bindShangji v-model="showBindShangji"></bindShangji>
<sharePopup v-model="showSharePopup"></sharePopup>
</view>
</template>
<script setup>
import bindShangji from "./components/bind-shangji.vue";
import sharePopup from "./components/share-popup.vue";
const showBindShangji = ref(false);
const showSharePopup=ref(false);
import { ref } from "vue";
const content = ref("123");
function back() {
uni.navigateBack({
delta: 1,
});
}
function copyCode() {
uni.setClipboardData({
data: "hello",
success: function () {
console.log("success");
},
});
}
</script>
<style scoped lang="scss">
.input-number-box {
width: 428rpx;
padding-bottom: 10rpx;
border-bottom: 1px solid #999;
font-size: 28rpx;
align-items: baseline;
.fuhao {
font-size: 64rpx;
color: #333;
}
.input-number {
flex: 1;
height: 100%;
font-size: 28rpx;
color: #333;
padding-left: 24rpx;
padding-right: 10rpx;
}
.all-in {
font-size: 28rpx;
color: #fe7e00;
}
}
.list {
.shop-item {
padding: 32rpx 28rpx;
border-bottom: 2rpx solid #ededed;
font-size: 28rpx;
color: #666;
display: flex;
align-items: center;
&:last-child {
border-bottom: none;
}
.fufei {
color: #e8ad7b;
}
.tag {
font-size: 24rpx;
color: #ff1c1c;
background-color: #ffe4e4;
padding: 8rpx 20rpx;
border-radius: 8rpx;
}
.name {
color: #333;
font-weight: 700;
}
.shouxufei {
}
.shouyi {
font-size: 24rpx;
color: #666;
text-align: center;
}
}
}
.status {
font-size: 28rpx;
font-weight: 700;
text-align: right;
color: #333333;
&.fail {
color: #ff1c1c;
}
}
.lingqu {
font-size: 28rpx;
border-radius: 8rpx;
background: #fe6d11;
padding: 8rpx 16rpx;
color: #ffffff;
}
.price {
font-weight: 700;
font-size: 40rpx;
color: #333;
}
.top {
position: relative;
.box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 28rpx 28rpx 52rpx 28rpx;
&.type1 {
padding-bottom: 0;
}
}
.top_content {
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 16rpx;
flex-shrink: 0;
fill: #ffffff3b;
stroke-width: 2rpx;
padding: 32rpx 28rpx;
stroke: #fff;
filter: drop-shadow(2rpx -4rpx 13.4rpx #ff6f0124);
backdrop-filter: blur(5.1rpx);
&.type1 {
filter: none;
border: none;
background-color: #fcf5ed;
border-radius: 36rpx 36rpx 0 0 ;
padding: 32rpx 36rpx;
}
}
}
.btn-group {
position: absolute;
right: 28rpx;
top: 50%;
transform: translateY(-50%);
.btn {
padding: 8rpx 16rpx;
border-radius: 8rpx;
font-size: 24rpx;
border: 2rpx solid #fe6d11;
&.shiming {
color: #fe6d11;
}
&.tixian {
color: #fff;
background-color: #fe6d11;
}
}
}
.tips {
padding: 16rpx 18rpx;
background: #ffe2e2;
padding: 16rpx 18rpx;
font-size: 28rpx;
line-height: 48rpx;
color: #ff1c1c;
}
.bind {
padding: 8rpx 32rpx;
border-radius: 8rpx;
font-size: 24rpx;
border: 2rpx solid #fe6d11;
color: #fff;
background-color: #fe6d11;
}
.top_bg {
width: 100%;
height: 580rpx;
}
.bottom {
margin: 0 28rpx;
border-radius: 36rpx;
background-color: #fff;
transform: translateY(-20rpx);
padding: 32rpx 28rpx;
&.type1 {
transform: translateY(0);
margin: 0;
padding-bottom: 42rpx;
}
}
.title {
font-size: 32rpx;
font-weight: 700;
color: #333;
}
.small-title {
font-size: 28rpx;
font-weight: 700;
color: #333;
}
.parse-html {
margin: 32rpx 28rpx;
font-size: 28rpx;
}
.recoder-item {
padding: 16rpx 0;
border-bottom: 2rpx solid #ededed;
}
.share {
border-radius: 16rpx;
background: #e8ad7b;
padding: 14rpx 76rpx;
font-size: 32rpx;
line-height: 48rpx;
color: #fff;
}
.copy {
padding: 4rpx 30rpx;
border-radius: 18rpx;
border: 2rpx solid #e8ad7b;
background: #fff;
font-size: 28rpx;
color: #e8ad7b;
line-height: 48rpx;
text-align: center;
}
.bottom-btn {
position: fixed;
left: 84rpx;
right: 84rpx;
bottom: 100rpx;
white-space: nowrap;
gap: 54rpx;
}
</style>