| | |
| | | <!-- 通过 uni-list--waterfall 类决定页面布局方向 --> |
| | | <!-- to 属性携带参数跳转详情页面,当前只为参考 --> |
| | | <view :border="!formData.waterfall" class="uni-list-item--waterfall" title="自定义商品列表" |
| | | v-for="item in data" :key="item.id" @click="addGoods(item.id)"> |
| | | v-for="item in data" :key="item.id" @click="toggle(item)"> |
| | | <!-- 通过header插槽定义列表左侧图片 --> |
| | | <template v-slot:header> |
| | | <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }"> |
| | | <image :src="item.goods_thumb" mode="aspectFill"></image> |
| | | </view> |
| | | </template> |
| | | <template v-slot:body> |
| | | <view class="shop"> |
| | | <view> |
| | | <view class="uni-title"> |
| | | <text class="uni-ellipsis-2">{{ item.name }}</text> |
| | | </view> |
| | | <!-- <view> |
| | | |
| | | <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }"> |
| | | <image :src="item.thumbnail" mode="aspectFill"></image> |
| | | </view> |
| | | <view class="shop"> |
| | | <view> |
| | | <view class="uni-title"> |
| | | <text class="uni-ellipsis-2">{{ item.goodsName }}</text> |
| | | </view> |
| | | <!-- <view> |
| | | <text class="uni-tag hot-tag">{{ item.goods_tip }}</text> |
| | | <text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text> |
| | | </view> --> |
| | | </view> |
| | | <view> |
| | | <view class="shop-price"> |
| | | <text>¥</text> |
| | | <text class="shop-price-text">{{ item.price }}</text> |
| | | <text>.00</text> |
| | | </view> |
| | | <view> |
| | | <view class="shop-price"> |
| | | <text>¥</text> |
| | | <text class="shop-price-text">{{ item.goods_price }}</text> |
| | | <text>.00</text> |
| | | <view class="uni-flex-row"> |
| | | <view class="uni-note">{{ item.commentNum || 0 }}条评论 月销量 {{ |
| | | item.buyCount || 0 }} |
| | | </view> |
| | | <view class="uni-flex-row"> |
| | | <view class="uni-note">{{ item.comment_count||0 }}条评论 月销量 {{ |
| | | item.month_sell_count||0 }} |
| | | </view> |
| | | <view class="uni-note ellipsis"> |
| | | <text class="uni-link">上架</text> |
| | | <view class="uni-note ellipsis"> |
| | | <text :class="item.marketEnable == 'DOWN' ? 'market-down' : 'market-up'">{{ |
| | | item.marketEnable == 'DOWN' ? "已下架" : "已上架" }}</text> |
| | | |
| | | <text class="uni-link" style="color:red;">删除</text> |
| | | </view> |
| | | <!--<text class="uni-link" style="color:red;">删除</text> --> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </view> |
| | | <!-- 通过body插槽定义商品布局 --> |
| | | |
| | | </view> |
| | | </view> |
| | | <view style="height: 80px;"></view> |
| | | </view> |
| | | |
| | | <button type="default" class="btn" @click="addGoods('')"> |
| | |
| | | </button> |
| | | <!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 --> |
| | | <uni-load-more v-if="loading || formData.status === 'noMore'" :status="formData.status" /> |
| | | <view> |
| | | <!-- 普通弹窗 --> |
| | | <uni-popup ref="popup" background-color="#fff"> |
| | | <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"> |
| | | |
| | | <button type="default" @click="underOrup">{{ selectGoods.marketEnable == 'DOWN' ? '上架' : "下架" |
| | | }}</button> |
| | | |
| | | <button type="default" @click="stocks">调整库存</button> |
| | | </view> |
| | | </uni-popup> |
| | | </view> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import '@/components/uview-components/uview-ui'; |
| | | |
| | | import * as API_GOODS from "@/api/goods.js"; |
| | | |
| | | export default { |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | formData: { |
| | | waterfall: false, // 布局方向切换 |
| | | status: 'loading', // 加载状态 |
| | | }, |
| | | data: [ |
| | | { |
| | | "id": 122, |
| | | "goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg", |
| | | "name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机", |
| | | "goods_price": "699.00", |
| | | "goods_tip": "热卖中", |
| | | "tag": [ |
| | | "热卖中", |
| | | ] |
| | | }, |
| | | { |
| | | "id": 123, |
| | | "goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg", |
| | | "name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机", |
| | | "goods_price": "699.00", |
| | | "goods_tip": "热卖中", |
| | | "tag": [ |
| | | "热卖中", |
| | | ] |
| | | } |
| | | ], |
| | | params: { |
| | | pageNumber: 1, |
| | | pageSize: 10, |
| | | }, |
| | | data: [], |
| | | formData: { |
| | | status: 'loading', // 加载状态 |
| | | }, |
| | | selectGoods: {}, |
| | | tipShow: false // 是否显示顶部提示框 |
| | | }; |
| | | }, |
| | | onLoad() { }, |
| | | onLoad() { |
| | | }, |
| | | onShow() { |
| | | if (this.$options.filters.tipsToLogin()) { |
| | | this.getGoodsList(); |
| | | } |
| | | }, |
| | | methods: { |
| | | load(data, ended) { |
| | | if (ended) { |
| | | this.formData.status = 'noMore' |
| | | underOrup() { |
| | | let params = { |
| | | goodsId: this.selectGoods.id, |
| | | }; |
| | | this.$refs.popup.close() |
| | | if (this.selectGoods.marketEnable == 'DOWN') { |
| | | API_GOODS.upGoods(params).then((res) => { |
| | | uni.showLoading({ |
| | | title: '上架成功' |
| | | }); |
| | | |
| | | setTimeout(function () { |
| | | uni.hideLoading(); |
| | | }, 2000); |
| | | this.getGoodsList(); |
| | | }) |
| | | } |
| | | else { |
| | | API_GOODS.lowGoods(params).then((res) => { |
| | | uni.showLoading({ |
| | | title: '下架成功' |
| | | }); |
| | | |
| | | setTimeout(function () { |
| | | uni.hideLoading(); |
| | | }, 2000); |
| | | this.getGoodsList(); |
| | | }) |
| | | } |
| | | }, |
| | | addGoods(id) { |
| | | console.log("addGoods:" + id); |
| | | stocks() { |
| | | |
| | | this.$refs.popup.close() |
| | | var goodsId = this.selectGoods.id |
| | | uni.navigateTo({ |
| | | url: `/pages/goods-manager/updateSkus/updateSkus${"?goodsId=" + goodsId}`, |
| | | }); |
| | | }, |
| | | toggle(item) { |
| | | this.$refs.popup.open('bottom') |
| | | this.selectGoods = item; |
| | | }, |
| | | |
| | | getGoodsList() { |
| | | uni.showLoading(); |
| | | API_GOODS.getStoreGoods( |
| | | this.params.pageNumber, |
| | | this.params.pageSize |
| | | ).then((res) => { |
| | | this.data = res.data.result.records; |
| | | |
| | | if (this.$store.state.isShowToast) { uni.hideLoading() }; |
| | | }); |
| | | }, |
| | | addGoods(id) { |
| | | uni.navigateTo({ |
| | | url: `/pages/goods-manager/addGoods/addGoods${id ? "?id=" + id : ""}`, |
| | | }); |
| | |
| | | /deep/ |
| | | /* #endif */ |
| | | .uni-list-item--waterfall { |
| | | // width: 50%; |
| | | width: 98%; |
| | | display: flex; |
| | | box-sizing: border-box; |
| | | margin-bottom: 10px; |
| | |
| | | margin-right: 10rpx; |
| | | } |
| | | } |
| | | |
| | | @mixin flex { |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | flex-direction: row; |
| | | } |
| | | |
| | | @mixin height { |
| | | /* #ifndef APP-NVUE */ |
| | | height: 100%; |
| | | /* #endif */ |
| | | /* #ifdef APP-NVUE */ |
| | | flex: 1; |
| | | /* #endif */ |
| | | } |
| | | |
| | | .popup-content { |
| | | @include flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 15px; |
| | | height: 150px; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .popup-height { |
| | | @include height; |
| | | width: 200px; |
| | | } |
| | | |
| | | .market-down { |
| | | color: red; |
| | | } |
| | | |
| | | .market-up { |
| | | color: green; |
| | | } |
| | | </style> |