root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
77 2024-09-27 18:36:26 +08:00
parent eddf5b2aba
commit 613122558a
16 changed files with 1836 additions and 986 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
pages.json
View File

@ -177,6 +177,17 @@
"group": "商品"
}
},
{
"path": "sales",
"style": {
"navigationBarTitleText": "促销商品"
},
"meta": {
"sync": true,
"title": "促销商品",
"group": "商品"
}
},
{
"path": "list",
"style": {

939
pages/activity/groupon/detail.vue
View File

@ -1,516 +1,531 @@
<!-- 拼团订单的详情 -->
<template>
<s-layout
title="拼团详情"
class="detail-wrap"
:navbar="state.data && !state.loading ? 'inner' : 'normal'"
:onShareAppMessage="shareInfo"
>
<view v-if="state.loading"></view>
<view v-if="state.data && !state.loading">
<!-- 团长信息 + 活动信息 -->
<view
class="recharge-box"
v-if="state.data.headRecord"
:style="[
<s-layout title="拼团详情" class="detail-wrap" :navbar="state.data && !state.loading ? 'inner' : 'normal'">
<!-- :onShareAppMessage="shareInfo" -->
<view v-if="state.loading"></view>
<view v-if="state.data && !state.loading">
<!-- 团长信息 + 活动信息 -->
<view class="recharge-box" v-if="state.data.headRecord" :style="[
{
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 108) + 'rpx',
},
]"
>
<s-goods-item
class="goods-box"
:img="state.data.headRecord.picUrl"
:title="state.data.headRecord.spuName"
:price="state.data.headRecord.combinationPrice"
priceColor="#E1212B"
@tap="
]">
<s-goods-item class="goods-box" :img="state.data.headRecord.picUrl"
:title="state.data.headRecord.spuName" :price="state.data.headRecord.combinationPrice"
priceColor="#E1212B" @tap="
sheep.$router.go('/pages/goods/groupon', {
id: state.data.headRecord.activityId,
})
"
:style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
>
<template #groupon>
<view class="ss-flex">
<view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
<view class="num-title ss-m-l-20">已拼{{ state.data.headRecord.userCount }}件</view>
</view>
</template>
</s-goods-item>
</view>
" :style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]">
<template #groupon>
<view class="ss-flex">
<view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
<view class="num-title ss-m-l-20">已拼{{ state.data.headRecord.userCount }}件</view>
</view>
</template>
</s-goods-item>
</view>
<image class="image" mode="aspectFill"
src="https://zysc.fjptzykj.com:3000/shangcheng/2dc59ec207f1c5bd04d0f4734a4600c5e2dce8e5d740bb7ddfce75e9012a4b04.png" />
<view class="countdown-box detail-card ss-p-t-44 ss-flex-col ss-col-center">
<!-- 情况一：拼团成功 -->
<view v-if="state.data.headRecord.status === 1">
<view v-if="state.data.orderId">
<view class="countdown-title ss-flex">
<text class="cicon-check-round" />
恭喜您~拼团成功
</view>
</view>
<view v-else>
<view class="countdown-title ss-flex">
<text class="cicon-info" />
抱歉~该团已满员
</view>
</view>
</view>
<view class="countdown-box detail-card ss-p-t-44 ss-flex-col ss-col-center">
<!-- 情况一：拼团成功 -->
<view v-if="state.data.headRecord.status === 1">
<view v-if="state.data.orderId">
<view class="countdown-title ss-flex">
<text class="cicon-check-round" />
恭喜您~拼团成功
</view>
</view>
<view v-else>
<view class="countdown-title ss-flex">
<text class="cicon-info" />
抱歉~该团已满员
</view>
</view>
</view>
<!-- 情况二：拼团失败 -->
<view v-if="state.data.headRecord.status === 2">
<view class="countdown-title ss-flex">
<text class="cicon-info"></text>
{{ state.data.orderId ? '拼团超时,已自动退款' : '该团已解散' }}
</view>
</view>
<!-- 情况二：拼团失败 -->
<view v-if="state.data.headRecord.status === 2">
<view class="countdown-title ss-flex">
<text class="cicon-info"></text>
{{ state.data.orderId ? '拼团超时,已自动退款' : '该团已解散' }}
</view>
</view>
<!-- 情况三：拼团进行中 -->
<view v-if="state.data.headRecord.status === 0">
<view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
<view class="countdown-title ss-flex">
<text class="cicon-info"></text>
拼团已结束,请关注下次活动
</view>
</view>
<view class="countdown-title ss-flex" v-else>
还差
<view class="num">{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view>
拼团成功
<view class="ss-flex countdown-time">
<view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">
{{ endTime.m }}
</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">
{{ endTime.s }}
</view>
</view>
</view>
</view>
<!-- 情况三：拼团进行中 -->
<view v-if="state.data.headRecord.status === 0">
<view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
<view class="countdown-title ss-flex">
<text class="cicon-info"></text>
拼团已结束,请关注下次活动
</view>
</view>
<view class="countdown-title ss-flex" v-else>
还差
<view class="num"
>{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view
>
拼团成功
<view class="ss-flex countdown-time">
<view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">
{{ endTime.m }}
</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">
{{ endTime.s }}
</view>
</view>
</view>
</view>
<!-- 拼团的记录列表，展示每个参团人 -->
<view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
<!-- 团长 -->
<view class="header-avatar ss-m-r-24 ss-m-b-20">
<image :src="sheep.$url.cdn(state.data.headRecord.avatar)" class="avatar-img"></image>
<view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
</view>
<!-- 团员 -->
<view class="header-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.data.memberRecords"
:key="item.id">
<image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
<view class="header-tag ss-flex ss-col-center ss-row-center" v-if="item.is_leader == '1'">
团长
</view>
</view>
<!-- 还有几个坑位 -->
<view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.remainNumber" :key="item">
<image :src="sheep.$url.static('/static/img/shop/avatar/unknown.png')" class="avatar-img">
</image>
</view>
</view>
</view>
<!-- 拼团的记录列表，展示每个参团人 -->
<view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
<!-- 团长 -->
<view class="header-avatar ss-m-r-24 ss-m-b-20">
<image :src="sheep.$url.cdn(state.data.headRecord.avatar)" class="avatar-img"></image>
<view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
</view>
<!-- 团员 -->
<view
class="header-avatar ss-m-r-24 ss-m-b-20"
v-for="item in state.data.memberRecords"
:key="item.id"
>
<image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
<view
class="header-tag ss-flex ss-col-center ss-row-center"
v-if="item.is_leader == '1'"
>
团长
</view>
</view>
<!-- 还有几个坑位 -->
<view
class="default-avatar ss-m-r-24 ss-m-b-20"
v-for="item in state.remainNumber"
:key="item"
>
<image
:src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
class="avatar-img"
></image>
</view>
</view>
</view>
<!-- 情况一：拼团成功；情况二：拼团失败 -->
<view v-if="state.data.headRecord.status === 1 || state.data.headRecord.status === 2"
class="ss-m-t-40 ss-flex ss-row-center">
<button class="ss-reset-button order-btn" v-if="state.data.orderId" @tap="onDetail(state.data.orderId)">
查看订单
</button>
<button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
</view>
<!-- 情况一：拼团成功；情况二：拼团失败 -->
<view
v-if="state.data.headRecord.status === 1 || state.data.headRecord.status === 2"
class="ss-m-t-40 ss-flex ss-row-center"
>
<button
class="ss-reset-button order-btn"
v-if="state.data.orderId"
@tap="onDetail(state.data.orderId)"
>
查看订单
</button>
<button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
</view>
<!-- 情况三：拼团进行中，查看订单或参加或邀请好友或参加 -->
<view v-if="state.data.headRecord.status === 0" class="ss-m-t-40 ss-flex ss-row-center">
<view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
<button class="ss-reset-button join-btn" v-if="state.data.orderId"
@tap="onDetail(state.data.orderId)">
查看订单
</button>
<button class="ss-reset-button disabled-btn" v-else disabled @tap="onDetail(state.data.orderId)">
去参团
</button>
</view>
<view v-else class="ss-flex ss-row-center">
<view v-if="state.data.orderId">
<button class="ss-reset-button join-btn" :disabled="endTime.ms <= 0" @tap="onShare">
邀请好友来拼团
</button>
</view>
<view v-else>
<button class="ss-reset-button join-btn" :disabled="endTime.ms <= 0" @tap="onJoinGroupon()">
立即参团
</button>
</view>
</view>
</view>
<!-- 情况三：拼团进行中，查看订单或参加或邀请好友或参加 -->
<view v-if="state.data.headRecord.status === 0" class="ss-m-t-40 ss-flex ss-row-center">
<view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
<button
class="ss-reset-button join-btn"
v-if="state.data.orderId"
@tap="onDetail(state.data.orderId)"
>
查看订单
</button>
<button
class="ss-reset-button disabled-btn"
v-else
disabled
@tap="onDetail(state.data.orderId)"
>
去参团
</button>
</view>
<view v-else class="ss-flex ss-row-center">
<view v-if="state.data.orderId">
<button class="ss-reset-button join-btn" :disabled="endTime.ms <= 0" @tap="onShare">
邀请好友来拼团
</button>
</view>
<view v-else>
<button
class="ss-reset-button join-btn"
:disabled="endTime.ms <= 0"
@tap="onJoinGroupon()"
>
立即参团
</button>
</view>
</view>
</view>
<!-- TODO 芋艿：这里暂时没接入 -->
<s-select-groupon-sku :show="state.showSelectSku" :goodsInfo="state.goodsInfo"
:grouponAction="state.grouponAction" :grouponNum="state.grouponNum" @buy="onBuy" @change="onSkuChange"
@close="state.showSelectSku = false" />
</view>
<!-- TODO 芋艿：这里暂时没接入 -->
<view v-if="state.data.goods">
<s-select-groupon-sku
:show="state.showSelectSku"
:goodsInfo="state.data.goods"
:grouponAction="state.grouponAction"
:grouponNum="state.grouponNum"
@buy="onBuy"
@change="onSkuChange"
@close="state.showSelectSku = false"
/>
</view>
</view>
<s-empty v-if="!state.data && !state.loading" icon="/static/goods-empty.png" />
</s-layout>
<s-empty v-if="!state.data && !state.loading" icon="/static/goods-empty.png" />
</s-layout>
</template>
<script setup>
import { computed, reactive } from 'vue';
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { useDurationTime } from '@/sheep/hooks/useGoods';
import { showShareModal } from '@/sheep/hooks/useModal';
import { isEmpty } from 'lodash';
import CombinationApi from '@/sheep/api/promotion/combination';
import {
computed,
reactive
} from 'vue';
import sheep from '@/sheep';
import {
onLoad
} from '@dcloudio/uni-app';
import {
useDurationTime
} from '@/sheep/hooks/useGoods';
import {
showShareModal
} from '@/sheep/hooks/useModal';
import {
isEmpty
} from 'lodash';
import CombinationApi from '@/sheep/api/promotion/combination';
import SpuApi from '@/sheep/api/product/spu';
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const state = reactive({
data: {}, // 拼团详情
loading: true,
grouponAction: 'create',
showSelectSku: false,
grouponNum: 0,
number: 0,
activity: {},
combinationHeadId: null, // 拼团团长编号
});
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const state = reactive({
data: {
goods: true
}, // 拼团详情
loading: true,
grouponAction: 'create',
showSelectSku: false,
grouponNum: 0,
number: 0,
activity: {},
combinationHeadId: null, // 拼团团长编号
goodsInfo: {}, // 商品信息
goodsId: '',
skeletonLoading: false,
goodsSwiper: [], // 商品轮播图
});
// todo 芋艿：分享要再接下
const shareInfo = computed(() => {
if (isEmpty(state.data)) return {};
return sheep.$platform.share.getShareInfo(
{
title: state.data.headRecord.spuName,
image: sheep.$url.cdn(state.data.headRecord.picUrl),
desc: state.data.goods?.subtitle,
params: {
page: '5',
query: state.data.id,
},
},
{
type: 'groupon', // 邀请拼团海报
title: state.data.headRecord.spuName, // 商品标题
image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
price: state.data.goods?.price, // 商品价格
original_price: state.data.goods?.original_price, // 商品原价
},
);
});
// todo 芋艿：分享要再接下
const shareInfo = computed(() => {
if (isEmpty(state.data)) return {};
return sheep.$platform.share.getShareInfo({
title: state.data.headRecord.spuName,
image: sheep.$url.cdn(state.data.headRecord.picUrl),
desc: state.data.goods?.subtitle,
params: {
page: '5',
query: state.data.id,
},
}, {
type: 'groupon', // 邀请拼团海报
title: state.data.headRecord.spuName, // 商品标题
image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
price: state.data.goods?.price, // 商品价格
original_price: state.data.goods?.original_price, // 商品原价
}, );
});
// 订单详情
function onDetail(orderId) {
sheep.$router.go('/pages/order/detail', {
id: orderId,
});
}
// 订单详情
function onDetail(orderId) {
sheep.$router.go('/pages/order/detail', {
id: orderId,
});
}
// 去开团 TODO 芋艿：这里没接入
function onCreateGroupon() {
state.grouponAction = 'create';
state.grouponId = 0;
state.showSelectSku = true;
}
// 去开团 TODO 芋艿：这里没接入
function onCreateGroupon() {
state.grouponAction = 'create';
state.grouponId = 0;
state.showSelectSku = true;
}
// 规格变更 TODO 芋艿：这里没接入
function onSkuChange(e) {
state.selectedSkuPrice = e;
}
// 规格变更 TODO 芋艿：这里没接入
function onSkuChange(e) {
state.selectedSkuPrice = e;
}
// 立即参团 TODO 芋艿：这里没接入
function onJoinGroupon() {
state.grouponAction = 'join';
state.grouponId = state.data.activityId;
state.combinationHeadId = state.data.id;
state.grouponNum = state.data.num;
state.showSelectSku = true;
}
// 立即参团 TODO 芋艿：这里没接入
function onJoinGroupon() {
state.grouponAction = 'join';
state.grouponId = state.activityId;
state.combinationHeadId = state.id;
state.grouponNum = state.userSize;
state.showSelectSku = true;
}
// 立即购买 TODO 芋艿：这里没接入
function onBuy(sku) {
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
order_type: 'goods',
combinationActivityId: state.data.activity.id,
combinationHeadId: state.combinationHeadId,
items: [
{
skuId: sku.id,
count: sku.count,
},
],
}),
});
}
// 立即购买 TODO 芋艿：这里没接入
function onBuy(sku) {
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
order_type: 'goods',
combinationActivityId: state.grouponId,
combinationHeadId: state.combinationHeadId,
items: [{
skuId: sku.id,
count: sku.count,
}, ],
}),
});
}
const endTime = computed(() => {
return useDurationTime(state.data.headRecord.expireTime);
});
// 加载商品信息
const loadActiv = async () => {
// 加载活动信息
const {
code,
data: activity
} = await CombinationApi.getCombinationActivity(state.grouponId);
state.activity = activity;
const {
data: spu
} = await SpuApi.getSpuDetail(activity.spuId);
state.goodsId = spu.id;
activity.products.forEach((product) => {
spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
});
// 关闭骨架屏
state.skeletonLoading = false;
if (code === 0) {
state.goodsInfo = spu;
state.grouponNum = activity.userSize;
// state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
} else {
// 未找到商品
state.goodsInfo = null;
}
}
// 获取拼团团队详情
async function getGrouponDetail(id) {
const { code, data } = await CombinationApi.getCombinationRecordDetail(id);
if (code === 0) {
state.data = data;
const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
state.remainNumber = remainNumber > 0 ? remainNumber : 0;
const endTime = computed(() => {
return useDurationTime(state.data.headRecord.expireTime);
});
// 获取活动信息
const { data: activity } = await CombinationApi.getCombinationActivity(
data.headRecord.activityId,
);
state.activity = activity;
} else {
state.data = null;
}
state.loading = false;
}
// 获取拼团团队详情
async function getGrouponDetail(id) {
const {
code,
data
} = await CombinationApi.getCombinationRecordDetail(id);
if (code === 0) {
state.data = data;
const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
state.remainNumber = remainNumber > 0 ? remainNumber : 0;
function onShare() {
showShareModal();
}
// 获取活动信息
const {
data: activity
} = await CombinationApi.getCombinationActivity(
data.headRecord.activityId,
);
state.activity = activity;
} else {
state.data = null;
}
state.loading = false;
}
onLoad((options) => {
getGrouponDetail(options.id);
});
function onShare() {
showShareModal();
}
onLoad((options) => {
getGrouponDetail(options.id);
// 非法参数
if (!options.id) {
state.goodsInfo = null;
return;
}
state.grouponId = options.id;
loadActiv();
});
</script>
<style lang="scss" scoped>
.recharge-box {
position: relative;
margin-bottom: 120rpx;
background: v-bind(headerBg) center/750rpx 100% no-repeat,
linear-gradient(115deg, #f44739 0%, #ff6600 100%);
border-radius: 0 0 5% 5%;
height: 100rpx;
.image {
display: block;
margin: 0 auto;
width: 100%;
height: 154px;
}
.goods-box {
width: 710rpx;
border-radius: 20rpx;
position: absolute;
left: 20rpx;
box-sizing: border-box;
}
.recharge-box {
position: relative;
margin-bottom: 120rpx;
background: v-bind(headerBg) center/750rpx 100% no-repeat,
linear-gradient(115deg, #f44739 0%, #ff6600 100%);
border-radius: 0 0 5% 5%;
height: 100rpx;
.sales-title {
height: 32rpx;
background: rgba(#ffe0e2, 0.29);
border-radius: 16rpx;
font-size: 24rpx;
font-weight: 400;
padding: 6rpx 20rpx;
color: #f7979c;
}
.goods-box {
width: 710rpx;
border-radius: 20rpx;
position: absolute;
left: 20rpx;
box-sizing: border-box;
}
.num-title {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
}
.sales-title {
height: 32rpx;
background: rgba(#ffe0e2, 0.29);
border-radius: 16rpx;
font-size: 24rpx;
font-weight: 400;
padding: 6rpx 20rpx;
color: #f7979c;
}
.countdown-time {
font-size: 26rpx;
font-weight: 500;
color: #383a46;
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
margin-left: 16rpx;
height: 40rpx;
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
border-radius: 6rpx;
}
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
border-radius: 6rpx;
}
}
.num-title {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
}
.countdown-box {
// height: 364rpx;
background: #ffffff;
border-radius: 10rpx;
box-sizing: border-box;
.countdown-time {
font-size: 26rpx;
font-weight: 500;
color: #383a46;
.countdown-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
margin-left: 16rpx;
height: 40rpx;
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
border-radius: 6rpx;
}
.cicon-check-round {
color: #42b111;
margin-right: 24rpx;
}
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
border-radius: 6rpx;
}
}
.cicon-info {
color: #d71e08;
margin-right: 24rpx;
}
.countdown-box {
// height: 364rpx;
background: #ffffff;
border-radius: 10rpx;
box-sizing: border-box;
.num {
color: #ff6000;
}
}
.countdown-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
.header-avatar {
width: 86rpx;
height: 86rpx;
background: #ececec;
border-radius: 50%;
border: 4rpx solid #edc36c;
position: relative;
box-sizing: border-box;
.cicon-check-round {
color: #42b111;
margin-right: 24rpx;
}
.avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.cicon-info {
color: #d71e08;
margin-right: 24rpx;
}
.header-tag {
width: 72rpx;
height: 36rpx;
font-size: 24rpx;
line-height: nor;
background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
border-radius: 16rpx;
position: absolute;
left: 4rpx;
top: -36rpx;
}
}
.default-avatar {
width: 86rpx;
height: 86rpx;
background: #ececec;
border-radius: 50%;
.avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.num {
color: #ff6000;
}
}
.user-avatar {
width: 86rpx;
height: 86rpx;
background: #ececec;
border-radius: 50%;
}
}
.order-btn {
width: 668rpx;
height: 70rpx;
border: 2rpx solid #dfdfdf;
border-radius: 35rpx;
color: #999999;
font-weight: 500;
font-size: 26rpx;
line-height: normal;
}
.header-avatar {
width: 86rpx;
height: 86rpx;
background: #ececec;
border-radius: 50%;
border: 4rpx solid #edc36c;
position: relative;
box-sizing: border-box;
.disabled-btn {
width: 668rpx;
height: 70rpx;
background: #dddddd;
border-radius: 35rpx;
color: #999999;
font-weight: 500;
font-size: 28rpx;
line-height: normal;
}
.avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.join-btn {
width: 668rpx;
height: 70rpx;
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
border-radius: 35rpx;
color: #fff;
font-weight: 500;
font-size: 28rpx;
line-height: normal;
}
.header-tag {
width: 72rpx;
height: 36rpx;
font-size: 24rpx;
line-height: nor;
background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
border-radius: 16rpx;
position: absolute;
left: 4rpx;
top: -36rpx;
}
}
.detail-cell-wrap {
width: 100%;
padding: 10rpx 20rpx;
box-sizing: border-box;
border-top: 2rpx solid #dfdfdf;
background-color: #fff;
// min-height: 60rpx;
.default-avatar {
width: 86rpx;
height: 86rpx;
background: #ececec;
border-radius: 50%;
.label-text {
font-size: 28rpx;
font-weight: 400;
}
.avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.cell-content {
font-size: 28rpx;
font-weight: 500;
color: $dark-6;
}
.user-avatar {
width: 86rpx;
height: 86rpx;
background: #ececec;
border-radius: 50%;
}
}
.right-forwrad-icon {
font-size: 28rpx;
font-weight: 500;
color: $dark-9;
}
}
.order-btn {
width: 668rpx;
height: 70rpx;
border: 2rpx solid #dfdfdf;
border-radius: 35rpx;
color: #999999;
font-weight: 500;
font-size: 26rpx;
line-height: normal;
}
.disabled-btn {
width: 668rpx;
height: 70rpx;
background: #dddddd;
border-radius: 35rpx;
color: #999999;
font-weight: 500;
font-size: 28rpx;
line-height: normal;
}
.join-btn {
width: 668rpx;
height: 70rpx;
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
border-radius: 35rpx;
color: #fff;
font-weight: 500;
font-size: 28rpx;
line-height: normal;
}
.detail-cell-wrap {
width: 100%;
padding: 10rpx 20rpx;
box-sizing: border-box;
border-top: 2rpx solid #dfdfdf;
background-color: #fff;
// min-height: 60rpx;
.label-text {
font-size: 28rpx;
font-weight: 400;
}
.cell-content {
font-size: 28rpx;
font-weight: 500;
color: $dark-6;
}
.right-forwrad-icon {
font-size: 28rpx;
font-weight: 500;
color: $dark-9;
}
}
</style>

2
pages/activity/groupon/list.vue
View File

@ -119,7 +119,7 @@
width: 100%;
height: 458rpx;
margin-top: -88rpx;
background: v-bind(headerBg) no-repeat;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
background-size: 100% 100%;
}
.list-content {

11
pages/goods/groupon.vue
View File

@ -86,6 +86,11 @@
<!-- 参团列表 -->
<groupon-card-list v-model="state.activity" @join="onJoinGroupon" />
<!-- 参团玩法 -->
<view class="detail-cell-card detail-card ss-flex-col">
<image class="image" mode="aspectFill" src="https://zysc.fjptzykj.com:3000/shangcheng/27747f3ba1d36807f485eab196aecd357e0811d6f74b36936818a2a7ff86d96e.png"/>
</view>
<!-- 规格与数量弹框 -->
<s-select-groupon-sku
:show="state.showSelectSku"
@ -279,6 +284,9 @@
</script>
<style lang="scss" scoped>
.image{
height: 142px;
}
.detail-card {
background-color: $white;
margin: 14rpx 20rpx;
@ -529,4 +537,7 @@
width: 100%;
height: 100%;
}
body{
background:#f6f6f6 !important;
}
</style>

295
pages/goods/sales.vue Normal file
View File

@ -0,0 +1,295 @@
<!-- 秒杀商品详情 -->
<template>
<s-layout :onShareAppMessage="shareInfo" navbar="goods">
ssss
</s-layout>
</template>
<script setup>
import SpuApi from '@/sheep/api/product/spu';
const getSpu = async (id) => {
const { data } = await SpuApi.getSpusales(id);
console.log(data,"我要留了")
};
getSpu()
</script>
<style lang="scss" scoped>
.disabled-btn-box[disabled] {
background-color: transparent;
}
.detail-card {
background-color: $white;
margin: 14rpx 20rpx;
border-radius: 10rpx;
overflow: hidden;
}
// 价格标题卡片
.title-card {
width: 710rpx;
box-sizing: border-box;
// height: 320rpx;
background-size: 100% 100%;
border-radius: 10rpx;
background-image: url('@/static/images/seckill-header.png');
background-repeat: no-repeat;
.price-box {
.price-text {
font-size: 30rpx;
font-weight: 500;
color: #fff;
line-height: normal;
font-family: OPPOSANS;
&::before {
content: '￥';
font-size: 30rpx;
}
}
}
.origin-price {
font-size: 24rpx;
font-weight: 400;
color: #fff;
opacity: 0.7;
.origin-price-text {
text-decoration: line-through;
font-family: OPPOSANS;
&::before {
content: '￥';
}
}
}
.tig {
border: 2rpx solid #ffffff;
border-radius: 4rpx;
width: 126rpx;
height: 38rpx;
.tig-icon {
width: 40rpx;
height: 40rpx;
margin-left: -2rpx;
background: #ffffff;
border-radius: 4rpx 0 0 4rpx;
.cicon-alarm {
font-size: 32rpx;
color: #fc6e6f;
}
}
.tig-title {
width: 86rpx;
font-size: 24rpx;
font-weight: 500;
line-height: normal;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
}
.countdown-title {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
}
.countdown-time {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
height: 40rpx;
background: rgba(#000000, 0.1);
border-radius: 6rpx;
}
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: rgba(#000000, 0.1);
border-radius: 6rpx;
}
}
.discounts-box {
.discounts-tag {
padding: 4rpx 10rpx;
font-size: 24rpx;
font-weight: 500;
border-radius: 4rpx;
color: var(--ui-BG-Main);
// background: rgba(#2aae67, 0.05);
background: var(--ui-BG-Main-tag);
}
.discounts-title {
font-size: 24rpx;
font-weight: 500;
color: var(--ui-BG-Main);
line-height: normal;
}
.cicon-forward {
color: var(--ui-BG-Main);
font-size: 24rpx;
line-height: normal;
margin-top: 4rpx;
}
}
.title-text {
font-size: 30rpx;
font-weight: bold;
line-height: 42rpx;
color: #fff;
}
.subtitle-text {
font-size: 26rpx;
font-weight: 400;
color: #ffffff;
line-height: 42rpx;
opacity: 0.9;
}
}
// 购买
.buy-box {
.check-btn-box {
width: 248rpx;
height: 80rpx;
font-size: 24rpx;
font-weight: 600;
margin-left: -36rpx;
background-image: url('@/static/images/groupon-btn.png');
background-repeat: no-repeat;
background-size: 100% 100%;
color: #ffffff;
line-height: normal;
border-radius: 0px 40rpx 40rpx 0px;
}
.disabled-btn-box {
width: 248rpx;
height: 80rpx;
font-size: 24rpx;
font-weight: 600;
margin-left: -36rpx;
background-image: url('@/static/images/activity-btn-disabled.png');
background-repeat: no-repeat;
background-size: 100% 100%;
color: #999999;
line-height: normal;
border-radius: 0px 40rpx 40rpx 0px;
}
.btn-price {
font-family: OPPOSANS;
&::before {
content: '￥';
}
}
.origin-price-btn {
width: 236rpx;
height: 80rpx;
background: rgba(#ff5651, 0.1);
color: #ff6000;
border-radius: 40rpx 0px 0px 40rpx;
line-height: normal;
font-size: 24rpx;
font-weight: 500;
.no-original {
font-size: 28rpx;
}
.btn-title {
font-size: 28rpx;
}
}
}
//秒杀卡片
.seckill-box {
background: v-bind(seckillBg) no-repeat;
background-size: 100% 100%;
}
.groupon-box {
background: v-bind(grouponBg) no-repeat;
background-size: 100% 100%;
}
//活动卡片
.activity-box {
width: 100%;
height: 80rpx;
box-sizing: border-box;
margin-bottom: 10rpx;
.activity-title {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
line-height: 42rpx;
.activity-icon {
width: 38rpx;
height: 38rpx;
}
}
.activity-go {
width: 70rpx;
height: 32rpx;
background: #ffffff;
border-radius: 16rpx;
font-weight: 500;
color: #ff6000;
font-size: 24rpx;
line-height: normal;
}
}
.model-box {
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.subtitle {
font-size: 26rpx;
font-weight: 500;
color: #333333;
}
}
image {
width: 100%;
height: 100%;
}
</style>

538
pages/subscribe/subscribe.vue
View File

@ -4,14 +4,15 @@
<view class="doctor-list">
<view class="doctor-cards" >
<image class="doctor-avatars" :src="'https://sfyjk.com/api'+brandList[selectedClinicIndex].picUrl" mode="aspectFill"></image><br/><br/>
<view class="doctor-cards">
<image class="doctor-avatars" :src="brandList.list[selectedClinicIndex].picUrl"
mode="aspectFill"></image><br /><br />
<view class="brandr-info">
<text class="doctor-names">
<text class="ygcontent">医馆地址：</text>
{{ brandList[selectedClinicIndex].address }}</text><br/><br/>
<!-- <div v-html='brandList[selectedClinicIndex].depict'></div> -->
<rich-text class="doctor-specialtys" :nodes="brandList[selectedClinicIndex].depict"></rich-text>
<text class="ygcontent">医馆地址：</text>
{{ brandList.list[selectedClinicIndex].address }}</text><br /><br />
<!-- <div v-html='brandList.list[selectedClinicIndex].depict'></div> -->
<rich-text class="doctor-specialtys" :nodes="brandList.list[selectedClinicIndex].depict"></rich-text>
</view>
</view>
@ -19,17 +20,17 @@
<view class="clinic-select">
<text class="clinic-select-label">医馆选择</text>
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
<view class="clinic-select-value">
<text>{{ brandList[selectedClinicIndex].name}}</text>
<text>{{ brandList.list[selectedClinicIndex].name}}</text>
</view>
</picker>
</view>
<view class="clinic-select">
<text class="clinic-select-label">预约类型</text>
<picker mode="selector" :range="typenameList" @change="ontype">
<picker mode="selector" :range="typenameList" @change="ontype">
<view class="clinic-select-value">
<text>{{ typeList[selecttypeIndex].dictLabel}}</text>
<text>{{ typeList[selecttypeIndex].label}}</text>
</view>
</picker>
</view>
@ -76,13 +77,15 @@
<!-- {{techList}} -->
<view class="doctor-card" v-for="(item, index) in techList" :key="index">
<view class="doctor-info">
<image class="doctor-avatar" :src="'https://sfyjk.com/api'+item.photo" mode="aspectFill"></image>
<image class="doctor-avatar" :src="'https://sfyjk.com/api'+item.photo" mode="aspectFill">
</image>
<text class="doctor-name">{{ item.technicianName }}</text>
<text class="doctor-name" style="float: right;margin-right: 20px;">{{item.typeName}}</text>
<!-- <text class="doctor-specialty" v-if="item.content">介绍: {{item.content.substr(0, 20)}}...</text> -->
</view>
<radio style="float: right;" :value="item.id" @click="onradio(item)" :checked="index==0"></radio>
<radio style="float: right;" :value="item.id" @click="onradio(item)" :checked="index==0">
</radio>
<div v-if="techid == item.id">
<view class="info-title">服务范围</view>
<rich-text style="white-space: pre-wrap;" :nodes="item.serviceScope"></rich-text>
@ -101,15 +104,15 @@
</view>
<view v-if="item.ym==='true'">
<view class="date-itemym" v-if="hsstr!=item.str" >
<text class="weekdayym">约满</text><br/>
<text class="weekday">{{ item.str }}</text>
<view class="date-itemym" v-if="hsstr!=item.str">
<text class="weekdayym">约满</text><br />
<text class="weekday">{{ item.str }}</text>
</view>
</view>
<view v-if="item.ym==='false'">
<view class="date-itemstr" v-if="hsstr!=item.str" >
<text class="weekday">{{ item.str }}</text>
<view class="date-itemstr" v-if="hsstr!=item.str">
<text class="weekday">{{ item.str }}</text>
</view>
</view>
@ -127,24 +130,33 @@
</template>
<script>
import { baseUrl, apiPath } from '@/sheep/config';
import { computed } from 'vue';
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
import {
computed
} from 'vue';
import sheep from '@/sheep';
import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
import {
showShareModal,
showAuthModal
} from '@/sheep/hooks/useModal';
// import pickerTime from "@/pages/commission/pickerTime.vue"
// 用户信息
// 用户信息
export default {
// components: {
// pickerTime
// },
data() {
return {
isLogin:null,
memberId:null,
isLogin: null,
memberId: null,
// showTime: false,
serviceTime:[],
sjd:{},
ym:[],
serviceTime: [],
sjd: {},
ym: [],
// starhour: 8,
// starminute: 0,
// endhour: 18,
@ -154,47 +166,53 @@
hsstr: "",
dateList: [],
typeList:[
{dictValue:0,dictLabel:"调理预约"},
{dictValue:1,dictLabel:"教培预约"}
typeList: [{
dictValue: 0,
dictLabel: "调理预约"
},
{
dictValue: 1,
dictLabel: "教培预约"
}
],
typenameList:[],
typenameList: [],
addDate: "",
techList: [], // 技师列表
//医馆信息
selectedClinicIndex: 0, // 当前选中的医馆索引
brandList: [{
name:""
name: ""
}],
brandNameList: [],
brandId: "",
brandName: "",
selectedDayIndex: 0,
selecttypeIndex:0,
selecttypeIndex: 0,
techid: 0,
type: 0,
};
},
created() {
this.isLogin = computed(() => sheep.$store('user').isLogin);
this.memberId=computed(() => sheep.$store('user').userInfo).value.id
this.brandlist();
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
this.brandlists();
this.generateDateList();
this.addDate=this.dateList[0].addDate;
this.addDate = this.dateList[0].addDate;
this.gettypeList();
console.log(apiPath,baseUrl,"import.meta.env.SHOPRO_API_PATH")
console.log(apiPath, baseUrl, "import.meta.env.SHOPRO_API_PATH")
},
methods: {
onClinicChange(event) {
const selectedClinicIndex = event.detail.value;
this.selectedClinicIndex = selectedClinicIndex;
this.brandName = this.brandList[selectedClinicIndex].name
this.brandId = this.brandList[selectedClinicIndex].id
this.brandName = this.brandList.list[selectedClinicIndex].name
this.brandId = this.brandList.list[selectedClinicIndex].id
console.log("dddddddddddd")
this.technicianList();
},
ontype(event){
ontype(event) {
const selecttypeIndex = event.detail.value;
this.selecttypeIndex = selecttypeIndex;
this.typename = this.typeList[selecttypeIndex].dictValue
@ -203,110 +221,201 @@
this.technicianList();
},
// 查询医馆列表
brandlist() {
uni.request({
url: `${baseUrl}/api/h5/brand/list`,
success: (res) => {
this.brandList = res.data
for (var i = 0; i < this.brandList.length; i++) {
// this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
this.brandNameList.push(this.brandList[i].name)
}
this.brandId = this.brandList[0].id
this.technicianList();
brandlists() {
request({
url: `${baseUrl}${apiPath}/h5/brand/list`,
method: 'GET',
custom: {
showLoading: false,
},
fail: (error) => {
console.log(error)
}).then((res) => {
this.brandList = res.data
console.log(this.brandList,"this.brandList")
for (var i = 0; i < this.brandList.list.length; i++) {
// this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
this.brandNameList.push(this.brandList.list[i].name)
}
})
},
gettypeList() {
uni.request({
url: `${baseUrl}/api/h5/reservation/type`,
success: (res) => {
this.typeList = res.data.data
// this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
for (var i = 0; i < this.typeList.length; i++) {
this.typenameList.push(this.typeList[i].dictLabel);
}
console.log(this.typenameList)
},
fail: (error) => {
console.log(error)
}
})
this.brandId = this.brandList[0].id
this.technicianList();
});
// uni.request({
// url: `${baseUrl}/api/h5/brand/list`,
// success: (res) => {
// this.brandList = res.data
// for (var i = 0; i < this.brandList.length; i++) {
// // this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
// this.brandNameList.push(this.brandList[i].name)
// }
// this.brandId = this.brandList[0].id
// this.technicianList();
// },
// fail: (error) => {
// console.log(error)
// }
// })
},
gettypeList() {
request({
url: `${baseUrl}${apiPath}/h5/reservation/type`,
method: 'GET',
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res,"typeListtypeList")
this.typeList = res.data
// this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
for (var i = 0; i < this.typeList.length; i++) {
this.typenameList.push(this.typeList[i].label);
}
console.log(this.typenameList)
});
// uni.request({
// url: `${baseUrl}/api/h5/reservation/type`,
// success: (res) => {
// this.typeList = res.data.data
// // this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
// for (var i = 0; i < this.typeList.length; i++) {
// this.typenameList.push(this.typeList[i].dictLabel);
// }
// console.log(this.typenameList)
// },
// fail: (error) => {
// console.log(error)
// }
// })
},
// 查询医生列表
technicianList() {
console.log("有没有进来technicianList");
this.techid = null,
this.serviceTime=[]
this.hsstr=""
uni.request({
// url: 'https://sfyjk.com/api/h5/technician/list',
url: 'https://sfyjk.com/api/h5/technician/list',
data: {
this.serviceTime = []
this.hsstr = ""
request({
url: `${baseUrl}${apiPath}/h5/technician/list`,
method: 'GET',
params:{
type: this.type,
// addDate:this.addDate,
brandId:this.brandId
brandId: this.brandId
},
success: (res) => {
console.log(res)
this.techList = res.data.rows
console.log(this.techList)
if (this.techList.length > 0) {
this.techid=this.techList[0].id
var item={id:this.techid}
this.onradio(item);
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res)
this.techList = res.data.list
console.log(this.techList)
if (this.techList.length > 0) {
this.techid = this.techList[0].id
var item = {
id: this.techid
}
console.log(this.techList)
},
fail: (error) => {
console.log(error)
this.onradio(item);
}
})
console.log(this.techList)
});
// uni.request({
// // url: 'https://sfyjk.com/api/h5/technician/list',
// url: `${baseUrl}/app-api/h5/technician/list`,
// data: {
// type: this.type,
// // addDate:this.addDate,
// brandId: this.brandId
// },
// success: (res) => {
// console.log(res)
// this.techList = res.data.rows
// console.log(this.techList)
// if (this.techList.length > 0) {
// this.techid = this.techList[0].id
// var item = {
// id: this.techid
// }
// this.onradio(item);
// }
// console.log(this.techList)
// },
// fail: (error) => {
// console.log(error)
// }
// })
},
onradio(item) {
this.techid = item.id
this.serviceTime=[]
this.hsstr=""
uni.request({
// url: 'https://sfyjk.com/api/h5/technician/' + this.techid, // 接口地址
url: 'https://sfyjk.com/api/h5/technician/h5xq', // 接口地址
data: {
addDate:this.addDate,
id:this.techid
this.serviceTime = []
this.hsstr = ""
request({
url: `${baseUrl}${apiPath}/h5/technician/h5xq`,
method: 'GET',
params:{
addDate: this.addDate,
id: this.techid
},
success: (res) => {
console.log(res);
var serviceTime=JSON.parse(res.data.data.serviceTime)
console.log(serviceTime)
if (serviceTime){
for (let i = 0; i <serviceTime.length; i++) {
console.log(serviceTime[i].endTime)
console.log(serviceTime[i].startTime)
console.log(serviceTime[i].ym)
if (serviceTime[i].endTime&&serviceTime[i].startTime){
this.sjd={},
this.sjd.str=serviceTime[i].startTime.toString()+"-"+serviceTime[i].endTime.toString()
this.sjd.ym=serviceTime[i].ym
this.serviceTime.push(this.sjd)
}
}
}
console.log(this.serviceTime)
custom: {
showLoading: false,
},
fail: (error) => {
console.log(error)
}).then((res) => {
console.log(res);
var serviceTime = JSON.parse(res.data.serviceTime)
console.log(serviceTime,"serviceTimeserviceTimeserviceTime")
if (serviceTime) {
for (let i = 0; i < serviceTime.length; i++) {
console.log(serviceTime[i].end)
console.log(serviceTime[i].start)
console.log(serviceTime[i].ym)
if (serviceTime[i].end && serviceTime[i].start) {
this.sjd = {},
this.sjd.str = serviceTime[i].start.toString() + "-" + serviceTime[
i].end.toString()
this.sjd.ym = serviceTime[i].ym
this.serviceTime.push(this.sjd)
}
}
}
})
console.log(this.serviceTime,"this.serviceTime")
});
// uni.request({
// // url: 'https://sfyjk.com/api/h5/technician/' + this.techid, // 接口地址
// url: `${baseUrl}/app-api/h5/technician/h5xq`, // 接口地址
// data: {
// addDate: this.addDate,
// id: this.techid
// },
// success: (res) => {
// console.log(res);
// var serviceTime = JSON.parse(res.data.data.serviceTime)
// console.log(serviceTime)
// if (serviceTime) {
// for (let i = 0; i < serviceTime.length; i++) {
// console.log(serviceTime[i].endTime)
// console.log(serviceTime[i].startTime)
// console.log(serviceTime[i].ym)
// if (serviceTime[i].endTime && serviceTime[i].startTime) {
// this.sjd = {},
// this.sjd.str = serviceTime[i].startTime.toString() + "-" + serviceTime[
// i].endTime.toString()
// this.sjd.ym = serviceTime[i].ym
// this.serviceTime.push(this.sjd)
// }
// }
// }
// console.log(this.serviceTime)
// },
// fail: (error) => {
// console.log(error)
// }
// })
},
selectDay(index) {
@ -323,64 +432,95 @@
return date.toLocaleDateString("en-US", options);
},
handleSubmit() {
this.memberId=computed(() => sheep.$store('user').userInfo).value.id
if (!this.memberId){
if (sheep.$platform.name === 'WechatMiniProgram') {
showAuthModal('wechatMiniLogin')
return;
}
showAuthModal('accountLogin')
}else{
this.memberId=computed(() => sheep.$store('user').userInfo).value.id
if(!this.brandId){
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
if (!this.memberId) {
if (sheep.$platform.name === 'WechatMiniProgram') {
showAuthModal('wechatMiniLogin')
return;
}
showAuthModal('accountLogin')
} else {
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
if (!this.brandId) {
sheep.$helper.toast('请选择医馆')
}else if(!this.techid){
} else if (!this.techid) {
sheep.$helper.toast('请选择技师')
}else if(!this.addDate){
} else if (!this.addDate) {
sheep.$helper.toast('请选择预约时间')
}else if(!this.hsstr){
} else if (!this.hsstr) {
sheep.$helper.toast('请选择预约时间段')
}else if(this.memberId){
uni.request({
method: "post",
url: 'https://sfyjk.com/api/h5/reservation',
data: {
type: this.type,
brandId: this.brandId,
technicianId: this.techid,
reAddTime: this.addDate,
hsstr: this.hsstr,
userId:this.memberId,
},
success: (res) => {
uni.showModal({
title: '预约提示',
content: '预约成功！',
success: function(res) {
if (res.confirm) {
uni.switchTab({
url: '/pages/index/user'
});
} else {
uni.switchTab({
url: '/pages/index/user'
});
}
}
});
},
fail: (error) => {
console.log(error)
} else if (this.memberId) {
request({
url: `${baseUrl}/app-api/h5/reservation`,
method: 'post',
params: {
type: this.type,
brandId: this.brandId,
technicianId: this.techid,
reAddTime: this.addDate,
hsstr: this.hsstr,
userId: this.memberId,
},
custom: {
showLoading: false,
},
}).then((res) => {
uni.showModal({
title: '预约提示',
content: '预约成功！',
success: function(res) {
if (res.confirm) {
uni.switchTab({
url: '/pages/index/user'
});
} else {
uni.switchTab({
url: '/pages/index/user'
});
}
}
})
});
});
// uni.request({
// method: "post",
// url: `${baseUrl}/app-api/h5/reservation`,
// data: {
// type: this.type,
// brandId: this.brandId,
// technicianId: this.techid,
// reAddTime: this.addDate,
// hsstr: this.hsstr,
// userId: this.memberId,
// },
// success: (res) => {
// uni.showModal({
// title: '预约提示',
// content: '预约成功！',
// success: function(res) {
// if (res.confirm) {
// uni.switchTab({
// url: '/pages/index/user'
// });
// } else {
// uni.switchTab({
// url: '/pages/index/user'
// });
// }
// }
// });
// },
// fail: (error) => {
// console.log(error)
// }
// })
}
}
console.log("立即预约");
console.log("立即预约");
},
@ -406,25 +546,27 @@
},
selectDate(index) {
this.addDate = this.dateList[index].addDate
if(this.techid){
var item={id:this.techid}
if (this.techid) {
var item = {
id: this.techid
}
this.onradio(item);
}
// 处理选中日期的逻辑，例如触发事件、更新状态等
console.log('Selected date:', this.addDate);
},
selecthsstr(index) {
console.log(this.serviceTime[index].str)
console.log(this.serviceTime[index].ym)
if(this.serviceTime[index].ym==="true"){
}else if(this.serviceTime[index].ym==="false"){
this.hsstr = this.serviceTime[index].str
}
selecthsstr(index) {
console.log(this.serviceTime[index].str)
console.log(this.serviceTime[index].ym)
if (this.serviceTime[index].ym === "true") {
this.hsstr = this.serviceTime[index].str
} else if (this.serviceTime[index].ym === "false") {
this.hsstr = this.serviceTime[index].str
}
// 处理选中日期的逻辑，例如触发事件、更新状态等
console.log('Selected hs:', this.hsstr);
console.log('this.serviceTimesss:', this.serviceTime[index].ym);
},
},
};
@ -462,6 +604,7 @@
font-weight: bold;
margin-bottom: 10px;
}
.dropdown-icon {
width: 12px;
height: 12px;
@ -513,6 +656,7 @@
margin-right: 15px;
cursor: pointer;
}
.date-itemym {
/* display: flex; */
align-items: center;
@ -524,6 +668,7 @@
margin-right: 15px;
cursor: pointer;
}
.date-item.active {
background-color: #ff5541;
color: #fff;
@ -550,7 +695,8 @@
border-radius: 10px;
margin-bottom: 10px;
}
.doctor-cards {
.doctor-cards {
/* display: flex; */
align-items: center;
padding: 10px;
@ -560,23 +706,27 @@
border-radius: 10px;
margin-bottom: 10px;
}
.doctor-avatar {
width: 100px;
height: 70px;
border-radius: 50%;
margin-right: 10px;
}
.doctor-avatars{
display: flex;
/* height: 70px; */
/* border-radius: 50%; */
/* margin-right: 10px; */
}
.doctor-avatars {
display: flex;
/* height: 70px; */
/* border-radius: 50%; */
/* margin-right: 10px; */
}
.doctor-info {
display: flex;
flex-grow: 1;
}
.brandr-info {
/* display: flex; */
flex-grow: 1;
@ -596,16 +746,19 @@
color: #ff5541;
}
.doctor-names {
.doctor-names {
font-size: 14px;
/* color: #ff5541; */
margin-bottom: 5px;
}
.ygcontent{
font-size: 16px;
font-weight: 700;
}
.ygcontent {
font-size: 16px;
font-weight: 700;
}
.doctor-specialtys {
/* text-indent: 20px; */
white-space: pre-wrap;
@ -613,6 +766,7 @@
/* color: #ff5541; */
}
.doctor-checkbox {
margin-left: auto;
}

209
pages/user/user_vip/index.vue
View File

@ -1,5 +1,5 @@
<template>
<s-layout title="会员中心" tabbar=" ">
<s-layout title="会员中心">
<view class="memberVip">
<!-- 基本信息 -->
@ -26,23 +26,7 @@
</view>
</view>
<!-- 会员卡信息 -->
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration">
<swiper-item>
<view class="swiper-item uni-bg-red">
<image class="new-img"
src="https://zysc.fjptzykj.com:3000/shangcheng/94eaaae47569b35cd1f06f2507b0b56f7b597b82b359ee9fb90fd9db630e64cc.png">
</image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">
<image class="new-img"
src="https://zysc.fjptzykj.com:3000/shangcheng/6cb1566a669a2d0a0d043df9d69341fbb9e386fd08fea0bb5288e3baf8543553.png">
</image>
</view>
</swiper-item>
</swiper>
<zmxy-slideshow :items="levelList" :autoplay="false"></zmxy-slideshow>
<!-- TODO -->
<view class="experience">
<view class="title">当前经验值</view>
@ -137,7 +121,7 @@
<view class="info line1">每日签到可获得经验值</view>
</view>
</view>
<navigator url='/pages/users/user_sgin/index' class="button" hover-class="none">去获取
<navigator url='/pages/app/sign' class="button" hover-class="none">去获取
</navigator>
</view>
<view class="item acea-row row-between-wrapper">
@ -151,8 +135,8 @@
<view class="info line1">购买商品可获得对应是经验值</view>
</view>
</view>
<navigator url="/pages/goods_cate/goods_cate" class="button" hover-class="none"
open-type='switchTab'>去获取</navigator>
<navigator url="/pages/index/category" class="button" hover-class="none"
>去获取</navigator>
</view>
</view>
</view>
@ -192,103 +176,94 @@
</s-layout>
</template>
<script>
// import home from './home/index.vue';
// import {
// mapGetters
// } from "vuex";
// import * as LevelApi from '@/sheep/api/member/level';
// // import dayjs from './dayjs/dayjs.min.js';
// export default {
// components: {
// home,
// },
// computed: mapGetters(['userInfo']),
// data() {
// return {
// levelInfo: '',
// levelList: [], // 会员等级列表
// current: 0, // 当前等级的经验
// widthLen: 0,
<script setup>
import {
ref,
reactive,
onMounted
} from 'vue';
import home from './home/index.vue';
import {
mapGetters
} from "vuex";
import getExper from '@/sheep/api/member/level';
// import dayjs from './dayjs/dayjs.min.js';
// loading: false,
// loadend: false,
// loadTitle: '加载更多', // 提示语
// page: 1,
// limit: 20,
// expList: []
// };
// },
// onLoad() {
// this.getInfo();
// this.getlevelList();
// },
// methods: {
// /**
// * 获得会员等级列表
// */
// getInfo: function() {
// LevelApi.getLevelList().then(res => {
// let levelList = res.data;
// this.levelList = levelList;
// const store = useStore();
// const userInfo = computed(() => store.state.userInfo);
// // 获得当前等级对应的经验
// let list = []
// levelList.map((item, index) => {
// if (item.experience <= this.userInfo.experience) {
// list.push(item.experience)
// }
// })
// const maxn = Math.max.apply(null, list);
// this.current = maxn;
const levelList = ref([]); // 会员等级列表
const current = ref(0); // 当前等级的经验
const widthLen = ref(0);
const loading = ref(false);
const loadend = ref(false);
const loadTitle = ref('加载更多'); // 提示语
const page = ref(1);
const limit = ref(20);
const expList = ref([]);
// const items = ref([{
// url: 'https://zysc.fjptzykj.com:3000/shangcheng/94eaaae47569b35cd1f06f2507b0b56f7b597b82b359ee9fb90fd9db630e64cc.png',
// // 解决len取的值没有时；
// const levelListLen = levelList[list.length] ? levelList[list.length] : levelList[list
// .length - 1];
// // 解决除数不能为0
// const divisor = levelListLen.experience - maxn ? levelListLen.experience - maxn : 1;
// // 每小格所占的百分比
// const per = (this.userInfo.experience - maxn) / divisor / levelList.length;
// this.widthLen = ((list.length - 0.5) / (levelList.length)) * 100 + per * 100
// }).catch(res => {
// return this.$util.Tips({
// title: res
// });
// })
// },
// /**
// * 获得经验记录
// */
// getlevelList: function() {
// if (this.loadend || this.loading) {
// return false;
// }
// LevelApi.getExperienceRecordPage({
// pageNo: this.page,
// pageSize: this.limit
// }).then(res => {
// const list = res.data.list;
// const loadend = list.length < this.limit;
// let expList = this.$util.SplitArray(list, this.expList);
// this.$set(this, 'expList', expList);
// this.loadend = loadend;
// this.loadTitle = loadend ? '我也是有底线的' : '加载更多';
// this.page = this.page + 1;
// this.loading = false;
// }).catch(err => {
// this.loading = false;
// this.loadTitle = '加载更多';
// });
// },
// }, {
// url: 'https://zysc.fjptzykj.com:3000/shangcheng/6cb1566a669a2d0a0d043df9d69341fbb9e386fd08fea0bb5288e3baf8543553.png',
// formatDate: function(date) {
// // return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
// }
// },
// onReachBottom: function() {
// this.getlevelList();
// }
// }
// }]);
const items = ref([]);
const getInfo = async () => {
try {
const res = await getExper.getLevelList();
levelList.value = res.data;
// levelList.value = res.data.map(member => member.backgroundUrl);
// 获得当前等级对应的经验
let list = [];
levelList.value.forEach((item) => {
if (item.experience <= userInfo.value.experience) {
list.push(item.experience);
}
});
const maxn = Math.max(...list);
current.value = maxn;
// 解决len取的值没有时；
const levelListLen = list.length > 0 ? levelList.value[list.length - 1] : levelList.value[0];
// 解决除数不能为0
const divisor = levelListLen.experience - maxn || 1;
// 每小格所占的百分比
const per = (userInfo.value.experience - maxn) / divisor / levelList.value.length;
widthLen.value = ((list.length - 0.5) / levelList.value.length) * 100 + per * 100;
} catch (res) {
// 处理错误
}
};
const getlevelList = async () => {
if (loadend.value || loading.value) {
return false;
}
loading.value = true;
try {
const res = await LevelApi.getExperienceRecordPage({
pageNo: page.value,
pageSize: limit.value
});
const list = res.data.list;
const loadendNew = list.length < limit.value;
expList.value = [...expList.value, ...list];
loadend.value = loadendNew;
loadTitle.value = loadendNew ? '我也是有底线的' : '加载更多';
page.value++;
loading.value = false;
} catch (err) {
loading.value = false;
loadTitle.value = '加载更多';
}
};
onMounted(() => {
getInfo();
getlevelList();
});
</script>
<style lang="scss">
.swiper {
@ -297,9 +272,9 @@
.new-img {
width: 90%;
height:150px;
display:block;
margin:0 auto;
height: 150px;
display: block;
margin: 0 auto;
}
}

4
sheep/api/member/level.js
View File

@ -4,14 +4,14 @@ const getExper = {
// 获得会员等级列表
getLevelList: () => {
return request({
url: '/app-api/member/level/list',
url: '/member/level/list',
method: 'GET',
});
},
// 获得会员经验记录分页
getExperienceRecordPage: () => {
return request({
url: '/app-api/member/experience-record/page',
url: '/member/experience-record/page',
method: 'GET',
});
},

106
sheep/api/product/spu.js
View File

@ -1,41 +1,75 @@
import request from '@/sheep/request';
const SpuApi = {
// 获得商品 SPU 列表
getSpuListByIds: (ids) => {
return request({
url: '/product/spu/list-by-ids',
method: 'GET',
params: { ids },
custom: {
showLoading: false,
showError: false,
},
});
},
// 获得商品 SPU 分页
getSpuPage: (params) => {
return request({
url: '/product/spu/page',
method: 'GET',
params,
custom: {
showLoading: false,
showError: false,
},
});
},
// 查询商品
getSpuDetail: (id) => {
return request({
url: '/product/spu/get-detail',
method: 'GET',
params: { id },
custom: {
showLoading: false,
showError: false,
},
});
},
// 获得商品促销列表
getSpusales: (ids) => {
return request({
url:'/product/spu/get-recommend-page',
method: 'GET',
params: {
pageNo:1,
pageSize:10,
recommendBenefit:1
},
custom: {
showLoading: false,
showError: false,
},
});
},
// 获得商品 SPU 列表
getSpuListByIds: (ids) => {
return request({
url: '/product/spu/list-by-ids',
method: 'GET',
params: {
ids
},
custom: {
showLoading: false,
showError: false,
},
});
},
// 获得商品 SPU 分页
getSpuPage: (params) => {
return request({
url: '/product/spu/page',
method: 'GET',
params,
custom: {
showLoading: false,
showError: false,
},
});
},
// 查询商品
getSpuDetail: (id) => {
return request({
url: '/product/spu/get-detail',
method: 'GET',
params: {
id
},
custom: {
showLoading: false,
showError: false,
},
});
},
//获取拼团列表接口
getSpulist: (id) => {
return request({
url: '/promotion/combination-activity/list',
method: 'GET',
params: {
count:3
},
custom: {
showLoading: false,
showError: false,
},
});
},
};
export default SpuApi;

15
sheep/components/s-coupon-block/s-coupon-block.vue
View File

@ -2,10 +2,11 @@
<template>
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
<view class="coupon-box ss-flex">
<!-- couponList -->
<view
class="coupon-item"
class="coupon-item new-class"
:style="[couponBg, { marginLeft: `${data.space}px` }]"
v-for="(item, index) in couponList"
v-for="(item, index) in 3"
:key="index"
>
<su-coupon
@ -126,6 +127,10 @@
</script>
<style lang="scss" scoped>
.new-class{
margin: 0 10px !important;
margin-right: 2px !important;
}
.card-btn {
width: 140rpx;
height: 50rpx;
@ -145,8 +150,8 @@
}
}
.coupon-item {
&:nth-of-type(1) {
margin-left: 0 !important;
}
// &:nth-of-type(1) {
// margin-left: 0 !important;
// }
}
</style>

272
sheep/components/s-groupon-block/s-groupon-block.vue
View File

@ -1,154 +1,164 @@
<!-- 装修组件 - 拼团 -->
<template>
<view>
<view
v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
<view
v-for="product in productList"
:key="product.id"
class="goods-card-box"
:style="[
<view>
<!-- <view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]">
<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[
{
padding: data.space + 'rpx',
},
]"
>
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="product"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
]">
<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" @click="
sheep.$router.go('/pages/goods/groupon', {
id: props.data.activityId,
})
"
></s-goods-column>
</view>
</view>
<!-- 样式2 一行一个 图片左 文案右 -->
<view class="goods-box" v-if="layoutType === 'oneCol'">
<view
class="goods-list"
v-for="(product, index) in productList"
:key="index"
:style="[{ marginBottom: space + 'px' }]"
>
<s-goods-column
class="goods-card"
size="lg"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="product"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
"></s-goods-column>
</view>
</view> -->
<!-- 样式2 一行一个 图片左 文案右 -->
<!-- <view class="goods-box" v-if="layoutType === 'oneCol'">
<view class="goods-list" v-for="(product, index) in productList" :key="index"
:style="[{ marginBottom: space + 'px' }]">
<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :tagStyle="tagStyle"
:data="product" :titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction?.color" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" @click="
sheep.$router.go('/pages/goods/groupon', {
id: props.data.activityId,
})
"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
">
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view> -->
<view v-if="'threeCol' === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]">
<!-- productList -->
<view v-for="product in 3" :key="product.id" class="goods-card-box" :style="[
{
padding: data.space + 'rpx',
},
]">
<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" @click="
sheep.$router.go('/pages/goods/groupon', {
id: props.data.activityId,
})
"></s-goods-column>
</view>
</view>
</view>
</template>
<script setup>
/**
* 拼团
*/
import { computed, onMounted, ref } from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import CombinationApi from '@/sheep/api/promotion/combination';
/**
* 拼团
*/
import {
computed,
onMounted,
ref
} from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import CombinationApi from '@/sheep/api/promotion/combination';
// 接收参数
const props = defineProps({
data: {
type: Object,
default() {},
},
styles: {
type: Object,
default() {},
},
});
// 接收参数
const props = defineProps({
data: {
type: Object,
default () {},
},
styles: {
type: Object,
default () {},
},
});
let { layoutType, tagStyle, btnBuy, space } = props.data;
let { marginLeft, marginRight } = props.styles;
let {
layoutType,
tagStyle,
btnBuy,
space
} = props.data;
let {
marginLeft,
marginRight
} = props.styles;
// 购买按钮样式
const buyStyle = computed(() => {
let btnBuy = props.data.btnBuy;
if (btnBuy?.type === 'text') {
return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
// 购买按钮样式
const buyStyle = computed(() => {
let btnBuy = props.data.btnBuy;
if (btnBuy?.type === 'text') {
return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
if (btnBuy?.type === 'img') {
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
if (btnBuy?.type === 'img') {
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
const productList = ref([]);
onMounted(async () => {
// todo：@owen 与Yudao结构不一致，待重构
const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
productList.value = [spu];
});
const productList = ref([]);
onMounted(async () => {
// todo：@owen 与Yudao结构不一致，待重构
const {
data: activity
} = await CombinationApi.getCombinationActivity(props.data.activityId);
const ss= await SpuApi.getSpulist();
console.log(ss,"getSpuListByIds")
productList.value = spu;
});
</script>
<style lang="scss" scoped>
.goods-list {
position: relative;
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
}
}
.goods-list {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-sm-box {
margin: 0 auto;
box-sizing: border-box;
.goods-card-box {
flex-shrink: 0;
overflow: hidden;
width: 33.3%;
box-sizing: border-box;
}
}
.goods-list {
position: relative;
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
}
}
.goods-list {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-sm-box {
margin: 0 auto;
box-sizing: border-box;
.goods-card-box {
flex-shrink: 0;
overflow: hidden;
width: 33.3%;
box-sizing: border-box;
}
}
</style>

41
sheep/ui/su-coupon/su-coupon.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="ui-coupon-wrap">
<!-- xs: 一行三个，竖向 -->
<view
<!-- <view
v-if="props.size === 'xs'"
class="xs-coupon-card ss-flex ss-flex-col ss-row-between"
:style="[cardStyle]"
@ -23,10 +23,10 @@
<button class="ss-reset-button card-btn">{{ state.stateMap[props.state] }}</button>
</slot>
</view>
</view>
</view> -->
<!-- md: 一行两个，横向 -->
<view
<!-- <view
v-if="props.size === 'md'"
class="md-coupon-card ss-flex ss-row-between"
:style="[cardStyle]"
@ -53,10 +53,10 @@
</button>
</slot>
</view>
</view>
</view> -->
<!-- lg: 一行一个，横向 -->
<view
<!-- <view
v-if="props.size === 'lg'"
class="lg-coupon-card ss-flex ss-row-between"
:style="[cardStyle]"
@ -84,7 +84,35 @@
</slot>
<view class="surplus-text ss-m-t-24" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
</view>
</view>
</view> -->
<view
v-if="'md' === 'md'"
class=" md-coupon-card ss-flex ss-row-between"
:style="[cardStyle]"
@tap="
sheep.$router.go('/pages/coupon/detail', {
id: couponId,
})
"
>
<view class="card-left ss-flex ss-flex-col ss-row-between ss-col-top ss-m-l-40">
<view class="face-value-box ss-flex ss-col-bottom ss-m-t-28">
<view class="value-text ss-m-r-4">{{ type === 'reduce' ? value : Number(value) }}</view>
<view class="value-unit">{{ type === 'reduce' ? '元' : '折' }}</view>
</view>
<view class="ss-m-b-28">
<view class="title-text ss-m-b-10">{{ props.title }}</view>
<view class="surplus-text" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
</view>
</view>
<view class="card-right ss-flex ss-row-center">
<slot name="btn">
<button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center">
<view class="btn-text">{{ state.stateMap[props.state] }}</view>
</button>
</slot>
</view>
</view>
</view>
</template>
@ -175,6 +203,7 @@
</script>
<style lang="scss" scoped>
// xs
.xs-coupon-card {
width: 227rpx;

14
uni_modules/zmxy-slideshow/changelog.md Normal file
View File

@ -0,0 +1,14 @@
## 1.0.3（2023-11-25）
修改：点击事件的返回参数
this.$emit('clickItem',item,index,this.items)
## 1.0.2（2023-11-18）
修复：高度设置失效
## 1.0.1（2023-11-18）
修复：在 vue2 中 class 调用方法不支持传参问题
## 1.0.0（2023-10-18）
# 创建项目：个性化幻灯片
1. 支持放大动画；
2. 幻灯片点击事件；
3. 幻灯片动态定义；
4. 幻灯片数据多态，对象数组或字符串数组。

147
uni_modules/zmxy-slideshow/components/zmxy-slideshow/zmxy-slideshow.vue Normal file
View File

@ -0,0 +1,147 @@
<template>
<swiper class="zmxy-slideshow swiper" circular :autoplay="autoplay" :vertical="vertical" :previous-margin="margin"
:next-margin="margin" :current="current" :interval="interval" :easing-function="easingFunction"
:style="'height:' + height" @change="swiperChange">
<swiper-item v-for="(item,index) in items" :key="index">
<view :class="'swiper-item '+(index == current ?'active':'')" @click="clickItem(item)">
<view class="yi sd">VIP{{item.level}}</view>
<view class="er sd">{{item.name}}</view>
<view class="san sd">再获得 {{item.experience}} 成长值升级为该等级</view>
<image class="swiper-item-image" :src="item.backgroundUrl||item" mode="aspectFill"></image>
<view v-if="item.title" class="swiper-item-title">
{{ item.title }}
</view>
</view>
</swiper-item>
</swiper>
</template>
<script>
export default {
name: 'zmxy-slideshow', // 个性化幻灯片
data() {
return {
current: 0,
}
},
props: {
items: {
type: [Array, Object],
default: () => {
return [];
}
},
interval: {
type: [Number, String],
default: 5000
},
autoplay: {
type: Boolean,
default: true
},
vertical: {
type: Boolean,
default: false
},
margin: {
type: String,
default: '60rpx'
},
height: {
type: String,
default: '300rpx'
},
easingFunction: {
type: String,
default: 'easeInOutCubic'
},
},
mounted(){
console.log(this.items,"items")
// this.items = this.items.map(member => member.backgroundUrl)
},
methods: {
swiperChange(e) {
this.current = e.detail.current
},
clickItem(item) {
this.$emit('clickItem', item)
},
}
}
</script>
<style lang="scss">
.sd{
color:white;
position: absolute;
z-index: 22;
}
.yi{
top: 25px;
font-size: 26px;
left: 12px;
font-weight: 600;
}
.er{
top: 60px;
font-size: 13px;
left: 12px;
/* font-weight: 600;*/
}
.san{
bottom: 10px;
font-size: 13px;
left: 12px;
/* font-weight: 600;*/
}
.zmxy-slideshow {
width: 100%;
.swiper-item {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 5px;
position: relative;
display: flex;
align-items: center;
transform: scale(0.9, 0.80);
transition: all .6s;
.swiper-item-image {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.swiper-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: rgba(255, 255, 255, 0);
background: rgba(0, 0, 0, 0);
padding: 10rpx;
transition: color .6s, background .6s;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.active {
transform: scale(1, 1);
.swiper-item-image {}
.swiper-item-title {
color: rgba(255, 255, 255, 1);
background: rgba(0, 0, 0, 0.5);
}
}
}
}
</style>

85
uni_modules/zmxy-slideshow/package.json Normal file
View File

@ -0,0 +1,85 @@
{
"id": "zmxy-slideshow",
"displayName": "zmxy-slideshow-个性化幻灯片",
"version": "1.0.3",
"description": "zmxy-slideshow-个性化幻灯片，常用于轮播图，广告播放",
"keywords": [
"幻灯片",
"轮播图",
"广告横幅",
"渐变",
"放大"
],
"repository": "",
"engines": {
"HBuilderX": "^3.8.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "n",
"QQ": "y",
"钉钉": "y",
"快手": "y",
"飞书": "n",
"京东": "n"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

65
uni_modules/zmxy-slideshow/readme.md Normal file
View File

@ -0,0 +1,65 @@
# zmxy-slideshow 幻灯片
> 该组件是对原生
> [swiper](https://uniapp.dcloud.net.cn/component/swiper.html)
> 进行封装，继承了原组件部分属性及功能。
## 属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|:-------------------:|:-----------:|:--------:|:----------------------------------------------------------------------------------------------------:|:------------------------------------------------:|
| autoplay | Boolean | true | 是否自动切换 | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| margin | String | 60rpx | 前后边距，接受 px 和 rpx 值 | app-nvue、抖音小程序、飞书小程序不支持 |
| easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序、京东小程序 |
| height | String | 300rpx | 组件整体高度，接受 px 和 rpx 值 | |
| items | Array | [] | 图片地址、标题、链接等数据组成的对象数组（[{url,title,link,...},{url,title,link,...},...]），也支持字符串数组（[url1,url2,url3,...]） | |
| @clickItem | EventHandle | | 点击幻灯片触发 clickItem 事件，item = {url,title,link,...} 或者 item = url |
### easing-function 属性
| 值 | 说明 |
|:---------------:|:-------:|
| default | 默认缓动函数 |
| linear | 线性动画 |
| easeInCubic | 缓入动画 |
| easeOutCubic | 缓出动画 |
| easeInOutCubic | 缓入缓出动画 |
### 案例代码
```vue
# 基础使用
<zmxy-slideshow :items="items"></zmxy-slideshow>
# 字符串数组，线性动画
<zmxy-slideshow :items="items2" easing-function="linear"></zmxy-slideshow>
```
```javascript
export default {
data() {
return {
items: [{
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
title: '内容标题',
}, {
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
title: '内容标题',
}, {
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
title: '内容标题',
}, ],
items2: [
'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
],
};
},
methods: {
clickItem(item) {
console.log(item);
}
}
}
```