1

xuxueyang

2024-08-29 4457d0740400cee9e66be7653097fd8cf6c05b7d

 sub_pages/customer/shopping/confirm.vue

@@ -1,409 +1,549 @@
<script>
import {
  mapState
} from 'vuex'
   import {
      mapState
   } from 'vuex'
   import environments from '@/environments'

export default {
  name: "订单详情",
  computed: {
    ...mapState({
      address: state => {
        return state.defaultaddress || {}
      },
    }),
   export default {
      name: "订单详情",
      computed: {
         ...mapState({
            address: state => {
               return state.defaultaddress || {}
            },
         }),

  },
  async onShow() {
      },
      async onShow() {

  },
  onLoad(options) {
    // console.log('dto',options)
      },
      onLoad(options) {
         // console.log('dto',options)

    // let item = JSON.parse(decodeURIComponent(options.query.dto));
    let item = JSON.parse(this.$storage.getItem('_cache_shopping_dto') || '{}') || {}
    this.dto = {
      ...this.dto,
      ...item
    }
    //先获取直接的全部地址
    // @ApiModelProperty(value = "订单商品")
    //   private List<FlowerCartListDTO> flowers;
    // @ApiModelProperty(value = "打包费")
    //   private BigDecimal packing;
         // let item = JSON.parse(decodeURIComponent(options.query.dto));
         let item = JSON.parse(this.$storage.getItem('_cache_shopping_dto') || '{}') || {}
         this.dto = {
            ...this.dto,
            ...item
         }
         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'SPEC_REQ'
            }
         }).then(res => {
            var data = res.data
            this.need_columns = [data || []]
            this.need_columns[0].unshift({
               label: '暂无',
               value: ''
            })
         })
         if (this.address.id) {
            this.loadTransportList()
            this.cacheAddressId = this.address.id
         }
         // 
         //先获取直接的全部地址
         // @ApiModelProperty(value = "订单商品")
         //   private List<FlowerCartListDTO> flowers;
         // @ApiModelProperty(value = "打包费")
         //   private BigDecimal packing;

  },
  data() {
    return {
      dto: {
        remarks: '',
        specialNeeds: '',
        transportId: '',
        addressId: '',
        flowers: [],
      },
      current_transport: {},
      cacheAddressId: '',
      transportList: [],
         // 两种情况,我合伙人是A,我进入页面前改成了B,我进去后还是获取了A——可以通过

         if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) {
            // 考虑一下，由后台实时获取，如果获取的合伙人id不一样，那么就刷新当前用户信息。

            this.$http.request('get', '/api/current/customer/partner', {
               params: {
                  // id: this.currentInfo.customerDTO.partnerId
               }
            }).then(async res => {
               if (res.code == 0) {
                  this.partnerInfo = res.data || {}
                  if (this.partnerInfo.id !== this.currentInfo.customerDTO.partnerId) {
                     //刷新用户信息
                     await this.$store.dispatch('getCurrentInfo')
                  }
               }
            })


    }
  },
  watch: {
    address(nv, ov) {
      if (nv && nv.id !== this.cacheAddressId) {
        this.loadTransportList()
        this.cacheAddressId = nv.id
         }

      }
    }
  },
  methods: {
    async loadTransportList() {
      let that = this
      {
        console.log('address', that.address, that.cacheAddressId)
        if (that.address && that.address.id && that.cacheAddressId !== that.address.id) {
          that.$message.showLoading()
          const {code, data} = await that.$http.request('post', '/api/customer/flower/order/confirm/transports', {
            data: {
              addressId: that.address.id,
              weight: that.dto.totalWeight || 0
            }
          })
          that.$message.hideLoading()
          that.transportList = []
          if (code === 0) {
            that.transportList = data || []
          }
        }
      }
    },
    async submitOrder() {
      console.log('submitOrder', this.dto)
      if (!this.dto.transportId) {
        this.$message.showToast('请选择配送方式')
        return
      }
      if (!this.address.id) {
        this.$message.showToast('请选择收货地址')
        return
      }
      this.dto.addressId = this.address.id
      },
      data() {
         return {
            dto: {
               remarks: '',
               specialNeeds: '',
               specialNeedsStr: '',
               transportId: '',
               addressId: '',
               flowers: [],
            },
            current_transport: {},
            cacheAddressId: '',
            transportList: [],
            show_select_need: false,
            need_columns: [
               []
            ],
            partnerInfo: {},

      let tmp = this
      wx.login({
        success: async res => {
          console.log(res)
          if (res.code) {
            tmp.$message.showLoading()
            const {code, data} = await tmp.$http.request('post', '/api/customer/flower/order/commit', {
              data: {
                ...tmp.dto,
                wxcode: res.code
              }
            })
            tmp.$message.hideLoading()
            if (code === 0) {
              //提交信息
              console.log('pay,', data)
              if (data && data['_testOrderId']) {
                //回调
                tmp.$message.showLoading()
                const res2 = await tmp.$http.request('get', '/api/customer/flower/order/callback/tmp', {
                  params: {
                    id: res2.data['_testOrderId']
                  }
                })
                tmp.$message.hideLoading()
              } else if (data) {
                wx.requestPayment({
                  ...data,
                  async success(res) {
                    console.log('pay success', res)
                    tmp.$message.showToast('支付成功')
                    //返回上一页
                    await tmp.$store.dispatch('sign_add', 'shopping')
                    uni.navigateBack()
                  },
                  fail(err) {
                    console.error('pay fail', err)
                    tmp.$message.showToast('支付失败')
                  }
                })
         }
      },
      watch: {
         address(nv, ov) {
            if (nv && nv.id !== this.cacheAddressId) {
               this.loadTransportList()
               this.cacheAddressId = nv.id

              }
            }
            } else if (!nv.id) {
               //说明id清空了
               if (!this.cacheAddressId) {
                  transportList = []
                  this.cacheAddressId = ''
               }
            }
         }
      },
      methods: {
         select_need(e) {
            this.show_select_need = false
            this.dto.specialNeedsStr = e.value[0].label
            this.dto.specialNeeds = e.value[0].value
         },
         async loadTransportList() {
            if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) {
               return
            }
            let that = this;
            // console.log('address', that.address, that.cacheAddressId)
            if (that.address && that.address.id && that.cacheAddressId !== that.address.id) {
               that.$message.showLoading()
               const {
                  code,
                  data
               } = await that.$http.request('post', '/api/customer/flower/order/confirm/transports', {
                  data: {
                     addressId: that.address.id,
                     weight: that.dto.totalWeight || 0
                  }
               })
               that.$message.hideLoading()
               that.transportList = []
               if (code === 0) {
                  that.transportList = data || []
               }
            }

          } else {
            tmp.$message.showToast('获取微信信息失败');
          }
        },
        error: res => {
          tmp.$message.showToast('获取微信信息失败:' + res);
        }
      });
         },
         async submitOrder() {
            console.log('submitOrder', this.dto)
            if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) {

            } else {
               if (!this.dto.transportId) {
                  this.$message.showToast('请选择配送方式')
                  return
               }
            }

            if (!this.address.id) {
               this.$message.showToast('请选择收货地址', {
                  duration: 2000
               })
               return
            }
            this.dto.addressId = this.address.id

            let tmp = this
            wx.login({
               success: async res => {
                  console.log(res)
                  if (res.code) {
                     tmp.$message.showLoading()
                     const {
                        code,
                        data
                     } = await tmp.$http.request('post', '/api/customer/flower/order/commit', {
                        data: {
                           ...tmp.dto,
                           wxcode: res.code
                        }
                     })
                     tmp.$message.hideLoading()
                     if (code === 0) {
                        //提交信息
                        console.log('pay,', data)
                        // /api/pub/init/callback?orderId=
                        // if(env.pro)
                        if (false && data && (data['_testV2OrderId'] || data['_testOrderId']) &&
                           environments.httpBaseUri.startsWith(
                              'http://47.99.58.211/flower')) {
                           //回调
                           tmp.$message.showLoading()
                           const res2 = await tmp.$http.request('get',
                              '/api/pub/init/callback', {
                                 params: {
                                    orderId: data['_testV2OrderId'] || data[
                                       '_testOrderId'] || ''
                                 }
                              })
                           tmp.$message.hideLoading()
                           tmp.$message.showToast('支付成功')
                           //返回上一页
                           await tmp.$store.dispatch('sign_add', 'shopping')
                           uni.navigateBack()
                        } else if (data) {
                           wx.requestPayment({
                              ...data,
                              async success(res) {
                                 console.log('pay success', res)
                                 // tmp.$message.showToast('支付成功')
                                 //返回上一页
                                 await tmp.$store.dispatch('sign_add', 'shopping')
                                 // setTimeout(() => {
                                 // uni.navigateBack()
                                 // }, 500)
                                 await tmp.$message.showToast('支付成功')
                                 uni.navigateBack()


    }
  }
}
                              },
                              async fail(err) {
                                 console.error('pay fail', err)
                                 tmp.$message.showToast('支付失败')
                                 // await tmp.$store.dispatch('sign_add', 'shopping')
                                 // uni.navigateBack()
                              }
                           })

                        }
                     }

                  } else {
                     tmp.$message.showToast('获取微信信息失败');
                  }
               },
               error: res => {
                  tmp.$message.showToast('获取微信信息失败:' + res);
               }
            });


         }
      }
   }
</script>

<template>
  <view class="page-confirm">
    <view class="p10 bg-white br-4">
      <common-address-select ref="addressselect"></common-address-select>
    </view>
    <view>
      <view class="flower-container m-t-12 br-4 p10">
        <view class="shopping-item m-b-20" v-for="(item,index) of dto.flowers" :key="index">
          <u-divider v-if="index>0"></u-divider>
          <view class="sup-title flex">
            <image class="icon-dp img100 m-r-10" src="/static/common/icon-dp.png"></image>
            <view>{{ item.supplierName || '-' }}</view>
          </view>
          <view class="item-each m-t-12 flex">
            <image class="img img100 m-r-6" :src="item.url||item.cover"></image>
            <view>
              <view class="title"><span>{{ item.levelStr || '-' }}</span>&nbsp;&nbsp;{{ item.name || '-' }}</view>
              <view class="price">
                {{ item.price || 0 }}*{{ item.num }}扎
              </view>
              <view class="desc m-t-12">
                <view class="m-r-15">每扎重量:{{ item.weight || 0 }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="price">
          <view class="m-l-a m-r-0 text-right">
            共{{ dto.flowers.length }}件，小计<span class="t-red">￥{{ dto.totalAmount || 0 }}</span>
          </view>
        </view>
      </view>
      <!--    查看商品列表，和选择运费 -->
      <view class="br-4 transform-container m-t-12 p10">
        <view class="title">
          <view>运输方式：</view>
          <view class="flex transform-list">
            <view v-for="(transform,index) of transportList" :class="[transform.id===dto.transportId?'cur':'']"
                  :key="index" class="transform-item" @click="()=>{
   <view class="page-confirm">
      <view class="p10 bg-white br-4">
         <common-address-select ref="addressselect"></common-address-select>
      </view>
      <view>
         <view class="flower-container m-t-12 br-4 p10">
            <view class="shopping-item " v-for="(item,index) of dto.flowers" :key="index">
               <!-- <view class="line-gray" v-if></view> -->
               <view class="sup-title flex">
                  <image class="icon-dp img100 m-r-10" src="/static/common/icon-dp.png"></image>
                  <view>{{ item.supplierName || '-' }}</view>
               </view>
               <view class="item-each m-t-12 flex">
                  <image class="img img100 m-r-6" :src="item.url||item.cover"></image>
                  <view>
                     <view class="title"><span class="m-r-5"
                           style="display: inline-block;">{{item.categoryStr||''}}</span><span
                           v-if="item.levelStr" class="m-r-5"
                           style="display: inline-block;">{{ item.levelStr || '' }}</span>{{ item.name || '-' }}
                     </view>
                     <view class="price">
                        {{ item.price || 0 }}*{{ item.num }}扎
                     </view>
                     <view class="desc m-t-12">
                        <view class="m-r-15">每扎重量:{{ item.weight || 0 }}</view>
                     </view>
                  </view>
               </view>
            </view>
            <view class="price">
               <view class="m-l-a m-r-0 text-right">
                  共{{ dto.flowers.length }}件，小计<span class="t-red">￥{{ dto.totalAmount || 0 }}</span>
               </view>
            </view>
         </view>
         <view class="p10 bg-white m-t-20 br-4" v-if="partnerInfo&&partnerInfo.id">
            <view class="form-item  flex ">
               <view class="label">仓位名称</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  <view>{{partnerInfo.cityWarehouse|| '-'}}</view>
               </view>
            </view>
            <view class="form-item  flex ">
               <view class="label">合伙人名称</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  <view>{{partnerInfo.name|| '-'}}</view>
               </view>
            </view>
            <view class="form-item  flex ">
               <view class="label">联系方式</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  <view>{{partnerInfo.contactTel|| '-'}}</view>
               </view>
            </view>
            <view class="form-item  flex ">
               <view class="label">提货地址</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  {{ partnerInfo['province'] || '' }}{{ partnerInfo['city'] && ('/' + partnerInfo['city']) || '' }}{{
                    partnerInfo['region'] && ('/' + partnerInfo['region']) || ''
                  }}{{partnerInfo.address|| '-'}}
               </view>
            </view>
         </view>

         <!--    查看商品列表，和选择运费 -->
         <view class="br-4 transform-container m-t-12 p10"
            v-if="!currentInfo.customerDTO||!currentInfo.customerDTO.partnerId">
            <view class="title">
               <view>运输方式：</view>
               <view class="flex transform-list flex-wrap-normal">
                  <view v-for="(transform,index) of transportList"
                     :class="[transform.id===dto.transportId?'cur':'']" :key="index" class="transform-item"
                     @click="()=>{
                    dto.transportId = transform.id;
                    current_transport = transform
                  }">
              <view class="title">{{ transform.name }}</view>
              <view class="price">￥{{ transform.fee }}</view>
            </view>
          </view>
        </view>
        <view class="m-t-20" v-if="false">
          <view class="desc-red">
            10kg以下的零买订单将收取打包费，花店建议购满20kg， 可选冷链物流
          </view>
          <view class="desc">
            预计装1Mini件，运费约18.00元(5公斤内18元，不满5公斤按5公斤计费，每件货不能超过5公斤)，第一汤下单预计次日凌晨发货，备货高峰期除外，冷链汽车运输，发货后72小时左右到货，三线城市会推迟6-12小时，顺丰送货到店。
            优势:价格便宜，顺丰配送
            弊端:订单必须是5kg以内
          </view>
        </view>
      </view>
                     <view class="title">{{ transform.name }}</view>
                     <view class="price">￥{{ transform.fee }}</view>
                  </view>
               </view>
            </view>
            <view class="m-t-20" v-if="true">
               <view class="desc-red">
                  10kg以下的零买订单将收取打包费，花店建议购满20kg， 可选冷链物流
               </view>
               <view class="desc">
                  <!-- 预计装1Mini件，运费约18.00元(5公斤内18元，不满5公斤按5公斤计费，每件货不能超过5公斤)， -->
                  第一次下单预计次日凌晨发货，备货高峰期除外，冷链汽车运输，发货后72小时左右到货，三线城市会推迟6-12小时送货到店。
                  <!-- 优势:价格便宜，顺丰配送 -->
                  <!-- 弊端:订单必须是5kg以内 -->
               </view>
            </view>
         </view>

      <view class="p10 bg-white m-t-20 br-4">
        <view class="form-item  ">
          <view class="label">特殊需求</view>
          <view class="m-l-a m-r-0 flex1">
            <view class="m-t-12 m-b-12">
              <u-textarea v-model="dto.specialNeeds" placeholder="请输入特殊需求">
         <view class="p10 bg-white m-t-20 br-4">
            <view class="form-item  flex ">
               <view class="label">特殊需求</view>

              </u-textarea>
            </view>
          </view>
        </view>
        <view class="form-item  m-t-12 ">
          <view class="label">留言</view>
          <view class="m-l-a m-r-0 flex1">
            <view class="m-t-12 m-b-12">
              <u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认">
               <view class="m-l-a m-r-0 flex " :class="[!dto.specialNeeds?'desc-gray':'']" @click="()=>{
                  show_select_need=true
               }">
                  <view>{{dto.specialNeedsStr||dto.specialNeeds || '请选择'}}</view>
                  <u-icon class="m-l-a" name="arrow-right"></u-icon>
               </view>
            </view>
            <view class="form-item  m-t-12 ">
               <view class="label">留言</view>
               <view class="m-l-a m-r-0 flex1">
                  <view class="m-t-12 m-b-12">
                     <u-textarea v-model="dto.remarks" clearable placeholder="填写内容需与卖家协商并确认">

              </u-textarea>
            </view>
          </view>
        </view>
      </view>
                     </u-textarea>
                  </view>
               </view>
            </view>
         </view>

    </view>
    <view class="m-t-20 br-4 info-container p10 bg-white">
      <view class="desc flex">
        <view>商品金额:</view>
        <view class="m-l-a m-r-0 text-right">
          {{ (dto.totalAmount || 0) - (dto.packing) || 0 }}
        </view>
      </view>
      <view class="desc flex">
        <view>打包费:</view>
        <view class="m-l-a m-r-0 text-right">
          {{ (dto.packing || 0) }}
        </view>
      </view>
      <view class="desc flex">
        <view>运费:</view>
        <view class="m-l-a m-r-0 text-right">
          {{ (current_transport.fee || 0) }}
        </view>
      </view>
    </view>
      </view>
      <view class="m-t-20 br-4 info-container p10 bg-white">
         <view class="desc flex">
            <view>商品金额:</view>
            <view class="m-l-a m-r-0 text-right">
               {{ (dto.totalAmount || 0)  || 0 }}
            </view>
         </view>
         <view class="desc flex">
            <view>打包费:</view>
            <view class="m-l-a m-r-0 text-right">
               {{ (dto.packing || 0) }}
            </view>
         </view>
         <view class="desc flex">
            <view>运费:</view>
            <view class="m-l-a m-r-0 text-right">
               {{ (current_transport.fee || 0) }}
            </view>
         </view>
      </view>

    <view style="min-height:200rpx">
    </view>
    <view class="bottom-price flex">
      <view class="m-t-12 m-l-0 m-r-a">
        合计:<span class="t-red">￥ {{ (dto.totalAmount || 0) + (current_transport.fee || 0) || 0 }} </span>元
      </view>
      <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitOrder">
        提交订单
      </view>
    </view>
  </view>

      <view style="min-height:200rpx">
      </view>
      <view class="bottom-price flex">
         <view class="m-t-12 m-l-0 m-r-a">
            合计 <span class="t-red">￥
               {{ (dto.totalAmount || 0) + (dto.packing || 0) + (current_transport.fee || 0) || 0 }} </span>元
         </view>
         <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitOrder">
            提交订单
         </view>
      </view>

      <u-picker :show="show_select_need" @confirm="select_need" keyName="label" :columns="need_columns"
         @cancel="show_select_need=false"></u-picker>
   </view>
</template>

<style scoped lang="scss">
.page-confirm {
  padding: 20rpx 30rpx;
   .page-confirm {
      padding: 20rpx 30rpx;

  .bottom-price {
    position: fixed;
    background-color: #ffffff;
    left: 0rpx;
    padding: 20rpx;
    right: 0rpx;
    bottom: 0rpx;
  }
      .bottom-price {
         position: fixed;
         background-color: #ffffff;
         left: 0rpx;
         padding: 20rpx;
         z-index: 99;
         z-index: 11;
         right: 0rpx;
         bottom: 0rpx;
      }

  .flower-container {
    background-color: #ffffff;
      .flower-container {
         background-color: #ffffff;

    .shopping-item {
      padding: 28rpx 22rpx;
      position: relative;
         .shopping-item {
            padding: 10rpx 22rpx;
            position: relative;

      .sup-title {
        border-bottom: 2rpx solid #EEEEEE;
        line-height: 50rpx;
            .sup-title {
               border-bottom: 2rpx solid #EEEEEE;
               line-height: 50rpx;

        .icon-dp {
          width: 36rpx;
          height: 36rpx;
          margin-top: 7rpx;
        }
      }
               .icon-dp {
                  width: 36rpx;
                  height: 36rpx;
                  margin-top: 7rpx;
               }
            }

      .item-each {
        padding-left: 20rpx;
            .item-each {
               padding-left: 20rpx;

        .img {
          width: 124rpx;
          height: 124rpx;
        }
               .img {
                  width: 124rpx;
                  height: 124rpx;
               }

        .title {
          font-weight: 600;
          font-size: 28rpx;
               .title {
                  font-weight: 600;
                  font-size: 28rpx;

          color: #000000;
          line-height: 40rpx;
                  color: #000000;
                  line-height: 40rpx;

          .level {
            color: #20613D;
          }
        }
                  .level {
                     color: #20613D;
                  }
               }

        .price {
          font-weight: 400;
          font-size: 28rpx;
          color: #CF0000;
          line-height: 40rpx;
        }
               .price {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #CF0000;
                  line-height: 40rpx;
               }

        .desc {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 34rpx;
               .desc {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
                  line-height: 34rpx;

        }
      }
               }
            }

      .button-icons {
        position: absolute;
        line-height: 40rpx;
            .button-icons {
               position: absolute;
               line-height: 40rpx;

      }
    }
            }
         }

  }
      }

  .info-container {
    .desc {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
      .info-container {
         .desc {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;

      .value {
        text-align: right;
      }
    }
  }
            .value {
               text-align: right;
            }
         }
      }

  .transform-container {
    background-color: #ffffff;
      .transform-container {
         background-color: #ffffff;

    .transform-list {
      .transform-item {
        background: rgba(225, 240, 231, 0.38);
        border-radius: 8rpx;
        //min-height: 112rpx;
        border: 2rpx solid rgba(225, 240, 231, 0.38);
        padding: 14rpx;
        text-align: center;
        //margin: 0 auto;
        margin-left: 20rpx;
        margin-top: 10rpx;
        margin-right: auto;
        max-width: 32%;
        min-width: 120rpx;
         .transform-list {
            overflow-x: scroll;

        .title {
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 40rpx;
        }
            .transform-item {
               background: rgba(225, 240, 231, 0.38);
               border-radius: 8rpx;
               //min-height: 112rpx;
               border: 2rpx solid rgba(225, 240, 231, 0.38);
               padding: 10rpx;
               text-align: center;
               //margin: 0 auto;
               margin-left: 10rpx;
               margin-top: 10rpx;
               margin-right: auto;
               max-width: 32%;
               width: 130rpx;
               min-width: 130rpx;

        .price {
          font-weight: 600;
          font-size: 32rpx;
          color: #20613D;
          //line-height: 44rpx;
        }
      }
               .title {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #000000;
                  line-height: 40rpx;
                  word-break: break-word;
                  min-height: 90rpx
               }

      .transform-item.cur {
        background: #E1F0E7;
        border-radius: 8rpx;
        border: 2rpx solid #20613D;
      }
    }
               .price {
                  font-weight: 600;
                  font-size: 30rpx;
                  color: #20613D;
                  //line-height: 44rpx;
               }
            }

    .transform-list:nth-child(3n+0) {
      margin-left: 0
    }
            .transform-item.cur {
               background: #E1F0E7;
               border-radius: 8rpx;
               border: 2rpx solid #20613D;
            }
         }

    .transform-list:nth-child(3n+2) {
      margin-right: 0;
    }
         .transform-list:nth-child(3n+0) {
            margin-left: 0
         }

  }
         .transform-list:nth-child(3n+2) {
            margin-right: 0;
         }

}
         .desc-red {}

         .desc {}
      }

   }
</style>