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

Branch_ccc #4

Merged
root merged 7 commits from Branch_ccc into master 2024-10-09 13:58:41 +08:00
Conversation 0 Commits 7 Files Changed 63 +1836 -986
16 changed files with 1836 additions and 986 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 613122558a - Show all commits

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);
}
}
}
```