123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <!-- 商品组件:竖直方向
- 点击进入商品详情页
- 加入购物车事件
- -->
- <template name="goodsItemV">
- <view class="goods_v_item flex_column_start_start" @click="goGoodsDetail(goods_info)" :style="{width:'calc((750rpx - '+page_margin*4+'rpx - '+goods_margin*2+'rpx)/2)',borderRadius:border_radius+'px',border:border_style == 'border_eee'?'1rpx solid #eee':'',boxShadow:border_style == 'card-shadow'?'rgba(93, 113, 127, 0.08) 0px 2px 8px':''}">
- <view class="goods_desc_top" :style="{height:height*2+'rpx'}">
- <view class="goods-img" :style="{backgroundImage: 'url('+(goods_info.mainImage||goods_info.goodsImage)+')',width:'calc((750rpx - '+page_margin*4+'rpx - '+goods_margin*2+'rpx)/2)',borderTopLeftRadius:border_radius*2+'rpx',borderTopRightRadius:border_radius*2+'rpx'}"></view>
- <text class="goods-name">{{goods_info.goodsName}}</text>
- <!-- <view class="goods_des">{{goods_info.goodsBrief}}</view> -->
- </view>
- <view :class="show_sale == true?'goods-price':'goods-price have_no_sale'" :style="{marginTop:isIos?'26rpx':0}">
- <view class="left">
- <text class="unit">¥</text>
- <text class="price_int">{{this.$getPartNumber(goods_info.goodsPrice,'int')}}</text>
- <text class="price_decimal">{{this.$getPartNumber(goods_info.goodsPrice,'decimal')}}</text>
- </view>
- <view class="pre_bottom" :class="show_sale == true?'goods_item_bottom':''">
- <view class="have_sold_text" v-if="show_sale == true">已售{{goods_info.actualSales}}件</view>
- <image :src="imgUrl+'add-cart.png'" @click.stop="addCart(goods_info.productId || goods_info.defaultProductId)" v-if="icon_type == 1"></image>
- <image :src="icon2" @click.stop="addCart(goods_info.productId || goods_info.defaultProductId)" v-if="icon_type == 2"></image>
- <image :src="icon3" @click.stop="addCart(goods_info.productId || goods_info.defaultProductId)" v-if="icon_type == 3"></image>
- <image :src="icon4" @click.stop="addCart(goods_info.productId || goods_info.defaultProductId)" v-if="icon_type == 4"></image>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState,
- } from 'vuex';
- export default {
- name: "goodsItemV",
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- icon2:getApp().globalData.imgUrl+'index/add2.png',
- icon3:getApp().globalData.imgUrl+'index/add.png',
- icon4:getApp().globalData.imgUrl+'index/add3.png',
- icon5:getApp().globalData.imgUrl+'index/stop.png',
- icon_url:'', //加车图标
- goods_pic:'' , //商品图片
- goods_sale:'', //销量
- isIos: getApp().globalData.systemInfo.platform == 'ios', //是否ios手机
- // // #ifdef H5
- // isIos: getApp().globalData.systemInfo.platform == 'ios', //是否ios手机
- // // #endif
- }
- },
- computed: {
- ...mapState(['userInfo'])
- },
- props: {
- goods_info: {
- type: Object,
- value: {}
- },
- icon_type:{
- type:Number,
- },
- show_sale:{
- type:Boolean
- },
- border_radius:{
- type:Number
- },
- border_style:{
- type:String
- },
- // 商品边距
- goods_margin:{
- type:Number,
- default:10
- },
- // 页面边距
- page_margin:{
- type:Number,
- default:10
- },
- height:{
- type:Number,
- default:258
- }
- },
- onLoad(){
- },
- methods: {
- //进入商品详情页
- goGoodsDetail(goods_info) {
- uni.navigateTo({
- url: '/pages/product/detail?productId=' + (goods_info.productId || goods_info.defaultProductId) + '&goodsId='+goods_info.goodsId
- })
- },
- // 加入购物车
- addCart(productId){
- if(this.userInfo.access_token){ //登录
- let param = {}
- param.url = 'v3/business/front/cart/add'
- param.method = 'POST'
- param.data = {
- productId:productId,
- number:1
- }
- this.$request(param).then(res=>{
- if(res.state == 200){
- uni.showToast({
- title: res.msg,
- icon:'none'
- })
- this.$emit('reloadCartList',true)
- }else{
- uni.showToast({
- title:res.msg,
- icon:'none',
- duration:700
- })
- }
- })
- }else{ //未登录
- let cart_list = {
- storeCartGroupList:[{
- promotionCartGroupList:[{
- cartList: [{
- buyNum: 1,
- goodsId: this.goods_info.goodsId,
- productId: this.goods_info.productId || this.goods_info.defaultProductId,
- productImage: this.goods_info.goodsPic?this.goods_info.goodsPic:this.goods_info.goodsImage,
- goodsName: this.goods_info.goodsName,
- isChecked: 1,
- productPrice: this.goods_info.goodsPrice,
- productStock: this.goods_info.productStock
- }],
- }],
- storeId:this.goods_info.storeId,
- storeName:this.goods_info.storeName,
- checkedAll:true
- }],
- checkedAll: true,
- invalidList: []
- }
- let local_cart_list = uni.getStorageSync('cart_list') //购物车列表本地缓存
- if (local_cart_list) {
- let tmp_list1 = []
- let tmp_list2 = []
- cart_list.storeCartGroupList.forEach(item=>{
- item.promotionCartGroupList.forEach(item1=>{
- item1.cartList.forEach(item2=>{
- local_cart_list.storeCartGroupList.forEach(v=>{
- v.promotionCartGroupList.forEach(v1=>{
- v1.cartList.forEach(v2=>{
- if(v2.productId == item2.productId && v.storeId == item.storeId){
- tmp_list1.push(v)
- }
- })
- tmp_list2 = local_cart_list.storeCartGroupList.filter(v=>{
- return v.storeId == item.storeId
- })
- })
- })
- })
- })
- })
- if(tmp_list1.length > 0 && tmp_list2.length > 0){ //同一店铺同一商品
- local_cart_list.storeCartGroupList.map(item=>{
- item.promotionCartGroupList.map(item1=>{
- item1.cartList.map(item2=>{
- if(item2.productId == (this.goods_info.productId || this.goods_info.defaultProductId) && item.storeId == this.goods_info.storeId){
- item2.buyNum += 1
- }
- })
- })
- })
- }else if(tmp_list1.length == 0 && tmp_list2.length > 0){ //同一店铺不同商品
- local_cart_list.storeCartGroupList.map(item=>{
- if(item.storeId == this.goods_info.storeId){
- item.promotionCartGroupList.map(item2=>{
- item2.cartList.push(cart_list.storeCartGroupList[0].promotionCartGroupList[0].cartList[0])
- })
- }
- })
- }else{ //不同店铺不同商品
- local_cart_list.storeCartGroupList.push(cart_list.storeCartGroupList[0])
- }
- uni.showToast({
- title: '加入购物车成功!',
- icon:'none'
- })
- uni.setStorageSync('cart_list',local_cart_list);
- this.$emit('addCart',local_cart_list)
- } else {
- uni.showToast({
- title: '加入购物车成功!',
- icon:'none'
- })
- uni.setStorageSync('cart_list',cart_list);
- this.$emit('addCart',cart_list)
- }
- }
- },
- changeImg(val){
- return val.mainImage?val.mainImage:val.goodsImage
- },
- saleNum(val){
- if(val.actualSales){
- return val.actualSales
- }else{
- return val.saleNum
- }
- // return val.actualSales?val.actualSales:val.saleNum
- }
- },
- }
- </script>
- <style lang='scss'>
- .goods_v_item {
- background: #fff;
- border-radius: 20rpx;
- overflow: hidden;
- margin-bottom: 22rpx;
- display: flex;
- flex-direction: column;
- &{
- margin-right:0 !important;
- }
- .goods_desc_top{
- height:516rpx;
- .goods-img {
- background-size: cover;
- background-position: center center;
- background-repeat: no-repeat;
- height: calc((750rpx - 60rpx)/2);
- overflow: hidden;
- background-color: #fff;
- }
- .goods-name {
- height:173rpx;
- margin-top: 20rpx;
- font-size: 28rpx;
- color: $com-main-font-color;
- line-height: 40rpx;
- height: 80rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- word-break: break-word;
- padding: 0 20rpx;
- }
- .goods_des{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #888888;
- line-height: 36rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
- width: 355rpx;
- overflow: hidden;
- text-overflow:ellipsis;
- white-space: nowrap;
- }
- }
- .goods-price {
- padding: 0 20rpx;
- width: 100%;
- display: flex;
- flex-direction: column;
- .left {
- width:100%;
- color: $main-color;
- .unit,
- .price_decimal {
- font-size: 24rpx;
- margin-right: 3rpx;
- }
- .price_int {
- font-size: 34rpx;
- line-height: 34rpx;
- }
- }
- image {
- width: 42rpx;
- height: 42rpx;
- }
- }
- }
- .goods_item_bottom{
- width:100%;
- display: flex;
- justify-content: space-between;
- margin-top:20rpx;
- padding-bottom: 20rpx;
- }
- .have_sold_text{
- font-size:24rpx;
- color:#9a9a9a;
- }
- .pre_bottom{
- display: flex;
- align-items: center;
- }
- .have_no_sale{
- width: 100%;
- flex-direction: row !important;
- justify-content: space-between !important;
- padding:20rpx !important;
- }
- </style>
|