|
|
@@ -0,0 +1,225 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="popup-open" @click="showGoods()">
|
|
|
+ <view class="iconfont iconzhibo-shangpin"></view>
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="popup" type="bottom">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="popup-close" @click="closeGoods()">收起</view>
|
|
|
+ <scroll-view scroll-y="true" class="good-box">
|
|
|
+ <view class="goods-row" v-for="item in goodsList" @click="goToGoodDetails(item)">
|
|
|
+ <cover-image class="goods-img" :src="item.imgPath"></cover-image>
|
|
|
+ <view class="goods-info">
|
|
|
+ <view class="goods-name">{{item.productName}}</view>
|
|
|
+ <view class="goods-sales">{{item.sellCount}}人付款</view>
|
|
|
+ <view class="goods-number">
|
|
|
+ <text class="goods-icon">￥</text>
|
|
|
+ <text class="goods-spec">{{item.bizPrice}}</text>
|
|
|
+ <text class="price">原价:{{item.originalPrice}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="more-button">
|
|
|
+ <view class="iconfont icongengduo"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <u-top-tips ref="uTips"></u-top-tips>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const NET = require('@/utils/request')
|
|
|
+ const API = require('@/config/api')
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoType: '',
|
|
|
+ goodsList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.videoType = options.videoType
|
|
|
+ NET.request(API.getLiveGoodsDetail + options.liveId, {}, 'GET').then(res => {
|
|
|
+ this.goodsList = res.data
|
|
|
+ }).catch(res => {
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: '获取商品列表失败',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 打开弹窗
|
|
|
+ showGoods() {
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
+ // 关闭弹窗
|
|
|
+ closeGoods() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ goToGoodDetails() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pagesGood/goodDetails?goodId=' + item.productId
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .popup-open {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 15px;
|
|
|
+ right: 15px;
|
|
|
+ background: #52A63A;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+
|
|
|
+ .iconzhibo-shangpin {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 265px;
|
|
|
+ float: left;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 15px 15px 0px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16px 0 0 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .popup-close {
|
|
|
+ width: 100%;
|
|
|
+ height: 26px;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 15px 0 15px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #52A63A;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 26px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .goods-row:first-child {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-row {
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ height: 104px;
|
|
|
+ float: left;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 15px 10px 15px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .goods-img {
|
|
|
+ width: 104px;
|
|
|
+ height: 104px;
|
|
|
+ object-fit: cover;
|
|
|
+ float: left;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-info {
|
|
|
+ width: calc(100% - 120px);
|
|
|
+ float: left;
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+ .goods-name {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-sales {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 15px;
|
|
|
+ margin: 4px 0 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-number {
|
|
|
+ width: 100%;
|
|
|
+ height: 24px;
|
|
|
+ float: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #52A63A;
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ .goods-icon {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-spec {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 12px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #A67954;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .more-button {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 16px;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 36px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
liuboyan