<template>
<view class="safe-area-inset-bottom">
<nodata v-if="new_list.length===0" title="购物车没有数据"></nodata>
<view class="fdrow bg_white align_center u-p-l-30 u-p-r-30 u-p-t-40 u-m-t-30 u-p-b-40 borderRadius" v-for="(item,index) in new_list" :key="index">
<view class="u-m-r-10">
<radiocircle :isChoosed="item.isChoosed" @callBack="callBack($event,item)"></radiocircle>
</view>
<view class="fdrow flex" @tap.stop = "tolink('/pages/goods/detail?id='+item.id)">
<image :src="item.goods_pic" class="u-m-r-25 goods_pic" mode="aspectFill"></image>
<view class="list-column align_flex_start flex">
<text class="font-28 bold">{{item.goods_name}}</text>
<view class="fdrow align_center u-m-t-25">
<text class="font-26 cor_active u-m-r-5 bold">¥</text><text class="font-42 cor_active bold">{{item.goods_price}}</text>
</view>
<view class="fdrow spaceBetween flex-full-width u-m-t-25">
<text></text>
<step :nums="item.nums" @numsBack='numsBack($event,item)'></step>
</view>
</view>
</view>
</view>
<view class="fixedBtns" v-if="new_list.length">
<view class="fdrow spaceBetween u-m-b-20">
<view class="btn_class_txt fdrow align_center">
<radiocircle :isChoosed="isChoosed" @callBack="callBackAll($event)"></radiocircle><text class="font-28 u-m-l-15">全选</text><text class="font-25 u-m-l-25 cor_gray">合计：</text><view class="fdrow align_center"><text class="font-24 cor_active u-m-r-5">¥</text><text class="font-40 cor_active">{{total_price}}</text></view>
</view>
<view @tap="showModal()">
<normal-btn :isGreen="true" title="结算"></normal-btn>
</view>
</view>
<view class="safe-area-inset-bottom list-column"></view>
</view>
<modal :show="show" :closeIcon="true" @close="closeModal">
<view v-if="orderId==''">
<view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">
<text class="font-35 bold">收件人</text>
<input class="font-28 cor_gray flex text-right" type="text" placeholder="请填写收件人姓名" v-model="form.name">
</view>
<view class="list-column align_flex_start u-p-t-10 u-p-b-10">
<text class="font-35 bold">收货地址</text>
<view class="u-m-t-20">
<textarea auto-height :disable-default-padding="true" class="font-28 cor_gray textarea_hei" v-model="form.address" placeholder="请填写收货地址" />
</view>
</view>
<view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">
<text class="font-35 bold">联系方式</text>
<input class="font-28 cor_gray flex text-right" type="number" placeholder="请填写联系方式" v-model="form.mobile">
</view>
<view class="list-column u-m-t-30" @tap="submitOrder()">
<normal-btn :isGreen="true" title="立即下单" />
<!-- <button open-type="contact">
<normal-btn title="联系客服下单" />
</button> -->
</view>
</view>
<view v-else>
<view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">
<text class="font-35 bold">订单号</text>
<text class="font-28 cor_gray">{{orderId}}</text>
</view>
<view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">
<text class="font-35 bold">收件人</text>
<span class="font-28 cor_gray flex text-right">{{form.name}}</span>
</view>
<view class="list-column align_flex_start u-p-t-10 u-p-b-10">
<text class="font-35 bold">收货地址</text>
<view class="u-m-t-20">
<span class="font-28 cor_gray">{{form.address}}</span>
</view>
</view>
<view class="fdrow spaceBetween align_center u-p-t-10 u-p-b-10">
<text class="font-35 bold">联系方式</text>
<span class="font-28 cor_gray flex text-right">{{form.mobile}}</span>
</view>
<view class="fdrow spaceBetween u-p-l-60 u-p-r-60 u-m-t-30">
<button open-type="contact">
<normal-btn title="联系客服下单" />
</button>
<view @tap="tolink('/pages/orders/list')">
<normal-btn :isGreen="true" title="订单列表" />
</view>
</view>
</view>
</modal>
</view>
</template>
<script>
import step from '@/components/step.vue'
import normalBtn from '@/components/normalBtn.vue'
import modal from '@/components/modal.vue'
import nodata from '@/components/nodata.vue'
import radiocircle from '@/components/riadioBtn.vue'
import { reactive,getCurrentInstance,toRefs,onMounted,watch,computed } from 'vue'
import validator from '../../utils/validator.js'
export default{
setup(){
const data = reactive({
lists:[],
new_list:[],
choosed_arr:[],
choosed_val:[],
total_price:0,
isChoosed:false,
orderId:'',
show:false,
form:{
name:'',
address:'',
mobile:''
},
rule:[
{
name:{
value:'require',
name:'收货人'
},
address:{
value:'require',
name:'收货地址'
},
mobile:{
value:'require|mobile',
name:'手机号'
}
}
],
})
const {ctx,proxy} = getCurrentInstance()
onMounted(()=>{
//getCartList()
data.new_list = [
{
brandid: 3,
cart_id: 2,
certification: "",
cid: 4,
create_time: 1630310160,
goods_meterial: "18K金",
goods_name: "绿松石蝴蝶胸针",
goods_pic: "http://www.zddqac.com/storage/uploads/20210830/c4d1cccaee51b802d010c1e334350ba8.jpg",
goods_price: "面议",
goods_sliders: "",
goods_spec: "",
id: 55,
is_miao: 0,
lessstone: "钻石 红宝石",
mainstone: "绿松99.32ct",
nums: "5",
status: 1,
total_quality: "41.27g",
update_time: 1630310160
}
]
})
function submitOrder(){
validator.check(data.form,data.rule)
console.log('看到这里的时候就说明成功')
}
function closeModal(){
data.orderId = ''
data.show = false
}
function callBack(e,item){
item.isChoosed = e
if(data.choosed_arr.includes(item.id)){
data.choosed_val.splice(data.choosed_arr.indexOf(item.id),1)
data.choosed_arr.splice(data.choosed_arr.indexOf(item.id),1)
if(!isNaN(item.goods_price)){
data.total_price = data.total_price-parseFloat(item.goods_price)*parseInt(item.nums)
}
}else{
data.choosed_arr.push(item.id)
data.choosed_val.push({goods_id:item.id,nums:parseInt(item.nums)})
if(!isNaN(item.goods_price)){
data.total_price = data.total_price+parseFloat(item.goods_price)*parseInt(item.nums)
}
}
if(data.new_list.length===data.choosed_arr.length){
data.isChoosed = true
}else{
data.isChoosed = false
}
}
function callBackAll(e){
data.isChoosed = e
data.total_price = 0
data.choosed_arr = []
data.choosed_val = []
data.new_list.map(item=>{
if(e){
item.isChoosed = true
if(!isNaN(item.goods_price)){
data.total_price = data.total_price+parseFloat(item.goods_price)*parseInt(item.nums)
}
data.choosed_arr.push(item.id)
data.choosed_val.push({goods_id:item.id,nums:parseInt(item.nums)})
}else{
item.isChoosed = false
}
})
}
function showModal(){
if(data.choosed_arr.length){
data.show = true
}
}
function checkTotalPrice(){
data.total_price = 0
data.choosed_val = []
data.new_list.map(item=>{
if(data.choosed_arr.includes(item.id)){
data.choosed_val.push({goods_id:item.id,nums:parseInt(item.nums)})
if(!isNaN(item.goods_price)){
data.total_price = data.total_price+parseFloat(item.goods_price)*parseInt(item.nums)
}
}
})
}
function numsBack(e,item){
item.nums = e
checkTotalPrice()
}
return{...toRefs(data),numsBack,callBack,callBackAll,closeModal,showModal,submitOrder}
},
components:{step,radiocircle,normalBtn,modal,nodata}
}
</script>
<style lang="scss">
page{
background: $uni-bg-color-grey;
}
.goods_pic{
width: 221upx;
height: 219upx;
border-radius: 21upx;
}
</style>
为了避免加入购物车没有登录权限，可以建立一个页面，代码如上，在page.json中定义一下，运行即可调试，此页面的数据是写死的，要真机才会复现，是真机！！！
