轮播图替换
This commit is contained in:
weiwei committed
1 parent
b1f41521d9
commit
4d85e7f6cc
5 files changed
+97
-83
No files matched your search
@@ -6,8 +6,6 @@ import { isEmpty } from "radash"
|
||||
import { router } from "@@/index"
|
||||
import { boxesApi } from "@@/api"
|
||||
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
import { filePath } from "@/sheep/utils/file"
|
||||
|
||||
const state = reactive<any>({
|
||||
@@ -38,12 +36,20 @@ const doSubmit = () => {
|
||||
|
||||
<template>
|
||||
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.imagesArray" :key="i">
|
||||
<image class="w-100vw" :src="filePath(v)" mode="widthFix" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<view class="p-x-15rpx">
|
||||
<swiper
|
||||
class="w-100vw h-30vh"
|
||||
circular
|
||||
:indicator-dots="true"
|
||||
indicator-active-color="#0779FD"
|
||||
indicator-color="#ffffff"
|
||||
:autoplay="true"
|
||||
>
|
||||
<swiper-item v-for="(v, i) in state.detail?.imagesArray" :key="i">
|
||||
<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="p-15rpx">
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row items-center">
|
||||
|
||||
@@ -8,9 +8,6 @@ import { merchantApi, foodApi, payApi } from "@@/api"
|
||||
|
||||
import { filePath } from "@@/utils/file"
|
||||
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
|
||||
import ProductRow from "./components/product-row.vue"
|
||||
import ProductCar from "./components/product-car.vue"
|
||||
import ProductTotal from "./components/product-total.vue"
|
||||
@@ -218,13 +215,19 @@ const doFood = () => {
|
||||
<template>
|
||||
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<tm-sticky>
|
||||
<!-- start 轮播 start -->
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.swiperPic?.split(',')" :key="i">
|
||||
<image class="w-100vw h-400rpx" :src="filePath(v)" mode="aspectFill" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<!-- end 轮播 end -->
|
||||
<swiper
|
||||
class="w-100vw h-30vh"
|
||||
circular
|
||||
:indicator-dots="true"
|
||||
indicator-active-color="#0779FD"
|
||||
indicator-color="#ffffff"
|
||||
:autoplay="true"
|
||||
>
|
||||
<swiper-item v-for="(v, i) in state.detail?.swiperPic?.split(',')" :key="i">
|
||||
<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<tm-sticky-header>
|
||||
<view class="m-x-30rpx">
|
||||
<!-- start 简介 start -->
|
||||
|
||||
@@ -2,11 +2,8 @@
|
||||
import { reactive } from "vue"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { isEmpty } from "radash"
|
||||
import { hooks } from "@@/index"
|
||||
import { productApi } from "@@/api"
|
||||
import { filePath } from "@@/utils/file"
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
|
||||
const state = reactive<any>({
|
||||
detailId: null,
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
<template>
|
||||
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<tm-sticky>
|
||||
<!-- start 轮播 start -->
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.swiperPic?.split(',')" :key="i">
|
||||
<image class="w-100vw h-400rpx" :src="filePath(v)" mode="aspectFill" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<!-- end 轮播 end -->
|
||||
<swiper
|
||||
class="w-100vw h-30vh"
|
||||
circular
|
||||
:indicator-dots="true"
|
||||
indicator-active-color="#0779FD"
|
||||
indicator-color="#ffffff"
|
||||
:autoplay="true"
|
||||
>
|
||||
<swiper-item v-for="(v, i) in state.detail?.swiperPic?.split(',')" :key="i">
|
||||
<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<tm-sticky-header>
|
||||
<view class="m-x-30rpx">
|
||||
@@ -164,8 +169,6 @@ import { isEmpty } from "radash"
|
||||
import { router } from "@@/index"
|
||||
import { foodApi, merchantApi, payApi, shopApi } from "@@/api"
|
||||
import { filePath } from "@@/utils/file"
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
import ProductRow from "./components/product-row.vue"
|
||||
import ProductCar from "./components/product-car.vue"
|
||||
import ProductTotal from "./components/product-total.vue"
|
||||
|
||||
@@ -1,71 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { isEmpty } from "radash";
|
||||
import { shopApi } from "@@/api";
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue";
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue";
|
||||
import { filePath } from "@/sheep/utils/file";
|
||||
import { reactive } from "vue"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { isEmpty } from "radash"
|
||||
import { shopApi } from "@@/api"
|
||||
import { filePath } from "@/sheep/utils/file"
|
||||
|
||||
const state = reactive<any>({
|
||||
detailId: null,
|
||||
detail: null,
|
||||
});
|
||||
detailId: null,
|
||||
detail: null,
|
||||
})
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (!isEmpty(options.id)) {
|
||||
state.detailId = options.id;
|
||||
}
|
||||
});
|
||||
if (!isEmpty(options.id)) {
|
||||
state.detailId = options.id
|
||||
}
|
||||
})
|
||||
onShow(() => {
|
||||
getDetail();
|
||||
});
|
||||
getDetail()
|
||||
})
|
||||
|
||||
const getDetail = async () => {
|
||||
const { data } = await shopApi.getSupermarketSpuDetail({ id: state.detailId });
|
||||
state.detail = data;
|
||||
};
|
||||
const { data } = await shopApi.getSupermarketSpuDetail({ id: state.detailId })
|
||||
state.detail = data
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<crud-layout title="订单详情" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<!-- <z-swiper> -->
|
||||
<!-- <z-swiper-item v-for="(v, i) in state.detail.sliderPicUrls" :key="i"> -->
|
||||
<image class="w-100vw" :src="filePath(state.detail.picUrl)" mode="widthFix" />
|
||||
<!-- </z-swiper-item> -->
|
||||
<!-- </z-swiper> -->
|
||||
<crud-layout title="订单详情" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<swiper
|
||||
class="w-100vw h-30vh"
|
||||
circular
|
||||
:indicator-dots="true"
|
||||
indicator-active-color="#0779FD"
|
||||
indicator-color="#ffffff"
|
||||
:autoplay="true"
|
||||
>
|
||||
<swiper-item v-for="(v, i) in state.detail?.sliderPicUrls?.split(',')" :key="i">
|
||||
<image class="w-full h-full" :src="filePath(state.detail.picUrl)" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="p-x-15rpx">
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<!-- <view class="flex-row items-center"> -->
|
||||
<!-- <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view> -->
|
||||
<!-- <view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view> -->
|
||||
<!-- </view> -->
|
||||
<view class="second-text-26">已售{{ state.detail.salesCount }}</view>
|
||||
</view>
|
||||
<view class="flex-col m-t-15rpx">
|
||||
<view class="sub-text-32">{{ state.detail.productName }}</view>
|
||||
<view class="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="prefix_title">评价</view>
|
||||
</view>
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="prefix_title">详情</view>
|
||||
<view class="m-t-15rpx" v-html="state.detail.description"></view>
|
||||
</view>
|
||||
</view>
|
||||
</crud-layout>
|
||||
<view class="p-x-15rpx">
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<!-- <view class="flex-row items-center"> -->
|
||||
<!-- <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view> -->
|
||||
<!-- <view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view> -->
|
||||
<!-- </view> -->
|
||||
<view class="second-text-26">已售{{ state.detail.salesCount }}</view>
|
||||
</view>
|
||||
<view class="flex-col m-t-15rpx">
|
||||
<view class="sub-text-32">{{ state.detail.productName }}</view>
|
||||
<view class="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="prefix_title">评价</view>
|
||||
</view>
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="prefix_title">详情</view>
|
||||
<view class="m-t-15rpx" v-html="state.detail.description"></view>
|
||||
</view>
|
||||
</view>
|
||||
</crud-layout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.layout_main > scroll-view {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.layout_main > scroll-view {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user