Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
ZF Sun
2025-10-27 15:55:29 +08:00
commit 6632080b83
513 changed files with 117442 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages_promotion/components/l-time/l-time.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<text>{{ temp }}</text>
</template>
<script>
import _time_ from './time.js';
export default {
name: 'l-time',
props: {
//日期字符串
text: {
type: [String, Number, Date],
default: ''
},
//是否显示大于当前时间日期，默认false：大于显示刚刚
maxDate: {
type: Boolean,
default: false
}
},
data() {
return {
textVal: this.text
};
},
watch: {
text() {
this.textVal = this.text;
}
},
computed: {
temp() {
return this.getText();
}
},
methods: {
getText() {
let self = this;
let timeVal = _time_.getFormatTime(self.textVal, self.maxDate);
if (timeVal && (timeVal.endsWith('刚刚') || timeVal.endsWith('分钟前'))) {
setTimeout(() => {
let temp = self.textVal;
self.textVal = '';
self.textVal = temp;
}, 60000);
}
return this.textVal ? timeVal : '';
},
onClick() {
this.$emit('on-tap', this.textVal);
}
}
};
</script>
<style></style>

161
pages_promotion/components/l-time/time.js Normal file
View File

@@ -0,0 +1,161 @@
Function.prototype.asyAfter = function(afterfn) {
var _self = this;
return function() {
var ret = _self.apply(this, arguments);
if (ret === 'next') {
return afterfn.apply(this, arguments);
}
return ret;
}
}
Date.prototype.pattern = function(fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
var week = {
"0": "\u65e5",
"1": "\u4e00",
"2": "\u4e8c",
"3": "\u4e09",
"4": "\u56db",
"5": "\u4e94",
"6": "\u516d"
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
if (/(E+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") :
"") +
week[this.getDay() + ""]);
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
.length)));
}
}
return fmt;
}
const isType = type => (/^\[object\s(.*)\]$/.exec(Object.prototype.toString.call(type)))[1];
let Time = function() {};
let timeProto = Time.prototype;
//获取当前时间戳
timeProto.getUnix = function() {
return new Date().getTime();
}
//获取当天0点0分0秒时间戳
timeProto.getTodayUnix = function() {
let date = new Date();
let myDate = `${date.getFullYear()}/${(date.getMonth() + 1)}/${date.getDate()} 00:00:00`;
return new Date(myDate).getTime();
}
//获取今年1月1日0点0分0秒时间戳
timeProto.getYearUnix = function() {
let date = new Date();
date.setMonth(0);
date.setDate(1);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date.getTime();
}
//获取当前时间标准年月日
timeProto.getLastDate = function(constTime) {
if (!constTime) {
return;
}
let date = new Date(constTime);
if (date.pattern) {
return date.pattern("yyyy-MM-dd");
}
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
return date.getFullYear() + '-' + month + '-' + day;
}
const resDateStr = function(timer, constTime) {
let _just = function(timer) {
if (timer <= 0 || Math.floor(timer / 60) <= 0) {
return "刚刚"
} else return 'next';
}
let _mm = function(timer) {
if (timer < 3600) {
return Math.floor(timer / 60) + "分钟前"
} else return 'next';
}
let _hh = function(timer, constTime) {
let today = _time_.getTodayUnix();
if (timer >= 3600 && (constTime - today >= 0)) {
//可切换显示模式
// return "今天 " + new Date(constTime).pattern("HH:mm");
return Math.floor(timer / 60 / 60) + "小时前";
} else {
return 'next'
};
}
let _dd = function(timer, constTime) {
let today = _time_.getTodayUnix();
timer = (today - constTime) / 1000;
if (timer / 86400 <= 31) {
return Math.ceil(timer / 86400) + "天前"
} else return 'next';
}
let _dlast = function(timer, constTime) {
return _time_.getLastDate(constTime);
}
let dateFilter = _just.asyAfter(_mm).asyAfter(_hh).asyAfter(_dd).asyAfter(_dlast);
return dateFilter(timer, constTime);
}
//转换时间
const reg = new RegExp("-", "g");
timeProto.getFormatTime = function(constTime, max) {
if (!constTime) {
return "";
}
switch (isType(constTime)) {
case 'Date':
constTime = constTime.getTime();
break;
case 'String':
constTime = constTime.replace(reg, "/");
default:
constTime = new Date(constTime).getTime();
break;
}
let now = this.getUnix();
let year = this.getYearUnix();
let timer = (now - constTime) / 1000;
if (constTime > now && max) {
return this.getLastDate(constTime);
}
let _t = this;
return resDateStr(timer, constTime);
}
const _time_ = new Time();
export default _time_;

98
pages_promotion/components/yuyue-date/yuyue-date.js Normal file
View File

@@ -0,0 +1,98 @@
//字符串拼接
export function strFormat(str) {
return str < 10 ? `0${str}` : str
}
// 获取当前时间
export function currentTime() {
const myDate = new Date();
const year = myDate.getFullYear()
const m = myDate.getMonth() + 1;
const d = myDate.getDate();
// const date = year + '-' + strFormat(m) + '-' + strFormat(d); // 隐藏年
const date = strFormat(m) + '-' + strFormat(d);
const hour = myDate.getHours()
const min = myDate.getMinutes()
const secon = myDate.getSeconds()
const time = strFormat(hour) + ':' + strFormat(min) + ':' + strFormat(secon);
return {
year,
date,
time
}
}
//时间戳转日期
export function timeStamp(time) {
const dates = new Date(time)
const year = dates.getFullYear()
const month = dates.getMonth() + 1
const date = dates.getDate()
const day = dates.getDay()
const hour = dates.getHours()
const min = dates.getMinutes()
const days = ['日', '一', '二', '三', '四', '五', '六']
return {
allDate: `${year}/${strFormat(month)}/${strFormat(date)}`,
date: `${strFormat(month)}-${strFormat(date)}`, //返回的日期 07-01，${strFormat(year)}-${strFormat(month)}-${strFormat(date)}
day: `周${days[day]}`, //返回的礼拜天数 星期一
hour: strFormat(hour) + ':' + strFormat(min) // + ':00' //返回的时钟 08:00
}
}
//获取最近7天的日期和礼拜天数
export function initData(appointedDay = '') {
const time = []
const date = appointedDay ? new Date(appointedDay) : new Date()
const now = date.getTime() //获取当前日期的时间戳
let timeStr = 3600 * 24 * 1000 //一天的时间戳
let obj = {
0: "今天",
1: "明天",
2: "后天"
}
for (let i = 0; i < 7; i++) {
const timeObj = {}
timeObj.date = timeStamp(now + timeStr * i).date //保存日期
timeObj.timeStamp = now + timeStr * i //保存时间戳
timeObj.week = appointedDay == '' ? (obj[i] ?? timeStamp(now + timeStr * i).day) : timeStamp(now + timeStr * i)
.day
time.push(timeObj)
}
return time
}
//时间数组
export function initTime(startTime = '09:00', endTime = '18:30', timeInterval = 1) {
const time = []
const date = timeStamp(Date.now()).allDate
const startDate = `${date} ${startTime}`
const endDate = `${date} ${endTime}`
const startTimeStamp = new Date(startDate).getTime()
const endTimeStamp = new Date(endDate).getTime()
const timeStr = 3600 * 1000 * timeInterval
for (let i = startTimeStamp; i <= endTimeStamp; i = i + timeStr) {
const timeObj = {}
timeObj.time = timeStamp(i).hour
timeObj.disable = false
time.push(timeObj)
}
return time
}
export function weekDate(){
var now = new Date(); //当前日期
var nowDayOfWeek = now.getDay(); //今天本周的第几天
var nowDay = now.getDate(); //当前日
var nowMonth = now.getMonth(); //当前月
var nowYear = now.getYear(); //当前年
var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);
var weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek));
var arr = [];
arr[0] = strFormat(weekStartDate.getMonth()+1) + '-' + strFormat(weekStartDate.getDate());
arr[1] = strFormat(weekEndDate.getMonth()+1) + '-' + strFormat(weekEndDate.getDate());
return arr;
}

158
pages_promotion/components/yuyue-date/yuyue-date.scss Normal file
View File

@@ -0,0 +1,158 @@
.content {
text-align: center;
height: 100%;
.head {
position: relative;
font-weight: bold;
padding: 32rpx 0 24rpx;
font-size: $font-size-toolbar;
.iconfont {
position: absolute;
right: 20rpx;
}
}
.container {
view,
text,
image {
box-sizing: border-box;
}
.date-list-wrap {
display: flex;
align-items: center;
border-bottom: 2rpx solid #e6e6e6;
scroll-view {
width: 80%;
white-space: nowrap;
height: 100rpx;
line-height: 100rpx;
background-color: #fff;
position: relative;
.flex-box {
display: inline-block;
width: 25%;
&.active {
.date-box {
border: none;
.days {
font-weight: bold;
color: #818181;
}
.date {
font-weight: bold;
color: #818181;
}
}
}
.date-box {
color: #909399;
text {
font-size: $font-size-tag;
}
}
}
}
.appointed-day {
flex: 1;
border-left: 2rpx solid #e6e6e6;
.day-box,
.iconfont {
font-size: $font-size-tag;
color: #909399;
}
.iconfont {
margin-left: 4rpx;
}
}
}
.time-box {
padding: 0 12rpx;
display: flex;
flex-wrap: wrap;
overflow: scroll;
background-color: #fff;
height: auto;
.item {
width: 25%;
padding: 0 8rpx;
margin-top: 30rpx;
&-box {
width: 100%;
height: 140rpx;
padding: 0 40rpx;
background: #fff;
color: #333;
border: 2rpx solid #eeeeee;
font-size: $font-size-base;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.disable {
background: #f1f3f6 !important;
color: #999 !important;
}
&.active {
background: $base-color;
color:#fff;
// background: #0094D7;
border: 2rpx solid $base-color;
font-weight: bold;
}
.all {
font-size: $font-size-tag;
padding-top: 10rpx;
}
// 自定义样式
&.diy{
height: 60rpx;
border-radius: 40rpx;
.all{
display: none;
}
}
}
}
}
}
.bottom {
display: flex;
flex-direction: row;
position: fixed;
align-items: center;
bottom: 0;
top: auto;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 -2rpx 20rpx #bcbcbc;
.show-time {
width: 66%;
height: 100rpx;
line-height: 100rpx;
font-size: $font-size-base;
text-align: left;
margin-left: 40rpx;
}
.submit-btn {
width: 25%;
height: 70rpx;
line-height: 70rpx;
font-size: $font-size-base;
}
}
}
.yuyue-date-desc{
padding-top: 2rpx;
padding-bottom: 4rpx;
font-size: $font-size-tag;
color: $color-sub;
text-align: center;
}

414
pages_promotion/components/yuyue-date/yuyue-date.vue Normal file
View File

@@ -0,0 +1,414 @@
<template>
<view>
<!-- <uni-popup ref="timePopup" type="bottom"> -->
<view class="content">
<!-- <view class="head">
<text class="title">选择时间</text>
<text class="iconfont iconclose" @click="close()"></text>
</view> -->
<view class="container">
<view class="date-list-wrap">
<!-- 日期列表 -->
<scroll-view scroll-x>
<block v-for="(item, index) in dateArr" :key="index">
<div class="flex-box" @click="selectDateEvent(index, item)">
<view class="date-box" :style="{ color: index == dateActive ? selectedTabColor : '#909399' }">
<text>{{ item.week }} {{ item.date }}</text>
</view>
</div>
</block>
</scroll-view>
<div class="appointed-day">
<uni-datetime-picker type="date" :start="pickerStartDay" :end="pickerEndDay" @change="change">
<text class="day-box">指定日期</text>
<text class="iconfont iconyoujiantou"></text>
</uni-datetime-picker>
</div>
</view>
<!-- 时间选项 -->
<view class="time-box" v-if="!isSection">
<block v-for="(item, _index) in timeArr" :key="_index">
<view class="item">
<view class="item-box diy" :class="{ disable: item.disable, active: isMultiple ? item.isActive : _index == timeActive }" @click="selectTimeEvent(_index, item)">
<!-- :style="{ color: isMultiple ? (item.isActive ? selectedItemColor : '#333') : _index == timeActive ? selectedItemColor : '#333' }" -->
<text>{{ item.time }}</text>
<!-- <text class="all">{{ item.disable ? disableText : undisableText }}</text> -->
</view>
</view>
</block>
</view>
<!-- 预约时间段 -->
<view class="time-box" v-else>
<block v-for="(item, _index) in timeArr" :key="_index">
<view class="item">
<view class="item-box" :class="{ disable: item.disable || item.isInclude, active: item.time == timeQuanBegin || item.time == timeQuanEnd }" @click="handleSelectQuantum(_index, item)">
<!-- :style="{ color: item.time == timeQuanBegin || item.time == timeQuanEnd ? selectedItemColor : '#333' }" -->
<text>{{ item.time }}</text>
<text class="all">{{ item.disable ? disableText : undisableText }}</text>
</view>
</view>
</block>
</view>
</view>
<!-- <view class="bottom">
<view class="show-time" v-if="!isMultiple && !isSection">
<text>预约时间：</text>
<text class="color-base-text">{{ orderDateTime }}</text>
</view>
<button form-type="submit" type="primary" size="mini" class="submit-btn" @click="handleSubmit">确认预约</button>
</view> -->
</view>
<!-- <view class="yuyue-date-desc">如不想线上预约，可致电商家电话预约</view> -->
<!-- </uni-popup> -->
</view>
</template>
<script>
// 插件地址：https://ext.dcloud.net.cn/plugin?id=3593
import {
initData,
initTime,
timeStamp,
currentTime,
strFormat,
weekDate
} from './yuyue-date.js';
export default {
name: 'times',
model: {
prop: 'showPop',
event: 'change'
},
props: {
isMultiple: {
//是否多选
type: Boolean,
default: false
},
isSection: {
//预约时间段
type: Boolean,
default: false
},
advanceTime: {
//提前预约时间
type: [String, Number],
default: "0"
},
disableText: {
//禁用显示的文本
type: String,
default: '已约满'
},
undisableText: {
//未禁用显示的文本
type: String,
default: '可预约'
},
timeInterval: {
// 时间间隔，小时为单位
type: String,
default: "1"
},
selectedTabColor: {
// 日期栏选中的颜色
type: String,
default: '#303133'
},
selectedItemColor: {
// 时间选中的颜色
type: String,
default: '#D50AEF'
},
beginTime: {
type: String,
default: '09:00'
},
endTime: {
type: String,
default: '19:00'
},
appointTime: {
// 预约的时间
type: Array,
default () {
return [];
}
},
disableTimeSlot: {
// 预约开始和结束时间，来禁用时间段
type: Object,
default () {
return {};
}
},
disableWeek: {
// 限制周几不可以预约
type: Array,
default () {
return [];
}
}
},
watch: {
appointTime: {
handler(val) {
if (val && val.length) {
this.initOnload();
}
}
},
beginTime: function(nVal, oVal) {
this.initOnload();
this.handleSubmit();
},
endTime: function(nVal, oVal) {
this.initOnload();
this.handleSubmit();
},
},
data() {
return {
pickerStartDay: '', // 指定开始日期
pickerEndDay: '', // 指定结束日期
orderDateTime: '暂无选择', // 选中时间
orderTimeArr: {}, //多选的时间
dateArr: [], //日期数据
timeArr: [], //时间数据
nowDate: '', // 当前日期
dateActive: 0, //选中的日期索引
timeActive: 0, //选中的时间索引
timeQuanBeginIndex: 0, //时间段开始的下标
selectDate: '', //选择的日期
selectTime: '', //选择的时间
timeQuanBegin: '', //时间段开始时间
timeQuanEnd: '' //时间段结束时间
};
},
created(props) {
this.selectDate = this.nowDate = currentTime().date;
this.pickerStartDay = currentTime().year + '-' + currentTime().date;
const now = new Date(this.pickerStartDay).getTime(); //获取当前日期的时间戳
let timeStr = 3600 * 24 * 1000; //一天的时间戳
let day = 90; // 未来3个月
this.pickerEndDay = timeStamp(now + timeStr * day).allDate;
this.initOnload();
this.dateArr = initData(); // 日期栏初始化
},
methods: {
open() {
this.$refs.timePopup.open();
},
close() {
this.$refs.timePopup.close();
},
// 指定时间
change(e) {
let date = e.split("-");
date = date[1] + "-" + date[2];
if (this.disableWeek.length && date >= weekDate()[0] && date <= weekDate()[1]) {
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
let index = new Date(e).getDay();
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
uni.showToast({
title: weekBox[index] + '不可以预约',
icon: 'none'
})
return false;
}
}
this.initOnload(e);
this.dateArr = initData(e); // 日期栏初始化
this.selectDateEvent(0, this.dateArr[0]);
},
initOnload(appointedDay) {
this.timeArr = initTime(this.beginTime, this.endTime, parseFloat(this.timeInterval)); //时间选项初始化
this.timeQuanBegin = this.timeQuanEnd = '';
let isFullTime = true;
this.timeArr.forEach((item, index) => {
// 判断默认是不能选择的周，则都禁止选中
if (this.disableWeek.length && this.selectDate >= weekDate()[0] && this.selectDate <=
weekDate()[1]) {
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
let date = currentTime().year + '-' + this.selectDate;
let index = new Date(date).getDay();
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
item.disable = true;
}
}
//判断是当前这一天，选中时间小于当前时间则禁用
if (this.selectDate == this.nowDate && currentTime().time > item.time) {
item.disable = true;
}
// 将提前预约的时间禁用 advanceTime
var advTime = new Date(new Date().setMinutes(new Date().getMinutes() + parseInt(this.advanceTime) * 60));
var advTimeStr = strFormat(advTime.getHours()) + ":" + strFormat(advTime.getMinutes()) + ":" + strFormat(advTime.getSeconds());
var advTimeStr1 = strFormat(advTime.getMonth() + 1) + "-" + strFormat(advTime.getDate());
if (this.selectDate == advTimeStr1 && advTimeStr > item.time || advTimeStr1 > this.selectDate) {
item.disable = true;
}
// 将预约的时间禁用
this.appointTime.forEach(t => {
let [date, time] = t.split(' ');
time = time.slice(0, -3);
if (date == currentTime().year + '-' + this.selectDate && item.time == time ||
date == currentTime().year + '-' + advTimeStr1 && item.time == time) {
item.disable = true;
}
});
// 禁用时间段
const cur_time = `${this.selectDate} ${item.time}`;
const {
begin_time,
end_time
} = this.disableTimeSlot;
if (begin_time && end_time && (begin_time <= cur_time && cur_time <= end_time)) {
item.disable = true;
}
// 判断是否当前日期时间都被预约
if (!item.disable) {
isFullTime = false;
}
this.isSection && (item.isInclude = false);
});
this.orderDateTime = isFullTime ? '暂无选择' : this.selectDate;
this.timeActive = -1;
for (let i = 0, len = this.timeArr.length; i < len; i++) {
if (!this.timeArr[i].disable) {
this.orderDateTime = {
data: `${this.selectDate}`,
time: `${this.timeArr[i].time}`
};
this.timeActive = i;
return;
}
}
},
// 日期选择事件
selectDateEvent(index, item) {
if (this.disableWeek.length && item.date >= weekDate()[0] && item.date <= weekDate()[1]) {
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
let index = new Date(item.timeStamp).getDay();
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
uni.showToast({
title: weekBox[index] + '不可以预约',
icon: 'none'
})
return false;
}
}
this.dateActive = index;
this.selectDate = item.date;
this.initOnload();
this.handleSubmit();
},
// 时间选择事件
selectTimeEvent(index, item) {
if (item.disable) return;
if (this.isMultiple) {
item.isActive = !item.isActive;
this.timeArr = this.timeArr.slice();
this.orderTimeArr[this.selectDate] = this.timeArr.reduce((prev, cur) => {
cur.isActive && prev.push(cur.time);
return prev;
}, []);
} else {
this.timeActive = index;
this.selectTime = item.time;
this.orderDateTime = {
data: `${this.selectDate}`,
time: `${item.time}`
};
}
this.handleSubmit();
},
// 选择时间段
handleSelectQuantum(index, item) {
if (item.disable) return;
function clearTime() {
this.timeQuanBeginIndex = index;
this.timeQuanBegin = item.time;
this.timeQuanEnd = '';
}
if (!this.timeQuanBegin) {
clearTime.call(this);
return;
}
if (!this.timeQuanEnd && this.timeQuanBegin) {
let isDisble = false;
let start = this.timeQuanBeginIndex;
let end = index;
start > end && ([start, end] = [end, start]);
for (let i = start + 1; i < end; i++) {
if (this.timeArr[i].disable) {
isDisble = true;
clearTime.call(this);
return;
}
}
if (!isDisble) {
for (let i = start + 1; i < end; i++) {
this.timeArr[i].isInclude = true;
}
}
this.timeQuanEnd = item.time;
return;
}
if (this.timeQuanBegin && this.timeQuanEnd) {
this.timeArr.forEach(t => {
t.isInclude = false;
});
clearTime.call(this);
}
},
handleChange() {
this.timeQuanBegin > this.timeQuanEnd && ([this.timeQuanBegin, this.timeQuanEnd] = [this.timeQuanEnd, this.timeQuanBegin]);
},
handleSubmit() {
if (this.isSection) {
this.handleChange();
this.$emit('change', {
beginTime: `${this.selectDate} ${this.timeQuanBegin}`,
endTime: `${this.selectDate} ${this.timeQuanEnd}`
});
return;
}
if (this.isMultiple) {
let time = [];
for (let date in this.orderTimeArr) {
this.orderTimeArr[date].forEach(item => {
time.push(`${date} ${item}`);
});
}
this.$emit('change', time);
} else {
// this.$emit('change', currentTime().year + '-' + this.orderDateTime);
this.$emit('change', {
date: currentTime().year + '-' + this.orderDateTime.data,
time: this.orderDateTime.time
});
}
}
}
};
</script>
<style lang="scss" scoped>
@import './yuyue-date.scss';
</style>

813
pages_promotion/fenxiao/apply.vue Normal file
View File

@@ -0,0 +1,813 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="apply">
<!-- 导航栏 -->
<!-- #ifdef H5 -->
<view class="head-nav color-base-bg"></view>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- <view class="head-nav color-base-bg" :class="{ active: isIphoneX }"></view> -->
<!-- #endif -->
<view v-if="status === ''">
<block v-if="basicsConfig.is_apply == 1">
<view class="image" :class="fenXiaoAgreement.agreement.img ? '' : 'color-base-bg'">
<image v-if="fenXiaoAgreement.agreement.img" class="apply-adv" :src="$util.img(fenXiaoAgreement.agreement.img)" mode="widthFix" style="width: 100%;"/>
<view class="bg ns-gradient-otherpages-fenxiao-apply-apply-bg" v-else>
<view class="bg-title"><text>请填写申请信息</text></view>
<view class="bg-img">
<image :src="$util.img('public/uniapp/fenxiao/apply/edit.png')" mode="scaleToFill"></image>
</view>
</view>
</view>
<view class="apply-wrap">
<view class="app-info">
<view class="info">
<view class="apply-item">
<view class="title">邀请人</view>
<text class="shuru">{{ sourceMemberInfo.fenxiao_name }}</text>
</view>
<view class="apply-item">
<view class="title">{{ fenxiaoWords.fenxiao_name }}名称</view>
<input class="input" type="text" maxlength="30" :placeholder="'请输入' + fenxiaoWords.fenxiao_name + '名称'" v-model="formData.fenXiaoName" placeholder-class="pla-cla" />
</view>
<view class="apply-item">
<view class="title">手机号</view>
<input class="input" type="number" placeholder="请输入手机号" maxlength="11" v-model="formData.mobile" placeholder-class="pla-cla" />
</view>
<view class="apply-xy" v-if="isAgreement" @click="ckeckedRuler()">
<view class="iconfont" :class="isChecked ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'">
</view>
我已阅读并了解
<text class="color-base-text" @click.stop="openPopup">【{{ fenxiaoWords.fenxiao_name }}申请协议】</text>
</view>
<view class="apply-btn">
<button @click="applyFenXiao" class="color-base-bg">申请成为{{ fenxiaoWords.fenxiao_name }}</button>
</view>
</view>
</view>
<view class="apply-message-wrap" v-if="fenxiaoConfig.fenxiao_condition == 2 || fenxiaoConfig.fenxiao_condition == 3">
<view class="apply-message">
<view class="apply-message-title color-base-bg-before">分销商申请条件</view>
<text class="apply-message-info font-size-goods-tag" v-if="fenxiaoConfig.fenxiao_condition == 2">
申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费次数需要达到{{ fenxiaoConfig.consume_count }}次
</text>
<text class="apply-message-info font-size-goods-tag" v-if="fenxiaoConfig.fenxiao_condition == 3">
申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费金额需要达到{{ fenxiaoConfig.consume_money }}元
</text>
</view>
</view>
<view class="app-info-list" v-if="fenxiaoConfig.fenxiao_condition == 4">
<view class="apply-message">
<view class="apply-message-title color-base-bg-before">分销商申请条件</view>
<text class="apply-message-info font-size-goods-tag">申请成为{{ fenxiaoWords.fenxiao_name }},需要购买以下指定商品(任选其一)</text>
</view>
<view class="goods-list" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
</view>
<view class="goods-content">
<view class="content-name">{{ item.goods_name }}</view>
<view class="delete-price font-size-activity-tag color-tip content-price">
<block>
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
{{ item.market_price > 0 ? item.market_price : item.price }}
</block>
</view>
</view>
</view>
<view class="content-lists" v-if="isShow" @click="onOpen()">
{{ isOpen ? '展开更多' : '收起' }}
<text class="iconfont icon-unfold" style="font-weight: bold;" v-if="isOpen"></text>
<text class="iconfont icon-fold" v-else></text>
</view>
</view>
</view>
</block>
<view class="empty" v-else-if="basicsConfig.is_apply == 0" style="margin-top:40rpx;">
<block v-if="fenxiaoConfig.fenxiao_condition == 2 || fenxiaoConfig.fenxiao_condition == 3">
<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
<text v-if="fenxiaoConfig.fenxiao_condition == 2">申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费次数需要达到{{ fenxiaoConfig.consume_count }}次</text>
<text v-if="fenxiaoConfig.fenxiao_condition == 3">
申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费金额需要达到{{ fenxiaoConfig.consume_money | moneyFormat }}元
</text>
</block>
<view class="apply-wrap" v-if="fenxiaoConfig.fenxiao_condition == 4">
<view class="app-info-list">
<view class="apply-message">
<view class="apply-message-title color-base-bg-before">成为分销商的条件</view>
<text class="apply-message-info font-size-goods-tag">成为{{ fenxiaoWords.fenxiao_name }},需要购买以下指定商品(任选其一)</text>
</view>
<view class="goods-list" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
</view>
<view class="goods-content">
<view class="content-name">{{ item.goods_name }}</view>
<view class="delete-price font-size-activity-tag color-tip content-price">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ item.market_price > 0 ? item.market_price : item.price }}</text>
</view>
</view>
</view>
<view class="content-lists" v-if="isShow" @click="onOpen()">
{{ isOpen ? '展开更多' : '收起' }}
<text class="iconfont icon-unfold" style="font-weight: bold;" v-if="isOpen"></text>
<text class="iconfont icon-fold" v-else></text>
</view>
</view>
</view>
</view>
<view class="empty" v-else>
<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
<text>您还不是分销商</text>
</view>
</view>
<view class="empty" v-else>
<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
<text v-if="status == 1">您已提交{{ fenxiaoWords.fenxiao_name }}申请，等待平台审核</text>
<block v-else-if="status == -1">
<text>您提交的{{ fenxiaoWords.fenxiao_name }}申请，已被拒绝，请再接再厉</text>
<view class="again-btn color-base-bg" @click="againApply">重新申请</view>
</block>
</view>
<view @touchmove.prevent v-if="fenXiaoAgreement.document">
<uni-popup ref="applyPopup" type="center" class="wap-floating">
<view class="conten-box">
<text class="iconfont icon-close" @click="toClose"></text>
<view class="title">{{ fenXiaoAgreement.document.title }}</view>
<view class="content-con">
<scroll-view scroll-y="true" class="con" show-scrollbar="true">
<rich-text :nodes="fenXiaoAgreement.document.content"></rich-text>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import validate from 'common/js/validate.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import fenxiaoWords from 'common/js/fenxiao-words.js';
import htmlParser from '@/common/js/html-parser';
export default {
data() {
return {
isChecked: false,
isShow: true,
isIphoneX: false,
// 推荐人信息
sourceMemberInfo: {
fenxiao_name: '无'
},
formData: {
fenXiaoName: '',
mobile: ''
},
fenXiaoAgreement: {
agreement: {},
document: {}
},
isAgreement: false,
back: '',
isAbled: false,
status: '',
isSub: false,
fenxiaoConfig: {
fenxiao_condition: 0
},
basicsConfig: {},
goodsList: [],
isOpen: false
};
},
components: {
uniPopup
},
mixins: [fenxiaoWords],
onLoad(option) {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
this.onOpen();
this.getAgreement();
if (option.back) this.back = option.back;
},
async onShow() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (this.fenxiaoWords && this.fenxiaoWords.fenxiao_name) this.$langConfig.title(this.fenxiaoWords.fenxiao_name + '申请');
if (this.storeToken) {
this.applyStatus();
this.getSourceMemberInfo();
} else {
this.$util.redirectTo('/pages_tool/login/login', {
back: '/pages_promotion/fenxiao/apply'
}, 'redirectTo');
}
this.getFenxiaoConfig();
this.getFenxiaoBasicsConfig();
},
methods: {
toClose() {
this.$refs.applyPopup.close();
},
ckeckedRuler() {
this.isChecked = !this.isChecked;
},
goodsImg(imgStr) {
let imgs = imgStr.split(',');
return imgs[0] ?
this.$util.img(imgs[0], {
size: 'mid'
}) :
this.$util.getDefaultImage().goods;
},
imgError(index) {
this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
},
onOpen() {
this.isOpen = this.isOpen ? false : true;
this.getFenxiaoConfig();
},
goodsTag(data) {
return data.label_name || '';
},
//商品详情
toDetail(item) {
this.$util.redirectTo('/pages/goods/detail', {
goods_id: item.goods_id
});
},
applyStatus() {
this.$api.sendRequest({
url: '/fenxiao/api/apply/status',
data: {},
success: res => {
if (res.code >= 0 && res.data) {
this.status = res.data.status;
this.isSub = false;
if (this.status == 2) {
this.$util.redirectTo('/pages/member/index');
}
}
this.$refs.loadingCover.hide();
}
});
},
navigateBack() {
this.$util.goBack();
},
applyFenXiao() {
if (!this.fenXiaoValidata()) return;
if (this.isAgreement && !this.isChecked) {
this.$util.showToast({
title: '请仔细阅读协议，并勾选'
});
return;
}
if (this.isSub) return;
this.isSub = true;
this.$api.sendRequest({
url: '/fenxiao/api/apply/applyfenxiao',
data: {
fenxiao_name: this.formData.fenXiaoName,
mobile: this.formData.mobile
},
success: res => {
if (res.code >= 0 && res.data) {
if (this.basicsConfig.is_examine == 1) {
this.applyStatus();
} else {
this.$util.redirectTo('/pages_promotion/fenxiao/index');
}
} else {
this.isSub = false;
this.$util.showToast({
title: res.message
});
}
}
});
},
// 申请协议
getAgreement() {
this.$api.sendRequest({
url: '/fenxiao/api/config/agreement',
success: res => {
if (res.code === 0) {
this.fenXiaoAgreement = res.data;
if (this.fenXiaoAgreement.agreement.is_agreement === '1') {
if (this.fenXiaoAgreement.document.content) this.fenXiaoAgreement.document
.content = htmlParser(this.fenXiaoAgreement.document.content);
this.isAgreement = true;
}
}
}
});
},
openPopup() {
if (this.isAgreement) this.$refs.applyPopup.open();
},
closePopup() {
this.$refs.applyPopup.close();
},
fenXiaoValidata() {
let rule = [{
name: 'fenXiaoName',
checkType: 'required',
errorMsg: '请输入' + this.fenxiaoWords.fenxiao_name + '名称'
},
{
name: 'mobile',
checkType: 'required',
errorMsg: '请输入手机号'
},
{
name: 'mobile',
checkType: 'phoneno',
errorMsg: '请输入正确的手机号'
}
];
var checkRes = validate.check(this.formData, rule);
if (checkRes) {
return true;
} else {
this.$util.showToast({
title: validate.error
});
return false;
}
},
// 获取推广人信息
getSourceMemberInfo() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/sourceinfo',
success: res => {
if (res.code == 0 && res.data) {
this.sourceMemberInfo = res.data;
}
}
});
},
/**
* 重新申请
*/
againApply() {
this.status = '';
},
/**
* 获取申请条件
*/
getFenxiaoConfig() {
this.$api.sendRequest({
url: '/fenxiao/api/config/fenxiao',
data: {},
success: res => {
if (res.code >= 0 && res.data) {
this.fenxiaoConfig = res.data;
this.goodsList = res.data.goods_list;
if (this.goodsList.length <= 3) {
this.isShow = false;
} else if (this.goodsList.length > 3 && this.isOpen == true) {
this.isShow = true;
this.goodsList = res.data.goods_list.slice(0, 3);
}
}
}
});
},
/**
* 获取分销基本配置
*/
getFenxiaoBasicsConfig() {
this.$api.sendRequest({
url: '/fenxiao/api/config/basics',
data: {},
success: res => {
if (res.code >= 0 && res.data) {
this.basicsConfig = res.data;
}
}
});
}
},
onBackPress(options) {
if (options.from === 'navigateBack') {
return false;
}
this.$util.redirectTo('/pages/member/index');
return true;
}
};
</script>
<style lang="scss">
.image {
width: 100%;
}
/deep/.uni-scroll-view {
background-color: #fff;
}
/deep/.uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
display: none;
}
.head-nav {
width: 100%;
height: var(--status-bar-height);
}
.head-nav.active {
padding-top: 40rpx;
}
.head-return {
height: 90rpx;
line-height: 90rpx;
color: #fff;
font-weight: 600;
font-size: $font-size-base;
position: relative;
text-align: center;
text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20rpx;
display: inline-block;
margin-right: 10rpx;
font-size: 32rpx;
}
}
input::placeholder {
text-align: right;
}
.apply {
.bg {
height: 160rpx;
display: flex;
justify-content: space-between;
padding: 30rpx 80rpx 44rpx 80rpx;
align-items: center;
.bg-title {
color: #ffffff;
font-size: 36rpx;
}
.bg-img {
width: 150rpx;
height: 150rpx;
image {
width: 100%;
height: 100%;
}
}
}
.apply-adv {
width: 100%;
}
.apply-wrap {
padding-bottom: 100rpx;
.app-info {
position: relative;
top: -28rpx;
width: 692rpx;
margin: 0 auto;
border-radius: 10rpx;
background-color: #ffffff;
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.apply-item {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 100rpx);
padding: 20rpx 10rpx;
margin: 4rpx 10rpx;
background-color: #ffffff;
border-bottom: 1rpx solid #f1f1f1;
.title {
color: #000;
font-size: 28rpx;
}
.input {
width: 70%;
text-align: right;
height: 40rpx;
padding-left: 30rpx;
font-size: $font-size-tag;
color: #a7a7a7;
}
.pla-cla {
color: #babbc1;
}
.shuru {
padding-left: 30rpx;
}
}
.apply-xy {
display: flex;
margin-top: 30rpx;
color: #838383;
align-items: center;
font-size: 26rpx;
text {
color: #a7a7a7;
}
.icon-yuan_checkbox {
font-size: 36rpx;
color: #838383;
margin-right: 14rpx;
line-height: 1;
}
.icon-yuan_checked {
font-size: 36rpx;
margin-right: 14rpx;
line-height: 1;
}
}
}
}
.app-info-list {
margin: 0 30rpx 20rpx;
padding: 30rpx;
border-radius: 10rpx;
background-color: #ffffff;
.apply-message-title {
line-height: 1;
font-size: 28rpx;
font-weight: bold;
position: relative;
padding-left: $padding;
box-sizing: border-box;
}
.apply-message-title::before {
content: '';
display: block;
position: absolute;
width: 6rpx;
height: 100%;
left: 0;
top: 0;
border-radius: 6rpx;
}
.apply-message-info {
display: inline-block;
line-height: 1.2;
color: #333;
background: #f9f9f9;
position: relative;
top: 20rpx;
width: 586rpx;
padding: 20rpx 20rpx;
border-radius: 10rpx;
margin-bottom: 40rpx;
}
.goods-list {
padding: 30rpx 0;
// margin-top: 50rpx;
display: flex;
border-bottom: 2rpx solid #f6f5f5;
.goods-img {
width: 130rpx;
height: 130rpx;
margin-right: 20rpx;
border-radius: 10rpx;
image {
width: 100%;
height: 100%;
}
}
.goods-content {
display: flex;
flex-direction: column;
justify-content: space-between;
.content-name {
font-size: 28rpx;
color: #303133;
width: 460rpx;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.content-price {
font-size: 28rpx !important;
font-weight: 600;
color: #ff4a01 !important;
}
}
}
.content-lists {
margin: 20rpx auto 0;
text-align: center;
color: #a1a3a8;
text {
padding-left: 10rpx;
}
}
}
.apply-btn {
margin: 50rpx auto 70rpx auto;
border-radius: $border-radius;
width: 90%;
button {
color: #ffffff;
width: 100%;
margin: 0;
}
}
.apply-message-wrap {
margin-bottom: 100rpx;
width: 100%;
padding: 10rpx;
display: flex;
justify-content: center;
.apply-message {
width: 85%;
display: flex;
flex-direction: column;
.apply-message-title {
line-height: 1;
font-size: $font-size-tag;
position: relative;
padding-left: $padding;
box-sizing: border-box;
}
.apply-message-title::before {
content: '';
display: block;
position: absolute;
width: 6rpx;
height: 100%;
left: 0;
top: 0;
border-radius: 6rpx;
}
.apply-message-info {
padding-top: $padding;
line-height: 1.2;
color: $color-tip;
}
}
}
}
.again-btn {
display: flex;
justify-content: center;
width: auto;
border-radius: $border-radius;
margin-top: 20rpx;
color: #ffffff;
align-items: center;
padding: 10rpx 60rpx;
box-sizing: border-box;
}
.conten-box {
padding: 0 30rpx;
box-sizing: border-box;
height: 812rpx;
width: 580rpx;
border-radius: 10rpx;
text {
margin-top: 25rpx;
float: right;
line-height: 1;
}
.title {
width: 100%;
font-size: 36rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2rpx solid #e0e0e0;
line-height: 1;
padding-bottom: 28rpx;
}
.content-con {
width: 100%;
height: 680rpx;
box-sizing: border-box;
}
.con {
width: 100%;
height: 100%;
}
.sure {
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
.sure-btn {
width: 100%;
height: 60rpx;
border-radius: $border-radius;
color: #ffffff;
text-align: center;
line-height: 60rpx;
}
}
}
.empty {
width: 100%;
margin-top: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width: 300rpx;
height: 176rpx;
margin-bottom: 50rpx;
}
text {
font-size: $font-size-goods-tag;
font-weight: 600;
}
}
}
</style>
<style>
/deep/ .uni-popup__wrapper-box {
border-radius: 20rpx;
}
</style>

147
pages_promotion/fenxiao/bill.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="bill" >
<mescroll-uni ref="mescroll" @getData="getData" class="member-point" :size="8">
<block slot="list">
<view class="balances" v-if="accountList.length" v-for="item in accountList" :key="item.id">
<image v-if="item.type == 'order'" :src="$util.img('public/uniapp/fenxiao/bill/jiesuan.png')" mode="widthFix"></image>
<image v-else :src="$util.img('public/uniapp/fenxiao/bill/withdraw.png')" mode="widthFix"></image>
<view class="balances-info">
<text>{{ item.type_name }}</text>
<text>账单编号: {{ item.account_no }}</text>
<text>{{ $util.timeStampTurnTime(item.create_time) }}</text>
</view>
<view class="balances-num">
<text :class="item.money > 0 ? 'color-base-text' : ''">{{ item.money > 0 ? '+' + item.money : item.money }}</text>
</view>
</view>
<ns-empty v-if="!accountList.length && showEmpty" text="暂无账单信息" :isIndex="false"></ns-empty>
</block>
<loading-cover ref="loadingCover"></loading-cover>
</mescroll-uni>
</view>
</template>
<script>
export default {
data() {
return {
accountList: {},
showEmpty: true
};
},
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
},
methods: {
getData(mescroll) {
if (mescroll.num == 1) {
this.accountList = [];
}
this.$api.sendRequest({
url: '/fenxiao/api/account/page',
data: {
page: mescroll.num,
page_size: mescroll.size
},
success: res => {
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data && res.data.list) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.accountList = []; //如果是第一页需手动制空列表
this.accountList = this.accountList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
this.showEmpty = true;
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
}
}
};
</script>
<style lang="scss">
/deep/ .empty {
margin-top: 0 !important;
}
/deep/ .member-point .mescroll-uni-content {
overflow: hidden;
}
.balances {
width: calc(100% - 60rpx);
border-radius: 10rpx;
margin: 0 auto;
padding: 27rpx 27rpx;
box-sizing: border-box;
display: flex;
align-items: flex-start;
background: #fff;
margin-bottom: 18rpx;
margin-top: 18rpx;
image {
width: 54rpx;
height: 54rpx;
border-radius: 50%;
}
.balances-info {
flex: 1;
margin-left: 16rpx;
display: flex;
flex-direction: column;
text {
line-height: 1;
&:last-child {
font-size: $font-size-base;
}
&:nth-child(2) {
margin-top: 18rpx;
font-size: $font-size-tag;
color: $color-tip;
}
&:nth-child(3) {
font-size: $font-size-tag;
margin-top: 19rpx;
color: $color-tip;
}
}
}
.balances-num {
text {
line-height: 1;
font-size: $font-size-toolbar;
color: #000;
}
}
}
</style>

289
pages_promotion/fenxiao/child_fenxiao.vue Normal file
View File

@@ -0,0 +1,289 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<mescroll-uni ref="mescroll" @getData="getData" top="0" class="member-point" :size="8" v-if="storeToken">
<block slot="list">
<view class="team-li" v-for="(item, index) in teamList" :key="index" v-if="teamList.length != 0" @click="toFenxiaoOrder(item)">
<view class="li-box" :class="{ active: index + 1 == teamList.length }">
<image v-if="item.headimg" :src="$util.img(item.headimg)" @error="imageError(index)" mode="aspectFill"></image>
<image v-else :src="$util.getDefaultImage().head"></image>
<view class="member-info">
<view class="member-name">
<view class="left">
<view class="flex-box">
<view class="name">{{ item.nickname }}</view>
<view v-if="item.level_name" class="title color-base-border color-base-text">{{ item.level_name }}</view>
</view>
<view class="color-tip font-size-goods-tag">加入时间：{{ $util.timeStampTurnTime(item.bind_fenxiao_time).substring(0, 10) }}</view>
</view>
<view class="consume-info">
<view><text>{{ item.one_child_fenxiao_num + item.one_child_num }}</text> 人</view>
<view><text>{{ item.order_num }}</text> 单</view>
<view><text>{{ item.order_money|moneyFormat }}</text> 元</view>
</view>
</view>
</view>
</view>
</view>
<block v-if="teamList.length == 0 && emptyShow">
<ns-empty text="暂无数据" :isIndex="false"></ns-empty>
</block>
</block>
</mescroll-uni>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
data() {
return {
teamList: [],
emptyShow: false,
};
},
mixins: [fenxiaoWords],
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
if (!this.storeToken) {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/childfenxiao');
});
}
},
methods: {
getData(mescroll) {
this.emptyShow = false;
if (mescroll.num == 1) {
this.teamList = [];
}
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/childfenxiao',
data: {
page_size: mescroll.size,
page: mescroll.num
},
success: res => {
this.emptyShow = true;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.teamList = []; //如果是第一页需手动制空列表
this.teamList = this.teamList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
imageError(e) {
this.teamList[e].headimg = this.$util.getDefaultImage().head;
this.$forceUpdate();
},
toFenxiaoOrder(item) {
if (item.fenxiao_id) {
this.$util.redirectTo('/pages_promotion/fenxiao/relation', { fenxiao_id: item.fenxiao_id });
} else {
this.$util.redirectTo('/pages_promotion/fenxiao/relation', { sub_member_id: item.member_id });
}
}
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.$refs.mescroll.refresh();
}
}
}
};
</script>
<style lang="scss">
.team-cate {
padding: 0 30rpx;
width: calc(100%);
height: 90rpx;
display: flex;
box-sizing: border-box;
background: #ffffff;
position: fixed;
left: 0;
top: var(--window-top);
.cate-li {
flex: 1;
justify-content: center;
text-align: center;
align-items: center;
display: inline-block;
line-height: 90rpx;
height: 100%;
font-size: 30rpx;
&.active {
box-sizing: border-box;
border-bottom: 4rpx solid;
}
}
}
.team-member {
width: 100%;
height: 70rpx;
line-height: 70rpx;
color: $color-tip;
padding: 0 $padding;
box-sizing: border-box;
}
.team-li {
margin: $margin-updown $margin-both;
padding: $margin-both;
box-sizing: border-box;
background: #fff;
margin-bottom: 20rpx;
border-radius: 10rpx;
.li-box {
display: flex;
box-sizing: border-box;
align-items: center;
image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
.member-info {
flex: 1;
padding-left: $padding;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
.member-name {
display: flex;
justify-content: space-between;
align-items: center;
font-size: $font-size-base;
.left {
width: 0;
flex: 1;
.flex-box {
display: flex;
align-items: center;
margin-bottom: 6rpx;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1;
}
.title {
padding: 4rpx 16rpx;
justify-content: center;
align-items: center;
text-align: center;
font-size: $font-size-activity-tag;
border-radius: 4rpx;
margin-left: 10rpx;
line-height: 1;
border: 2rpx solid;
color: #fff;
}
}
.consume-info {
text-align: right;
text {
margin-right: 6rpx;
}
view {
line-height: 1.5;
font-size: 24rpx;
}
}
}
.member-date {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: $padding;
view {
width: 50%;
height: 100%;
text-align: left;
line-height: 1;
text {
font-size: $font-size-tag;
color: $color-tip;
}
.tit {
color: $color-tip;
}
}
}
}
.btn-see {
display: flex;
flex-direction: row-reverse;
}
}
.order-box-btn {
display: inline-block;
line-height: 56rpx;
padding: 0 30rpx;
font-size: 26rpx;
color: #303133;
border: 2rpx solid #999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: $border-radius;
border-radius: $border-radius;
margin-top: 30rpx;
}
.li-box.active {
border: none;
}
}
</style>

413
pages_promotion/fenxiao/goods_list.vue Normal file
View File

@@ -0,0 +1,413 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="content">
<mescroll-uni ref="mescroll" @getData="getGoodsList">
<block slot="list">
<view class="goods-list" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }">
<scroll-view class="quick-nav" scroll-x="true">
<!-- #ifdef MP -->
<view class="uni-scroll-view-content">
<!-- #endif -->
<view class="quick-nav-item" :class="{ selected: categoryId == 0 }" @click="changeCategory(0)">全部</view>
<view
class="quick-nav-item"
v-for="item in categoryList"
:class="{ selected: categoryId == item.category_id }"
@click="changeCategory(item.category_id)"
>
{{ item.category_name }}
</view>
<!-- #ifdef MP -->
</view>
<!-- #endif -->
</scroll-view>
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrap">
<image :src="$util.img(item.sku_image, { size: 'mid' })" @error="imageError(index)" mode="aspectFill" />
</view>
<view class="goods-content">
<view class="goods-name">
<text class="name">{{ item.sku_name }}</text>
<view class="label-list" v-if="item.label_name">
<text class="label-item">{{ item.label_name }}</text>
</view>
</view>
<view class="goods-bottom">
<view class="goods-price color-base-text">
<text class="font-size-tag">￥</text>
{{ item.discount_price }}
</view>
<view class="goods-share" @click.stop="shareFn('goods', index)">
<text class="icondiy icon-system-share"></text>
<text class="txt" v-if="!is_fenxiao">分享</text>
<text class="txt" v-else>赚{{ item.commission_money }}元</text>
</view>
</view>
</view>
</view>
<view class="empty" v-if="goodsList.length == 0">
<ns-empty :isIndex="false" text="暂无分销商品" textColor="#fff"></ns-empty>
</view>
</view>
</block>
</mescroll-uni>
<view class="active-btn" v-if="goodsList.length">
<!-- #ifdef MP -->
<button class="share-btn" :plain="true" open-type="share">分享好友</button>
<text class="tag">|</text>
<!-- #endif -->
<text class="btn" @click="shareFn('fenxiao')">生成海报</text>
</view>
<loading-cover ref="loadingCover"></loading-cover>
<!-- 分享弹窗 -->
<view @touchmove.prevent.stop>
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
<view>
<view class="share-title">分享</view>
<view class="share-content">
<!-- #ifdef MP -->
<view class="share-box">
<button class="share-btn" :plain="true" open-type="share">
<view class="iconfont icon-share-friend"></view>
<text>分享给好友</text>
</button>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="share-box" v-if="goodsCircle">
<button class="share-btn" :plain="true" @click="openBusinessView">
<view class="iconfont icon-haowuquan"></view>
<text>分享到好物圈</text>
</button>
</view>
<!-- #endif -->
<view class="share-box" @click="openPosterPopup">
<button class="share-btn" :plain="true">
<view class="iconfont icon-pengyouquan"></view>
<text>生成分享海报</text>
</button>
</view>
<!-- #ifdef H5 -->
<view class="share-box" @click="copyUrl">
<button class="share-btn" :plain="true">
<view class="iconfont icon-fuzhilianjie"></view>
<text>复制链接</text>
</button>
</view>
<!-- #endif -->
</view>
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
</view>
</uni-popup>
</view>
<!-- 海报 -->
<view @touchmove.prevent.stop>
<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
<template v-if="poster != '-1'">
<view>
<view class="image-wrap">
<image :src="$util.img(poster)" :show-menu-by-longpress="true" />
</view>
<!-- #ifdef MP || APP-PLUS -->
<view class="save" @click="saveGoodsPoster()">保存图片</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="save">长按保存图片</view>
<!-- #endif -->
</view>
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
</template>
<view v-else class="msg">{{ posterMsg }}</view>
</uni-popup>
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import list from './public/js/goods_list.js';
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
mixins: [list, fenxiaoWords]
};
</script>
<style>
.quick-nav >>> .uni-scroll-view-content {
display: flex;
}
</style>
<style lang="scss">
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
.quick-nav {
margin-bottom: 20rpx;
.quick-nav-item {
display: flex;
align-items: center;
padding: 0 18rpx;
box-sizing: border-box;
flex-shrink: 0;
border-radius: 40rpx;
margin-right: 20rpx;
height: 48rpx;
font-size: 24rpx;
background: #fff;
color: $base-color;
&.selected {
background: $base-color;
color: #fff;
}
&:last-child {
margin-right: 0;
}
}
}
.content {
overflow: hidden;
padding: 0 30rpx 160rpx;
min-height: 100vh;
background-color: #ff2d46;
.goods-list {
min-height: 100vh;
padding: 420rpx 30rpx 0;
background-size: 100%;
background-repeat: no-repeat;
box-sizing: border-box;
.goods-item {
margin-bottom: 20rpx;
background: #ffffff;
padding: $padding;
display: flex;
border-radius: 10rpx;
&:last-child {
margin-bottom: 0;
}
}
.image-wrap {
display: inline-block;
width: 200rpx;
height: 200rpx;
line-height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
flex-shrink: 0;
image {
width: 100%;
height: 100%;
opacity: 1;
border-radius: 20rpx;
}
}
.goods-content {
width: calc(100% - 200rpx);
min-height: 160rpx;
padding-left: $padding;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods-name {
width: 100%;
line-height: 1.3;
.name {
line-height: 1.3;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.label-list {
display: flex;
align-items: center;
margin-top: 6rpx;
.label-item {
padding: 4rpx 10rpx;
font-size: $font-size-tag;
color: $base-color;
border: 2rpx solid $base-color;
border-radius: 6rpx;
line-height: 1;
}
}
}
.goods-bottom {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.goods-price {
line-height: 1.3;
font-size: $font-size-base;
font-weight: bold;
}
.goods-share {
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 0 $padding;
border-radius: 50rpx;
border: 2rpx solid $base-color;
text {
color: $base-color;
border-radius: 40rpx;
font-size: $font-size-tag;
}
.icondiy {
margin-right: 4rpx;
font-size: $font-size-base;
}
}
}
}
}
.active-btn {
position: fixed;
bottom: 40rpx;
left: 80rpx;
right: 80rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
border-radius: 50rpx;
background-color: $base-color;
color: #fff;
.btn {
flex: 1;
text-align: center;
}
.share-btn {
margin: 0;
padding: 0;
flex: 1;
text-align: center;
border: 0;
color: #fff;
}
}
.share-popup,
.uni-popup__wrapper-box {
.share-title {
line-height: 60rpx;
font-size: $font-size-toolbar;
padding: 15rpx 0;
text-align: center;
}
.share-content {
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
padding: 80rpx 15rpx;
.share-box {
flex: 1;
text-align: center;
.share-btn {
margin: 0;
padding: 0;
border: none;
line-height: 1;
height: auto;
text {
margin-top: 20rpx;
font-size: $font-size-tag;
display: block;
color: $color-title;
}
}
.iconfont {
font-size: 80rpx;
line-height: initial;
}
.icon-fuzhilianjie,
.icon-pengyouquan,
.icon-haowuquan,
.icon-share-friend {
color: #07c160;
}
}
}
.share-footer {
height: 90rpx;
line-height: 90rpx;
border-top: 2rpx solid $color-line;
text-align: center;
}
}
.poster-layer {
.generate-poster {
padding: 40rpx 0;
.iconfont {
font-size: 80rpx;
color: #07c160;
line-height: initial;
}
> view {
text-align: center;
&:last-child {
margin-top: 20rpx;
}
}
}
.image-wrap {
width: 64%;
height: 854rpx;
margin: 60rpx auto 40rpx auto;
box-shadow: 0 0 32rpx rgba(100, 100, 100, 0.3);
image {
width: 480rpx;
height: 854rpx;
}
}
.msg {
padding: 40rpx;
}
.save {
text-align: center;
height: 80rpx;
line-height: 80rpx;
}
.close {
position: absolute;
top: 0;
right: 20rpx;
width: 40rpx;
height: 80rpx;
font-size: 50rpx;
}
}
}
</style>

587
pages_promotion/fenxiao/index.vue Normal file
View File

@@ -0,0 +1,587 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="fenxiao-index" :style="{ background: 'url(' + $util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')',backgroundRepeat: 'no-repeat',backgroundSize:'100%' }">
<block v-if="info.fenxiao_id > 0">
<!-- 头部 -->
<view class="fenxiao-index-header" :class="{ 'not-level': !levelList.length }" >
<view class="member">
<view class="member-pic">
<image :src="info.headimg ? $util.img(info.headimg) : $util.getDefaultImage().head" @error="info.headimg = $util.getDefaultImage().head" mode="aspectFill"/>
<!-- <text class="level-name ">{{ info.level_name }}</text> -->
</view>
<view class="member-info">
<view class="member-info-box">
<text class="name">{{ info.fenxiao_name }}</text>
<p class="level" v-if="info.level_num > 0"><img :src="$util.img('public/uniapp/fenxiao/index/commissionFission-level.png')" alt="" class="level-icon">{{ info.level_name }}</p>
</view>
<view class="recommend">上级代理商：{{ info.parent_name?info.parent_name:'总店' }}</view>
<view class="recommend">已邀请成功：{{ teamNum.num }}人<text class="iconfont icon-right" style="font-size: 24rpx;"></text></view>
</view>
<!-- <view class="promote-rules font-size-tag" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
<text class="iconfont icon-wenhao font-size-tag"></text>
推广规则
</view> -->
</view>
<!-- <view class="fenxiao-level-wrap" v-if="levelList.length">
<image :src="$util.img('public/uniapp/fenxiao/index/level_icon.png')" mode="widthFix" class="level-icon"/>
<view class="level-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/level')">
<view class="title">{{ info.level_num > 0 ? info.level_name : '等级未解锁' }}</view>
<view class="desc">下单、邀请好友均可提升等级</view>
</view>
<view class="btn" @click="$refs.taskPopup.open()" v-if="info.condition.last_level">做任务</view>
</view> -->
</view>
<view class="fenxiao-index-allmoney">
<view class="allmoney-top-money">
<view class="allmoney-top">
<view class="font-size-sub">可{{ fenxiaoWords.withdraw }}（元）</view>
<view class="withdrawal-record" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
提现明细
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="total-commission price-font">{{ info.account }}</view>
</view>
<view class="allmoney-bottom">
<!-- <view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/bill')">
<view class="title">总{{ fenxiaoWords.account }}</view>
<view class="money price-font">{{ info.total_commission | moneyFormat }}</view>
</view>
<view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="title">已提现{{ fenxiaoWords.account }}</view>
<view class="money price-font">{{ info.account_withdraw | moneyFormat }}</view>
</view> -->
<view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="title">提现中(元)<text class="iconfont icon-right" style="font-size: 24rpx;"></text></view>
<view class="money price-font">{{ info.account_withdraw_apply | moneyFormat }}</view>
</view>
<view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/order', { type: 1 })">
<view class="title">待入账(元)<text class="iconfont icon-right" style="font-size: 24rpx;"></text></view>
<view class="money price-font">{{ info.in_progress_money | moneyFormat }}</view>
</view>
</view>
<view class="withdraw-btn" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_apply')">提现
</view>
</view>
<view class="fenxiao-index-allmoney" style="padding: 0;border-radius:24rpx;margin-top: 0;" @click="toPoster()">
<image :src="$util.img('public/uniapp/fenxiao/index/commissionFission-qrcode1.png')" mode="widthFix" style="width: 100%;border-radius:24rpx" />
</view>
<!-- 功能列表 -->
<view class="fenxiao-menu-list">
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/team')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/down-line.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">我的粉丝</view>
<view class="desc">邀请的用户</view>
</view>
</view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/jifenjiangli.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.withdraw }}明细</view>
<view class="desc">累计{{ fenxiaoWords.account }}￥{{ info.total_commission | moneyFormat }}</view>
</view>
</view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/order')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/fenxiaodingdan.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.concept + '订单' }}</view>
<view class="desc">{{ fenxiaoWords.concept + '订单' }}明细</view>
</view>
</view>
<view class="menu-item" @click="toPoster()">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/friend.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">我的邀请码</view>
<view class="desc">邀好友赚好礼</view>
</view>
</view>
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/code.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">邀请好友</view>
<view class="desc">邀好友赚好礼</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/bill')">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/bill.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">账单报表</view>
<view class="desc">{{ fenxiaoWords.account }}变更明细</view>
</view>
</view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/goods_list', { templateId: templateId })">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/market.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.concept }}商品</view>
<view class="desc">{{ fenxiaoWords.concept }}商品</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/ranking_list', { type: 'profit' })">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/commission_rank.png')" mode="widthFix">
</image>
</view>
<view class="info">
<view class="title">{{ fenxiaoWords.account }}排行</view>
<view class="desc">您的排名为第{{ profitRanking }}位</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/ranking_list', { type: 'invited_num' })">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/promoter_rank.png')" mode="widthFix">
</image>
</view>
<view class="info">
<view class="title">推广人排行</view>
<view class="desc">您的排名为{{ invitedNumRanking }}位</view>
</view>
</view> -->
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/level')" v-if="levelList.length">
<view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/team_reward.png')" mode="widthFix"></image>
</view>
<view class="info">
<view class="title">等级说明</view>
<view class="desc">{{ fenxiaoWords.concept }}等级说明</view>
</view>
</view> -->
</view>
<!-- <view class="fenxiao-team">
<view class="fenxiao-index-other">
<view @click="$util.redirectTo('/pages_promotion/fenxiao/team')" class="all-money-item">
<view class="img-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/down-line.png')" mode="aspectFill"></image>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit">我的粉丝</text>
<text class="all-money-num">{{ teamNum.num }}人</text>
</view>
</view>
</view>
<view class="fenxiao-index-other">
<view @click="$util.redirectTo('/pages_promotion/fenxiao/child_fenxiao')" class="all-money-item">
<view class="img-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/yejikaohe.png')" mode="aspectFill"></image>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit">{{ fenxiaoWords.fenxiao_name }}</text>
<text class="all-money-num">{{ teamNum.fenxiao_num }}人</text>
</view>
</view>
</view>
</view> -->
</block>
<ns-copyright></ns-copyright>
<view class="empty" v-if="!info.fenxiao_id > 0 && showEmpty">
<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
<text>您还不是{{ fenxiaoWords.fenxiao_name }}，请先提交申请</text>
<view @click="$util.redirectTo('/pages_promotion/fenxiao/apply')" class="color-base-bg">立即加入</view>
</view>
<loading-cover ref="loadingCover"></loading-cover>
<ns-login ref="login"></ns-login>
<uni-popup ref="taskPopup" type="bottom">
<view class="task-popup popup-layer" v-if="levelInfo">
<view class="head-wrap">
<text>快速升级技巧</text>
<text class="iconfont icon-close" @click="$refs.taskPopup.close()"></text>
</view>
<view class="body-wrap">
<view class="equity-content" v-for="(item, index) in levelInfo.task" :key="index">
<text class="subordinate-consumption">
{{ item.title }}
<text class="iconfont icon-wenhao" @click="openTips(item)"></text>
<text class="incomplete">{{ item.progress == 100 ? '已完成' : '未完成' }}</text>
</text>
<view class="circle">
<progress :percent="item.progress" activeColor="#E7B667" stroke-width="4" />
</view>
<text class="zero">{{ item.value }}</text>
<text>/{{ item.condition }}</text>
<text class="to-complete-box" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
<text class="to-complete">{{ item.progress == 100 ? '已完成' : '去完成' }}</text>
</text>
</view>
</view>
</view>
</uni-popup>
<uni-popup type="bottom" ref="tips">
<view class="popup">
<view class="popup-header">
<text class="tit">提示</text>
<text class="iconfont icon-close" @click="$refs.tips.close()"></text>
</view>
<view class="popup-body">
<view>{{ tips }}</view>
<view v-if="levelInfo">{{ levelInfo.upgrade_type == 1 ? '满足任意一条件即可升级' : '满足全部条件才能进行升级' }}</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import fenxiaoWords from '@/common/js/fenxiao-words.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
components: {
uniPopup
},
data() {
return {
info: {
fenxiao_name: '',
fenxiao_id: 0
},
showEmpty: false,
teamNum: {
fenxiao_num: 0,
member_num: 0
},
//初始化获取到的模板id
templateId: '',
tips: '',
profitRanking: 0,
invitedNumRanking: 0,
levelList: [],
poster:''
};
},
mixins: [fenxiaoWords],
onShow() {
if (this.fenxiaoWords && this.fenxiaoWords.concept) this.$langConfig.title(this.fenxiaoWords.concept + '中心');
if (this.storeToken) {
this.checkFenxiaoIsStart();
} else {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/index');
});
}
this.getTemplateId();
this.getPoster();
},
onLoad() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index', {}, 'redirectTo');
}, 2000);
}
},1000);
this.getFenxiaoLevel();
},
methods: {
toPoster(){
this.$util.redirectTo('/pages_promotion/fenxiao/promote_code', { poster: this.poster,templateId:this.templateId })
},
/**
* 获取分享海报
*/
getPoster() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/posterList',
success: res => {
if (res.code >= 0) {
this.poster = res.data.toString();
this.poster = encodeURIComponent(this.poster);
}
}
});
},
/**
* 检测分销是否开启
*/
checkFenxiaoIsStart() {
this.$api.sendRequest({
url: '/fenxiao/api/config/basics',
success: res => {
if (res.code == 0 && res.data) {
if (res.data.level > 0) {
this.getFenxiaoDetail();
} else {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/member/index');
}, 2000);
}
}
}
});
},
// 获取分销商信息
getFenxiaoDetail() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/detail',
success: res => {
console.log(res)
if (res.data) {
if (res.data.status == -1) {
this.$util.showToast({
title: '当前分销商已冻结'
});
setTimeout(() => {
this.$util.redirectTo('/pages/member/index');
}, 2000);
return;
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
this.info = res.data;
this.getTeamNum();
this.getRanking('invited_num');
this.getRanking('profit');
this.showEmpty = true;
} else {
this.$util.redirectTo('/pages_promotion/fenxiao/apply', {}, 'redirectTo');
}
},
fail: res => {
this.showEmpty = true;
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
//去提现
goTixian() {
this.$util.redirectTo('/pages_promotion/fenxiao/withdraw_apply');
},
toLevel() {
this.$util.redirectTo('/pages_promotion/fenxiao/level');
},
close() {
this.$refs.taskPopup.close();
},
getTeamNum() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/teamnum',
success: res => {
if (res.code >= 0) {
this.teamNum = res.data;
}
}
});
},
/**
* 获取分享海报模板id
*/
getTemplateId() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/posterTemplateIds',
success: res => {
if (res.code >= 0) {
this.templateId = [...res.data].join();
}
}
});
},
moneyFormat(money) {
if (isNaN(parseFloat(money))) return money;
return parseFloat(money).toFixed(2);
},
openTips(data) {
this.tips = data.tips;
this.$refs.tips.open();
},
getRanking(type) {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/ranking',
data: {
type: type
},
success: res => {
if (res.code >= 0) {
if (type == 'profit') this.profitRanking = res.data;
if (type == 'invited_num') this.invitedNumRanking = res.data;
}
}
});
},
getFenxiaoLevel() {
this.$api.sendRequest({
url: '/fenxiao/api/Level/lists',
success: res => {
if (res.code == 0 && res.data) {
this.levelList = res.data;
}
}
});
}
},
onBackPress(options) {
if (options.from === 'navigateBack') {
return false;
}
this.$util.redirectTo('/pages/member/index', {}, 'reLaunch');
return true;
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.checkFenxiaoIsStart();
}
}
},
computed: {
levelInfo() {
if (this.info && this.info.condition && this.info.condition.last_level) {
let level = this.info.condition.last_level;
level.task = [];
level.complete = 0;
if (level.one_fenxiao_order_num > 0) {
let task = {
title: '下级消费',
desc: '下级消费单数满' + level.one_fenxiao_order_num + '单',
tips: '分销商自己购买和自己推荐的直属会员购买的订单次数',
condition: level.one_fenxiao_order_num,
value: this.info.one_fenxiao_order_num,
progress: parseFloat(this.info.one_fenxiao_order_num) > parseFloat(level.one_fenxiao_order_num) ?
100 :
((parseFloat(this.info.one_fenxiao_order_num) / parseFloat(level.one_fenxiao_order_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_fenxiao_total_order > 0) {
let task = {
title: '下级消费',
desc: '下级消费金额满' + this.moneyFormat(level.one_fenxiao_total_order) + '元',
tips: '分销商自己购买和推荐的直属会员购买的订单的总额',
condition: this.moneyFormat(level.one_fenxiao_total_order),
value: this.info.one_fenxiao_total_order,
progress: parseFloat(this.info.one_fenxiao_total_order) > parseFloat(level.one_fenxiao_total_order) ?
100 :
((parseFloat(this.info.one_fenxiao_total_order) / parseFloat(level.one_fenxiao_total_order)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_fenxiao_order_money > 0) {
let task = {
title: '下级消费',
desc: '下级消费产生' + this.fenxiaoWords.account + '总额满' + this.moneyFormat(level
.one_fenxiao_order_money) + '元',
tips: '分销商自己购买和自己推荐的直属会员购买的订单' + this.fenxiaoWords.account + '总额',
condition: this.moneyFormat(level.one_fenxiao_order_money),
value: this.info.one_fenxiao_order_money,
progress: parseFloat(this.info.one_fenxiao_order_money) > parseFloat(level.one_fenxiao_order_money) ?
100 :
((parseFloat(this.info.one_fenxiao_order_money) / parseFloat(level.one_fenxiao_order_money)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.order_num > 0) {
let task = {
title: '自身消费',
desc: '自身消费单数满' + level.order_num + '单',
tips: '分销商自己购买的订单次数',
condition: level.order_num,
value: this.info.order_num,
progress: parseFloat(this.info.order_num) > parseFloat(level.order_num) ? 100 : ((parseFloat(this.info.order_num) / parseFloat(level.order_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.order_money > 0) {
let task = {
title: '自身消费',
desc: '自身消费金额满' + this.moneyFormat(level.order_money) + '元',
tips: '分销商自己购买的订单总额',
condition: this.moneyFormat(level.order_money),
value: this.info.order_money,
progress: parseFloat(this.info.order_money) > parseFloat(level.order_money) ?
100 :
((parseFloat(this.info.order_money) / parseFloat(level.order_money)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_child_num > 0) {
let task = {
title: '邀请好友',
desc: '邀请好友人数达到' + level.one_child_num + '人',
tips: '分销商的直属下级会员人数（包含已经申请成为分销商的）',
condition: level.one_child_num,
value: this.info.one_child_num,
progress: parseFloat(this.info.one_child_num) > parseFloat(level.one_child_num) ?
100 :
((parseFloat(this.info.one_child_num) / parseFloat(level.one_child_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_child_fenxiao_num > 0) {
let task = {
title: '邀请好友',
desc: '邀请好友成为分销商人数达到' + level.one_child_fenxiao_num + '人',
tips: '分销商的直属下级分销商人数',
condition: level.one_child_fenxiao_num,
value: this.info.one_child_fenxiao_num,
progress: parseFloat(this.info.one_child_fenxiao_num) > parseFloat(level.one_child_fenxiao_num) ?
100 :
((parseFloat(this.info.one_child_fenxiao_num) / parseFloat(level.one_child_fenxiao_num)) * 100).toFixed(2)
};
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
return level;
}
}
}
};
</script>
<style lang="scss">
@import './public/css/index.scss';
</style>
<style scoped lang="scss">
/deep/ .uni-popup__wrapper {
height: auto;
}
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box,
.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box {
background: none;
max-height: unset !important;
overflow-y: hidden !important;
}
/deep/ .uni-popup__wrapper {
border-radius: 20rpx 20rpx 0 0;
}
</style>

320
pages_promotion/fenxiao/level.vue Normal file
View File

@@ -0,0 +1,320 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="container">
<view class="level-top">
<image :src="$util.img('public/uniapp/level/level-top-bg.png')"></image>
</view>
<swiper :autoplay="false" :duration="500" class="level-swiper" previous-margin="50rpx" next-margin="50rpx" @change="swiperChange" :current="curr">
<swiper-item v-for="(item, index) in levelList" :key="index">
<view class="level-item" :class="{'curr': index == curr}">
<view class="level-wrap">
<view class="member-info">
<view class="head-img">
<image :src="fenxiaoInfo.headimg ? $util.img(fenxiaoInfo.headimg) : $util.getDefaultImage().head" @error="fenxiaoInfo.headimg = $util.getDefaultImage().head" mode="aspectFill"/>
</view>
<view class="nickname">{{ fenxiaoInfo.nickname }}</view>
<view class="level-name">{{ item.level_name }}</view>
</view>
<view class="level-rate">
<view class="rate-item" v-if="config.level > 0">
<view class="title">一级分佣比率</view>
<view class="rate">{{ item.one_rate }}<text class="percentage">%</text></view>
</view>
<view class="rate-item" v-if="config.level > 1">
<view class="title">二级分佣比率</view>
<view class="rate">{{ item.two_rate }}<text class="percentage">%</text></view>
</view>
<view class="rate-item" v-if="config.level > 2">
<view class="title">三级分佣比率</view>
<view class="rate">{{ item.three_rate }}<text class="percentage">%</text></view>
</view>
</view>
<view class="not-unlocked" v-if="item.level_num > fenxiaoInfo.level_num">
<text class="iconfont icon-suoding"></text>
</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="level-condition" v-if="levelInfo">
<view class="condition-title">
<view class="title">快速升级技巧</view>
<view class="rate price-font">
<text class="complete">{{ levelInfo.complete > levelInfo.task_num ? levelInfo.task_num : levelInfo.complete }}</text>
<text class="num">/{{ levelInfo.task_num }}</text>
</view>
</view>
<view class="task">
<view class="task-item" v-for="(item, index) in levelInfo.task" :key="index">
<view class="flex-box">
<view class="title">
{{item.title}}
<text class="iconfont icon-wenxiao" @click="openTips(item)"></text>
</view>
<view class="status" :class="{'complete': item.progress == 100}">
{{ item.progress == 100 ? '已完成' : '未完成' }}</view>
</view>
<view class="progress">
<progress :percent="item.progress" activeColor="#E7B667" stroke-width="4" />
</view>
<view class="flex-box">
<view class="desc">{{item.desc}}</view>
<view class="rate price-font">
<text class="complete">{{ item.value }}</text>
<text class="num">/{{ item.condition }}</text>
</view>
</view>
</view>
</view>
</view>
<uni-popup type="bottom" ref="tips">
<view class="popup">
<view class="popup-header">
<text class="tit">提示</text>
<text class="iconfont icon-close" @click="$refs.tips.close()"></text>
</view>
<view class="popup-body">
<view>{{ tips }}</view>
<view v-if="levelInfo">{{ levelInfo.upgrade_type == 1 ? '满足任意一条件即可升级' : '满足全部条件才能进行升级' }}</view>
</view>
</view>
</uni-popup>
<ns-goods-recommend route="fenxiao_level"></ns-goods-recommend>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
data() {
return {
fenxiaoInfo: {
condition: {
last_level: null
}
},
config: {},
levelList: [],
curr: 0,
tips: ''
};
},
mixins: [fenxiaoWords],
computed: {
levelInfo() {
if (this.levelList.length) {
let level = this.levelList[this.curr];
level.task = [];
level.complete = 0;
if (level.one_fenxiao_order_num > 0) {
let task = {
title: '下级消费',
desc: '下级消费单数满' + level.one_fenxiao_order_num + '单',
tips: '分销商自己购买和自己推荐的直属会员购买的订单次数达到'+ level.one_fenxiao_order_num + '单',
condition: level.one_fenxiao_order_num,
value: this.fenxiaoInfo.one_fenxiao_order_num,
progress: parseFloat(this.fenxiaoInfo.one_fenxiao_order_num) > parseFloat(level.one_fenxiao_order_num) ? 100 : (parseFloat(this.fenxiaoInfo.one_fenxiao_order_num) / parseFloat(level.one_fenxiao_order_num) * 100).toFixed(2)
}
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_fenxiao_total_order > 0) {
let task = {
title: '下级消费',
desc: '下级消费金额满' + this.moneyFormat(level.one_fenxiao_total_order) + '元',
tips: '分销商自己购买和推荐的直属会员购买的订单的总额达到'+ this.moneyFormat(level.one_fenxiao_total_order) + '元',
condition: this.moneyFormat(level.one_fenxiao_total_order),
value: this.fenxiaoInfo.one_fenxiao_total_order,
progress: parseFloat(this.fenxiaoInfo.one_fenxiao_total_order) > parseFloat(level.one_fenxiao_total_order) ? 100 : (parseFloat(this.fenxiaoInfo.one_fenxiao_total_order) / parseFloat(level.one_fenxiao_total_order) * 100)
.toFixed(2)
}
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_fenxiao_order_money > 0) {
let task = {
title: '下级消费',
desc: '下级消费产生佣金总额满' + this.moneyFormat(level.one_fenxiao_order_money) + '元',
tips: '分销商自己购买和自己推荐的直属会员购买的订单佣金总额达到'+ this.moneyFormat(level.one_fenxiao_order_money) + '元',
condition: this.moneyFormat(level.one_fenxiao_order_money),
value: this.fenxiaoInfo.one_fenxiao_order_money,
progress: parseFloat(this.fenxiaoInfo.one_fenxiao_order_money) > parseFloat(level.one_fenxiao_order_money) ? 100 : (parseFloat(this.fenxiaoInfo.one_fenxiao_order_money) / parseFloat(level.one_fenxiao_order_money) * 100)
.toFixed(2)
}
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.order_num > 0) {
let task = {
title: '自身消费',
desc: '自身消费单数满' + level.order_num + '单',
tips: '分销商自己购买的订单次数达到'+ level.order_num + '单',
condition: level.order_num,
value: this.fenxiaoInfo.order_num,
progress: parseFloat(this.fenxiaoInfo.order_num) > parseFloat(level.order_num) ? 100 : (parseFloat(this.fenxiaoInfo.order_num) / parseFloat(level.order_num) * 100).toFixed(2)
}
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.order_money > 0) {
let task = {
title: '自身消费',
desc: '自身消费金额满' + this.moneyFormat(level.order_money) + '元',
tips: '分销商自己购买的订单总额满足'+ this.moneyFormat(level.order_money) + '元',
condition: this.moneyFormat(level.order_money),
value: this.fenxiaoInfo.order_money,
progress: parseFloat(this.fenxiaoInfo.order_money) > parseFloat(level.order_money) ? 100 : (parseFloat(this.fenxiaoInfo.order_money) / parseFloat(level.order_money) * 100).toFixed(2)
}
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_child_num > 0) {
let task = {
title: '邀请好友',
desc: '邀请好友人数达到' + level.one_child_num + '人',
tips: '分销商的直属下级会员人数达到'+level.one_child_num+'人（包含已经申请成为分销商的）',
condition: level.one_child_num,
value: this.fenxiaoInfo.one_child_num,
progress: parseFloat(this.fenxiaoInfo.one_child_num) > parseFloat(level.one_child_num) ? 100 : (parseFloat(this.fenxiaoInfo.one_child_num) / parseFloat(level.one_child_num) * 100).toFixed(2)
}
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
if (level.one_child_fenxiao_num > 0) {
let task = {
title: '邀请好友',
desc: '邀请好友成为分销商人数达到' + level.one_child_fenxiao_num + '人',
tips: '分销商的直属下级分销商人数达到'+ level.one_child_fenxiao_num + '人',
condition: level.one_child_fenxiao_num,
value: this.fenxiaoInfo.one_child_fenxiao_num,
progress: parseFloat(this.fenxiaoInfo.one_child_fenxiao_num) > parseFloat(level.one_child_fenxiao_num) ? 100 : (parseFloat(this.fenxiaoInfo.one_child_fenxiao_num) / parseFloat(level.one_child_fenxiao_num) * 100).toFixed(2)
}
if (task.progress == 100) level.complete += 1;
level.task.push(task);
}
level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
return level;
}
}
},
onLoad() {},
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
if (this.fenxiaoWords && this.fenxiaoWords.fenxiao_name) this.$langConfig.title(this.fenxiaoWords.fenxiao_name + '等级');
if (this.storeToken) {
this.getFenxiaoInfo();
this.getBasicsConfig();
} else {
this.$util.redirectTo('/pages_tool/login/login', {
back: '/pages_promotion/fenxiao/level'
});
}
},
methods: {
/**
* 获取分销等级信息
*/
getFenxiaoLevel() {
this.$api.sendRequest({
url: '/fenxiao/api/Level/lists',
success: res => {
if (res.code == 0 && res.data) {
this.levelList = res.data;
this.levelList.forEach((item, index) => {
if (item.level_id == this.fenxiaoInfo.level_id) this.curr = index;
})
}
}
});
},
/**
* 获取分销商信息
*/
getFenxiaoInfo() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/detail',
success: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
if (res.code >= 0 && res.data) {
this.fenxiaoInfo = res.data;
this.curr = this.fenxiaoInfo.level_num;
this.getFenxiaoLevel();
} else {
this.$util.redirectTo('/pages_promotion/fenxiao/apply');
}
},
fail: () => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
/**
* 获取分销基本配置
*/
getBasicsConfig() {
this.$api.sendRequest({
url: '/fenxiao/api/config/basics',
success: res => {
if (res.code >= 0) {
this.config = res.data;
}
}
});
},
swiperChange(e) {
this.curr = e.detail.current;
},
moneyFormat(money) {
if (isNaN(parseFloat(money))) return money;
return parseFloat(money).toFixed(2);
},
openTips(data) {
this.tips = data.tips;
this.$refs.tips.open();
}
}
};
</script>
<style lang="scss">
@import './public/css/level.scss';
</style>
<style scoped lang="scss">
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background: none;
max-height: unset !important;
overflow-y: hidden !important;
}
/deep/ .uni-popup__wrapper {
border-radius: 20rpx 20rpx 0 0;
}
/deep/ .uni-popup {
z-index: 8;
}
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
</style>

203
pages_promotion/fenxiao/order.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<view class="withdraw-cate">
<block v-for="(item, index) in category" :key="index">
<view @click="selectCate(item.id)" class="cate-li" :class="{ 'active color-base-text color-base-bg-before': selectId == item.id }">{{ item.name }}</view>
</block>
</view>
<mescroll-uni ref="mescroll" @getData="getData" top="90" class="member-point" :size="8" v-if="storeToken">
<view class="goods_list" slot="list">
<view class="order-list">
<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex" @click="toDetail(orderItem.fenxiao_order_id)">
<view class="order-header">
<text class="site-name font-size-base">{{ orderItem.order_no }}</text>
<text class="status-name color-base-text" v-if="orderItem.is_refund == 1">已退款</text>
<text class="status-name color-text-green" v-else-if="orderItem.is_settlement == 1">已结算</text>
<text class="status-name color-text-orange" v-else>待结算</text>
</view>
<view class="order-body">
<view class="goods-wrap">
<view class="goods-img">
<image :src="$util.img(orderItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
</view>
<view class="goods-info">
<view class="top-wrap">
<view class="goods-name font-size-base">{{ orderItem.sku_name }}</view>
<view>
<text class="color-tip">返{{ fenxiaoWords.account }}</text>
<text class="price-color price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price-color price-style large" >{{ parseFloat(orderItem.commission).toFixed(2).split(".")[0] }}</text>
<text class="price-color price-style small">.{{ parseFloat(orderItem.commission).toFixed(2).split(".")[1] }}</text>
</view>
</view>
<view class="goods-sub-section">
<view class="goods-price">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price-color price-style large" >{{ parseFloat(orderItem.price).toFixed(2).split(".")[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(orderItem.price).toFixed(2).split(".")[1] }}</text>
</view>
<view>
<text>
<text class="iconfont icon-close"></text>
{{ orderItem.num }}
</text>
</view>
</view>
</view>
</view>
</view>
<view class="order-footer">
<view class="order-base-info active">
<view class="order-type ">
<text class="color-tip">{{ $util.timeStampTurnTime(orderItem.create_time) }}</text>
<!-- <text>返{{ fenxiaoWords.account }}金额：</text>
<text class="color-base-text">{{ $lang('common.currencySymbol') }}{{ orderItem.commission }}</text> -->
</view>
<view class="total">
<text>合计：</text>
<text class="price-color">{{ $lang('common.currencySymbol') }}</text>
<text class="price-color font-size-toolbar" >{{ parseFloat(orderItem.real_goods_money).toFixed(2).split(".")[0] }}</text>
<text class="price-color">.{{ parseFloat(orderItem.real_goods_money).toFixed(2).split(".")[1] }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="cart-empty">
<ns-empty text="暂无订单" :isIndex="false" v-if="selectId == 0 && orderList.length == 0 && emptyShow"></ns-empty>
<ns-empty text="暂无待结算订单" :isIndex="false" v-if="selectId == 1 && orderList.length == 0 && emptyShow"></ns-empty>
<ns-empty text="暂无已结算订单" :isIndex="false" v-if="selectId == 2 && orderList.length == 0 && emptyShow"></ns-empty>
<ns-empty text="暂无已退款订单" :isIndex="false" v-if="selectId == 3 && orderList.length == 0 && emptyShow"></ns-empty>
</view>
</view>
</mescroll-uni>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
data() {
return {
category: [
{
id: 0,
name: '全部',
number: 2
},
{
id: 1,
name: '待结算',
number: 0
},
{
id: 2,
name: '已结算',
number: 0
},
{
id: 3,
name: '已退款',
number: 0
}
],
selectId: 0,
orderList: [],
emptyShow: false,
fenxiaoId: '',
subMemberId: ''
};
},
mixins: [fenxiaoWords],
onLoad(option) {
if (option.type != undefined) this.selectId = option.type;
},
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
if(this.fenxiaoWords && this.fenxiaoWords.concept)this.$langConfig.title(this.fenxiaoWords.concept + '订单');
if (!this.storeToken) {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/order');
});
}
},
methods: {
//获得列表数据
getData(mescroll) {
this.emptyShow = false;
if (mescroll.num == 1) {
this.orderList = [];
}
this.$api.sendRequest({
url: '/fenxiao/api/order/page',
data: {
page: mescroll.num,
page_size: mescroll.size,
is_settlement: this.selectId
},
success: res => {
this.emptyShow = true;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data && res.data.list) {
newArr = res.data.list;
} else {
this.$util.showToast({ title: res.message });
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
this.orderList = this.orderList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
selectCate(e) {
this.selectId = e;
this.$refs.mescroll.refresh();
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/fenxiao/order_detail', {
id: e
});
},
imageError(index) {
this.orderList[index].sku_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.$refs.mescroll.refresh();
}
}
}
};
</script>
<style lang="scss">
@import './public/css/order.scss';
</style>

378
pages_promotion/fenxiao/order_detail.vue Normal file
View File

@@ -0,0 +1,378 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<view class="order-detail">
<view class="order-detail-box">
<view class="header">
<view class="title">
<text>共{{ orderData.num }}件商品</text>
</view>
<text class="color-base-text font-size-tag" v-if="orderData.is_refund == 1">已退款</text>
<text class="color-base-text font-size-tag" v-else-if="orderData.is_settlement == 1">已结算</text>
<text class="color-base-text font-size-tag" v-else>待结算</text>
</view>
<view class="detail-body">
<view class="detail-body-box">
<view class="goods-image"><image :src="$util.img(orderData.sku_image, { size: 'mid' })" @error="imageError()" mode="aspectFill"></image></view>
<view class="order-info">
<view class="goods-name">{{ orderData.sku_name }}</view>
<view class="goods-sub-section margin-top">
<view>
<text class="goods-price">
<text class="unit price-color">￥</text>
<text class="price-color font-size-toolbar" >{{ parseFloat(orderData.price).toFixed(2).split(".")[0] }}</text>
<text class="unit price-color">.{{ parseFloat(orderData.price).toFixed(2).split(".")[1] }}</text>
</text>
</view>
<view>
<text>
<text class="iconfont icon-close"></text>
{{ orderData.num }}
</text>
</view>
</view>
</view>
</view>
</view>
<view class="detail-footer">
<text></text>
<text>
<text>合计：</text>
<text class="price-color total">￥{{ orderData.real_goods_money }}</text>
</text>
</view>
</view>
<view class="order-detail-box commission">
<view class="header">
<view class="title color-base-bg-before"><text>返佣详情</text></view>
<text class="color-base-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
</view>
<view class="detail-content">
<view class="order-info-item">
<text class="tit">订单编号：</text>
<text>{{ orderData.order_no }}</text>
</view>
<view class="order-info-item">
<text class="tit">分佣层级：</text>
<text>{{ orderData.commission_level }}级</text>
</view>
<view class="order-info-item">
<text class="tit">返佣金额：</text>
<text class="price-color font-size-toolbar">
<text class="font-size-goods-tag">￥</text>
{{ parseFloat(orderData.commission).toFixed(2).split(".")[0] }}
<text class="font-size-goods-tag">.{{ parseFloat(orderData.commission).toFixed(2).split(".")[1] }}</text>
</text>
</view>
</view>
</view>
</view>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
data() {
return {
isIphoneX: false,
orderId: 0,
orderData: {
action: []
}
};
},
components: {},
onLoad(option) {
if (option.id) {
this.orderId = option.id;
} else {
uni.navigateBack({
delta: 1
});
}
},
mixins: [fenxiaoWords],
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (this.storeToken) {
this.getOrderData();
} else {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/order_detail?id=' + this.orderId);
});
}
},
methods: {
getOrderData() {
this.$api.sendRequest({
url: '/fenxiao/api/order/info',
data: {
fenxiao_order_id: this.orderId
},
success: res => {
if (res.code >= 0) {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
this.orderData = res.data;
} else {
this.$util.showToast({
title: '未获取到订单信息！'
});
setTimeout(() => {
this.$util.redirectTo('/pages_promotion/fenxiao/order', {}, 'redirectTo');
}, 1500);
}
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
imageError() {
this.orderData.sku_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.getOrderData();
}
}
}
};
</script>
<style lang="scss">
.order-detail {
width: 100%;
padding: 0 $padding;
box-sizing: border-box;
margin-top: $margin-updown;
.order-detail-box {
width: 100%;
height: 100%;
box-sizing: border-box;
background: #ffffff;
border-radius: $border-radius;
.header {
width: 100%;
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.title {
display: inline-block;
position: relative;
line-height: 1;
}
}
.detail-body {
width: 100%;
padding: 0 30rpx 30rpx 30rpx;
box-sizing: border-box;
.detail-body-box {
width: 100%;
height: 100%;
display: flex;
.goods-image {
width: 180rpx;
height: 180rpx;
border-radius: $border-radius;
image {
width: 100%;
height: 100%;
border: 1rpx solid $color-line;
border-radius: $border-radius;
}
}
.order-info {
width: calc(100% - 200rpx);
height: 180rpx;
padding-left: $padding;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.5;
font-size: $font-size-base;
}
.goods-sub-section {
width: 100%;
line-height: 1.3;
display: flex;
.goods-price {
font-size: $font-size-base;
}
.unit {
font-weight: normal;
font-size: $font-size-tag;
margin-right: 2rpx;
}
view {
flex: 1;
line-height: 1.3;
&:last-of-type {
text-align: right;
.iconfont {
line-height: 1;
font-size: $font-size-base;
}
}
}
}
}
}
}
.detail-content {
width: 100%;
padding: 0 30rpx 30rpx 30rpx;
box-sizing: border-box;
border-bottom: 1rpx solid $color-line;
text {
font-size: $font-size-base;
}
.order-info-item .tit {
display: inline-block;
}
}
.detail-footer {
width: 100%;
height: 100rpx;
padding: $padding;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.total {
font-weight: 600;
}
}
}
}
.commission {
margin-top: 20rpx;
.detail-content {
border: 0 !important;
}
}
.order-money-detail {
width: 100%;
padding: 0 $padding;
box-sizing: border-box;
margin-top: $margin-updown;
.order-money-detail-box {
width: 100%;
height: 100%;
padding-top: $padding;
box-sizing: border-box;
background: #ffffff;
border-radius: $border-radius;
.header {
width: 100%;
height: 70rpx;
padding: 0 $padding;
border-bottom: 1rpx solid $color-line;
display: flex;
align-items: center;
box-sizing: border-box;
.title {
padding-left: 20rpx;
display: inline-block;
position: relative;
line-height: 1;
font-weight: 600;
}
.title::before {
content: '';
display: block;
width: 4rpx;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 6rpx;
}
}
.money-detail-body {
width: 100%;
padding: $padding;
box-sizing: border-box;
.order-cell {
display: flex;
margin: 10rpx 0;
align-items: center;
background: #fff;
line-height: 40rpx;
.tit {
text-align: left;
display: inline-block;
width: 200rpx;
}
.box {
flex: 1;
line-height: inherit;
.textarea {
height: 40rpx;
}
}
.iconfont {
color: #bbb;
font-size: $font-size-base;
}
.order-pay {
padding: 0;
text {
display: inline-block;
margin-left: 6rpx;
}
}
text {
color: $color-tip;
font-size: $font-size-tag;
}
}
}
}
}
.price-color{
color: var(--price-color);
}
</style>

363
pages_promotion/fenxiao/promote.vue Normal file
View File

@@ -0,0 +1,363 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="fenxiao-promote" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }">
<view class="my-earnings">
<view class="earnings-head-wrap">
<view class="earnings-head">
<image class="name" :src="$util.img('public/uniapp/fenxiao/promote/my_earnings.png')" mode="aspectFit"></image>
<image class="money-bg" :src="$util.img('public/uniapp/fenxiao/promote/money.png')" mode="aspectFill"></image>
<view class="content">
累计收益
<text class="money-text">{{ detailData.total_commission }}</text>
元
</view>
</view>
</view>
<view class="earnings-body">
<view class="earnings-tab">
<text :class="{ active: tabIndex == 0 }" @click="tabCut(0)">已邀请好友</text>
<text :class="{ active: tabIndex == 1 }" @click="tabCut(1)">已下单好友</text>
</view>
<scroll-view scroll-y="true" class="earnings-content-wrap" @scrolltolower="getTeam()">
<view class="earnings-list" v-if="promote.list.length">
<view class="earnings-item" v-for="(item, index) in promote.list" :key="index">
<image
class="item-img"
:src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().head"
@error="item.headimg = $util.getDefaultImage().head"
mode="aspectFill"
></image>
<view class="item-content">
<view class="item-name multi-hidden">{{ item.nickname }}</view>
</view>
</view>
</view>
<view class="earnings-empty" v-else>暂无已邀请好友，快去邀请吧</view>
</scroll-view>
</view>
</view>
<view class="activity-rules">
<image class="rules-name" :src="$util.img('public/uniapp/fenxiao/promote/activity_rules.png')" mode="aspectFit"></image>
<view class="content" v-if="promoteContent.content"><rich-text :nodes="promoteContent.content"></rich-text></view>
<view class="rules-empty" v-else>暂无活动规则</view>
</view>
<view class="active-btn"><button type="primary" @click="toPoster()">邀请好友</button></view>
<ns-copyright></ns-copyright>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import htmlParser from '@/common/js/html-parser';
export default {
data() {
return {
tabIndex: 0,
promoteContent: {},
promote: {
page: 0,
page_size: 5,
page_count: 0,
list: []
},
isPay: 0,
detailData: {},
templateId: '',
poster:'',
};
},
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
if (this.storeToken) {
this.getTeam();
this.getPromoteRule();
this.getFenxiaoDetail();
} else {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/promote_code');
});
}
},
onLoad() {
this.getTemplateId();
this.getPoster();
},
methods: {
toPoster(){
this.$util.redirectTo('/pages_promotion/fenxiao/promote_code', { poster: this.poster,templateId:this.templateId })
},
tabCut(index) {
this.tabIndex = index;
this.isPay = index;
this.promote.page_count = 0;
this.promote.page = 0;
this.promote.page_size = 5;
this.getTeam();
},
getTeam() {
if (this.promote.page_count > 0 && this.promote.page == this.promote.page_count) return;
this.promote.page++;
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/team',
data: {
page: this.promote.page,
page_size: this.promote.page_size,
is_pay: this.isPay,
level: 1
},
success: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
if (res.code >= 0) {
if (this.promote.page == 1) this.promote.list = [];
this.promote.page_count = res.data.page_count;
this.promote.list = this.promote.list.concat(res.data.list);
} else {
this.$util.showToast({
title: res.message
});
}
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
// 获取分销商信息
getFenxiaoDetail() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/detail',
success: res => {
if (res.data) {
this.detailData = res.data;
} else {
this.$util.showToast({
title: res.message
});
}
}
});
},
// 获取富文本
getPromoteRule() {
this.$api.sendRequest({
url: '/fenxiao/api/config/promoterule',
success: res => {
if (res.data) {
this.promoteContent = res.data;
this.promoteContent.content = res.data.content ? htmlParser(res.data.content) : '';
} else {
this.$util.showToast({
title: res.message
});
}
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
/**
* 获取分享海报
*/
getPoster() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/posterList',
success: res => {
if (res.code >= 0) {
this.poster = res.data.toString();
this.poster = encodeURIComponent(this.poster);
}
}
});
},
/**
* 获取分享海报id
*/
getTemplateId() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/posterTemplateIds',
success: res => {
if (res.code >= 0) {
this.templateId = [...res.data].join();
}
}
});
}
}
};
</script>
<style lang="scss">
.fenxiao-promote {
overflow: hidden;
padding: 0 30rpx 160rpx;
min-height: 100vh;
background-color: #ff2d46;
background-size: 100%;
background-repeat: no-repeat;
.my-earnings,
.activity-rules {
background-color: #fff;
border-radius: 30rpx;
}
.my-earnings {
margin-top: 230rpx;
padding-bottom: 40rpx;
.earnings-head-wrap {
background-color: #fff7f5;
height: 160rpx;
border-radius: 30rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.earnings-head {
position: relative;
padding-top: 60rpx;
display: flex;
align-items: center;
justify-content: center;
.name {
position: absolute;
width: 384rpx;
height: 74rpx;
top: -22rpx;
}
.content {
font-size: $font-size-tag;
}
.money-bg {
width: 80rpx;
height: 80rpx;
}
.money-text {
margin: 0 6rpx;
font-size: 40rpx;
line-height: 1;
}
}
.earnings-body {
padding: 0 30rpx;
.earnings-tab {
display: flex;
justify-content: space-around;
align-items: center;
height: 100rpx;
font-size: 30rpx;
color: #e93224;
margin-bottom: 10rpx;
text.active {
position: relative;
font-weight: bold;
&::after {
position: absolute;
content: '';
height: 4rpx;
width: 86rpx;
left: 50%;
bottom: -4rpx;
transform: translateX(-50%);
background-color: #e93224;
}
}
}
.earnings-content-wrap {
max-height: 440rpx;
}
.earnings-item {
display: flex;
align-items: center;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.item-img {
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.item-time {
font-size: $font-size-tag;
color: $color-tip;
}
.item-name {
line-height: 1.3;
}
.money {
margin-left: auto;
color: #f9b124;
}
}
}
.earnings-empty {
display: flex;
align-items: center;
justify-content: center;
height: 160rpx;
font-size: 30rpx;
}
}
.activity-rules {
position: relative;
margin-top: 60rpx;
min-height: 300rpx;
.rules-name {
position: absolute;
width: 384rpx;
height: 74rpx;
top: -22rpx;
left: 50%;
transform: translateX(-50%);
}
.content {
padding: 70rpx 20rpx 0;
}
.rules-empty {
padding-top: 140rpx;
text-align: center;
font-size: 30rpx;
}
}
.active-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
background-color: #ff2d46;
height: 160rpx;
padding: 0 60rpx;
button {
flex: 1;
margin: 0;
border-radius: 50rpx;
color: #985400;
background: linear-gradient(45deg, #ffe2ac 0%, #fdc174 100%);
}
}
}
</style>

307
pages_promotion/fenxiao/promote_code.vue Normal file
View File

@@ -0,0 +1,307 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="container">
<swiper class="swiper" @change="getIndex">
<swiper-item v-for="(item, index) in poster" :key="index">
<view class="swiper-item">
<view class="poster-wrap">
<image :src="$util.img(item)" mode="widthFix" :show-menu-by-longpress="true"/>
</view>
</view>
</swiper-item>
</swiper>
<!-- #ifdef H5 -->
<view class="tips">长按识别图中二维码</view>
<!-- #endif -->
<!-- #ifdef MP -->
<view class="btn color-base-bg color-base-border" @click="save">保存海报</view>
<!-- #endif -->
<uni-popup ref="popupDialog" :custom="true" :mask-click="false">
<view class="dialog-popup">
<view class="title">提示</view>
<view class="message">您拒绝了保存图片到相册的授权请求，无法保存图片到相册，如需正常使用，请授权之后再进行操作。</view>
<view class="action-wrap">
<view @click="closeDialog">取消</view>
<view>
<button type="default" open-type="openSetting" @opensetting="closeDialog" hover-class="none">立即授权</button>
</view>
</view>
</view>
</uni-popup>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import {
Weixin
} from 'common/js/wx-jssdk.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
data() {
return {
poster: [],
fenxiaoInfo: {},
posterIndex: 0,
//海报模板id
templateId: ['default'],
mpShareData: null //小程序分享数据
};
},
components: {
uniPopup
},
methods: {
/**
* 获取分销海报
*/
getPoster(id) {
return new Promise((resolve, reject) => {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/poster',
data: {
page: '/pages/index/index',
qrcode_param: JSON.stringify({}),
template_id: id
},
success: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
if (res.code >= 0) {
resolve(res.data.path);
}
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
reject();
}
});
});
},
getIndex(e) {
this.posterIndex = e.detail.current;
},
save() {
// #ifdef MP
uni.downloadFile({
url: this.$util.img(this.poster[this.posterIndex]),
success: res => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
this.$util.showToast({
title: '保存成功'
});
},
fail: res => {
if (res.errMsg == 'saveImageToPhotosAlbum:fail auth deny' ||
res.errMsg == 'saveImageToPhotosAlbum:fail:auth denied') {
this.$refs.popupDialog.open();
} else {
this.$util.showToast({
title: '保存失败，请稍后重试'
});
}
}
});
} else {
this.$util.showToast({
title: '下载失败'
});
}
},
fail: res => {
this.$util.showToast({
title: '下载失败'
});
}
});
// #endif
},
getFenxiaoDetail() {
this.poster = [];
try {
this.templateId.forEach((item, index) => {
this.getPoster(item).then(resolve => {
this.poster.push(resolve);
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}).catch(reject => {
throw reject;
});
});
} catch {
this.$util.showToast({
title: '海报生成失败'
});
}
},
closeDialog() {
this.$refs.popupDialog.close();
}
},
onLoad(option) {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
if (option.templateId) {
this.templateId = option.templateId.split(',');
}
if (this.storeToken) {
if(option.poster){
this.poster = decodeURIComponent(option.poster).split(',')
setTimeout(() => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}, 500)
}else{
this.getFenxiaoDetail();
}
} else {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/promote_code');
});
}
},
onShow() {
//小程序分享
// #ifdef MP-WEIXIN
this.$util.getMpShare().then(res => {
this.mpShareData = res;
});
// #endif
},
//分享给好友
onShareAppMessage() {
return this.mpShareData.appMessage;
},
//分享到朋友圈
onShareTimeline() {
return this.mpShareData.timeLine;
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.getFenxiaoDetail();
}
}
}
};
</script>
<style lang="scss">
.container {
width: 100vw;
min-height: 100vh;
background-color: #f5f5f5;
}
.poster-wrap {
padding: 40rpx 0;
width: calc(100vw - 80rpx);
margin: 0 40rpx;
line-height: 1;
image {
border-radius: 20rpx;
overflow: hidden;
width: 100%;
}
}
.swiper {
height: 1240rpx;
}
.btn {
margin: 0 80rpx;
margin-top: 30rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: $border-radius;
color: #fff;
text-align: center;
}
.tips {
text-align: center;
font-size: $font-size-base;
color: #999;
font-weight: 600;
margin-top: 20rpx;
}
.dialog-popup {
width: 580rpx;
background: #fff;
box-sizing: border-box;
border-radius: 10rpx;
overflow: hidden;
height: initial;
.title {
padding: 30rpx 30rpx 0 30rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
}
.message {
padding: 0 30rpx;
color: #666;
text-align: center;
font-size: $font-size-base;
line-height: 1.3;
margin-top: 30rpx;
}
.action-wrap {
margin-top: 50rpx;
height: 80rpx;
display: flex;
border-top: 2rpx solid #eee;
&>view {
flex: 1;
text-align: center;
line-height: 80rpx;
&:first-child {
border-right: 2rpx solid #eee;
color: #999;
}
button {
border: none;
line-height: 80rpx;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
}
}
}
</style>

94
pages_promotion/fenxiao/public/css/follow.scss Normal file
View File

@@ -0,0 +1,94 @@
.ns-adv {
margin: $margin-updown $margin-both;
border-radius: $border-radius;
overflow: hidden;
line-height: 1;
image {
width: 100%;
}
}
.lineheight-clear {
line-height: 1 !important;
}
// 商品列表双列样式
.goods-list.double-column {
display: flex;
flex-wrap: wrap;
margin: $margin-updown $margin-both;
.goods-item {
flex: 1;
position: relative;
background-color: #fff;
flex-basis: 48%;
max-width: calc((100% - 30rpx) / 2);
margin-right: $margin-both;
margin-bottom: $margin-updown;
border-radius: $border-radius;
&:nth-child(2n) {
margin-right: 0;
}
.goods-img {
position: relative;
overflow: hidden;
padding-top: 100%;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
image {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.info-wrap {
padding: 0 26rpx 26rpx 26rpx;
}
.goods-name {
font-size: $font-size-base;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 20rpx;
height: 68rpx;
}
.discount-price {
display: inline-block;
font-weight: bold;
line-height: 1;
margin-top: 16rpx;
.unit {
margin-right: 6rpx;
}
}
.pro-info {
display: flex;
margin-top: 16rpx;
& > view {
padding: 2rpx 10rpx;
border: 2rpx solid;
border-radius: 6rpx;
}
.iconfont {
margin-right: 4rpx;
}
}
}
}

574
pages_promotion/fenxiao/public/css/index.scss Normal file
View File

@@ -0,0 +1,574 @@
.fenxiao-index {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.task-popup {
.head-wrap{
font-size: 16px;
line-height: 51px;
height: 51px;
display: block;
text-align: center;
margin-top: 30rpx;
}
.body-wrap{
max-height: 50vh;
overflow-y: scroll;
}
.equity-content{
width: 400rpx;
height: 200rpx;
position: relative;
margin: 0 auto;
// padding: 20rpx 0 20rpx 0rpx;
}
.subordinate-consumption{
// margin-left: 130rpx;
font-weight: 900;
}
.incomplete{
font-weight: normal;
color: rgb(153,153,153);
margin-left: 120rpx;
font-size: 24rpx;
}
.icon-wenhao{
margin-left: 10rpx;
}
.to-complete-box{
width: 100rpx;
height: 40rpx;
border-radius: 60rpx;
background: rgb(233,51,35);
position: absolute;
left: 100%;
top: 40px;
line-height: 40rpx;
text-align: center;
}
.to-complete-box{
padding: 5rpx;
color: #fff;
}
.circle{
width: 355rpx;
height: 12rpx;
margin: 10rpx 0rpx;
}
.zero{
color:rgb(198,152,53);
// margin-left: 130rpx;
}
.icon-close {
position: absolute;
float: right;
right: 22px;
font-size: 16px;
}
}
.fenxiao-index-header {
width: 100%;
position: relative;
height: 180rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
&.not-level {
height: 200rpx;
}
.member {
width: 100%;
height: 156rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 54rpx 32rpx 0;
box-sizing: border-box;
position: relative;
.promote-rules {
position: absolute;
display: flex;
align-items: center;
color: #fff;
right: 40rpx;
font-size: 24rpx;
.iconfont{
margin-right: 10rpx;
}
}
.member-pic {
width: 108rpx;
height: 108rpx;
border-radius: 50%;
border: 4rpx solid #fff;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.level-name {
height: 32rpx;
background: linear-gradient(180deg, #FCFCFD 0%, #C8D0DD 100%);
border-radius: 32rpx;
line-height: 32rpx;
padding: 0 10rpx;
font-size: 18rpx;
font-weight: 500;
color: #666666;
position: absolute;
bottom: -4rpx;
left: 50%;
z-index: 5;
white-space: nowrap;
transform: translateX(-50%);
}
}
.member-info {
flex: 1;
width: 0;
margin-left: 32rpx;
display: flex;
flex-direction: column;
justify-content: center;
view {
color: #fff;
}
.member-info-box {
display: flex;
align-items: center;
line-height: 1;
.level{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
position: relative;
-webkit-flex-shrink: 0;
flex-shrink: 0;
color: #ff3c29;
font-size: 24rpx;
font-style: normal;
font-weight: 400;
margin-left: 24rpx !important;
border-radius: 0 24rpx 24rpx 0;
vertical-align: middle;
background: #fff6d1;
padding: 4rpx 24rpx;
margin: 10rpx 0 10rpx 14rpx;
.level-icon {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate(-50%, -55%);
transform: translate(-50%, -55%);
width: 40rpx;
height: 40rpx;
margin: auto 0;
}
}
}
.name {
font-size: 32rpx;
font-weight: 600;
color: #FFFFFF;
}
.recommend {
font-size: $font-size-tag;
margin-top: 4rpx;
line-height: 1;
margin-bottom: 10rpx;
display: flex;
align-items: center;
}
.copy {
width: 68rpx;
height: 30rpx;
line-height: 30rpx;
background: linear-gradient(172deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.8) 100%);
border-radius: 60rpx;
text-align: center;
display: inline-block;
font-size: 18rpx;
font-weight: 600;
color: #202230;
margin-left: 20rpx
}
}
.member-tixian {
width: 120rpx;
height: 50rpx;
border: 2rpx solid #ffffff;
border-radius: $border-radius;
display: flex;
justify-content: center;
align-items: center;
font-size: $font-size-tag;
color: #ffffff;
}
.code {
width: 50rpx;
height: 50rpx;
}
}
.fenxiao-level-wrap {
width: calc(100% - 48rpx);
height: 128rpx;
background: linear-gradient(90deg, #FDE5C2 0%, #FDC172 100%);
border-radius: 20rpx 20rpx 0px 0px;
padding: 36rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.level-icon {
width: 70rpx;
height: 70rpx;
}
.level-wrap {
flex: 1;
width: 0;
padding: 0 30rpx;
margin-left: 30rpx;
position: relative;
view {
color: #945100;
line-height: 1;
}
.title {
font-weight: 600;
font-size: 30rpx;
}
.desc {
font-size: 24rpx;
margin-top: 10rpx;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2rpx;
height: 100%;
background: linear-gradient(90deg, #FDE5C2 0%, #FDC172 100%);
}
}
.btn {
width: 118rpx;
height: 54rpx;
line-height: 54rpx;
background: #945100;
border-radius: 54rpx;
font-size: 24rpx;
color: #fff;
font-weight: 500;
text-align: center;
}
}
}
.fenxiao_index_money {
color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
.xian {
height: 40rpx;
border: 2rpx solid rgba(255, 255, 255, 0.5);
}
.index-money-item {
padding: 40rpx 0;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.item_money {
color: #fff;
font-size: 36rpx;
line-height: 1;
}
.item_tit {
padding-top: 10rpx;
font-size: $font-size-tag;
color: #fff;
}
}
}
.fenxiao-index-allmoney {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 20rpx 24rpx;
border-radius: 16rpx;
background-color: #ffffff;
width: calc(100% - 48rpx);
padding: 32rpx;
box-sizing: border-box;
.allmoney-top {
display: flex;
justify-content: space-between;
align-items: center;
view {
line-height: 1;
color: #565656;
font-size: 24rpx;
}
.iconright {
line-height: 1;
font-size: 28rpx;
margin-left: 4rpx;
}
}
.total-commission {
color: #fa2943;
margin-top: 20rpx;
font-size: 56rpx;
font-weight: bold;
line-height: 1;
}
.allmoney-bottom {
display: flex;
margin-top: 50rpx;
.allmoney-all-wrap {
flex: 1;
.title {
font-size: 24rpx;
color: #565656;
}
.money {
font-size: 38rpx;
}
}
}
.withdraw-btn {
height: 78rpx;
line-height: 78rpx;
border-radius: 92rpx;
background: #fa2943;
text-align: center;
color: #fff;
font-size: 28rpx;
margin: 50rpx 10rpx 0 10rpx;
}
}
.uni-popup__wrapper{
width: 450rpx;
height: 400rpx;
background: rgba(0, 0, 0, 0.4);
}
.fenxiao-team {
display: flex;
width: 100%;
.fenxiao-index-other {
margin: 0 24rpx 20rpx 24rpx;
border-radius: 16rpx;
background-color: #ffffff;
padding: 30rpx 0;
flex: 1;
&:last-child {
margin-left: 0;
}
.all-money-item {
margin: 0 30rpx;
display: flex;
font-size: $font-size-tag;
align-items: center;
.img-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 70rpx;
height: 70rpx;
image {
width: 100%;
height: 100%;
}
}
.all-money-tit-wrap {
flex: 1;
margin-left: 24rpx;
display: flex;
flex-direction: column;
height: 70rpx;
.all-money-tit {
line-height: 1;
color: $color-title;
font-size: $font-size-base;
flex: 1;
}
.all-money-num {
color: $color-tip;
font-size: 24rpx;
line-height: 1;
}
}
}
}
}
.fenxiao-menu-list {
margin: 0 24rpx 20rpx 24rpx;
border-radius: 16rpx;
background-color: #ffffff;
width: calc(100% - 48rpx);
padding: 10rpx 30rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
.menu-item {
width: 50%;
display: flex;
align-items: center;
padding: 32rpx 0;
.icon-wrap {
width: 68rpx;
display: flex;
align-content: center;
justify-content: center;
margin-right: 20rpx;
image {
width: 100%;
}
}
.info {
flex: 1;
.title {
font-size: 28rpx;
line-height: 1;
}
.desc {
font-size: 24rpx;
margin-top: 12rpx;
color: #aaa;
line-height: 1;
}
}
}
}
.empty {
width: 100%;
height: 400rpx;
margin-top: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width: 300rpx;
margin-bottom: 50rpx;
}
text {
font-size: $font-size-tag;
font-weight: 600;
}
view {
width: 300rpx;
height: 70rpx;
border-radius: $border-radius;
text-align: center;
line-height: 70rpx;
color: #ffffff;
margin-top: 30rpx;
}
}
.popup {
width: 100vw;
background: #fff;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
.popup-header {
display: flex;
border-bottom: 2rpx solid $color-line;
position: relative;
padding: 40rpx;
.tit {
flex: 1;
font-size: $font-size-toolbar;
line-height: 1;
text-align: center;
}
.iconfont {
line-height: 1;
position: absolute;
right: 30rpx;
top: 50%;
transform: translate(0, -50%);
color: $color-tip;
font-size: $font-size-toolbar;
}
}
.popup-body {
height: calc(100% - 250rpx);
padding: 30rpx;
&.store-popup {
height: calc(100% - 120rpx);
}
&.safe-area {
height: calc(100% - 270rpx);
}
&.store-popup.safe-area {
height: calc(100% - 140rpx);
}
}
}

293
pages_promotion/fenxiao/public/css/level.scss Normal file
View File

@@ -0,0 +1,293 @@
.level-top {
width: 100%;
height: 40rpx;
position: relative;
image {
width: 100%;
height: 260rpx;
position: absolute;
}
}
.level-swiper {
width: 100vw;
height: 270rpx;
.level-item {
width: calc(100% - 60rpx);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 26rpx;
.level-wrap {
width: 100%;
height: 90%;
background: #fff;
border-radius: 16rpx;
transition: all .5s;
display: flex;
flex-direction: column;
padding: 20rpx 30rpx;
box-sizing: border-box;
position: relative;
}
.not-unlocked {
position: absolute;
width: 50rpx;
height: 50rpx;
background: #4B4B4B;
display: flex;
align-items: center;
justify-content: center;
right: -1rpx;
top: -1rpx;
border-top-right-radius: 16rpx;
border-bottom-left-radius: 16rpx;
.iconfont {
color: #D3DEE6;
}
}
&.curr {
margin: 0;
width: 100%;
.level-wrap {
height: 100%;
}
}
.member-info {
display: flex;
align-items: center;
.head-img {
width: 90rpx;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.nickname {
color: #fff;
margin: 0 20rpx;
font-size: 28rpx;
}
.level-name {
line-height: 1;
border: 2rpx solid #fff;
padding: 4rpx 10rpx;
border-radius: 6rpx;
font-size: 26rpx;
color: #f5f5f5;
}
}
.level-rate {
display: flex;
margin-top: 30rpx;
.rate-item {
text-align: left;
flex: 1;
}
.title {
color: #f5f5f5;
font-size: 24rpx;
}
.rate {
margin-top: 10rpx;
color: #fff;
font-size: 38rpx;
line-height: 1;
.percentage {
font-size: 28rpx;
margin-left: 4rpx;
}
}
}
}
swiper-item {
&:nth-child(1) .level-wrap {
background: linear-gradient(to right, #9BA7B1, #D3DEE6);
}
&:nth-child(2) .level-wrap {
background: linear-gradient(to right, #F57E2A, #FAD494);
}
&:nth-child(3) .level-wrap {
background: linear-gradient(to right, #F85151, #FF9999);
}
&:nth-child(4) .level-wrap {
background: linear-gradient(to right, #78B8B4, #AFE6E2);
}
&:nth-child(5) .level-wrap {
background: linear-gradient(to right, #4DA1E1, #58CBF0);
}
&:nth-child(6) .level-wrap {
background: linear-gradient(to right, #81C636, #D1F677);
}
&:nth-child(7) .level-wrap {
background: linear-gradient(to right, #6D7279, #A5AAB0);
}
&:nth-child(8) .level-wrap {
background: linear-gradient(to right, #866DDB, #D49BFE);
}
&:nth-child(9) .level-wrap {
background: linear-gradient(to right, #f1c74e, #f7dc81);
}
&:nth-child(10) .level-wrap {
background: linear-gradient(to right, #418CCF, #9CC6F1);
}
}
}
.level-condition {
margin: 30rpx 26rpx;
background: #fff;
padding: 30rpx;
border-radius: 10rpx;
.condition-title {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
font-weight: bolder;
position: relative;
padding-left: 20rpx;
line-height: 1;
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 6rpx;
height: 100%;
background-color: $base-color;
border-radius: 4rpx;
}
}
}
.rate {
.complete {
color: #E7B667;
font-size: 26rpx!important;
font-weight: normal!important;
}
.num {
color: #bbb;
font-size: 26rpx!important;
font-weight: normal!important;
}
}
.task-item {
padding: 20rpx 30rpx;
background: #F8F8F8;
border-radius: 10rpx;
margin-top: 30rpx;
.flex-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.status{
color: #999;
&.complete {
color: #000;
}
}
.title {
font-weight: bold;
.iconfont {
font-size: 28rpx;
color: #B7B7B7;
margin-left: 10rpx;
}
}
.desc {
color: #999;
font-size: 24rpx;
}
.progress {
margin: 16rpx 0;
}
.complete {
font-size: 24rpx!important;
}
.num {
font-size: 24rpx!important;
}
}
}
.popup {
width: 100vw;
background: #fff;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
.popup-header {
display: flex;
border-bottom: 2rpx solid $color-line;
position: relative;
padding: 40rpx;
.tit {
flex: 1;
font-size: $font-size-toolbar;
line-height: 1;
text-align: center;
}
.iconfont {
line-height: 1;
position: absolute;
right: 30rpx;
top: 50%;
transform: translate(0, -50%);
color: $color-tip;
font-size: $font-size-toolbar;
}
}
.popup-body {
height: calc(100% - 250rpx);
padding: 30rpx;
&.store-popup {
height: calc(100% - 120rpx);
}
&.safe-area {
height: calc(100% - 270rpx);
}
&.store-popup.safe-area {
height: calc(100% - 140rpx);
}
}
}

206
pages_promotion/fenxiao/public/css/order.scss Normal file
View File

@@ -0,0 +1,206 @@
/deep/ .fixed {
position: relative;
top: 0;
}
/deep/ .empty {
margin-top: 0 !important;
}
.cart-empty {
padding-top: 208rpx !important;
}
.color-text-green {
color: #11bd64;
}
.color-text-orange {
color: #ffa044;
}
.withdraw-cate {
width: 100%;
height: 90rpx;
display: flex;
box-sizing: border-box;
background: #ffffff;
.cate-li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30rpx;
&.active {
box-sizing: border-box;
position: relative;
}
&.active::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 4rpx;
}
}
}
.goods_list {
width: 100%;
height: 100%;
padding: 0 24rpx;
box-sizing: border-box;
margin-top: 18rpx;
.order-item {
padding: 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
background: #ffffff;
position: relative;
margin-bottom: 18rpx;
.order-header {
display: flex;
align-items: center;
position: relative;
padding-bottom: 24rpx;
line-height: 1;
font-size: $font-size-goods-tag;
.icon-dianpu {
display: inline-block;
line-height: 1;
margin-right: 12rpx;
}
.status-name {
flex: 1;
text-align: right;
}
}
.order-body {
margin-bottom: 24rpx;
.goods-wrap {
display: flex;
position: relative;
&:last-of-type {
margin-bottom: 0;
}
.goods-img {
width: 170rpx;
height: 170rpx;
padding: 20rpx 0 0 0;
margin-right: 5rpx;
image {
width: 100%;
height: 100%;
border-radius: $border-radius;
}
}
.goods-info {
flex: 1;
position: relative;
padding: 20rpx 0 0 0;
max-width: calc(100% - 200rpx);
margin-left: 18rpx;
display: flex;
flex-direction: column;
.top-wrap {
flex: 1;
}
.goods-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.5;
font-size: $font-size-goods-tag;
color: #000;
}
.goods-sub-section {
width: 100%;
line-height: 1.5;
display: flex;
align-items: center;
font-size: $font-size-goods-tag;
margin-top: 20rpx;
.unit {
font-size: $font-size-tag;
margin-right: 2rpx;
}
view {
flex: 1;
line-height: 1;
&:last-of-type {
text-align: right;
.iconfont {
line-height: 1;
font-size: $font-size-tag;
}
}
}
}
.order-time {
margin-top: 12rpx;
font-size: $font-size-goods-tag;
color: #838383;
.goods-price {
font-size: $font-size-goods-tag;
float: right;
color: #000;
}
}
}
}
}
.order-footer {
padding-top: 24rpx;
.order-base-info {
display: flex;
.total {
text-align: right;
padding-top: 20rpx;
flex: 1;
font-size: $font-size-goods-tag;
& > text {
line-height: 1;
}
}
.order-type {
font-size: $font-size-goods-tag;
& > text {
line-height: 1;
}
}
}
.order-base-info.active {
.total {
padding-top: 0;
}
.order-type {
padding-top: 0;
}
}
}
}
.order-item:last-child {
border: none;
}
}
.price-color{
color: var(--price-color);
}

265
pages_promotion/fenxiao/public/js/goods_list.js Normal file
View File

@@ -0,0 +1,265 @@
import {
Weixin
} from '@/common/js/wx-jssdk.js';
export default {
data() {
return {
categoryList: [],
goodsList: [],
categoryId: 0,
is_fenxiao: false,
currIndex: 0,
poster: '-1', //海报
posterMsg: '', //海报错误信息
shareUrl: '/pages_promotion/fenxiao/goods_list',
shareType: 'goods',
//海报模板id
templateId: ['default'],
}
},
onLoad(options) {
setTimeout(() => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
}, 1000);
if (options.templateId) {
this.templateId = options.templateId.split(',');
}
this.getGoodsCategoryTree();
},
onShow() {
if (!this.storeToken) {
this.$util.redirectTo(
'/pages_tool/login/login', {
back: '/pages_promotion/fenxiao/goods_list'
},
'redirectTo'
);
return;
}
if (this.fenxiaoWords && this.fenxiaoWords.concept) this.$langConfig.title(this.fenxiaoWords.concept + '中心');
this.is_fenxiao = Boolean(this.memberInfo.is_fenxiao);
},
methods: {
//获取列表
getGoodsList(mescroll) {
this.$api.sendRequest({
url: '/fenxiao/api/goods/page',
data: {
page: mescroll.num,
page_size: mescroll.size,
category_id: this.categoryId
},
success: res => {
let newArr = []
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
})
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
this.goodsList = this.goodsList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
//联网失败的回调
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
//商品详情
navToDetailPage(item) {
this.$util.redirectTo('/pages/goods/detail', {
goods_id: item.goods_id
});
},
//查询一级商品分类
getGoodsCategoryTree() {
this.$api.sendRequest({
url: '/api/goodscategory/tree',
data: {
level: 1
},
success: res => {
if (res.code == 0) {
this.categoryList = res.data;
}
}
});
},
changeCategory(category_id) {
this.categoryId = category_id;
if (this.$refs.mescroll) {
this.$refs.mescroll.refresh();
this.$refs.mescroll.myScrollTo(0);
}
},
// 分享商品
shareFn(type, keys) {
this.shareType = type;
if (this.shareType == "fenxiao")
this.openPosterPopup();
else {
this.currIndex = keys;
this.$refs.sharePopup.open();
}
},
// #ifdef MP-WEIXIN
/**
* 将商品推荐到微信圈子
*/
openBusinessView() {
if (wx.openBusinessView) {
wx.openBusinessView({
businessType: 'friendGoodsRecommend',
extraData: {
product: {
item_code: this.goodsList[this.currIndex].goods_id,
title: this.goodsList[this.currIndex].sku_name,
image_list: this.$util.img(this.goodsList[this.currIndex].goods_image)
}
},
success: function (res) {
console.log('success', res);
},
fail: function (res) {
console.log('fail', res);
}
})
}
},
// #endif
//-------------------------------------海报-------------------------------------
// 打开海报弹出层
openPosterPopup() {
this.getGoodsPoster();
this.$refs.sharePopup.close();
},
// 关闭海报弹出层
closePosterPopup() {
this.$refs.posterPopup.close();
},
//生成海报
getGoodsPoster() {
uni.showLoading({
'title': '海报生成中...'
});
let url = "";
let data = {};
if (this.shareType == "goods") {
url = "/api/goods/poster";
data.page = "/pages/goods/detail";
data.qrcode_param = JSON.stringify({
goods_id: this.goodsList[this.currIndex].goods_id,
source_member: this.memberInfo.member_id
});
} else {
url = "/fenxiao/api/fenxiao/poster";
data.page = "/pages/index/index";
data.qrcode_param = JSON.stringify({});
data.template_id = this.templateId[0];
}
this.$api.sendRequest({
url: url,
data: data,
success: res => {
if (res.code == 0) {
this.poster = res.data.path + "?time=" + new Date().getTime();
this.$refs.posterPopup.open();
} else {
this.posterMsg = res.message;
}
uni.hideLoading();
},
fail: err => {
uni.hideLoading();
}
});
},
// #ifdef MP || APP-PLUS
//小程序中保存海报
saveGoodsPoster() {
let url = this.$util.img(this.poster);
uni.downloadFile({
url: url,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
this.$util.showToast({
title: "保存成功"
});
},
fail: () => {
this.$util.showToast({
title: "保存失败，请稍后重试"
});
}
});
}
}
});
},
// #endif
// 打开分享弹出层
openSharePopup() {
this.$refs.sharePopup.open();
},
// 关闭分享弹出层
closeSharePopup() {
this.$refs.sharePopup.close();
},
copyUrl() {
let text = this.$config.h5Domain + '/pages/goods/detail?goods_id=' + this.goodsList[this.currIndex].goods_id + '&source_member=' + this.memberInfo.member_id;
this.$util.copy(text, () => {
this.closeSharePopup();
});
},
imageError(index) {
this.goodsList[index].sku_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
},
/**
* 自定义分享内容
* @param {Object} res
*/
onShareAppMessage(res) {
var path = this.shareUrl;
if (this.shareType == "goods") {
path = `/pages/goods/detail?goods_id=${this.goodsList[this.currIndex].goods_id}&sku_id=${this.goodsList[this.currIndex].sku_id}&source_member=${this.memberInfo.member_id}`;
}
return {
title: this.goodsList[this.currIndex].sku_name,
imageUrl: this.$util.img(this.goodsList[this.currIndex].goods_image, {
size: 'big'
}),
path: path,
success: res => {
},
fail: res => {
}
};
}
}

416
pages_promotion/fenxiao/ranking_list.vue Normal file
View File

@@ -0,0 +1,416 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="container">
<mescroll-uni ref="mescroll" @getData="getData" top="0" :size="10">
<view slot="list">
<block v-if="list.length != 0">
<view class="banner" :style="{background: 'url('+ $util.img('public/uniapp/fenxiao/index/header_bg.png') +') no-repeat top left / 100% 100%'}">
<view class="info">
<view class="info-pic">
<image :src="info.headimg ? $util.img(info.headimg) : $util.getDefaultImage().head" @error="info.headimg = $util.getDefaultImage().head" mode="aspectFill"/>
</view>
<view class="member-info">
<view class="rank-info-box">
<text class="name">{{info.nickname}}</text>
</view>
<view class="withdrawal" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_apply')" v-if="type == 'profit'">点击提现</view>
<view class="withdrawal" @click="$util.redirectTo('/pages_promotion/fenxiao/team')" v-if="type == 'invited_num'">我的团队</view>
</view>
</view>
</view>
<view class="fenxiao-team" v-if="type == 'profit'">
<view class="fenxiao-index-other">
<view class="all-money-item">
<view class="img-wrap">
<text class="iconfont icon-fenxiao"></text>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit">分销佣金</text>
<text class="all-money-num">{{ info.today_commission}}元</text>
</view>
</view>
</view>
<view class="fenxiao-index-other">
<view class="all-money-item">
<view class="img-wrap">
<text class="iconfont icon-baixingbeng"></text>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit">佣金排行</text>
<text class="all-money-num">您排行第{{ ranking }}名</text>
</view>
</view>
</view>
</view>
<view class="fenxiao-team" v-if="type == 'invited_num'">
<view class="fenxiao-index-other">
<view class="all-money-item">
<view class="img-wrap">
<text class="iconfont icon-huodongtuiyan"></text>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit">推广人数</text>
<text class="all-money-num">{{ info.one_child_num}}人</text>
</view>
</view>
</view>
<view class="fenxiao-index-other">
<view class="all-money-item">
<view class="img-wrap">
<text class="iconfont icon-baixingbeng"></text>
</view>
<view class="all-money-tit-wrap">
<text class="all-money-tit" v-if="type == 'invited_num'">推广排行</text>
<text class="all-money-num">您排行第{{ ranking }}名</text>
</view>
</view>
</view>
</view>
<view class="title-rakn-text" v-if="type == 'profit'">佣金排行</view>
<view class="title-rakn-text" v-if="type == 'invited_num'">推广排行</view>
<view class="ranking-list">
<view class="ranking-item" v-for="(item, index) in list" :key="index">
<view class="ranking price-font">{{ index + 1 }}</view>
<view class="content">
<view class="head-img">
<image :src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().head" @error="item.headimg = $util.getDefaultImage().head" mode="aspectFill"/>
</view>
<view class="nickname">{{ item.nickname }}</view>
</view>
<view class="price-font price-style" v-if="type == 'profit'">
￥{{ item.total_commission|moneyFormat }}</view>
<view class="price-font price-style" v-if="type == 'invited_num'">{{ item.child_num }}人
</view>
</view>
</view>
</block>
<block v-if="list.length == 0 && emptyShow">
<ns-empty text="暂无数据" :isIndex="false"></ns-empty>
</block>
</view>
</mescroll-uni>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
emptyShow: false,
type: '',
ranking: 0,
info: {}
}
},
onLoad(data) {
this.type = data.type;
this.getRanking();
this.getFenxiaoDetail();
},
methods: {
getData(mescroll) {
this.emptyShow = false;
if (mescroll.num == 1) {
this.list = [];
}
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/rankinglist',
data: {
page_size: mescroll.size,
page: mescroll.num,
type: this.type
},
success: res => {
this.emptyShow = true;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
this.list = this.list.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
getRanking() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/ranking',
data: {
type: this.type
},
success: res => {
if (res.code >= 0) {
this.ranking = res.data;
}
}
})
},
getFenxiaoDetail() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/detail',
success: res => {
if (res.data) {
this.info = res.data;
}
},
});
},
}
}
</script>
<style lang="scss">
.container {
width: 100vw;
height: 100vh;
}
.banner {
width: 100%;
height: 200rpx;
// background: $base-color;
}
.info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 50rpx 80rpx 0;
box-sizing: border-box;
.info-pic {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
border: 4rpx solid #fff;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.member-info {
flex: 1;
width: 0;
margin-left: 32rpx;
display: flex;
view {
color: #fff;
}
.rank-info-box {
line-height: 1;
flex: 1;
}
.name {
font-size: 32rpx;
font-weight: 600;
color: #FFFFFF;
}
.withdrawal {
border-radius: 4px;
line-height: 23px;
margin: auto;
text-align: center;
font-size: 11px;
}
}
}
.fenxiao-team {
display: flex;
width: 100%;
margin-top: 22rpx;
.fenxiao-index-other {
margin: 0 24rpx 20rpx 24rpx;
border-radius: 16rpx;
background-color: #ffffff;
padding: 30rpx 0;
flex: 1;
&:last-child {
margin-left: 0;
}
.all-money-item {
margin: 0 30rpx;
display: flex;
font-size: $font-size-tag;
align-items: center;
.img-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 70rpx;
height: 70rpx;
image {
width: 100%;
height: 100%;
}
}
.all-money-tit-wrap {
flex: 1;
margin-left: 24rpx;
display: flex;
flex-direction: column;
height: 70rpx;
.all-money-tit {
line-height: 1;
color: $color-title;
font-size: $font-size-base;
flex: 1;
}
.all-money-num {
color: $color-tip;
font-size: 24rpx;
line-height: 1;
}
}
}
}
}
.icon-wenxiao {
text-align: center;
font-size: 50rpx;
color: var(--base-color) !important;
}
.number {
font-weight: 600;
text-align: center;
}
.info-text {
font-size: 20rpx;
text-align: center;
}
.info-title {
font-size: 50rpx;
font-weight: 900;
color: #f5f5f5;
text-align: center;
}
.info-rank {
color: #f5f5f5;
margin-top: 10rpx;
}
.title-rakn-text {
text-align: center;
font-size: 30rpx;
font-weight: 900;
}
.ranking-list {
transform: translateY(-120rpx);
margin: 200rpx 24rpx;
background: #fff;
border-radius: 16rpx;
padding: 10rpx 20rpx;
margin-top: 140rpx;
.ranking-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 2rpx solid #f5f5f5;
&:last-child {
border-bottom: 0;
}
.ranking {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 24rpx;
}
&:nth-child(1) .ranking {
background: rgb(249, 186, 1);
border-radius: 50%;
border: 10rpx solid rgb(254, 220, 92);
}
&:nth-child(2) .ranking {
background: rgb(172, 185, 194);
border-radius: 50%;
border: 10rpx solid rgb(215, 223, 229);
}
&:nth-child(3) .ranking {
background: rgb(211, 163, 136);
border-radius: 50%;
border: 10rpx solid rgb(235, 201, 190);
}
.content {
flex: 1;
width: 0;
padding: 0 20rpx;
display: flex;
align-items: center;
.head-img {
width: 90rpx;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.nickname {
color: #333;
margin: 0 20rpx;
font-size: 28rpx;
}
}
}
}
</style>

152
pages_promotion/fenxiao/relation.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<mescroll-uni ref="mescroll" @getData="getData" top="20" class="member-point" :size="8" v-if="storeToken">
<view class="goods_list" slot="list">
<view class="order-list">
<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex" @click="toDetail(orderItem.fenxiao_order_id)">
<view class="order-header">
<text class="site-name font-size-base">{{ orderItem.order_no }}</text>
<text class="status-name color-base-text" v-if="orderItem.is_refund == 1">已退款</text>
<text class="status-name color-text-green" v-else-if="orderItem.is_settlement == 1">已结算</text>
<text class="status-name color-text-orange" v-else>待结算</text>
</view>
<view class="order-body">
<view class="goods-wrap">
<view class="goods-img">
<image :src="$util.img(orderItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
</view>
<view class="goods-info">
<view class="top-wrap">
<view class="goods-name font-size-base">{{ orderItem.sku_name }}</view>
<view>
<text class="color-tip">返{{ fenxiaoWords.account }}</text>
<text class="price-color font-size-goods-tag">{{ $lang('common.currencySymbol') }}</text>
<text class="price-color font-size-toolbar">{{ orderItem.commission }}</text>
</view>
</view>
<view class="goods-sub-section">
<view class="goods-price">
<text class="unit price-color">{{ $lang('common.currencySymbol') }}</text>
<text class="price-color font-size-toolbar">{{ orderItem.price }}</text>
</view>
<view>
<text>
<text class="iconfont icon-close"></text>
{{ orderItem.num }}
</text>
</view>
</view>
</view>
</view>
</view>
<view class="order-footer">
<view class="order-base-info active">
<view class="order-type ">
<text class="color-tip">{{ $util.timeStampTurnTime(orderItem.create_time) }}</text>
<!-- <text>返{{ fenxiaoWords.account }}金额：</text>
<text class="color-base-text">{{ $lang('common.currencySymbol') }}{{ orderItem.commission }}</text> -->
</view>
<view class="total">
<text>合计：</text>
<text class="price-color">{{ $lang('common.currencySymbol') }}</text>
<text class="font-size-toolbar price-color">{{ orderItem.real_goods_money }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="cart-empty"><ns-empty text="暂无订单" :isIndex="false" v-if="orderList.length == 0 && emptyShow"></ns-empty></view>
</view>
</mescroll-uni>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
data() {
return {
orderList: [],
emptyShow: false,
fenxiaoId: '',
subMemberId: ''
};
},
mixins: [fenxiaoWords],
onLoad(option) {
if (option.fenxiao_id) {
this.fenxiaoId = option.fenxiao_id;
}
if (option.sub_member_id) {
this.subMemberId = option.sub_member_id;
}
},
onShow() {
if(this.fenxiaoWords && this.fenxiaoWords.concept)this.$langConfig.title(this.fenxiaoWords.concept + '订单');
},
methods: {
//获得列表数据
getData(mescroll) {
this.emptyShow = false;
if (mescroll.num == 1) {
this.orderList = [];
}
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/getorder',
data: {
page: mescroll.num,
page_size: mescroll.size,
fenxiao_id: this.fenxiaoId ? this.fenxiaoId : '',
sub_member_id: this.subMemberId ? this.subMemberId : ''
},
success: res => {
this.emptyShow = true;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data && res.data.list) {
newArr = res.data.list;
} else {
this.$util.showToast({ title: res.message });
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
this.orderList = this.orderList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
imageError(index) {
this.orderList[index].sku_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/fenxiao/order_detail', {
id: e
});
}
}
};
</script>
<style lang="scss">
@import './public/css/order.scss';
.goods-wraps {
align-items: center;
}
.goods_list .order-item .order-body .goods-wraps .goods-img,
.goods_list .order-item .order-body .goods-wraps .goods-info,
.goods_list .order-item .order-footers {
padding: 0;
}
</style>

355
pages_promotion/fenxiao/team.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<view class="team-cate" v-if="storeToken && levelNum > 1">
<block v-for="(item, index) in levelList" :key="index">
<view class="cate-li" :class="{ 'active color-base-text color-base-border': currentLevel == item.level }" @click="selectLevel(item.level)">{{ item.name }}</view>
</block>
</view>
<mescroll-uni ref="mescroll" @getData="getData" :top="levelNum > 1 ? 90 : 0" class="member-point" :size="8" v-if="storeToken">
<block slot="list">
<view class="team-li" v-for="(item, index) in teamList" :key="index" v-if="teamList.length != 0" @click="toFenxiaoOrder(item)">
<view class="li-box" :class="{ active: index + 1 == teamList.length }">
<image v-if="item.headimg" :src="$util.img(item.headimg)" @error="imageError(index)" mode="aspectFill"></image>
<image v-else :src="$util.getDefaultImage().head"></image>
<view class="member-info">
<view class="member-name">
<block v-if="item.is_fenxiao">
<view class="left">
<view class="flex-box">
<view class="name">{{ item.nickname }}</view>
<view class="title color-base-border color-base-text">{{ fenxiaoWords.fenxiao_name }}</view>
</view>
<view class="color-tip font-size-goods-tag">加入时间：{{ $util.timeStampTurnTime(item.bind_fenxiao_time).substring(0, 10) }}</view>
</view>
<view class="consume-info">
<view>
<text>{{ item.one_child_num }}</text>
人
</view>
<view>
<text>{{ item.order_num }}</text>
单
</view>
<view>
<text>{{ item.order_money | moneyFormat }}</text>
元
</view>
</view>
</block>
<block v-else>
<view class="left">
<view class="flex-box">
<view class="name font-size-tag">
<text>{{ item.nickname }}</text>
</view>
</view>
<view class="color-tip font-size-goods-tag">加入时间：{{ $util.timeStampTurnTime(item.bind_fenxiao_time).substring(0, 10) }}</view>
</view>
<view class="consume-info">
<view>
<text>0</text>
人
</view>
<view>
<text>{{ item.order_num }}</text>
单
</view>
<view>
<text>{{ item.order_money | moneyFormat }}</text>
元
</view>
</view>
</block>
</view>
</view>
</view>
</view>
<block v-if="teamList.length == 0 && emptyShow"><ns-empty text="暂无数据" :isIndex="false"></ns-empty></block>
</block>
</mescroll-uni>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
data() {
return {
levelList: [
{
name: '一级',
level: 1
},
{
name: '二级',
level: 2
}
],
currentLevel: 1,
teamList: [],
emptyShow: false,
levelNum: 0,
};
},
mixins: [fenxiaoWords],
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
if (this.fenxiaoWords && this.fenxiaoWords.my_team) this.$langConfig.title(this.fenxiaoWords.my_team);
this.getFenXiaoLevel();
if (!this.storeToken) {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/team');
});
}
},
methods: {
getData(mescroll) {
this.emptyShow = false;
if (mescroll.num == 1) {
this.teamList = [];
}
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/team',
data: {
page_size: mescroll.size,
page: mescroll.num,
level: this.currentLevel
},
success: res => {
this.emptyShow = true;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.teamList = []; //如果是第一页需手动制空列表
this.teamList = this.teamList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
imageError(e) {
this.teamList[e].headimg = this.$util.getDefaultImage().head;
this.$forceUpdate();
},
selectLevel(e) {
this.currentLevel = e;
this.$refs.mescroll.refresh();
},
toFenxiaoOrder(item) {
if (item.fenxiao_id) {
this.$util.redirectTo('/pages_promotion/fenxiao/relation', { fenxiao_id: item.fenxiao_id });
} else {
this.$util.redirectTo('/pages_promotion/fenxiao/relation', { sub_member_id: item.member_id });
}
},
async getFenXiaoLevel() {
let res = await this.$api.sendRequest({
url: '/fenxiao/api/config/basics',
async: false,
success: res => {}
});
if (res.code == 0 && res.data) {
this.levelNum = res.data.level;
}
}
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.$refs.mescroll.refresh();
}
}
}
};
</script>
<style lang="scss">
.team-cate {
padding: 0 30rpx;
width: calc(100%);
height: 90rpx;
display: flex;
box-sizing: border-box;
background: #ffffff;
position: fixed;
left: 0;
top: var(--window-top);
.cate-li {
flex: 1;
justify-content: center;
text-align: center;
align-items: center;
display: inline-block;
line-height: 90rpx;
height: 100%;
font-size: 30rpx;
&.active {
box-sizing: border-box;
border-bottom: 4rpx solid;
}
}
}
.team-member {
width: 100%;
height: 70rpx;
line-height: 70rpx;
color: $color-tip;
padding: 0 $padding;
box-sizing: border-box;
}
.team-li {
margin: $margin-updown $margin-both;
padding: $margin-both;
box-sizing: border-box;
background: #fff;
margin-bottom: 20rpx;
border-radius: 10rpx;
.li-box {
display: flex;
box-sizing: border-box;
align-items: center;
image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
.member-info {
flex: 1;
padding-left: $padding;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
.member-name {
display: flex;
justify-content: space-between;
align-items: center;
font-size: $font-size-base;
.left {
width: 0;
flex: 1;
.flex-box {
display: flex;
align-items: center;
margin-bottom: 6rpx;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.title {
padding: 4rpx 16rpx;
justify-content: center;
align-items: center;
text-align: center;
font-size: $font-size-activity-tag;
border-radius: 4rpx;
margin-left: 10rpx;
line-height: 1;
border: 2rpx solid;
color: #fff;
}
}
.consume-info {
text-align: right;
text {
margin-right: 6rpx;
}
view {
line-height: 1.5;
font-size: 24rpx;
}
}
}
.member-date {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: $padding;
view {
width: 50%;
height: 100%;
text-align: left;
line-height: 1;
text {
font-size: $font-size-tag;
color: $color-tip;
}
.tit {
color: $color-tip;
}
}
}
}
.btn-see {
display: flex;
flex-direction: row-reverse;
}
}
.order-box-btn {
display: inline-block;
line-height: 56rpx;
padding: 0 30rpx;
font-size: 26rpx;
color: #303133;
border: 2rpx solid #999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: $border-radius;
border-radius: $border-radius;
margin-top: 30rpx;
}
.li-box.active {
border: none;
}
}
</style>

515
pages_promotion/fenxiao/withdraw_apply.vue Normal file
View File

@@ -0,0 +1,515 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="container">
<view class="bank-account-wrap" @click="goAccount()">
<view class="tx-wrap" v-if="bankAccountInfo.withdraw_type && !isBalance">
<text class="tx-to">提现到</text>
<view class="tx-bank" v-if="bankAccountInfo.withdraw_type == 'wechatpay'">微信默认钱包</view>
<view class="tx-bank" v-else>{{ bankAccountInfo.bank_account }} </view>
<view class="tx-img" v-if="bankAccountInfo.withdraw_type == 'alipay'">
<image :src="$util.img('public/uniapp/member/apply_withdrawal/alipay.png')" mode="widthFix"></image>
</view>
<view class="tx-img" v-else-if="bankAccountInfo.withdraw_type == 'bank'">
<image :src="$util.img('public/uniapp/member/apply_withdrawal/bank.png')" mode="widthFix"></image>
</view>
<view class="tx-img" v-else-if="bankAccountInfo.withdraw_type == 'wechatpay'">
<image :src="$util.img('public/uniapp/member/apply_withdrawal/wechatpay.png')" mode="widthFix">
</image>
</view>
</view>
<text class="tx-to" v-else-if="!isBalance">请添加提现账户</text>
<view class="tx-wrap" v-else="isBalance">
<text class="tx-to">提现到</text>
<view class="tx-bank">余额</view>
<view class="tx-img">
<image :src="$util.img('public/uniapp/member/apply_withdrawal/tixian.png')" mode="widthFix"></image>
</view>
</view>
<view class="iconfont icon-right"></view>
</view>
<view class="empty-box"></view>
<view class="withdraw-wrap">
<view class="withdraw-wrap-title">提现金额：</view>
<view class="money-wrap">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<input type="digit" class="withdraw-money" v-model="withdrawMoney" />
<view class="delete" @click="remove" v-if="withdrawMoney">
<image :src="$util.img('public/uniapp/member/apply_withdrawal/close.png')" mode="widthFix"></image>
</view>
</view>
<view class="bottom">
<view>
<text class="color-tip">可提现金额：{{ $lang('common.currencySymbol') }}{{ withdrawInfo.account | moneyFormat }}</text>
<text class="all-tx color-base-text" @click="allTx">全部提现</text>
</view>
</view>
<view class="desc">
<text v-if="withdrawConfigInfo.withdraw > 0">最小提现金额为{{ $lang('common.currencySymbol') }}{{ withdrawConfigInfo.withdraw | moneyFormat }}，</text>
<text v-if="withdrawConfigInfo.max > 0">最大提现金额为{{ $lang('common.currencySymbol') }}{{ (withdrawConfigInfo.max > withdrawInfo.account ? withdrawInfo.account : withdrawConfigInfo.max) | moneyFormat }}，</text>
<text>手续费为{{ withdrawConfigInfo.withdraw_rate + '%' }}</text>
</view>
</view>
<!-- <view class="btn color-base-border ns-gradient-otherpages-member-widthdrawal-withdrawal" :class="{ disabled: withdrawMoney == '' || withdrawMoney == 0 }" @click="withdraw">
提现
</view> -->
<view class="grace-page-footer page-btm" style="z-index: 999999; background: rgb(255, 255, 255); padding-bottom: 0px;" @click="withdraw">
<view data-v-800ec5da="" class="collectionBorder">
<button data-v-800ec5da="" class="renren-btn do false middle">提现</button>
</view>
</view>
<!-- <view class="recoend" @click="toWithdrawal">
<view class="recoend-con">提现记录</view>
</view> -->
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
export default {
data() {
return {
withdrawInfo: {},
withdrawConfigInfo: {},
bankAccountInfo: {},
withdrawMoney: '',
isSub: false,
isBalance: 0,
payList: null
};
},
onLoad(option) {
if (option.is_balance) this.isBalance = option.is_balance;
},
onShow() {
if (this.storeToken) {
this.getTransferType();
this.getWithdrawConfigInfo();
this.getBankAccountInfo();
this.getWithdrawInfo();
} else {
this.$util.redirectTo('/pages_tool/login/login', {
back: '/pages_promotion/fenxiao/withdraw_apply'
});
}
},
methods: {
toWithdrawal() {
this.$util.redirectTo('/pages_promotion/fenxiao/withdraw_list');
},
//全部提现
allTx() {
this.withdrawMoney = this.withdrawInfo.account;
},
// 删除提现金额
remove() {
this.withdrawMoney = '';
},
/**
* 获取提现信息
*/
getWithdrawInfo() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/detail',
success: res => {
if (res.code >= 0 && res.data) {
this.withdrawInfo = res.data;
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
/**
* 获取提现配置信息
*/
getWithdrawConfigInfo() {
this.$api.sendRequest({
url: '/fenxiao/api/config/withdraw',
success: res => {
if (res.code >= 0 && res.data) {
this.withdrawConfigInfo = res.data;
}
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
/**
* 银行账号信息
*/
getBankAccountInfo() {
this.$api.sendRequest({
url: '/api/memberbankaccount/defaultinfo',
success: res => {
if (res.code >= 0) {
if (res.data)
this.bankAccountInfo = res.data;
else if (this.payList && this.payList.balance) {
// 如果信息为空，将默认为余额
this.isBalance = 1;
}
}
}
});
},
// 获取提现方式
getTransferType() {
this.payList = null;
this.$api.sendRequest({
url: "/fenxiao/api/withdraw/transferType",
success: res => {
if (res.code >= 0 && res.data) {
this.payList = res.data;
}
}
});
},
verify() {
if (this.withdrawMoney == '' || this.withdrawMoney < 0 || isNaN(parseFloat(this.withdrawMoney))) {
this.$util.showToast({
title: '请输入提现金额'
});
return false;
}
let money = this.withdrawInfo.account;
if (this.withdrawConfigInfo.max > 0 && this.withdrawInfo.account > this.withdrawConfigInfo.max) {
money = this.withdrawConfigInfo.max;
}
if (parseFloat(this.withdrawMoney) > 0 && (parseFloat(this.withdrawMoney) > parseFloat(money))) {
this.$util.showToast({
title: '提现金额超出可提现金额'
});
return false;
}
if (parseFloat(this.withdrawMoney) > 0 && (parseFloat(this.withdrawMoney) < parseFloat(this
.withdrawConfigInfo.withdraw))) {
this.$util.showToast({
title: '提现金额小于最低提现金额'
});
return false;
}
return true;
},
withdraw() {
if (!this.bankAccountInfo.withdraw_type && !this.isBalance) {
this.$util.showToast({
title: '请先添加提现方式'
});
return;
}
if (this.verify()) {
if (this.isSub) return;
this.isSub = true;
var applet_type = 0;
if (this.bankAccountInfo.withdraw_type == 'wechatpay') {
// #ifdef MP
applet_type = 1;
// #endif
}
let withdrawType = this.isBalance ? 'balance' : this.bankAccountInfo.withdraw_type;
let branchBankName = this.isBalance ? "余额" : this.bankAccountInfo.branch_bank_name;
// #ifdef MP-WEIXIN
// this.subscribeMessage(() => {
this.$api.sendRequest({
url: '/fenxiao/api/withdraw/apply',
data: {
apply_money: this.withdrawMoney,
transfer_type: withdrawType, //转账提现类型
realname: this.bankAccountInfo.realname,
mobile: this.bankAccountInfo.mobile,
bank_name: branchBankName,
account_number: this.bankAccountInfo.bank_account,
applet_type: applet_type
},
success: res => {
if (res.code >= 0) {
this.$util.showToast({
title: '提现申请成功'
});
setTimeout(() => {
this.$util.redirectTo('/pages_promotion/fenxiao/withdraw_list', {},
'redirectTo');
}, 1500);
} else {
this.isSub = false;
this.$util.showToast({
title: res.message
});
}
},
fail: res => {
this.isSub = false;
}
});
// });
// #endif
// #ifndef MP-WEIXIN
this.$api.sendRequest({
url: '/fenxiao/api/withdraw/apply',
data: {
apply_money: this.withdrawMoney,
transfer_type: withdrawType, //转账提现类型
realname: this.bankAccountInfo.realname,
mobile: this.bankAccountInfo.mobile,
bank_name: branchBankName,
account_number: this.bankAccountInfo.bank_account,
applet_type: applet_type
},
success: res => {
if (res.code >= 0) {
this.$util.showToast({
title: '提现申请成功'
});
setTimeout(() => {
this.$util.redirectTo('/pages_promotion/fenxiao/withdraw_list', {},
'redirectTo');
}, 1500);
} else {
this.isSub = false;
this.$util.showToast({
title: res.message
});
}
},
fail: res => {
this.isSub = false;
}
});
// #endif
}
},
goAccount() {
this.$util.redirectTo(
'/pages_tool/member/account', {
back: '/pages_promotion/fenxiao/withdraw_apply',
type: 'fenxiao'
},
'redirectTo'
);
},
/**
* 微信订阅消息
*/
subscribeMessage(callback) {
this.$api.sendRequest({
url: '/weapp/api/weapp/messagetmplids',
data: {
keywords: 'USER_WITHDRAWAL_SUCCESS'
},
success: res => {
if (res.code == 0 && res.data.length) {
uni.requestSubscribeMessage({
tmplIds: res.data,
fail: res => {
console.log('fail', res);
},
complete: () => {
callback();
}
});
} else {
callback();
}
},
fail: res => {
callback();
}
});
}
},
};
</script>
<style lang="scss">
.grace-page-footer{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 99 !important;
}
.collectionBorder{
border-top: 2rpx solid #e6e7eb;
padding: 14rpx 24rpx;
background: #fff;
position: relative;
}
.renren-btn {
height: 68px;
line-height: 68px;
line-height: 62px;
border-radius: 34px !important;
border-radius: 128px;
background: #ff3c29;
color: #fff;
font-size: 32px;
font-weight: 400;
width: 100%;
border: 0;
}
.renren-btn.do {
background: -webkit-linear-gradient(317.43deg, #ff3c29, #ff6f29 94.38%);
background: linear-gradient(132.57deg, #ff3c29, #ff6f29 94.38%);
font-size: 28rpx;
font-weight: 500;
}
.renren-btn.middle {
height: 76rpx;
line-height: 76rpx;
border-radius: 38rpx !important;
font-size: 28rpx !important;
font-weight: 500 !important;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: #fff;
}
.empty-box {
height: 20rpx;
}
.bank-account-wrap {
margin: 0 20rpx;
padding: 20rpx 30rpx;
border-bottom: 2rpx solid #f7f7f7;
position: relative;
.tx-wrap {
display: flex;
justify-content: space-between;
margin-right: 60rpx;
.tx-bank {
margin-right: 60rpx;
flex: 1;
margin-left: 10rpx;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tx-img {
position: absolute;
right: 100rpx;
top: 50%;
transform: translateY(-50%);
width: 40rpx;
height: 40rpx;
image {
width: 100%;
height: 100%;
}
}
}
.iconfont {
position: absolute;
right: 40rpx;
top: 50%;
transform: translateY(-50%);
}
}
.withdraw-wrap {
margin: 0 20rpx;
padding: 30rpx;
border-radius: 16rpx;
box-shadow: rgba(110, 110, 110, 0.09) 0 0 20rpx 0;
.money-wrap {
padding: 20rpx 0;
border-bottom: 2rpx solid #eee;
display: flex;
align-items: baseline;
.unit {
font-size: 60rpx;
line-height: 1.3;
}
.withdraw-money {
height: 70rpx;
line-height: 70rpx;
min-height: 70rpx;
padding-left: 20rpx;
font-size: 60rpx;
flex: 1;
font-weight: bolder;
}
.delete {
width: 40rpx;
height: 40rpx;
image {
width: 100%;
height: 100%;
}
}
}
.bottom {
display: flex;
padding-top: 20rpx;
text {
line-height: 1;
flex: 2;
}
.all-tx {
padding-left: 10rpx;
}
}
}
.btn {
margin: 0 30rpx;
margin-top: 60rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: $border-radius;
color: #fff;
text-align: center;
background-color: var(--main-color);
&.disabled {
background: #ccc;
border-color: #ccc;
color: #fff;
}
}
.recoend {
margin-top: 40rpx;
.recoend-con {
text-align: center;
}
}
.desc {
font-size: $font-size-tag;
color: #999;
}
</style>

209
pages_promotion/fenxiao/withdraw_list.vue Normal file
View File

@@ -0,0 +1,209 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<mescroll-uni @getData="getData" class="member-point">
<view slot="list">
<block v-if="withdrawList.length">
<view class="detailed-wrap">
<view class="cont">
<view class="detailed-item" v-for="(item, index) in withdrawList" :key="index" @click="toDetail(item.id)">
<view class="info">
<view class="event">{{ item.transfer_type=='balance'&&'余额' || item.transfer_type=='alipay'&&'支付宝' || item.transfer_type=='bank'&&'银行卡' || item.transfer_type=='wechatpay'&&'微信' }}</view>
<view>
<text class="time">{{ $util.timeStampTurnTime(item.create_time) }}</text>
</view>
</view>
<view class="right-wrap">
<view class="num color-base-text">￥{{ item.money }}</view>
<view class="status-name" :style="withdrawState[item.status].color">{{ item.status_name }}</view>
</view>
</view>
</view>
</view>
</block>
<block v-else>
<ns-empty :isIndex="false" text="暂无提现记录"></ns-empty>
</block>
</view>
</mescroll-uni>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
data() {
return {
withdrawState: {
'3': {
color: 'color: rgb(255, 69, 68)',
text: '已转账'
},
'1': {
color: 'color: rgb(255, 160, 68)',
text: '待审核'
},
'2': {
color: 'color: rgb(17, 189, 100)',
text: '已审核'
},
'-1': {
color: 'color: rgb(255, 69, 68)',
text: '已拒绝'
}
},
withdrawList: [],
emptyShow: false,
};
},
onShow() {
setTimeout( () => {
if (!this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
if(this.fenxiaoWords && this.fenxiaoWords.withdraw)this.$langConfig.title(this.fenxiaoWords.withdraw + '明细');
if (!this.storeToken) {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/fenxiao/withdraw_list');
});
}
},
mixins: [fenxiaoWords],
methods: {
//获得列表数据
getData(mescroll) {
this.emptyShow = false;
if (mescroll.num == 1) {
this.withdrawList = [];
}
this.$api.sendRequest({
url: '/fenxiao/api/withdraw/page',
data: {
page_size: mescroll.size,
page: mescroll.num,
},
success: res => {
this.emptyShow = true;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data && res.data.list) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.withdrawList = []; //如果是第一页需手动制空列表
this.withdrawList = this.withdrawList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
toDetail(id) {
this.$util.redirectTo('/pages_promotion/fenxiao/withdrawal_detail', {
id: id
});
}
}
};
</script>
<style lang="scss">
.account-box {
width: 100vw;
padding: 30rpx;
box-sizing: border-box;
padding-bottom: 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
.tit {
color: #fff;
line-height: 1;
}
.iconmn_jifen_fill {
font-size: 60rpx;
color: #fff;
}
.point {
color: #fff;
font-size: 60rpx;
margin-left: 10rpx;
}
}
.detailed-wrap {
.head {
display: flex;
height: 90rpx;
& > view {
flex: 1;
text-align: left;
padding: 0 $padding;
line-height: 90rpx;
}
}
.cont {
background: #fff;
.detailed-item {
padding: $padding 10rpx;
margin: 0 $margin-both;
border-bottom: 2rpx solid #eee;
position: relative;
&:last-of-type {
border-bottom: none;
}
.info {
padding-right: 180rpx;
.event {
font-size: $font-size-base;
line-height: 1.3;
}
.time {
font-size: $font-size-base;
color: $color-tip;
}
}
.right-wrap {
position: absolute;
right: 0;
top: 0;
text-align: right;
.num {
font-size: $font-size-toolbar;
}
}
}
}
}
</style>

127
pages_promotion/fenxiao/withdrawal_detail.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<view class="money-wrap">
<text>-{{ detail.money }}</text>
</view>
<!-- 状态0待审核1.待转账2已转账 -1拒绝' -->
<view class="item">
<view class="line-wrap">
<text class="label">当前状态</text>
<text class="value">{{ detail.status_name }}</text>
</view>
<view class="line-wrap">
<text class="label">交易号</text>
<text class="value">{{ detail.withdraw_no }}</text>
</view>
<view class="line-wrap">
<text class="label">手续费</text>
<text class="value">￥{{ detail.withdraw_rate_money }}</text>
</view>
<view class="line-wrap">
<text class="label">申请时间</text>
<text class="value">{{ $util.timeStampTurnTime(detail.create_time) }}</text>
</view>
<view class="line-wrap" v-if="detail.status">
<text class="label">审核时间</text>
<text class="value">{{ $util.timeStampTurnTime(detail.audit_time) }}</text>
</view>
<view class="line-wrap" v-if="detail.bank_name">
<text class="label">银行名称</text>
<text class="value">{{ detail.bank_name }}</text>
</view>
<view class="line-wrap" v-if="detail.account_number">
<text class="label">收款账号</text>
<text class="value">{{ detail.account_number }}</text>
</view>
<view class="line-wrap" v-if="detail.status == -1 && detail.refuse_reason">
<text class="label">拒绝理由</text>
<text class="value">{{ detail.refuse_reason }}</text>
</view>
<view class="line-wrap" v-if="detail.status == 3">
<text class="label">转账方式名称</text>
<text class="value">{{ detail.transfer_name }}</text>
</view>
<view class="line-wrap" v-if="detail.status == 3">
<text class="label">转账时间</text>
<text class="value">{{ $util.timeStampTurnTime(detail.payment_time) }}</text>
</view>
</view>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
export default {
data() {
return {
id: 0,
detail: {}
};
},
onLoad(option) {
this.id = option.id || 0;
},
onShow() {
if (this.storeToken) {
this.getDetail();
} else {
this.$util.redirectTo('/pages_tool/login/login', {
back: '/pages_promotion/fenxiao/withdraw_list'
}, 'redirectTo');
}
},
methods: {
getDetail() {
this.$api.sendRequest({
url: '/fenxiao/api/withdraw/detail',
data: {
id: this.id
},
success: res => {
if (res.data) {
this.detail = res.data;
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
}
}
};
</script>
<style lang="scss">
.money-wrap {
text-align: center;
font-size: 50rpx;
font-weight: bold;
margin: 40rpx;
border-bottom: 2rpx solid $color-line;
padding: 40rpx;
}
.item {
margin: 40rpx;
.line-wrap {
margin-bottom: 20rpx;
.label {
display: inline-block;
width: 200rpx;
color: $color-tip;
font-size: $font-size-base;
}
.value {
display: inline-block;
font-size: $font-size-base;
}
}
}
</style>

323
pages_promotion/merch/detail.vue Normal file
View File

@@ -0,0 +1,323 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="content">
<view class="head-wrap">
<!-- 搜索区域 -->
<view class="search-wrap uni-flex uni-row" style="margin-bottom: 20rpx;">
<!-- <view class="flex-item input-wrap">
<input class="uni-input" maxlength="50" v-model="keyword" @confirm="search()" placeholder="请输入您要搜索的商品" />
<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
</view>
<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }" @click="changeListStyle()"></view> -->
<view style="width: 100rpx;height: 100rpx;">
<image :src="$util.img(merch.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;" />
</view>
<view style="margin-left: 20rpx;padding-top: 22rpx;">
<view style="line-height: 1;font-size: 32rpx;font-weight: 600;">{{merch.merch_name}}</view>
<view style="color:rgb(255 202 40)">
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
</view>
</view>
</view>
<!-- 排序 -->
<view class="sort-wrap">
<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" @click="sortTabClick('')">
<text :class="{ 'color-base-text': orderType === '' }">综合</text>
</view>
<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">销量
</view>
<view class="price-wrap" @click="sortTabClick('discount_price')">
<text :class="{ 'color-base-text': orderType === 'discount_price' }">价格</text>
<view class="iconfont-wrap">
<view class="iconfont icon-iconangledown-copy asc" :class="{ 'color-base-text': priceOrder === 'asc' && orderType === 'discount_price' }"></view>
<view class="iconfont icon-iconangledown desc" :class="{ 'color-base-text': priceOrder === 'desc' && orderType === 'discount_price' }"></view>
</view>
</view>
<!-- <view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
<text @click="sortTabClick('screen')">筛选</text>
<view @click="sortTabClick('screen')" class="iconfont-wrap">
<view class="iconfont icon-shaixuan color-tip"></view>
</view>
</view> -->
</view>
</view>
<mescroll-uni top="240" ref="mescroll" @getData="getGoodsList">
<block slot="list">
<view class="goods-list single-column" :class="{ show: isList }">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
<view class="sell-out" v-if="item.stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
{{ item.goods_name }}
</view>
</view>
<view class="lineheight-clear">
<view class="discount-price" v-if="item.isinformation == 0">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</view>
<view class="discount-price" v-else>
<text class="price price-style large">咨询</text>
</view>
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
</view>
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
</view>
</view>
<view class="pro-info" v-if="item.isinformation == 0">
<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
<view class="block-wrap">
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
</view>
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
<!-- 购物车图标 -->
<view v-if="config.style == 'icon-cart'" :style="{
color: config.theme == 'diy' ? config.textColor : '',
borderColor: config.theme == 'diy' ? config.textColor : ''
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
</view>
<!--加号图标 -->
<view v-else-if="config.style == 'icon-add'" :style="{
color: config.theme == 'diy' ? config.textColor : '',
borderColor: config.theme == 'diy' ? config.textColor : ''
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
</view>
<!-- 按钮 -->
<view v-else-if="config.style == 'button'" :style="{
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
color: config.theme == 'diy' ? config.textColor : '',
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
{{ config.text }}
<view class="click-event"></view>
</view>
<!--自定义图标 -->
<view v-else-if="config.style == 'icon-diy'" :style="{
color: config.theme == 'diy' ? config.textColor : ''
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="goods-list double-column" :class="{ show: !isList }">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
@click="toDetail(item)" :style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
<view class="sell-out" v-if="item.stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</view>
<view class="info-wrap">
<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
{{ item.goods_name }}
</view>
<view class="lineheight-clear">
<view class="discount-price" v-if="item.isinformation == 0">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</view>
<view class="discount-price" v-else>
<text class="price price-style large">咨询</text>
</view>
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
</view>
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
</view>
<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="pro-info" v-if="item.isinformation == 0">
<view class="block-wrap" >
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
</view>
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
<!-- 购物车图标 -->
<view v-if="config.style == 'icon-cart'" :style="{
color: config.theme == 'diy' ? config.textColor : '',
borderColor: config.theme == 'diy' ? config.textColor : ''
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
</view>
<!--加号图标 -->
<view v-else-if="config.style == 'icon-add'" :style="{
color: config.theme == 'diy' ? config.textColor : '',
borderColor: config.theme == 'diy' ? config.textColor : ''
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
</view>
<!-- 按钮 -->
<view v-else-if="config.style == 'button'" :style="{
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
color: config.theme == 'diy' ? config.textColor : '',
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
{{ config.text }}
<view class="click-event"></view>
</view>
<!--自定义图标 -->
<view v-else-if="config.style == 'icon-diy'" :style="{
color: config.theme == 'diy' ? config.textColor : ''
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="goodsList.length == 0 && emptyShow"><ns-empty text="暂无商品"></ns-empty></view>
</block>
</mescroll-uni>
<ns-goods-sku-index ref="goodsSkuIndex" @addCart="addCart"></ns-goods-sku-index>
<!-- 筛选弹出框 -->
<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
<view class="title color-tip">筛选</view>
<scroll-view scroll-y>
<!-- 包邮 -->
<!-- <view class="item-wrap">
<view class="label"><text>是否包邮</text></view>
<view class="list">
<uni-tag :inverted="true" text="包邮" :type="isFreeShipping ? 'primary' : 'default'" @click="isFreeShipping = !isFreeShipping" />
</view>
</view> -->
<!-- 价格筛选项 -->
<!-- <view class="item-wrap">
<view class="label"><text>价格区间(元)</text></view>
<view class="price-wrap">
<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
<view class="h-line"></view>
<input class="uni-input" type="digit" v-model="maxPrice" placeholder="最高价" />
</view>
</view> -->
<!-- 品牌筛选项 -->
<!-- <view class="item-wrap" v-if="brandList.length > 0">
<view class="label"><text>品牌</text></view>
<view class="list">
<view v-for="(item, index) in brandList" :key="index">
<uni-tag :inverted="true" :text="item.brand_name" :type="item.brand_id == brandId ? 'primary' : 'default'" @click="brandId == item.brand_id ? (brandId = 0) : (brandId = item.brand_id)" />
</view>
</view>
</view> -->
<!-- 分类筛选项 -->
<view class="category-list-wrap">
<text class="first">全部分类</text>
<view class="class-box">
<view @click="selectedCategory('')" class="list-wrap">
<text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text>
</view>
<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
</view>
</view>
</view>
</scroll-view>
<view class="footer" :class="{ 'safe-area': isIphoneX }">
<button type="default" class="footer-box" @click="resetData">重置</button>
<button type="primary" class="footer-box1" @click="screenData">确定</button>
</view>
</uni-drawer>
<loading-cover ref="loadingCover"></loading-cover>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
import list from './public/js/list.js';
export default {
components: {
uniDrawer,
uniTag,
nsGoodsSkuIndex
},
data() {
return {};
},
mixins: [list]
};
</script>
<style lang="scss">
@import './public/css/list.scss';
</style>
<style scoped>
>>>.uni-tag--primary.uni-tag--inverted {
background-color: #f5f5f5 !important;
}
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
</style>

266
pages_promotion/merch/merchcategory.vue Normal file
View File

@@ -0,0 +1,266 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<view class="category-page-wrap category-template-1" style="height: calc(-56px + 100vh);">
<!-- <view class="search-box" @click="$util.redirectTo('/pages_tool/goods/search')">
<view class="search-content">
<input type="text" class="uni-input" maxlength="50" placeholder="商品搜索" confirm-type="search" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view> -->
<view class="content-box" v-if="categoryTree">
<block v-if="categoryTree.length">
<scroll-view scroll-y="true" class="tree-wrap">
<view class="category-item-wrap">
<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
{ select: select == index },
]" @click="switchOneCategory(index)">
<view class="">{{ item.category_name }}</view>
</view>
</view>
</scroll-view>
<view class="right-flex-wrap">
<scroll-view scroll-y="true" class="content-wrap" ref="contentWrap" :scroll-into-view="categoryId" :scroll-with-animation="true"
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
@refresherrestore="onRestore">
<view class="child-category" v-for="(item, index) in categoryTree" :id="'category-' + index" v-if="item.child_list.length > 0">
<!---->
<view class="item-wrap category">
<view class="category-title">{{ item.category_name }}</view>
<view class="category-list">
<view class="category-item" v-for="(one, oneIndex) in item.child_list" :key="oneIndex" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: one.merch_id })">
<view class="img-box">
<image :src="$util.img(one.merch_image)" mode="widthFix"/>
</view>
<view class="name">{{ one.merch_name }}</view>
</view>
</view>
</view>
<!-- <view class="category-empty" v-else>
<image src="/static/common-empty.png" mode="widthFix"/>
</view> -->
</view>
</scroll-view>
</view>
</block>
<!-- <view class="category-empty">
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"></image>
<view class="tips">暂时没有分类哦！</view>
</view> -->
</view>
</view>
<ns-login ref="login"></ns-login>
<!-- <loading-cover ref="loadingCover"></loading-cover> -->
</view>
</template>
<script>
export default {
components: {},
data() {
return {
scrollTop: 0,
select: 0,
categoryId: 'category-0',
scrollLock: false,
triggered: true,
heightArea: [],
loadType: '',
categoryTree:[
/*{
category_id:6277,
category_name:"物业",
child_list:[
{
category_id:6572,
category_name:"鞋里革",
image:"attachment\/images\/979\/2024\/04\/y46Gg41i552o9iq9249295oz991444.jpg",
}
]
},*/
],
user_type:uni.getStorageSync('user_type')
};
},
onLoad() {
uni.hideTabBar()
this.getCategory()
// this.getgoodslist()
},
onShow() {
if (this.$refs.category) this.$refs.category[0].pageShow();
},
onUnload() {
if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
},
methods: {
switchOnetype(e){
this.goods_type = e
this.select = -1;
this.categoryId = ''
this.getgoodslist()
},
/**
* 切换一级分类
* @param {Object} index
*/
switchOneCategory(index) {
if (index >= this.categoryTree.length) return;
this.select = index;
this.categoryId = 'category-' + index;
// 阻止切换分类之后滚动事件也立即执行
this.scrollLock = true;
console.log(index)
// this.goodsList = []
// this.getgoodslist()
},
touchStart() {
this.scrollLock = false;
},
/**
* 监听滚动
* @param {Object} event
*/
listenScroll(event) {
if (this.scrollLock) return;
let scrollTop = event.detail.scrollTop;
if (this.heightArea.length) {
for (let i = 0; i < this.heightArea.length; i++) {
if (scrollTop >= this.heightArea[i][0] && scrollTop <= this.heightArea[i][1]) {
this.select = i;
break;
}
}
if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] -
scrollTop - contentWrapHeight < 300) {
this.$refs.categoryItem[this.select].getGoodsList();
}
}
},
sethead(item,type){
var is_select = item.is_select
this.$api.sendRequest({
url: 'app.ajax_batchheads',
data: {
goods_id:item.actId,
is_select:is_select
},
success: res => {
this.$util.showToast({
title: res.result.message
});
this.getgoodslist()
},
fail: () => {
this.$util.showToast({
title: 'request:fail'
});
}
});
},
//获取分类列表
getCategory(){
this.$api.sendRequest({
url: '/merch/api/merch/getcategory',
data: {
is_type_show:1,
},
success: res => {
console.log( res.data)
this.categoryTree = res.data
},
fail: () => {
this.$util.showToast({
title: 'request:fail'
});
}
});
},
onRefresh() {
this.triggered = false;
},
onRestore() {
this.triggered = 'restore'; // 需要重置
},
/**
* 触摸开始
* @param {Object} e
*/
// touchstart(e) {
// this.touchstartPosition = e.changedTouches[0].clientY;
// },
/**
* 触摸结束
* @param {Object} e
*/
touchend(e) {
let end = e.changedTouches[0].clientY;
if ((this.scrollType == 'top' || this.scrollType == 'none') && end - this.touchstartPosition > 100) {
// this.switchCategory('prev');
} else if ((this.scrollType == 'bottom' || this.scrollType == 'none') && this.touchstartPosition - end >
100) {
// this.switchCategory('next');
}
},
getDiyInfo() {
},
toLogin() {
this.$refs.login.open('/pages/goods/category')
}
},
// onPullDownRefresh() {
// uni.hideTabBar();
// this.getDiyInfo();
// }
};
</script>
<style lang="scss">
@import './public/category.scss';
/deep/ .uni-popup__wrapper.uni-center {
background: rgba(0, 0, 0, 0.6);
}
/deep/ .uni-popup__wrapper-box {
border-radius: 0 !important;
}
/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
overflow-y: visible;
}
/deep/ .loading-layer {
background: #fff !important;
}
// 分类四一级展开
/deep/ .category-template-4 .template-four .uni-popup__wrapper-box {
border-radius: 0px 0px 14px 14px !important;
overflow: hidden;
}
/deep/ .category-template-4 .content-wrap .categoty-goods-wrap .goods-list {
margin-top: 30rpx;
}
/deep/ .category-template-4 .content-wrap .goods-list .goods-item .footer-wrap .right-wrap .num-action {
width: 46rpx;
height: 46rpx;
}
/deep/ .uni-page-refresh-inner .uni-page-refresh__path {
stroke: rgb(1, 1, 1) !important;
}
</style>

929
pages_promotion/merch/public/category.scss Normal file
View File

@@ -0,0 +1,929 @@
.category-page-wrap {
width: 100vw;
// height: calc(100vh - var(--tab-bar-height, 0));
display: flex;
flex-direction: column;
background-color: #fff;
}
.content-box {
flex: 1;
height: 0;
display: flex;
.tree-wrap {
width: 170rpx;
height: 100%;
background-color: #f5f5f5;
}
.right-flex-wrap {
flex: 1;
width: 0;
height: 100%;
background: #f4f6fa;
display: flex;
flex-direction: column;
transform: translateX(0px);
.content-wrap {
display: flex;
flex: 1;
height: 0;
width: 100%;
}
.child-category-wrap {
width: 100%;
height: 100%;
}
}
}
.tree-wrap .category-item-wrap {
height: auto;
background-color: #fff;
}
.tree-wrap .category-item {
line-height: 1.5;
padding: 26rpx 28rpx;
box-sizing: border-box;
position: relative;
background-color: #f5f5f5;
view {
color: #222222;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
&.border-top {
border-bottom-right-radius: 12rpx;
}
&.border-bottom {
border-top-right-radius: 12rpx;
}
&.select {
background: #fff;
view {
color: $base-color;
font-weight: bold;
}
&::before {
content: ' ';
width: 8rpx;
height: 34rpx;
background: var(--base-color);
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
}
.search-box {
position: relative;
padding: 20rpx 30rpx;
display: flex;
align-items: center;
background: #fff;
.search-content {
position: relative;
/* #ifndef MP-WEIXIN */
height: 64rpx;
/* #endif */
/* #ifdef MP-WEIXIN */
height: 100%;
/* #endif */
border-radius: 40rpx;
flex: 1;
background-color: #f5f5f5;
input {
box-sizing: border-box;
display: block;
height: 100%;
width: 100%;
padding: 0 20rpx 0 40rpx;
background: #f5f5f5;
color: #333;
border-radius: 40rpx;
}
.iconfont {
position: absolute;
top: 50%;
right: 10rpx;
transform: translateY(-50%);
font-size: $font-size-toolbar;
z-index: 10;
color: #89899a;
width: 80rpx;
text-align: center;
}
}
}
.cart-box {
height: 100rpx;
width: 100%;
background: #fff;
border-top: 1px solid #f5f5f5;
box-sizing: border-box;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.left-wrap {
display: flex;
align-items: center;
}
.cart-icon {
width: 70rpx;
height: 70rpx;
position: relative;
.iconfont {
color: var(--btn-text-color);
width: inherit;
height: inherit;
background-color: $base-color;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.num {
position: absolute;
top: 0;
right: 0;
transform: translate(60%, 0);
display: inline-block;
box-sizing: border-box;
color: #fff;
line-height: 1.2;
text-align: center;
font-size: 24rpx;
padding: 0 6rpx;
min-width: 30rpx;
border-radius: 16rpx;
background-color: var(--price-color);
border: 2rpx solid #fff;
}
}
.price {
margin-left: 30rpx;
.title {
color: #333;
}
.money,
.unit {
font-weight: bold;
color: var(--price-color);
}
}
.settlement-btn {
margin: 0 0 0 20rpx;
width: 200rpx;
font-weight: bold;
border-radius: 50rpx;
height: 70rpx;
line-height: 70rpx;
}
}
.cart-point {
width: 26rpx;
height: 26rpx;
position: fixed;
z-index: 1000;
background: #f00;
border-radius: 50%;
transition: all 0.05s;
}
.category-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
image {
width: 380rpx;
}
.tips {
font-size: 26rpx;
font-weight: 500;
color: #999;
margin-top: 50rpx;
}
}
.end-tips {
text-align: center;
color: #999;
font-size: 24rpx;
padding: 20rpx 0;
opacity: 0;
}
// 风格四
.category-template-4 {
.search-box {
.search-content input {
background-color: #f1f1f1;
}
}
.cart-box {
position: relative;
z-index: 2;
}
/deep/ .template-four {
position: relative;
z-index: 1;
.template-four-wrap {
position: relative;
z-index: 1;
padding-left: 20rpx;
padding-right: 80rpx;
padding-bottom: 10rpx;
display: flex;
height: 172rpx;
align-items: baseline;
box-sizing: border-box;
box-shadow: 0 4rpx 4rpx rgba(123, 123, 123, 0.1);
}
.template-four-popup {
display: flex;
flex-direction: column;
overflow: hidden;
.title {
line-height: 1;
margin-bottom: 20rpx;
font-weight: bold;
}
.template-four-scroll {
display: flex;
flex-wrap: wrap;
align-items: baseline;
align-content: baseline;
padding: 20rpx;
white-space: nowrap;
height: 380rpx;
box-sizing: border-box;
.uni-scroll-view-content {
flex-wrap: wrap;
align-items: baseline;
align-content: baseline;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
padding: 4rpx 0;
color: #666;
margin-right: 16rpx;
border-radius: 40rpx;
margin-bottom: 10rpx;
width: calc((100% - 64rpx) / 5);
&:nth-child(5n + 5) {
margin-right: 0;
}
.image-warp {
margin-bottom: 6rpx;
padding: 4rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 42rpx;
border: 4rpx solid transparent;
}
image {
width: 84rpx;
height: 84rpx;
border-radius: 32rpx;
}
.text {
padding: 2rpx 16rpx;
border-radius: 40rpx;
font-size: $font-size-tag;
}
&.selected {
.text {
background-color: $base-color;
color: var(--btn-text-color);
}
}
}
}
.pack-up {
font-size: $font-size-tag;
color: #888888;
height: 74rpx;
display: flex;
align-items: center;
justify-content: center;
border-top: 2rpx solid #f2f2f2;
.iconfont {
font-size: 40rpx;
margin-left: -4rpx;
}
}
}
.category-item-all {
position: absolute;
bottom: 0;
z-index: 1;
right: 0;
top: 0;
width: 72rpx;
line-height: 1;
background-color: #fff;
.category-item-all-wrap {
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
}
.text {
writing-mode: tb-rl;
margin-bottom: 6rpx;
letter-spacing: 4rpx;
font-size: $font-size-tag;
font-weight: bold;
}
.img {
width: 20rpx;
height: 20rpx;
}
&::after {
content: '';
// box-shadow: -4rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
position: absolute;
left: 0;
width: 10rpx;
// height: 100rpx;
top: 20%;
bottom: 20%;
// transform: translateY(-50%);
// background-color: #F0F5FF;
}
}
.uni-scroll-view-content {
display: flex;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 130rpx;
flex-shrink: 0;
margin-right: 20rpx;
padding: 4rpx 0;
&:last-of-type {
margin-right: 0;
}
.image-warp {
margin-bottom: 6rpx;
padding: 4rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 42rpx;
border: 4rpx solid transparent;
}
image {
width: 84rpx;
height: 84rpx;
border-radius: 32rpx;
}
.text {
font-size: $font-size-tag;
}
}
.select {
.text {
padding: 8rpx 16rpx;
border-radius: 40rpx;
color: #fff;
font-size: $font-size-tag;
line-height: 1;
}
}
}
.content-wrap .categoty-goods-wrap .goods-list {
margin-top: 30rpx;
}
.tree-wrap .category-item.select::before {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
}
/*商品部分*/
.item-wrap {
width: 100%;
box-sizing: border-box;
// padding: 0 24rpx;
// padding-bottom: 80rpx;
&.goods {
height: 100%;
}
}
.category-title {
padding: 20rpx 0;
font-size: 26rpx;
// font-weight: bold;
color: #222;
position: relative;
text-align: left;
padding-left: 30rpx;
// &::after,
// &::before {
// content: ' ';
// width: 46rpx;
// border-top: 2rpx solid #dfdfdf;
// position: absolute;
// top: 50%;
// }
&::after {
margin-left: 40rpx;
}
&::before {
margin-left: -80rpx;
}
}
.category-adv {
width: 100%;
overflow: hidden;
line-height: 1;
padding: 20rpx 0;
image {
width: 100%;
border-radius: 8rpx;
}
}
.category-list {
display: flex;
flex-wrap: wrap;
background: #fff;
margin: 0 20rpx;
border-radius: 10rpx;
padding: 10rpx 0;
.category-item {
width: 33.33%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16rpx;
box-sizing: border-box;
.img-box {
width: 80%;
padding-top: 80%;
margin: 0 auto;
overflow: hidden;
margin-bottom: 20rpx;
position: relative;
image {
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.name {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
line-height: 1;
font-size: 24rpx;
}
}
}
.goods-list {
.goods-item {
padding: 0 0 26rpx 0;
background: #fff;
display: flex;
position: relative;
.goods-img {
width: 180rpx;
height: 180rpx;
overflow: hidden;
border-radius: $border-radius;
margin-right: 14rpx;
image {
width: 100%;
height: 100%;
}
}
.goods-tag {
color: #fff;
line-height: 1;
padding: 8rpx 12rpx;
position: absolute;
border-top-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
top: 0;
left: 0;
font-size: $font-size-goods-tag;
}
.goods-tag-img {
position: absolute;
border-top-left-radius: $border-radius;
width: 80rpx;
height: 80rpx;
top: 26rpx;
left: 26rpx;
z-index: 5;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-wrap {
flex: 1;
display: flex;
flex-direction: column;
width: 0;
}
.name-wrap {
flex: 1;
}
.goods-name {
font-size: $font-size-base;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.introduction {
line-height: 1;
margin-top: 10rpx;
}
.discount-price {
display: inline-block;
font-weight: bold;
line-height: 1;
margin-top: 16rpx;
color: var(--price-color);
.unit {
margin-right: 6rpx;
}
}
.pro-info {
display: flex;
margin-top: 16rpx;
.delete-price {
text-decoration: line-through;
flex: 1;
.unit {
margin-right: 0rpx;
}
}
&>view {
line-height: 1;
&:nth-child(2) {
text-align: right;
}
}
}
.member-price-tag {
display: inline-block;
width: 60rpx;
line-height: 1;
margin-left: 6rpx;
height: 28rpx;
image {
width: 100%;
height: 100%;
}
}
.footer-wrap {
display: flex;
justify-content: space-between;
.right-wrap {
display: flex;
align-items: center;
justify-content: end;
.num {
width: auto;
padding: 0 20rpx;
line-height: 1;
}
.num-action {
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 40rpx;
background: $base-color;
border-radius: 50%;
position: relative;
.click-event {
position: absolute;
width: 2rpx;
height: 2rpx;
left: 0;
top: 0;
transform: translate(-50%, -50%);
z-index: 5;
}
&.reduce {
width: 38rpx;
height: 38rpx;
background-color: transparent;
border: 2rpx solid $base-color;
box-sizing: border-box;
.icon-jian {
color: $base-color;
}
}
}
.icon-jian,
.icon-jia {
color: var(--btn-text-color);
font-weight: bold;
font-size: 26rpx;
line-height: 1;
}
.select-sku {
font-weight: bold;
color: var(--btn-text-color);
font-size: 24rpx;
padding: 16rpx 24rpx;
position: relative;
// height: 40rpx;
line-height: 1;
text-align: center;
border-radius: 50rpx;
.num-tag {
position: absolute;
top: 0;
right: 0;
transform: translateY(-50%);
display: inline-block;
box-sizing: border-box;
color: #fff;
line-height: 1.2;
text-align: center;
font-size: 24rpx;
padding: 0 6rpx;
min-width: 32rpx;
border-radius: 16rpx;
background-color: $base-color;
border: 2rpx solid #fff;
}
}
}
}
}
&[data-template='3'] .goods-item {
flex-direction: column;
.info-wrap {
width: 100%;
margin-top: 12rpx;
}
.goods-img {
width: 100%;
height: auto;
margin-right: 0;
line-height: 1;
image {
border-radius: 8rpx;
}
}
.select-sku {
font-weight: bold;
width: 128rpx;
height: 52rpx !important;
line-height: 52rpx !important;
}
}
}
.categoty-goods-wrap {
display: flex;
flex-direction: column;
height: 100%;
.scroll-goods-view {
flex: 1;
height: 0;
transform: translateX(0px);
}
}
.screen-category-wrap {
display: flex;
.icon-unfold {
font-size: 24rpx;
color: #999;
padding: 0 0 0 20rpx;
}
}
.screen-category {
flex: 1;
width: 0;
padding: 0 0 20rpx 0;
white-space: nowrap;
height: 60rpx;
.item {
display: inline-block;
padding: 4rpx 24rpx;
background: #f5f5f5;
color: #666;
margin-right: 20rpx;
border-radius: 40rpx;
&.selected {
background-color: $base-color;
color: var(--btn-text-color);
}
}
}
/deep/ .uni-popup__wrapper-box {
border-radius: 0;
}
.screen-category-popup {
display: flex;
.screen-category {
white-space: break-spaces;
padding: 20rpx;
height: auto;
}
.title {
line-height: 1;
margin-bottom: 20rpx;
font-weight: bold;
}
.item {
margin-bottom: 20rpx;
}
}
.end-tips {
text-align: center;
color: #999;
font-size: 24rpx;
padding: 30rpx 0 30rpx 0;
display: flex;
align-items: center;
justify-content: center;
}
/deep/ .loading-layer {
background: #fff !important;
}
.category-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 100rpx;
image {
width: 280rpx;
height: 252rpx;
}
.tips {
font-size: 26rpx;
font-weight: 500;
color: #999;
margin-top: 50rpx;
}
}
.screen-category-4 .item {
background-color: #f2f2f2 !important;
padding: 10rpx 24rpx;
line-height: 1;
font-size: $font-size-tag;
&.selected {
background-color: var(--main-color-shallow) !important;
color: var(--main-color);
}
}

647
pages_promotion/merch/public/css/list.scss Normal file
View File

@@ -0,0 +1,647 @@
.head-wrap {
background: #fff;
position: fixed;
width: 100%;
left: 0;
z-index: 1;
.search-wrap {
flex: 0.5;
padding: 30rpx 30rpx 0;
font-size: $font-size-tag;
display: flex;
align-items: center;
.iconfont {
margin-left: 16rpx;
font-size: 36rpx;
}
.input-wrap {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
background: $color-bg;
height: 64rpx;
padding-left: 10rpx;
border-radius: 70rpx;
input {
width: 90%;
background: $color-bg;
font-size: $font-size-tag;
height: 100%;
padding: 0 25rpx 0 40rpx;
line-height: 50rpx;
border-radius: 40rpx;
}
text {
font-size: $font-size-toolbar;
color: $color-tip;
width: 80rpx;
text-align: center;
margin-right: 20rpx;
}
}
.category-wrap,
.list-style {
display: flex;
justify-content: center;
align-items: center;
.iconfont {
font-size: 50rpx;
color: $color-tip;
}
text {
display: block;
margin-top: 60rpx;
}
}
}
.sort-wrap {
display: flex;
padding: 10rpx 20rpx 10rpx 0;
> view {
flex: 1;
text-align: center;
font-size: $font-size-base;
height: 60rpx;
line-height: 60rpx;
font-weight: bold;
}
.comprehensive-wrap {
display: flex;
justify-content: center;
align-items: center;
.iconfont-wrap {
display: inline-block;
margin-left: 10rpx;
width: 40rpx;
.iconfont {
font-size: $font-size-toolbar;
line-height: 1;
margin-bottom: 5rpx;
}
}
}
.price-wrap {
display: flex;
justify-content: center;
align-items: center;
.iconfont-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 40rpx;
.iconfont {
position: relative;
float: left;
font-size: 32rpx;
line-height: 1;
height: 20rpx;
color: #909399;
&.asc {
top: -2rpx;
}
&.desc {
top: -6rpx;
}
}
}
}
.screen-wrap {
display: flex;
justify-content: center;
align-items: center;
.iconfont-wrap {
display: inline-block;
margin-left: 10rpx;
width: 40rpx;
.iconfont {
font-size: $font-size-toolbar;
line-height: 1;
}
}
}
}
}
.category-list-wrap {
height: 100%;
.class-box {
display: flex;
flex-wrap: wrap;
padding: 0 $padding;
view {
width: calc((100% - 60rpx) / 3);
font-size: $font-size-goods-tag;
margin-right: 20rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
margin-bottom: 12rpx;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: rgba(245, 245, 245, 1);
border-radius: 5rpx;
&:nth-of-type(3n) {
margin-right: 0;
}
}
}
.first {
font-size: $font-size-tag;
display: block;
// background: $page-color-base;
padding: 20rpx;
}
.second {
border-bottom: 2rpx solid $color-line;
padding: 20rpx;
display: block;
font-size: $font-size-tag;
}
.third {
padding: 0 20rpx 20rpx;
overflow: hidden;
font-size: $font-size-tag;
> view {
display: inline-block;
margin-right: 20rpx;
margin-top: 20rpx;
}
.uni-tag {
padding: 0 20rpx;
}
}
}
.screen-wrap {
.title {
font-size: $font-size-tag;
padding: $padding;
background: #f6f4f5;
}
scroll-view {
height: 85%;
.item-wrap {
border-bottom: 1px solid #f0f0f0;
.label {
font-size: $font-size-tag;
padding: $padding;
view {
display: inline-block;
font-size: 60rpx;
height: 40rpx;
vertical-align: middle;
line-height: 40rpx;
}
}
.list {
margin: $margin-updown $margin-both;
overflow: hidden;
> view {
display: inline-block;
margin-right: 25rpx;
margin-bottom: 25rpx;
}
.uni-tag {
padding: 0 $padding;
font-size: $font-size-goods-tag;
background: #f5f5f5;
height: 52rpx;
line-height: 52rpx;
border: 0;
}
}
.price-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: $padding;
input {
flex: 1;
background: #f5f5f5;
height: 52rpx;
width: 182rpx;
line-height: 50rpx;
font-size: $font-size-goods-tag;
border-radius: 50rpx;
text-align: center;
&:first-child {
margin-right: 10rpx;
}
&:last-child {
margin-left: 10rpx;
}
}
}
}
}
.footer {
height: 90rpx;
display: flex;
justify-content: center;
align-items: flex-start;
display: flex;
//position: absolute;
bottom: 0;
width: 100%;
.footer-box {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin: 0;
width: 40%;
}
.footer-box1 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin: 0;
width: 40%;
}
}
}
.safe-area {
bottom: 68rpx !important;
}
.empty {
margin-top: 100rpx;
}
.buy-num {
font-size: $font-size-activity-tag;
}
.icon {
width: 34rpx;
height: 30rpx;
}
.list-style-new {
display: flex;
align-items: center;
.line {
width: 4rpx;
height: 28rpx;
background-color: rgba(227, 227, 227, 1);
margin-right: 60rpx;
}
}
.h-line {
width: 37rpx;
height: 2rpx;
background-color: $color-tip;
}
.lineheight-clear {
}
// 商品列表单列样式
.goods-list.single-column {
display: none;
&.show {
display: block;
}
.goods-item {
padding: 26rpx;
background: #fff;
margin: $margin-updown $margin-both;
border-radius: $border-radius;
display: flex;
position: relative;
.goods-img {
position: relative;
width: 200rpx;
height: 200rpx;
// overflow: hidden;
border-radius: $border-radius;
margin-right: 20rpx;
overflow: hidden;
image {
width: 200rpx;
height: 200rpx;
}
}
.goods-tag {
color: #fff;
line-height: 1;
padding: 8rpx 12rpx;
position: absolute;
border-top-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
top: 0;
left: 0;
font-size: $font-size-goods-tag;
}
.goods-tag-img {
position: absolute;
border-top-left-radius: $border-radius;
width: 80rpx;
height: 80rpx;
top: 26rpx;
left: 26rpx;
z-index: 5;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-wrap {
flex: 1;
display: flex;
flex-direction: column;
}
.name-wrap {
flex: 1;
}
.goods-name {
font-size: $font-size-base;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.introduction {
line-height: 1;
margin-top: 10rpx;
}
.discount-price {
display: inline-block;
font-weight: bold;
line-height: 1;
margin-top: 16rpx;
.unit {
margin-right: 6rpx;
color: var(--price-color);
}
.price {
color: var(--price-color);
}
}
.pro-info {
display: flex;
margin-top: auto;
align-items: center;
position: relative;
.delete-price {
text-decoration: line-through;
font-size: $font-size-tag !important;
flex: 1;
.unit {
margin-right: 0;
}
}
.block-wrap {
flex: 1;
line-height: 1;
margin-right: 20rpx;
.sale {
font-size: $font-size-tag !important;
}
}
}
.member-price-tag {
display: inline-block;
width: 60rpx;
line-height: 1;
margin-left: 6rpx;
image {
width: 100%;
display: flex;
max-height: 30rpx;
}
}
.sell-out{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
text{
color: #fff;
font-size: 150rpx;
}
}
}
}
// 商品列表双列样式
.goods-list.double-column {
display: none;
margin: 0 24rpx;
padding-top: $margin-updown;
position: relative;
flex-wrap: wrap;
justify-content: space-between;
&.show {
display: flex;
}
.goods-item {
display: flex;
flex-direction: column;
width: calc(50% - 10rpx);
border-radius: $border-radius;
overflow: hidden;
background-color: #fff;
&:nth-child(2n + 2) {
margin-right: 0;
}
.goods-img {
position: relative;
overflow: hidden;
padding-top: 100%;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
image {
width: 100%;
position: absolute !important;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.goods-tag {
color: #fff;
line-height: 1;
padding: 8rpx 16rpx;
position: absolute;
border-bottom-right-radius: $border-radius;
top: 0;
left: 0;
font-size: $font-size-goods-tag;
}
.goods-tag-img {
position: absolute;
border-top-left-radius: $border-radius;
width: 80rpx;
height: 80rpx;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-wrap {
padding: 20rpx;
display: flex;
flex-direction: column;
flex: 1;
}
.goods-name {
font-size: $font-size-base;
line-height: 1.3;
margin-top: 20rpx;
}
.lineheight-clear {
margin-top: 16rpx;
}
.discount-price {
display: inline-block;
font-weight: bold;
line-height: 1;
.unit {
margin-right: 6rpx;
color: var(--price-color);
}
.price {
color: var(--price-color);
}
}
.pro-info {
display: flex;
margin-top: auto;
align-items: center;
.block-wrap {
flex: 1;
line-height: 1;
margin-right: 20rpx;
.sale {
font-size: $font-size-tag !important;
}
}
}
.delete-price {
// display: inline-block;
// margin-left: 6rpx;
// float: right;
.unit {
margin-right: 6rpx;
}
text {
line-height: 1;
font-size: $font-size-tag !important;
}
}
.member-price-tag {
display: inline-block;
width: 60rpx;
line-height: 1;
margin-left: 6rpx;
image {
width: 100%;
}
}
.sell-out{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
text{
color: #fff;
font-size: 250rpx;
}
}
}
}
.cart-action-wrap {
position: relative;
.shopping-cart-btn {
font-size: 36rpx;
border: 2rpx solid $base-color;
border-radius: 50%;
padding: 10rpx;
color: $base-color;
width: 36rpx;
height: 36rpx;
text-align: center;
line-height: 36rpx;
}
.plus-sign-btn {
font-size: 36rpx;
border: 2rpx solid $base-color;
border-radius: 50%;
padding: 10rpx;
color: $base-color;
width: 36rpx;
height: 36rpx;
text-align: center;
line-height: 36rpx;
}
.buy-btn {
background-color: $base-color;
color: var(--btn-text-color);
border-radius: 50rpx;
font-size: $font-size-tag;
padding: 12rpx 30rpx;
line-height: 1;
}
.icon-diy {
font-size: 80rpx;
}
}

952
pages_promotion/merch/public/edit.js Normal file
View File

@@ -0,0 +1,952 @@
// import {getGoodsInfoById,getCategoryTree,addGoods,editGoods,addVirtualGoods,editVirtualGoods,addVirtualCardGoods,editVirtualCardGoods} from '@/api/goods'
// import {getOrderFormList} from '@/api/form'
// import {getSupplyList} from '@/api/supply'
export default {
data() {
return {
repeatFlag: false,
isIphoneX: false,
goodsImgHeight: 165, // 商品图片高度
isAWait: false,
albumPage: 'goodsEdit',
//店内分类
shopCategoryNumber: 1,
shopCategoryData: {
store_0: {}
},
shopCategoryIndex: '',
categoryList: [],
secondCategory: [],
thirdCategory: [],
categoryId: [0, 0, 0],
categoryName: ['', '', ''],
currentLevel: 1,
lastLevel: 1,
showFisrt: true,
showSecond: false,
showThird: false,
goodsData: {
id: 0,//商品id
goodsname:'',//商品名称
subtitle:'',//商品简介
is_show_arrive:1,//默认商品预达简介0关闭1开启
diy_arrive_switch:0,//商品自定义预达简介0关闭1开启
goods_start_count:1,//起售数量
grounding:1,//0下架1上架
is_index_show:1,//0首页不推荐1推荐
price:0,//售价
productprice:0,//原价
costprice:0,//成本价
total:0,//库存
pick_up_type:0,//提货时,0当日达1次日达2隔日达3自定义
dispatchtype:1,//1统一运费
dispatchprice:0,//统一运费金额
begin_time:'',//团购开始时间
end_time:'',//团购结束时间
oneday_limit_count:0,//每天限购
one_limit_count:0,//单次限购
total_limit_count:0,//历史限购
is_all_sale:0,//所有团长1部分团长0
goods_image:[],
begin_time:'',//团购开始时间
end_time:''//团购结束时间
},
groundingArray: ['下架', '上架'],
pickuptypeArray: ['当日达', '次日达', '隔日达'],//, '自定义'
currCategory: 0, // 当前所设置的商品分类
virtualDeliverArray: [{
name: '自动发货',
value: 'auto_deliver',
},
{
name: '手动发货',
value: 'artificial_deliver',
},
{
name: '到店核销',
value: 'verify',
}
],
virtualDeliverValue: {
'auto_deliver': '自动发货',
'artificial_deliver': '手动发货',
'verify': '到店核销'
},
virtualReceiveArray: [{
name: '自动收货',
value: 'auto_receive',
},
{
name: '买家确认收货',
value: 'artificial_receive',
},
],
virtualReceiveValue: {
'auto_receive': '自动收货',
'artificial_receive': '买家确认收货',
},
validityTypeArray: ['永久', '购买后几日有效', '指定过期日期'],
virtualIndate: 0,
minDate: '',
carmiLength: '添加卡密',
limitLength: [ //限购
{
name: '单次限购',
value: '1'
},
{
name: '长期限购',
value: '2'
}
],
current: 0,
goodsFormArray: [],
goodsForm: [],
supplyFormArray: [],
supplyForm: []
};
},
async onLoad(option) {
this.goodsData.id = option.id || 0;
// if (!this.$util.checkToken('/pages/goods/edit/index?id=' + this.goodsData.id)) return;
// this.clearStoreage();
// this.getCategoryTreeFn();
if (this.goodsData.id) {
this.isAWait = true;
uni.setNavigationBarTitle({
title: '编辑商品'
});
await this.editGetGoodsInfo();
} else {
this.isAWait = false;
uni.setNavigationBarTitle({
title: '添加商品'
});
}
let date = new Date();
this.minDate = date.getFullYear() + '-' + date.getMonth() + '-' + date.getUTCDate();
// if (this.addonIsExit.form) this.getGoodsForm();
// if (this.addonIsExit.supply) this.getSupplyList();
},
onShow() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
//this.refreshData();
},
methods: {
groundingChange(e) {
this.goodsData.grounding = e.detail.value;
},
pickuptypeChange(e) {
this.goodsData.pick_up_type = e.detail.value;
},
// 获取编辑商品数据
async editGetGoodsInfo() {
this.$api.sendRequest({
url: 'app.getgoodsinfo',
data:{
id:this.goodsData.id
},
success: res => {
console.log(res)
if(res.result.detail){
this.goodsData = res.result.detail
console.log(this.goodsData.goods_image)
}else{
this.$util.showToast({
title: '商品不存在',
});
setTimeout(() => {
this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
}, 1000);
}
// if (res.status == 0) {
// setTimeout(() => {
// this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
// }, 1000);
// }
}
})
/*var res = await getGoodsInfoById(this.goodsData.goods_id);
if (res.code == 0 && res.data) {
var data = res.data;
data.goods_category.forEach((item, index) => {
this.shopCategoryData['store_' + index] = {
category_id: item.id,
category_name: item.category_name
}
})
this.shopCategoryNumber = data.goods_category.length;
// 商品分类
data.category_id = data.goods_category[0].id;
data.category_name = data.goods_category[0].category_name.replace(/\//g, " / ");
if (typeof data.category_id == 'string') {
this.categoryId = data.category_id.split(",");
this.categoryName = data.category_name.split(" / ");
} else {
this.categoryId = data.category_id;
this.categoryName = data.category_name;
}
delete data.category_json;
delete data.goods_category;
data.goods_image = data.goods_image.split(",");
data.goods_sku_data.forEach((item) => {
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
});
if (data.goods_spec_format) {
uni.setStorageSync("editGoodsSpecFormat", data.goods_spec_format);
uni.setStorageSync("editGoodsSkuData", JSON.stringify(data.goods_sku_data));
data.goods_spec_format = JSON.parse(data.goods_spec_format);
} else {
data.sku_id = data.goods_sku_data[0].sku_id;
data.price = data.goods_sku_data[0].price;
data.market_price = data.goods_sku_data[0].market_price;
data.cost_price = data.goods_sku_data[0].cost_price;
data.weight = data.goods_sku_data[0].weight;
data.volume = data.goods_sku_data[0].volume;
data.sku_no = data.goods_sku_data[0].sku_no;
}
if (data.goods_class == 1) {
// 实物商品
delete data.virtual_indate;
uni.setStorageSync("editGoodsShippingTemplateId", data.shipping_template);
uni.setStorageSync("editGoodsShippingTemplateName", data.template_name ? data.template_name : '');
} else {
// 虚拟商品
delete data.shipping_template;
delete data.is_free_shipping;
}
// 商品参数
if (data.goods_attr_format) {
uni.setStorageSync("editGoodsAttrClass", data.goods_attr_class);
uni.setStorageSync("editGoodsAttrName", data.goods_attr_name);
uni.setStorageSync("editGoodsAttrFormat", data.goods_attr_format);
data.goods_attr_format = JSON.parse(data.goods_attr_format);
}
uni.setStorageSync("editGoodsState", data.goods_state);
uni.setStorageSync("editGoodsContent", data.goods_content);
if (data.verify_validity_type == 1) {
this.virtualIndate = data.virtual_indate;
} else if (data.verify_validity_type == 2) {
this.virtualTime = this.$util.timeStampTurnTime(data.virtual_indate, 'Y-m-d');
}
data.verify_num = data.goods_sku_data[0].verify_num
this.goodsData = data;
this.goodsData.goods_form_index = 0;
this.goodsData.supply_index = 0;
this.$forceUpdate();
} else {
this.$util.showToast({
title: '商品不存在',
});
setTimeout(() => {
this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
}, 1000);
}*/
},
// 选择商品分类
openGoodsCategoryPop(index) {
this.currCategory = index;
if (this.shopCategoryData['store_' + index].category_id) {
this.categoryId = this.shopCategoryData['store_' + index].category_id.split(',');
this.categoryName = this.shopCategoryData['store_' + index].category_name.split(' / ');
this.categoryList.forEach((item, index) => {
item.selected = this.categoryId.indexOf(item.category_id.toString()) != -1;
if (item.selected) {
this.secondCategory = item.child_list;
}
if (item.child_list) {
if (item.selected) this.lastLevel = 2;
item.child_list.forEach(secondItem => {
secondItem.selected = this.categoryId.indexOf(secondItem.category_id.toString()) != -1;
if (secondItem.selected) {
this.thirdCategory = secondItem.child_list;
}
});
}
});
this.changeShow(this.categoryId.length);
} else {
this.categoryId = [0];
this.categoryName = [''];
this.changeShow(1);
}
this.$refs.categoryPopup.open();
},
closeGoodsCategoryPop() {
this.$refs.categoryPopup.close();
},
// 编辑规格类型
openGoodsSpec() {
this.$util.redirectTo('/pages/goods/edit/spec');
},
// 编辑多规格
openGoodsSpecEdit() {
this.$util.redirectTo('/pages/goods/edit/spec_edit', {
goods_class: this.goodsData.goods_class,
virtual_deliver_type: this.goodsData.virtual_deliver_type
});
},
//编辑卡密
openCarmichaelEdit() {
this.$util.redirectTo('/pages/goods/edit/carmichael_edit', {
goods_class: this.goodsData.goods_class
});
},
// 编辑商品状态
openGoodsState() {
this.$util.redirectTo('/pages/goods/edit/state', {
goods_state: this.goodsData.goods_state
});
},
// 编辑快递运费
openExpressFreight() {
this.$util.redirectTo('/pages/goods/edit/express_freight', {
template_id: this.goodsData.shipping_template
});
},
// 编辑商品详情
openGoodsContent() {
this.$util.redirectTo('/pages/goods/edit/content');
},
// 编辑商品参数
openAttr() {
this.$util.redirectTo('/pages/goods/edit/attr');
},
/**
* 刷新商品图片高度
* @param {Object} data
*/
refreshGoodsImgHeight(data) {
if (data.height == '') return;
var height = parseFloat(data.height.replace('px', ''));
this.goodsImgHeight = height + 80;
this.$forceUpdate();
if (data.isLoad && this.$refs.loadingCover) {
// 数据渲染留点时间
setTimeout(() => {
this.$refs.loadingCover.hide();
}, 100);
}
uni.removeStorageSync("selectedAlbumImg");
},
// 获取商品分类树状结构
getCategoryTreeFn() {
getCategoryTree().then(res=>{
if (res.data) {
this.categoryList = res.data;
this.categoryList.forEach((item, index) => {
item.selected = this.categoryId.indexOf(item.category_id.toString()) != -1;
if (item.selected) {
this.secondCategory = item.child_list;
this.currentLevel = 1;
}
if (item.child_list) {
if (item.selected) this.lastLevel = 2;
item.child_list.forEach(secondItem => {
secondItem.selected = this.categoryId.indexOf(secondItem.category_id.toString()) != -1;
if (secondItem.selected) {
this.thirdCategory = secondItem.child_list;
this.currentLevel = 2;
}
if (secondItem.child_list) {
if (secondItem.selected) this.lastLevel = 3;
secondItem.child_list.forEach(thirdItem => {
thirdItem.selected = this.categoryId.indexOf(thirdItem.category_id.toString()) != -1;
if (thirdItem.selected) this.currentLevel = 3;
});
}
});
}
});
this.changeShow(this.lastLevel);
if (this.goodsData.goods_id == 0 && this.$refs.loadingCover) {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
}
});
},
changeShow(index) {
if (index == 1) {
this.showFisrt = true;
this.showSecond = false;
this.showThird = false;
} else if (index == 2) {
this.showFisrt = false;
this.showSecond = true;
this.showThird = false;
} else if (index == 3) {
this.showFisrt = false;
this.showSecond = false;
this.showThird = true;
}
this.currentLevel = index;
this.$forceUpdate();
},
selectCategory(category) {
this.currentLevel = category.level;
// 如果当前选中跟上次不一样,则 要清空下级数据
if (category.level == 1 && this.categoryId[0] > 0 && this.categoryId[0] != category.captcha_id) {
this.categoryId[1] = 0;
this.categoryName[1] = '';
this.categoryId[2] = 0;
this.categoryName[2] = '';
} else if (category.level == 2 && this.categoryId[1] > 0 && this.categoryId[1] != category.captcha_id) {
this.categoryId[2] = 0;
this.categoryName[2] = '';
}
this.categoryId[category.level - 1] = category.category_id;
this.categoryName[category.level - 1] = category.category_name;
if (category.level == 1) {
if (category.child_list) {
this.secondCategory = category.child_list;
} else {
this.categoryId[1] = 0;
this.categoryName[1] = '';
this.categoryId[2] = 0;
this.categoryName[2] = '';
}
} else if (category.level == 2) {
if (category.child_list) {
this.thirdCategory = category.child_list;
} else {
this.categoryId[2] = 0;
this.categoryName[2] = '';
}
}
this.lastLevel = 1;
this.categoryList.forEach((item, index) => {
item.selected = this.categoryId[0] == item.category_id;
if (item.child_list) {
if (item.selected) this.lastLevel = 2;
item.child_list.forEach((secondItem, secondIndex) => {
secondItem.selected = this.categoryId[1] == secondItem.category_id;
if (secondItem.child_list) {
if (secondItem.selected) this.lastLevel = 3;
}
});
}
});
this.changeShow(this.lastLevel);
this.goodsData.category_id = [];
this.goodsData.category_name = [];
for (var i = 0; i < this.categoryId.length; i++) {
if (this.categoryId[i]) this.goodsData.category_id.push(this.categoryId[i]);
}
for (var i = 0; i < this.categoryName.length; i++) {
if (this.categoryName[i]) this.goodsData.category_name.push(this.categoryName[i]);
}
this.goodsData.category_id = this.goodsData.category_id.toString();
this.goodsData.category_name = this.goodsData.category_name.join(" / ");
if (
(this.lastLevel == 3 && this.categoryId[2]) ||
(this.lastLevel == 2 && this.categoryId[1]) ||
(this.lastLevel == 1 && this.categoryId[0])
) {
this.shopCategoryData['store_' + this.currCategory] = {
category_id: this.goodsData.category_id,
category_name: this.goodsData.category_name
};
this.closeGoodsCategoryPop();
}
this.$forceUpdate();
},
addShopCategory() {
if (this.shopCategoryNumber == 10) {
this.$util.showToast({
title: '商品可以属于多个分类，最多10个'
});
return;
}
this.shopCategoryData['store_' + this.shopCategoryNumber] = {};
++this.shopCategoryNumber;
},
deleteShopCategory(index) {
delete this.shopCategoryData['store_' + index];
--this.shopCategoryNumber;
//重置数据
let i = 0;
let obj = {};
for (let key in this.shopCategoryData) {
obj['store_' + i] = this.shopCategoryData[key];
i++;
}
this.shopCategoryData = {};
this.shopCategoryData = Object.assign(this.shopCategoryData, obj);
},
// 刷新数据
refreshData() {
var selectedAlbumImg = uni.getStorageSync('selectedAlbumImg');
if (selectedAlbumImg) {
uni.setStorageSync('selectedAlbumImgTemp', selectedAlbumImg);
selectedAlbumImg = JSON.parse(selectedAlbumImg);
this.goodsData.goods_image = selectedAlbumImg.list.split(",");
this.$refs.goodsShmilyDragImg.refresh();
}
// 规格项
this.goodsData.goods_spec_format = uni.getStorageSync('editGoodsSpecFormat') ? JSON.parse(uni.getStorageSync('editGoodsSpecFormat')) : [];
if (this.goodsData.goods_spec_format.length <= 0) {
this.goodsData.carmichael = uni.getStorageSync('editGoodsCarmichael') ? JSON.parse(uni.getStorageSync('editGoodsCarmichael')) : [];
if (this.goodsData.carmichael.length > 0) {
this.carmiLength = '添加卡密【' + this.goodsData.carmichael.length + '】'
}
}
// 多规格数据
this.goodsData.goods_sku_data = uni.getStorageSync('editGoodsSkuData') ? JSON.parse(uni.getStorageSync('editGoodsSkuData')) : [];
if (this.goodsData.goods_sku_data.length > 0) {
this.goodsData.goods_stock = 0;
this.goodsData.goods_stock_alarm = 0;
this.goodsData.goods_sku_data.forEach((item) => {
if (item.stock) this.goodsData.goods_stock += parseInt(item.stock);
if (item.stock_alarm) this.goodsData.goods_stock_alarm += parseInt(item.stock_alarm);
});
}
// 快递运费
this.goodsData.shipping_template = uni.getStorageSync('editGoodsShippingTemplateId') || 0;
this.goodsData.is_free_shipping = this.goodsData.shipping_template > 0 ? 0 : 1;
this.goodsData.template_name = uni.getStorageSync('editGoodsShippingTemplateName') || '';
if (uni.getStorageSync('editGoodsState') !== undefined && uni.getStorageSync('editGoodsState') !== '') {
this.goodsData.goods_state = uni.getStorageSync('editGoodsState');
}
if (uni.getStorageSync('editGoodsContent') != undefined && uni.getStorageSync('editGoodsContent') != '') {
this.goodsData.goods_content = uni.getStorageSync('editGoodsContent');
}
// 商品参数
this.goodsData.goods_attr_class = uni.getStorageSync('editGoodsAttrClass') || 0;
this.goodsData.goods_attr_name = uni.getStorageSync('editGoodsAttrName') || '';
this.goodsData.goods_attr_format = uni.getStorageSync('editGoodsAttrFormat') ? JSON.parse(uni.getStorageSync('editGoodsAttrFormat')) : [];
this.$forceUpdate();
},
// 验证
verify() {
if (this.goodsData.goodsname.length == 0) {
this.$util.showToast({
title: '请输入商品名称'
});
return false;
}
if (this.goodsData.subtitle.length > 100) {
this.$util.showToast({
title: '商品简介不能超过100个字符'
});
return false;
}
if (this.goodsData.goods_image.length == 0) {
this.$util.showToast({
title: '请上传商品图片'
});
return false;
}
// if (!this.shopCategoryData.store_0.category_id) {
// this.$util.showToast({
// title: `请选择商品分类`
// });
// return false;
// }
// if (this.goodsData.goods_class == 2 && this.goodsData.virtual_deliver_type == 'verify') {
// if (this.goodsData.verify_validity_type == 1) {
// if (this.virtualIndate.length == 0) {
// this.$util.showToast({
// title: '请输入有效期'
// });
// return false;
// }
// if (isNaN(this.virtualIndate) || !this.$util.data().regExp.number.test(this.virtualIndate)) {
// this.$util.showToast({
// title: '[有效期]格式输入错误'
// });
// return false;
// }
// if (this.virtualIndate < 1) {
// this.$util.showToast({
// title: '有效期不能小于1天'
// });
// return false;
// }
// }
// if (this.goodsData.verify_validity_type == 2) {
// if (this.virtualTime.length == 0) {
// this.$util.showToast({
// title: '请设置有效期'
// });
// return false;
// }
// }
// }
// 单规格
if (this.goodsData.price == 0) {
this.$util.showToast({
title: '请输入销售价'
});
return false;
}
if (isNaN(this.goodsData.price) || !this.$util.data().regExp.digit.test(this.goodsData.price)) {
this.$util.showToast({
title: '[销售价]格式输入错误'
});
return false;
}
if (this.goodsData.productprice.length > 0 && (isNaN(this.goodsData.productprice) || !this.$util.data().regExp.digit.test(this.goodsData.productprice))) {
this.$util.showToast({
title: '[原价价]格式输入错误'
});
return false;
}
// 总库存
if (this.goodsData.total == 0) {
this.$util.showToast({
title: '请输入库存'
});
return false;
}
if (isNaN(this.goodsData.total) || !this.$util.data().regExp.number.test(this.goodsData.total)) {
this.$util.showToast({
title: '[库存]格式输入错误'
});
return false;
}
if (isNaN(this.goodsData.goods_start_count) || !this.$util.data().regExp.number.test(this.goodsData.goods_start_count)) {
this.$util.showToast({
title: '[起售]格式输入错误'
});
return false;
}
if (this.goodsData.goods_start_count < 0) {
this.$util.showToast({
title: '起售数量不能小于0'
});
return false;
}
return true;
},
// 删除本地缓存
clearStoreage() {
// 临时选择的商品图片
uni.removeStorageSync("selectedAlbumImg");
uni.removeStorageSync("selectedAlbumImgTemp");
// 商品规格
uni.removeStorageSync("editGoodsSpecFormat");
uni.removeStorageSync("editGoodsSkuData");
//电子卡密
uni.removeStorageSync("editGoodsCarmichael");
uni.removeStorageSync("specName");
// 物流公司
uni.removeStorageSync("editGoodsShippingTemplateId");
uni.removeStorageSync("editGoodsShippingTemplateName");
// 商品状态
uni.removeStorageSync("editGoodsState");
// 商品详情
uni.removeStorageSync("editGoodsContent");
// 商品参数
uni.removeStorageSync("editGoodsAttrClass");
uni.removeStorageSync("editGoodsAttrName");
uni.removeStorageSync("editGoodsAttrFormat");
},
save() {
if (!this.verify()) return;
if (this.repeatFlag) return;
this.repeatFlag = true;
this.$api.sendRequest({
url: 'app.addgoods',
data:this.goodsData,
success: res => {
this.$util.showToast({
title: res.result.message
});
if (res.status == 1) {
setTimeout(() => {
this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
}, 1000);
} else {
this.repeatFlag = false;
}
}
})
// 清空规格的图片
console.log(this.goodsData)
return false
for (var i = 0; i < this.goodsData.goods_sku_data.length; i++) {
if (this.goodsData.goods_sku_data[i].sku_images.length == 0) this.goodsData.goods_sku_data[i].sku_image = '';
}
var data = JSON.parse(JSON.stringify(this.goodsData));
delete data.category_name;
data.category_json = [];
data.category_id = '';
for (var key in this.shopCategoryData) {
if (this.shopCategoryData[key].category_id) {
data.category_id += ',' + this.shopCategoryData[key].category_id;
data.category_json.push(this.shopCategoryData[key].category_id);
}
}
data.category_id += ',';
data.category_json = JSON.stringify(data.category_json);
if (data.goods_spec_format.length == 0) {
// 单规格数据
var singData = {
sku_id: (data.goods_id ? data.sku_id : 0),
sku_name: data.goods_name,
spec_name: '',
sku_no: data.sku_no,
sku_spec_format: '',
price: data.price,
market_price: data.market_price,
cost_price: data.cost_price,
stock: data.goods_stock,
stock_alarm: data.goods_stock_alarm,
weight: data.weight,
volume: this.goodsData.volume,
sku_image: data.goods_image[0],
sku_images: data.goods_image.toString(),
// verify_num: data.goods_sku_data.length > 0 ? data.goods_sku_data[0].verify_num : this.goodsData.verify_num
verify_num: data.verify_num
}
var singleSkuData = JSON.stringify([singData]);
}
data.goods_image = data.goods_image.toString();
// 商品规格json格式
data.goods_spec_format = data.goods_spec_format.length > 0 ? JSON.stringify(data.goods_spec_format) : '';
// SKU商品数据
data.goods_sku_data = data.goods_spec_format.length > 0 ? JSON.stringify(data.goods_sku_data) :
singleSkuData;
// 商品参数json格式
data.goods_attr_format = data.goods_attr_format.length > 0 ? JSON.stringify(data.goods_attr_format) : '';
data.spec_type_status = data.goods_spec_format.length > 0 ? 1 : 0;
if (this.goodsData.verify_validity_type == 1) {
data.virtual_indate = this.virtualIndate;
} else if (this.goodsData.verify_validity_type == 2) {
data.virtual_indate = this.virtualTime;
}
// console.log(this.goodsData.goods_spec_format,'format')
// if(this.goodsData.goods_spec_format == '[]'){
// data.carmichael= data.carmichael
// }
var save = null;
if (data.goods_class == 3) {
save = addVirtualCardGoods;
if (data.goods_id) save = editVirtualCardGoods;
}else if (data.goods_class == 2){
save = addVirtualGoods;
if (data.goods_id) save = editVirtualGoods;
}else {
save = addGoods;
if (data.goods_id) save = editGoods;
}
data.goods_form = this.goodsData.goods_form_index ? this.goodsForm[this.goodsData.goods_form_index - 1].id : 0;
data.supplier_id = this.goodsData.supply_index ? this.supplyForm[this.goodsData.supply_index - 1].supplier_id : 0;
if (this.repeatFlag) return;
this.repeatFlag = true;
save(data).then(res=>{
this.$util.showToast({
title: res.message
});
if (res.code == 0) {
this.clearStoreage();
setTimeout(() => {
this.$util.redirectTo('/pages/goods/list', {}, 'tabbar');
}, 1000);
} else {
this.repeatFlag = false;
}
});
},
//是否开启限购
onLimit() {
this.goodsData.is_limit = this.goodsData.is_limit == 1 ? 0 : 1
},
//限购类型
limitChange(e) {
this.goodsData.limit_type = e
},
/**
* 是否参与会员折扣
*/
joinMemberDiscount() {
this.goodsData.is_consume_discount = this.goodsData.is_consume_discount == 1 ? 0 : 1;
},
switchBtn(type) {
this.goodsData[type] = this.goodsData[type] == 1 ? 0 : 1;
},
/**
* 推荐方式选择
* @param {Object} e
*/
recommendWayChange(e) {
this.goodsData.recommend_way = e.detail.value;
},
/**
* 发货选择
* @param {Object} e
*/
virtualDeliverTypeChange(e) {
this.goodsData.virtual_deliver_type = this.virtualDeliverArray[e.detail.value]['value'];
},
/**
* 收货选择
* @param {Object} e
*/
virtualReceiveTypeChange(e) {
this.goodsData.virtual_receive_type = this.virtualReceiveArray[e.detail.value]['value'];
},
/**
* 核销有效期类型
* @param {Object} e
*/
validityTypeChange(e) {
this.goodsData.verify_validity_type = e.detail.value;
},
/**
* 核销有效期选择
* @param {Object} e
*/
virtualTimeChange(e) {
this.virtualTime = e.detail.value;
},
/**
* 团购开始时间选择
* @param {Object} e
*/
beginChange(e) {
this.goodsData.begin_time = e.detail.value;
},
/**
* 团购结束时间选择
* @param {Object} e
*/
endChange(e) {
this.goodsData.end_time = e.detail.value;
},
/**
* 是否需要核销
*/
isNeedVerify() {
this.goodsData.is_need_verify = this.goodsData.is_need_verify == 1 ? 0 : 1;
},
/**
* 获取商品表单
*/
getGoodsForm() {
getOrderFormList().then(res=>{
if (res.data) {
let goodsForm = ['请选择商品表单'];
res.data.forEach((item, index) => {
goodsForm.push(item.form_name);
if (this.goodsData.form_id && this.goodsData.form_id == item.id) this.goodsData.goods_form_index = index + 1;
})
this.goodsForm = res.data;
this.goodsFormArray = goodsForm;
this.$forceUpdate();
}
})
},
goodsFormChange(e) {
this.goodsData.goods_form_index = e.detail.value;
this.$forceUpdate();
},
/**
* 获取供应商
*/
getSupplyList() {
getSupplyList().then(res=>{
if (res.data) {
let supplyForm = ['请选择供应商'];
res.data.forEach((item, index) => {
supplyForm.push(item.title);
if (this.goodsData.supplier_id && this.goodsData.supplier_id == item.supplier_id) this.goodsData.supply_index = index + 1;
})
this.supplyForm = res.data;
this.supplyFormArray = supplyForm;
this.$forceUpdate();
}
})
},
supplyChange(e) {
this.goodsData.supply_index = e.detail.value;
this.$forceUpdate();
}
}
};

275
pages_promotion/merch/public/edit.scss Normal file
View File

@@ -0,0 +1,275 @@
.container{
padding-bottom: 40rpx;
}
.safe-area{
padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}
.goods-edit-wrap {
margin-bottom: 160rpx;
}
.form-title {
display: flex;
justify-content: space-between;
margin: $margin-updown $margin-both;
// padding: 0 $padding;
color: $color-tip;
}
.item-wrap uni-radio .uni-radio-input {
width: 30rpx !important;
height: 30rpx !important;
}
.item-wrap {
background: #fff;
// padding: $padding;
margin-top: $margin-updown;
.goods-type {
display: flex;
margin: 0 40rpx $margin-updown 40rpx;
flex-wrap: wrap;
view {
flex: 1;
text-align: center;
border: 1px solid $color-disabled;
color: $color-tip;
margin-right: 40rpx;
margin-top: 30rpx;
position: relative;
height: 80rpx;
line-height: 80rpx;
white-space: nowrap;
min-width: calc((100% - 100rpx) / 3);
max-width: calc((100% - 100rpx) / 3);
&:nth-child(3n+3) {
margin-right: 0;
}
.iconfont {
display: none;
}
&.selected {
.iconfont {
display: block;
position: absolute;
bottom: -22rpx;
right: -22rpx;
font-size: 80rpx;
}
}
}
}
.form-wrap {
display: flex;
align-items: center;
margin: 0 $margin-both;
border-bottom: 1px solid $color-line;
height: 100rpx;
line-height: 100rpx;
&:last-child {
border-bottom: none;
}
.required {
font-weight: bold;
}
.label {
vertical-align: middle;
margin-right: $margin-both;
}
input {
vertical-align: middle;
display: inline-block;
flex: 1;
text-align: right;
}
&.more-wrap {
.selected {
vertical-align: middle;
display: inline-block;
flex: 1;
text-align: right;
color: $color-tip;
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
&.have {
color: $color-title;
}
}
.iconfont {
color: $color-tip;
margin-left: 20rpx;
}
.action {
background-color: $color-disabled;
border-radius: 50%;
color: #fff;
width: 36rpx;
height: 36rpx;
line-height: 36rpx;
display: inline-block;
text-align: center;
font-weight: bold;
margin-right: 20rpx;
}
}
&.goods-img {
height: 200rpx;
line-height: 200rpx;
display: block;
position: relative;
.label{
display: inline-block;
}
.img-list {
position: absolute;
width: 80%;
top: 0;
left: 100rpx;
margin-top: 40rpx;
margin-left: 40rpx;
}
.tips {
color: $color-tip;
font-size: $font-size-activity-tag;
margin-top: 20rpx;
}
}
.unit {
margin-left: 20rpx;
width: 40rpx;
}
&.join-member-discount {
.label{
flex: 1;
}
}
&.validity-type {
border-bottom: 1px solid $color-line!important;
}
}
}
.footer-wrap {
position: fixed;
width: 100%;
bottom: 0;
padding: 40rpx 0;
z-index: 10;
background-color: #fff;
}
.popup {
width: 100vw;
background: #fff;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
.popup-header {
display: flex;
border-bottom: 2rpx solid $color-line;
position: relative;
padding: 40rpx;
.tit {
flex: 1;
font-size: $font-size-toolbar;
line-height: 1;
text-align: center;
}
.iconfont {
line-height: 1;
position: absolute;
right: 30rpx;
top: 50%;
transform: translate(0, -50%);
color: $color-tip;
font-size: $font-size-toolbar;
}
}
.popup-body {
height: calc(100% - 250rpx);
&.safe-area {
height: calc(100% - 270rpx);
}
}
&.category {
height: 50vh;
.popup-header {
border-bottom: none;
}
.popup-body {
padding: 0 30rpx;
.nav {
border-bottom: 2rpx solid $color-line;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text {
padding: 0 0 20rpx 0;
margin-right: 20rpx;
display: inline-block;
&:last-child {
padding-right: 0;
}
&.selected {
border-bottom: 2px solid;
}
}
}
.category {
height: 100%;
.item {
display: block;
margin: 20rpx 0 0;
text {
&:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
width: 90%;
display: inline-block;
vertical-align: middle;
}
}
.iconfont {
float: right;
}
}
.child-item{
display: flex;
justify-content: space-between;
margin-left: 40rpx;
}
}
}
}
&.choose-picture {
background-color: $color-bg;
.popup-header {
border-bottom: none;
background-color: #fff;
}
.popup-body {
background-color: $color-bg;
height: initial;
.select-wrap{
background-color: #fff;
padding: 0 30rpx;
}
.item {
text-align: center;
padding: 20rpx;
background-color: #fff;
border-bottom: 1px solid $color-line;
&:last-child {
border-bottom: none;
}
&.cancle {
margin-top: 20rpx;
}
}
}
}
}

475
pages_promotion/merch/public/js/list.js Normal file
View File

@@ -0,0 +1,475 @@
export default {
data() {
return {
listStyle: '',
loadingType: 'loading', //加载更多状态
orderType: '',
priceOrder: 'desc', //1 价格从低到高 2价格从高到低
categoryList: [], //排序类型
goodsList: [],
order: '',
sort: 'desc',
showScreen: false,
keyword: '',
categoryId: 0,
minPrice: '',
maxPrice: '',
isFreeShipping: false, //是否免邮
isIphoneX: false,
coupon: 0,
emptyShow: false,
isList: true, //列表样式
//分享所需标题
share_title: '',
//搜索到多少件商品
count: 0,
//当前分类名称
category_title: '',
//优惠券数据
coupon_name: '',
//列表瀑布流数据
listHeight: [],
listPosition: [],
debounce: null,
brandId: 0,
merch_id:0,
merch:{},
brandList: [], //品牌筛选项
config: {
fontWeight: false,
padding: 0,
cartEvent: "detail",
text: "购买",
textColor: "#FFFFFF",
theme: "default",
aroundRadius: 25,
control: true,
bgColor: "#FF6A00",
style: "button",
iconDiy: {
iconType: "icon",
icon: "",
style: {
fontSize: "60",
iconBgColor: [],
iconBgColorDeg: 0,
iconBgImg: "",
bgRadius: 0,
iconColor: [
"#000000"
],
iconColorDeg: 0
}
}
},
}
},
onLoad(options) {
this.categoryId = options.category_id || 0;
this.keyword = options.keyword || '';
this.coupon = options.coupon || 0;
this.goods_id_arr = options.goods_id_arr || 0;
this.brandId = options.brand_id || 0;
this.merch_id = options.merch_id || 0;
if(this.merch_id > 0){
this.getMerch()
}else{
uni.showModal({
title:'提示',
content:'商家不存在',
showCancel:false,
success(e){
uni.navigateBack({})
}
})
}
this.loadCategoryList(this.categoryId);
this.getBrandList();
this.isIphoneX = this.$util.uniappIsIPhoneX();
//小程序分享接收source_member
if (options.source_member) {
uni.setStorageSync('source_member', options.source_member);
}
// 小程序扫码进入，接收source_member
if (options.scene) {
var sceneParams = decodeURIComponent(options.scene);
sceneParams = sceneParams.split('&');
if (sceneParams.length) {
sceneParams.forEach(item => {
if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
});
}
}
uni.onWindowResize(res => {
if (this.debounce) clearTimeout(this.debounce);
this.waterfallflow(0);
})
},
onShow() {
//记录分享关系
if (this.storeToken && uni.getStorageSync('source_member')) {
this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
},
/**
* 转发分享
*/
onShareAppMessage(res) {
var title = '搜索到' + this.count + '件“' + this.keyword + this.category_title + this.coupon_name + '”相关的优质商品';
let route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
var path = route.path;
return {
title: title,
path: path,
success: res => {
},
fail: res => {
}
};
},
// 分享到微信朋友圈
onShareTimeline() {
var title = '搜索到' + this.count + '件“' + this.keyword + this.category_title + this.coupon_name + '”相关的优质商品';
let route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
var query = route.query;
return {
title: title,
query: query,
imageUrl: ''
};
},
methods: {
getMerch(){
this.$api.sendRequest({
url: '/merch/api/merch/merchinfo',
data: {
merch_id:this.merch_id
},
success: res => {
console.log(res)
this.merch = res.data
}
});
},
/**
* 获取优惠券数据
*/
couponInfo(id) {
return new Promise(resolve => {
this.$api.sendRequest({
url: '/coupon/api/coupon/typeinfo',
data: {
coupon_type_id: id
},
success: res => {
if (res.code >= 0) {
resolve(res.data.coupon_name);
}
}
});
})
},
/**
* 获取分类名称
*/
share_select(data, id) {
return new Promise((resolve) => {
data.forEach((item) => {
if (item.category_id == id) {
resolve(item.category_name)
}
if (item.child_list && item.child_list.length > 0) {
item.child_list.forEach((v) => {
if (v.category_id == id) {
resolve(v.category_name)
}
if (v.child_list && v.child_list.length > 0) {
v.forEach((m) => {
if (m.category_id == id) {
resolve(m.category_name)
}
})
}
})
}
})
})
},
//加载分类
loadCategoryList(fid, sid) {
this.$api.sendRequest({
url: '/api/goodscategory/tree',
data: {},
success: res => {
if (res.data != null) {
this.categoryList = res.data
}
}
});
},
getGoodsList(mescroll) {
this.$api.sendRequest({
url: '/api/goodssku/page',
data: {
page: mescroll.num,
page_size: mescroll.size,
keyword: this.keyword,
category_id: this.categoryId,
brand_id: this.brandId,
min_price: this.minPrice,
max_price: this.maxPrice,
is_free_shipping: (this.isFreeShipping ? 1 : 0),
order: this.order,
sort: this.sort,
coupon: this.coupon,
goods_id_arr: this.goods_id_arr,
merch_id:this.merch_id
},
success: res => {
let newArr = []
let msg = res.message;
if (res.code == 0 && res.data) {
this.count = res.data.count;
if (res.data.page_count == 0) {
this.emptyShow = true
}
newArr = res.data.list;
newArr = newArr.map(item => {
item.id = this.genNonDuplicate();
return item;
});
} else {
this.$util.showToast({
title: msg
})
}
this.category_title = '';
this.coupon_name = '';
if (res.data.config) this.config = res.data.config;
if (this.categoryId) {
this.share_select(this.categoryList, this.categoryId).then(resolve => {
this.category_title = resolve
});
}
if (this.coupon) {
this.couponInfo(this.coupon).then(resolve => {
this.coupon_name = resolve
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
this.goodsList = this.goodsList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
this.waterfallflow((mescroll.num - 1) * 10);
},
fail: res => {
//联网失败的回调
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
changeListStyle() {
this.isList = !this.isList;
this.waterfallflow(0);
},
//筛选点击
sortTabClick(tag) {
if (tag == 'sale_num') {
this.order = 'sale_num';
this.sort = 'desc';
} else if (tag == 'discount_price') {
this.order = 'discount_price';
this.sort = 'desc';
} else if (tag == 'screen') {
//筛选
this.showScreen = true;
return;
} else {
this.order = '';
this.sort = '';
}
if (this.orderType === tag && tag !== 'discount_price') return;
this.orderType = tag;
if (tag === 'discount_price') {
this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
this.sort = this.priceOrder;
} else {
this.priceOrder = '';
}
this.emptyShow = false;
this.goodsList = [];
this.$refs.mescroll.refresh();
},
//商品详情
toDetail(item) {
this.$util.redirectTo('/pages/goods/detail', {
goods_id: item.goods_id
});
},
search() {
this.emptyShow = false;
this.goodsList = [];
this.$refs.mescroll.refresh();
},
selectedCategory(categoryId) {
this.categoryId = categoryId;
},
screenData() {
if (this.minPrice != '' || this.maxPrice != '') {
// if (!Number(this.minPrice) && this.minPrice) {
// this.$util.showToast({
// title: '请输入最低价'
// });
// return;
// }
if (!Number(this.maxPrice) && this.maxPrice) {
this.$util.showToast({
title: '请输入最高价'
});
return;
}
if (Number(this.minPrice) < 0 || Number(this.maxPrice) < 0) {
this.$util.showToast({
title: '筛选价格不能小于0'
});
return;
}
if (this.minPrice != '' && Number(this.minPrice) > Number(this.maxPrice) && this.maxPrice) {
this.$util.showToast({
title: '最低价不能大于最高价'
});
return;
}
if (this.maxPrice != '' && Number(this.maxPrice) < Number(this.minPrice)) {
this.$util.showToast({
title: '最高价不能小于最低价'
});
return;
}
}
this.emptyShow = false;
this.goodsList = [];
this.$refs.mescroll.refresh();
this.showScreen = false;
},
//重置数据
resetData() {
this.categoryId = 0
this.minPrice = ''
this.maxPrice = ''
this.isFreeShipping = false
},
goodsImg(imgStr) {
let imgs = imgStr.split(',');
return imgs[0] ? this.$util.img(imgs[0], {
size: 'mid'
}) : this.$util.getDefaultImage().goods;
},
imgError(index) {
this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
},
showPrice(data) {
let price = data.discount_price;
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
return price;
},
showMarketPrice(item) {
if (item.market_price_show) {
let price = this.showPrice(item);
if (item.market_price > 0) {
return item.market_price;
} else if (parseFloat(item.price) > parseFloat(price)) {
return item.price;
}
}
return '';
},
goodsTag(data) {
return data.label_name || '';
},
/**
* 瀑布流
*/
waterfallflow(start = 0) {
if (!this.isList) {
//页面渲染完成后的事件
this.$nextTick(() => {
setTimeout(() => {
let listHeight = [];
let listPosition = [];
if (start != 0) {
listHeight = this.listHeight;
listPosition = this.listPosition;
}
let column = 2;
const query = uni.createSelectorQuery().in(this);
query.selectAll('.double-column .goods-item').boundingClientRect(data => {
for (let i = start; i < data.length; i++) {
if (i < column) {
let position = {};
position.top = uni.upx2px(20) + 'px';
if (i % column == 0) {
position.left = data[i].width * i + "px";
} else {
position.left = data[i].width * i + (i % column * uni
.upx2px(30)) + "px";
}
listPosition[i] = position;
listHeight[i] = data[i].height + uni.upx2px(20);
} else {
let minHeight = Math.min(...listHeight); // 找到第一列的最小高度
let minIndex = listHeight.findIndex(item => item === minHeight) // 找到最小高度的索引
//设置当前子元素项的位置
let position = {};
position.top = minHeight + uni.upx2px(20) + "px";
position.left = listPosition[minIndex].left;
listPosition[i] = position;
//重新定义数组最小项的高度 进行累加
listHeight[minIndex] += data[i].height + uni.upx2px(20);
}
}
this.listHeight = listHeight;
this.listPosition = listPosition;
}).exec();
}, 50)
})
}
},
getBrandList() {
var data = {
page: 1,
page_size: 0
};
this.$api.sendRequest({
url: '/api/goodsbrand/page',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.brandList = data.list;
}
}
});
},
/**
* 添加购物车回调
*/
addCart(id) {
},
genNonDuplicate(len = 6) {
return Number(Math.random().toString().substr(3, len) + Date.now()).toString(36);
}
}
}

308
pages_promotion/merch/public/list.scss Normal file
View File

@@ -0,0 +1,308 @@
page {
overflow: hidden;
}
.alarm-red{
color: red;
}
.search-wrap {
display: flex;
justify-content: space-between;
padding: 30rpx 30rpx 0;
background-color: #fff;
.search-input-inner {
display: flex;
align-items: center;
width: 460rpx;
height: 70rpx;
padding: 0 30rpx;
background-color: $color-bg;
border-radius: 100rpx;
box-sizing: border-box;
.search-input-icon {
margin-right: 10rpx;
color: $color-tip;
}
}
.search-btn {
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 70rpx;
color: #fff;
border-radius: 100rpx;
margin-left: 30rpx;
text {
margin-right: 10rpx;
}
}
}
.tab-block {
// position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
background: #fff;
// margin: 0 30rpx;
.choose {
// position: absolute;
// right: 0;
min-width: 50px;
background-color: #fff;
padding: 20rpx 0rpx 0 20rpx;
height: 66rpx;
}
.tab-wrap {
// width: calc(100% - 120rpx);
width: 100%;
// position: relative;
// overflow-x: scroll;
padding: 24rpx 0rpx 0 20rpx;
height: 66rpx;
background-color: #fff;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.tab-item {
// display: inline-block;
}
.active {
position: relative;
// margin-right: 32rpx;
font-weight: 600;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height:6rpx;
width: 100%;
}
}
}
.item-inner {
position: relative;
margin: 0 30rpx 20rpx;
background-color: #fff;
border-radius: $border-radius;
.item-wrap {
display: flex;
padding: 30rpx;
.item-img {
margin-right: 20rpx;
width: 160rpx;
height: 160rpx;
border-radius: $border-radius;
}
.item-desc {
flex: 1;
.item-name {
width: 450rpx;
line-height: 1.6;
color: $color-title;
display: flex;
// white-space: nowrap;
align-items: center;
font-weight: 600;
.name {
flex: 1;
width: 0;
line-height: 1.4;
}
.goods-class {
font-size: 24rpx;
}
}
.item-num-wrap {
margin-top: 3px;
font-size: $font-size-tag;
color: $color-tip;
text:first-of-type {
margin-right: 30rpx;
}
view{
font-size: 26rpx;
line-height: 1.4;
color:#999
}
}
.item-operation {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1;
padding-top: 10rpx;
.item-price {
font-weight: bold;
}
.iconshenglve {
font-size: 48rpx;
color: $color-tip;
}
}
.promotion-ident {
line-height: 1;
padding: 6rpx 0;
text{
font-size: $font-size-activity-tag;
padding: 2rpx 12rpx;
border-radius: 4rpx;
color: #fff;
margin-right:10rpx;
border-radius: 50rpx;
}
}
}
}
.operation {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 10rpx;
.operation-item {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 64rpx;
height: 64rpx;
}
text {
margin-top: 10rpx;
line-height: 1;
color: #fff;
}
}
}
}
.screen-wrap {
.title {
font-size: $font-size-tag;
padding: $padding;
background: $color-bg;
}
scroll-view {
height: 85%;
.item-wrap {
border-bottom: 1px solid $color-line;
&:last-child {
border-bottom: none;
}
.label {
font-size: $font-size-tag;
padding: $padding 30rpx 0 $padding;
display: flex;
justify-content: space-between;
align-items: center;
.more {
font-size: $font-size-tag;
picker {
display: inline-block;
vertical-align: middle;
view {
font-size: $font-size-tag;
}
}
.iconfont {
display: inline-block;
vertical-align: middle;
color: $color-tip;
font-size: $font-size-base;
}
}
.uni-tag {
padding: 0 $padding;
font-size: $font-size-goods-tag;
background: $color-bg;
height: 40rpx;
line-height: 40rpx;
border: 0;
margin-left: $margin-updown;
}
}
.list {
margin: $margin-updown $margin-both;
overflow: hidden;
.uni-tag {
padding: 0 $padding;
font-size: $font-size-goods-tag;
background: $color-bg;
height: 52rpx;
line-height: 52rpx;
border: 0;
margin-right: 20rpx;
margin-bottom: 20rpx;
&:nth-child(3n) {
margin-right: 0;
}
}
}
.value-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: $padding;
.h-line {
width: 40rpx;
height: 2rpx;
background-color: $color-tip;
}
input {
flex: 1;
background: $color-line;
height: 60rpx;
line-height: 60rpx;
font-size: $font-size-goods-tag;
border-radius: 50rpx;
text-align: center;
&:first-child {
margin-right: 10rpx;
}
&:last-child {
margin-left: 10rpx;
}
}
picker {
display: inline-block;
vertical-align: middle;
view {
font-size: $font-size-tag;
}
}
}
}
}
.footer {
height: 90rpx;
display: flex;
justify-content: center;
align-items: flex-start;
//position: absolute;
bottom: 0;
width: 100%;
button {
margin: 0;
width: 40%;
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
}

506
pages_promotion/point/detail.vue Normal file
View File

@@ -0,0 +1,506 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
<view class="goods-container">
<view class="goods-media">
<!-- #ifdef H5 -->
<cover-view class="share">
<view class="share_left"><text class="iconfont icon-back_light" @click="$util.goBack()"></text></view>
</cover-view>
<!-- #endif -->
<view class="goods-img show">
<swiper class="swiper">
<swiper-item :item-id="'goods_id_' + pointInfo.type">
<view class="item" v-if="pointInfo.type == 2">
<image class="adv-pic" :src="pointInfo.image ? $util.img(pointInfo.image) : $util.img('public/uniapp/point/coupon.png')" @error="imageError($util.img('public/uniapp/point/coupon.png'))" mode="aspectFit"/>
</view>
<view class="item" v-else-if="pointInfo.type == 3">
<image class="adv-pic" :src="pointInfo.image ? $util.img(pointInfo.image) : $util.img('public/uniapp/point/hongbao.png')" @error="imageError($util.img('public/uniapp/point/hongbao.png'))" mode="aspectFit"/>
</view>
<view class="item" v-else><image class="adv-pic" :src="$util.img(pointInfo.image)" @error="imageError()" mode="aspectFit"></image></view>
</swiper-item>
</swiper>
</view>
</view>
<view class="group-wrap padding-top">
<view class="goods-module-wrap">
<text class="price-symbol ">{{ pointInfo.point }}积分</text>
<template v-if="pointInfo.exchange_price != '0.00' && pointInfo.pay_type > 0">
<text class="price-symbol ">+{{ $lang('common.currencySymbol') }}{{ pointInfo.exchange_price }}</text>
</template>
<view class="market-price-wrap" v-if="pointInfo.price">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text class="money">{{ pointInfo.price }}</text>
</view>
<view class="follow-and-share" v-if="pointInfo.stock_show == 1 || pointInfo.stock_show == undefined">
<text class="color-tip" v-if="pointInfo.pointCoupon != 1">库存:{{ pointInfo.stock }}{{ pointInfo.stock >= 0 ? pointInfo.unit : '' }}</text>
<text class="color-tip" v-else>库存:无限{{ pointInfo.stock >= 0 ? pointInfo.unit : '' }}</text>
</view>
</view>
<view class="goods-module-wrap info">
<text class="sku-name-wrap" v-if="pointInfo.type == 1">{{ pointInfo.goods_name }}</text>
<text class="sku-name-wrap" v-else>{{ pointInfo.name }}</text>
</view>
<view class="coupon-desc">
<view v-if="pointInfo.balance && pointInfo.balance > 0" class="color-tip">内含{{ pointInfo.balance }}元</view>
<view v-if="pointInfo.coupon_type == 'random'" class="color-tip">无门槛优惠券</view>
<view v-if="pointInfo.coupon_type == 'reward'" class="color-tip">{{ '满' + pointInfo.at_least + '减' + pointInfo.money }}</view>
<view v-if="pointInfo.coupon_type == 'discount'" class="color-tip">
满{{ pointInfo.at_least }}元
<text>{{ pointInfo.discount }}折</text>
</view>
<view v-if="pointInfo.coupon_type == 'discount'" class="color-tip">最多优惠{{ pointInfo.discount_limit }}元</view>
<view class="time color-tip" v-if="pointInfo.coupon_type">
{{ pointInfo.validity_type == 1 ? '领取之日起' + pointInfo.fixed_term + '天内有效' : $util.timeStampTurnTime(pointInfo.end_time) + '到期' }}
</view>
</view>
</view>
<!-- 添加二维码 start -->
<view class="detail-community" v-if="pointInfo.qr_data && pointInfo.qr_data.qr_state == 1">
<view class="community-box">
<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill"></image>
<view class="community-content">
<view class="community-title">{{ pointInfo.qr_data.qr_name }}</view>
<view class="community-txt">{{ pointInfo.qr_data.community_describe }}</view>
</view>
</view>
<view class="community-btn" @click="onCommunity()">添加</view>
</view>
<!-- 促销 -->
<view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
<view class="community-model-content" @click.stop>
<view class="community-model-content-radius"><view>添加社群</view></view>
<view class="community-model-content-draw" v-if="pointInfo.qr_data && pointInfo.qr_data.qr_img">
<image
:src="
pointInfo.qr_data.qr_img != '' && pointInfo.qr_data.qr_state == 1
? $util.img(pointInfo.qr_data.qr_img)
: $util.img('public/uniapp/goods/detail_erweiImage.png')
"
mode="aspectFill"
show-menu-by-longpress="true"/>
</view>
<view class="community-model-content-text">长按识别二维码，添加社群</view>
</view>
<view class="community-model-close" @click.stop="onCloseCommunity()"><text class="iconfont icon-close"></text></view>
</view>
<!-- 添加二维码 end -->
<block v-if="pointInfo.type == 1">
<view class="newdetail margin-bottom">
<!-- 已选规格 -->
<view class="item selected-sku-spec" v-if="pointInfo.sku_spec_format" @click="exchange">
<view class="label">选择</view>
<view class="box">
<text v-for="(item, index) in pointInfo.sku_spec_format" :key="index">{{ item.spec_name }}/{{ item.spec_value_name }}</text>
</view>
<text class="iconfont icon-right"></text>
</view>
<view class="item goods-attribute" @click="openAttributePopup()" v-if="pointInfo.goods_attr_format && pointInfo.goods_attr_format.length > 0">
<view class="label">属性</view>
<view class="box">
<text v-for="(item, index) in pointInfo.goods_attr_format" :key="index" v-if="index < 2">{{ item.attr_name }}: {{ item.attr_value_name }}</text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<!-- 商品属性 -->
<view @touchmove.prevent.stop>
<uni-popup ref="attributePopup" type="bottom">
<view class="goods-attribute-popup-layer popup-layer">
<view class="head-wrap" @click="closeAttributePopup()">
<text>商品属性</text>
<text class="iconfont icon-close"></text>
</view>
<scroll-view scroll-y class="goods-attribute-body">
<view class="item" v-for="(item, index) in pointInfo.goods_attr_format" :key="index">
<text class="attr-name">{{ item.attr_name }}</text>
<text class="value-name">{{ item.attr_value_name }}</text>
</view>
</scroll-view>
<view class="button-box"><button type="primary" @click="closeAttributePopup()">确定</button></view>
</view>
</uni-popup>
</view>
<!-- 商品服务 -->
<view @touchmove.prevent.stop>
<uni-popup ref="merchantsServicePopup" type="bottom">
<view class="goods-merchants-service-popup-layer popup-layer">
<view class="head-wrap" @click="closeMerchantsServicePopup()">
<text>商品服务</text>
<text class="iconfont icon-close"></text>
</view>
<scroll-view scroll-y>
<view class="item" :class="{ 'empty-desc': !item.desc }" v-for="(item, index) in pointInfo.goods_service" :key="index">
<view class="iconfont icon-dui "></view>
<view class="info-wrap">
<text class="title">{{ item.service_name }}</text>
<text class="describe" v-if="item.desc">{{ item.desc }}</text>
</view>
</view>
</scroll-view>
<view class="button-box"><button type="primary" @click="closeMerchantsServicePopup()">确定</button></view>
</view>
</uni-popup>
</view>
</block>
<!-- 详情 -->
<view class="goods-detail-tab">
<view class="detail-tab"><view class="tab-item">兑换详情</view></view>
<view class="detail-content">
<view class="detail-content-item">
<view class="goods-details" v-if="pointInfo.content"><rich-text :nodes="pointInfo.content"></rich-text></view>
<view class="goods-details active" v-else>暂无兑换详情！</view>
</view>
</view>
</view>
<!-- SKU选择 -->
<ns-goods-sku
v-if="pointInfo.id"
ref="goodsSku"
@refresh="refreshGoodsSkuDetail"
:goods-detail="pointInfo"
:goods-id="pointInfo.goods_id"
:max-buy="pointInfo.max_buy"
:min-buy="pointInfo.min_buy"
source="point"
></ns-goods-sku>
</view>
</view>
<view class="detail-swap" @click="exchange()" :class="{ 'position-bottom': isIphoneX }" v-if="!isLogin"><button type="primary" >登录之后方可兑换</button></view>
<block v-else>
<view class="detail-swap" :class="{ 'position-bottom': isIphoneX }" v-if="pointInfo.stock == 0"><button disabled>库存不足</button></view>
<view class="detail-swap" :class="{ 'position-bottom': isIphoneX }" v-else-if="enough"><button disabled>积分不足</button></view>
<view class="detail-swap" @click="exchange()" :class="{ 'position-bottom': isIphoneX }" v-else><button type="primary" hover-class="none">兑换</button></view>
</block>
<loading-cover ref="loadingCover"></loading-cover>
<ns-login ref="login"></ns-login>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import htmlParser from '@/common/js/html-parser';
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';
export default {
components: {
uniPopup,
uniNumberBox,
nsGoodsSku,
toTop
},
data() {
return {
id: 0,
pointInfo: {
image: '',
pointCoupon: 0
},
isIphoneX: false, //判断手机是否是iphoneX以上
isLogin: false,
memberPoint: 0,
isCommunity: false, //社群弹窗
//分享时详情所用图片
shareImg: ''
};
},
mixins: [scroll],
onLoad(options) {
//小程序分享接收source_member
if (options.source_member) {
uni.setStorageSync('source_member', options.source_member);
}
// 小程序扫码进入，接收source_member
if (options.scene) {
var sceneParams = decodeURIComponent(options.scene);
sceneParams = sceneParams.split('&');
if (sceneParams.length) {
sceneParams.forEach(item => {
if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
});
}
}
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (options.id) {
this.id = options.id;
this.getPointInfo();
} else {
this.$util.redirectTo('/pages_promotion/point/list', {}, 'redirectTo');
}
},
onShow() {
//记录分享关系
if (this.storeToken && uni.getStorageSync('source_member')) {
this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
},
/**
* 转发分享
*/
onShareAppMessage(res) {
var title = '';
var imageUrl = '';
switch (this.pointInfo.type) {
case 1: //商品
title = this.pointInfo.sku_name;
imageUrl = this.pointInfo.sku_image;
break;
case 2: //优惠券
case 3: //红包
title = this.pointInfo.name;
imageUrl = this.pointInfo.image;
break;
}
title = '仅需' + this.pointInfo.point + '积分即可兑换' + title;
imageUrl = this.$util.img(imageUrl);
var route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
var path = route.path;
return {
title: title,
path: path,
imageUrl: imageUrl,
success: res => {},
fail: res => {}
};
},
// 分享到微信朋友圈
// #ifdef MP-WEIXIN
onShareTimeline() {
var title = '';
var imageUrl = '';
switch (this.pointInfo.type) {
case 1: //商品
title = this.pointInfo.sku_name;
imageUrl = this.pointInfo.sku_image;
break;
case 2: //优惠券
case 3: //红包
title = this.pointInfo.name;
imageUrl = this.pointInfo.image;
break;
}
title = '仅需' + this.pointInfo.point + '积分即可兑换' + title;
imageUrl = this.$util.img(imageUrl);
var route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
var query = route.query;
return {
title: title,
query: query,
imageUrl: imageUrl
};
},
// #endif
computed: {
enough() {
return parseInt(this.pointInfo.point) > parseInt(this.memberPoint);
}
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.isLogin = true;
this.getPointInfo();
}
}
},
methods: {
//获取个人积分信息
getAccountInfo(e, f) {
if (this.storeToken) {
this.$api.sendRequest({
url: '/api/memberaccount/info',
data: {
account_type: 'point'
},
success: res => {
if (res.code == 0 && res.data) {
this.isLogin = true;
this.memberPoint = res.data.point;
let point_num = Math.floor(parseInt(res.data.point) / f);
this.Max = e >= point_num ? point_num : e;
} else {
this.$util.showToast({
title: res.message
});
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
} else {
this.isLogin = false;
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
},
//获取详情
getPointInfo() {
this.$api.sendRequest({
url: '/pointexchange/api/goods/detail',
data: {
id: this.id
},
success: res => {
if (res.code >= 0 && res.data.length !== 0) {
this.pointInfo = res.data;
//获取分享图片
if (this.pointInfo.image) {
this.shareImg = this.$util.img(this.pointInfo.image);
} else {
this.shareImg = this.$util.img('public/uniapp/blindbox/default.png');
}
this.$langConfig.title(this.pointInfo.name);
let save = this.pointInfo.type == 2 ? this.pointInfo.count : this.pointInfo.stock;
if (this.pointInfo.type == 2 && this.pointInfo.stock == -1) {
this.pointInfo.pointCoupon = 1;
}
if (this.pointInfo.type == 1) {
this.pointInfo.image = this.pointInfo['sku_image'];
// 当前商品SKU规格
if (this.pointInfo.sku_spec_format) this.pointInfo.sku_spec_format = JSON.parse(this.pointInfo.sku_spec_format);
// 商品属性
if (this.pointInfo.goods_attr_format) {
let goods_attr_format = JSON.parse(this.pointInfo.goods_attr_format);
this.pointInfo.goods_attr_format = this.$util.unique(goods_attr_format, 'attr_id');
for (var i = 0; i < this.pointInfo.goods_attr_format.length; i++) {
for (var j = 0; j < goods_attr_format.length; j++) {
if (
this.pointInfo.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id &&
this.pointInfo.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id
) {
this.pointInfo.goods_attr_format[i].attr_value_name += '、' + goods_attr_format[j].attr_value_name;
}
}
}
}
if (this.pointInfo.goods_spec_format) this.pointInfo.goods_spec_format = JSON.parse(this.pointInfo.goods_spec_format);
}
this.pointInfo.unit = this.pointInfo.unit || '件';
// 商品详情
if (this.pointInfo.content) this.pointInfo.content = htmlParser(this.pointInfo.content);
this.getAccountInfo(save, this.pointInfo.point);
} else {
this.$util.showToast({
title: res.message
});
setTimeout(() => {
this.$util.redirectTo('/pages_promotion/point/list', {}, 'redirectTo');
}, 1000);
}
}
});
},
// 立即购买
exchange() {
if (!this.storeToken) {
this.$refs.login.open('/pages_promotion/point/detail?id=' + this.id);
return;
}
this.$refs.goodsSku.show('point');
},
/**
* 刷新商品详情数据
* @param {Object} pointInfo
*/
refreshGoodsSkuDetail(pointInfo) {
Object.assign(this.pointInfo, pointInfo);
this.pointInfo.unit = this.pointInfo.unit || '件';
},
//服务
openMerchantsServicePopup() {
this.$refs.merchantsServicePopup.open();
},
closeMerchantsServicePopup() {
this.$refs.merchantsServicePopup.close();
},
//属性
openAttributePopup() {
this.$refs.attributePopup.open();
},
closeAttributePopup() {
this.$refs.attributePopup.close();
},
imageError() {
this.pointInfo.image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
//添加福利群
onCommunity() {
this.isCommunity = true;
},
onCloseCommunity() {
this.isCommunity = false;
}
}
};
</script>
<style lang="scss">
@import '@/common/css/goods_detail.scss';
.group-wrap .goods-module-wrap.info {
padding-bottom: 10rpx;
}
.group-wrap {
padding-bottom: 20rpx;
}
.detail-swap {
box-sizing: border-box;
background: #ffffff;
position: fixed;
left: 0;
bottom: 0rpx;
width: 100%;
padding: 20rpx 0;
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)) !important;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;
button {
height: 80rpx;
line-height: 80rpx;
border-radius: 10rpx;
&[type='primary'] {
background-color: var(--goods-btn-color);
}
}
}
</style>
<style scoped>
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
</style>

894
pages_promotion/point/goods_list.vue Normal file
View File

@@ -0,0 +1,894 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="content">
<view class="head-wrap">
<!-- 搜索区域 -->
<view class="search-wrap uni-flex uni-row">
<view class="flex-item input-wrap">
<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="search()" placeholder="请输入商品关键词" />
<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
</view>
</view>
<!-- 排序 -->
<view class="sort-wrap">
<view class="comprehensive-wrap" :class="{ 'color-base-text': order === '' }" @click="sortTabClick('')">
<text :class="{ 'color-base-text': order === '' }">综合</text>
</view>
<view class="price-wrap" @click="sortTabClick('point')">
<text :class="{ 'color-base-text': order === 'point' }">积分</text>
<view class="iconfont-wrap">
<view class="iconfont icon-shangsanjiao-copy" :class="{ 'color-base-text': priceOrder === 'asc' && order === 'point' }"></view>
<view class="iconfont icon-sanjiao" :class="{ 'color-base-text': priceOrder === 'desc' && order === 'point' }"></view>
</view>
</view>
<view class="price-wrap" @click="sortTabClick('create_time')">
<text :class="{ 'color-base-text': order === 'create_time' }">上新时间</text>
<view class="iconfont-wrap">
<view class="iconfont icon-shangsanjiao-copy" :class="{ 'color-base-text': priceOrder === 'asc' && order === 'create_time' }"></view>
<view class="iconfont icon-sanjiao" :class="{ 'color-base-text': priceOrder === 'desc' && order === 'create_time' }"></view>
</view>
</view>
<view :class="{ 'color-base-text': order === 'screen' }" class="screen-wrap">
<text @click="sortTabClick('screen')">筛选</text>
<view @click="sortTabClick('screen')" class="iconfont-wrap">
<view class="iconfont icon-shaixuan color-tip"></view>
</view>
</view>
</view>
</view>
<mescroll-uni top="180" @getData="getData" ref="mescroll" :size="10">
<block slot="list">
<view class="list-wrap">
<view class="goods-list double-column" v-if="goodsList.length">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
<view class="goods-img" @click="toDetail(item)">
<image :src="goodsImg(item.image)" mode="widthFix" @error="imgError(index)"></image>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
</view>
<view class="lineheight-clear">
<view class="discount-price">
<text class="unit ">{{ item.point }}</text>
<text class="unit font-size-tag">积分</text>
<block v-if="item.price > 0 && item.pay_type > 0">
<text class="unit font-size-tag">+</text>
<text class="unit font-size-tag">{{ $lang('common.currencySymbol') }}</text>
<text class="price font-size-toolbar" >{{ parseFloat(item.price).toFixed(2).split(".")[0] }}</text>
<text class="unit font-size-tag">.{{ parseFloat(item.price).toFixed(2).split(".")[1] }}</text>
</block>
</view>
</view>
<view class="pro-info" v-if="item.stock_show">
<view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
<view class="sale font-size-activity-tag color-tip" @click="toDetail(item)">
<!-- <button type="primary" size="mini">立即兑换</button> -->
</view>
</view>
</view>
</view>
</view>
<view class="empty" v-if="goodsList.length == 0">
<ns-empty :isIndex="false" text="暂无积分商品"></ns-empty>
</view>
</view>
</block>
</mescroll-uni>
<!-- 筛选弹出框 -->
<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
<view class="title color-tip">筛选</view>
<scroll-view scroll-y>
<!-- 价格筛选项 -->
<view class="item-wrap">
<view class="label"><text>积分区间</text></view>
<view class="price-wrap">
<input class="uni-input" type="digit" v-model="minPoint" placeholder="最低" />
<view class="h-line"></view>
<input class="uni-input" type="digit" v-model="maxPoint" placeholder="最高" />
</view>
</view>
<!-- 分类筛选项 -->
<view class="category-list-wrap">
<text class="first">全部分类</text>
<view class="class-box">
<view @click="selectedCategory('')" class="list-wrap"><text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text></view>
<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
</view>
</view>
</view>
</scroll-view>
<view class="footer" :class="{ 'safe-area': isIphoneX }">
<button type="default" class="footer-box" @click="resetData">重置</button>
<button type="primary" class="footer-box1" @click="screenData">确定</button>
</view>
</uni-drawer>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
export default {
components: {
uniDrawer,
},
data() {
return {
listStyle: '',
priceOrder: 'desc',
categoryList: [], //排序类型
goodsList: [],
order: '',
sort: 'desc',
showScreen: false,
keyword: '',
categoryId: 0,
minPoint: '',
maxPoint: '',
isFreeShipping: false, //是否免邮
isIphoneX: false,
coupon: 0,
emptyShow: false,
isList: true, //列表样式
mescroll: null,
isLogin: false,
couponList: [],
hongbaoList: [],
point: 0,
};
},
onLoad(options) {
this.categoryId = options.category_id || 0;
this.keyword = options.keyword || '';
this.isIphoneX = this.$util.uniappIsIPhoneX();
this.coupon = options.coupon || 0;
this.loadCategoryList(this.categoryId);
},
methods: {
//获取积分商品详情
getData(mescroll) {
this.$api.sendRequest({
url: '/pointexchange/api/goods/page',
data: {
page_size: mescroll.size,
page: mescroll.num,
type: 1,
keyword: this.keyword,
category_id: this.categoryId,
min_point: this.minPoint,
max_point: this.maxPoint,
is_free_shipping: (this.isFreeShipping ? 1 : 0),
order: this.order,
sort: this.sort,
coupon: this.coupon
},
success: res => {
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
this.goodsList = this.goodsList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail() {
//联网失败的回调
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
//加载分类
loadCategoryList(fid, sid) {
this.$api.sendRequest({
url: '/api/goodscategory/tree',
data: {},
success: res => {
if (res.data != null) this.categoryList = res.data;
}
});
},
goodsImg(imgStr) {
let imgs = imgStr.split(',');
return imgs[0] ? this.$util.img(imgs[0], {
size: 'mid'
}) : this.$util.getDefaultImage().goods;
},
imgError(index) {
this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
},
//跳转至详情页面
toDetail(item) {
this.$util.redirectTo('/pages_promotion/point/detail', {
id: item.id
});
},
search() {
this.emptyShow = false;
this.goodsList = [];
this.$refs.mescroll.refresh();
},
//筛选点击
sortTabClick(tag) {
if (tag == 'point') {
this.order = 'point';
this.sort = 'desc';
} else if (tag == 'create_time') {
this.order = 'create_time';
this.sort = 'desc';
} else if (tag == 'screen') {
//筛选
this.showScreen = true;
return;
} else {
this.order = '';
this.sort = '';
}
this.order = tag;
if (tag === 'create_time') {
this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
this.sort = this.priceOrder;
} else if (tag === 'point') {
this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
this.sort = this.priceOrder;
}
this.emptyShow = false;
this.goodsList = [];
this.$refs.mescroll.refresh();
},
selectedCategory(categoryId) {
this.categoryId = categoryId;
},
screenData() {
if (this.minPoint != '' || this.maxPoint != '') {
// if (!Number(this.minPoint) && this.minPoint) {
// this.$util.showToast({
// title: '请输入最低价'
// });
// return;
// }
if (!Number(this.maxPoint) && this.maxPoint) {
this.$util.showToast({
title: '请输入最高价'
});
return;
}
if (Number(this.minPoint) < 0 || Number(this.maxPoint) < 0) {
this.$util.showToast({
title: '筛选价格不能小于0'
});
return;
}
if (this.minPoint != '' && Number(this.minPoint) > Number(this.maxPoint) && this.maxPoint) {
this.$util.showToast({
title: '最低价不能大于最高价'
});
return;
}
if (this.maxPoint != '' && Number(this.maxPoint) < Number(this.minPoint)) {
this.$util.showToast({
title: '最高价不能小于最低价'
});
return;
}
}
this.emptyShow = false;
this.goodsList = [];
this.$refs.mescroll.refresh();
this.showScreen = false;
},
//重置数据
resetData() {
this.showScreen = false;
this.categoryId = 0
this.minPoint = ''
this.maxPoint = ''
},
},
};
</script>
<style lang="scss">
.head-wrap {
background: #fff;
position: fixed;
width: 100%;
left: 0;
z-index: 1;
.search-wrap {
flex: 0.5;
padding: 30rpx 30rpx 0;
font-size: $font-size-tag;
display: flex;
align-items: center;
.input-wrap {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
background: $color-bg;
height: 70rpx;
padding-left: 10rpx;
border-radius: 70rpx;
input {
width: 90%;
background: $color-bg;
font-size: $font-size-tag;
height: 50rpx;
padding: 10rpx 25rpx 10rpx 40rpx;
line-height: 50rpx;
border-radius: 40rpx;
}
text {
font-size: $font-size-toolbar;
color: $color-tip;
width: 80rpx;
text-align: center;
margin-right: 20rpx;
}
}
.category-wrap,
.list-style {
display: flex;
justify-content: center;
align-items: center;
.iconfont {
font-size: 50rpx;
color: $color-tip;
}
text {
display: block;
margin-top: 60rpx;
}
}
}
.sort-wrap {
display: flex;
padding: 10rpx 20rpx 10rpx 0;
>view {
flex: 1;
text-align: center;
font-size: $font-size-base;
height: 60rpx;
line-height: 60rpx;
}
.comprehensive-wrap {
display: flex;
justify-content: center;
align-items: center;
.iconfont-wrap {
display: inline-block;
margin-left: 10rpx;
width: 40rpx;
.iconfont {
font-size: $font-size-toolbar;
line-height: 1;
margin-bottom: 5rpx;
}
}
}
.price-wrap {
display: flex;
justify-content: center;
align-items: center;
.iconfont-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 40rpx;
.iconfont {
float: left;
font-size: 24rpx;
line-height: 1;
height: 20rpx;
color: #909399;
}
}
}
.screen-wrap {
display: flex;
justify-content: center;
align-items: center;
.iconfont-wrap {
display: inline-block;
margin-left: 10rpx;
width: 40rpx;
.iconfont {
font-size: $font-size-toolbar;
line-height: 1;
}
}
}
}
}
.category-list-wrap {
height: 100%;
.class-box {
display: flex;
flex-wrap: wrap;
padding: 0 $padding;
view {
width: calc((100% - 60rpx) / 3);
font-size: $font-size-goods-tag;
margin-right: 20rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
margin-bottom: 12rpx;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: rgba(245, 245, 245, 1);
border-radius: 5rpx;
&:nth-of-type(3n) {
margin-right: 0;
}
}
}
.first {
font-size: $font-size-tag;
display: block;
// background: $page-color-base;
padding: 20rpx;
}
.second {
border-bottom: 2rpx solid $color-line;
padding: 20rpx;
display: block;
font-size: $font-size-tag;
}
.third {
padding: 0 20rpx 20rpx;
overflow: hidden;
font-size: $font-size-tag;
>view {
display: inline-block;
margin-right: 20rpx;
margin-top: 20rpx;
}
.uni-tag {
padding: 0 20rpx;
}
}
}
.screen-wrap {
.title {
font-size: $font-size-tag;
padding: $padding;
background: #f6f4f5;
}
scroll-view {
height: 85%;
.item-wrap {
border-bottom: 1px solid #f0f0f0;
.label {
font-size: $font-size-tag;
padding: $padding;
view {
display: inline-block;
font-size: 60rpx;
height: 40rpx;
vertical-align: middle;
line-height: 40rpx;
}
}
.list {
margin: $margin-updown $margin-both;
overflow: hidden;
>view {
display: inline-block;
margin-right: 25rpx;
margin-bottom: 25rpx;
}
.uni-tag {
padding: 0 $padding;
font-size: $font-size-goods-tag;
background: #f5f5f5;
height: 52rpx;
line-height: 52rpx;
border: 0;
}
}
.price-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: $padding;
input {
flex: 1;
background: #f5f5f5;
height: 52rpx;
width: 182rpx;
line-height: 50rpx;
font-size: $font-size-goods-tag;
border-radius: 50rpx;
text-align: center;
&:first-child {
margin-right: 10rpx;
}
&:last-child {
margin-left: 10rpx;
}
}
}
}
}
.footer {
height: 90rpx;
display: flex;
justify-content: center;
align-items: flex-start;
//position: absolute;
bottom: 0;
width: 100%;
.footer-box {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin: 0;
width: 40%;
}
.footer-box1 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin: 0;
width: 40%;
}
}
}
.safe-area {
bottom: 68rpx !important;
}
.empty {
margin-top: 100rpx;
}
.buy-num {
font-size: $font-size-activity-tag;
}
.icon {
width: 34rpx;
height: 30rpx;
}
.list-style-new {
display: flex;
align-items: center;
.line {
width: 4rpx;
height: 28rpx;
background-color: rgba(227, 227, 227, 1);
margin-right: 60rpx;
}
}
.h-line {
width: 37rpx;
height: 2rpx;
background-color: $color-tip;
}
.lineheight-clear {
line-height: 1 !important;
}
// 商品列表单列样式
.goods-list.single-column {
.goods-item {
padding: 26rpx;
background: #fff;
margin: $margin-updown $margin-both;
border-radius: $border-radius;
display: flex;
position: relative;
.goods-img {
width: 200rpx;
height: 200rpx;
overflow: hidden;
border-radius: $border-radius;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.goods-tag {
color: #fff;
line-height: 1;
padding: 8rpx 12rpx;
position: absolute;
border-top-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
top: 26rpx;
left: 26rpx;
font-size: $font-size-goods-tag;
}
.goods-tag-img {
position: absolute;
border-top-left-radius: $border-radius;
width: 80rpx;
height: 80rpx;
top: 26rpx;
left: 26rpx;
z-index: 5;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-wrap {
flex: 1;
display: flex;
flex-direction: column;
}
.name-wrap {
flex: 1;
}
.goods-name {
font-size: $font-size-base;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 68rpx;
}
.introduction {
line-height: 1;
margin-top: 10rpx;
}
.discount-price {
display: inline-block;
font-weight: bold;
line-height: 1;
margin-top: 16rpx;
color: var(--price-color);
.unit {
margin-right: 6rpx;
}
}
.pro-info {
display: flex;
margin-top: 16rpx;
.delete-price {
text-decoration: line-through;
flex: 1;
.unit {
margin-right: 6rpx;
}
}
&>view {
line-height: 1;
&:nth-child(2) {
text-align: right;
}
}
}
.member-price-tag {
display: inline-block;
width: 60rpx;
line-height: 1;
margin-left: 6rpx;
image {
width: 100%;
}
}
}
}
// 商品列表双列样式
.goods-list.double-column {
display: flex;
flex-wrap: wrap;
margin: 0 $margin-both;
padding-top: $margin-updown;
.goods-item {
flex: 1;
position: relative;
background-color: #fff;
flex-basis: 48%;
max-width: calc((100% - 30rpx) / 2);
margin: 0 $margin-both $margin-updown 0;
border-radius: $border-radius;
&:nth-child(2n) {
margin-right: 0;
}
.goods-img {
position: relative;
overflow: hidden;
padding-top: 100%;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
image {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.goods-tag {
color: #fff;
line-height: 1;
padding: 8rpx 16rpx;
position: absolute;
border-bottom-right-radius: $border-radius;
top: 0;
left: 0;
font-size: $font-size-goods-tag;
}
.goods-tag-img {
position: absolute;
border-top-left-radius: $border-radius;
width: 80rpx;
height: 80rpx;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-wrap {
padding: 0 26rpx 26rpx 26rpx;
}
.goods-name {
font-size: $font-size-base;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 20rpx;
height: 68rpx;
}
.discount-price {
display: inline-block;
font-weight: bold;
line-height: 1;
margin-top: 16rpx;
color: var(--price-color);
.unit {
margin-right: 6rpx;
}
}
.pro-info {
display: flex;
margin-top: 16rpx;
.delete-price {
text-decoration: line-through;
flex: 1;
.unit {
margin-right: 6rpx;
}
}
&>view {
line-height: 1;
&:nth-child(2) {
text-align: right;
}
}
}
.member-price-tag {
display: inline-block;
width: 60rpx;
line-height: 1;
margin-left: 6rpx;
image {
width: 100%;
}
}
}
}
</style>
<style scoped>
>>>.uni-tag--primary.uni-tag--inverted {
background-color: #f5f5f5 !important;
}
</style>

594
pages_promotion/point/list.vue Normal file
View File

@@ -0,0 +1,594 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="conteiner">
<!-- #ifdef MP-WEIXIN -->
<view class="point-navbar"
:style="{'padding-top': menuButtonBounding.top + 'px', height: menuButtonBounding.height + 'px' }">
<view class="nav-wrap" :style="{width: menuButtonBounding.left + 'px'}">
<view class="back" @click="back" :style="{width: menuButtonBounding.height + 'px', height: menuButtonBounding.height + 'px' }">
<text class="iconfont icon-back_light"></text>
</view>
<view class="search" @click="$util.redirectTo('/pages_tool/goods/search')">
<text class="iconfont icon-sousuo3"></text>
<text class="tips">搜索商品</text>
</view>
<view class="sign" :style="{width: menuButtonBounding.height + 'px', height: menuButtonBounding.height + 'px' }" @click="redirect('/pages_tool/member/signin')">
<image :src="$util.img('public/uniapp/point/navbar-sing-icon.png')" mode="widthFix"></image>
</view>
</view>
</view>
<view class="point-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
<!-- #endif -->
<scroll-view scroll-y="true" class="point-scroll-view" @scrolltolower="getData">
<view class="point-wrap" :style="{'background-position-y': -menuButtonBounding.bottom + 'px'}">
<view class="head-box">
<view class="account-content">
<view class="left">
<image :src="$util.img('public/uniapp/point/point-icon.png')" mode="widthFix"></image>
<view>我的积分</view>
</view>
<view class="right">
<text class="point price-font">{{point}}</text>
<text class="text">积分</text>
<!-- <text class="iconfont icon-right"></text> -->
</view>
</view>
<view class="remark">
<view class="label">提醒</view>
<view class="text">积分兑好礼，每日上新换不停！</view>
</view>
</view>
<!-- <view class="menu-wrap">
<view class="menu-list">
<view class="menu-item" @click="openPointPopup()">
<image :src="$util.img('/public/uniapp/point/point-rule.png')" class="menu-img"></image>
<image :src="$util.img('/public/uniapp/point/must-see.png')" class="menu-tag"></image>
<view class="title">活动规则</view>
</view>
<view class="menu-item" @click="redirect('/pages_tool/recharge/list')">
<image :src="$util.img('/public/uniapp/point/recharge.png')" class="menu-img"></image>
<image :src="$util.img('/public/uniapp/point/high.png')" class="menu-tag"></image>
<view class="title">储值赚积分</view>
</view>
<view class="menu-item" @click="redirect('/pages_promotion/point/order_list')">
<image :src="$util.img('/public/uniapp/point/exchange-record.png')" class="menu-img"></image>
<view class="title">兑换记录</view>
</view>
<view class="menu-item" @click="luckdraw">
<image :src="$util.img('/public/uniapp/point/luck-draw.png')" class="menu-img"></image>
<view class="title">积分抽奖</view>
</view>
<view class="menu-item" @click="redirect('/pages_tool/member/point_detail')">
<image :src="$util.img('/public/uniapp/point/point-detail.png')" class="menu-img"></image>
<view class="title">积分明细</view>
</view>
</view>
</view> -->
<!--
<view class="poster-wrap">
<view class="poster-item" @click="redirect('/pages_tool/recharge/list')">
<image :src="$util.img('/public/uniapp/point/recharge-poster.png')" mode="widthFix"></image>
</view>
<view class="poster-item" @click="luckdraw">
<image :src="$util.img('/public/uniapp/point/luck-draw-poster.png')" mode="widthFix"></image>
</view>
</view> -->
<view class="recharge-list-wrap" @click="redirect('/pages_tool/recharge/list')" v-if="rechargeList.length">
<view class="item-wrap" v-for="(item, index) in rechargeList.slice(0, 4)" :key="index">
<view class="recharge">储值{{ parseFloat(item.buy_price) }}元</view>
<view class="point">可得{{ item.point }}积分</view>
<view class="btn">去储值</view>
</view>
</view>
<view class="body-wrap" :class="{ 'no-login': !storeToken }">
<view class="point-exchange-wrap exchange-coupon" v-if="couponList.length > 0">
<view class="card-category-title">
<text class="before-line"></text>
<text>积分换券</text>
<text class="after-line"></text>
</view>
<view class="list-wrap">
<view class="list-wrap-scroll" :class="{'single-row': couponList.length < 3}">
<view class="list-wrap-item coupon-list-wrap-item" v-for="(couponItem, couponIndex) in couponList" :key="couponIndex" @click="toDetail(couponItem)">
<view class="img-box">
<image :src="$util.img('public/uniapp/point/coupon_' + themeStyle.name + '_bg1.png')"/>
</view>
<view class="content">
<view class="coupon"
:style="{ backgroundImage: 'url(' + $util.img('public/uniapp/point/coupon_theme-blue_bg1.jpg') + ')' }">
<view class="coupon_left color-line-border">
<view class="price price-font">
<block v-if="couponItem.coupon_type == 'reward'">
<text>￥</text>
{{ parseFloat(couponItem.money) }}
</block>
<block v-if="couponItem.coupon_type == 'discount'">
<block v-if="couponItem.coupon_type == 'discount'">
{{ parseFloat(couponItem.discount) }}<text>折</text>
</block>
</block>
</view>
<view class="coupon-info">
<view class="coupon_condition font-size-activity-tag">
{{ couponItem.at_least == 0 ? '无门槛优惠券' : '满' + parseFloat(couponItem.at_least).toFixed(0) + '可用' }}
</view>
<view class="coupon_type font-size-activity-tag" v-if="couponItem.goods_type == 1">全场券</view>
<view class="coupon_type font-size-activity-tag" v-else-if="couponItem.goods_type == 2||couponItem.goods_type == 3">指定券</view>
</view>
</view>
<view class="coupon_right">
<view class="coupon_num font-size-tag">{{ couponItem.point }}积分</view>
<view class="coupon_btn">兑换</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="point-exchange-wrap exchange-hongbao" v-if="hongbaoList.length > 0">
<view class="card-category-title">
<text class="before-line"></text>
<text>积分换红包</text>
<text class="after-line"></text>
</view>
<view class="list-wrap">
<view class="list-wrap-item hongbao-list-wrap-item" v-for="(hongbaoItem, hongbaoIndex) in hongbaoList" :key="hongbaoIndex" @click="toDetail(hongbaoItem)">
<view class="img-box">
<image :src="$util.img('public/uniapp/point/hongbao_bg.png')"></image>
</view>
<view class="content">
<view class="coupon hongbao">
<view class="coupon_left">
<view class="price price-font">
<text>￥</text>
{{ parseFloat(hongbaoItem.balance).toFixed(0) }}
</view>
<!-- <view class="coupon_condition font-size-activity-tag">{{ hongbaoItem.name }}</view> -->
</view>
<view class="coupon_right">
<view class="coupon_num font-size-tag">{{ hongbaoItem.point }}积分</view>
<view class="coupon_btn">兑换</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="point-exchange-wrap" v-if="goodsList.length > 0">
<view class="card-category-title">
<text class="before-line"></text>
<text>积分换礼品</text>
<text class="after-line"></text>
</view>
<view class="list-wrap">
<view class="goods-list double-column" v-if="goodsList.length">
<view class="goods-item " v-for="(item, index) in goodsList" :key="index">
<view class="goods-img" @click="toDetail(item)">
<image :src="goodsImg(item)" mode="widthFix" @error="imgError(index)"></image>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
</view>
<view class="lineheight-clear">
<view class="discount-price">
<view>
<text class="unit price-font point">{{ item.point }}</text>
<text class="unit font-size-tag ">积分</text>
</view>
<block v-if="item.price > 0 && item.pay_type > 0">
<text class="unit font-size-tag">+</text>
<view>
<text class="font-size-tag">{{ parseFloat(item.price).toFixed(2).split(".")[0] }}</text>
<text class="unit font-size-tag">.{{ parseFloat(item.price).toFixed(2).split(".")[1] }}元</text>
</view>
</block>
</view>
<view class="btn" @click="toDetail(item)">兑换</view>
</view>
<view class="pro-info" v-if="item.stock_show || item.sale_show ">
<view class="font-size-activity-tag color-tip" v-if="item.stock_show ">
库存:{{ isNaN(parseInt(item.stock)) ? 0 : parseInt(item.stock) }}</view>
<view class="font-size-activity-tag color-tip sale" v-if="item.sale_show ">
已兑:{{ isNaN(parseInt(item.sale_num)) ? 0 : parseInt(item.sale_num) }}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 弹出规则 -->
<view @touchmove.prevent.stop>
<uni-popup ref="pointPopup" type="bottom">
<view class="tips-layer">
<view class="head" @click="closePointPopup()">
<view class="title">积分说明</view>
<text class="iconfont icon-close"></text>
</view>
<view class="body">
<view class="detail margin-bottom">
<view class="tip">积分的获取</view>
<view class="font-size-base">1、积分可在注册、签到、分享、消费、充值时获得。</view>
<view class="font-size-base">2、在购买部分商品时可获得积分。</view>
<view class="tip">积分的使用</view>
<view class="font-size-base">1、积分可用于兑换积分中心的商品。</view>
<view class="font-size-base">2、积分可在参与某些活动时使用。</view>
<view class="font-size-base">3、积分不得转让，出售，不设有效期。</view>
<view class="tip">积分的查询</view>
<view class="font-size-base">1、积分可在会员中心中查询具体数额以及明细。</view>
</view>
</view>
</view>
</uni-popup>
</view>
<loading-cover ref="loadingCover"></loading-cover>
<ns-login ref="login"></ns-login>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
components: {
uniPopup
},
data() {
return {
mescroll: {
num: 0,
total: 1,
loading: false
},
categoryList: [{
id: 1,
name: '积分换好物'
},
{
id: 2,
name: '积分换券'
},
{
id: 3,
name: '积分换红包'
}
],
isLogin: false,
goodsList: [],
couponList: [],
hongbaoList: [],
point: 0,
signState: 1, // 签到是否开启
mpShareData: null, //小程序分享数据
menuButtonBounding: {
bottom: 0
},
rechargeList: [], //充值套餐
newestGame: null
};
},
onLoad(option) {
setTimeout( () => {
if (!this.addonIsExist.pointexchange) {
this.$util.showToast({
title: '商家未开启积分商城',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
// #ifdef MP-WEIXIN
this.menuButtonBounding = uni.getMenuButtonBoundingClientRect();
// #endif
//小程序分享接收source_member
if (option.source_member) {
uni.setStorageSync('source_member', option.source_member);
}
// 小程序扫码进入，接收source_member
if (option.scene) {
var sceneParams = decodeURIComponent(option.scene);
sceneParams = sceneParams.split('&');
if (sceneParams.length) {
sceneParams.forEach(item => {
if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
});
}
}
this.getData();
this.getRechargeList();
this.getNewestGame();
},
onShow() {
//记录分享关系
if (this.storeToken && uni.getStorageSync('source_member')) {
this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
//小程序分享
// #ifdef MP-WEIXIN
this.$util.getMpShare().then(res => {
this.mpShareData = res;
});
// #endif
if (this.storeToken) this.getAccountInfo();
this.getCouponList();
this.getHongbaoList();
// this.getSignState();
},
methods: {
// 签到是否开启
getSignState() {
this.$api.sendRequest({
url: '/api/membersignin/getSignStatus',
success: res => {
if (res.code == 0) {
this.signState = res.data.is_use;
}
}
});
},
jumpPage(url) {
this.$util.redirectTo(url);
},
// 打开积分说明弹出层
openPointPopup() {
this.$refs.pointPopup.open();
},
// 打开积分说明弹出层
closePointPopup() {
this.$refs.pointPopup.close();
},
// 优惠券
getCouponList() {
this.$api.sendRequest({
url: '/pointexchange/api/goods/page',
data: {
page_size: 0,
type: 2
},
success: res => {
if (res.code == 0 && res.data) {
this.couponList = res.data.list;
} else {
this.$util.showToast({
title: res.message
});
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail() {
//联网失败的回调
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
// 红包
getHongbaoList() {
this.$api.sendRequest({
url: '/pointexchange/api/goods/page',
data: {
page_size: 0,
type: 3
},
success: res => {
if (res.code == 0 && res.data) {
this.hongbaoList = res.data.list;
} else {
this.$util.showToast({
title: res.message
});
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail() {
//联网失败的回调
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
//获取积分商品详情
getData() {
if (this.mescroll.loading || this.mescroll.num >= this.mescroll.total) return;
this.mescroll.loading = true;
this.$api.sendRequest({
url: '/pointexchange/api/goods/page',
data: {
page: this.mescroll.num + 1,
page_size: 10,
type: 1
},
success: res => {
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
//设置列表数据
this.mescroll.loading = false;
this.mescroll.total = res.data.page_count;
this.mescroll.num += 1;
if (this.mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
this.goodsList = this.goodsList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail() {
this.mescroll.loading = false;
//联网失败的回调
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
//跳转至详情页面
toDetail(item) {
this.$util.redirectTo('/pages_promotion/point/detail', {
id: item.id
});
},
goGoodsList() {
this.$util.redirectTo('/pages_promotion/point/goods_list');
},
//获取个人
getAccountInfo() {
this.$api.sendRequest({
url: '/api/memberaccount/info',
data: {
account_type: 'point'
},
success: res => {
if (res.code == 0 && res.data) {
if (!isNaN(parseFloat(res.data.point))) {
this.point = parseFloat(res.data.point).toFixed(0);
}
} else {
this.$util.showToast({
title: res.message
});
}
}
});
},
//跳转至登录页面
login() {
this.$refs.login.open('/pages_promotion/point/list');
},
imgError(index) {
this.goodsList[index].image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
goodsImg(data) {
let img = '';
switch (data.type) {
case 1:
img = this.$util.img(data.image.split(',')[0], {
size: 'mid'
});
break;
case 2:
img = data.image ? this.$util.img(data.image) : this.$util.img(
'public/uniapp/point/coupon.png');
break;
case 3:
img = data.image ? this.$util.img(data.image) : this.$util.img(
'public/uniapp/point/hongbao.png');
break;
}
return img;
},
/**
* 跳转
* @param {Object} url
*/
redirect(url) {
if (!this.storeToken) {
this.$refs.login.open(url);
} else {
this.$util.redirectTo(url);
}
},
getRechargeList() {
this.$api.sendRequest({
url: '/memberrecharge/api/memberrecharge/page',
data: {
page_size: 100,
page: 1
},
success: res => {
if (res.code == 0 && res.data) {
let rechargeList = [];
res.data.list.forEach(item => {
if (item.point > 0) rechargeList.push(item)
});
this.rechargeList = rechargeList;
}
}
})
},
back() {
if (getCurrentPages().length > 1) uni.navigateBack({
delta: 1
});
else this.$util.redirectTo('/pages/index/index');
},
getNewestGame() {
this.$api.sendRequest({
url: '/api/game/newestgame',
success: res => {
if (res.code == 0 && res.data) this.newestGame = res.data;
}
})
},
luckdraw() {
if (this.newestGame) {
switch (this.newestGame.game_type) {
case 'cards':
this.$util.redirectTo('/pages_promotion/game/cards', {
id: this.newestGame.game_id
});
break;
case 'egg':
this.$util.redirectTo('/pages_promotion/game/smash_eggs', {
id: this.newestGame.game_id
});
break;
case 'turntable':
this.$util.redirectTo('/pages_promotion/game/turntable', {
id: this.newestGame.game_id
});
break;
}
} else {
this.$util.showToast({
title: '暂无相关活动'
});
}
}
},
//分享给好友
onShareAppMessage() {
return this.mpShareData.appMessage;
},
//分享到朋友圈
onShareTimeline() {
return this.mpShareData.timeLine;
}
};
</script>
<style lang="scss">
@import './public/css/list.scss';
</style>
<style>
.ns-adv>>>image {
width: 100%;
border-radius: 0;
}
</style>

575
pages_promotion/point/order_list.vue Normal file
View File

@@ -0,0 +1,575 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="order-container">
<view class="order-nav" v-if="storeToken">
<view v-for="(statusItem, statusIndex) in statusList" :key="statusIndex" class="uni-tab-item" :id="statusItem.id" :data-current="statusIndex" @click="ontabtap">
<text class="uni-tab-item-title" :class="statusItem.status == orderStatus ? 'uni-tab-item-title-active color-base-text' : ''">
{{ statusItem.name }}
</text>
</view>
</view>
<mescroll-uni ref="mescroll" @getData="getListData" top="80rpx" >
<block slot="list">
<block v-if="orderList.length">
<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex" @click="detail(orderItem)">
<view class="order-header">
<text class="order-no">订单号：{{ orderItem.order_no }}</text>
<text class="status-name">
{{ orderItem.order_status == 0 ? '待支付' : orderItem.order_status == 1 ? '已完成' : orderItem.order_status == -1 ? '已关闭' : '' }}
</text>
</view>
<view class="order-body">
<view class="goods-wrap">
<view class="goods-img">
<block v-if="orderItem.type == 2">
<image :src="$util.img(orderItem.exchange_image) ? $util.img(orderItem.exchange_image) : $util.img('public/uniapp/point/coupon.png')"
@error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
</block>
<block v-else-if="orderItem.type == 3">
<image :src="$util.img(orderItem.exchange_image) ? $util.img(orderItem.exchange_image) : $util.img('public/uniapp/point/hongbao.png')"
@error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
</block>
<block v-else>
<image :src="$util.img(orderItem.exchange_image)" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
</block>
</view>
<view class="goods-info">
<view class="pro-info">
<view class="goods-name">{{ orderItem.exchange_name }}</view>
<view class="goods-sub-section">
<text class="goods-price">
<text class="price-style large">{{ orderItem.point }}</text>
<text class="unit price-style small">积分</text>
<block v-if="orderItem.price > 0">
+
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price-style large">{{ parseFloat(orderItem.price).toFixed(2).split(".")[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(orderItem.price).toFixed(2).split(".")[1] }}</text>
</block>
</text>
<text class="goods-num">
<text class="iconfont icon-close"></text>
{{ orderItem.num }}
</text>
</view>
</view>
</view>
</view>
</view>
<view class="order-footer">
<view class="order-action" v-if="orderItem.order_status == 0 && orderItem.type == 1">
<view class="order-box-btn font-size-tag" @click.stop="orderClose(orderItem.order_id, orderIndex)">关闭</view>
<view class="order-box-btn color-base-bg color-base-border" @click.stop="openChoosePayment(orderItem.out_trade_no, orderItem.price)">支付</view>
</view>
<view class="order-action" v-else>
<view class="order-box-btn font-size-tag">查看详情</view>
</view>
</view>
</view>
</block>
<block v-if="showEmpty && !orderList.length">
<view class="cart-empty">
<ns-empty :isIndex="true" :emptyBtn ="{url: '/pages_promotion/point/list',text: '去逛逛'}" text="暂无积分兑换订单"></ns-empty>
</view>
</block>
</block>
</mescroll-uni>
<!-- 选择支付方式弹窗 -->
<ns-payment ref="choosePaymentPopup" :payMoney="payMoney" @confirm="orderPay"></ns-payment>
<loading-cover ref="loadingCover"></loading-cover>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
export default {
data() {
return {
orderList: [],
showEmpty: false,
outTradeNo: '',
payMoney: 0,
statusList: [
{status: 'all', id: 'all', name: '全部'},
{status: 0, id: 'pay', name: '待支付'},
{status: 1, id: 'complete', name: '已完成'},
],
orderStatus: 'all',
};
},
onLoad() {
setTimeout( () => {
if (!this.addonIsExist.pointexchange) {
this.$util.showToast({
title: '商家未开启积分商城',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index', {}, 'redirectTo');
}, 2000);
}
},1000);
if (!this.storeToken) {
this.$nextTick(() => {
this.$refs.login.open('/pages_promotion/point/order_list');
});
}
},
onShow() {
if (this.$refs.mescroll) this.$refs.mescroll.refresh();
},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.$refs.mescroll.refresh();
}
}
},
methods: {
ontabtap(e) {
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.orderStatus = this.statusList[index].status;
this.$refs.loadingCover.show();
this.$refs.mescroll.refresh();
},
getListData(mescroll) {
this.showEmpty = false;
this.$api.sendRequest({
url: '/pointexchange/api/order/page',
data: {
page: mescroll.num,
page_size: mescroll.size,
order_status: this.orderStatus
},
success: res => {
this.showEmpty = true;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
this.orderList = this.orderList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
orderClose(order_id, index) {
uni.showModal({
title: '提示',
content: '确定关闭此次兑换？',
success: res => {
if (res.confirm) {
this.$api.sendRequest({
url: '/pointexchange/api/order/close',
data: {
order_id: order_id
},
success: res => {
if (res.code >= 0) {
this.orderList[index].order_status = -1;
this.$util.showToast({
title: '关闭成功'
});
this.$forceUpdate();
}
}
});
}
}
});
},
// 显示选择支付方式弹框
openChoosePayment(out_trade_no, price) {
this.outTradeNo = out_trade_no;
this.payMoney = parseFloat(price);
this.$refs.choosePaymentPopup.open();
},
orderPay() {
this.$refs.choosePaymentPopup.getPayInfo(this.outTradeNo);
},
detail(item) {
if (item.type == 1 && item.relate_order_id) {
switch (item.delivery_type) {
case 'store':
this.$util.redirectTo('/pages/order/detail_pickup', {
order_id: item.relate_order_id
});
break;
case 'local':
this.$util.redirectTo('/pages/order/detail_local_delivery', {
order_id: item.relate_order_id
});
break;
case 'express':
this.$util.redirectTo('/pages/order/detail', {
order_id: item.relate_order_id
});
break;
default:
this.$util.redirectTo('/pages_tool/order/detail_virtual', {
order_id: item.relate_order_id
});
}
} else {
this.$util.redirectTo('/pages/order/detail_point', {
order_id: item.order_id
});
}
},
imageError(index) {
this.orderList[index].exchange_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .fixed {
position: relative;
top: 0;
}
/deep/ .empty {
padding-top: 0 !important;
}
.order-container {
width: 100vw;
height: 100vh;
}
.align-right {
text-align: right;
}
.order-item {
margin: $margin-updown 24rpx;
border-radius: 12rpx;
background: #fff;
position: relative;
.order-header {
display: flex;
align-items: center;
position: relative;
padding: $padding 24rpx 26rpx 24rpx;
&.waitpay {
padding-left: 70rpx;
.iconyuan_checked,
.iconyuan_checkbox {
font-size: $font-size-toolbar;
position: absolute;
top: 48%;
left: 20rpx;
transform: translateY(-50%);
}
.iconyuan_checkbox {
color: $color-tip;
}
}
.icondianpu {
display: inline-block;
line-height: 1;
margin-right: 12rpx;
font-size: $font-size-base;
}
.order-no {
font-size: 26rpx;
}
.status-name {
flex: 1;
text-align: right;
font-size: 26rpx;
font-weight: 600;
}
}
.order-body {
.goods-wrap {
display: flex;
position: relative;
padding: 0 24rpx 30rpx 24rpx;
&:last-of-type {
margin-bottom: 0;
}
.goods-img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
border-radius: $border-radius;
}
}
.goods-info {
flex: 1;
position: relative;
max-width: calc(100% - 180rpx);
display: flex;
flex-direction: column;
.pro-info {
flex: 1;
}
.goods-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.5;
font-size: $font-size-base;
color: $color-title;
}
.goods-sub-section {
width: 100%;
line-height: 1.3;
display: flex;
margin-top: 14rpx;
.goods-price {
font-size: $font-size-tag;
color: var(--price-color);
flex: 1;
font-weight: bold;
}
.goods-num {
font-size: $font-size-tag;
color: $color-tip;
flex: 1;
text-align: right;
line-height: 1;
.iconfont {
font-size: $font-size-tag;
}
}
.goods-type {
font-size: $font-size-tag;
}
.unit {
font-size: $font-size-tag;
margin-right: 2rpx;
}
view {
flex: 1;
line-height: 1.3;
display: flex;
flex-direction: column;
&:last-of-type {
text-align: right;
.iconfont {
line-height: 1;
font-size: $font-size-tag;
}
}
}
}
.goods-action {
text-align: right;
.action-btn {
line-height: 1;
padding: 14rpx 20rpx;
color: $color-title;
display: inline-block;
border-radius: $border-radius;
background: #fff;
border: 2rpx solid #999;
font-size: $font-size-tag;
margin-left: 10rpx;
}
}
}
}
.multi-order-goods {
width: calc(100vw - 96rpx);
white-space: nowrap;
margin: 0 24rpx 30rpx 24rpx!important;
position: relative;
.scroll-view {
width: 100%;
}
.goods-wrap {
padding: 0;
}
.goods-img {
min-width: 160rpx;
}
.shade {
position: absolute;
z-index: 5;
height: 100%;
width: 44rpx;
right: 0;
top: 0;
image {
width: 100%;
height: 100%;
}
}
}
}
.order-footer {
.order-base-info {
.total {
padding: $padding;
font-size: $font-size-tag;
background: rgba(248, 248, 248, 0.5);
display: flex;
margin: 0 24rpx;
& > text {
flex: 1;
line-height: 1;
margin-left: 10rpx;
}
}
.order-type {
padding-top: 20rpx;
flex: 0.5;
& > text {
line-height: 1;
}
}
}
.order-action {
text-align: right;
padding: 30rpx 24rpx;
position: relative;
.order-time {
position: absolute;
top: 35rpx;
left: 30rpx;
display: flex;
align-items: center;
font-size: 10px;
color:#b5b6b9;
image {
width: 26rpx;
height: 26rpx;
margin-right: 6rpx;
}
}
.action-btn {
line-height: 1;
padding: 20rpx 26rpx;
color: #333;
display: inline-block;
border-radius: $border-radius;
background: #fff;
border: 2rpx solid #999;
font-size: $font-size-tag;
margin-left: 10rpx;
}
}
}
}
.empty {
padding-top: 200rpx;
text-align: center;
.empty-image {
width: 180rpx;
height: 180rpx;
}
}
.order-nav {
width: 100vw;
height: 80rpx;
flex-direction: row;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
background: #fff;
display: flex;
position: fixed;
left: 0;
z-index: 998;
justify-content: space-around;
border-radius: 0px 0px 24rpx 24rpx;
.uni-tab-item {
width: 120rpx;
text-align: center;
}
.uni-tab-item-title {
display: inline-block;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1px solid #fff;
flex-wrap: nowrap;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
text-align: center;
font-size: 30rpx;
position: relative;
}
.uni-tab-item-title-active::after {
content: " ";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 6rpx;
background: linear-gradient(270deg, var(--base-color-light-9) 0%, var(--base-color) 100%);
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
}
</style>

309
pages_promotion/point/payment.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="order-container" :class="{ 'safe-area': isIphoneX }">
<!-- #ifdef MP-WEIXIN -->
<view class="payment-navbar" :style="{
'padding-top': menuButtonBounding.top + 'px',
height: menuButtonBounding.height + 'px'
}">
<view class="nav-wrap">
<text class="iconfont icon-back_light" @click="back"></text>
<view class="navbar-title">确认订单</view>
</view>
</view>
<view class="payment-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
<!-- #endif -->
<scroll-view scroll-y="true" class="order-scroll-container">
<view class="payment-navbar-block"></view>
<!-- 选择地址 -->
<template v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.is_virtual == 0">
<!-- 配送方式 -->
<view class="delivery-mode" v-if="orderCreateData.delivery &&orderPaymentData.delivery.express_type.length > 1">
<view class="action">
<view v-for="(deliveryItem, deliveryIndex) in orderPaymentData.delivery.express_type"
:key="deliveryIndex"
:class="{active: deliveryItem.name == orderCreateData.delivery.delivery_type}"
@click="selectDeliveryType(deliveryItem)">
{{ deliveryItem.title }}
<!-- 外圆角 -->
<view class="out-radio"></view>
</view>
</view>
</view>
<view class="address-box" :class="{'not-delivery-type': orderPaymentData.delivery.express_type.length <= 1}"
v-if="orderPaymentData.delivery.delivery_type != 'store'">
<block v-if="storeInfo.storeList.length > 1 && orderPaymentData.delivery.delivery_type == 'local'">
<view class="local-delivery-store" v-if="Object.keys(storeInfo.currStore).length" @click="$refs.deliveryPopup.open()">
<view class="info">
由 <text class="store-name">{{ storeInfo.currStore.store_name }}</text> 提供配送
</view>
<view class="cell-more">
<text>点击切换</text>
<text class="iconfont icon-right"></text>
</view>
</view>
<view v-else class="local-delivery-store">
<view class="info">
<text class="store-name">您的附近没有可配送的门店，请选择其他配送方式</text>
</view>
</view>
</block>
<view class="info-wrap" :class="{'local': orderPaymentData.delivery.delivery_type == 'local'}" v-if="orderCreateData.member_address" @click="selectAddress">
<view class="content">
<text class="name font-size-base">{{ orderCreateData.member_address.name ? orderCreateData.member_address.name : '' }}</text>
<text class="font-size-base mobile">{{ orderCreateData.member_address.mobile ? orderCreateData.member_address.mobile : '' }}</text>
<text class="cell-more iconfont icon-right"></text>
<view class="desc-wrap">
{{ orderCreateData.member_address.full_address ? orderCreateData.member_address.full_address : '' }}
{{ orderCreateData.member_address.address ? orderCreateData.member_address.address : '' }}
</view>
</view>
</view>
<view class="empty-wrap" v-else @click="selectAddress">
<view class="info">请设置收货地址</view>
<view class="cell-more">
<view class="iconfont icon-right"></view>
</view>
</view>
<!-- 外卖配送 -->
<block v-if="orderPaymentData.delivery.delivery_type == 'local'">
<view class="local-box" v-if="orderPaymentData.config.local.is_use && orderPaymentData.delivery.local.info && orderPaymentData.delivery.local.info.time_is_open == 1">
<view class="pick-block" @click="localtime">
<view class="font-size-base">送达时间</view>
<view class="time-picker">
<text :class="{'color-tip': !orderCreateData.buyer_ask_delivery_title}">{{ orderCreateData.buyer_ask_delivery_title ? orderCreateData.buyer_ask_delivery_title : '请选择送达时间' }}</text>
<text class="iconfont icon-right cell-more"></text>
</view>
</view>
</view>
</block>
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
</view>
<view class="store-box" :class="{'not-delivery-type': orderPaymentData.delivery.express_type.length <= 1}" v-if="orderPaymentData.delivery.delivery_type == 'store' && storeInfo.currStore">
<block v-if="storeInfo.currStore">
<view @click="openSiteDelivery" class="store-info">
<view class="store-address-info">
<view class="info-wrap">
<view class="title">
<text>{{ storeInfo.currStore.store_name }}</text>
<view class="cell-more iconfont icon-right"></view>
</view>
<view class="store-detail">
<view v-if="storeInfo.currStore.open_date">
营业时间：{{ storeInfo.currStore.open_date }}</view>
<view>地址：{{ storeInfo.currStore.full_address }}
{{ storeInfo.currStore.address }}
</view>
</view>
</view>
</view>
</view>
<view class="mobile-wrap store-mobile">
<view class="form-group">
<text class="text">姓名</text>
<input type="text" placeholder-class="color-tip placeholder" class="input" v-model="member_address.name" disabled />
</view>
</view>
<view class="mobile-wrap store-mobile">
<view class="form-group">
<text class="text">预留手机</text>
<input type="number" maxlength="11" placeholder="请输入您的手机号码"
placeholder-class="color-tip placeholder" class="input" v-model="member_address.mobile" />
</view>
</view>
<view class="store-time">
<view class="left">自提时间</view>
<view class="right" @click="storetime">
{{orderCreateData.buyer_ask_delivery_title}}
<text class="iconfont icon-right"></text>
</view>
</view>
</block>
<view v-else class="empty">当前无自提门店，请选择其它配送方式</view>
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
</view>
</template>
<!-- 虚拟商品展示手机号 -->
<view class="mobile-wrap" v-if="orderPaymentData.is_virtual == 1 && orderCreateData.member_address">
<view class="tips color-base-text">
<text class="iconfont icon-gantanhao"></text>
购买虚拟类商品需填写手机号，方便商家与您联系
</view>
<view class="form-group">
<text class="iconfont icon-dianhua2"></text>
<text class="text">手机号码</text>
<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
</view>
</view>
<!-- 店铺 -->
<view class="site-wrap" :class="orderPaymentData.exchange_info.type == 2 || orderPaymentData.exchange_info.type == 3 ? 'margin-top' : ''">
<view class="site-body">
<view class="goods-wrap">
<block v-if="orderPaymentData.exchange_info.type == 2">
<view class="goods-img">
<image :src="orderPaymentData.exchange_info.image ? $util.img(orderPaymentData.exchange_info.image) : $util.img('public/uniapp/point/coupon.png')" @error="imageError()" mode="aspectFill"/>
</view>
</block>
<block v-else-if="orderPaymentData.exchange_info.type == 3">
<view class="goods-img">
<image :src="orderPaymentData.exchange_info.image ? $util.img(orderPaymentData.exchange_info.image) : $util.img('public/uniapp/point/hongbao.png')" @error="imageError()" mode="aspectFill"/>
</view>
</block>
<block v-else>
<view class="goods-img">
<image :src="$util.img(orderPaymentData.exchange_info.image)" @error="imageError()" mode="aspectFill"/>
</view>
</block>
<view class="goods-info">
<view class="goods-name">{{ orderPaymentData.exchange_info.name }}</view>
<view class="goods-sub-section">
<view v-if="orderPaymentData.exchange_info.pay_type == 1" class="color-base-text">
<text class="goods-price">{{ orderPaymentData.exchange_info.point }}</text>
<text class="unit">积分</text>
<template v-if="orderPaymentData.exchange_info.price != '0.00'">
<text class="unit">+{{ $lang('common.currencySymbol') }}</text>
<text class="goods-price">{{ orderPaymentData.exchange_info.price }}</text>
</template>
</view>
<view>
<text class="font-size-tag">x</text>
<text class="font-size-base">{{ orderPaymentData.goods_num }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="site-footer">
<view class="order-cell">
<text class="tit">买家留言</text>
<view class="box"><input type="text" placeholder="留言前建议先与商家协调一致" placeholder-class="color-tip" v-model="orderCreateData.buyer_message" /></view>
</view>
</view>
</view>
<!-- 金额 -->
<view class="order-money">
<view class="order-cell">
<text class="tit">所需积分</text>
<view class="box">
<text class="money">{{ orderPaymentData.point }}</text>
<text class="unit">积分</text>
</view>
</view>
<view class="order-cell" v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.delivery_money > 0">
<text class="tit">运费</text>
<view class="box">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text class="money">{{ orderPaymentData.delivery_money | moneyFormat }}</text>
</view>
</view>
</view>
<view class="error-message" v-if="orderPaymentData.delivery && orderPaymentData.delivery.delivery_type == 'local' && orderPaymentData.delivery && orderPaymentData.delivery.error && orderPaymentData.delivery.error !== ''">
{{orderPaymentData.delivery.error_msg}}
</view>
<view class="order-submit" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="order-settlement-info">
<text class="font-size-base color-tip margin-right">共{{ orderPaymentData.goods_num }}件</text>
<text class="font-size-base">合计：</text>
<text class="color-base-text money">{{ orderPaymentData.point }}</text>
<text class="color-base-text unit">积分</text>
<template v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.order_money > 0">
<text class="color-base-text unit">+{{ $lang('common.currencySymbol') }}</text>
<text class="color-base-text money">{{ orderPaymentData.order_money | moneyFormat }}</text>
</template>
</view>
<view class="submit-btn">
<button v-if="createBtn()" type="primary" class="mini" size="mini" @click="openChoosePayment()">提交订单</button>
<button v-else class="no-submit mini" size="mini">
<block v-if="orderPaymentData.delivery && orderPaymentData.delivery.delivery_type == 'local' && orderPaymentData.delivery && orderPaymentData.delivery.error && orderPaymentData.delivery.start_money > orderPaymentData.price">
差{{ orderPaymentData.delivery.start_money-orderPaymentData.price | moneyFormat }}起送
</block>
<block v-else >提交订单</block>
</button>
</view>
</view>
<div class="order-submit-block"></div>
<!-- 门店列表弹窗 -->
<uni-popup ref="deliveryPopup" type="bottom">
<view class="delivery-popup popup">
<view class="popup-header">
<text class="tit">已为您甄选出附近所有相关门店</text>
<text class="iconfont icon-close" @click="closePopup('deliveryPopup')"></text>
</view>
<view class="popup-body store-popup" :class="{ 'safe-area': isIphoneX }">
<view class="delivery-content">
<view class="item-wrap" v-for="(item, index) in storeInfo.storeList" :key="index" @click="selectPickupPoint(item)">
<view class="detail">
<view class="name" :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''">
<text>{{ item.store_name }}</text>
<text v-if="item.distance">({{ item.distance }}km)</text>
</view>
<view class="info">
<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">
营业时间：{{ item.open_date }}
</view>
<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">
地址：{{ item.full_address }}{{ item.address }}
</view>
</view>
</view>
<view class="icon" v-if="item.store_id == orderPaymentData.delivery.store_id"><text class="iconfont icon-yuan_checked color-base-text"></text></view>
</view>
<view v-if="!storeInfo.storeList" class="empty">所选择收货地址附近没有可以自提的门店</view>
</view>
</view>
</view>
</uni-popup>
</scroll-view>
<!-- 选择支付方式弹窗 -->
<ns-payment ref="choosePaymentPopup" :payMoney="orderPaymentData.order_money" @confirm="orderCreate"></ns-payment>
<loading-cover ref="loadingCover"></loading-cover>
<!-- 门店自提、同城配送时间选择 -->
<ns-select-time @selectTime='selectTime' ref="TimePopup"></ns-select-time>
</view>
</template>
<script>
import payment from './public/js/payment.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
components: {
uniPopup,
},
mixins: [payment]
};
</script>
<style lang="scss">
@import "@/common/css/order_parment.scss";
</style>
<style scoped>
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background: none;
max-height: unset !important;
overflow-y: hidden !important;
}
>>>.uni-popup__wrapper {
border-radius: 20rpx 20rpx 0 0;
}
>>>.uni-popup {
z-index: 8;
}
</style>

987
pages_promotion/point/public/css/list.scss Normal file
View File

@@ -0,0 +1,987 @@
.conteiner {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
.point-scroll-view {
flex: 1;
height: 0;
}
}
.point-navbar {
width: 100vw;
padding-bottom: 20rpx;
display: flex;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 100;
background-image: linear-gradient(360deg, #F8F8F8 0%, #E74A32 100%);
background-size: 100% 400rpx;
background-position-y: top;
background-repeat: no-repeat;
.nav-wrap {
height: 100%;
display: flex;
padding: 0 24rpx;
box-sizing: border-box;
}
.back {
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
.iconfont {
color: #222222;
font-size: 36rpx;
font-weight: bold;
}
}
.search {
flex: 1;
background: #fff;
margin: 0 15rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 20rpx;
.tips {
color: #4A4A4A;
font-size: 24rpx;
margin-left: 20rpx;
}
}
.sign {
image {
width: 100%;
height: 100%;
}
}
}
.point-navbar-block {
padding-bottom: 20rpx;
}
.point-wrap {
background-image: linear-gradient(360deg, #F8F8F8 0%, #E74A32 100%);
background-size: 100% 380rpx;
background-repeat: no-repeat;
// #ifndef MP-WEIXIN
padding-top: 20rpx
// #endif
}
/* 说明弹框 */
.tips-layer {
background: #fff;
z-index: 999;
height: 40%;
width: 100%;
.head {
position: relative;
}
.title {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: $font-size-toolbar;
font-weight: 700;
}
text {
position: absolute;
top: 8rpx;
right: 22px;
font-size: $font-size-toolbar;
font-weight: 500;
}
.body {
width: 100%;
height: calc(100% - 80rpx);
overflow-y: scroll;
.detail {
padding: 20rpx;
.font-size-base {
margin-bottom: 10rpx;
}
}
}
}
.lineheight-clear {
line-height: 1!important;
}
// 商品列表双列样式
.goods-list.double-column {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.goods-item {
flex: 1;
position: relative;
background-color: #fff;
flex-basis: 48%;
max-width: calc((100% - 24rpx) / 2);
margin-right: 24rpx;
margin-bottom: 24rpx;
border-radius: 18rpx;
&:nth-child(2n) {
margin-right: 0;
}
.goods-img {
position: relative;
overflow: hidden;
padding-top: 100%;
border-top-left-radius: 18rpx;
border-top-right-radius: 18rpx;
image {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.goods-tag{
color: #fff;
line-height: 1;
padding: 8rpx 16rpx;
position: absolute;
border-bottom-right-radius: $border-radius;
top: 0;
left: 0;
font-size: $font-size-goods-tag;
}
.goods-tag-img {
position: absolute;
border-top-left-radius: $border-radius;
width: 80rpx;
height: 80rpx;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-wrap {
padding: 0 20rpx 24rpx 20rpx;
}
.goods-name {
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 20rpx;
font-size: 26rpx;
color: #333;
font-weight: 600;
}
.discount-price {
display: flex;
flex-wrap: wrap;
align-items: center;
font-weight: bold;
line-height: 1;
margin-top: 16rpx;
color: var(--price-color);
overflow: hidden;
flex: 1;
width: 0;
margin-right: 20rpx;
view{
line-height: 1;
color: var(--price-color);
}
.unit {
margin-right: 6rpx;
}
.point{
font-size: 32rpx;
}
}
.pro-info {
display: flex;
margin-top: 16rpx;
justify-content: flex-start;
& > view {
line-height: 1;
display: flex;
align-items: center;
button {
padding: 0 16rpx;
line-height: 2;
}
&:nth-child(2) {
&:before{
content: ' ';
width: 2rpx;
background-color: #D8D8D8;
height: 20rpx;
margin: 0 16rpx;
}
}
}
}
.member-price-tag {
display: inline-block;
width: 60rpx;
line-height: 1;
margin-left: 6rpx;
image {
width: 100%;
}
}
.lineheight-clear {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.btn {
width: 96rpx;
height: 50rpx;
line-height: 50rpx;
background: #FF6C24;
border-radius: 50rpx;
text-align: center;
color: #fff;
font-size: 26rpx;
margin-top: 20rpx;
}
}
}
}
.head-wrap {
width: 100vw;
line-height: 1;
position: relative;
height: 270rpx;
& > image {
width: 100%;
}
.wrap {
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
top: 0;
left: 0;
}
.member-wrap {
height: 190rpx;
padding: 50rpx 30rpx 30rpx 30rpx;
display: flex;
align-items: center;
box-sizing: border-box;
.headimg {
width: 100rpx;
height: 100rpx;
background: #fff;
border: 2px solid #fff;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.point {
margin-left: 30rpx;
color: var(--btn-text-color);
font-size: 36rpx;
}
.point-name {
font-size: $font-size-tag;
color: var(--btn-text-color);
margin-left: 4rpx;
margin-top: 5rpx;
}
.rule {
flex: 1;
text-align: right;
color: var(--btn-text-color);
}
.icon-wenhao {
font-size: 24rpx;
color: var(--btn-text-color);
margin-right: 6rpx;
}
}
.action-wrap {
// margin: 0 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
height: 80rpx;
background-color: rgba(255, 255, 255, .1);
view {
line-height: 1;
text-align: center;
width: calc((100vw - 1rpx) / 2);
color: var(--btn-text-color);
text {
font-size: $font-size-tag;
margin-left: 8rpx;
}
// &:first-child {
// margin-right: 30rpx;
// }
&.split {
width: 1rpx;
height: 50rpx;
background-color: rgba(238, 238, 238, .3);
flex-shrink: 0;
}
image {
width: 100%;
}
}
}
.no-login {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text {
color: #fff;
}
.login-btn {
display: inline-block;
height: 70rpx;
line-height: 70rpx;
width: 200rpx;
border: 1px solid #fff;
border-radius: $border-radius;
margin-bottom: 20rpx;
}
}
}
.ns-adv {
margin: 0;
border-radius: 0;
overflow: hidden;
line-height: 1;
image {
width: 100%;
border-radius: 0!important;
}
}
.body-wrap {
margin-top: 20rpx;
&.no-login{
margin-top: 20rpx;
}
.point-exchange-wrap {
padding: 0 24rpx;
margin-top: 30rpx;
}
.type-wrap {
display: flex;
align-items: center;
.type-name {
font-size: 30rpx;
color: $color-title;
line-height: 1;
}
>view {
width: 2rpx;
height: 23rpx;
background-color: $color-tip;
margin: 0 20rpx;
}
.type-sub {
font-size: $font-size-tag;
color: $color-tip;
line-height: 1;
}
}
.list-wrap {
width: 100%;
.list-wrap-scroll {
width: 100%;
flex-direction: row;
// white-space: nowrap;
line-height: 1;
}
.list-wrap-item {
display: inline-block;
width: 330rpx;
overflow: hidden;
margin-right: 30rpx;
margin-top: 20rpx;
position: relative;
&.coupon-list-wrap-item {
// height: 170rpx;
}
&.hongbao-list-wrap-item {
height: 141rpx;
}
&:nth-child(2n+2){
margin-right: 0;
}
.img-box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
image {
width: 100%;
height: 100%;
}
}
.content {
position: relative;
z-index: 9;
//优惠券样式
.coupon{
// background-color: #FFEAEA;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: $border-radius;
display: flex;
padding:$margin-updown 0;
.coupon_right{
position:relative;
width:156rpx;
max-width: 156rpx;
.coupon_btn{
margin: 10rpx auto 0;
width:80rpx;
height:40rpx;
line-height: 40rpx;
font-size: $font-size-tag;
text-align: center;
border-radius: 10rpx;
border-width: 1px;
border-style: solid;
background: #FF3D3D;
color: #fff;
}
.coupon_num {
margin-top:10rpx;
text-align: center;
color: #FF3D3D;
}
&::after{
position :absolute;
top:50%;
margin-left: 0;
content:"";
width:0;
height:96%;
border-left: 2px dashed #FD463E;
transform: translateY(-50%);
}
}
.coupon_left{
flex:1;
width: 0;
text-align: left;
padding:0 $padding;
display: flex;
align-items: center;
.price{
margin-top: 0 !important;
padding:0;
font-weight: 600;
flex: 1;
width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #FD463E;
font-size: 56rpx;
text{
font-size: $font-size-tag;
color: #FD463E;
}
}
.coupon-info {
flex:1;
width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 80%;
}
.coupon_condition{
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26rpx;
font-weight: bold;
color: #FD463E;
}
.coupon_type {
color: #FD463E;
font-size: 24rpx;
}
}
}
.hongbao {
.coupon_left {
.price, .coupon_condition {
color: #FFFFFF;
}
}
.coupon_right {
.coupon_num {
color: #FFFFFF;
}
.coupon_btn {
color: #fff;
border-color: #fff;
}
&::after{
position :absolute;
top:0;
margin-left: 0;
content:"";
width:0;
height:100%;
border-left:0 ;
opacity: 0.2;
}
}
}
.coupon-price-wrap {
width: 100%;
height: 105rpx;
display: flex;
justify-content: space-between;
.coupon-price {
font-size: 48rpx;
margin-top: 10rpx;
margin-left: 20rpx;
text {
font-size: $font-size-tag;
}
}
}
.coupon-point {
.coupon-point-num {
width: 160rpx;
height: 44rpx;
position: relative;
image {
width: 100%;
height: 100%;
position: absolute;
}
text {
position: relative;
z-index: 9;
color: #FFFFFF;
font-size: 24rpx;
display: inline-block;
width: 100%;
line-height: 44rpx;
text-align: center;
vertical-align: top;
}
}
.coupon-conditions {
font-size: $font-size-activity-tag;
color: $color-tip;
line-height: 1;
margin-top: $font-size-tag;
}
}
.coupon-name {
font-size: $font-size-tag;
color: $color-title;
margin-top: 23rpx;
line-height: 1;
padding: 0 22rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 红包
&.hongbao-content {
background-color: #FFFFFF;
border-radius: 20rpx;
padding-bottom: 30rpx;
}
.hongbao-img {
height: 330rpx;
image {
width: 100%;
height: 100%;
}
}
.price {
font-size: $font-size-base;
color: $color-title;
line-height: 1;
padding-left: 26rpx;
margin-top: 20rpx;
}
.point {
font-size: $font-size-toolbar;
padding-left: 26rpx;
margin-top: 17rpx;
line-height: 1;
text {
font-size: $font-size-tag;
}
}
.stock {
font-size: $font-size-activity-tag;
color: $color-tip;
line-height: 1;
padding-left: 26rpx;
margin-top: 20rpx;
}
}
}
}
}
.exchange-coupon {
.list-wrap {
width: 100%;
overflow-x: scroll;
.list-wrap-scroll {
flex-direction: column;
display: flex;
max-height: 388rpx;
flex-wrap: wrap;
&.single-row {
max-height: 192rpx;
}
}
.list-wrap-item {
width: 424rpx;
margin-right: 16rpx;
margin-top: 18rpx;
}
}
}
.type-wrap-box {
display: flex;
justify-content: space-between;
.more {
color: #ff5251;
cursor: pointer;
}
}
.card-category-title{
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #222;
padding: 0;
font-weight: bold;
.before-line,.after-line{
width: 30rpx;
height: 4rpx;
margin: 0 10rpx;
background-color: #222;
}
}
.head-box{
display: flex;
flex-direction: column;
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 24rpx;
box-sizing: border-box;
width: calc(100% - 48rpx);
margin: 0 24rpx 20rpx 24rpx;
position: relative;
.account-content{
display: flex;
justify-content: space-between;
align-items: center;
.left{
display: flex;
align-items: center;
image{
width: 88rpx;
height: 88rpx;
}
view{
font-size: 32rpx;
font-weight: bold;
margin-left: 25rpx;
}
}
.right{
display: flex;
align-items: baseline;
.point{
font-weight: bold!important;
font-size: 38rpx;
color: #FF002D ;
}
.text{
font-size: 28rpx;
font-weight: bold;
margin: 0 10rpx;
}
}
}
.remark{
display: flex;
align-items: center;
margin-top: 30rpx;
padding: 25rpx 0 0;
border-top: 2rpx solid #F2F2F2;
.label{
border-radius: 4rpx;
border: 2rpx solid #FE172E;
color: #FE172E;
padding: 2rpx 8rpx;
font-size: 22rpx;
line-height: 1;
font-weight: bold;
}
.text{
font-size: 24rpx;
font-weight: bold;
margin-left: 30rpx;
line-height: 1;
}
}
}
.menu-wrap {
background: #fff;
border-radius: 24rpx;
margin: 20rpx 24rpx;
padding: 40rpx 0 30rpx 0;
.menu-list {
display: flex;
.menu-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.menu-tag {
position: absolute;
z-index: 2;
right: 0;
width: 58rpx;
height: 26rpx;
}
.menu-img {
width: 86rpx;
height: 86rpx;
}
.title {
margin-top: 16rpx;
font-size: 26rpx;
color: #222;
}
}
}
}
.poster-wrap {
margin: 20rpx 24rpx;
display: flex;
.poster-item {
flex: 1;
border-radius: 16rpx;
overflow: hidden;
line-height: 1;
image {
width: 100%;
height: auto;
will-change: transform;
line-height: 1;
}
&:last-child {
margin-left: 20rpx;
}
}
}
.recharge-list-wrap {
margin: 20rpx 24rpx;
display: flex;
.item-wrap {
overflow: hidden;
background: linear-gradient(321deg, #F4402B 0%, #FD7C40 100%);
border-radius: 16rpx;
position: relative;
padding-top: 40rpx;
width: calc((100% - 60rpx) / 4);
margin-right: 20rpx;
text-align: center;
&:nth-child(4) {
margin-right: 0;
}
&:before {
content: " ";
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
background: #f8f8f8;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
}
.recharge {
font-size: 26rpx;
color: #FFF20C;
white-space: nowrap;
padding: 0 10rpx;
overflow: hidden;
}
.point {
font-size: 20rpx;
color: #fff;
white-space: nowrap;
padding: 0 10rpx;
overflow: hidden;
}
.btn {
margin-top: 30rpx;
line-height: 60rpx;
font-size: 24rpx;
font-weight: 600;
color: #FFFFFF;
border-top: 2rpx dashed #fff;
}
}
}
.exchange-hongbao {
.coupon_left {
.price text {
color: #fff!important;
}
}
.coupon_right {
width: 120rpx!important;
max-width: 120rpx;
}
}

581
pages_promotion/point/public/js/payment.js Normal file
View File

@@ -0,0 +1,581 @@
export default {
data() {
return {
isIphoneX: false,
orderCreateData: {
member_address: {
name: '',
mobile: ''
}
},
orderPaymentData: {
exchange_info: {
type: 0
},
delivery: {
delivery_type: '',
express_type: [],
member_address: {
name: '',
mobile: ''
},
local: {
info: {
start_time: 0,
end_time: 0,
time_week: []
}
},
},
},
isSub: false,
tempData: null,
// 门店信息
storeInfo: {
storeList: [], //门店列表
currStore: {} //当前选择门店
},
// 自提地址
member_address: {
name: '',
mobile: ''
},
// 当前时间
timeInfo: {
week: 0,
start_time: 0,
end_time: 0,
showTime: false,
showTimeBar: false
},
deliveryWeek: "",
// 选择自提、配送防重判断
judge: true,
menuButtonBounding: {}
};
},
methods: {
// 显示弹出层
openPopup(ref) {
this.$refs[ref].open();
},
// 关闭弹出层
closePopup(ref) {
if (this.tempData) {
Object.assign(this.orderCreateData, this.tempData);
Object.assign(this.orderPaymentData, this.tempData);
this.tempData = null;
this.$forceUpdate();
}
this.$refs[ref].close();
},
// 选择收货地址
selectAddress() {
var params = {
back: '/pages_promotion/point/payment',
local: 0,
type: 1
}
// 外卖配送需要定位地址
if (this.orderPaymentData.delivery.delivery_type == 'local') {
params.local = 1;
params.type = 2;
}
this.$util.redirectTo('/pages_tool/member/address', params);
},
// 获取订单初始化数据
getOrderPaymentData() {
this.orderCreateData = uni.getStorageSync('exchangeOrderCreateData');
var pay_flag = uni.getStorageSync("pay_flag"); // 支付中标识，防止返回时，提示,跳转错误
if (!this.orderCreateData) {
if (pay_flag == 1) {
uni.removeStorageSync("pay_flag");
} else {
this.$util.showToast({
title: '未获取到创建订单所需数据！'
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 1500);
}
return;
}
// 获取经纬度
if (this.location) {
this.orderCreateData.latitude = this.location.latitude;
this.orderCreateData.longitude = this.location.longitude;
}
this.$api.sendRequest({
url: '/pointexchange/api/ordercreate/payment',
data: this.orderCreateData,
success: res => {
if (res.code >= 0) {
this.orderPaymentData = res.data;
this.orderPaymentData.timestamp = res.timestamp;
this.handlePaymentData();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
} else {
this.$util.showToast({
title: '未获取到创建订单所需数据！'
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 1500);
}
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
})
},
// 处理结算订单数据
handlePaymentData() {
this.orderCreateData.delivery = {};
this.orderCreateData.buyer_message = '';
var data = JSON.parse(JSON.stringify(this.orderPaymentData));
this.orderCreateData.order_key = data.order_key;
this.orderCreateData.delivery.store_id = 0;
this.orderCreateData.member_address = data.delivery.member_address;
// 店铺配送方式
if (data.delivery.express_type != undefined && data.delivery.express_type[0] != undefined) {
let deliveryStorage = uni.getStorageSync('delivery');
let delivery = data.delivery.express_type[0];
data.delivery.express_type.forEach(item => {
if (deliveryStorage && item.name == deliveryStorage.delivery_type) {
delivery = item;
}
});
this.selectDeliveryType(delivery);
}
if (this.orderPaymentData.is_virtual) this.orderCreateData.member_address = {
mobile: data.member_account.mobile != '' ? data.member_account.mobile : ''
};
// Object.assign(this.orderPaymentData, this.orderCreateData);
this.orderCalculate();
},
// 转化时间字符串
getTimeStr(val) {
var h = parseInt(val / 3600).toString();
var m = parseInt((val % 3600) / 60).toString();
if (m.length == 1) {
m = '0' + m;
}
if (h.length == 1) {
h = '0' + h;
}
return h + ':' + m;
},
// 订单计算
orderCalculate() {
var data = this.$util.deepClone(this.orderCreateData);
data.delivery = JSON.stringify(data.delivery);
if (this.orderCreateData.delivery.delivery_type == 'store') {
data.member_address = JSON.stringify(this.member_address);
} else {
data.member_address = JSON.stringify(data.member_address);
}
this.$api.sendRequest({
url: '/pointexchange/api/ordercreate/calculate',
data,
success: res => {
if (res.code >= 0) {
this.orderPaymentData.member_address = res.data.member_address;
this.orderPaymentData.delivery_money = res.data.delivery_money;
this.orderPaymentData.order_money = res.data.order_money;
Object.assign(this.orderPaymentData.delivery, res.data.delivery);
if (res.data.local_config) this.orderPaymentData.local_config = res.data
.config.local;
//时间选择判断
if (res.data.delivery.delivery_store_info) {
this.orderPaymentData.delivery_store_info = JSON.parse(res.data.delivery.delivery_store_info);
if (this.judge) {
if (this.orderPaymentData.delivery.delivery_type == "store") {
this.storetime('no');
} else if (this.orderPaymentData.delivery.delivery_type == 'local') {
this.localtime('no');
}
this.judge = false;
}
}
this.createBtn();
this.$forceUpdate();
} else {
this.$util.showToast({
title: res.message
});
}
},
})
},
/**
* 订单创建验证
*/
createBtn() {
if (this.orderPaymentData.delivery &&
this.orderPaymentData.delivery.delivery_type == 'local' &&
this.orderPaymentData.delivery &&
this.orderPaymentData.delivery.error &&
this.orderPaymentData.delivery.start_money > this.orderPaymentData.price) {
return false;
}
if (this.orderPaymentData.delivery &&
this.orderPaymentData.delivery.delivery_type == 'local' &&
this.orderPaymentData.delivery &&
this.orderPaymentData.delivery.error &&
this.orderPaymentData.delivery.error !== '') {
return false;
}
return true;
},
// 订单创建
orderCreate() {
if (this.verify()) {
if (this.isSub) return;
this.isSub = true;
uni.setStorageSync('paySource', 'pointexchange');
var data = this.$util.deepClone(this.orderCreateData);
data.delivery = JSON.stringify(data.delivery);
if (this.orderCreateData.delivery.delivery_type == 'store') {
data.member_address = JSON.stringify(this.member_address);
} else {
data.member_address = JSON.stringify(data.member_address);
}
this.$api.sendRequest({
url: '/pointexchange/api/ordercreate/create',
data,
success: res => {
uni.hideLoading();
if (res.code >= 0) {
if (this.orderPaymentData.exchange_info.type == 1 && this.orderPaymentData.order_money != '0.00') {
let orderCreateData = uni.getStorageSync('exchangeOrderCreateData');
orderCreateData.out_trade_no = res.data;
uni.setStorageSync('exchangeOrderCreateData', orderCreateData);
this.$refs.choosePaymentPopup.getPayInfo(res.data);
this.isSub = false;
} else {
this.$util.redirectTo('/pages_promotion/point/result', {}, 'redirectTo');
}
} else {
this.isSub = false;
if (res.data.error_code == 10 || res.data.error_code == 12) {
uni.showModal({
title: '订单未创建',
content: res.message,
confirmText: '去设置',
success: res => {
if (res.confirm) {
this.selectAddress();
}
}
})
} else {
this.$util.showToast({
title: res.message
});
}
}
},
fail: res => {
uni.hideLoading();
this.isSub = false;
}
})
}
},
// 订单验证
verify() {
if (this.orderPaymentData.exchange_info.type == 1) {
if (this.orderPaymentData.is_virtual == 1) {
if (!this.orderCreateData.member_address.mobile.length) {
this.$util.showToast({
title: '请输入您的手机号码'
});
return false;
}
if (!this.$util.verifyMobile(this.orderCreateData.member_address.mobile)) {
this.$util.showToast({
title: '请输入正确的手机号码'
});
return false;
}
}
if (this.orderPaymentData.is_virtual == 0) {
if (!this.orderCreateData.delivery || !this.orderCreateData.delivery.delivery_type) {
this.$util.showToast({
title: '商家未设置配送方式'
});
return false;
}
if (this.orderCreateData.delivery.delivery_type != 'store') {
if (!this.orderCreateData.member_address) {
this.$util.showToast({
title: '请先选择您的收货地址'
});
return false;
}
}
if (this.orderCreateData.delivery.delivery_type == 'store') {
if (!this.orderCreateData.delivery.store_id) {
this.$util.showToast({
title: '没有可提货的门店,请选择其他配送方式'
});
return false;
}
if (!this.member_address.mobile) {
this.$util.showToast({
title: '请输入预留手机'
});
return false;
}
if (!this.$util.verifyMobile(this.member_address.mobile)) {
this.$util.showToast({
title: '请输入正确的预留手机'
});
return false;
}
if (!this.orderCreateData.delivery.buyer_ask_delivery_time.start_date || !this.orderCreateData.delivery.buyer_ask_delivery_time.end_date) {
this.$util.showToast({
title: '请选择自提时间'
});
return false;
}
}
if (this.orderCreateData.delivery.delivery_type == 'local') {
if (!this.orderCreateData.delivery.store_id) {
this.$util.showToast({
title: '没有可配送的门店,请选择其他配送方式'
});
return false;
}
if (this.orderPaymentData.config.local.is_use && this.orderPaymentData.delivery.local.info && this.orderPaymentData.delivery.local.info.time_is_open == 1 && (!this.orderCreateData.delivery.buyer_ask_delivery_time.start_date || !this.orderCreateData.delivery.buyer_ask_delivery_time.end_date)) {
this.$util.showToast({
title: '请选择配送时间'
});
return false;
}
}
}
}
return true;
},
// 显示店铺配送信息
openSiteDelivery() {
this.tempData = {
delivery: this.$util.deepClone(this.orderPaymentData.delivery)
};
this.$refs.deliveryPopup.open();
},
// 选择配送方式
selectDeliveryType(data) {
uni.setStorageSync('delivery', {
delivery_type: data.name,
delivery_type_name: data.title
});
this.orderCreateData.delivery.delivery_type = data.name;
this.orderCreateData.delivery.delivery_type_name = data.title;
// 如果是门店配送
if (data.name == 'store') {
this.storeSelected(data);
this.member_address.name = this.orderPaymentData.member_account.nickname;
if (!this.member_address.mobile) this.member_address.mobile = this.orderPaymentData.member_account.mobile != '' ? this.orderPaymentData.member_account.mobile : '';
}
if (data.name == 'local') {
this.storeSelected(data);
}
// Object.assign(this.orderPaymentData, this.orderCreateData);
this.judge = true;
this.orderCalculate();
this.$forceUpdate();
},
// 切换到门店
storeSelected(data) {
// 门店列表
this.storeInfo.storeList = data.store_list;
let store = data.store_list[0] ? data.store_list[0] : null;
this.selectPickupPoint(store);
},
// 选择自提点
selectPickupPoint(store_item) {
if (store_item) {
this.orderCreateData.delivery.store_id = store_item.store_id;
this.storeInfo.currStore = store_item;
// 存储所选门店
let delivery = uni.getStorageSync('delivery') || {
name: this.orderCreateData.delivery.delivery_type,
title: this.orderCreateData.delivery.delivery_type_name
};
delivery.store_id = store_item.store_id;
uni.setStorageSync('delivery', delivery)
} else {
this.orderCreateData.delivery.store_id = 0;
this.storeInfo.currStore = {};
}
this.orderCreateData.delivery.buyer_ask_delivery_time = {
start_date: '',
end_date: ''
};
this.orderCreateData.buyer_ask_delivery_title = '';
// Object.assign(this.orderPaymentData, this.orderCreateData);
this.orderCalculate();
this.$forceUpdate();
this.$refs['deliveryPopup'].close();
},
imageError() {
let imageUrl = ''
if (this.orderPaymentData.exchange_info.type == 1) {
imageUrl = this.$util.img('public/uniapp/point/gift.png');
} else if (this.orderPaymentData.exchange_info.type == 2) {
imageUrl = this.$util.img('public/uniapp/point/coupon.png');
} else if (this.orderPaymentData.exchange_info.type == 3) {
imageUrl = this.$util.img('public/uniapp/point/hongbao.png');
} else {
imageUrl = this.$util.getDefaultImage().goods;
}
this.orderPaymentData.exchange_info.image = imageUrl;
this.$forceUpdate();
},
// 获取时间
getTime() {
// 必须是字符串,跟后端一致
let weeks = ['0', '1', '2', '3', '4', '5', '6'];
let week = new Date().getDay();
this.timeInfo.week = weeks[week];
},
navigateTo(sku_id) {
this.$util.redirectTo('/pages/goods/detail', {
sku_id
});
},
// 显示选择支付方式弹框
openChoosePayment() {
if (this.verify() && this.orderPaymentData.exchange_info.type == 1 && this.orderPaymentData.order_money != '0.00') this.$refs.choosePaymentPopup.open();
else this.orderCreate();
},
/**
* 同城配送数据处理
*/
localtime(type = '') {
let data = this.$util.deepClone(this.orderPaymentData.delivery.local.info);
if (data.delivery_time) {
data.end_time = data.delivery_time[(data.delivery_time.length - 1)].end_time;
}
let obj = {
delivery: this.orderCreateData.delivery,
dataTime: data
}
this.$refs.TimePopup.open(obj, type);
},
/**
* 门店自提数据处理
*/
storetime(type = '') {
if (this.orderPaymentData.delivery.delivery_store_info) {
let data = this.$util.deepClone(this.storeInfo.currStore);
data.delivery_time = typeof data.delivery_time == 'string' && data.delivery_time ? JSON.parse(data
.delivery_time) : data.delivery_time;
if (!data.delivery_time || data.delivery_time.length == undefined && !data.delivery_time.length) {
data.delivery_time = [{
start_time: data.start_time,
end_time: data.end_time
}]
}
let obj = {
delivery: this.orderCreateData.delivery,
dataTime: data
}
this.$refs.TimePopup.open(obj, type);
this.$forceUpdate();
}
},
/**
* 弹窗返回数据
*/
selectTime(data) {
if (data.data && data.data.month) {
this.orderCreateData.delivery.buyer_ask_delivery_time = {
start_date:data.data.start_date,
end_date:data.data.end_date
};
if (data.data.title == '今天' || data.data.title == '明天') {
this.orderCreateData.buyer_ask_delivery_title = data.data.title + '(' + data.data.time + ')'
} else {
this.orderCreateData.buyer_ask_delivery_title = data.data.month + '(' + data.data.time + ')'
}
this.orderCalculate();
this.$forceUpdate();
}
},
back() {
uni.navigateBack({
delta: 1
});
}
},
onShow() {
if (uni.getStorageSync('addressBack')) {
uni.removeStorageSync('addressBack');
}
// 判断登录
if (!this.storeToken) {
this.$util.redirectTo('/pages_tool/login/login');
} else {
this.getOrderPaymentData();
}
this.judge = true;
this.getTime();
this.isIphoneX = this.$util.uniappIsIPhoneX()
},
onHide() {
if (this.$refs.loadingCover) this.$refs.loadingCover.show();
},
onLoad() {
if (!this.location) this.$util.getLocation();
// #ifdef MP
this.menuButtonBounding = uni.getMenuButtonBoundingClientRect();
// #endif
},
watch: {
location: function(nVal) {
if (nVal) {
this.getOrderPaymentData();
}
}
},
filters: {
// 金额格式化输出
moneyFormat(money) {
return parseFloat(money).toFixed(2);
}
}
}

93
pages_promotion/point/result.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="container">
<view class="image-wrap">
<image :src="$util.img('public/uniapp/pay/pay_success.png')" class="result-image" mode="widthFix"></image>
</view>
<view class="msg">{{ $lang('exchangeSuccess') }}</view>
<view class="action">
<view class="btn color-base-border color-base-text" @click="toOrderList()">{{ $lang('see') }}</view>
<view class="btn go-home color-base-bg" @click="toIndex">{{ $lang('goHome') }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
onShow() {
},
methods: {
toOrderList() {
this.$util.redirectTo('/pages_promotion/point/order_list', {}, 'redirectTo');
},
toIndex() {
this.$util.redirectTo('/pages/index/index');
}
}
};
</script>
<style lang="scss">
.container {
width: 100vw;
height: 100vh;
background: #fff;
.image-wrap {
display: flex;
justify-content: center;
padding: 200rpx 0 40rpx 0;
.result-image {
width: 166rpx;
}
}
.msg {
text-align: center;
line-height: 1;
margin-bottom: 50rpx;
font-size: $font-size-base;
color: #000;
}
.pay-amount {
color: #999;
text-align: center;
line-height: 1;
margin-bottom: 30rpx;
}
.action {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: 150rpx;
display: flex;
justify-content: space-between;
.btn {
width: 310rpx;
height: 78rpx;
border: 2rpx solid #ffffff;
border-radius: $border-radius;
font-size: $font-size-tag;
display: flex;
align-items: center;
justify-content: center;
}
.alone {
margin-left: 0;
width: 60%;
}
.go-home {
color: #fff;
}
}
}
</style>