|
@@ -1,27 +1,526 @@
|
|
|
<template>
|
|
|
<mobile-frame>
|
|
|
- <view class="main">
|
|
|
- <view class="one">
|
|
|
-1
|
|
|
+ <scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
|
|
|
+ @scroll="handleScroll">
|
|
|
+ <view class="main" id="top">
|
|
|
+ <view class="onemain">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="one">
|
|
|
+ <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
|
|
|
+ indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
|
|
|
+ <swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
|
|
|
+ <image class="image" :src="item.url" mode=""></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">
|
|
|
+ <view class="money_1">
|
|
|
+ <text>¥</text>
|
|
|
+ <text>{{info.sell_money}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="money_2">
|
|
|
+ <text>¥</text>
|
|
|
+ <text>{{info.flow_money}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">{{info.name}}</view>
|
|
|
+ <view class="two_3">{{info.shot_brief}}</view>
|
|
|
+ <view class="two_4">
|
|
|
+ <text>运费{{info.freight}}元</text>
|
|
|
+ <text>{{info.send_time}}内发货</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="thr">
|
|
|
+ <view class="thr_1" @click="toChoose">
|
|
|
+ <view class="title">选择规格</view>
|
|
|
+ <text class="iconfont icon-dayufuhao"></text>
|
|
|
+ </view>
|
|
|
+ <view class="thr_1">
|
|
|
+ <view class="title">商品评价({{info.comment||0}})</view>
|
|
|
+ <text class="iconfont icon-dayufuhao"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="four">
|
|
|
+ <view class="four_1">
|
|
|
+ <image class="image" :src="shop.file"></image>
|
|
|
+ <view class="other">
|
|
|
+ <view class="name">{{shop.name}}</view>
|
|
|
+ <view class="other_1"><text>宝贝数</text>{{shop.num}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="four_2">
|
|
|
+ <view class="grade">商品:<text>{{shop.grade||'5.00'}}</text></view>|
|
|
|
+ <view class="grade">发货:<text>{{shop.grade||'5.00'}}</text></view>|
|
|
|
+ <view class="grade">服务:<text>{{shop.grade||'5.00'}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="four_2">
|
|
|
+ <view class="btn">进入店铺</view>
|
|
|
+ <view class="btn">关注</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="five">
|
|
|
+ <view class="five_1">{{info.brief}}</view>
|
|
|
+ <view class="five_2" v-for="(item,index) in bannerList" :key="index">
|
|
|
+ <image class="image" :src="item.url"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="foot">
|
|
|
+ <uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick"
|
|
|
+ @buttonClick="buttonClick" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="backTop" v-if="isShow==true">
|
|
|
+ <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
|
|
|
</view>
|
|
|
+ <uni-popup ref="popup" background-color="#fff" type="bottom">
|
|
|
+ <view class="content">
|
|
|
+ <view class="one">
|
|
|
+ <image class="image" :src="info.file"></image>
|
|
|
+ <view class="other">
|
|
|
+ <view class="money">
|
|
|
+ <text>¥</text>
|
|
|
+ <text>{{info.sell_money}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="other_1">
|
|
|
+ 已选: <text>{{Selected}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <text @click="toClose" class="iconfont icon-shanchu"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">口味</view>
|
|
|
+ <view class="two_2"><text>{{info.specs.flavor}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="thr">
|
|
|
+ <text>数量:</text>
|
|
|
+ <view class="count">
|
|
|
+ <lxc-count @handleCount="toCount" :value="info.specs.num" :delayed="100">
|
|
|
+ </lxc-count>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view @click="toBuy" class="button">立即购买</view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</mobile-frame>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import lxcCount from '@/components/lxc-count/lxc-count.vue'
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ lxcCount
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ options: [{
|
|
|
+ icon: 'shop',
|
|
|
+ text: '店铺',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'cart',
|
|
|
+ text: '购物车',
|
|
|
+ }, {
|
|
|
+ icon: 'chat',
|
|
|
+ text: '客服',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ buttonGroup: [{
|
|
|
+ text: '加入购物车',
|
|
|
+ backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '立即购买',
|
|
|
+ backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ bannerList: [ // 轮播图
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png')
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 详情
|
|
|
+ info: {
|
|
|
+ file: require('@/static/test.png'),
|
|
|
+ name: '大红门无淀粉果木熏火腿360g',
|
|
|
+ sell_money: 28.8,
|
|
|
+ flow_money: 35,
|
|
|
+ shot_brief: '果木熏制 传统技法',
|
|
|
+ freight: 8.00,
|
|
|
+ send_time: '24h',
|
|
|
+ specs: {
|
|
|
+ flavor: '果木熏火腿',
|
|
|
+ num: 0
|
|
|
+ },
|
|
|
+ brief: '简介',
|
|
|
+ },
|
|
|
+ shop: {
|
|
|
+ file: require('@/static/test.png'),
|
|
|
+ name: '官方自营店',
|
|
|
+ num: 2,
|
|
|
+ time: '2022-09-27'
|
|
|
+ },
|
|
|
+ // 已选
|
|
|
+ Selected: '',
|
|
|
+ // 是否显示返回顶部
|
|
|
+ isShow: false,
|
|
|
+ topItem: ''
|
|
|
};
|
|
|
},
|
|
|
onShow: function() {},
|
|
|
methods: {
|
|
|
-
|
|
|
+ onClick(e) {
|
|
|
+ uni.showToast({
|
|
|
+ title: `点击${e.content.text}`,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ buttonClick(e) {
|
|
|
+ console.log(e)
|
|
|
+ },
|
|
|
+ // 选择规格
|
|
|
+ toChoose() {
|
|
|
+ this.$refs.popup.open();
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ toClose() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ // 计数器
|
|
|
+ toCount(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ // 立即购买
|
|
|
+ toBuy() {},
|
|
|
+ // 计算高度
|
|
|
+ handleScroll(e) {
|
|
|
+ const that = this;
|
|
|
+ let scrollTop = e.detail.scrollTop;
|
|
|
+ that.isShow = scrollTop > 500;
|
|
|
+ that.topItem = '';
|
|
|
+ },
|
|
|
+ // 返回顶部
|
|
|
+ backTop() {
|
|
|
+ const that = this;
|
|
|
+ that.topItem = 'top'
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ .scrollView {
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ .onemain {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+ background-color: var(--f9Color);
|
|
|
+
|
|
|
+ .one {
|
|
|
+ swiper {
|
|
|
+ height: 80vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ padding: 0 0 2vw 0;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 0.5vw solid var(--f9Color);
|
|
|
+ padding: 2vw;
|
|
|
+
|
|
|
+ .money_1 {
|
|
|
+ color: var(--ff0Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin: 0 1vw 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: var(--font20Szie);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .money_2 {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: var(--f99Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin: 0 1vw 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ font-size: var(--font18Szie);
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 1vw 2vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_3 {
|
|
|
+ font-size: var(--font16Szie);
|
|
|
+ color: var(--f85Color);
|
|
|
+ padding: 1vw 2vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_4 {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--fcColor);
|
|
|
+ padding: 1vw 2vw;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin: 0 2vw 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .thr {
|
|
|
+ .thr_1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 2vw 0 2vw 0;
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .four {
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .four_1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 15vw;
|
|
|
+ height: 15vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin: 0 0 0 2vw;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: var(--font16Szie);
|
|
|
+ }
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: var(--fcColor);
|
|
|
+ margin: 0 2vw 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .four_2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ padding: 2vw 0;
|
|
|
+ color: var(--f99Color);
|
|
|
+
|
|
|
+ .grade {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: var(--ff0Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ border: 0.1vw solid var(--fcColor);
|
|
|
+ padding: 1vw 6vw;
|
|
|
+ border-radius: 1vw;
|
|
|
+ color: var(--f00Color);
|
|
|
+ }
|
|
|
|
|
|
+ .btn:last-child {
|
|
|
+ padding: 1vw 10vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .five {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+
|
|
|
+ .five_1 {
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+ font-size: var(--font18Szie);
|
|
|
+ color: var(--f99Color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .five_2 {
|
|
|
+ padding: 0 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scrollView {
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .backTop {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20vw;
|
|
|
+ right: 5vw;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 30px;
|
|
|
+ background-color: #0000005f;
|
|
|
+ border-radius: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 100vw;
|
|
|
+
|
|
|
+ .one {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 2vw;
|
|
|
+ padding: 2vw 0;
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 25vw;
|
|
|
+ height: 25vw;
|
|
|
+ margin: 0 2vw 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-grow: 1;
|
|
|
+ margin: 0 0 0 2vw;
|
|
|
+
|
|
|
+ .money {
|
|
|
+ color: var(--fFB1Color);
|
|
|
+ font-size: var(--font20Szie);
|
|
|
+ padding: 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0 2vw;
|
|
|
+ color: var(--ff0Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ margin: 0 2vw;
|
|
|
+ padding: 2vw 0;
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ padding: 1vw;
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 1vw;
|
|
|
+ border-radius: 1vw;
|
|
|
+ background-color: var(--f9Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .thr {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 2vw;
|
|
|
+ padding: 2vw 0;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin: 1vw 0 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .count {
|
|
|
+ margin: 0 2vw;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ padding: 4vw 0;
|
|
|
+ background-color: var(--fFB1Color);
|
|
|
+ bottom: 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: var(--font18Szie);
|
|
|
+ color: var(--mainColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|