|
|
@@ -0,0 +1,493 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationBarTitleText": "商品详情",
|
|
|
+ "navigationStyle": "custom",
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <van-sticky>
|
|
|
+ <swiper class="swiper" @change="swiperChange" :current="current">
|
|
|
+ <swiper-item v-for="(item, index) in banners" :key="index">
|
|
|
+ <img :src="item.image" alt="" />
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <div class="index">{{ swiperCurrent + 1 }}/{{ banners.length }}</div>
|
|
|
+ <div class="title">
|
|
|
+ <div class="top">
|
|
|
+ <div class="text1">茶树菇老鸭套餐</div>
|
|
|
+ <div class="text">
|
|
|
+ <img src="../native/imgs/icon-shoucang@3x.png" alt="" />
|
|
|
+ <div class="text2">收藏</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="con">
|
|
|
+ <div class="text1">已售 238</div>
|
|
|
+ <div class="text1">赞 60</div>
|
|
|
+ </div>
|
|
|
+ <div class="buttom">
|
|
|
+ <div class="text">
|
|
|
+ <img src="../native/imgs/icon_jiage@3x.png" alt="" />
|
|
|
+ <div class="text1">20.00</div>
|
|
|
+ <div class="text2">另外配送费2元</div>
|
|
|
+ </div>
|
|
|
+ <div class="calculationCon">
|
|
|
+ <div class="calculation" @click="calculation">-</div>
|
|
|
+ <div class="num">{{ count }}</div>
|
|
|
+ <div class="add" @click="count++">+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-sticky>
|
|
|
+ <div class="conTent">
|
|
|
+ <div class="text">详情</div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="text1">掌柜描述：</div>
|
|
|
+ <div class="text2">一道经典的家常菜，吃完会不会想起妈妈的味道呢</div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="text1">主料：</div>
|
|
|
+ <div class="text2">老鸭、百叶、青菜</div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="text1">规格：</div>
|
|
|
+ <div class="text2">1人份 (200g）</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="evaluate">
|
|
|
+ <div class="title1">
|
|
|
+ <div class="text">评价</div>
|
|
|
+ <div class="con">
|
|
|
+ <div class="text1">更多</div>
|
|
|
+ <img src="../native/imgs/icon_inter@3x.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="tabs">
|
|
|
+ <div
|
|
|
+ class="tab"
|
|
|
+ :class="{ active: item === active }"
|
|
|
+ v-for="(item, index) in tabs"
|
|
|
+ :key="index"
|
|
|
+ @click="change(item)"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="evaluateCon">
|
|
|
+ <img v-if="userInfo" :src="userInfo.avatar" alt="" />
|
|
|
+ <div class="conr">
|
|
|
+ <div class="name">
|
|
|
+ <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
|
|
|
+ <div class="text2">2021.07.03</div>
|
|
|
+ </div>
|
|
|
+ <!-- 点赞 -->
|
|
|
+ <div class="give">
|
|
|
+ <img src="../native/imgs/icon-zan@3x.png" alt="" />
|
|
|
+ <div class="text1">赞了该商品</div>
|
|
|
+ </div>
|
|
|
+ <div class="remark">哇塞，太好吃了吧，下次还要点，收藏起来。</div>
|
|
|
+ <div class="image">
|
|
|
+ <div v-for="(item, index) in lists" :key="index">
|
|
|
+ <img class="img" :src="item.image" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-total">
|
|
|
+ <div class="ImgBox">
|
|
|
+ <img src="../native/imgs/info_icon_yidiancan@3x.png" alt="" />
|
|
|
+ <div>
|
|
|
+ <div class="box-con-num">
|
|
|
+ <img src="../native/imgs/icon_jiage@3x.png" alt="" />
|
|
|
+ <p>22.00</p>
|
|
|
+ </div>
|
|
|
+ <div class="text1">另外配送费2元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-button type="warning" @click="order">结算</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ swiperCurrent: 0,
|
|
|
+ count: 1,
|
|
|
+ banners: [
|
|
|
+ {
|
|
|
+ image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ lists: [
|
|
|
+ {
|
|
|
+ price: '11',
|
|
|
+ name: '南瓜粥',
|
|
|
+ num: '1',
|
|
|
+ image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: '22',
|
|
|
+ name: '南瓜粥,八宝粥',
|
|
|
+ num: '2',
|
|
|
+ image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tabs: ['全部', '最新', '有图'],
|
|
|
+ active: '全部'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(e) {
|
|
|
+ this.active = e;
|
|
|
+ },
|
|
|
+ order() {
|
|
|
+ this.navigateTo('/pages/confirmorder');
|
|
|
+ },
|
|
|
+ calculation() {
|
|
|
+ if (this.count != 0) {
|
|
|
+ this.count--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ this.swiperCurrent = e.detail.current;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.container {
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding-bottom: 150px;
|
|
|
+ /deep/ .van-button {
|
|
|
+ width: 120px;
|
|
|
+ height: 44px;
|
|
|
+ background: @prim;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-right: 16px;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .swiper {
|
|
|
+ height: 375px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index {
|
|
|
+ position: absolute;
|
|
|
+ right: 14px;
|
|
|
+ top: 333px;
|
|
|
+ z-index: 9999;
|
|
|
+ width: 44px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 9px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px 14px;
|
|
|
+ margin-top: -15px;
|
|
|
+ .top {
|
|
|
+ .flex();
|
|
|
+ width: 347px;
|
|
|
+ justify-content: space-between;
|
|
|
+ .text1 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ .flex();
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buttom {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .text {
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 34px;
|
|
|
+ font-family: 'OSP';
|
|
|
+ font-weight: normal;
|
|
|
+ color: #ff7f1f;
|
|
|
+ line-height: 34px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .calculationCon {
|
|
|
+ .flex();
|
|
|
+ text-align: center;
|
|
|
+ .calculation {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: @prim;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ width: 28px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: @prim;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .evaluate {
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px 14px;
|
|
|
+ .title1 {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .text {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ .flex();
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ margin: 11px 0;
|
|
|
+ border: 1px solid @bg;
|
|
|
+ }
|
|
|
+ .tabs {
|
|
|
+ .flex();
|
|
|
+ .tab {
|
|
|
+ width: 38px;
|
|
|
+ height: 20px;
|
|
|
+ background: #d3edff;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #939599;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ &.active {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .evaluateCon {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ img {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .conr {
|
|
|
+ width: 293px;
|
|
|
+ .name {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .text1 {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .give {
|
|
|
+ .flex();
|
|
|
+ margin: 4px 0;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .remark {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ .flex();
|
|
|
+ .img {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conTent {
|
|
|
+ margin-top: 145px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px 14px;
|
|
|
+ .text {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ margin: 11px 0;
|
|
|
+ border: 1px solid @bg;
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .text1 {
|
|
|
+ width: 79px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-total {
|
|
|
+ .bottom();
|
|
|
+ .flex();
|
|
|
+ height: 56px;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #ffffff;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ .ImgBox {
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .box-con-num {
|
|
|
+ .flex();
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-family: 'OSP';
|
|
|
+ font-size: 34px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #ff7f1f;
|
|
|
+ line-height: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xuqiang
