123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- <template>
- <view class="goods-list">
- <view class="goods-item" v-for="item in list" :key="item.id">
- <view>
- <view class="goods-imgs" @click="toDetail(item)">
- <view v-if="item.inventoryQty == 0&&item.state == 1" class="goods-staus">已售罄</view>
- <view v-if="item.state == 0" class="goods-staus">已下架</view>
- <u-lazy-load
- img-mode="scaleToFill"
- :height="imgHeight"
- :image="item.homeImage+'?x-oss-process=image/resize,m_pad,h_252,w_325,color_ffffff'"
- :loading-img="loadingImg"
- :error-img="errorImg">
- </u-lazy-load>
- </view>
- <view class="name ellipsis-two" @click="toDetail(item)">{{item.name}}</view>
- </view>
- <view class="price">
- <view>
- <text>{{item.sellGold}}</text>
- <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
- </view>
- <view v-if="item.inventoryQty > 0 && item.state == 1 ">
- <!-- <u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image> -->
- <u-button size="mini" type="error" :custom-style="customStyle" @click="addCart(item)">
- +
- </u-button>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- addGoodsToCart
- } from '@/api/shoppingCart.js'
- export default {
- props: {
- imgHeight: {
- type: Number,
- default: 250
- },
- goldLimit: {
- type: [Number,String],
- default: 0
- },
- list:{
- type: Array,
- default: function(){
- return []
- }
- }
- },
- data() {
- return {
- customStyle:{
- color: '#fff',
- borderRadius: '150rpx',
- border: 0,
- width: '50rpx',
- height: '50rpx',
- lineHeight: '50rpx',
- fontSize: '25px'
- },
- loadingImg: '/static/loading.gif',
- errorImg: '/static/imgError.png',
- timer: null,
- finger: {x:0,y:0},
- linePos: null,
- }
- },
- methods: {
- // 添加购物车
- addGoodToCart(item){
- uni.showLoading({
- mask: true,
- title: "正在加入购物车..."
- })
- addGoodsToCart(item).then(res => {
- if(res.status == 200){
- // 刷新购物车数量
- if(!item.hasCunzai){
- this.$store.state.vuex_cartNums = this.$store.state.vuex_cartNums + 1
- }
- setTimeout(()=>{
- uni.showToast({
- icon: 'none',
- title:'添加成功'
- })
- // 刷新购物车数据
- uni.$emit('getCartList')
- },50)
- }
- })
- },
- // 判断当前商品是否已存在购物车中
- hasCunzai(data){
- let list = this.$store.state.vuex_cartList
- let row = list.find(item=> item.goodsTypeNo == data.goodsTypeNo)
- return row
- },
- // 加入购物车
- addCart(item) {
- this.addGoodToCart({goodsNo:item.goodsNo,buyQty:1,hasCunzai:this.hasCunzai(item)})
- },
- // 商品详情
- toDetail(item){
- uni.navigateTo({
- url:"/pages/goods/goodsDetail?id="+item.id + "&goldLimit="+this.goldLimit
- })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .goods-list{
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- padding-top: 20upx;
- .goods-item{
- background: #FFFFFF;
- width: 48%;
- margin-bottom: 20upx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .goods-imgs{
- position: relative;
- border-radius: 28upx 28upx 0 0;
- border: 1px solid #eee;
- overflow: hidden;
- .goods-staus{
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 100;
- border-radius: 15rpx 15rpx 0 0;
- background: rgba($color: #000000, $alpha: 0.4);
- text-align: center;
- line-height: 250rpx;
- left: 0;
- top: 0;
- color: #eee;
- font-size: 30upx;
- font-weight: bold;
- }
- }
- .name{
- padding: 10upx 0;
- font-weight: bold;
- font-size: 30rpx;
- }
- .price{
- display: flex;
- align-items: center;
- justify-content: space-between;
- text{
- color: #d42a26;
- font-size: 36upx;
- margin-right: 6upx;
- font-weight: bold;
- }
- >view{
- &:first-child{
- font-size: 22upx;
- display: flex;
- align-items: center;
- }
- &:last-child{
- &:active{
- opacity: 0.5;
- }
- }
- }
- }
- }
- }
- </style>
|