first commit
This commit is contained in:
编码猿
1
金壶/appV1/pages/shoppingCart/.pydio
Normal file
1
金壶/appV1/pages/shoppingCart/.pydio
Normal file
@@ -0,0 +1 @@
|
||||
fef9a6cd-ae64-4efa-b0e3-640d68686f59
|
||||
667
金壶/appV1/pages/shoppingCart/goodsDetail.vue
Normal file
667
金壶/appV1/pages/shoppingCart/goodsDetail.vue
Normal file
@@ -0,0 +1,667 @@
|
||||
<template>
|
||||
<!-- 商品详情页 -->
|
||||
<view class="content">
|
||||
<HeaderTop page_title=''></HeaderTop>
|
||||
<view class="detail bg_F2F2F2">
|
||||
<view class="x-bg-white margin-bottom22">
|
||||
<view class="banner" :style="{backgroundImage: 'url(' + img_url + ')', backgroundSize:'contain',backgroundPosition:'center'}">
|
||||
|
||||
</view>
|
||||
<!-- <view class="banner">
|
||||
<image :src="img_url" mode="" class="banner_img" @error="imgError"></image>
|
||||
</view> -->
|
||||
<view class="padding-30">
|
||||
<view class="collection d-flex j-sb">
|
||||
<view class="font-weight font_28 d-flex a-center">
|
||||
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;margin-right: 30upx;" v-if='list.is_limit==1'></image>
|
||||
<image src="../../static/shoppingCart/re.png" mode="" style="height:30upx; width:30upx;margin-right:30upx;" v-if='list.supplier_id<=10000'></image>
|
||||
<view>{{list.goods_name}}</view>
|
||||
</view>
|
||||
<!-- list.is_collect==1已收藏 list.is_collect==0已收藏 -->
|
||||
<image src="../../static/shoppingCart/coll1.png" alt="" class='collection_img' v-if='list.is_collect==1' @click='to_change(2)'></image>
|
||||
<image src="../../static/shoppingCart/coll2.png" alt="" class='collection_img' v-if='list.is_collect==0' @click='to_change(1)'></image>
|
||||
<!-- <img src="../../static/shoppingCart/coll1.png" alt="" class='collection_img' v-if='list.is_collect==1' @click='to_change(2)'>
|
||||
<img src="../../static/shoppingCart/coll2.png" alt="" class='collection_img' v-if='list.is_collect==0' @click='to_change(1)'> -->
|
||||
</view>
|
||||
<view class="textOVerFlow" style="width:100%;">{{list.manufacturer_name}}</view>
|
||||
<view class="d-flex a-center">
|
||||
{{list.spec_desc}}
|
||||
<image src="../../static/shoppingCart/zheng.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 1'></image>
|
||||
<image src="../../static/shoppingCart/ling.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 0'></image>
|
||||
<view class="d-flex a-center">{{list.retail_flag==0?list.retail_num:list.entirety_num}}{{list.unit}}/件</view>
|
||||
</view>
|
||||
<view class="goods_info d-flex j-sb">
|
||||
|
||||
<view class="x-text-159 font-weight font_28">￥{{list.price}}</view>
|
||||
<!-- <view class="x_text_hui">库存{{list.stock_num}}盒</view> -->
|
||||
</view>
|
||||
<view class="goods_txt">
|
||||
<!-- <text class="x-text-white bg-EDCA4A time">有效期:{{list.term_validity}}年</text> -->
|
||||
<!-- <text class="txt_info">
|
||||
{{list.sketch}}<text class="x-text-159">说明书 ></text>
|
||||
</text> -->
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<!-- <view class="w-50">销售类型：{{list.retail_flag==0?'零售':'整售'}}（{{list.retail_flag==0?list.retail_num:list.entirety_num}}）</view> -->
|
||||
<!-- <view class="w-50">
|
||||
建议零售价：<text class="x-text-159">¥{{list.show_price}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white margin-bottom22 padding-30">
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%">商品名称</view>
|
||||
<view>{{list.goods_name}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%">生产厂家</view>
|
||||
<view>{{list.manufacturer_name}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%">规格</view>
|
||||
<view>{{list.spec_desc}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%">有效期</view>
|
||||
<view>{{list.term_validity}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%">批准文号</view>
|
||||
<view>{{list.country_code}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white margin-bottom22 padding-30">
|
||||
<view class="font-weight">注意事项</view>
|
||||
<view class="">
|
||||
<view class="x_text_hui zhuyi_title">
|
||||
1.根据国家规定，药品类商品一般情况下无质量问题不支持退货；
|
||||
</view>
|
||||
<view class="x_text_hui zhuyi_title">
|
||||
2.客户在收取商品时，应当面确认商品有无破损，若发生破损，应及时联系客服；确认收货后，概不支持退换货。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_menu shadow d-flex a-center">
|
||||
<view class="the_car" @click="to_shoppingCar()">
|
||||
<image src="../../static/tabbar/car2.png" mode="" class="car_img"></image>
|
||||
<view class="car_GoodsNum" v-if='$utils.getLocalStorage("GoodNums")>0'>{{$utils.getLocalStorage("GoodNums")}}</view>
|
||||
</view>
|
||||
<view class="add_shopping_car sameBtn x-text-white text-center" @click="addCar()">加入购物车</view>
|
||||
<view class="buy sameBtn x-text-white text-center" @click="lijiBuy()">立即购买</view>
|
||||
</view>
|
||||
<!-- 购物车遮挡层 -->
|
||||
<view class="car_pop h-100 w-100" v-if="is_pop_show==true" @tap='cancel_popCar()'>
|
||||
<view class="pop_box bg-white w-100" @tap.stop='stop_click()'>
|
||||
<view class="pop_goods_info d-flex a-center padding-zy64">
|
||||
<image src="../../static/shoppingCart/cancel.png" mode="" @click="cancel_popCar()" class="cancel_pop"></image>
|
||||
<view class="pop_box_img d-flex a-center j-center w-100">
|
||||
<image v-if='list' :src="'https://'+list.pc_thumb" mode="" class="pop_img" style="width:30%"></image>
|
||||
<view class="flex-1 h-100" style="width:50%;">
|
||||
<view class="d-flex a-center">
|
||||
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;margin-right: 30upx;" v-if='list.is_limit==1'></image>
|
||||
<view class="font_28 some_txt font-weight textOVerFlow" style="width:65%;">{{list.goods_name}}</view>
|
||||
</view>
|
||||
<view class="x-text-159" v-if='list.is_limit==1'>{{list.limit_info}}</view>
|
||||
<view class="textOVerFlow" style="width:100%;">{{list.manufacturer_name}}</view>
|
||||
<view class="d-flex a-center">
|
||||
{{list.spec_desc}}
|
||||
<image src="../../static/shoppingCart/zheng.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 1'></image>
|
||||
<image src="../../static/shoppingCart/ling.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 0'></image>
|
||||
|
||||
</view>
|
||||
<view class="d-flex a-center j-sb">
|
||||
<view>{{list.retail_flag==0?list.retail_num:list.entirety_num}}{{list.unit}}/件</view>
|
||||
<view class="x-text-159 font-weight font_28">￥ {{list.price}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
<view>选择购买数量</view>
|
||||
<view class="d-flex j-sb a-center">
|
||||
<view class="x-text-159 x-text-font24">小提示：该物品购买数量必须为包装的倍数</view>
|
||||
<view class="goods_count d-flex">
|
||||
<view class="bianji_cars_num bianji_cars_numJian" @click="reduse_goodsNum()">-</view>
|
||||
<input type="number" value="" class="bianji_cars_num bianji_cars_numAdd" v-model="goods_num" @blur="outComputeNum(goods_num)"
|
||||
@focus="inComputeNum()" />
|
||||
<!-- <view class="bianji_cars_num bianji_cars_numAdd">{{goods_num}}</view> -->
|
||||
<view class="bianji_cars_num bianji_cars_numAdd" @click="add_goodsNum()">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="x-bg-159 x_public_box pop_sure x-text-white w-90" @click="sure_btn1()">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapGetters } from 'vuex'
|
||||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||||
import X_goods from '../../utils/models/goods.js'
|
||||
import auth from '../../utils/models/auth.js'
|
||||
import {
|
||||
Config
|
||||
} from '../../utils/config.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
the_index:'', //从首页带进来的下标
|
||||
goods_num: 0, // 商品的当前数量
|
||||
goods_num_copy: 0, // 商品的当前数量copy
|
||||
Stock: 100, //当前商品的总库存
|
||||
sales_type: 10, //销售类型
|
||||
is_collection: 2, //判断是否收藏商品 是:1 ; 否:2
|
||||
is_pop_show: false, // 判断购物车遮挡层的状态 显示:true ; 隐藏:false
|
||||
Which_one: '', //判断用户点击了哪一个按钮 1：加入购物车； 2：立即购买
|
||||
car_GoodsNum: 0, //购物车的商品数量
|
||||
list: '',
|
||||
uc_id: '',
|
||||
sku_id: '', // 传过来的参数
|
||||
is_buy: '',
|
||||
the_Authentication: '', // 判断是否登录
|
||||
is_next: true,
|
||||
img_url: '',
|
||||
}
|
||||
},
|
||||
comments: {
|
||||
HeaderTop
|
||||
},
|
||||
onShow() {
|
||||
this.goodsDetail();
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'GetShopCarNums'
|
||||
])
|
||||
},
|
||||
onLoad(option) {
|
||||
this.sku_id = option.sku_id
|
||||
if (option.the_index) {
|
||||
this.the_index = option.the_index
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 监听data里面 Which_one值的变化
|
||||
this.$watch("Which_one", function(newValue, oldValue) {
|
||||
if (this.Which_one == 1) {
|
||||
this.goods_num = 0
|
||||
}
|
||||
if (this.Which_one == 2) {
|
||||
this.goods_num = this.goods_num_copy
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'SetShopCarNums',
|
||||
]),
|
||||
imgError() {
|
||||
this.img_url = 'https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg';
|
||||
},
|
||||
inComputeNum() {
|
||||
this.is_next = false
|
||||
},
|
||||
outComputeNum(goods_num) {
|
||||
if (this.list.retail_flag == 0) { //零售
|
||||
let num = Math.ceil(goods_num / this.list.retail_num)
|
||||
if (num > 0) {
|
||||
this.goods_num = num * this.list.retail_num
|
||||
if (this.list.stock_num < this.goods_num) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
this.goods_num = this.list.stock_num;
|
||||
}
|
||||
}
|
||||
} else { // 整售
|
||||
let num = Math.ceil(goods_num / this.list.entirety_num)
|
||||
if (num > 0) {
|
||||
this.goods_num = num * this.list.entirety_num
|
||||
if (this.list.stock_num < this.goods_num) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
this.goods_num = this.list.stock_num;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.is_next = true
|
||||
},
|
||||
// 阻止时间冒泡 不要删除
|
||||
stop_click() {
|
||||
|
||||
},
|
||||
// 去购物车页面
|
||||
to_shoppingCar() {
|
||||
uni.switchTab({
|
||||
url: 'shoppingCart?goods_num=' + this.goods_num
|
||||
})
|
||||
},
|
||||
// 商品详情
|
||||
async goodsDetail() {
|
||||
this.list = []
|
||||
uni.getStorage({
|
||||
key: 'isAuthentication',
|
||||
success: function(res) {
|
||||
this.the_Authentication = res.data
|
||||
|
||||
},
|
||||
});
|
||||
let res = await X_goods.x_goodsDetail(this.sku_id)
|
||||
this.handleError(res, res => {
|
||||
this.list = res.data.data;
|
||||
this.img_url = 'https://' + this.list.pc_thumb
|
||||
this.goods_num = this.list.num_in_cart
|
||||
this.goods_num_copy = this.list.num_in_cart
|
||||
})
|
||||
},
|
||||
//减 商品的数量
|
||||
reduse_goodsNum() {
|
||||
if (this.list.retail_flag == 0) { //零售
|
||||
this.goods_num = this.goods_num - this.list.retail_num
|
||||
} else { // 整售
|
||||
this.goods_num = this.goods_num - this.list.entirety_num
|
||||
}
|
||||
|
||||
if (this.goods_num <= 0) {
|
||||
this.goods_num = 0
|
||||
uni.showToast({
|
||||
title: '商品数量不得为负',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
// 增加 商品的数量
|
||||
async add_goodsNum() {
|
||||
if (this.goods_num == this.list.stock_num) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
if (this.list.retail_flag == 0) { //零售
|
||||
this.goods_num = Number(this.goods_num) + Number(this.list.retail_num)
|
||||
} else { // 整售
|
||||
this.goods_num = Number(this.goods_num) + Number(this.list.entirety_num)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 关闭按钮
|
||||
cancel_popCar() {
|
||||
this.is_pop_show = false;
|
||||
|
||||
},
|
||||
//加入购物车
|
||||
addCar() {
|
||||
this.Which_one = 1;
|
||||
this.is_pop_show = !this.is_pop_show
|
||||
},
|
||||
// 立即购买
|
||||
lijiBuy() {
|
||||
this.is_buy = 'buy'
|
||||
this.Which_one = 2;
|
||||
this.is_pop_show = !this.is_pop_show
|
||||
},
|
||||
//checkAuth 检测用户是否完成认证
|
||||
async is_checkAuth() {
|
||||
let res = await auth.checkAuth()
|
||||
this.the_checkAuth = res.data
|
||||
if (res.data != 'finish') {
|
||||
if (res.data == 'auditing') {
|
||||
uni.showToast({
|
||||
title: '您的企业认证正在审核中！',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先完成认证',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '../auth/baisc'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (this.Which_one == 2) {
|
||||
uni.navigateTo({
|
||||
url: './sureOrder?goods_id=' + this.uc_id
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
this.handleError(res, res => {
|
||||
|
||||
})
|
||||
},
|
||||
async liji_buy() {
|
||||
if (!this.is_next) {
|
||||
return
|
||||
}
|
||||
this.is_buy = 'buy'
|
||||
let res = await X_goods.X_addCar(this.list.price_id, this.list.batch_id, this.goods_num, this.is_buy)
|
||||
this.handleError(res, res => {
|
||||
this.uc_id = res.data.uc_id;
|
||||
this.is_checkAuth()
|
||||
})
|
||||
},
|
||||
async addTheCar() {
|
||||
if(!this.is_next){
|
||||
return
|
||||
}
|
||||
// this.is_buy = ''
|
||||
|
||||
let res = await X_goods.X_addCar(this.list.price_id, this.list.batch_id, this.goods_num, this.is_buy)
|
||||
if (res.code == 200 && res.data.errcode == 200 && this.is_buy != 'buy') {
|
||||
uni.showToast({
|
||||
title: '添加成功',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
if (res.data.errcode == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.errmsg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
this.is_pop_show = !this.is_pop_show
|
||||
return
|
||||
}
|
||||
|
||||
// 添加商品 计数
|
||||
this.SetShopCarNums();
|
||||
|
||||
this.uc_id = res.data.uc_id;
|
||||
this.is_pop_show = !this.is_pop_show
|
||||
if (this.Which_one == 2) {
|
||||
this.$store.commit('goodid',this.uc_id)
|
||||
this.is_checkAuth()
|
||||
}
|
||||
this.handleError(res, res => {
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
// 弹框点击事件
|
||||
sure_btn1() {
|
||||
if (this.goods_num <= 0) {
|
||||
uni.showToast({
|
||||
title: '请添加商品数量',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (this.Which_one == 1) {
|
||||
this.is_buy = ''
|
||||
} else if (this.Which_one == 2) {
|
||||
this.is_buy = 'buy'
|
||||
}
|
||||
if (this.list.retail_flag == 0) { //零售
|
||||
|
||||
if (this.goods_num % this.list.retail_num !== 0) {
|
||||
uni.showToast({
|
||||
title: '该物品购买数量必须为包装的倍数',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
this.addTheCar()
|
||||
}
|
||||
} else {
|
||||
if (this.goods_num % this.list.entirety_num !== 0) {
|
||||
uni.showToast({
|
||||
title: '该物品购买数量必须为包装的倍数',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
this.addTheCar()
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 改变收藏状态
|
||||
async to_change(num) {
|
||||
const value = uni.getStorageSync('isAuthentication');
|
||||
if (value) {
|
||||
let res = await X_goods.X_addCollect_app(this.list.goods_id, num)
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
if (this.list.is_collect == 1) {
|
||||
this.list.is_collect = 0
|
||||
} else {
|
||||
this.list.is_collect = 1
|
||||
}
|
||||
}
|
||||
this.handleError(res, res => {
|
||||
if (res.data.errmsg) {
|
||||
uni.showToast({
|
||||
title: res.data.errmsg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请先登录',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
// 是否收藏
|
||||
if_collection() {
|
||||
if (this.list.is_collect == 1) {
|
||||
this.list.is_collect = 0
|
||||
} else {
|
||||
this.list.is_collect = 1
|
||||
}
|
||||
},
|
||||
// 改变收藏状态
|
||||
async change_collection() {
|
||||
this.to_change();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
.detail {
|
||||
height: calc(100% - 229.5upx);
|
||||
overflow-y: auto;
|
||||
|
||||
.banner {
|
||||
height: 350upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
// background-size: cover;
|
||||
.banner_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// height: 217upx;
|
||||
// max-height: 250upx;
|
||||
// width: 305upx;
|
||||
// max-width: 315upx;
|
||||
}
|
||||
}
|
||||
|
||||
.collection {
|
||||
.collection_img {
|
||||
height: 36upx;
|
||||
width: 36upx;
|
||||
margin-right:30upx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods_txt {
|
||||
.txt_info {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
padding: 0 15upx;
|
||||
border-radius: 10upx;
|
||||
margin: 0 15upx;
|
||||
}
|
||||
|
||||
.zhuyi_title {
|
||||
margin: 20upx 0 20upx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_menu {
|
||||
height: 81.5upx;
|
||||
overflow: hidden;
|
||||
|
||||
.car_img {
|
||||
height: 41upx;
|
||||
width: 46upx;
|
||||
}
|
||||
|
||||
.car_txt {
|
||||
font-size: 20upx;
|
||||
color: #989898;
|
||||
line-height: 22upx;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.car_GoodsNum {
|
||||
background-color: #EB5159;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: -16upx;
|
||||
left: 108upx;
|
||||
height: 40upx;
|
||||
width: 40upx;
|
||||
line-height: 40upx;
|
||||
font-size: 20upx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sameBtn {
|
||||
line-height: 81.5upx;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.the_car {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add_shopping_car {
|
||||
background-color: #EDCA4A;
|
||||
}
|
||||
|
||||
.buy {
|
||||
background-color: #EB5159;
|
||||
}
|
||||
}
|
||||
|
||||
.car_pop {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
.pop_box {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
bottom: 0%;
|
||||
// height:707upx;
|
||||
border-radius: 10upx 10upx 0 0;
|
||||
|
||||
.cancel_pop {
|
||||
height: 38upx;
|
||||
width: 38upx;
|
||||
position: absolute;
|
||||
right: 30upx;
|
||||
top: 30upx;
|
||||
}
|
||||
|
||||
.pop_goods_info {
|
||||
height: 267upx;
|
||||
border-bottom: 5upx dashed #989898;
|
||||
|
||||
.pop_box_img {
|
||||
.pop_img {
|
||||
margin-right: 60upx;
|
||||
vertical-align: middle;
|
||||
height: 142upx;
|
||||
width: 200upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
padding: 20upx 30upx;
|
||||
border-bottom: 4upx solid #F2F2F2;
|
||||
|
||||
.dizhi_img {
|
||||
margin-right: 30upx;
|
||||
height: 27upx;
|
||||
width: 20upx;
|
||||
}
|
||||
|
||||
.pop_right {
|
||||
height: 22upx;
|
||||
width: 13upx;
|
||||
|
||||
}
|
||||
|
||||
.goods_count {
|
||||
// position: absolute;
|
||||
// bottom: -14upx;
|
||||
// right: 8upx;
|
||||
}
|
||||
}
|
||||
|
||||
.pop_sure {
|
||||
line-height: 82upx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
772
金壶/appV1/pages/shoppingCart/shoppingCart.vue
Normal file
772
金壶/appV1/pages/shoppingCart/shoppingCart.vue
Normal file
@@ -0,0 +1,772 @@
|
||||
<template>
|
||||
<!-- 购物车 页面 -->
|
||||
<view class="content w-100 h-100">
|
||||
<view class="header bg-linear-gradient x-text-white text-center">
|
||||
购物车
|
||||
<view class="edit_shoppingCar" @click="edit_shoppingCar()" v-if="isEdit==false">管理</view>
|
||||
<view class="edit_shoppingCar" @click="edit_shoppingCar()" v-if="isEdit==true">完成</view>
|
||||
</view>
|
||||
<view v-if='available_goods.length<=0' align="center">
|
||||
<image src="../../static/no/u/carno.png" mode="" class="noCar_img"></image>
|
||||
</view>
|
||||
<view class="list" v-if='available_goods.length>0'>
|
||||
<view class="list_items" v-for="(item,index) in available_goods" :key="index" v-if="available_goods.length>0">
|
||||
<checkbox-group class="block" style='padding:0 30upx 30upx'>
|
||||
<view class=" d-flex a-center">
|
||||
<view class="d-flex goods_items a-center w-100">
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="selected(item)">
|
||||
<checkbox class="xuanzhong" :checked="item.checked" />
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<!-- <view class="box_img" @click="goodsDetail(index)">
|
||||
<an-image :src="'https://'+item.pc_thumb" alt="https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg"></an-image>
|
||||
|
||||
</view> -->
|
||||
<view class="box_img" @click="goodsDetail(index)" :style="{backgroundImage: 'url(' + 'https://'+item.pc_thumb + ')', backgroundSize:'contain',backgroundPosition:'center'}">
|
||||
|
||||
</view>
|
||||
<view class="goods_txt flex-1" style="width:60%;">
|
||||
<view class="font-weight d-flex a-center">
|
||||
<image src="../../static/shoppingCart/xian.png" mode="" class="" style="height:30upx; width:30upx; margin-right:30upx;" v-if='item.is_limit==1'></image>
|
||||
<image src="../../static/shoppingCart/re.png" mode="" style="height:30upx; width:30upx;margin-right:30upx;" v-if='item.supplier_id<=10000'></image>
|
||||
<view class="textOVerFlow flex-1">{{item.name}}</view>
|
||||
</view>
|
||||
<view v-if='item.is_limit==1' class="x-text-159">{{item.limit_info}}</view>
|
||||
<view class="x_text_hui zhuyi_title">{{item.manufacturer_name}}</view>
|
||||
<view class="d-flex a-center">
|
||||
<view class="x_text_hui zhuyi_title">{{item.spec_desc}}</view>
|
||||
</view>
|
||||
<view class="d-flex a-center">
|
||||
<view class="x_text_hui">{{item.retail_flag==1?item.entirety_num:item.retail_num}}{{item.unit}}/件</view>
|
||||
<image src="../../static/shoppingCart/zheng.png" mode="" style="height:30upx; width:30upx;margin:0 30upx;" v-if="item.retail_flag==1" class=""></image>
|
||||
<image src="../../static/shoppingCart/ling.png" mode="" style="height:30upx; width:30upx; margin:0 30upx;" v-if="item.retail_flag==0" class=""></image>
|
||||
</view>
|
||||
|
||||
<view class="x-text-159 font-weight font_28">￥{{item.price}}</view>
|
||||
</view>
|
||||
<view class="goods_count d-flex">
|
||||
<view class="bianji_cars_num bianji_cars_num bianji_cars_numJian" @click="reduce(item)">-</view>
|
||||
<view class=" bianji_cars_numAdd">
|
||||
<input type="number" value="" cursor-spacing="30" class=" uni-input change-w bianji_cars_num w-100 text-center" style="padding:0;" v-model="item.num"
|
||||
@blur="outComputeNum(item,index)" @focus="inComputeNum(item)" @input="changeInput($event,item,index)" />
|
||||
</view>
|
||||
<view class="bianji_cars_num " @click="add(item)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<!-- <view class="list_items" v-for="(item,index) in inavailable_goods" :key="index" v-if="inavailable_goods.length>0">
|
||||
<checkbox-group class="block" @change="changeCheckbox" style='padding:0 30upx 30upx'>
|
||||
<view class=" d-flex a-center">
|
||||
<view class="d-flex goods_items a-center w-100">
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="selected(item)">
|
||||
<checkbox class="xuanzhong" :checked="item.checked" />
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="box_img" @click="goodsDetail(index)">
|
||||
<image :src="'https://'+item.pc_thumb" mode="" class="h-100 w-100" v-if="item.pc_thumb!=''"></image>
|
||||
<image src="../../static/noimg.png" mode="" class="h-100 w-100" v-if="item.pc_thumb==''"></image>
|
||||
</view>
|
||||
<view class="goods_txt flex-1" @click="goodsDetail(index)">
|
||||
<view class="font-weight">{{item.name}}</view>
|
||||
<view class="">{{item.manufacturer_name}}</view>
|
||||
<view class="">{{item.spec_desc}} {{item.retail_flag==1?'整':'零'}}</view>
|
||||
<view class="x-text-159">￥ {{item.price}}</view>
|
||||
</view>
|
||||
<view class="goods_count d-flex">
|
||||
<view class="bianji_cars_num bianji_cars_numJian" @click="reduce(item)">-</view>
|
||||
<view class="bianji_cars_num bianji_cars_numAdd" style="padding:0;">{{item.num}}</view>
|
||||
<view class="bianji_cars_num bianji_cars_numAdd" @click="add(item)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
<view class="line"></view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
<view class="settlement shadow d-flex a-center" v-if="isEdit==false && available_goods.length>0">
|
||||
<view class="all_choose">
|
||||
<checkbox-group @change="selectedall()">
|
||||
<checkbox class="quanxuananniu" :checked="allchecked" />全选
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="x_textRight flex-1 d-flex text-right">
|
||||
<view>总计:</view>
|
||||
<view class="x-text-159">￥ {{Math.round(is_conut * 100) / 100}}</view>
|
||||
<!-- <view class="">￥ {{totel}}</view> -->
|
||||
|
||||
</view>
|
||||
<view class="x-bg-159 to_buy text-center x-text-white" @click="to_pay()">去结算({{jianshu}})件</view>
|
||||
</view>
|
||||
<view class="settlement shadow d-flex a-center" v-if="isEdit==true && available_goods.length>0">
|
||||
<view class="all_choose">
|
||||
<checkbox-group @change="selectedall()">
|
||||
<checkbox class="quanxuananniu" :checked="allchecked" />全选
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="text-center add_toCollection" @click="add_collage()">移入收藏夹</view>
|
||||
<view class="x-bg-159 text-center del_goods" @click="del()">删除</view>
|
||||
</view>
|
||||
<view class="no_list x_margin0auto" v-if="list.length>0">
|
||||
<image src="../../static/shoppingCart/nopic.png" mode="" class="no_list_img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapGetters } from 'vuex'
|
||||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||||
import X_goods from '../../utils/models/goods.js'
|
||||
import {
|
||||
Config
|
||||
} from '../../utils/config.js'
|
||||
import auth from '../../utils/models/auth.js'
|
||||
import anImage from '@/components/an-image/an-image'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goods_num: 0, //商品当前数量
|
||||
Stock: 20, //当前商品的总库存
|
||||
isEdit: false, // 判断是否编辑购物车，true为编辑，false为不编辑
|
||||
add_choose_checked: false,
|
||||
list: [], // 购物车数据
|
||||
isChecked: false,
|
||||
checkedArr: [], //复选框选中的值
|
||||
allChecked: false, //是否全选
|
||||
flag: true, // 用于判断用户购物车是否有商品，没有商品为true，有商品为false
|
||||
//cartlist: [], // 购物车商品信息
|
||||
allchecked: false, //默认全选为true，因为后台数据没有是否选中的信息
|
||||
available_goods: '', //正常的购物车数据
|
||||
inavailable_goods: '', //非正常的购物车数据（下架，失效等等）
|
||||
chooseArr: [], // 被选择的商品列表的id的数组
|
||||
id: '', //
|
||||
batch_id: '',
|
||||
goods_id: '',
|
||||
collageGoods_id: '', //加入收藏夹的goods_id 的集合
|
||||
result: [],
|
||||
result_list: [],
|
||||
jianshu: 0,
|
||||
is_conut: 0, // 总计
|
||||
old_num: 0,
|
||||
is_next: true,
|
||||
change_jiage:[]
|
||||
}
|
||||
},
|
||||
comments: {
|
||||
HeaderTop,
|
||||
anImage
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.goods_num) {
|
||||
this.goods_num = option.goods_num
|
||||
}
|
||||
this.allchecked = false
|
||||
},
|
||||
onShow() {
|
||||
this.is_conut = 0;
|
||||
this.jianshu = 0;
|
||||
this.allchecked = false;
|
||||
this.shoppingCarList();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'SetShopCarNums'
|
||||
]),
|
||||
// 监听input值的变化，计算总价格
|
||||
async changeInput(event, item, index) {
|
||||
|
||||
item.num = event.detail.value
|
||||
if(item.num=='' || item.num==0 || item.num * 100 == 0){
|
||||
item.num = 0
|
||||
//item.checked = false
|
||||
}
|
||||
},
|
||||
inComputeNum(item) {
|
||||
this.is_next = false
|
||||
this.old_num = item.num
|
||||
},
|
||||
|
||||
async outComputeNum(item, index) {
|
||||
if(item.num=='' || item.num==0 || item.num * 100 == 0){
|
||||
item.num = 0
|
||||
}
|
||||
if (item.retail_flag == 0) { //零售
|
||||
let num = Math.ceil(item.num / item.retail_num)
|
||||
if (num > 0) {
|
||||
item.num = num * item.retail_num
|
||||
if (item.stock_num < item.num) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
item.num = item.stock_num;
|
||||
}
|
||||
}
|
||||
} else { // 整售
|
||||
let num = Math.ceil(item.num / item.entirety_num)
|
||||
if (num > 0) {
|
||||
item.num = num * item.entirety_num
|
||||
if (item.stock_num < item.num) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
item.num = item.stock_num;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let res = await X_goods.X_update(item.id, item.num)
|
||||
this.is_next = true
|
||||
this.handleError(res, res => {
|
||||
if(res.data.errcode == 0){
|
||||
|
||||
if (item.checked) {
|
||||
if(this.old_num > item.num){
|
||||
this.is_conut -= Number(this.old_num - item.num) * item.price
|
||||
}
|
||||
if(this.old_num < item.num){
|
||||
|
||||
this.is_conut += Number(item.num - this.old_num) * item.price
|
||||
}
|
||||
}
|
||||
// if(item.num == 0){
|
||||
// item.checked = false
|
||||
// }
|
||||
}
|
||||
|
||||
if (res.data.errcode != 0) {
|
||||
item.num = this.old_num ;
|
||||
uni.showToast({
|
||||
title: res.data.errmsg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
//移入收藏夹
|
||||
async add_collage() {
|
||||
this.collageGoods_id = ''
|
||||
this.available_goods.forEach(item => {
|
||||
if (item.checked == true) {
|
||||
this.collageGoods_id += item.goods_id + ','
|
||||
}
|
||||
})
|
||||
this.collageGoods_id = this.collageGoods_id.substr(0, this.collageGoods_id.length - 1);
|
||||
|
||||
if (this.collageGoods_id.length <= 0) {
|
||||
|
||||
uni.showToast({
|
||||
title: '请选择商品',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
let res = await X_goods.X_addCollect_app(this.collageGoods_id, 1)
|
||||
this.handleError(res, res => {
|
||||
uni.showToast({
|
||||
title: res.data.errmsg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
// 减号操作
|
||||
async reduce(item) {
|
||||
if (item.num < 0) {
|
||||
uni.showToast({
|
||||
title: '数量不得为负',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
item.num = 0
|
||||
|
||||
return
|
||||
}else if(item.num ==0){
|
||||
// item.checked = false
|
||||
return
|
||||
} else {
|
||||
if (item.retail_flag == 0) { //零售
|
||||
// item.num -= item.retail_num
|
||||
item.num = Number(item.num) - Number(item.retail_num)
|
||||
if (item.checked) {
|
||||
this.is_conut -= Number(item.retail_num) * item.price
|
||||
}
|
||||
} else { // 整售
|
||||
// item.num -= item.entirety_num
|
||||
item.num = Number(item.num) - Number(item.entirety_num)
|
||||
if (item.checked) {
|
||||
this.is_conut -= Number(item.entirety_num) * item.price
|
||||
}
|
||||
}
|
||||
|
||||
if (item.num < 0) {
|
||||
item.num = 0
|
||||
uni.showToast({
|
||||
title: '数量不得为负',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
let res = await X_goods.X_update(item.id, item.num)
|
||||
// this.shoppingCarList();
|
||||
this.handleError(res, res => {
|
||||
if (res.data.errcode != 0) {
|
||||
if (item.retail_flag == 0) { //零售
|
||||
item.num += item.retail_num
|
||||
if (item.checked) {
|
||||
this.is_conut += Number(item.retail_num) * item.price
|
||||
}
|
||||
|
||||
} else { // 整售
|
||||
item.num += item.entirety_num
|
||||
if (item.checked) {
|
||||
this.is_conut += Number(item.entirety_num) * item.price
|
||||
}
|
||||
}
|
||||
uni.showToast({
|
||||
title: res.data.errmsg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 加号操作
|
||||
async add(item) {
|
||||
if (item.stock_num <= this.goods_num) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
this.goods_num = item.stock_num;
|
||||
} else {
|
||||
if (item.retail_flag == 0) { //零售
|
||||
item.num = Number(item.num) + Number(item.retail_num)
|
||||
if (item.checked) {
|
||||
this.is_conut += Number(item.retail_num) * item.price
|
||||
}
|
||||
} else { // 整售
|
||||
item.num = Number(item.num) + Number(item.entirety_num)
|
||||
if (item.checked) {
|
||||
this.is_conut += Number(item.entirety_num) * item.price
|
||||
}
|
||||
}
|
||||
let res = await X_goods.X_update(item.id, item.num)
|
||||
|
||||
|
||||
this.handleError(res, res => {
|
||||
|
||||
if (res.data.errcode != 0) {
|
||||
if (item.retail_flag == 0) { //零售
|
||||
item.num -= item.retail_num
|
||||
if (item.checked) {
|
||||
this.is_conut -= Number(item.retail_num) * item.price
|
||||
}
|
||||
|
||||
} else { // 整售
|
||||
item.num -= item.entirety_num
|
||||
if (item.checked) {
|
||||
this.is_conut -= Number(item.entirety_num) * item.price
|
||||
}
|
||||
}
|
||||
uni.showToast({
|
||||
title: res.data.errmsg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 删除单挑购物车商品
|
||||
async del() {
|
||||
this.chooseArr = []
|
||||
this.available_goods.forEach(item => {
|
||||
if (item.checked == true) {
|
||||
this.chooseArr.push(item.id)
|
||||
}
|
||||
})
|
||||
if (this.chooseArr.length <= 0) {
|
||||
uni.showToast({
|
||||
title: '请选择商品',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
let res = await X_goods.X_delCar(this.chooseArr)
|
||||
this.isEdit = !this.isEdit;
|
||||
this.handleError(res, res => {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
this.is_conut = 0;
|
||||
this.jianshu = 0;
|
||||
this.shoppingCarList();
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 单个商品前的勾选
|
||||
selected(item) {
|
||||
// if(item.num==0){
|
||||
// // item.checked =false
|
||||
// }else{
|
||||
// }
|
||||
item.checked = !item.checked
|
||||
if (!item.checked) {
|
||||
this.allchecked = false
|
||||
this.jianshu--
|
||||
this.is_conut -= (item.price * item.num)
|
||||
} else {
|
||||
this.jianshu++
|
||||
|
||||
this.is_conut += (item.price * item.num)
|
||||
const test = this.available_goods.every(item => {
|
||||
return item.checked === true
|
||||
})
|
||||
if (test) {
|
||||
this.allchecked = true
|
||||
} else {
|
||||
this.allchecked = false
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 全选按钮
|
||||
selectedall() {
|
||||
this.jianshu = 0;
|
||||
this.is_conut = 0;
|
||||
if (this.available_goods.length <= 0) {
|
||||
return
|
||||
} else {
|
||||
this.allchecked = !this.allchecked
|
||||
if (this.allchecked) {
|
||||
this.available_goods.map(item => {
|
||||
item.checked = true
|
||||
this.is_conut += item.price * item.num
|
||||
// this.is_conut++
|
||||
})
|
||||
this.jianshu = this.available_goods.length
|
||||
} else {
|
||||
this.available_goods.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//去结算 X_orderPreview
|
||||
async to_pay() {
|
||||
if (!this.is_next) {
|
||||
return
|
||||
}
|
||||
|
||||
this.goods_id = ''
|
||||
for (let i = 0; i < this.available_goods.length; i++) {
|
||||
if (this.available_goods[i].checked == true) {
|
||||
if(this.available_goods[i].num==0){
|
||||
uni.showToast({
|
||||
title: '请选择商品数量',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}else{
|
||||
this.goods_id += this.available_goods[i].id + ','
|
||||
}
|
||||
}
|
||||
}
|
||||
this.goods_id = this.goods_id.substr(0, this.goods_id.length - 1);
|
||||
|
||||
if (this.goods_id.length <= 0) {
|
||||
|
||||
} else {
|
||||
this.goodid();
|
||||
this.is_checkAuth()
|
||||
// if (this.the_checkAuth == 'finish') {
|
||||
// uni.navigateTo({
|
||||
// url: './sureOrder?goods_id=' + this.goods_id
|
||||
// })
|
||||
// }
|
||||
|
||||
}
|
||||
},
|
||||
goodid(){
|
||||
this.$store.commit('goodid',this.goods_id)
|
||||
},
|
||||
//checkAuth 检测用户是否完成认证
|
||||
async is_checkAuth() {
|
||||
let res = await auth.checkAuth()
|
||||
|
||||
this.the_checkAuth = res.data
|
||||
if (res.data != 'finish') {
|
||||
if (res.data == 'auditing') {
|
||||
uni.showToast({
|
||||
title: '您的企业认证正在审核中！',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先完成认证',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '../auth/baisc'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
|
||||
uni.navigateTo({
|
||||
url: './sureOrder?goods_id=' + this.goods_id
|
||||
})
|
||||
}
|
||||
this.handleError(res, res => {
|
||||
|
||||
})
|
||||
},
|
||||
// 购物车列表
|
||||
async shoppingCarList() {
|
||||
this.available_goods = []
|
||||
let res = await X_goods.x_shoppingCar()
|
||||
// if (res.code == 40000) {
|
||||
// uni.navigateTo({
|
||||
// url: './x_login'
|
||||
// })
|
||||
// }
|
||||
this.handleError(res, res => {
|
||||
|
||||
if (res.data == '') {
|
||||
|
||||
} else {
|
||||
this.available_goods = res.data.data.available_goods;
|
||||
this.SetShopCarNums(this.available_goods.length)
|
||||
// Config.shooppingCar_num = this.available_goods.length
|
||||
// this.inavailable_goods = res.data.data.inavailable_goods
|
||||
this.available_goods.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 管理购物车
|
||||
edit_shoppingCar() {
|
||||
this.isEdit = !this.isEdit
|
||||
},
|
||||
// 进入商品详情页
|
||||
goodsDetail(index) {
|
||||
|
||||
if (this.isEdit == false) {
|
||||
|
||||
if (this.available_goods[index].price_id) {
|
||||
uni.navigateTo({
|
||||
url: './goodsDetail?sku_id=' + this.available_goods[index].price_id + '&goods_num=' + this.available_goods[
|
||||
index].num
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 登录
|
||||
to_login() {
|
||||
uni.navigateTo({
|
||||
url: 'x_login'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
.header {
|
||||
height: 148upx;
|
||||
font-size: 32upx;
|
||||
position: relative;
|
||||
line-height: 194upx;
|
||||
|
||||
.edit_shoppingCar {
|
||||
position: absolute;
|
||||
bottom: -48upx;
|
||||
right: 31upx;
|
||||
}
|
||||
}
|
||||
|
||||
.noCar_img {
|
||||
height: 238upx;
|
||||
width: 350upx;
|
||||
margin-top: 100upx;
|
||||
}
|
||||
|
||||
.cartlist {
|
||||
background-color: #999999;
|
||||
padding: 10px;
|
||||
|
||||
.cartitem {
|
||||
background-color: #FFFFFF;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.xuanzhong {
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
image {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 5px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.itemright {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
|
||||
.del {
|
||||
margin-left: 10px;
|
||||
background-color: red;
|
||||
color: #FFFFFF;
|
||||
border-radius: 3px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
height: calc(100% - 248upx);
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
.list_items {
|
||||
|
||||
|
||||
.box_img {
|
||||
height: 153.3upx;
|
||||
// width: 270upx;
|
||||
width:40%;
|
||||
padding: 10upx 20upx;
|
||||
margin: 0 10upx;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
|
||||
.goods_items {
|
||||
position: relative;
|
||||
|
||||
.goods_count {
|
||||
position: absolute;
|
||||
bottom: -14upx;
|
||||
right: 8upx;
|
||||
.change-w{
|
||||
width:65upx;
|
||||
}
|
||||
.bianji_cars_num{
|
||||
background: #FBFBFB;
|
||||
}
|
||||
.bianji_cars_numAdd{
|
||||
margin-left: 2upx;
|
||||
margin-right: 2upx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.line {
|
||||
height: 4upx;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no_list {
|
||||
margin-top: 315upx;
|
||||
text-align: center;
|
||||
|
||||
.no_list_img {
|
||||
height: 198upx;
|
||||
width: 395upx;
|
||||
}
|
||||
}
|
||||
|
||||
.settlement {
|
||||
height: 100upx;
|
||||
|
||||
.all_choose {
|
||||
width: 30%;
|
||||
margin-left: 30upx;
|
||||
}
|
||||
|
||||
.to_buy {
|
||||
line-height: 100upx;
|
||||
width: 260upx;
|
||||
min-width: 224.6upx;
|
||||
font-size: 34upx;
|
||||
}
|
||||
|
||||
.add_toCollection {
|
||||
border: 1upx solid #EDCA4A;
|
||||
border-radius: 30upx;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
width: 198.8upx;
|
||||
color: #EDCA4A;
|
||||
margin: 0 22px 0 30px;
|
||||
}
|
||||
|
||||
.del_goods {
|
||||
border: 1upx solid #EB5159;
|
||||
border-radius: 30upx;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
width: 150upx;
|
||||
color: #EB5159;
|
||||
border: 1upx solid #EB5159;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
363
金壶/appV1/pages/shoppingCart/sureOrder.vue
Normal file
363
金壶/appV1/pages/shoppingCart/sureOrder.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<!-- 确认订单 页面 -->
|
||||
<view class="content">
|
||||
<HeaderTop page_title='确认订单'></HeaderTop>
|
||||
<view class="detail bg_F2F2F2">
|
||||
<view class="x-bg-white margin-bottom22">
|
||||
<!-- 传参地址 -->
|
||||
<view class="padding-30" v-if="option_address!==''">
|
||||
<view class="goods_info d-flex j-sb w-50">
|
||||
<view class="font_28">{{address.consignee}}</view>
|
||||
<view class="">{{address.tel}}</view>
|
||||
</view>
|
||||
<view class="goods_info d-flex j-sb a-center" @click="to_addAdress()">
|
||||
<view class="font_28 w-90">
|
||||
{{address.address}}</view>
|
||||
<image src="../../static/shoppingCart/right.png" mode="" class="p_right"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 接口地址 -->
|
||||
<view class="padding-30" v-if="address!='' && option_address==''">
|
||||
<view class="goods_info d-flex j-sb w-50">
|
||||
<view class="font_28">{{address.consignee}}</view>
|
||||
<view class="">{{address.tel}}</view>
|
||||
</view>
|
||||
<view class="goods_info d-flex j-sb a-center" @click="to_addAdress()">
|
||||
<view class="font_28 w-90">
|
||||
{{address.address}}</view>
|
||||
<image src="../../static/shoppingCart/right.png" mode="" class="p_right"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 没有地址 -->
|
||||
<view class="padding-30" v-if="(address.address=='' || address.address==null) && option_address==''">
|
||||
<view class="goods_info d-flex j-sb a-center" @click="to_addAdress()">
|
||||
<view class="font_28 w-90">
|
||||
暂无地址</view>
|
||||
<image src="../../static/shoppingCart/right.png" mode="" class="p_right"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list x-bg-white margin-bottom22 padding-sx30">
|
||||
<view class="list_items" v-if='goods_list' v-for="(item,index) in goods_list" :key="item.index">
|
||||
<view class=" d-flex a-center">
|
||||
<view class="d-flex goods_items a-center w-100">
|
||||
<view class="shixiao" v-if='item.is_buy==0'>失效</view>
|
||||
<view class="box_img">
|
||||
<image :src="item.app_thumb" mode="" class="h-100 w-100"></image>
|
||||
|
||||
</view>
|
||||
<view class="goods_txt flex-1 padding-zy30">
|
||||
<view class="font-weight">{{item.goods_name}}</view>
|
||||
<view class="">{{item.manufacturer_name}}</view>
|
||||
<view class="">{{item.spec_desc}} {{item.unit}}</view>
|
||||
<view class="d-flex j-sb">
|
||||
<view class="x-text-159">￥ {{item.unit_price}}</view>
|
||||
<view class="">X {{item.goods_number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_items" v-for="(item,index) in extend" :key="item.index">
|
||||
<view class=" d-flex a-center">
|
||||
<view class="d-flex goods_items a-center w-100">
|
||||
<view class="shixiao" v-if='item.is_buy==0'>失效</view>
|
||||
<view class="box_img">
|
||||
<image :src="item.app_thumb" mode="" class="h-100 w-100"></image>
|
||||
|
||||
</view>
|
||||
<view class="goods_txt flex-1 padding-zy30">
|
||||
<view class="font-weight">{{item.goods_name}}</view>
|
||||
<view class="">{{item.manufacturer_name}}</view>
|
||||
<view class="">{{item.spec_desc}} {{item.unit}}</view>
|
||||
<view class="d-flex j-sb">
|
||||
<view class="x-text-159">￥ {{item.unit_price}}</view>
|
||||
<view class="">X {{item.goods_number}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white margin-bottom22 padding-30">
|
||||
<view class="d-flex j-sb">
|
||||
<view>商品总额</view>
|
||||
<view class="x-text-159">￥ {{list.goods_amount}}</view>
|
||||
</view>
|
||||
<view class="d-flex j-sb">
|
||||
<view>运费</view>
|
||||
<view class="x-text-159">￥ {{list.shipping_fee}}</view>
|
||||
</view>
|
||||
<view class="d-flex j-sb">
|
||||
<view class="x_text_hui" style="margin-bottom: 30upx;">{{list.shipping_fee_text}}</view>
|
||||
</view>
|
||||
<view class="d-flex j-sb a-center ">
|
||||
<view class="">订单备注</view>
|
||||
<input type="text" value="" class="the_remarks flex-1" v-model="remark" placeholder="如有其他备注内容，请在此填写"/>
|
||||
<!-- <textarea placeholder-style="color:#989898" placeholder="如有其他备注内容，请在此填写" v-model="remark"class="the_remarks" /> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_menu shadow d-flex">
|
||||
<view class="flex-1 x_textRight padding-zy30">
|
||||
<text class="x_text_hui">共{{list.total_number}}件,</text>
|
||||
<text class="x_text_hei2828 margin-zy20 font-weight" @click="shishi" >合计:</text>
|
||||
<text class="x-text-159">￥ {{list.total_amount}}</text>
|
||||
</view>
|
||||
<view class="buy sameBtn x-text-white text-center" v-if="list.is_buy==0" style="background-color: #a9a1a1;">提交订单</view>
|
||||
<view class="buy sameBtn x-text-white text-center" v-if="list.is_buy!==0" @click="submitOrder()">提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
// import Vuex from "vuex"
|
||||
import X_goods from '../../utils/models/goods.js'
|
||||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goods_num: 10, // 商品的当前数量
|
||||
Stock: 100, //当前商品的总库存
|
||||
sales_type: 10, //销售类型
|
||||
is_collection: false, //判断是否收藏商品 是:true ; 否:false
|
||||
is_pop_show: false, // 判断购物车遮挡层的状态 显示:true ; 隐藏:false
|
||||
Which_one: '', //判断用户点击了哪一个按钮 1：加入购物车； 2：立即购买
|
||||
car_GoodsNum: 0 ,//购物车的商品数量
|
||||
goods_id:'', // 购物车ID（传过来的参数）
|
||||
address:'',
|
||||
goods_list:'',
|
||||
extend:'',
|
||||
list:'',
|
||||
remark:'' ,//备注
|
||||
option_address:'', //从地址列表页传参
|
||||
goods_ids:'' // 订单id的集合
|
||||
}
|
||||
},
|
||||
comments: {
|
||||
HeaderTop
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.sure_order()
|
||||
},
|
||||
onLoad(option) {
|
||||
|
||||
this.goods_id = option.goods_id
|
||||
|
||||
if(option.address){
|
||||
this.option_address = option.address
|
||||
|
||||
|
||||
}else{
|
||||
this.address = ''
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
//添加收货地址
|
||||
goodid(){
|
||||
this.$store.commit('goodid',this.goods_id)
|
||||
},
|
||||
to_addAdress(){
|
||||
this.goodid();
|
||||
uni.redirectTo({
|
||||
url:'../my/user-path-list?goods_id='+this.goods_id
|
||||
})
|
||||
},
|
||||
|
||||
// shishi(){
|
||||
// console.log(this.$store.state.goods_id)
|
||||
// },
|
||||
//确认订单 X_orderPreview
|
||||
async sure_order() {
|
||||
this.goods_id = this.$store.state.goods_id
|
||||
let res = await X_goods.X_orderPreview(this.goods_id)
|
||||
this.handleError(res, res => {
|
||||
|
||||
if(res.data.address){
|
||||
|
||||
if(this.option_address){
|
||||
|
||||
this.address = JSON.parse(this.option_address)
|
||||
}else{
|
||||
|
||||
this.address = res.data.address
|
||||
}
|
||||
}
|
||||
|
||||
this.goods_list = res.data.goods_list.plat
|
||||
this.extend = res.data.goods_list.extend
|
||||
this.list = res.data
|
||||
if(!this.address){
|
||||
uni.showToast({
|
||||
title: '请选择收货地址',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
//提交订单 (创建订单)
|
||||
async submitOrder(){
|
||||
this.goodid();
|
||||
if(this.list.is_buy==1){
|
||||
this.goods_ids = ''
|
||||
if(this.goods_list){
|
||||
this.goods_list.forEach(item=>{
|
||||
this.goods_ids+=item.id+','
|
||||
})
|
||||
}
|
||||
if(this.extend){
|
||||
this.extend.forEach(item=>{
|
||||
this.goods_ids+=item.id+','
|
||||
})
|
||||
}
|
||||
this.goods_ids = this.goods_ids.substr(0, this.goods_ids.length - 1);
|
||||
let res = await X_goods.X_create_order(this.goods_ids,this.address.address,this.address.consignee,this.address.tel,this.remark,this.address.id)
|
||||
if(res.code==200){
|
||||
if(res.data.errcode){
|
||||
uni.showToast({
|
||||
title: res.data.errmsg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: './shoppingCart'
|
||||
})
|
||||
}, 1500);
|
||||
}else{
|
||||
uni.redirectTo({
|
||||
url:'../my/pay_type?order_id='+res.data.order_id
|
||||
})
|
||||
}
|
||||
}
|
||||
this.handleError(res, res => {
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
.the_remarks{
|
||||
font-size: 28upx;
|
||||
}
|
||||
overflow-y: auto;
|
||||
.detail {
|
||||
background-color: #F2F2F2;
|
||||
height: calc(100% - 249upx);
|
||||
overflow-y: auto;
|
||||
.list {
|
||||
|
||||
.list_items {
|
||||
position: relative;
|
||||
.shixiao{
|
||||
position: absolute;
|
||||
right:6%;
|
||||
top:0;
|
||||
padding:5upx 10upx;
|
||||
border-radius: 20upx;
|
||||
background-color: #a9a1a1;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.box_img {
|
||||
height: 153.3upx;
|
||||
width: 270upx;
|
||||
background-color: #F2F2F2;
|
||||
padding: 10upx 20upx;
|
||||
margin: 0 10upx;
|
||||
}
|
||||
|
||||
.goods_items {
|
||||
position: relative;
|
||||
|
||||
.goods_count {
|
||||
position: absolute;
|
||||
bottom: -14upx;
|
||||
right: 8upx;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
height: 4upx;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.goods_txt {
|
||||
.txt_info {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
padding: 0 15upx;
|
||||
border-radius: 10upx;
|
||||
margin: 0 15upx;
|
||||
}
|
||||
|
||||
.zhuyi_title {
|
||||
margin: 20upx 0 20upx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_menu {
|
||||
height: 100upx;
|
||||
overflow: hidden;
|
||||
line-height: 100upx;
|
||||
.car_img {
|
||||
height: 41upx;
|
||||
width: 46upx;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.car_txt {
|
||||
font-size: 20upx;
|
||||
color: #989898;
|
||||
line-height: 22upx;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.car_GoodsNum {
|
||||
position: absolute;
|
||||
top: -8upx;
|
||||
left: 108upx;
|
||||
color: #EB5159;
|
||||
}
|
||||
|
||||
.sameBtn {
|
||||
line-height: 81.5upx;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.the_car {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add_shopping_car {
|
||||
background-color: #EDCA4A;
|
||||
}
|
||||
|
||||
.buy {
|
||||
background-color: #EB5159;
|
||||
line-height: 100upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user