Branch_ccc #4
11
pages.json
11
pages.json
@ -177,6 +177,17 @@
|
|||||||
"group": "商品"
|
"group": "商品"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "sales",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "促销商品"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"sync": true,
|
||||||
|
"title": "促销商品",
|
||||||
|
"group": "商品"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "list",
|
"path": "list",
|
||||||
"style": {
|
"style": {
|
||||||
|
@ -1,37 +1,23 @@
|
|||||||
<!-- 拼团订单的详情 -->
|
<!-- 拼团订单的详情 -->
|
||||||
<template>
|
<template>
|
||||||
<s-layout
|
<s-layout title="拼团详情" class="detail-wrap" :navbar="state.data && !state.loading ? 'inner' : 'normal'">
|
||||||
title="拼团详情"
|
<!-- :onShareAppMessage="shareInfo" -->
|
||||||
class="detail-wrap"
|
|
||||||
:navbar="state.data && !state.loading ? 'inner' : 'normal'"
|
|
||||||
:onShareAppMessage="shareInfo"
|
|
||||||
>
|
|
||||||
<view v-if="state.loading"></view>
|
<view v-if="state.loading"></view>
|
||||||
<view v-if="state.data && !state.loading">
|
<view v-if="state.data && !state.loading">
|
||||||
<!-- 团长信息 + 活动信息 -->
|
<!-- 团长信息 + 活动信息 -->
|
||||||
<view
|
<view class="recharge-box" v-if="state.data.headRecord" :style="[
|
||||||
class="recharge-box"
|
|
||||||
v-if="state.data.headRecord"
|
|
||||||
:style="[
|
|
||||||
{
|
{
|
||||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||||
},
|
},
|
||||||
]"
|
]">
|
||||||
>
|
<s-goods-item class="goods-box" :img="state.data.headRecord.picUrl"
|
||||||
<s-goods-item
|
:title="state.data.headRecord.spuName" :price="state.data.headRecord.combinationPrice"
|
||||||
class="goods-box"
|
priceColor="#E1212B" @tap="
|
||||||
:img="state.data.headRecord.picUrl"
|
|
||||||
:title="state.data.headRecord.spuName"
|
|
||||||
:price="state.data.headRecord.combinationPrice"
|
|
||||||
priceColor="#E1212B"
|
|
||||||
@tap="
|
|
||||||
sheep.$router.go('/pages/goods/groupon', {
|
sheep.$router.go('/pages/goods/groupon', {
|
||||||
id: state.data.headRecord.activityId,
|
id: state.data.headRecord.activityId,
|
||||||
})
|
})
|
||||||
"
|
" :style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]">
|
||||||
:style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
|
|
||||||
>
|
|
||||||
<template #groupon>
|
<template #groupon>
|
||||||
<view class="ss-flex">
|
<view class="ss-flex">
|
||||||
<view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
|
<view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
|
||||||
@ -40,7 +26,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</s-goods-item>
|
</s-goods-item>
|
||||||
</view>
|
</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 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.headRecord.status === 1">
|
||||||
@ -76,9 +63,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="countdown-title ss-flex" v-else>
|
<view class="countdown-title ss-flex" v-else>
|
||||||
还差
|
还差
|
||||||
<view class="num"
|
<view class="num">{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view>
|
||||||
>{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view
|
|
||||||
>
|
|
||||||
拼团成功
|
拼团成功
|
||||||
<view class="ss-flex countdown-time">
|
<view class="ss-flex countdown-time">
|
||||||
<view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
|
<view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
|
||||||
@ -102,43 +87,25 @@
|
|||||||
<view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
|
<view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 团员 -->
|
<!-- 团员 -->
|
||||||
<view
|
<view class="header-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.data.memberRecords"
|
||||||
class="header-avatar ss-m-r-24 ss-m-b-20"
|
:key="item.id">
|
||||||
v-for="item in state.data.memberRecords"
|
|
||||||
:key="item.id"
|
|
||||||
>
|
|
||||||
<image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
|
<image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
|
||||||
<view
|
<view class="header-tag ss-flex ss-col-center ss-row-center" v-if="item.is_leader == '1'">
|
||||||
class="header-tag ss-flex ss-col-center ss-row-center"
|
|
||||||
v-if="item.is_leader == '1'"
|
|
||||||
>
|
|
||||||
团长
|
团长
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 还有几个坑位 -->
|
<!-- 还有几个坑位 -->
|
||||||
<view
|
<view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.remainNumber" :key="item">
|
||||||
class="default-avatar ss-m-r-24 ss-m-b-20"
|
<image :src="sheep.$url.static('/static/img/shop/avatar/unknown.png')" class="avatar-img">
|
||||||
v-for="item in state.remainNumber"
|
</image>
|
||||||
:key="item"
|
|
||||||
>
|
|
||||||
<image
|
|
||||||
:src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
|
|
||||||
class="avatar-img"
|
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 情况一:拼团成功;情况二:拼团失败 -->
|
<!-- 情况一:拼团成功;情况二:拼团失败 -->
|
||||||
<view
|
<view v-if="state.data.headRecord.status === 1 || state.data.headRecord.status === 2"
|
||||||
v-if="state.data.headRecord.status === 1 || state.data.headRecord.status === 2"
|
class="ss-m-t-40 ss-flex ss-row-center">
|
||||||
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
|
|
||||||
class="ss-reset-button order-btn"
|
|
||||||
v-if="state.data.orderId"
|
|
||||||
@tap="onDetail(state.data.orderId)"
|
|
||||||
>
|
|
||||||
查看订单
|
查看订单
|
||||||
</button>
|
</button>
|
||||||
<button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
|
<button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
|
||||||
@ -147,19 +114,11 @@
|
|||||||
<!-- 情况三:拼团进行中,查看订单或参加或邀请好友或参加 -->
|
<!-- 情况三:拼团进行中,查看订单或参加或邀请好友或参加 -->
|
||||||
<view v-if="state.data.headRecord.status === 0" class="ss-m-t-40 ss-flex ss-row-center">
|
<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()">
|
<view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
|
||||||
<button
|
<button class="ss-reset-button join-btn" v-if="state.data.orderId"
|
||||||
class="ss-reset-button join-btn"
|
@tap="onDetail(state.data.orderId)">
|
||||||
v-if="state.data.orderId"
|
|
||||||
@tap="onDetail(state.data.orderId)"
|
|
||||||
>
|
|
||||||
查看订单
|
查看订单
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="ss-reset-button disabled-btn" v-else disabled @tap="onDetail(state.data.orderId)">
|
||||||
class="ss-reset-button disabled-btn"
|
|
||||||
v-else
|
|
||||||
disabled
|
|
||||||
@tap="onDetail(state.data.orderId)"
|
|
||||||
>
|
|
||||||
去参团
|
去参团
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@ -170,11 +129,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
<button
|
<button class="ss-reset-button join-btn" :disabled="endTime.ms <= 0" @tap="onJoinGroupon()">
|
||||||
class="ss-reset-button join-btn"
|
|
||||||
:disabled="endTime.ms <= 0"
|
|
||||||
@tap="onJoinGroupon()"
|
|
||||||
>
|
|
||||||
立即参团
|
立即参团
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@ -182,17 +137,9 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- TODO 芋艿:这里暂时没接入 -->
|
<!-- TODO 芋艿:这里暂时没接入 -->
|
||||||
<view v-if="state.data.goods">
|
<s-select-groupon-sku :show="state.showSelectSku" :goodsInfo="state.goodsInfo"
|
||||||
<s-select-groupon-sku
|
:grouponAction="state.grouponAction" :grouponNum="state.grouponNum" @buy="onBuy" @change="onSkuChange"
|
||||||
:show="state.showSelectSku"
|
@close="state.showSelectSku = false" />
|
||||||
:goodsInfo="state.data.goods"
|
|
||||||
:grouponAction="state.grouponAction"
|
|
||||||
:grouponNum="state.grouponNum"
|
|
||||||
@buy="onBuy"
|
|
||||||
@change="onSkuChange"
|
|
||||||
@close="state.showSelectSku = false"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<s-empty v-if="!state.data && !state.loading" icon="/static/goods-empty.png" />
|
<s-empty v-if="!state.data && !state.loading" icon="/static/goods-empty.png" />
|
||||||
@ -200,18 +147,32 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, reactive } from 'vue';
|
import {
|
||||||
|
computed,
|
||||||
|
reactive
|
||||||
|
} from 'vue';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
import {
|
||||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
onLoad
|
||||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
} from '@dcloudio/uni-app';
|
||||||
import { isEmpty } from 'lodash';
|
import {
|
||||||
|
useDurationTime
|
||||||
|
} from '@/sheep/hooks/useGoods';
|
||||||
|
import {
|
||||||
|
showShareModal
|
||||||
|
} from '@/sheep/hooks/useModal';
|
||||||
|
import {
|
||||||
|
isEmpty
|
||||||
|
} from 'lodash';
|
||||||
import CombinationApi from '@/sheep/api/promotion/combination';
|
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 headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
data: {}, // 拼团详情
|
data: {
|
||||||
|
goods: true
|
||||||
|
}, // 拼团详情
|
||||||
loading: true,
|
loading: true,
|
||||||
grouponAction: 'create',
|
grouponAction: 'create',
|
||||||
showSelectSku: false,
|
showSelectSku: false,
|
||||||
@ -219,13 +180,16 @@
|
|||||||
number: 0,
|
number: 0,
|
||||||
activity: {},
|
activity: {},
|
||||||
combinationHeadId: null, // 拼团团长编号
|
combinationHeadId: null, // 拼团团长编号
|
||||||
|
goodsInfo: {}, // 商品信息
|
||||||
|
goodsId: '',
|
||||||
|
skeletonLoading: false,
|
||||||
|
goodsSwiper: [], // 商品轮播图
|
||||||
});
|
});
|
||||||
|
|
||||||
// todo 芋艿:分享要再接下
|
// todo 芋艿:分享要再接下
|
||||||
const shareInfo = computed(() => {
|
const shareInfo = computed(() => {
|
||||||
if (isEmpty(state.data)) return {};
|
if (isEmpty(state.data)) return {};
|
||||||
return sheep.$platform.share.getShareInfo(
|
return sheep.$platform.share.getShareInfo({
|
||||||
{
|
|
||||||
title: state.data.headRecord.spuName,
|
title: state.data.headRecord.spuName,
|
||||||
image: sheep.$url.cdn(state.data.headRecord.picUrl),
|
image: sheep.$url.cdn(state.data.headRecord.picUrl),
|
||||||
desc: state.data.goods?.subtitle,
|
desc: state.data.goods?.subtitle,
|
||||||
@ -233,15 +197,13 @@
|
|||||||
page: '5',
|
page: '5',
|
||||||
query: state.data.id,
|
query: state.data.id,
|
||||||
},
|
},
|
||||||
},
|
}, {
|
||||||
{
|
|
||||||
type: 'groupon', // 邀请拼团海报
|
type: 'groupon', // 邀请拼团海报
|
||||||
title: state.data.headRecord.spuName, // 商品标题
|
title: state.data.headRecord.spuName, // 商品标题
|
||||||
image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
|
image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
|
||||||
price: state.data.goods?.price, // 商品价格
|
price: state.data.goods?.price, // 商品价格
|
||||||
original_price: state.data.goods?.original_price, // 商品原价
|
original_price: state.data.goods?.original_price, // 商品原价
|
||||||
},
|
}, );
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 订单详情
|
// 订单详情
|
||||||
@ -266,9 +228,9 @@
|
|||||||
// 立即参团 TODO 芋艿:这里没接入
|
// 立即参团 TODO 芋艿:这里没接入
|
||||||
function onJoinGroupon() {
|
function onJoinGroupon() {
|
||||||
state.grouponAction = 'join';
|
state.grouponAction = 'join';
|
||||||
state.grouponId = state.data.activityId;
|
state.grouponId = state.activityId;
|
||||||
state.combinationHeadId = state.data.id;
|
state.combinationHeadId = state.id;
|
||||||
state.grouponNum = state.data.num;
|
state.grouponNum = state.userSize;
|
||||||
state.showSelectSku = true;
|
state.showSelectSku = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -277,32 +239,62 @@
|
|||||||
sheep.$router.go('/pages/order/confirm', {
|
sheep.$router.go('/pages/order/confirm', {
|
||||||
data: JSON.stringify({
|
data: JSON.stringify({
|
||||||
order_type: 'goods',
|
order_type: 'goods',
|
||||||
combinationActivityId: state.data.activity.id,
|
combinationActivityId: state.grouponId,
|
||||||
combinationHeadId: state.combinationHeadId,
|
combinationHeadId: state.combinationHeadId,
|
||||||
items: [
|
items: [{
|
||||||
{
|
|
||||||
skuId: sku.id,
|
skuId: sku.id,
|
||||||
count: sku.count,
|
count: sku.count,
|
||||||
},
|
}, ],
|
||||||
],
|
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 加载商品信息
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const endTime = computed(() => {
|
const endTime = computed(() => {
|
||||||
return useDurationTime(state.data.headRecord.expireTime);
|
return useDurationTime(state.data.headRecord.expireTime);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 获取拼团团队详情
|
// 获取拼团团队详情
|
||||||
async function getGrouponDetail(id) {
|
async function getGrouponDetail(id) {
|
||||||
const { code, data } = await CombinationApi.getCombinationRecordDetail(id);
|
const {
|
||||||
|
code,
|
||||||
|
data
|
||||||
|
} = await CombinationApi.getCombinationRecordDetail(id);
|
||||||
if (code === 0) {
|
if (code === 0) {
|
||||||
state.data = data;
|
state.data = data;
|
||||||
const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
|
const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
|
||||||
state.remainNumber = remainNumber > 0 ? remainNumber : 0;
|
state.remainNumber = remainNumber > 0 ? remainNumber : 0;
|
||||||
|
|
||||||
// 获取活动信息
|
// 获取活动信息
|
||||||
const { data: activity } = await CombinationApi.getCombinationActivity(
|
const {
|
||||||
|
data: activity
|
||||||
|
} = await CombinationApi.getCombinationActivity(
|
||||||
data.headRecord.activityId,
|
data.headRecord.activityId,
|
||||||
);
|
);
|
||||||
state.activity = activity;
|
state.activity = activity;
|
||||||
@ -318,10 +310,28 @@
|
|||||||
|
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
getGrouponDetail(options.id);
|
getGrouponDetail(options.id);
|
||||||
|
|
||||||
|
// 非法参数
|
||||||
|
if (!options.id) {
|
||||||
|
state.goodsInfo = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.grouponId = options.id;
|
||||||
|
|
||||||
|
loadActiv();
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.image {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 154px;
|
||||||
|
}
|
||||||
|
|
||||||
.recharge-box {
|
.recharge-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 120rpx;
|
margin-bottom: 120rpx;
|
||||||
@ -359,6 +369,7 @@
|
|||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #383a46;
|
color: #383a46;
|
||||||
|
|
||||||
.countdown-h {
|
.countdown-h {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-family: OPPOSANS;
|
font-family: OPPOSANS;
|
||||||
@ -370,6 +381,7 @@
|
|||||||
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
|
||||||
border-radius: 6rpx;
|
border-radius: 6rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countdown-num {
|
.countdown-num {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-family: OPPOSANS;
|
font-family: OPPOSANS;
|
||||||
@ -435,11 +447,13 @@
|
|||||||
top: -36rpx;
|
top: -36rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.default-avatar {
|
.default-avatar {
|
||||||
width: 86rpx;
|
width: 86rpx;
|
||||||
height: 86rpx;
|
height: 86rpx;
|
||||||
background: #ececec;
|
background: #ececec;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
||||||
.avatar-img {
|
.avatar-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -454,6 +468,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-btn {
|
.order-btn {
|
||||||
width: 668rpx;
|
width: 668rpx;
|
||||||
height: 70rpx;
|
height: 70rpx;
|
||||||
|
@ -119,7 +119,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 458rpx;
|
height: 458rpx;
|
||||||
margin-top: -88rpx;
|
margin-top: -88rpx;
|
||||||
background: v-bind(headerBg) no-repeat;
|
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.list-content {
|
.list-content {
|
||||||
|
@ -86,6 +86,11 @@
|
|||||||
<!-- 参团列表 -->
|
<!-- 参团列表 -->
|
||||||
<groupon-card-list v-model="state.activity" @join="onJoinGroupon" />
|
<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
|
<s-select-groupon-sku
|
||||||
:show="state.showSelectSku"
|
:show="state.showSelectSku"
|
||||||
@ -279,6 +284,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.image{
|
||||||
|
height: 142px;
|
||||||
|
}
|
||||||
.detail-card {
|
.detail-card {
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
margin: 14rpx 20rpx;
|
margin: 14rpx 20rpx;
|
||||||
@ -529,4 +537,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
body{
|
||||||
|
background:#f6f6f6 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
295
pages/goods/sales.vue
Normal file
295
pages/goods/sales.vue
Normal 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>
|
@ -5,13 +5,14 @@
|
|||||||
|
|
||||||
<view class="doctor-list">
|
<view class="doctor-list">
|
||||||
<view class="doctor-cards">
|
<view class="doctor-cards">
|
||||||
<image class="doctor-avatars" :src="'https://sfyjk.com/api'+brandList[selectedClinicIndex].picUrl" mode="aspectFill"></image><br/><br/>
|
<image class="doctor-avatars" :src="brandList.list[selectedClinicIndex].picUrl"
|
||||||
|
mode="aspectFill"></image><br /><br />
|
||||||
<view class="brandr-info">
|
<view class="brandr-info">
|
||||||
<text class="doctor-names">
|
<text class="doctor-names">
|
||||||
<text class="ygcontent">医馆地址:</text>
|
<text class="ygcontent">医馆地址:</text>
|
||||||
{{ brandList[selectedClinicIndex].address }}</text><br/><br/>
|
{{ brandList.list[selectedClinicIndex].address }}</text><br /><br />
|
||||||
<!-- <div v-html='brandList[selectedClinicIndex].depict'></div> -->
|
<!-- <div v-html='brandList.list[selectedClinicIndex].depict'></div> -->
|
||||||
<rich-text class="doctor-specialtys" :nodes="brandList[selectedClinicIndex].depict"></rich-text>
|
<rich-text class="doctor-specialtys" :nodes="brandList.list[selectedClinicIndex].depict"></rich-text>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -21,7 +22,7 @@
|
|||||||
<text class="clinic-select-label">医馆选择</text>
|
<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">
|
<view class="clinic-select-value">
|
||||||
<text>{{ brandList[selectedClinicIndex].name}}</text>
|
<text>{{ brandList.list[selectedClinicIndex].name}}</text>
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
@ -29,7 +30,7 @@
|
|||||||
<text class="clinic-select-label">预约类型</text>
|
<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">
|
<view class="clinic-select-value">
|
||||||
<text>{{ typeList[selecttypeIndex].dictLabel}}</text>
|
<text>{{ typeList[selecttypeIndex].label}}</text>
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
@ -76,13 +77,15 @@
|
|||||||
<!-- {{techList}} -->
|
<!-- {{techList}} -->
|
||||||
<view class="doctor-card" v-for="(item, index) in techList" :key="index">
|
<view class="doctor-card" v-for="(item, index) in techList" :key="index">
|
||||||
<view class="doctor-info">
|
<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">{{ item.technicianName }}</text>
|
||||||
<text class="doctor-name" style="float: right;margin-right: 20px;">{{item.typeName}}</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> -->
|
<!-- <text class="doctor-specialty" v-if="item.content">介绍: {{item.content.substr(0, 20)}}...</text> -->
|
||||||
</view>
|
</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">
|
<div v-if="techid == item.id">
|
||||||
<view class="info-title">服务范围</view>
|
<view class="info-title">服务范围</view>
|
||||||
<rich-text style="white-space: pre-wrap;" :nodes="item.serviceScope"></rich-text>
|
<rich-text style="white-space: pre-wrap;" :nodes="item.serviceScope"></rich-text>
|
||||||
@ -127,10 +130,19 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { baseUrl, apiPath } from '@/sheep/config';
|
import request from '@/sheep/request';
|
||||||
import { computed } from 'vue';
|
import {
|
||||||
|
baseUrl,
|
||||||
|
apiPath
|
||||||
|
} from '@/sheep/config';
|
||||||
|
import {
|
||||||
|
computed
|
||||||
|
} from 'vue';
|
||||||
import sheep from '@/sheep';
|
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"
|
// import pickerTime from "@/pages/commission/pickerTime.vue"
|
||||||
// 用户信息
|
// 用户信息
|
||||||
export default {
|
export default {
|
||||||
@ -154,9 +166,14 @@
|
|||||||
hsstr: "",
|
hsstr: "",
|
||||||
|
|
||||||
dateList: [],
|
dateList: [],
|
||||||
typeList:[
|
typeList: [{
|
||||||
{dictValue:0,dictLabel:"调理预约"},
|
dictValue: 0,
|
||||||
{dictValue:1,dictLabel:"教培预约"}
|
dictLabel: "调理预约"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dictValue: 1,
|
||||||
|
dictLabel: "教培预约"
|
||||||
|
}
|
||||||
],
|
],
|
||||||
typenameList: [],
|
typenameList: [],
|
||||||
addDate: "",
|
addDate: "",
|
||||||
@ -178,7 +195,7 @@
|
|||||||
created() {
|
created() {
|
||||||
this.isLogin = computed(() => sheep.$store('user').isLogin);
|
this.isLogin = computed(() => sheep.$store('user').isLogin);
|
||||||
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
|
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
|
||||||
this.brandlist();
|
this.brandlists();
|
||||||
|
|
||||||
this.generateDateList();
|
this.generateDateList();
|
||||||
this.addDate = this.dateList[0].addDate;
|
this.addDate = this.dateList[0].addDate;
|
||||||
@ -190,8 +207,9 @@
|
|||||||
onClinicChange(event) {
|
onClinicChange(event) {
|
||||||
const selectedClinicIndex = event.detail.value;
|
const selectedClinicIndex = event.detail.value;
|
||||||
this.selectedClinicIndex = selectedClinicIndex;
|
this.selectedClinicIndex = selectedClinicIndex;
|
||||||
this.brandName = this.brandList[selectedClinicIndex].name
|
this.brandName = this.brandList.list[selectedClinicIndex].name
|
||||||
this.brandId = this.brandList[selectedClinicIndex].id
|
this.brandId = this.brandList.list[selectedClinicIndex].id
|
||||||
|
console.log("dddddddddddd")
|
||||||
this.technicianList();
|
this.technicianList();
|
||||||
},
|
},
|
||||||
ontype(event) {
|
ontype(event) {
|
||||||
@ -203,110 +221,201 @@
|
|||||||
this.technicianList();
|
this.technicianList();
|
||||||
},
|
},
|
||||||
// 查询医馆列表
|
// 查询医馆列表
|
||||||
brandlist() {
|
brandlists() {
|
||||||
uni.request({
|
request({
|
||||||
url: `${baseUrl}/api/h5/brand/list`,
|
url: `${baseUrl}${apiPath}/h5/brand/list`,
|
||||||
success: (res) => {
|
method: 'GET',
|
||||||
|
custom: {
|
||||||
|
showLoading: false,
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
this.brandList = res.data
|
this.brandList = res.data
|
||||||
for (var i = 0; i < this.brandList.length; i++) {
|
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.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.brandNameList.push(this.brandList.list[i].name)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.brandId = this.brandList[0].id
|
this.brandId = this.brandList[0].id
|
||||||
this.technicianList();
|
this.technicianList();
|
||||||
},
|
});
|
||||||
fail: (error) => {
|
// uni.request({
|
||||||
console.log(error)
|
// 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() {
|
gettypeList() {
|
||||||
uni.request({
|
request({
|
||||||
url: `${baseUrl}/api/h5/reservation/type`,
|
url: `${baseUrl}${apiPath}/h5/reservation/type`,
|
||||||
success: (res) => {
|
method: 'GET',
|
||||||
this.typeList = res.data.data
|
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" ')
|
// 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++) {
|
for (var i = 0; i < this.typeList.length; i++) {
|
||||||
this.typenameList.push(this.typeList[i].dictLabel);
|
this.typenameList.push(this.typeList[i].label);
|
||||||
}
|
}
|
||||||
console.log(this.typenameList)
|
console.log(this.typenameList)
|
||||||
},
|
});
|
||||||
fail: (error) => {
|
// uni.request({
|
||||||
console.log(error)
|
// 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() {
|
technicianList() {
|
||||||
|
console.log("有没有进来technicianList");
|
||||||
this.techid = null,
|
this.techid = null,
|
||||||
this.serviceTime = []
|
this.serviceTime = []
|
||||||
this.hsstr = ""
|
this.hsstr = ""
|
||||||
uni.request({
|
request({
|
||||||
// url: 'https://sfyjk.com/api/h5/technician/list',
|
url: `${baseUrl}${apiPath}/h5/technician/list`,
|
||||||
url: 'https://sfyjk.com/api/h5/technician/list',
|
method: 'GET',
|
||||||
data: {
|
params:{
|
||||||
type: this.type,
|
type: this.type,
|
||||||
// addDate:this.addDate,
|
// addDate:this.addDate,
|
||||||
brandId: this.brandId
|
brandId: this.brandId
|
||||||
},
|
},
|
||||||
success: (res) => {
|
custom: {
|
||||||
|
showLoading: false,
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
console.log(res)
|
console.log(res)
|
||||||
this.techList = res.data.rows
|
this.techList = res.data.list
|
||||||
console.log(this.techList)
|
console.log(this.techList)
|
||||||
if (this.techList.length > 0) {
|
if (this.techList.length > 0) {
|
||||||
this.techid = this.techList[0].id
|
this.techid = this.techList[0].id
|
||||||
var item={id:this.techid}
|
var item = {
|
||||||
|
id: this.techid
|
||||||
|
}
|
||||||
this.onradio(item);
|
this.onradio(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(this.techList)
|
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)
|
// },
|
||||||
}
|
// fail: (error) => {
|
||||||
})
|
// console.log(error)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
},
|
},
|
||||||
|
|
||||||
onradio(item) {
|
onradio(item) {
|
||||||
this.techid = item.id
|
this.techid = item.id
|
||||||
this.serviceTime = []
|
this.serviceTime = []
|
||||||
this.hsstr = ""
|
this.hsstr = ""
|
||||||
uni.request({
|
request({
|
||||||
// url: 'https://sfyjk.com/api/h5/technician/' + this.techid, // 接口地址
|
url: `${baseUrl}${apiPath}/h5/technician/h5xq`,
|
||||||
url: 'https://sfyjk.com/api/h5/technician/h5xq', // 接口地址
|
method: 'GET',
|
||||||
data: {
|
params:{
|
||||||
addDate: this.addDate,
|
addDate: this.addDate,
|
||||||
id: this.techid
|
id: this.techid
|
||||||
},
|
},
|
||||||
success: (res) => {
|
custom: {
|
||||||
|
showLoading: false,
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
var serviceTime=JSON.parse(res.data.data.serviceTime)
|
var serviceTime = JSON.parse(res.data.serviceTime)
|
||||||
console.log(serviceTime)
|
console.log(serviceTime,"serviceTimeserviceTimeserviceTime")
|
||||||
if (serviceTime) {
|
if (serviceTime) {
|
||||||
for (let i = 0; i < serviceTime.length; i++) {
|
for (let i = 0; i < serviceTime.length; i++) {
|
||||||
console.log(serviceTime[i].endTime)
|
console.log(serviceTime[i].end)
|
||||||
console.log(serviceTime[i].startTime)
|
console.log(serviceTime[i].start)
|
||||||
console.log(serviceTime[i].ym)
|
console.log(serviceTime[i].ym)
|
||||||
if (serviceTime[i].endTime&&serviceTime[i].startTime){
|
if (serviceTime[i].end && serviceTime[i].start) {
|
||||||
this.sjd = {},
|
this.sjd = {},
|
||||||
this.sjd.str=serviceTime[i].startTime.toString()+"-"+serviceTime[i].endTime.toString()
|
this.sjd.str = serviceTime[i].start.toString() + "-" + serviceTime[
|
||||||
|
i].end.toString()
|
||||||
this.sjd.ym = serviceTime[i].ym
|
this.sjd.ym = serviceTime[i].ym
|
||||||
this.serviceTime.push(this.sjd)
|
this.serviceTime.push(this.sjd)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(this.serviceTime)
|
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) => {
|
// fail: (error) => {
|
||||||
console.log(error)
|
// console.log(error)
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
|
|
||||||
},
|
},
|
||||||
selectDay(index) {
|
selectDay(index) {
|
||||||
@ -341,10 +450,10 @@
|
|||||||
} else if (!this.hsstr) {
|
} else if (!this.hsstr) {
|
||||||
sheep.$helper.toast('请选择预约时间段')
|
sheep.$helper.toast('请选择预约时间段')
|
||||||
} else if (this.memberId) {
|
} else if (this.memberId) {
|
||||||
uni.request({
|
request({
|
||||||
method: "post",
|
url: `${baseUrl}/app-api/h5/reservation`,
|
||||||
url: 'https://sfyjk.com/api/h5/reservation',
|
method: 'post',
|
||||||
data: {
|
params: {
|
||||||
type: this.type,
|
type: this.type,
|
||||||
brandId: this.brandId,
|
brandId: this.brandId,
|
||||||
technicianId: this.techid,
|
technicianId: this.techid,
|
||||||
@ -352,7 +461,10 @@
|
|||||||
hsstr: this.hsstr,
|
hsstr: this.hsstr,
|
||||||
userId: this.memberId,
|
userId: this.memberId,
|
||||||
},
|
},
|
||||||
success: (res) => {
|
custom: {
|
||||||
|
showLoading: false,
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '预约提示',
|
title: '预约提示',
|
||||||
content: '预约成功!',
|
content: '预约成功!',
|
||||||
@ -368,12 +480,40 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
// 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) => {
|
// fail: (error) => {
|
||||||
console.log(error)
|
// console.log(error)
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -407,7 +547,9 @@
|
|||||||
selectDate(index) {
|
selectDate(index) {
|
||||||
this.addDate = this.dateList[index].addDate
|
this.addDate = this.dateList[index].addDate
|
||||||
if (this.techid) {
|
if (this.techid) {
|
||||||
var item={id:this.techid}
|
var item = {
|
||||||
|
id: this.techid
|
||||||
|
}
|
||||||
this.onradio(item);
|
this.onradio(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -418,13 +560,13 @@
|
|||||||
console.log(this.serviceTime[index].str)
|
console.log(this.serviceTime[index].str)
|
||||||
console.log(this.serviceTime[index].ym)
|
console.log(this.serviceTime[index].ym)
|
||||||
if (this.serviceTime[index].ym === "true") {
|
if (this.serviceTime[index].ym === "true") {
|
||||||
|
this.hsstr = this.serviceTime[index].str
|
||||||
} else if (this.serviceTime[index].ym === "false") {
|
} else if (this.serviceTime[index].ym === "false") {
|
||||||
this.hsstr = this.serviceTime[index].str
|
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;
|
font-weight: bold;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-icon {
|
.dropdown-icon {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
@ -513,6 +656,7 @@
|
|||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-itemym {
|
.date-itemym {
|
||||||
/* display: flex; */
|
/* display: flex; */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -524,6 +668,7 @@
|
|||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-item.active {
|
.date-item.active {
|
||||||
background-color: #ff5541;
|
background-color: #ff5541;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -550,6 +695,7 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-cards {
|
.doctor-cards {
|
||||||
/* display: flex; */
|
/* display: flex; */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -560,23 +706,27 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-avatar {
|
.doctor-avatar {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-avatars {
|
.doctor-avatars {
|
||||||
display: flex;
|
display: flex;
|
||||||
/* height: 70px; */
|
/* height: 70px; */
|
||||||
/* border-radius: 50%; */
|
/* border-radius: 50%; */
|
||||||
/* margin-right: 10px; */
|
/* margin-right: 10px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-info {
|
.doctor-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brandr-info {
|
.brandr-info {
|
||||||
/* display: flex; */
|
/* display: flex; */
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
@ -596,16 +746,19 @@
|
|||||||
color: #ff5541;
|
color: #ff5541;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-names {
|
.doctor-names {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
/* color: #ff5541; */
|
/* color: #ff5541; */
|
||||||
|
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ygcontent {
|
.ygcontent {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-specialtys {
|
.doctor-specialtys {
|
||||||
/* text-indent: 20px; */
|
/* text-indent: 20px; */
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
@ -613,6 +766,7 @@
|
|||||||
/* color: #ff5541; */
|
/* color: #ff5541; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-checkbox {
|
.doctor-checkbox {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<s-layout title="会员中心" tabbar=" ">
|
<s-layout title="会员中心">
|
||||||
<view class="memberVip">
|
<view class="memberVip">
|
||||||
|
|
||||||
<!-- 基本信息 -->
|
<!-- 基本信息 -->
|
||||||
@ -26,23 +26,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 会员卡信息 -->
|
<!-- 会员卡信息 -->
|
||||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
|
<zmxy-slideshow :items="levelList" :autoplay="false"></zmxy-slideshow>
|
||||||
: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>
|
|
||||||
<!-- TODO -->
|
<!-- TODO -->
|
||||||
<view class="experience">
|
<view class="experience">
|
||||||
<view class="title">当前经验值</view>
|
<view class="title">当前经验值</view>
|
||||||
@ -137,7 +121,7 @@
|
|||||||
<view class="info line1">每日签到可获得经验值</view>
|
<view class="info line1">每日签到可获得经验值</view>
|
||||||
</view>
|
</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>
|
</navigator>
|
||||||
</view>
|
</view>
|
||||||
<view class="item acea-row row-between-wrapper">
|
<view class="item acea-row row-between-wrapper">
|
||||||
@ -151,8 +135,8 @@
|
|||||||
<view class="info line1">购买商品可获得对应是经验值</view>
|
<view class="info line1">购买商品可获得对应是经验值</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<navigator url="/pages/goods_cate/goods_cate" class="button" hover-class="none"
|
<navigator url="/pages/index/category" class="button" hover-class="none"
|
||||||
open-type='switchTab'>去获取</navigator>
|
>去获取</navigator>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -192,103 +176,94 @@
|
|||||||
</s-layout>
|
</s-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
// import home from './home/index.vue';
|
import {
|
||||||
// import {
|
ref,
|
||||||
// mapGetters
|
reactive,
|
||||||
// } from "vuex";
|
onMounted
|
||||||
// import * as LevelApi from '@/sheep/api/member/level';
|
} from 'vue';
|
||||||
// // import dayjs from './dayjs/dayjs.min.js';
|
import home from './home/index.vue';
|
||||||
// export default {
|
import {
|
||||||
// components: {
|
mapGetters
|
||||||
// home,
|
} from "vuex";
|
||||||
// },
|
import getExper from '@/sheep/api/member/level';
|
||||||
// computed: mapGetters(['userInfo']),
|
// import dayjs from './dayjs/dayjs.min.js';
|
||||||
// data() {
|
|
||||||
// return {
|
|
||||||
// levelInfo: '',
|
|
||||||
// levelList: [], // 会员等级列表
|
|
||||||
// current: 0, // 当前等级的经验
|
|
||||||
// widthLen: 0,
|
|
||||||
|
|
||||||
// loading: false,
|
// const store = useStore();
|
||||||
// loadend: false,
|
// const userInfo = computed(() => store.state.userInfo);
|
||||||
// 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 levelList = ref([]); // 会员等级列表
|
||||||
// let list = []
|
const current = ref(0); // 当前等级的经验
|
||||||
// levelList.map((item, index) => {
|
const widthLen = ref(0);
|
||||||
// if (item.experience <= this.userInfo.experience) {
|
const loading = ref(false);
|
||||||
// list.push(item.experience)
|
const loadend = ref(false);
|
||||||
// }
|
const loadTitle = ref('加载更多'); // 提示语
|
||||||
// })
|
const page = ref(1);
|
||||||
// const maxn = Math.max.apply(null, list);
|
const limit = ref(20);
|
||||||
// this.current = maxn;
|
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
|
// url: 'https://zysc.fjptzykj.com:3000/shangcheng/6cb1566a669a2d0a0d043df9d69341fbb9e386fd08fea0bb5288e3baf8543553.png',
|
||||||
// .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 = '加载更多';
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
// formatDate: function(date) {
|
// }]);
|
||||||
// // return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
|
const items = ref([]);
|
||||||
// }
|
|
||||||
// },
|
const getInfo = async () => {
|
||||||
// onReachBottom: function() {
|
try {
|
||||||
// this.getlevelList();
|
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>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.swiper {
|
.swiper {
|
||||||
|
@ -4,14 +4,14 @@ const getExper = {
|
|||||||
// 获得会员等级列表
|
// 获得会员等级列表
|
||||||
getLevelList: () => {
|
getLevelList: () => {
|
||||||
return request({
|
return request({
|
||||||
url: '/app-api/member/level/list',
|
url: '/member/level/list',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 获得会员经验记录分页
|
// 获得会员经验记录分页
|
||||||
getExperienceRecordPage: () => {
|
getExperienceRecordPage: () => {
|
||||||
return request({
|
return request({
|
||||||
url: '/app-api/member/experience-record/page',
|
url: '/member/experience-record/page',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -1,12 +1,30 @@
|
|||||||
import request from '@/sheep/request';
|
import request from '@/sheep/request';
|
||||||
|
|
||||||
const SpuApi = {
|
const SpuApi = {
|
||||||
|
// 获得商品促销列表
|
||||||
|
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 列表
|
// 获得商品 SPU 列表
|
||||||
getSpuListByIds: (ids) => {
|
getSpuListByIds: (ids) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/product/spu/list-by-ids',
|
url: '/product/spu/list-by-ids',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: { ids },
|
params: {
|
||||||
|
ids
|
||||||
|
},
|
||||||
custom: {
|
custom: {
|
||||||
showLoading: false,
|
showLoading: false,
|
||||||
showError: false,
|
showError: false,
|
||||||
@ -30,7 +48,23 @@ const SpuApi = {
|
|||||||
return request({
|
return request({
|
||||||
url: '/product/spu/get-detail',
|
url: '/product/spu/get-detail',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: { id },
|
params: {
|
||||||
|
id
|
||||||
|
},
|
||||||
|
custom: {
|
||||||
|
showLoading: false,
|
||||||
|
showError: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取拼团列表接口
|
||||||
|
getSpulist: (id) => {
|
||||||
|
return request({
|
||||||
|
url: '/promotion/combination-activity/list',
|
||||||
|
method: 'GET',
|
||||||
|
params: {
|
||||||
|
count:3
|
||||||
|
},
|
||||||
custom: {
|
custom: {
|
||||||
showLoading: false,
|
showLoading: false,
|
||||||
showError: false,
|
showError: false,
|
||||||
|
@ -2,10 +2,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||||
<view class="coupon-box ss-flex">
|
<view class="coupon-box ss-flex">
|
||||||
|
<!-- couponList -->
|
||||||
<view
|
<view
|
||||||
class="coupon-item"
|
class="coupon-item new-class"
|
||||||
:style="[couponBg, { marginLeft: `${data.space}px` }]"
|
:style="[couponBg, { marginLeft: `${data.space}px` }]"
|
||||||
v-for="(item, index) in couponList"
|
v-for="(item, index) in 3"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<su-coupon
|
<su-coupon
|
||||||
@ -126,6 +127,10 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.new-class{
|
||||||
|
margin: 0 10px !important;
|
||||||
|
margin-right: 2px !important;
|
||||||
|
}
|
||||||
.card-btn {
|
.card-btn {
|
||||||
width: 140rpx;
|
width: 140rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
@ -145,8 +150,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.coupon-item {
|
.coupon-item {
|
||||||
&:nth-of-type(1) {
|
// &:nth-of-type(1) {
|
||||||
margin-left: 0 !important;
|
// margin-left: 0 !important;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,62 +1,34 @@
|
|||||||
<!-- 装修组件 - 拼团 -->
|
<!-- 装修组件 - 拼团 -->
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view
|
<!-- <view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
|
||||||
v-if="layoutType === 'threeCol'"
|
:style="[{ margin: '-' + data.space + 'rpx' }]">
|
||||||
class="goods-sm-box ss-flex ss-flex-wrap"
|
<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[
|
||||||
:style="[{ margin: '-' + data.space + 'rpx' }]"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
v-for="product in productList"
|
|
||||||
:key="product.id"
|
|
||||||
class="goods-card-box"
|
|
||||||
:style="[
|
|
||||||
{
|
{
|
||||||
padding: data.space + 'rpx',
|
padding: data.space + 'rpx',
|
||||||
},
|
},
|
||||||
]"
|
]">
|
||||||
>
|
<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
|
||||||
<s-goods-column
|
:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
|
||||||
class="goods-card"
|
:bottomRadius="data.borderRadiusBottom" @click="
|
||||||
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', {
|
sheep.$router.go('/pages/goods/groupon', {
|
||||||
id: props.data.activityId,
|
id: props.data.activityId,
|
||||||
})
|
})
|
||||||
"
|
"></s-goods-column>
|
||||||
></s-goods-column>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
</view> -->
|
||||||
<!-- 样式2 一行一个 图片左 文案右 -->
|
<!-- 样式2 一行一个 图片左 文案右 -->
|
||||||
<view class="goods-box" v-if="layoutType === 'oneCol'">
|
<!-- <view class="goods-box" v-if="layoutType === 'oneCol'">
|
||||||
<view
|
<view class="goods-list" v-for="(product, index) in productList" :key="index"
|
||||||
class="goods-list"
|
:style="[{ marginBottom: space + 'px' }]">
|
||||||
v-for="(product, index) in productList"
|
<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :tagStyle="tagStyle"
|
||||||
:key="index"
|
:data="product" :titleColor="data.fields.name?.color"
|
||||||
:style="[{ marginBottom: space + 'px' }]"
|
:subTitleColor="data.fields.introduction?.color" :topRadius="data.borderRadiusTop"
|
||||||
>
|
:bottomRadius="data.borderRadiusBottom" @click="
|
||||||
<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', {
|
sheep.$router.go('/pages/goods/groupon', {
|
||||||
id: props.data.activityId,
|
id: props.data.activityId,
|
||||||
})
|
})
|
||||||
"
|
">
|
||||||
>
|
|
||||||
<template v-slot:cart>
|
<template v-slot:cart>
|
||||||
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||||
{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
|
{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
|
||||||
@ -64,15 +36,38 @@
|
|||||||
</template>
|
</template>
|
||||||
</s-goods-column>
|
</s-goods-column>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
/**
|
/**
|
||||||
* 拼团
|
* 拼团
|
||||||
*/
|
*/
|
||||||
import { computed, onMounted, ref } from 'vue';
|
import {
|
||||||
|
computed,
|
||||||
|
onMounted,
|
||||||
|
ref
|
||||||
|
} from 'vue';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import SpuApi from '@/sheep/api/product/spu';
|
import SpuApi from '@/sheep/api/product/spu';
|
||||||
import CombinationApi from '@/sheep/api/promotion/combination';
|
import CombinationApi from '@/sheep/api/promotion/combination';
|
||||||
@ -89,8 +84,16 @@
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
let { layoutType, tagStyle, btnBuy, space } = props.data;
|
let {
|
||||||
let { marginLeft, marginRight } = props.styles;
|
layoutType,
|
||||||
|
tagStyle,
|
||||||
|
btnBuy,
|
||||||
|
space
|
||||||
|
} = props.data;
|
||||||
|
let {
|
||||||
|
marginLeft,
|
||||||
|
marginRight
|
||||||
|
} = props.styles;
|
||||||
|
|
||||||
// 购买按钮样式
|
// 购买按钮样式
|
||||||
const buyStyle = computed(() => {
|
const buyStyle = computed(() => {
|
||||||
@ -114,15 +117,19 @@
|
|||||||
const productList = ref([]);
|
const productList = ref([]);
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
// todo:@owen 与Yudao结构不一致,待重构
|
// todo:@owen 与Yudao结构不一致,待重构
|
||||||
const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
|
const {
|
||||||
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
|
data: activity
|
||||||
productList.value = [spu];
|
} = await CombinationApi.getCombinationActivity(props.data.activityId);
|
||||||
|
const ss= await SpuApi.getSpulist();
|
||||||
|
console.log(ss,"getSpuListByIds")
|
||||||
|
productList.value = spu;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.goods-list {
|
.goods-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.cart-btn {
|
.cart-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10rpx;
|
bottom: 10rpx;
|
||||||
@ -136,14 +143,17 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-list {
|
.goods-list {
|
||||||
&:nth-last-of-type(1) {
|
&:nth-last-of-type(1) {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-sm-box {
|
.goods-sm-box {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.goods-card-box {
|
.goods-card-box {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="ui-coupon-wrap">
|
<view class="ui-coupon-wrap">
|
||||||
<!-- xs: 一行三个,竖向 -->
|
<!-- xs: 一行三个,竖向 -->
|
||||||
<view
|
<!-- <view
|
||||||
v-if="props.size === 'xs'"
|
v-if="props.size === 'xs'"
|
||||||
class="xs-coupon-card ss-flex ss-flex-col ss-row-between"
|
class="xs-coupon-card ss-flex ss-flex-col ss-row-between"
|
||||||
:style="[cardStyle]"
|
:style="[cardStyle]"
|
||||||
@ -23,10 +23,10 @@
|
|||||||
<button class="ss-reset-button card-btn">{{ state.stateMap[props.state] }}</button>
|
<button class="ss-reset-button card-btn">{{ state.stateMap[props.state] }}</button>
|
||||||
</slot>
|
</slot>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
|
|
||||||
<!-- md: 一行两个,横向 -->
|
<!-- md: 一行两个,横向 -->
|
||||||
<view
|
<!-- <view
|
||||||
v-if="props.size === 'md'"
|
v-if="props.size === 'md'"
|
||||||
class="md-coupon-card ss-flex ss-row-between"
|
class="md-coupon-card ss-flex ss-row-between"
|
||||||
:style="[cardStyle]"
|
:style="[cardStyle]"
|
||||||
@ -53,10 +53,10 @@
|
|||||||
</button>
|
</button>
|
||||||
</slot>
|
</slot>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
|
|
||||||
<!-- lg: 一行一个,横向 -->
|
<!-- lg: 一行一个,横向 -->
|
||||||
<view
|
<!-- <view
|
||||||
v-if="props.size === 'lg'"
|
v-if="props.size === 'lg'"
|
||||||
class="lg-coupon-card ss-flex ss-row-between"
|
class="lg-coupon-card ss-flex ss-row-between"
|
||||||
:style="[cardStyle]"
|
:style="[cardStyle]"
|
||||||
@ -84,6 +84,34 @@
|
|||||||
</slot>
|
</slot>
|
||||||
<view class="surplus-text ss-m-t-24" v-if="props.surplus">仅剩:{{ props.surplus }}张</view>
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -175,6 +203,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
// xs
|
// xs
|
||||||
.xs-coupon-card {
|
.xs-coupon-card {
|
||||||
width: 227rpx;
|
width: 227rpx;
|
||||||
|
14
uni_modules/zmxy-slideshow/changelog.md
Normal file
14
uni_modules/zmxy-slideshow/changelog.md
Normal 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. 幻灯片数据多态,对象数组或字符串数组。
|
@ -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
85
uni_modules/zmxy-slideshow/package.json
Normal 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
65
uni_modules/zmxy-slideshow/readme.md
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
Loading…
Reference in New Issue
Block a user