依据文档修改

pull/27/head
落日晚风 2023-12-13 17:42:12 +08:00
parent 98baaab9bc
commit e71091cbb0
9 changed files with 1354 additions and 1310 deletions

View File

@ -33,7 +33,7 @@
// #endif
// #ifdef MP-WEIXIN
//
//
console.log(options, 'options');
// #endif

View File

@ -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">&nbsp;&nbsp;</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">&nbsp;&nbsp;</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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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,

View File

@ -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',
}),
};

View File

@ -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,
}),
};

View File

@ -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>