依据文档修改
落日晚风
parent
98baaab9bc
commit
e71091cbb0
2
App.vue
2
App.vue
|
|
@ -33,7 +33,7 @@
|
|||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 确认收货回调结果
|
||||
// 确认收货回调结果
|
||||
console.log(options, 'options');
|
||||
// #endif
|
||||
|
||||
|
|
|
|||
|
|
@ -1,512 +1,532 @@
|
|||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="签到有礼">
|
||||
<view v-if="state.loading"></view>
|
||||
<view class="sign-wrap" v-else-if="state.data && !state.loading">
|
||||
<!-- 签到日历 -->
|
||||
<view class="content-box calendar">
|
||||
<view class="sign-everyday ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<text class="sign-everyday-title">签到日历</text>
|
||||
<view class="sign-num-box">
|
||||
已连续签到
|
||||
<text class="sign-num">{{ state.continue_days }}</text>
|
||||
天
|
||||
</view>
|
||||
</view>
|
||||
<s-layout title="签到有礼">
|
||||
<view v-if="state.loading"></view>
|
||||
<view class="sign-wrap" v-else-if="state.data && !state.loading">
|
||||
<!-- 签到日历 -->
|
||||
<view class="content-box calendar">
|
||||
<view class="sign-everyday ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<text class="sign-everyday-title">签到日历</text>
|
||||
<view class="sign-num-box">
|
||||
已连续签到
|
||||
<text class="sign-num">{{ state.continue_days }}</text>
|
||||
天
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 切换年月 -->
|
||||
<view class="bar ss-flex ss-col-center ss-row-center">
|
||||
<view class="previous" @tap="handleCalendar(0)"><text class="cicon-back"></text></view>
|
||||
<view class="date ss-m-x-20">{{ state.cur_year || '--' }} 年 {{ state.cur_month || '--' }} 月</view>
|
||||
<view class="next" @tap="handleCalendar(1)"><text class="cicon-forward"></text></view>
|
||||
</view>
|
||||
<!-- 切换年月 -->
|
||||
<view class="bar ss-flex ss-col-center ss-row-center">
|
||||
<view class="previous" @tap="handleCalendar(0)"><text class="cicon-back"></text></view>
|
||||
<view class="date ss-m-x-20">{{ state.cur_year || '--' }} 年 {{ state.cur_month || '--' }} 月</view>
|
||||
<view class="next" @tap="handleCalendar(1)"><text class="cicon-forward"></text></view>
|
||||
</view>
|
||||
|
||||
<!-- 显示星期 -->
|
||||
<view class="week ss-flex">
|
||||
<view class="week-item ss-flex ss-row-center" v-for="(item, index) in state.weeks_ch" :key="index">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 显示星期 -->
|
||||
<view class="week ss-flex">
|
||||
<view class="week-item ss-flex ss-row-center" v-for="(item, index) in state.weeks_ch" :key="index">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历表 -->
|
||||
<view class="myDateTable">
|
||||
<view v-for="(item, j) in state.data.days" :key="j" class="dateCell ss-flex ss-row-center ss-col-center">
|
||||
<!-- 空格 -->
|
||||
<view class="ss-flex ss-row-center ss-col-center">
|
||||
<text :decode="true"> </text>
|
||||
</view>
|
||||
<view>
|
||||
<!-- 已签到日期 -->
|
||||
<view v-if="item.is_sign" class="is-sign ss-flex ss-row-center">
|
||||
<view class="is-sign-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
<image class="is-sign-image" :src="sheep.$url.static('/static/img/shop/app/correct.png')">
|
||||
</image>
|
||||
</view>
|
||||
<!-- 未签到日期 -->
|
||||
<view class="is-sign ss-flex ss-row-center" v-if="item.is_replenish == 1"
|
||||
@tap="onShowRetroactive(item.date)">
|
||||
<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
<text class="cicon-title"></text>
|
||||
</view>
|
||||
<view class="is-sign ss-flex ss-row-center" v-if="item.is_replenish == 0 && !item.is_sign">
|
||||
<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 日历表 -->
|
||||
<view class="myDateTable">
|
||||
<view v-for="(item, j) in state.data.days" :key="j"
|
||||
class="dateCell ss-flex ss-row-center ss-col-center">
|
||||
<!-- 空格 -->
|
||||
<view class="ss-flex ss-row-center ss-col-center">
|
||||
<text :decode="true"> </text>
|
||||
</view>
|
||||
<view>
|
||||
<!-- 已签到日期 -->
|
||||
<view v-if="item.is_sign" class="is-sign ss-flex ss-row-center">
|
||||
<view class="is-sign-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
<image class="is-sign-image"
|
||||
:src="sheep.$url.static('/static/img/shop/app/correct.png')">
|
||||
</image>
|
||||
</view>
|
||||
<!-- 未签到日期 -->
|
||||
<view class="is-sign ss-flex ss-row-center" v-if="item.is_replenish == 1"
|
||||
@tap="onShowRetroactive(item.date)">
|
||||
<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
<text class="cicon-title"></text>
|
||||
</view>
|
||||
<view class="is-sign ss-flex ss-row-center" v-if="item.is_replenish == 0 && !item.is_sign">
|
||||
<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 签到按钮 -->
|
||||
<view class="ss-flex ss-col-center ss-row-center sign-box ss-m-y-40">
|
||||
<button class="ss-reset-button sign-btn" v-if="state.isSign === 0" @tap="onSign">签到</button>
|
||||
<button class="ss-reset-button already-btn" v-if="state.isSign === 1" disabled>已签到</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white ss-m-t-16 ss-p-t-30 ss-p-b-60 ss-p-x-40">
|
||||
<view class="activity-title ss-m-b-30">签到说明</view>
|
||||
<view class="activity-des">
|
||||
1、每日签到固定 {{ state.data.rules.everyday }} 积分
|
||||
<text v-if="state.data.rules.is_inc == '1'">
|
||||
，次日递增奖励 {{ state.data.rules.inc_num }} 积分，直到
|
||||
{{ state.data.rules.until_day }} 天之后不再增加
|
||||
</text>
|
||||
</view>
|
||||
<view class="activity-des" v-if="state.data.rules.discounts?.length > 0">
|
||||
2、<text class="" v-for="i in state.data.rules.discounts" :key="i">
|
||||
连续签到 {{ i.full }} 天，奖励 {{ i.value }} 积分；
|
||||
</text>
|
||||
</view>
|
||||
<view class="activity-des" v-if="state.data.rules.is_replenish == '1'">
|
||||
{{ state.data.rules.discounts?.length > 0 ? '3' : '2' }}、用户在
|
||||
{{ state.data.rules.replenish_limit }} 天内，可补签
|
||||
{{ state.data.rules.replenish_days }} 天，每次补签消耗
|
||||
{{ state.data.rules.replenish_num }}积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-else-if="!state.data && !state.loading" icon="/static/data-empty.png" text="签到活动还未开始">
|
||||
</s-empty>
|
||||
<su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false">
|
||||
<view class="model-box ss-flex-col">
|
||||
<view class="ss-m-t-56 ss-flex-col ss-col-center">
|
||||
<text class="cicon-check-round"></text>
|
||||
<view class="score-title">{{ state.signin.score }}积分</view>
|
||||
<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
|
||||
已连续打卡{{ state.continue_days }}天
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-bg ss-flex-col ss-col-center ss-row-right">
|
||||
<view class="title ss-m-b-64">签到成功</view>
|
||||
<view class="ss-m-b-40">
|
||||
<button class="ss-reset-button confirm-btn" @tap="onConfirm">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<su-popup :show="state.showRetroactive" type="center" round="10" :isMaskClick="false">
|
||||
<view class="model-box ss-flex-col">
|
||||
<view class="ss-m-t-56 ss-flex-col ss-col-center">
|
||||
<text class="cicon-check-round"></text>
|
||||
<view class="score-title">消耗{{ state.data?.rules.replenish_num }}积分</view>
|
||||
<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
|
||||
已连续打卡{{ state.continue_days }}天
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-bg ss-flex-col ss-col-center ss-row-right">
|
||||
<view class="title ss-m-b-64">确认补签</view>
|
||||
<view class="ss-m-b-40 ss-flex">
|
||||
<button class="ss-reset-button cancel-btn" @tap="state.showRetroactive = false">取消</button>
|
||||
<button class="ss-reset-button confirm-btn" @tap="onRetroactive">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</s-layout>
|
||||
<!-- 签到按钮 -->
|
||||
<view class="ss-flex ss-col-center ss-row-center sign-box ss-m-y-40">
|
||||
<button class="ss-reset-button sign-btn" v-if="state.isSign === 0" @tap="onSign">签到</button>
|
||||
<button class="ss-reset-button already-btn" v-if="state.isSign === 1" disabled>已签到</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white ss-m-t-16 ss-p-t-30 ss-p-b-60 ss-p-x-40">
|
||||
<view class="activity-title ss-m-b-30">签到说明</view>
|
||||
<view class="activity-des">
|
||||
1、每日签到固定 {{ state.data.rules.everyday }} 积分
|
||||
<text v-if="state.data.rules.is_inc == '1'">
|
||||
，次日递增奖励 {{ state.data.rules.inc_num }} 积分，直到
|
||||
{{ state.data.rules.until_day }} 天之后不再增加
|
||||
</text>
|
||||
</view>
|
||||
<view class="activity-des" v-if="state.data.rules.discounts?.length > 0">
|
||||
2、<text class="" v-for="i in state.data.rules.discounts" :key="i">
|
||||
连续签到 {{ i.full }} 天，奖励 {{ i.value }} 积分；
|
||||
</text>
|
||||
</view>
|
||||
<view class="activity-des" v-if="state.data.rules.is_replenish == '1'">
|
||||
{{ state.data.rules.discounts?.length > 0 ? '3' : '2' }}、用户在
|
||||
{{ state.data.rules.replenish_limit }} 天内，可补签
|
||||
{{ state.data.rules.replenish_days }} 天，每次补签消耗
|
||||
{{ state.data.rules.replenish_num }}积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-else-if="!state.data && !state.loading" icon="/static/data-empty.png" text="签到活动还未开始">
|
||||
</s-empty>
|
||||
<su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false">
|
||||
<view class="model-box ss-flex-col">
|
||||
<view class="ss-m-t-56 ss-flex-col ss-col-center">
|
||||
<text class="cicon-check-round"></text>
|
||||
<view class="score-title">{{ state.signin.score }}积分</view>
|
||||
<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
|
||||
已连续打卡{{ state.continue_days }}天
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-bg ss-flex-col ss-col-center ss-row-right">
|
||||
<view class="title ss-m-b-64">签到成功</view>
|
||||
<view class="ss-m-b-40">
|
||||
<button class="ss-reset-button confirm-btn" @tap="onConfirm">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<su-popup :show="state.showRetroactive" type="center" round="10" :isMaskClick="false">
|
||||
<view class="model-box ss-flex-col">
|
||||
<view class="ss-m-t-56 ss-flex-col ss-col-center">
|
||||
<text class="cicon-check-round"></text>
|
||||
<view class="score-title">消耗{{ state.data?.rules.replenish_num }}积分</view>
|
||||
<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
|
||||
已连续打卡{{ state.continue_days }}天
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-bg ss-flex-col ss-col-center ss-row-right">
|
||||
<view class="title ss-m-b-64">确认补签</view>
|
||||
<view class="ss-m-b-40 ss-flex">
|
||||
<button class="ss-reset-button cancel-btn" @tap="state.showRetroactive = false">取消</button>
|
||||
<button class="ss-reset-button confirm-btn" @tap="onRetroactive">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReady } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/app/sign.png');
|
||||
const headerBg = sheep.$url.css('/static/img/shop/app/sign.png');
|
||||
|
||||
const state = reactive({
|
||||
data: {
|
||||
days: [], //日历
|
||||
rules: {}, //规则
|
||||
},
|
||||
cur_year: 0, //当前选的年
|
||||
cur_month: 0, //当前选的月
|
||||
cur_day: 0, //当前选择的天
|
||||
weeks_ch: [
|
||||
{
|
||||
title: '日',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
title: '一',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
title: '二',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
title: '三',
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
title: '四',
|
||||
value: '4',
|
||||
},
|
||||
{
|
||||
title: '五',
|
||||
value: '5',
|
||||
},
|
||||
{
|
||||
title: '六',
|
||||
value: '6',
|
||||
},
|
||||
], //星期
|
||||
showModel: false, //签到弹框
|
||||
continue_days: 0, //连续签到天数
|
||||
signin: {}, // 签到
|
||||
showRetroactive: false, //补签弹框
|
||||
date: '', //补签选中日期
|
||||
isSign: 0, //今天是否签到
|
||||
loading: true,
|
||||
});
|
||||
async function onSign() {
|
||||
const { error, data } = await sheep.$api.activity.signAdd();
|
||||
if (error === 0) {
|
||||
state.showModel = true;
|
||||
state.signin = data;
|
||||
// getData();
|
||||
}
|
||||
}
|
||||
const state = reactive({
|
||||
data: {
|
||||
days: [], //日历
|
||||
rules: {}, //规则
|
||||
},
|
||||
cur_year: 0, //当前选的年
|
||||
cur_month: 0, //当前选的月
|
||||
cur_day: 0, //当前选择的天
|
||||
weeks_ch: [{
|
||||
title: '日',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
title: '一',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
title: '二',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
title: '三',
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
title: '四',
|
||||
value: '4',
|
||||
},
|
||||
{
|
||||
title: '五',
|
||||
value: '5',
|
||||
},
|
||||
{
|
||||
title: '六',
|
||||
value: '6',
|
||||
},
|
||||
], //星期
|
||||
showModel: false, //签到弹框
|
||||
continue_days: 0, //连续签到天数
|
||||
signin: {}, // 签到
|
||||
showRetroactive: false, //补签弹框
|
||||
date: '', //补签选中日期
|
||||
isSign: 0, //今天是否签到
|
||||
loading: true,
|
||||
});
|
||||
async function onSign() {
|
||||
// 换签到接口
|
||||
const {
|
||||
code: error,
|
||||
data
|
||||
} = await sheep.$api.activity.signAdd();
|
||||
if (error === 0) {
|
||||
state.showModel = true;
|
||||
state.signin = data;
|
||||
// getData();
|
||||
}
|
||||
}
|
||||
|
||||
function onShowRetroactive(e) {
|
||||
state.showRetroactive = true;
|
||||
state.date = e;
|
||||
}
|
||||
//签到确认刷新页面
|
||||
function onConfirm() {
|
||||
state.showModel = false;
|
||||
getData();
|
||||
}
|
||||
//补签
|
||||
async function onRetroactive() {
|
||||
const { error, data } = await sheep.$api.activity.replenish({
|
||||
date: state.date,
|
||||
});
|
||||
if (error === 0) {
|
||||
state.showRetroactive = false;
|
||||
getData();
|
||||
}
|
||||
}
|
||||
function onShowRetroactive(e) {
|
||||
state.showRetroactive = true;
|
||||
state.date = e;
|
||||
}
|
||||
//签到确认刷新页面
|
||||
function onConfirm() {
|
||||
state.showModel = false;
|
||||
getData();
|
||||
}
|
||||
//补签
|
||||
async function onRetroactive() {
|
||||
const {
|
||||
error,
|
||||
data
|
||||
} = await sheep.$api.activity.replenish({
|
||||
date: state.date,
|
||||
});
|
||||
if (error === 0) {
|
||||
state.showRetroactive = false;
|
||||
getData();
|
||||
}
|
||||
}
|
||||
|
||||
async function getData(mouth) {
|
||||
const { error, data } = await sheep.$api.activity.signList(mouth);
|
||||
if (error === 0) {
|
||||
state.data = data;
|
||||
} else {
|
||||
state.data = null;
|
||||
}
|
||||
state.loading = false;
|
||||
if (state.data) {
|
||||
state.data.days.forEach((i, index) => {
|
||||
if (index < i.week) {
|
||||
index++;
|
||||
var obj = {
|
||||
day: null,
|
||||
is_sign: false,
|
||||
};
|
||||
state.data.days.unshift(obj);
|
||||
}
|
||||
if (index == 1) {
|
||||
let arr = i.date.split('-');
|
||||
state.cur_year = arr[0];
|
||||
state.cur_month = arr[1];
|
||||
}
|
||||
});
|
||||
if (state.data.days[0].day == null) {
|
||||
state.data.days.forEach((i, index) => {
|
||||
if (i.current == 'today') {
|
||||
state.isSign = i.is_sign;
|
||||
}
|
||||
});
|
||||
}
|
||||
state.continue_days = data.continue_days;
|
||||
}
|
||||
}
|
||||
async function getData(mouth) {
|
||||
const {
|
||||
error,
|
||||
data
|
||||
} = await sheep.$api.activity.signList(mouth);
|
||||
// 替换数据
|
||||
const ren = await sheep.$api.activity.getSummary();
|
||||
if (error === 0) {
|
||||
state.data = data;
|
||||
} else {
|
||||
state.data = null;
|
||||
}
|
||||
state.loading = false;
|
||||
if (state.data) {
|
||||
state.data.days.forEach((i, index) => {
|
||||
if (index < i.week) {
|
||||
index++;
|
||||
var obj = {
|
||||
day: null,
|
||||
is_sign: false,
|
||||
};
|
||||
state.data.days.unshift(obj);
|
||||
}
|
||||
if (index == 1) {
|
||||
let arr = i.date.split('-');
|
||||
state.cur_year = arr[0];
|
||||
state.cur_month = arr[1];
|
||||
}
|
||||
});
|
||||
if (state.data.days[0].day == null) {
|
||||
state.data.days.forEach((i, index) => {
|
||||
if (i.current == 'today') {
|
||||
state.isSign = i.is_sign;
|
||||
}
|
||||
});
|
||||
}
|
||||
state.isSign = ren.data.todaySignIn ? 1 : 0;
|
||||
state.continue_days = ren.data.continuousDay;
|
||||
}
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
getData();
|
||||
});
|
||||
onReady(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
// 切换控制年月，上一个月，下一个月
|
||||
const handleCalendar = (type) => {
|
||||
const cur_year = parseInt(state.cur_year);
|
||||
const cur_month = parseInt(state.cur_month);
|
||||
var newMonth;
|
||||
var newYear = cur_year;
|
||||
if (type === 0) {
|
||||
//上个月
|
||||
newMonth = cur_month - 1;
|
||||
if (newMonth < 1) {
|
||||
newYear = cur_year - 1;
|
||||
newMonth = 12;
|
||||
} else if (newMonth < 10) {
|
||||
newMonth = '0' + newMonth;
|
||||
}
|
||||
} else {
|
||||
newMonth = cur_month + 1;
|
||||
if (newMonth > 12) {
|
||||
newYear = cur_year + 1;
|
||||
newMonth = 1;
|
||||
} else if (newMonth < 10) {
|
||||
newMonth = '0' + newMonth;
|
||||
}
|
||||
}
|
||||
getData({
|
||||
month: newYear + '-' + newMonth,
|
||||
});
|
||||
};
|
||||
// 切换控制年月，上一个月，下一个月
|
||||
const handleCalendar = (type) => {
|
||||
const cur_year = parseInt(state.cur_year);
|
||||
const cur_month = parseInt(state.cur_month);
|
||||
var newMonth;
|
||||
var newYear = cur_year;
|
||||
if (type === 0) {
|
||||
//上个月
|
||||
newMonth = cur_month - 1;
|
||||
if (newMonth < 1) {
|
||||
newYear = cur_year - 1;
|
||||
newMonth = 12;
|
||||
} else if (newMonth < 10) {
|
||||
newMonth = '0' + newMonth;
|
||||
}
|
||||
} else {
|
||||
newMonth = cur_month + 1;
|
||||
if (newMonth > 12) {
|
||||
newYear = cur_year + 1;
|
||||
newMonth = 1;
|
||||
} else if (newMonth < 10) {
|
||||
newMonth = '0' + newMonth;
|
||||
}
|
||||
}
|
||||
getData({
|
||||
month: newYear + '-' + newMonth,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
border-top: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
}
|
||||
.header-box {
|
||||
border-top: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
}
|
||||
|
||||
// 日历
|
||||
.calendar {
|
||||
background: #fff;
|
||||
// 日历
|
||||
.calendar {
|
||||
background: #fff;
|
||||
|
||||
.sign-everyday {
|
||||
height: 100rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 2rpx solid rgba(223, 223, 223, 0.4);
|
||||
.sign-everyday {
|
||||
height: 100rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 2rpx solid rgba(223, 223, 223, 0.4);
|
||||
|
||||
.sign-everyday-title {
|
||||
font-size: 32rpx;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 500;
|
||||
}
|
||||
.sign-everyday-title {
|
||||
font-size: 32rpx;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sign-num-box {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
.sign-num-box {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
|
||||
.sign-num {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ff6000;
|
||||
padding: 0 10rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sign-num {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ff6000;
|
||||
padding: 0 10rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 年月日
|
||||
.bar {
|
||||
height: 100rpx;
|
||||
// 年月日
|
||||
.bar {
|
||||
height: 100rpx;
|
||||
|
||||
.date {
|
||||
font-size: 30rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
font-size: 30rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.cicon-back {
|
||||
margin-top: 6rpx;
|
||||
font-size: 30rpx;
|
||||
color: #c4c4c4;
|
||||
line-height: normal;
|
||||
}
|
||||
.cicon-back {
|
||||
margin-top: 6rpx;
|
||||
font-size: 30rpx;
|
||||
color: #c4c4c4;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
margin-top: 6rpx;
|
||||
font-size: 30rpx;
|
||||
color: #c4c4c4;
|
||||
line-height: normal;
|
||||
}
|
||||
.cicon-forward {
|
||||
margin-top: 6rpx;
|
||||
font-size: 30rpx;
|
||||
color: #c4c4c4;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// 星期
|
||||
.week {
|
||||
.week-item {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
// 星期
|
||||
.week {
|
||||
.week-item {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 日历表
|
||||
.myDateTable {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// 日历表
|
||||
.myDateTable {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.dateCell {
|
||||
width: calc(750rpx / 7);
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dateCell {
|
||||
width: calc(750rpx / 7);
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-sign {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
position: relative;
|
||||
.is-sign {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
position: relative;
|
||||
|
||||
.is-sign-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.is-sign-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.is-sign-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
.is-sign-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
.cell-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-title {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -6rpx;
|
||||
font-size: 20rpx;
|
||||
color: red;
|
||||
}
|
||||
.cicon-title {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -6rpx;
|
||||
font-size: 20rpx;
|
||||
color: red;
|
||||
}
|
||||
|
||||
// 签到按钮
|
||||
.sign-box {
|
||||
height: 140rpx;
|
||||
width: 100%;
|
||||
// 签到按钮
|
||||
.sign-box {
|
||||
height: 140rpx;
|
||||
width: 100%;
|
||||
|
||||
.sign-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
|
||||
background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
color: #fff;
|
||||
}
|
||||
.sign-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
|
||||
background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.already-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.already-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
width: 520rpx;
|
||||
// height: 590rpx;
|
||||
background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
|
||||
// background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 10rpx;
|
||||
.model-box {
|
||||
width: 520rpx;
|
||||
// height: 590rpx;
|
||||
background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
|
||||
// background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 10rpx;
|
||||
|
||||
.cicon-check-round {
|
||||
font-size: 70rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.cicon-check-round {
|
||||
font-size: 70rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.score-title {
|
||||
font-size: 34rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #fcff00;
|
||||
}
|
||||
.score-title {
|
||||
font-size: 34rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #fcff00;
|
||||
}
|
||||
|
||||
.model-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.model-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.model-bg {
|
||||
width: 520rpx;
|
||||
height: 344rpx;
|
||||
background-size: 100% 100%;
|
||||
background-image: v-bind(headerBg);
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 0 0 10rpx 10rpx;
|
||||
.model-bg {
|
||||
width: 520rpx;
|
||||
height: 344rpx;
|
||||
background-size: 100% 100%;
|
||||
background-image: v-bind(headerBg);
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 0 0 10rpx 10rpx;
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
// color: var(--ui-BG-Main);
|
||||
color: #ff6000;
|
||||
}
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
// color: var(--ui-BG-Main);
|
||||
color: #ff6000;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
border: 2rpx solid #ff6000;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
line-height: normal;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.cancel-btn {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
border: 2rpx solid #ff6000;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
line-height: normal;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.confirm-btn {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//签到说明
|
||||
.activity-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
//签到说明
|
||||
.activity-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.activity-des {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
.activity-des {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<view class="detail-swiper-selector">
|
||||
<!-- 商品轮播图 -->
|
||||
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
|
||||
dotStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
|
||||
dotStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
|
||||
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
|
||||
|
|
@ -31,16 +31,17 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="discounts-box ss-flex ss-row-between ss-m-b-28">
|
||||
<!-- 满减送/限时折扣活动的提示 TODO 芋艿：promos 未写 -->
|
||||
<div class="tag-content">
|
||||
<!-- 满减送/限时折扣活动的提示 TODO 芋艿：promos 未写 -->
|
||||
<div class="tag-content">
|
||||
<view class="tag-box ss-flex">
|
||||
<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos" :key="promos.id" @tap="onActivity">
|
||||
<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos"
|
||||
:key="promos.id" @tap="onActivity">
|
||||
{{ promos.title }}
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<!-- 优惠劵 -->
|
||||
<!-- 优惠劵 -->
|
||||
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true"
|
||||
v-if="state.couponInfo.length">
|
||||
<view class="discounts-title ss-m-r-8">领券</view>
|
||||
|
|
@ -54,15 +55,15 @@
|
|||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
|
||||
@tap="state.showSelectSku = true" />
|
||||
<!-- TODO 芋艿：可能暂时不考虑使用 -->
|
||||
@tap="state.showSelectSku = true" />
|
||||
<!-- TODO 芋艿：可能暂时不考虑使用 -->
|
||||
<detail-cell-service v-if="state.goodsInfo.service" v-model="state.goodsInfo.service" />
|
||||
<detail-cell-params v-if="state.goodsInfo.params" v-model="state.goodsInfo.params" />
|
||||
</view>
|
||||
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart"
|
||||
@buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
|
||||
@buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
|
|
@ -88,25 +89,35 @@
|
|||
</view>
|
||||
</detail-tabbar>
|
||||
|
||||
<!-- 优惠劵弹窗 -->
|
||||
<!-- 优惠劵弹窗 -->
|
||||
<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
|
||||
@get="onGet" />
|
||||
@get="onGet" />
|
||||
|
||||
<!-- 满减送/限时折扣活动弹窗 -->
|
||||
<!-- 满减送/限时折扣活动弹窗 -->
|
||||
<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false" />
|
||||
@close="state.showActivityModel = false" />
|
||||
</block>
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import ActivityApi from '@/sheep/api/promotion/activity';
|
||||
import { formatSales, formatGoodsSwiper, fen2yuan, } from '@/sheep/hooks/useGoods';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import ActivityApi from '@/sheep/api/promotion/activity';
|
||||
import {
|
||||
formatSales,
|
||||
formatGoodsSwiper,
|
||||
fen2yuan,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailCellService from './components/detail/detail-cell-service.vue';
|
||||
|
|
@ -116,7 +127,9 @@
|
|||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import detailActivityTip from './components/detail/detail-activity-tip.vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
|
||||
onPageScroll(() => {});
|
||||
|
||||
|
|
@ -130,7 +143,7 @@
|
|||
couponInfo: [], // 可领取的 Coupon 优惠劵的列表
|
||||
showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
|
||||
activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表
|
||||
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
|
||||
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
|
||||
});
|
||||
|
||||
// 规格变更
|
||||
|
|
@ -179,7 +192,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// TODO 芋艿：待测试
|
||||
// TODO 芋艿：待测试
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.goodsInfo)) return {};
|
||||
return sheep.$platform.share.getShareInfo({
|
||||
|
|
@ -193,8 +206,9 @@
|
|||
}, {
|
||||
type: 'goods', // 商品海报
|
||||
title: state.goodsInfo.name, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
|
||||
price: state.goodsInfo.price[0], // 商品价格
|
||||
// image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: state.goodsInfo.price, // 商品价格
|
||||
original_price: state.goodsInfo.original_price, // 商品原价
|
||||
}, );
|
||||
});
|
||||
|
|
@ -208,31 +222,31 @@
|
|||
state.goodsId = options.id;
|
||||
// 1. 加载商品信息
|
||||
sheep.$api.goods.detail(state.goodsId).then((res) => {
|
||||
// 未找到商品
|
||||
if (res.code !== 0 || !res.data) {
|
||||
state.goodsInfo = null;
|
||||
return;
|
||||
}
|
||||
// 未找到商品
|
||||
if (res.code !== 0 || !res.data) {
|
||||
state.goodsInfo = null;
|
||||
return;
|
||||
}
|
||||
// 加载到商品
|
||||
state.skeletonLoading = false;
|
||||
state.goodsInfo = res.data;
|
||||
state.goodsInfo = res.data;
|
||||
});
|
||||
|
||||
// 2. 加载优惠劵信息
|
||||
CouponApi.getCouponTemplateList(state.goodsId,2, 10).then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.couponInfo = res.data;
|
||||
});
|
||||
// 2. 加载优惠劵信息
|
||||
CouponApi.getCouponTemplateList(state.goodsId, 2, 10).then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.couponInfo = res.data;
|
||||
});
|
||||
|
||||
// 3. 加载营销活动信息
|
||||
ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.activityList = res.data;
|
||||
});
|
||||
// 3. 加载营销活动信息
|
||||
ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.activityList = res.data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,383 +1,352 @@
|
|||
<template>
|
||||
<s-layout
|
||||
navbar="normal"
|
||||
:leftWidth="0"
|
||||
:rightWidth="0"
|
||||
tools="search"
|
||||
:defaultSearch="state.keyword"
|
||||
@search="onSearch"
|
||||
>
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<su-tabs
|
||||
:list="state.tabList"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</view>
|
||||
<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
|
||||
<text v-if="state.iconStatus" class="sicon-goods-list"></text>
|
||||
<text v-else class="sicon-goods-card"></text>
|
||||
</view>
|
||||
</view>
|
||||
</su-sticky>
|
||||
<s-layout navbar="normal" :leftWidth="0" :rightWidth="0" tools="search" :defaultSearch="state.keyword"
|
||||
@search="onSearch">
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<su-tabs :list="state.tabList" :scrollable="false" @change="onTabsChange"
|
||||
:current="state.currentTab"></su-tabs>
|
||||
</view>
|
||||
<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
|
||||
<text v-if="state.iconStatus" class="sicon-goods-list"></text>
|
||||
<text v-else class="sicon-goods-card"></text>
|
||||
</view>
|
||||
</view>
|
||||
</su-sticky>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<su-popup
|
||||
:show="state.showFilter"
|
||||
type="top"
|
||||
round="10"
|
||||
:space="sys_navBar + 38"
|
||||
backgroundColor="#F6F6F6"
|
||||
:zIndex="10"
|
||||
@close="state.showFilter = false"
|
||||
>
|
||||
<view class="filter-list-box">
|
||||
<view
|
||||
class="filter-item"
|
||||
v-for="(item, index) in state.tabList[state.currentTab].list"
|
||||
:key="item.value"
|
||||
:class="[{ 'filter-item-active': index == state.curFilter }]"
|
||||
@tap="onFilterItem(index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view
|
||||
class="ss-p-l-20 ss-p-r-20 ss-m-b-20"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<s-goods-column
|
||||
class=""
|
||||
size="lg"
|
||||
:data="item"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
></s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="!state.iconStatus && state.pagination.total > 0"
|
||||
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top"
|
||||
>
|
||||
<view class="goods-list-box">
|
||||
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:data="item"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'left')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list-box">
|
||||
<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
:data="item"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'right')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
<!-- 弹窗 -->
|
||||
<su-popup :show="state.showFilter" type="top" round="10" :space="sys_navBar + 38" backgroundColor="#F6F6F6"
|
||||
:zIndex="10" @close="state.showFilter = false">
|
||||
<view class="filter-list-box">
|
||||
<view class="filter-item" v-for="(item, index) in state.tabList[state.currentTab].list"
|
||||
:key="item.value" :class="[{ 'filter-item-active': index == state.curFilter }]"
|
||||
@tap="onFilterItem(index)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.data" :key="item.id">
|
||||
<s-goods-column class="" size="lg" :data="item" :topRadius="10" :bottomRadius="10"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"></s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!state.iconStatus && state.pagination.total > 0"
|
||||
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
|
||||
<view class="goods-list-box">
|
||||
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
||||
<s-goods-column class="goods-md-box" size="md" :data="item" :topRadius="10" :bottomRadius="10"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'left')">
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list-box">
|
||||
<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
|
||||
<s-goods-column class="goods-md-box" size="md" :topRadius="10" :bottomRadius="10" :data="item"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'right')">
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
|
||||
</s-empty>
|
||||
</s-layout>
|
||||
}" @tap="loadmore" />
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
|
||||
</s-empty>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const emits = defineEmits(['close', 'change']);
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const emits = defineEmits(['close', 'change']);
|
||||
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
// currentSort: 'weigh',
|
||||
// currentOrder: 'desc',
|
||||
currentTab: 0,
|
||||
filterParams: {},
|
||||
curFilter: 0,
|
||||
showFilter: false,
|
||||
iconStatus: false,
|
||||
categoryId: 0,
|
||||
tabList: [
|
||||
{
|
||||
name: '综合推荐',
|
||||
// value: '',
|
||||
list: [
|
||||
{
|
||||
label: '综合推荐',
|
||||
// sort: '',
|
||||
// order: true,
|
||||
},
|
||||
{
|
||||
label: '价格升序',
|
||||
sort: 'price',
|
||||
order: true,
|
||||
},
|
||||
{
|
||||
label: '价格降序',
|
||||
sort: 'price',
|
||||
order: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '销量',
|
||||
// value: 'salesCount',
|
||||
},
|
||||
{
|
||||
name: '新品优先',
|
||||
// value: 'create_time',
|
||||
},
|
||||
],
|
||||
loadStatus: '',
|
||||
keyword: '',
|
||||
leftGoodsList: [],
|
||||
rightGoodsList: [],
|
||||
});
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
// currentSort: 'weigh',
|
||||
// currentOrder: 'desc',
|
||||
currentTab: 0,
|
||||
filterParams: {},
|
||||
curFilter: 0,
|
||||
showFilter: false,
|
||||
iconStatus: false,
|
||||
categoryId: 0,
|
||||
tabList: [{
|
||||
name: '综合推荐',
|
||||
// value: '',
|
||||
list: [{
|
||||
label: '综合推荐',
|
||||
// sort: '',
|
||||
// order: true,
|
||||
},
|
||||
{
|
||||
label: '价格升序',
|
||||
sort: 'price',
|
||||
order: true,
|
||||
},
|
||||
{
|
||||
label: '价格降序',
|
||||
sort: 'price',
|
||||
order: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '销量',
|
||||
sort: 'salesCount',
|
||||
order: false,
|
||||
// value: 'salesCount',
|
||||
},
|
||||
{
|
||||
name: '新品优先',
|
||||
// value: 'create_time',
|
||||
},
|
||||
],
|
||||
loadStatus: '',
|
||||
keyword: '',
|
||||
leftGoodsList: [],
|
||||
rightGoodsList: [],
|
||||
});
|
||||
|
||||
// 加载瀑布流
|
||||
let count = 0;
|
||||
let leftHeight = 0;
|
||||
let rightHeight = 0;
|
||||
// 加载瀑布流
|
||||
let count = 0;
|
||||
let leftHeight = 0;
|
||||
let rightHeight = 0;
|
||||
|
||||
function mountMasonry(height = 0, where = 'left') {
|
||||
if (!state.pagination.data[count]) return;
|
||||
function mountMasonry(height = 0, where = 'left') {
|
||||
if (!state.pagination.data[count]) return;
|
||||
|
||||
if (where === 'left') {
|
||||
leftHeight += height;
|
||||
} else {
|
||||
rightHeight += height;
|
||||
}
|
||||
if (leftHeight <= rightHeight) {
|
||||
state.leftGoodsList.push(state.pagination.data[count]);
|
||||
} else {
|
||||
state.rightGoodsList.push(state.pagination.data[count]);
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (where === 'left') {
|
||||
leftHeight += height;
|
||||
} else {
|
||||
rightHeight += height;
|
||||
}
|
||||
if (leftHeight <= rightHeight) {
|
||||
state.leftGoodsList.push(state.pagination.data[count]);
|
||||
} else {
|
||||
state.rightGoodsList.push(state.pagination.data[count]);
|
||||
}
|
||||
count++;
|
||||
}
|
||||
|
||||
function emptyList() {
|
||||
state.pagination = pagination
|
||||
state.leftGoodsList = [];
|
||||
state.rightGoodsList = [];
|
||||
count = 0;
|
||||
leftHeight = 0;
|
||||
rightHeight = 0;
|
||||
}
|
||||
//搜索
|
||||
function onSearch(e) {
|
||||
state.keyword = e;
|
||||
emptyList();
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, e);
|
||||
}
|
||||
function emptyList() {
|
||||
state.pagination = pagination
|
||||
state.leftGoodsList = [];
|
||||
state.rightGoodsList = [];
|
||||
count = 0;
|
||||
leftHeight = 0;
|
||||
rightHeight = 0;
|
||||
}
|
||||
//搜索
|
||||
function onSearch(e) {
|
||||
state.keyword = e;
|
||||
emptyList();
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, e);
|
||||
}
|
||||
|
||||
// 点击
|
||||
function onTabsChange(e) {
|
||||
if (state.tabList[e.index].list) {
|
||||
state.currentTab = e.index;
|
||||
state.showFilter = !state.showFilter;
|
||||
return;
|
||||
} else {
|
||||
state.showFilter = false;
|
||||
}
|
||||
if (e.index === state.currentTab) {
|
||||
return;
|
||||
} else {
|
||||
state.currentTab = e.index;
|
||||
}
|
||||
emptyList();
|
||||
// 点击
|
||||
function onTabsChange(e) {
|
||||
if (state.tabList[e.index].list) {
|
||||
state.currentTab = e.index;
|
||||
state.showFilter = !state.showFilter;
|
||||
return;
|
||||
} else {
|
||||
state.showFilter = false;
|
||||
}
|
||||
if (e.index === state.currentTab) {
|
||||
return;
|
||||
} else {
|
||||
state.currentTab = e.index;
|
||||
}
|
||||
emptyList();
|
||||
console.log(e, '6666')
|
||||
getList(e.sort, e.order, state.categoryId, state.keyword);
|
||||
}
|
||||
|
||||
getList(e.value, state.currentOrder, state.categoryId, state.keyword);
|
||||
}
|
||||
// 点击筛选项
|
||||
const onFilterItem = (val) => {
|
||||
console.log(val)
|
||||
if (
|
||||
state.currentSort === state.tabList[0].list[val].sort &&
|
||||
state.currentOrder === state.tabList[0].list[val].order
|
||||
) {
|
||||
state.showFilter = false;
|
||||
return;
|
||||
}
|
||||
state.curFilter = val;
|
||||
state.tabList[0].name = state.tabList[0].list[val].label;
|
||||
state.currentSort = state.tabList[0].list[val].sort;
|
||||
state.currentOrder = state.tabList[0].list[val].order;
|
||||
emptyList();
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
|
||||
state.showFilter = false;
|
||||
};
|
||||
|
||||
// 点击筛选项
|
||||
const onFilterItem = (val) => {
|
||||
console.log(val)
|
||||
if (
|
||||
state.currentSort === state.tabList[0].list[val].sort &&
|
||||
state.currentOrder === state.tabList[0].list[val].order
|
||||
) {
|
||||
state.showFilter = false;
|
||||
return;
|
||||
}
|
||||
state.curFilter = val;
|
||||
state.tabList[0].name = state.tabList[0].list[val].label;
|
||||
state.currentSort = state.tabList[0].list[val].sort;
|
||||
state.currentOrder = state.tabList[0].list[val].order;
|
||||
emptyList();
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
|
||||
state.showFilter = false;
|
||||
};
|
||||
|
||||
async function getList(Sort, Order, categoryId, keyword, page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.list({
|
||||
sortField: Sort,
|
||||
sortAsc: Order,
|
||||
category_id: !keyword ? categoryId : '',
|
||||
pageSize:list_rows,
|
||||
keyword: keyword,
|
||||
pageNo:page,
|
||||
});
|
||||
if (res.code === 0) {
|
||||
let couponList = _.concat(state.pagination.data, res.data.list);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponList,
|
||||
};
|
||||
mountMasonry();
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(
|
||||
state.currentSort,
|
||||
state.currentOrder,
|
||||
state.categoryId,
|
||||
state.keyword,
|
||||
state.pagination.current_page + 1,
|
||||
);
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.categoryId = options.categoryId;
|
||||
state.keyword = options.keyword;
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
|
||||
});
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
async function getList(Sort, Order, categoryId, keyword, page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
const res = await sheep.$api.goods.list({
|
||||
sortField: Sort,
|
||||
sortAsc: Order,
|
||||
category_id: !keyword ? categoryId : '',
|
||||
pageSize: list_rows,
|
||||
keyword: keyword,
|
||||
pageNo: page,
|
||||
});
|
||||
if (res.code === 0) {
|
||||
let couponList = _.concat(state.pagination.data, res.data.list);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: couponList,
|
||||
};
|
||||
mountMasonry();
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getList(
|
||||
state.currentSort,
|
||||
state.currentOrder,
|
||||
state.categoryId,
|
||||
state.keyword,
|
||||
state.pagination.current_page + 1,
|
||||
);
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.categoryId = options.categoryId;
|
||||
state.keyword = options.keyword;
|
||||
getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
|
||||
});
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.goods-box {
|
||||
&:nth-last-of-type(1) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.list-icon {
|
||||
width: 80rpx;
|
||||
.sicon-goods-card {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.sicon-goods-list {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.goods-card {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.list-filter-tabs {
|
||||
background-color: #fff;
|
||||
}
|
||||
.filter-list-box {
|
||||
padding: 28rpx 52rpx;
|
||||
.filter-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.filter-item-active {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.goods-box {
|
||||
&:nth-last-of-type(1) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
width: 80rpx;
|
||||
|
||||
.sicon-goods-card {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.sicon-goods-list {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.list-filter-tabs {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.filter-list-box {
|
||||
padding: 28rpx 52rpx;
|
||||
|
||||
.filter-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-item-active {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,250 +1,268 @@
|
|||
<template>
|
||||
<s-layout title="充值" class="withdraw-wrap" navbar="inner">
|
||||
<view class="wallet-num-box ss-flex ss-col-center ss-row-between" :style="[
|
||||
<s-layout title="充值" class="withdraw-wrap" navbar="inner">
|
||||
<view class="wallet-num-box ss-flex ss-col-center ss-row-between" :style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]">
|
||||
<view class="">
|
||||
<view class="num-title">当前余额（元）</view>
|
||||
<view class="wallet-num">{{ userInfo.money }}</view>
|
||||
</view>
|
||||
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/recharge-log')">充值记录</button>
|
||||
</view>
|
||||
<view class="recharge-box">
|
||||
<view class="recharge-card-box" v-if="state.data.status">
|
||||
<view class="input-label ss-m-b-50">充值金额</view>
|
||||
<view class="input-box ss-flex border-bottom ss-p-b-20" v-if="state.data.custom_status">
|
||||
<view class="unit">￥</view>
|
||||
<uni-easyinput v-model="state.recharge_money" type="digit" placeholder="请输入充值金额" :inputBorder="false">
|
||||
</uni-easyinput>
|
||||
</view>
|
||||
<view class="face-value-box ss-flex ss-flex-wrap ss-m-y-40">
|
||||
<button class="ss-reset-button face-value-btn" v-for="item in state.faceValueList" :key="item.money"
|
||||
:class="[{ 'btn-active': state.recharge_money == parseFloat(item.money) }]" @tap="onCard(item.money)">
|
||||
<text class="face-value-title">{{ item.money }}</text>
|
||||
<view v-if="item.gift" class="face-value-tag">
|
||||
送{{ item.gift }}{{ state.data.gift_type == 'money' ? '元' : '积分' }}</view>
|
||||
</button>
|
||||
</view>
|
||||
<button class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main" @tap="onConfirm">
|
||||
确认充值
|
||||
</button>
|
||||
</view>
|
||||
<view class="" v-if="state.data.status === 0"> 关闭充值 </view>
|
||||
</view>
|
||||
</s-layout>
|
||||
<view class="">
|
||||
<view class="num-title">当前余额（元）</view>
|
||||
<view class="wallet-num">{{ userInfo.money }}</view>
|
||||
</view>
|
||||
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/recharge-log')">充值记录</button>
|
||||
</view>
|
||||
<view class="recharge-box">
|
||||
<view class="recharge-card-box" v-if="state.data.status">
|
||||
<view class="input-label ss-m-b-50">充值金额</view>
|
||||
<view class="input-box ss-flex border-bottom ss-p-b-20" v-if="state.data.custom_status">
|
||||
<view class="unit">￥</view>
|
||||
<uni-easyinput v-model="state.recharge_money" type="digit" placeholder="请输入充值金额"
|
||||
:inputBorder="false">
|
||||
</uni-easyinput>
|
||||
</view>
|
||||
<view class="face-value-box ss-flex ss-flex-wrap ss-m-y-40">
|
||||
<button class="ss-reset-button face-value-btn" v-for="item in state.faceValueList" :key="item.money"
|
||||
:class="[{ 'btn-active': state.recharge_money == parseFloat(item.money) }]"
|
||||
@tap="onCard(item.payPrice/100)">
|
||||
<text class="face-value-title">{{ item.payPrice/100 }}</text>
|
||||
<view v-if="item.bonusPrice" class="face-value-tag">
|
||||
送{{ item.bonusPrice/100 }}{{ state.data.gift_type == 'money' ? '元' : '积分' }}</view>
|
||||
</button>
|
||||
</view>
|
||||
<button class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main" @tap="onConfirm">
|
||||
确认充值
|
||||
</button>
|
||||
</view>
|
||||
<view class="" v-if="state.data.status === 0"> 关闭充值 </view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
|
||||
const state = reactive({
|
||||
recharge_money: '',
|
||||
data: {},
|
||||
faceValueList: [],
|
||||
});
|
||||
// 点击卡片
|
||||
const state = reactive({
|
||||
recharge_money: '',
|
||||
data: {},
|
||||
faceValueList: [],
|
||||
});
|
||||
// 点击卡片
|
||||
|
||||
function onCard(e) {
|
||||
state.recharge_money = e;
|
||||
}
|
||||
async function getRechargeTabs() {
|
||||
const res = await sheep.$api.trade.rechargeRules();
|
||||
if (res.error === 0) {
|
||||
state.data = res.data;
|
||||
state.data.status = res.data.status;
|
||||
state.faceValueList = res.data.quick_amounts;
|
||||
}
|
||||
}
|
||||
function onCard(e) {
|
||||
state.recharge_money = e;
|
||||
}
|
||||
async function getRechargeTabs() {
|
||||
const res = await sheep.$api.trade.rechargeRules();
|
||||
const res2 = await sheep.$api.trade.rechargeRules2();
|
||||
if (res.error === 0) {
|
||||
state.data = res.data;
|
||||
state.data.status = res.data.status;
|
||||
console.log(res);
|
||||
console.log(res2);
|
||||
// state.faceValueList = res.data.quick_amounts;
|
||||
state.faceValueList = res2.data;
|
||||
}
|
||||
}
|
||||
|
||||
function onChange(e) {
|
||||
state.data.gift_type = e.detail.value;
|
||||
}
|
||||
function onChange(e) {
|
||||
state.data.gift_type = e.detail.value;
|
||||
}
|
||||
|
||||
async function onConfirm() {
|
||||
const { error, data } = await sheep.$api.trade.recharge({
|
||||
recharge_money: state.recharge_money,
|
||||
});
|
||||
if (error === 0) {
|
||||
// #ifdef MP
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
|
||||
// #endif
|
||||
sheep.$router.go('/pages/pay/index', { orderSN: data.order_sn, type: 'recharge' });
|
||||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
getRechargeTabs();
|
||||
});
|
||||
async function onConfirm() {
|
||||
const {
|
||||
code,
|
||||
data
|
||||
} = await sheep.$api.trade.recharge({
|
||||
packageId: 0,
|
||||
payPrice: state.recharge_money * 100
|
||||
});
|
||||
if (code === 0) {
|
||||
// #ifdef MP
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
|
||||
// #endif
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
orderSN: data.order_sn,
|
||||
type: 'recharge'
|
||||
});
|
||||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
getRechargeTabs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-input-input {
|
||||
font-family: OPPOSANS !important;
|
||||
}
|
||||
}
|
||||
:deep() {
|
||||
.uni-input-input {
|
||||
font-family: OPPOSANS !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-num-box {
|
||||
padding: 0 40rpx 80rpx;
|
||||
background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
|
||||
border-radius: 0 0 5% 5%;
|
||||
.wallet-num-box {
|
||||
padding: 0 40rpx 80rpx;
|
||||
background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
|
||||
border-radius: 0 0 5% 5%;
|
||||
|
||||
.num-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.num-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.wallet-num {
|
||||
font-size: 60rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.wallet-num {
|
||||
font-size: 60rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.log-btn {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 1rpx solid $white;
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.log-btn {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 1rpx solid $white;
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.recharge-box {
|
||||
position: relative;
|
||||
padding: 0 30rpx;
|
||||
margin-top: -60rpx;
|
||||
}
|
||||
.recharge-box {
|
||||
position: relative;
|
||||
padding: 0 30rpx;
|
||||
margin-top: -60rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 620rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.save-btn {
|
||||
width: 620rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.recharge-card-box {
|
||||
width: 690rpx;
|
||||
background: var(--ui-BG);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.recharge-card-box {
|
||||
width: 690rpx;
|
||||
background: var(--ui-BG);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.input-label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.input-label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.unit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 48rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.unit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 48rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.face-value-btn {
|
||||
width: 200rpx;
|
||||
height: 144rpx;
|
||||
border: 1px solid var(--ui-BG-Main);
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
.face-value-btn {
|
||||
width: 200rpx;
|
||||
height: 144rpx;
|
||||
border: 1px solid var(--ui-BG-Main);
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.face-value-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
font-family: OPPOSANS;
|
||||
.face-value-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::after {
|
||||
content: '元';
|
||||
font-size: 24rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: '元';
|
||||
font-size: 24rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.face-value-tag {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 0.8;
|
||||
border-radius: 10rpx 0 20rpx 0;
|
||||
top: 0;
|
||||
left: -2rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.face-value-tag {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 0.8;
|
||||
border-radius: 10rpx 0 20rpx 0;
|
||||
top: 0;
|
||||
left: -2rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 0.1;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 0.1;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-active {
|
||||
z-index: 1;
|
||||
.btn-active {
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 1;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
background: var(--ui-BG-Main);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.face-value-title {
|
||||
color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.face-value-title {
|
||||
color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.face-value-tag {
|
||||
background: $white;
|
||||
color: var(--ui-BG-Main);
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.face-value-tag {
|
||||
background: $white;
|
||||
color: var(--ui-BG-Main);
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -101,6 +101,7 @@
|
|||
},
|
||||
);
|
||||
const onRegionConfirm = (e) => {
|
||||
console.log(e);
|
||||
state.model = {
|
||||
...state.model,
|
||||
...e,
|
||||
|
|
@ -186,7 +187,13 @@
|
|||
|
||||
if (options.data) {
|
||||
let data = JSON.parse(options.data);
|
||||
console.log(data)
|
||||
const areaData = uni.getStorageSync('areaData');
|
||||
let provinceArr = areaData.filter(item => item.name == data.province_name);
|
||||
data.province_id = provinceArr[0].id;
|
||||
let provinceArr2 = provinceArr[0].children.filter(item => item.name == data.city_name);
|
||||
data.city_id = provinceArr2[0].id;
|
||||
let provinceArr3 = provinceArr2[0].children.filter(item => item.name == data.district_name);
|
||||
data.district_id = provinceArr3[0].id;
|
||||
state.model = {
|
||||
...state.model,
|
||||
...data,
|
||||
|
|
|
|||
|
|
@ -1,43 +1,54 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
export default {
|
||||
myGroupon: (params) =>
|
||||
request({
|
||||
url: 'activity/groupon/myGroupons',
|
||||
method: 'GET',
|
||||
params,
|
||||
}),
|
||||
getGrouponList: (params) =>
|
||||
request({
|
||||
url: 'activity/groupon',
|
||||
method: 'GET',
|
||||
params,
|
||||
}),
|
||||
grouponDetail: (id) =>
|
||||
request({
|
||||
url: 'activity/groupon/' + id,
|
||||
method: 'GET',
|
||||
}),
|
||||
signList: (params) =>
|
||||
request({
|
||||
url: 'activity/signin',
|
||||
method: 'GET',
|
||||
params,
|
||||
}),
|
||||
signAdd: () =>
|
||||
request({
|
||||
url: 'activity/signin',
|
||||
method: 'POST',
|
||||
}),
|
||||
replenish: (data) =>
|
||||
request({
|
||||
url: 'activity/signin/replenish',
|
||||
method: 'POST',
|
||||
data,
|
||||
}),
|
||||
activity: (id) =>
|
||||
request({
|
||||
url: 'activity/activity/' + id,
|
||||
method: 'GET',
|
||||
}),
|
||||
};
|
||||
myGroupon: (params) =>
|
||||
request({
|
||||
url: 'activity/groupon/myGroupons',
|
||||
method: 'GET',
|
||||
params,
|
||||
}),
|
||||
getGrouponList: (params) =>
|
||||
request({
|
||||
url: 'activity/groupon',
|
||||
method: 'GET',
|
||||
params,
|
||||
}),
|
||||
grouponDetail: (id) =>
|
||||
request({
|
||||
url: 'activity/groupon/' + id,
|
||||
method: 'GET',
|
||||
}),
|
||||
signList: (params) =>
|
||||
request({
|
||||
url: 'activity/signin',
|
||||
method: 'GET',
|
||||
params,
|
||||
}),
|
||||
signAdd: () =>
|
||||
request({
|
||||
url: '/app-api/member/sign-in/record/create',
|
||||
method: 'POST',
|
||||
}),
|
||||
// signAdd: () =>
|
||||
// request({
|
||||
// url: 'activity/signin',
|
||||
// method: 'POST',
|
||||
// }),
|
||||
replenish: (data) =>
|
||||
request({
|
||||
url: 'activity/signin/replenish',
|
||||
method: 'POST',
|
||||
data,
|
||||
}),
|
||||
activity: (id) =>
|
||||
request({
|
||||
url: 'activity/activity/' + id,
|
||||
method: 'GET',
|
||||
}),
|
||||
getSummary: () =>
|
||||
request({
|
||||
url: '/app-api/member/sign-in/record/get-summary',
|
||||
method: 'GET',
|
||||
}),
|
||||
|
||||
};
|
||||
|
|
@ -1,37 +1,46 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
export default {
|
||||
order: (id) =>
|
||||
request({
|
||||
url: 'trade/order/' + id,
|
||||
method: 'GET',
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
orderLog: (params) =>
|
||||
request({
|
||||
url: 'trade/order',
|
||||
method: 'GET',
|
||||
params,
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
order: (id) =>
|
||||
request({
|
||||
url: 'trade/order/' + id,
|
||||
method: 'GET',
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
orderLog: (params) =>
|
||||
request({
|
||||
url: 'trade/order',
|
||||
method: 'GET',
|
||||
params,
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
|
||||
rechargeRules: () =>
|
||||
request({
|
||||
url: 'trade/order/rechargeRules',
|
||||
method: 'GET',
|
||||
custom: {
|
||||
showError: false,
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
recharge: (data) =>
|
||||
request({
|
||||
url: 'trade/order/recharge',
|
||||
method: 'POST',
|
||||
data,
|
||||
}),
|
||||
};
|
||||
rechargeRules: () =>
|
||||
request({
|
||||
url: 'trade/order/rechargeRules',
|
||||
method: 'GET',
|
||||
custom: {
|
||||
showError: false,
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
rechargeRules2: () =>
|
||||
request({
|
||||
url: '/app-api/pay/wallet-recharge-package/list',
|
||||
method: 'GET',
|
||||
custom: {
|
||||
showError: false,
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
recharge: (data) =>
|
||||
request({
|
||||
url: '/app-api/pay/wallet-recharge/create',
|
||||
method: 'POST',
|
||||
data,
|
||||
}),
|
||||
};
|
||||
|
|
@ -1,19 +1,16 @@
|
|||
<template>
|
||||
<!-- 分享弹框 -->
|
||||
<view>
|
||||
<su-popup :show="state.showShareGuide" :showClose="false" @close="onCloseGuide"></su-popup>
|
||||
<view v-if="state.showShareGuide" class="guide-wrap">
|
||||
<image
|
||||
class="guide-image"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_guide.png')"
|
||||
></image>
|
||||
</view>
|
||||
<!-- 分享弹框 -->
|
||||
<view>
|
||||
<su-popup :show="state.showShareGuide" :showClose="false" @close="onCloseGuide"></su-popup>
|
||||
<view v-if="state.showShareGuide" class="guide-wrap">
|
||||
<image class="guide-image" :src="sheep.$url.static('/static/img/shop/share/share_guide.png')"></image>
|
||||
</view>
|
||||
|
||||
<su-popup :show="show" round="10" :showClose="false" @close="closeShareModal">
|
||||
<!-- 分享tools -->
|
||||
<view class="share-box">
|
||||
<view class="share-list-box ss-flex">
|
||||
<button
|
||||
<su-popup :show="show" round="10" :showClose="false" @close="closeShareModal">
|
||||
<!-- 分享tools -->
|
||||
<view class="share-box">
|
||||
<view class="share-list-box ss-flex">
|
||||
<!-- <button
|
||||
v-if="shareConfig.methods.includes('forward')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
open-type="share"
|
||||
|
|
@ -25,20 +22,14 @@
|
|||
mode=""
|
||||
></image>
|
||||
<text class="share-title">微信好友</text>
|
||||
</button>
|
||||
<button
|
||||
v-if="shareConfig.methods.includes('poster')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
@tap="onShareByPoster"
|
||||
>
|
||||
<image
|
||||
class="share-img"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="share-title">生成海报</text>
|
||||
</button>
|
||||
|
||||
</button> -->
|
||||
<button v-if="shareConfig.methods.includes('poster')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center" @tap="onShareByPoster">
|
||||
<image class="share-img" :src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
|
||||
mode=""></image>
|
||||
<text class="share-title">生成海报</text>
|
||||
</button>
|
||||
<!--
|
||||
<button
|
||||
v-if="shareConfig.methods.includes('link')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
|
|
@ -50,152 +41,157 @@
|
|||
mode=""
|
||||
></image>
|
||||
<text class="share-title">复制链接</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<!-- 分享海报 -->
|
||||
<canvas-poster
|
||||
ref="SharePosterRef"
|
||||
:show="state.showPosterModal"
|
||||
:shareInfo="shareInfo"
|
||||
@close="state.showPosterModal = false"
|
||||
/>
|
||||
</view>
|
||||
</button> -->
|
||||
</view>
|
||||
<view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<!-- 分享海报 -->
|
||||
<canvas-poster ref="SharePosterRef" :show="state.showPosterModal" :shareInfo="shareInfo"
|
||||
@close="state.showPosterModal = false" />
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
/**
|
||||
* 分享弹窗
|
||||
*/
|
||||
import { ref, unref, reactive, computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import canvasPoster from './canvas-poster/index.vue';
|
||||
import { showShareModal, closeShareModal, showAuthModal } from '@/sheep/hooks/useModal';
|
||||
/**
|
||||
* 分享弹窗
|
||||
*/
|
||||
import {
|
||||
ref,
|
||||
unref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import canvasPoster from './canvas-poster/index.vue';
|
||||
import {
|
||||
showShareModal,
|
||||
closeShareModal,
|
||||
showAuthModal
|
||||
} from '@/sheep/hooks/useModal';
|
||||
|
||||
const show = computed(() => sheep.$store('modal').share);
|
||||
const shareConfig = computed(() => sheep.$store('app').platform.share);
|
||||
const SharePosterRef = ref('');
|
||||
const show = computed(() => sheep.$store('modal').share);
|
||||
const shareConfig = computed(() => sheep.$store('app').platform.share);
|
||||
const SharePosterRef = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const props = defineProps({
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default () {},
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
showShareGuide: false, //H5的指引。
|
||||
showPosterModal: false, //海报弹窗
|
||||
});
|
||||
const state = reactive({
|
||||
showShareGuide: false, //H5的指引。
|
||||
showPosterModal: false, //海报弹窗
|
||||
});
|
||||
|
||||
// 生成海报分享
|
||||
const onShareByPoster = () => {
|
||||
closeShareModal();
|
||||
if (!sheep.$store('user').isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
unref(SharePosterRef).getPoster();
|
||||
state.showPosterModal = true;
|
||||
};
|
||||
// 生成海报分享
|
||||
const onShareByPoster = () => {
|
||||
closeShareModal();
|
||||
if (!sheep.$store('user').isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
unref(SharePosterRef).getPoster();
|
||||
state.showPosterModal = true;
|
||||
};
|
||||
|
||||
// 直接转发分享
|
||||
const onShareByForward = () => {
|
||||
closeShareModal();
|
||||
// 直接转发分享
|
||||
const onShareByForward = () => {
|
||||
closeShareModal();
|
||||
|
||||
// #ifdef H5
|
||||
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
|
||||
state.showShareGuide = true;
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
|
||||
state.showShareGuide = true;
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: props.shareInfo.link,
|
||||
title: props.shareInfo.title,
|
||||
summary: props.shareInfo.desc,
|
||||
imageUrl: props.shareInfo.image,
|
||||
success: (res) => {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: props.shareInfo.link,
|
||||
title: props.shareInfo.title,
|
||||
summary: props.shareInfo.desc,
|
||||
imageUrl: props.shareInfo.image,
|
||||
success: (res) => {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
|
||||
// 复制链接分享
|
||||
const onShareByCopyLink = () => {
|
||||
sheep.$helper.copyText(props.shareInfo.link);
|
||||
closeShareModal();
|
||||
};
|
||||
// 复制链接分享
|
||||
const onShareByCopyLink = () => {
|
||||
sheep.$helper.copyText(props.shareInfo.link);
|
||||
closeShareModal();
|
||||
};
|
||||
|
||||
function onCloseGuide() {
|
||||
state.showShareGuide = false;
|
||||
}
|
||||
function onCloseGuide() {
|
||||
state.showShareGuide = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.guide-image {
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 580rpx;
|
||||
height: 430rpx;
|
||||
z-index: 10080;
|
||||
}
|
||||
.guide-image {
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 580rpx;
|
||||
height: 430rpx;
|
||||
z-index: 10080;
|
||||
}
|
||||
|
||||
// 分享tool
|
||||
.share-box {
|
||||
background: $white;
|
||||
width: 750rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding-top: 30rpx;
|
||||
// 分享tool
|
||||
.share-box {
|
||||
background: $white;
|
||||
width: 750rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding-top: 30rpx;
|
||||
|
||||
.share-foot {
|
||||
font-size: 24rpx;
|
||||
color: $gray-b;
|
||||
height: 80rpx;
|
||||
border-top: 1rpx solid $gray-e;
|
||||
}
|
||||
.share-foot {
|
||||
font-size: 24rpx;
|
||||
color: $gray-b;
|
||||
height: 80rpx;
|
||||
border-top: 1rpx solid $gray-e;
|
||||
}
|
||||
|
||||
.share-list-box {
|
||||
.share-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
.share-list-box {
|
||||
.share-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.share-item {
|
||||
flex: 1;
|
||||
padding-bottom: 20rpx;
|
||||
.share-item {
|
||||
flex: 1;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.share-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background: $gray-f;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.share-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background: $gray-f;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.share-title {
|
||||
font-size: 24rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.share-title {
|
||||
font-size: 24rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue