初始化代码
This commit is contained in:
170
uniapp/uni-app/mine/pages/distribution/apply.vue
Normal file
170
uniapp/uni-app/mine/pages/distribution/apply.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="mine-distribution-index">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="color"
|
||||
:backgroundColor="color == '#ffffff' ?``:primaryColor" title="分销申请" leftIcon="icon-left">
|
||||
</uni-nav-bar>
|
||||
<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
|
||||
<view class="space-user-info rel"></view>
|
||||
<view class="apply-info ml-lg mr-lg fill-base f-title radius-24">
|
||||
<view class="flex-center f-md-title text-bold c-black">申请成为分销商</view>
|
||||
<view class="space-lg"></view>
|
||||
<view class="pt-lg pb-md b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="text-bold">姓名</view>
|
||||
</view>
|
||||
<input v-model="subForm.user_name" type="text" class="pt-md" maxlength="20"
|
||||
placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
|
||||
</view>
|
||||
<view class="mt-lg pb-md b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="text-bold">手机号</view>
|
||||
</view>
|
||||
<input v-model="subForm.mobile" type="number" class="pt-md" maxlength="20"
|
||||
placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
|
||||
</view>
|
||||
<view @tap="submit" class="apply-btn flex-center f-sm-title c-base text-bold radius-16"
|
||||
:style="{background:primaryColor}">立即申请</view>
|
||||
</view>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
color: '#ffffff',
|
||||
subForm: {
|
||||
user_name: '',
|
||||
mobile: ''
|
||||
},
|
||||
rule: [{
|
||||
name: "user_name",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "请输入您的真实姓名",
|
||||
regType: 2
|
||||
}, {
|
||||
name: "mobile",
|
||||
checkType: "isAllPhone",
|
||||
errorMsg: "请输入手机号",
|
||||
regText: "手机号"
|
||||
}],
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
mineInfo: state => state.user.mineInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||||
if (this.color == color) return
|
||||
this.color = color
|
||||
this.$util.setNavigationBarColor({
|
||||
color,
|
||||
bg: 'none'
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
|
||||
async initIndex() {},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
//表单验证
|
||||
validate(param) {
|
||||
let validate = new this.$util.Validate();
|
||||
this.rule.map(item => {
|
||||
let {
|
||||
name,
|
||||
} = item
|
||||
validate.add(param[name], item);
|
||||
})
|
||||
let message = validate.start();
|
||||
console.log(message, "message");
|
||||
return message;
|
||||
},
|
||||
async submit() {
|
||||
let param = this.$util.deepCopy(this.subForm)
|
||||
let msg = this.validate(param);
|
||||
if (msg) {
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
await this.$api.mine.applyReseller(param)
|
||||
this.$util.hideAll()
|
||||
this.$util.showToast({
|
||||
title: `提交成功`
|
||||
});
|
||||
this.lockTap = false
|
||||
this.$util.goUrl({
|
||||
url: `/mine/pages/apply-result?type=2`,
|
||||
openType: `redirectTo`
|
||||
})
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mine-distribution-index {
|
||||
.space-user-info {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 219rpx;
|
||||
}
|
||||
.mine-index-bg {
|
||||
background: rgb(57, 181, 74);
|
||||
height: 14.625rem;
|
||||
width: 140%;
|
||||
left: -20%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.apply-info {
|
||||
padding: 50rpx;
|
||||
|
||||
.apply-btn {
|
||||
width: 590rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
241
uniapp/uni-app/mine/pages/distribution/index.vue
Normal file
241
uniapp/uni-app/mine/pages/distribution/index.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<view class="mine-distribution-index" v-if="detail.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="color"
|
||||
:backgroundColor="color == '#ffffff' ?``:primaryColor" title="分销中心" leftIcon="icon-left">
|
||||
</uni-nav-bar>
|
||||
<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
|
||||
<view class="user-info abs pt-md pl-lg pr-lg pb-lg flex-center">
|
||||
<image mode="aspectFill" lazy-load class="user-img radius" :src="detail.avatarUrl">
|
||||
</image>
|
||||
<view class="flex-1 ml-md c-base">
|
||||
<view class="f-lg-title text-bold max-550 ellipsis">
|
||||
Hi，{{ detail.nickName }}
|
||||
</view>
|
||||
<view @tap.top="$util.goUrl({url:detail.fx_code,openType:'copy'})" class="flex-y-center f-caption">邀请码:
|
||||
{{detail.fx_code}}
|
||||
<view class="copy-code-btn flex-center f-icontext ml-sm">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-user-info rel"></view>
|
||||
<!-- fx_cash 可提现；wallet_price 已提现 -->
|
||||
<view @tap.stop="$util.goUrl({url:`/mine/pages/cash-out?type=distribution`})"
|
||||
class="stored-item pd-lg ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="flex-center">
|
||||
<view class="flex-center flex-column c-title">
|
||||
<view class="f-lg-title text-bold">{{detail.fx_cash}}</view>
|
||||
<view class="f-caption c-caption">总佣金</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="flex-center flex-column c-title">
|
||||
<view class="f-lg-title text-bold">{{detail.notreceived_cash}}</view>
|
||||
<view class="f-caption c-caption">待结算</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center pt-lg pb-sm">
|
||||
<view class="common-btn flex-center f-paragraph c-base radius" style="min-width: 176rpx;height: 60rpx;"
|
||||
:style="{background:primaryColor}">立即提现
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="mine-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="common-nav-title flex-y-center f-title c-title text-bold">我的收益</view>
|
||||
<view class="flex-warp pb-md">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('toolList', index)"
|
||||
v-for="(item, index) in toolList" :key="index" class="item-child">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="common-nav-title flex-y-center f-title c-title text-bold">其他功能</view>
|
||||
<view class="flex-warp pb-md">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('otherList', index)"
|
||||
v-for="(item, index) in otherList" :key="index" class="item-child">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
color: '#ffffff',
|
||||
// 我的收益
|
||||
toolList: [{
|
||||
img: '/static/image/mine/land-order.png',
|
||||
text: '土地租赁',
|
||||
url: '/mine/pages/distribution/profit?type=2'
|
||||
}, {
|
||||
img: '/static/image/mine/claim-order.png',
|
||||
text: '认养订单',
|
||||
url: '/mine/pages/distribution/profit?type=3'
|
||||
}, {
|
||||
img: '/static/image/mine/shop.png',
|
||||
text: '商城订单',
|
||||
url: '/mine/pages/distribution/profit?type=1'
|
||||
}, {
|
||||
img: '/static/image/mine/code.png',
|
||||
text: '推广码',
|
||||
url: '/mine/pages/distribution/poster'
|
||||
}],
|
||||
// 其他功能
|
||||
otherList: [{
|
||||
img: '/static/image/mine/team.png',
|
||||
text: '我的团队',
|
||||
url: '/mine/pages/distribution/team'
|
||||
}, {
|
||||
img: '/static/image/mine/collage.png',
|
||||
text: '提现记录',
|
||||
url: '/mine/pages/distribution/record'
|
||||
}],
|
||||
detail: {},
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
mineInfo: state => state.user.mineInfo,
|
||||
}),
|
||||
onLoad() {
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||||
if (this.color == color) return
|
||||
this.color = color
|
||||
this.$util.setNavigationBarColor({
|
||||
color,
|
||||
bg: 'none'
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
|
||||
async initIndex() {
|
||||
this.detail = await this.$api.mine.resellerInfo()
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
async toJump(key, index) {
|
||||
let {
|
||||
url,
|
||||
text
|
||||
} = this[key][index]
|
||||
this.$util.log(url)
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mine-distribution-index {
|
||||
|
||||
.user-info {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 416rpx;
|
||||
padding-top: 198rpx;
|
||||
|
||||
.user-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
line-height: 1rpx;
|
||||
overflow: hidden;
|
||||
border: 4rpx solid #EFF3FD;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.copy-code-btn {
|
||||
width: 65rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 2rpx;
|
||||
border: 1rpx solid #FFFFFF;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.space-user-info {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 379rpx;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.mine-index-bg {
|
||||
background: rgb(57, 181, 74);
|
||||
height: 14.625rem;
|
||||
width: 140%;
|
||||
left: -20%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.stored-item {
|
||||
|
||||
.flex-column {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1rpx;
|
||||
height: 42rpx;
|
||||
background: #99D3B9;
|
||||
}
|
||||
}
|
||||
|
||||
.mine-list {
|
||||
.common-nav-title {
|
||||
padding-top: 20rpx;
|
||||
padding-left: 54rpx;
|
||||
}
|
||||
|
||||
.item-child {
|
||||
width: 25%;
|
||||
margin: 10rpx 0;
|
||||
|
||||
.item-img {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
253
uniapp/uni-app/mine/pages/distribution/poster.vue
Normal file
253
uniapp/uni-app/mine/pages/distribution/poster.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<view class="mine-distribution-poster">
|
||||
<view class="hideCanvasView">
|
||||
<l-painter class="hideCanvas" ref="painter" />
|
||||
</view>
|
||||
<block v-if="src">
|
||||
<view class="space-md fill-body"></view>
|
||||
<image :src="src" class="code-img" @tap="previewImage"></image>
|
||||
<view class="space-md fill-body"></view>
|
||||
<view class="pd-lg">
|
||||
<!-- #ifdef H5 -->
|
||||
<button class="save-btn flex-center radius" :style="{background:primaryColor}"
|
||||
@tap="previewImage">长按上图保存图片</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="save-btn flex-center radius" :style="{background:primaryColor}"
|
||||
@tap="saveImage">保存图片至相册</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<button class="save-btn flex-center radius" :style="{background:primaryColor}"
|
||||
@tap="toAppShare">分享专属海报</button>
|
||||
<!-- #endif -->
|
||||
<view class="text f-desc mt-lg" :style="{color:primaryColor}">
|
||||
<view class="flex-y-center">
|
||||
<view class="radius mr-sm" :style="{background:primaryColor}"></view>好友下载app并使用你的邀请码注册成功后
|
||||
</view>
|
||||
<view class="flex-y-center">
|
||||
<view class="radius mr-sm" :style="{background:primaryColor}"></view>TA将成为你的粉丝，粉丝下单，你也可以获得收益哟!
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from 'vuex';
|
||||
import siteInfo from '@/siteinfo.js';
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: '',
|
||||
options: '',
|
||||
poster: {}
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
async onLoad(options) {
|
||||
this.$util.setNavigationBarColor({
|
||||
color: '#000000',
|
||||
bg: '#ffffff'
|
||||
})
|
||||
this.widget = this.$refs.canvas
|
||||
this.$util.showLoading()
|
||||
let that = this
|
||||
setTimeout(() => {
|
||||
that.canvase()
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['user/report']),
|
||||
async canvase() {
|
||||
let that = this
|
||||
let qr_code = await this.$api.mine.getAppDownloadQr()
|
||||
let cover = 'https://lbqny.migugu.com/admin/farm/share.png'
|
||||
let {
|
||||
primaryColor
|
||||
} = this
|
||||
|
||||
let {
|
||||
fx_code,
|
||||
avatarUrl
|
||||
} = this.$util.getPage(-1).detail
|
||||
|
||||
let poster = {
|
||||
css: {
|
||||
width: '750rpx',
|
||||
height: '1156rpx',
|
||||
},
|
||||
views: [{
|
||||
type: 'image',
|
||||
src: cover,
|
||||
css: {
|
||||
width: '750rpx',
|
||||
height: '1156rpx',
|
||||
top: '0rpx',
|
||||
left: '0rpx',
|
||||
position: 'absolute'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: avatarUrl,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
baclground: '#fff',
|
||||
width: '82rpx',
|
||||
height: '82rpx',
|
||||
top: '407rpx',
|
||||
left: '333rpx',
|
||||
border: '1rpx solid #fff',
|
||||
borderRadius: '50%'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: `邀请码`,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
width: '137rpx',
|
||||
height: '30rpx',
|
||||
top: '658rpx',
|
||||
left: '304rpx',
|
||||
textAlign: 'center',
|
||||
fontSize: '26rpx',
|
||||
color: primaryColor
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: fx_code,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
width: '137rpx',
|
||||
height: '30rpx',
|
||||
top: '696rpx',
|
||||
left: '304rpx',
|
||||
textAlign: 'center',
|
||||
fontSize: '26rpx',
|
||||
textWeight: 'bold',
|
||||
color: primaryColor
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: qr_code,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
baclground: '#fff',
|
||||
width: '148rpx',
|
||||
height: '148rpx',
|
||||
top: '505rpx',
|
||||
left: '304rpx',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 渲染
|
||||
this.$refs.painter.render(poster);
|
||||
// 生成图片
|
||||
this.$refs.painter.canvasToTempFilePathSync({
|
||||
fileType: "jpg",
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
that.$util.hideAll()
|
||||
this.src = res.tempFilePath
|
||||
console.log(res.tempFilePath);
|
||||
},
|
||||
});
|
||||
},
|
||||
previewImage() {
|
||||
let finalPath = this.src;
|
||||
uni.previewImage({
|
||||
current: finalPath,
|
||||
urls: [finalPath]
|
||||
})
|
||||
},
|
||||
async saveImage() {
|
||||
await this.$util.checkAuth({
|
||||
type: "writePhotosAlbum"
|
||||
});
|
||||
let filePath = this.src;
|
||||
let [err, success] = await uni.saveImageToPhotosAlbum({
|
||||
filePath
|
||||
})
|
||||
if (err) return;
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '保存成功'
|
||||
})
|
||||
},
|
||||
toAppShare() {
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 0,
|
||||
href: "",
|
||||
title: "用心分享邀粉丝",
|
||||
summary: "月入过万 收益多",
|
||||
imageUrl: this.src,
|
||||
success: function(res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.mine-distribution-poster {
|
||||
|
||||
.code-img {
|
||||
width: 750rpx;
|
||||
height: 1156rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 690rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text {
|
||||
.radius {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hideCanvasView {
|
||||
position: relative;
|
||||
|
||||
.hideCanvas {
|
||||
position: absolute;
|
||||
left: -9999rpx;
|
||||
top: -9999rpx
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
217
uniapp/uni-app/mine/pages/distribution/profit.vue
Normal file
217
uniapp/uni-app/mine/pages/distribution/profit.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="mine-coupon-list">
|
||||
<fixed>
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
:width="100/tabList.length + '%'" height="100rpx"></tab>
|
||||
</fixed>
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="fill-base mt-md ml-md mr-md pd-lg box-shadow-mini radius-16"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between pb-lg">
|
||||
<view @tap.stop="goStore(index)" class="flex-y-center">
|
||||
<image mode="aspectFill" class="user-img radius" :src="item.source_info.avatarUrl"></image>
|
||||
<view class="flex-y-center f-paragraph c-title ml-md">下单人：<view class="text-bold max-300 ellipsis">
|
||||
{{item.source_info.nickName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="f-paragraph c-caption" :class="[{'c-warning': item.status==1}]">
|
||||
{{statusType[item.status]}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="profit-item flex-center" :class="[{'mt-md':aindex!=0}]"
|
||||
v-for="(aitem,aindex) in item.order_goods" :key="aindex">
|
||||
<image mode="aspectFill" lazy-load class="cover" :src="aitem.goods_cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="f-title c-title text-bold ellipsis"> {{aitem.goods_name}} </view>
|
||||
<view class="flex-between mt-sm">
|
||||
<view class="goods-spe pl-sm pr-sm f-caption c-paragraph ellipsis radius-4"> {{aitem.spe_name}}
|
||||
</view>
|
||||
<view class="flex-1"></view>
|
||||
</view>
|
||||
<view class="flex-between mt-md f-caption c-caption">
|
||||
<view class="flex-y-baseline">
|
||||
<view class="flex-y-baseline f-icontext c-warning">¥<view class="f-sm-title text-bold">
|
||||
{{aitem.singe_pay_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-sm">提成比例 {{aitem.balance}}%</view>
|
||||
</view>
|
||||
<view>x {{aitem.num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between mt-lg pt-md b-1px-t">
|
||||
<view class="c-title ml-sm mr-sm"> 付款 ¥{{item.order_price}}</view>
|
||||
<view class="reduce-info rel flex-center pr-sm f-caption c-base" :style="{background:primaryColor}">
|
||||
<view class="reduce-tag abs flex-center pr-sm f-icontext c-title">分销佣金 </view>
|
||||
¥{{item.cash}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
statusType: {
|
||||
1: '待结算',
|
||||
2: '已结算'
|
||||
},
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
id: 0,
|
||||
title: '全部'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '待结算'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '已结算'
|
||||
}],
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
let {
|
||||
type = 1
|
||||
} = options
|
||||
let title = {
|
||||
1: '商城',
|
||||
2: '土地',
|
||||
3: '认养',
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: `${title[type]}订单分佣`
|
||||
})
|
||||
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
tabList,
|
||||
activeIndex,
|
||||
options
|
||||
} = this
|
||||
let {
|
||||
type
|
||||
} = options
|
||||
let {
|
||||
id: status
|
||||
} = tabList[activeIndex]
|
||||
let param = Object.assign({}, this.param, {
|
||||
type,
|
||||
status
|
||||
})
|
||||
let newList = await this.$api.mine.fxOrderList(param);
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.mine-coupon-list {
|
||||
.user-img {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.profit-item {
|
||||
.cover {
|
||||
width: 172rpx;
|
||||
height: 172rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.goods-spe {
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
max-width: 458rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.reduce-tag {
|
||||
background: #FCC519;
|
||||
background: linear-gradient(-70deg, transparent 20rpx, #FCC519 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
169
uniapp/uni-app/mine/pages/distribution/record.vue
Normal file
169
uniapp/uni-app/mine/pages/distribution/record.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="mine-stored-record">
|
||||
<fixed>
|
||||
<view class="record-header flex-center flex-column c-base" :style="{background:primaryColor}">
|
||||
<view class="f-caption">已累积提现金额(元)</view>
|
||||
<view class="wallet-price">{{wallet_price}}</view>
|
||||
</view>
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
:width="100/tabList.length + '%'" height="100rpx"></tab>
|
||||
</fixed>
|
||||
|
||||
<view class="pd-lg fill-base b-1px-b flex-center" :class="[{'mt-md':index==0}]"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="record radius"
|
||||
:style="{backgroundColor:item.status==1?primaryColor:item.status==2?subColor:'#f86c53'}"></view>
|
||||
<view class="f-title c-title flex-1 ml-md">
|
||||
<view class="flex-y-center">
|
||||
<view>{{statusType[item.status]}}</view>
|
||||
<view class="record-tag ml-sm" v-if="item.status==1"
|
||||
@tap="$util.goUrl({url:item.order_code,openType:'copy'})">复制提现编号</view>
|
||||
</view>
|
||||
|
||||
<view class="f-caption c-caption">{{item.create_time_text}}</view>
|
||||
</view>
|
||||
<view class="text-bold f-title c-title">-{{item.pay_price}}</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
id: 0,
|
||||
title: '全部'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '未到账'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '已到账'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '已拒绝'
|
||||
}],
|
||||
statusType: {
|
||||
1: '未到账',
|
||||
2: '已到账',
|
||||
3: '已拒绝'
|
||||
},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
wallet_price: '',
|
||||
loading: true,
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
}),
|
||||
onLoad() {
|
||||
this.$util.showLoading()
|
||||
let {
|
||||
wallet_price
|
||||
} = this.$util.getPage(-1).detail
|
||||
this.wallet_price = wallet_price
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
activeIndex,
|
||||
tabList,
|
||||
param
|
||||
} = this
|
||||
let {
|
||||
id
|
||||
} = tabList[activeIndex]
|
||||
param.status = id
|
||||
|
||||
let newList = await this.$api.mine.walletList(param);
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.record-header {
|
||||
width: 100%;
|
||||
height: 250rpx;
|
||||
|
||||
.wallet-price {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.record {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.record-tag {
|
||||
width: 152rpx;
|
||||
height: 32rpx;
|
||||
background: #eeeeee;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
158
uniapp/uni-app/mine/pages/distribution/team.vue
Normal file
158
uniapp/uni-app/mine/pages/distribution/team.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="mine-distribution-team">
|
||||
<fixed>
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
:width="100/tabList.length + '%'" height="100rpx"></tab>
|
||||
</fixed>
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="partner-item fill-base mt-md ml-md mr-md pd-lg radius-16"
|
||||
:class="[{'mt-md':index!=0}]" v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-center pb-lg">
|
||||
<image mode="aspectFill" class="cover radius" :src="item.avatarUrl"></image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="f-title c-title text-bold ellipsis" style="max-width: 526rpx;">{{item.nickName}}</view>
|
||||
<view class="f-caption c-caption mt-sm">绑定时间：{{item.fx_bind_time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="count-info flex-center radius-16">
|
||||
<view class="flex-center flex-column">
|
||||
<view class="f-md-title c-title text-bold">{{item.team_count}}</view>
|
||||
<view class="f-icontext c-desc">推广人数</view>
|
||||
</view>
|
||||
<view class="flex-center flex-column">
|
||||
<view class="f-md-title c-title text-bold">{{item.order_count}}</view>
|
||||
<view class="f-icontext c-desc">消费订单</view>
|
||||
</view>
|
||||
<view class="flex-center flex-column">
|
||||
<view class="f-md-title c-title text-bold">{{item.order_price}}</view>
|
||||
<view class="f-icontext c-desc">消费金额</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
title: '一级分销商',
|
||||
id: 1
|
||||
}, {
|
||||
title: '二级分销商',
|
||||
id: 2,
|
||||
}],
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
let {
|
||||
tab = 0
|
||||
} = options
|
||||
this.activeIndex = tab
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
tabList,
|
||||
activeIndex
|
||||
} = this
|
||||
param.type = tabList[activeIndex].id
|
||||
let newList = await this.$api.mine.myTeam(param);
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
let {
|
||||
one_count = 0, two_count = 0
|
||||
} = newList
|
||||
this.tabList[0].title = `一级分销商（${one_count}）`
|
||||
this.tabList[1].title = `二级分销商（${two_count}）`
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.mine-distribution-team {
|
||||
.partner-item {
|
||||
.cover {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
.count-info {
|
||||
height: 124rpx;
|
||||
background: #F5FAF7;
|
||||
|
||||
.flex-column {
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user