商品规格

src/pages/product/p_details.vue

@@ -72,7 +72,7 @@
                         <view class="shop_names">{{ detail.goods_name }}</view>
                         <view class="goods_msg" v-if="type == 1">￥{{ detail.total_amount }}</view>
                         <view class="goods_msg" v-else-if="type == 2">{{ detail.trade_price }}元+{{ detail.trade_num }}批发券+{{ detail.treasure_price }}茶宝</view>
-                        <view class="goods_msg" v-else>￥{{ detail.cost_price }}</view>
+                        <view class="goods_msg" v-else>￥{{ afterSpecPrice }}</view>
                         <view class="num_con flex_r flex_je" v-if="type != 6">
                             <uni-number-box :min="1" @change="bindChange" :value="buyNum"></uni-number-box>
                         </view>
@@ -89,6 +89,34 @@
                         <view class="raido_text">零售产品置换</view>
                     </view>
                 </view>
+                <view>
+                    <view v-if="detail.goods_spec_list.length > 0">
+                        <view class="goods_spec">
+                            <text>{{detail.goods_spec}}</text>
+                        </view>
+                        <view class="goods_spec_list">
+                            <view class="goods_spec_list_item"  
+                                v-for="(item,index) in detail.goods_spec_list" :key="index"
+                                :class="goodsSpecIndex == index ? 'goods_spec_list_item_active' : ''"
+                                @click="goodsSpecChange(item,index)">
+                                <span>{{item.spec_name}}</span>
+                            </view>
+                        </view>
+                    </view>
+                    <view v-if="detail.goods_attr_list.length > 0">
+                        <view class="goods_spec">
+                            <text>{{detail.goods_attr}}</text>
+                        </view>
+                        <view class="goods_spec_list">
+                            <view class="goods_spec_list_item"  
+                                v-for="(item,index) in detail.goods_attr_list" :key="index"
+                                :class="goodsAttrIndex == index ? 'goods_spec_list_item_active' : ''"
+                                @click="goodsAttrChange(item,index)">
+                                <span>{{item.attr_name}}</span>
+                            </view>
+                        </view>
+                    </view>
+                </view>
                 <checkbox-group class="flex_r flex_ac flex_jc" @change="checkboxChange">
                     <label class="option_box">
                         <checkbox value="1" :checked="checked" color="#2DB389" style="transform: scale(0.7)" />
@@ -97,7 +125,8 @@
                         <text @tap.stop="getProPage" v-else-if="type == 6">《天天捡漏协议》</text>
                     </label>
                 </checkbox-group>
-                <view class="confim flex_r flex_ac flex_jc" @tap="ToPayPage">确定</view>
+                <view class="confim flex_r flex_ac flex_jc" v-if="type == 1" @tap="ToPayPage">立即支付</view>
+                <view class="confim flex_r flex_ac flex_jc" v-else @tap="ToPayPage">立即支付 ￥{{afterSpecPrice * buyNum}}</view>
             </view>
         </uni-popup>
         <!-- 购买或加入购物车弹窗-end -->
@@ -170,6 +199,8 @@ export default {
             id: "", //合伙人套餐ID
             detail: {
                 goods: {},
+                goods_spec_list: [],
+                goods_attr_list: [],
             }, // 商品详情
             checked: false, //是否选中协议
             buyNum: 1, //购买数量
@@ -181,6 +212,11 @@ export default {
             userinfo: {},
             goodsDa: {},
             unid: "",
+            goodsSpecIndex: 0,
+            goodsAttrIndex: 0,
+            specId: "0",
+            attrId: "0",
+            afterSpecPrice: 0, // 规格选择后显示价格
         };
     },
     onLoad: function(e) {
@@ -199,10 +235,18 @@ export default {
             post("v1/goods/goodsDetail", da).then((res) => {
                 if (res.code === 0) {
                     this.detail = res.data.data;
+                    this.afterSpecPrice = this.detail.cost_price
                     let imgs = [];
                     imgs.push(this.detail.original_img);
                     imgs.push(...this.detail.goods_img);
                     this.detail.goods_img = imgs;
+                    if (this.detail.goods_spec_list.length > 0) {
+                        this.specId = this.detail.goods_spec_list[0].id
+                    }
+                    if (this.detail.goods_attr_list.length > 0) {
+                        this.attrId = this.detail.goods_attr_list[0].id
+                    }
+                    this.getPrice()
                 } else {
                     uni.showModal({
                         title: "提示",
@@ -235,6 +279,10 @@ export default {
                 ...this.goodsDa,
                 num: Number(this.buyNum),
                 is_sell: ['1', '2'].includes(this.type) ? this.pfway : "0",
+                spec_id: this.specId,
+                attr_id: this.attrId,
+                goods_id: this.detail.goods_id,
+                
             };
             this.goto("/pages/to-pay-list/index", da);
         },
@@ -324,6 +372,32 @@ export default {
         async getuserInfo() {
             this.userinfo = await uni.userfun();
         },
+        // 选择规格
+        goodsSpecChange(item,index){
+            this.goodsSpecIndex = index;
+            this.specId = item.id
+            this.getPrice()
+        },
+        goodsAttrChange(item,index){
+            this.goodsAttrIndex = index
+            this.attrId = item.id
+            this.getPrice()
+        },
+        getPrice(){
+            post("v1/goods/getPrice", {
+                goods_id: this.detail.goods_id,
+                spec_id: this.specId,
+                attr_id: this.attrId,
+                type: this.type
+            }).then((res) => {
+                if (res.code === 0) {
+                    if(res.data){
+                        this.afterSpecPrice = res.data.cost_price
+                    }
+                }
+            });
+            
+        }
     },
     onShareAppMessage() {
         let userinfo = uni.getStorageSync("userinfo");
@@ -513,11 +587,20 @@ page {
 }
 
 .num_con {
-    width: 100%;
+    // width: 100%;
     overflow: hidden;
     padding-bottom: 3rpx;
 }
-
+.quota_text{
+    font-size: 28rpx;
+    color: #545454;
+    padding-left: 6rpx;
+}
+.quota_num_text{
+    font-size: 24rpx;
+    color: #545454;
+    padding-left: 6rpx;
+}
 .num_str {
     font-size: 14px;
     color: #989898;
@@ -592,7 +675,7 @@ page {
 .goods_msg {
     width: 100%;
     overflow: hidden;
-    font-size: 28rpx;
+    font-size: 34rpx;
     color: #18bb88;
     font-family: "SourceHanSansCN-Medium";
     font-weight: 500;
@@ -640,4 +723,55 @@ page {
         padding: 0 16rpx;
     }
 }
+
+// 商品规格样式-start
+.goods_spec{
+    font-size: 28rpx;
+    padding-top: 28rpx;
+}
+.goods_spec_list{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-top: 20rpx;
+
+    &_item{
+        font-size: 24rpx;
+        padding: 14rpx 28rpx;
+        border-radius: 10rpx;
+        border: 2rpx solid #F7F7F7;
+        margin-right: 12rpx;
+        margin-bottom: 14rpx;
+        background-color: #F7F7F7;
+        
+    }
+    &_item_active{
+            color: #ff6d44;
+            border: 2rpx solid #ff6d44;
+            background-color: #FFF8F2;
+        }
+}
+
+// 商品规格样式-end
+
+::v-deep .uni-numbox{
+    border-radius: 10rpx !important;
+    background-color: #F7F7F7 !important;
+    
+}
+::v-deep .uni-numbox__value{
+    border-radius: 10rpx !important;
+    background-color: #F7F7F7 !important;
+}
+::v-deep .uni-numbox__minus, ::v-deep .uni-numbox__plus{
+    // border: 1rpx solid #888888 !important;
+    // color: #fff !important;
+    background-color: #f0f0f0 !important;
+}
+// ::v-deep .uni-numbox--text{
+//     color: #fff !important;
+// }
+// ::v-deep .uni-numbox--disabled{
+//     color: #cecece !important;
+// }
 </style>

src/pages/szw-order-details/index.vue

@@ -39,6 +39,10 @@
                             <view class="goods_name">{{ orderInfo.goods.goods_name }}
                                 <view class="goods_num">×{{ orderInfo.goods_num }}</view>
                             </view>
+                            <view class="goods_spec">
+                                    <text class="goods_spec_text" v-if="orderInfo.goodsAttr">{{ orderInfo.goodsAttr.spec_name }}</text>
+                                    <text v-if="orderInfo.goodsAttribute">{{ orderInfo.goodsAttribute.attr_name }}</text>
+                                </view>
                             <view class="goods_price r_color">￥{{ orderInfo.total_amount  }}</view>
                         </view>
                     </scroll-view>
@@ -788,4 +792,22 @@ page {
 }
 
 // 备注-end
+
+// 商品规格-start
+.goods_spec{
+    font-size: 24rpx;
+    color: #868686;
+    padding-top: 20rpx;
+    text{
+        padding: 10rpx 20rpx;
+        border-radius: 10rpx;
+        margin-right: 12rpx;
+        background-color: #f5f5f5;
+        
+    }
+    &_text{
+        padding-right: 8rpx;
+    }
+}
+// 商品规格-end
 </style>

src/pages/szw-order-list/index.vue

@@ -18,6 +18,10 @@
                             <image :src="li.original_img" mode="cover" class="goods-img" />
                             <view class="goodsDetail_info">
                                 <view class="good_name ellipsis2">{{ li.goods_name || "" }}</view>
+                                <view class="goods_spec">
+                                    <text class="goods_spec_text" v-if="li.spec_name">{{ li.spec_name }}</text>
+                                    <text v-if="li.attr_name">{{ li.attr_name }}</text>
+                                </view>
                                 <view class="good_text flex_r flex_ac flex_jb">
                                     <view class="unimport dinB">x {{ li.goods_num }}</view>
                                     <view class="goods_price r_color">￥<text class="r_color">{{ li.total_amount }}</text></view>
@@ -568,4 +572,22 @@ page {
     border-color: rgb(245, 8, 8);
     color: rgb(245, 8, 8);
 }
+
+// 商品规格-start
+.goods_spec{
+    font-size: 24rpx;
+    color: #868686;
+    padding-top: 16rpx;
+    text{
+        padding: 10rpx 20rpx;
+        border-radius: 10rpx;
+        margin-right: 12rpx;
+        background-color: #f5f5f5;
+        
+    }
+    &_text{
+        padding-right: 8rpx;
+    }
+}
+// 商品规格-end
 </style>

src/pages/to-pay-list/index.vue

@@ -53,6 +53,10 @@
                 <view class="goods_con flex_c flex_jc flex_jb">
                     <view class="goods_name ellipsis2">{{ goodsInfo.goods_name }}</view>
                     <!-- <view class="goods_msg" v-if="Data.type == 2">{{ goodsInfo.trade_price }}元+{{ goodsInfo.trade_num }}批发券+{{ goodsInfo.treasure_price }}茶宝</view> -->
+                    <view class="goods_spec">
+                        <text class="goods_spec_text" v-if="specName">{{ specName }}</text>
+                        <text v-if="attrName">{{ attrName }}</text>
+                    </view>
                     <template v-if="Data.type != 1">
                         <view class="goods_msg">{{ goodsInfo.cost_price }}</view>
                         <view class="goods_num">x {{ Data.num }}</view>
@@ -111,7 +115,7 @@
             </template>
             <view class="order_list flex_r flex_ac flex_jb">
                 <view class="list_name">小计</view>
-                <view class="list_con">￥{{ CommodityPrice || 0 }}</view>
+                <view class="list_con">￥{{ CommodityPrice>0?CommodityPrice:0 || 0 }}</view>
             </view>
         </view>
         <view class="order mar_b20" v-if="Data.type == 1">
@@ -139,7 +143,7 @@
         <view class="order">
             <view class="order_list flex_r flex_ac flex_jb">
                 <view class="list_name">订单合计</view>
-                <view class="list_con">￥{{ amountTotal || 0 }}</view>
+                <view class="list_con">￥{{ amountTotal>0?amountTotal:0 || 0 }}</view>
             </view>
             <view class="order_list flex_r flex_ac flex_jb" v-if="['1','2','3'].includes(Data.type)">
                 <view class="list_name">可用云宝</view>
@@ -189,7 +193,9 @@ export default {
             localInfo: uni.getStorageSync("localInfo"),
 
             prom_type: 0, //0：邮寄 1：自提
-            isAct: false, //是否激活数智生活
+            isAct: false, //是否激活数智生活,
+            specName: "",
+            attrName: ""
         };
     },
     components: {
@@ -223,13 +229,52 @@ export default {
             post("v1/goods/goodsDetail", da).then((res) => {
                 if (res.code === 0) {
                     this.goodsInfo = res.data.data;
-                    if (this.goodsInfo.shipping_method != 2) this.prom_type = this.goodsInfo.shipping_method
-                    if(da.type==1)this.calculatePrice(1,this.Data.num);
-                    else{
-                        post("v1/goods/freight", { type: da.type, id: da.id }).then((res) => {
-                            if (res.code === 0) this.freight = res.data.freight;
-                            this.calculatePrice(this.Data.type,this.Data.num);
-                        });
+                    if (this.goodsInfo.goods_spec_list.length > 0) {
+                        this.specName = this.goodsInfo.goods_spec_list.filter((item)=>{
+                            return item.id == this.Data.spec_id
+                        })[0].spec_name
+                    }
+                    if (this.goodsInfo.goods_attr_list.length > 0) {
+                        this.attrName = this.goodsInfo.goods_attr_list.filter((item)=>{
+                            return item.id == this.Data.attr_id
+                        })[0].attr_name
+                    }
+                    post("v1/goods/getPrice", {
+                        goods_id: this.Data.goods_id,
+                        spec_id: this.Data.spec_id,
+                        attr_id: this.Data.attr_id,
+                        type: this.Data.type
+                    }).then((resPrice) => {
+                        if (resPrice.code === 0) {
+                            if(resPrice.data){
+                                this.goodsInfo.cost_price = resPrice.data.cost_price;
+                            }
+                            
+                        }
+                        if (this.goodsInfo.shipping_method != 2) this.prom_type = this.goodsInfo.shipping_method
+                            if(da.type==1)this.calculatePrice(1,this.Data.num);
+                            else{
+                                post("v1/goods/freight", { type: da.type, id: da.id }).then((resFreight) => {
+                                    if (resFreight.code === 0) this.freight = resFreight.data.freight;
+                                    this.calculatePrice(this.Data.type,this.Data.num);
+                                });
+                            }
+                    });
+                    
+                    
+                }
+            });
+        },
+        getPrice(){
+            post("v1/goods/getPrice", {
+                goods_id: this.Data.goods_id,
+                spec_id: this.Data.spec_id,
+                attr_id: this.Data.attr_id,
+                type: this.Data.type
+            }).then((res) => {
+                if (res.code === 0) {
+                    if(res.data){
+                        this.goodsInfo.cost_price = res.data.cost_price
                     }
                 }
             });
@@ -549,6 +594,20 @@ page {
     box-sizing: border-box;
 }
 
+.goods_spec{
+    font-size: 24rpx;
+    color: #868686;
+    text{
+        padding: 10rpx 20rpx;
+        border-radius: 10rpx;
+        margin-right: 12rpx;
+        background-color: #f5f5f5;
+        
+    }
+    &_text{
+        padding-right: 8rpx;
+    }
+}
 // 商品信息-end
 
 // 订单信息