TP 支付订单、购物车页面数据、购物车(九）

复用之前写的购物车代码https://www.php.cn/blog/detail/35077.html

    <div class="fui-content" style="height: 854px; background: #f3f3f3">
      <div class="content-empty" v-if="shop_show == 0">
        <img
          class="img"
          src="http://d.vsd.cc/addons/ewei_shopv2/static/images/nogoods.png"
        />
        <div class="title">您的购物车中没有商品哦！</div>
        <button style="width: 50%; margin-top: 1rem">去看看商品吧</button>
      </div>
      <div v-if="shop_show == 1" style="padding-bottom: 64px">
        <div
          class="fui-list goods-item align-start"
          v-for="(item, key) in data.cartinfo"
          :key="key"
        >
          <input
            type="checkbox"
            checked="item.ischecked"
            v-model="item.ischecked"
            @change="totalAmountAndNum"
          />
          <div class="fui-list-media">
            <!-- <input name="sid" type="checkbox" value="" /> -->
          </div>
          <div class="fui-list-media image-media">
            <img class="img" :src="item.info.img" />
          </div>
          <div class="fui-list-inner">
            <div class="subtitle">{{ item.info.title }}</div>
            <div class="price" style="margin-top: 30px">
              <span class="bigprice text-danger">
                <span>¥</span>
                <span>{{ item.info.price }}</span>
              </span>
              <input
                type="number"
                min="1"
                max="10"
                v-model="item.num"
                @change="totalAmountAndNum"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fui-footer">
      <div class="fui-footer-list">
        <div class="editmode" style="font-size: 0.7rem; color: #666">
          <input
            checked="data.allischecked"
            type="checkbox"
            v-model="data.allischecked"
            @change="selectAll"
          />
          全选
        </div>
        <div class="fui-footer-inner">
          <div class="footer-subtitle">
            合计:<span class="text-danger size0-75rem">
              ￥{{ data.totalprice }}</span
            >
          </div>
        </div>
        <div class="fui-list-angle">
          <button class="btn" @click="order()">
            结算({{ data.totalnum }})
          </button>
        </div>
      </div>
    </div>

处理函数

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const token = window.localStorage.getItem("accessToken");
    const data = reactive({
      cartinfo: [],
      totalprice: 0,
      totalnum: 0,
      allischecked: false,
    });
    const totalAmountAndNum = () => {
      let sumprice = 0;
      let sumnum = 0;
      let flag = 0;
      data.cartinfo.forEach((i) => {
        if (i.ischecked) {
          flag++;
          if(flag == data.cartinfo.length){
            data.allischecked = true;
          }
          sumprice += i["info"].price * i.num;
          sumnum += i.num;
        }else{
          data.allischecked = false;
        }
        data.totalprice = sumprice;
        data.totalnum = sumnum;
      });
    };
    const selectAll = () => {
      data.cartinfo.forEach((i) => {
        data.allischecked ? i.ischecked = true : i.ischecked = false;
      });
      totalAmountAndNum();
    };
    const order = ()=>{
      let suminfo = {
        'totalprice':data.totalprice,
        'totalnum':data.totalnum,
        'token':token,
      };
      //console.log(data.cartinfo);
      let submitcartinfo = data.cartinfo;
      console.log(submitcartinfo);
      createcartorder({submitcartinfo,suminfo}).then(res=>{
        // alert(res.data);
        if(res.data.data.code == 200 || res.data.data.code == 100 ){
        alert(res.data.data.msg);}else{
          console.log(res);
        }
        if(res.data.data.code == 200){
          router.push("/cart_order?appid=300&id="+res.data.data.id+"&price="+res.data.data.price);
        }
      });
    }
    userprebuy({ id: route.query.id, token: token }).then((res) => {
      data.cartinfo = res.data.data.cartinfo;
      console.log(data.cartinfo);
    });
    return {
      totalAmountAndNum,
      selectAll,
      order,
      shop_show: 1,
      data,
    };
  },
};

更多相关文章

随机推荐