|
|
@@ -1,489 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="service">
|
|
|
- <view class="service-top">
|
|
|
- <view class="item-flex">
|
|
|
- <view class="title">{{ goods.name }}</view>
|
|
|
- <u-icon name="share-square" size="24" @click="handlerShare" />
|
|
|
- </view>
|
|
|
- <u-swiper
|
|
|
- :list="goods.banners"
|
|
|
- previousMargin="0"
|
|
|
- nextMargin="100"
|
|
|
- circular
|
|
|
- :autoplay="false"
|
|
|
- bgColor="#ffffff"
|
|
|
- />
|
|
|
- <!-- <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image> -->
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="service-center">
|
|
|
- <view class="price">
|
|
|
- <view>
|
|
|
- <view class="price-item">
|
|
|
- <text class="price-text">￥</text>{{ goods.originalPrice }}
|
|
|
- </view>
|
|
|
- <view class="bottom-text">门市价 ￥{{ goods.specialPrice }}</view>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <view class="favorable">优惠推荐</view>
|
|
|
- <view class="bottom-text">还剩 49 天 02 时</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 优惠券 -->
|
|
|
- <view class="coupon flex" v-for="(item, index) in coupons" :key="index">
|
|
|
- <view class="coupon-left flex">
|
|
|
- <span class="coupon-left-mark">￥</span>
|
|
|
- <span class="coupon-left-price">5</span>
|
|
|
- </view>
|
|
|
- <view class="coupon-middle flex">
|
|
|
- <view class="coupon-middle-user over-hide">{{ item.name }}</view>
|
|
|
- <view class="coupon-middle-type over-hide">{{ item.description }}</view>
|
|
|
- </view>
|
|
|
- <view class="coupon-right flex">
|
|
|
- <view v-if="false" class="coupon-right-time flex">
|
|
|
- <view class="tip">有效期仅剩</view>
|
|
|
- <view class="time">{{ item.expiration }}</view>
|
|
|
- </view>
|
|
|
- <view v-else class="coupon-right-get" @click="handlerGetCoupon(item, index)">可领取</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 服务详情 -->
|
|
|
- <view class="detail">
|
|
|
- <view class="detail-text">服务详情</view>
|
|
|
- <view class="detail-des">
|
|
|
- {{ goods.description }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 评价内容 -->
|
|
|
- <view class="Evaluate-content">
|
|
|
- <view v-for="(item, index) in comments" :key="index">
|
|
|
- <view class="commnet-user flex">
|
|
|
- <image :src="item.user.avatar" style="width: 40px; height: 40px; border-radius: 50%" />
|
|
|
- <view class="commnet-user-middle flex">
|
|
|
- <view class="name flex">{{ item.user.nickname }}</view>
|
|
|
- <u-rate
|
|
|
- class="rate"
|
|
|
- :value="item.score"
|
|
|
- readonly
|
|
|
- :size="12"
|
|
|
- gutter="1"
|
|
|
- active-color="#ffa500"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="time">{{ item.createTime }}</view>
|
|
|
- </view>
|
|
|
- <view class="commnet-text">{{ item.content }}</view>
|
|
|
- <view class="commnet-img">
|
|
|
- <image
|
|
|
- class="img"
|
|
|
- v-for="(img, index) in item.attachments"
|
|
|
- :key="index"
|
|
|
- :src="url"
|
|
|
- mode="widthFix"
|
|
|
- />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-empty
|
|
|
- v-if="comments.length == 0"
|
|
|
- mode="message"
|
|
|
- icon="http://cdn.uviewui.com/uview/empty/message.png"
|
|
|
- ></u-empty>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 底部 -->
|
|
|
- <view class="service-footer">
|
|
|
- <view
|
|
|
- class="user-operate"
|
|
|
- v-for="(item, index) in userOperate"
|
|
|
- :key="index"
|
|
|
- @tap="collect(item, index)"
|
|
|
- >
|
|
|
- <u-icon class="user-operate-icon" :name="item.icon" size="24" />
|
|
|
- <text class="user-operate-text">{{ item.name }}</text>
|
|
|
- </view>
|
|
|
- <view class="user-operate" @tap="handlerFavorite">
|
|
|
- <u-icon
|
|
|
- class="user-operate-icon"
|
|
|
- :name="goods.favorites ? favorite_list.fill : favorite_list.icon"
|
|
|
- size="24"
|
|
|
- />
|
|
|
- <text class="user-operate-text">{{ favorite_list.name }}</text>
|
|
|
- </view>
|
|
|
- <view class="buyNow" @click="handlerImmediateBy">立即购买</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getGoodsDetailApi, addFavorite } from '@/api/client/business.js';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- userOperate: [
|
|
|
- {
|
|
|
- name: '店铺',
|
|
|
- icon: 'file-text',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '立即咨询',
|
|
|
- icon: 'chat',
|
|
|
- },
|
|
|
- ],
|
|
|
- favorite_list: {
|
|
|
- name: '收藏',
|
|
|
- icon: 'heart',
|
|
|
- fill: 'heart-fill',
|
|
|
- },
|
|
|
- // hascollect: false, // 当前店铺是否被收藏
|
|
|
-
|
|
|
- goods: [], //商品详情
|
|
|
- coupons: [], //优惠券
|
|
|
- comments: [], // 评论
|
|
|
- id: '',
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- // 获取商品详情接口
|
|
|
- this.id = option.id;
|
|
|
- this.handlerInitList(option.id);
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
- methods: {
|
|
|
- handlerInitList(id) {
|
|
|
- getGoodsDetailApi(id).then(res => {
|
|
|
- this.goods = res.data.goods;
|
|
|
- console.log('@@@@goods', this.goods);
|
|
|
- this.coupons = res.data.coupons;
|
|
|
- this.comments = res.data.comments;
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击分享
|
|
|
- handlerShare() {
|
|
|
- uni.share({
|
|
|
- provider: 'weixin',
|
|
|
- scene: 'WXSceneSession',
|
|
|
- type: 1,
|
|
|
- summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
|
|
|
- success: function (res) {
|
|
|
- console.log('success:' + JSON.stringify(res));
|
|
|
- },
|
|
|
- fail: function (err) {
|
|
|
- console.log('fail:' + JSON.stringify(err));
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 选择底部tab 店铺 收藏 咨询
|
|
|
- collect(item, index) {
|
|
|
- switch (index) {
|
|
|
- case 0:
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/client/clientPackage/storeDetail?id=${this.goods.id}`,
|
|
|
- });
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- uni.showToast({
|
|
|
- title: '暂无',
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击收藏
|
|
|
- handlerFavorite() {
|
|
|
- console.log('@@@id', this.id);
|
|
|
- addFavorite(this.id).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.handlerInitList(this.id);
|
|
|
- // this.hascollect = !this.hascollect;
|
|
|
- uni.showToast({
|
|
|
- title: '收藏成功',
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击领取优惠卷
|
|
|
- handlerGetCoupon() {
|
|
|
- uni.showToast({
|
|
|
- title: '没有',
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 点击购买按钮
|
|
|
- handlerImmediateBy() {
|
|
|
- this.$store.commit('order/GET_ORDER_LIST', this.goods);
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.service {
|
|
|
- min-height: 100vh;
|
|
|
-}
|
|
|
-
|
|
|
-.service-top {
|
|
|
- margin: 20rpx;
|
|
|
-
|
|
|
- .item-flex {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- margin: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- Image {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.service-center {
|
|
|
- margin: 20rpx;
|
|
|
-
|
|
|
- .price {
|
|
|
- height: 110rpx;
|
|
|
- padding: 10rpx 30rpx;
|
|
|
- display: flex;
|
|
|
- margin: 30rpx 0;
|
|
|
- color: #fff;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: lighter;
|
|
|
- font-weight: normal;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- background-color: #6c9fc3;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .price-item {
|
|
|
- font-size: 35rpx;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- font-weight: 600;
|
|
|
-
|
|
|
- .price-text {
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .favorable {
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- letter-spacing: 4rpx;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-text {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 100;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 优惠券
|
|
|
-.flex {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.over-hide {
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.coupon {
|
|
|
- height: 130rpx;
|
|
|
- display: flex;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #f2110d;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-bottom: 25rpx;
|
|
|
- padding: 20rpx 25rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #faeaea;
|
|
|
- border: 2rpx solid #eb8b8b;
|
|
|
-
|
|
|
- .coupon-left {
|
|
|
- width: 10%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .coupon-left-price {
|
|
|
- font-size: 65rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-middle {
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
- width: 60%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .coupon-middle-user {
|
|
|
- width: 100%;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-middle-type {
|
|
|
- width: 100%;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 600;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-right {
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
- width: 25%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .coupon-right-time {
|
|
|
- height: 100%;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .tip {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .time {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 600;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-right-get {
|
|
|
- width: 80%;
|
|
|
- background-color: #e8a87c;
|
|
|
- height: 55rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 55rpx;
|
|
|
- margin-top: 15rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 服务详情
|
|
|
-.detail {
|
|
|
- margin: 40rpx 20rpx 20rpx 20rpx;
|
|
|
-
|
|
|
- .detail-text {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .detail-des {
|
|
|
- margin-left: 15rpx;
|
|
|
- font-size: 25rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 评价内容
|
|
|
-.Evaluate-content {
|
|
|
- margin: 20rpx;
|
|
|
- padding-bottom: 120rpx;
|
|
|
-
|
|
|
- .commnet-user {
|
|
|
- height: 90rpx;
|
|
|
-
|
|
|
- .commnet-user-middle {
|
|
|
- height: 100%;
|
|
|
- width: 60%;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-evenly;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .rate {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .time {
|
|
|
- align-self: flex-end;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .commnet-text {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .commnet-img .img {
|
|
|
- width: 225rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 底部
|
|
|
-.service-footer {
|
|
|
- height: 60px;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- border-top: 1px solid #eb8b8b;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .u-icon {
|
|
|
- justify-content: center !important;
|
|
|
- }
|
|
|
-
|
|
|
- .user-operate {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .user-operate-text {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .buyNow {
|
|
|
- width: 200px;
|
|
|
- height: 40px;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
- border-radius: 40px;
|
|
|
- background-color: #f0d318;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
