Skip to content

M
mallapp
Commit cf17f48d authored by zhangjianguo's avatar zhangjianguo
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/viitto/mallapp

parents 555741c7 14c25d3b
Hide whitespace changes
Inline Side-by-side
Showing with 1044 additions and 108 deletions
components/auth/index.vue
View file @ cf17f48d
......@@ -40,6 +40,7 @@ export default {
methods: {
getUserInfo(e) {
if(e.mp.detail.userInfo){
// TODO 实现用户登录
uni.setStorageSync("userinfo", e.mp.detail.userInfo);
this.$emit('changeuserinfo');
}
......
components/goods/goodsaction.vue 0 → 100644
View file @ cf17f48d
<template>
<view
class="actionsheet"
:style="{ 'padding-bottom': bian ? '28px' : '0px' }"
>
<view class="item" @click="setFavorite" style="width:36px;">
<view style="width: 22px; margin: auto;">
<u-icon name="cart-o" size="44" :color="mc"></u-icon>
</view>
<text class="text" :style="{'color':mc}">购物车</text>
</view>
<view class="item">
<view style="width: 22px; margin: auto;">
<u-icon name="chat-o" size="44" color="#333"></u-icon>
</view>
<text class="text">客服</text>
<button
open-type="contact"
:send-message-title="goodName"
:send-message-path="path"
:send-message-img="g.coverPic"
:show-message-card="true"
>
0
</button>
</view>
<view class="item" @click="setFavorite">
<view style="width: 22px; margin: auto;">
<u-icon
:name="favorStatus ? 'like' : 'like-o'"
size="44"
:color="favorStatus ? mc : '#333'"
></u-icon>
</view>
<text class="text">收藏</text>
</view>
<view class="item2">
<view style="flex: 1;">
<u-button
@click="joinCar"
:ripple="true"
:hair-line="false"
:custom-style="btn1"
>加入购物车</u-button
>
</view>
<view style="flex: 1;">
<u-button
@click="buy"
:ripple="true"
:hair-line="false"
:custom-style="btn2"
>立即购买</u-button
>
</view>
</view>
</view>
</template>
<script>
export default {
props: ["coverPic", "goodName", "favorite", "goodId"],
data() {
return {
mc: "",
fu: "",
bian: false,
btn1: {
flex: 1,
height: "100%",
borderRadius: "40px 0 0 40px",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
btn2: {
flex: 1,
height: "100%",
borderRadius: "0 40px 40px 0",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
path: "",
favorStatus: false,
};
},
mounted() {
this.mc = this.$uiConfig.mainColor;
this.fu = this.$uiConfig.secondary;
this.bian = this.$utils.is_biang;
this.btn1.background = this.fu;
this.btn2.background = this.mc;
let t = getCurrentPages();
this.path = "/" + t[t.length - 1].route;
//console.log(t[t.length - 1]);
this.favorStatus = this.favorite;
},
methods: {
setFavorite() {
let h=this.apiheader()
console.log(h)
this.request(
{
url: "",
data: {
r: this.favorStatus
? "api/user/favorite-remove"
: "api/user/favorite-add",
goods_id: this.goodId,
},
header:h
},
(res) => {
this.favorStatus = !this.favorStatus;
}
);
},
joinCar() {
this.$emit("join-car");
},
buy() {
this.$emit("buy");
},
},
};
</script>
<style>
.actionsheet {
display: flex;
background: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
height: 50px;
align-items: center;
}
.actionsheet .item {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 10px;
color: #333;
font-size: 12px;
padding: 3px 0;
width: 30px;
position: relative;
}
.actionsheet .item .text {
margin-top: 2px;
text-align: center;
}
.actionsheet .item2 {
flex: 1;
width: 1px;
padding: 5px;
box-sizing: border-box;
margin-left: 10px;
height: 100%;
display: flex;
}
.actionsheet .item button {
width: 100%;
height: 100%;
opacity: 0;
left: 0;
top: 0;
position: absolute;
}
</style>
components/goods/goodsku.vue 0 → 100644
View file @ cf17f48d
<template>
<u-popup
mode="bottom"
:border-radius="borderRadius"
:popup="false"
v-model="value"
:maskCloseAble="maskCloseAble"
length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom"
@close="popupClose"
:z-index="9999"
close-icon="cross"
>
<view class="goodsku">
<view class="goods">
<image :src="goodimage" class="img"></image>
<view class="chosen-info">
<view class="price" :style="{ color: mc }">
<text class="small">￥</text>
<text>{{ goodprice }}</text>
</view>
<view class="amount">库存 {{ goodamount }} {{ g.unit }}</view>
<view class="sku">{{ skuObj ? "已选择" : "选择" }} {{ sku }}</view>
</view>
</view>
<view class="sku-box">
<view class="sku-item" v-for="(x, i) in g.attr_groups" :key="i">
<view class="sku-title">{{ x.attr_group_name }}</view>
<view>
<view
class="sku-chi"
:style="{
background: y.attr_id == x.checkId ? mc : '#eee',
color: y.attr_id == x.checkId ? '#FFF' : '#333',
}"
:class="{ disable: notStockGood.indexOf(y.attr_id) != -1 }"
v-for="(y, yi) in x.attr_list"
:key="yi"
@click="clickSkuItemHandler(yi, i)"
>
<image
:src="y.pic_url"
class="img"
v-if="i == 0 && y.pic_url"
></image>
<text class="val">{{ y.attr_name }}</text>
</view>
</view>
</view>
</view>
<view class="count-box">
<text class="label">购买数量</text>
<u-number-box
:disabled="!skuObj"
:value="gc"
:min="1"
:max="goodamount"
@change="valChange"
></u-number-box>
</view>
</view>
<view class="btn-box">
<view style="flex: 1;" v-if="optionType != 1">
<u-button
@click="joinCar"
:ripple="true"
:hair-line="false"
:custom-style="btn1"
>加入购物车</u-button
>
</view>
<view style="flex: 1;" v-if="optionType != 0">
<u-button
@click="buy"
:ripple="true"
:hair-line="false"
:custom-style="btn2"
>立即购买</u-button
>
</view>
</view>
</u-popup>
</template>
<script>
export default {
model: {},
props: {
borderRadius: {
type: [String, Number],
default: 0,
},
value: {
type: Boolean,
default: false,
},
maskCloseAble: {
type: Boolean,
default: true,
},
safeAreaInsetBottom: {
type: Boolean,
default: false,
},
good: {
type: Object,
default: {},
},
optionType: {
type: [String, Number],
default: 0,
},
skued: {
type: Object,
default: {},
}
},
data() {
return {
goodimage: "",
goodprice: "",
goodamount: "",
mc: "",
secondary: "",
gc: 1,
bian: false,
btn1: {
flex: 1,
height: "100%",
borderRadius: "40px",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
btn2: {
flex: 1,
height: "100%",
borderRadius: "40px",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
sku: "",
g: {},
skuObj: null,
notStockGood: [],
};
},
mounted() {
this.g = this.good;
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.skuObj=this.skued.id?this.skued:null
if(this.skuObj){
this.goodimage = this.skuObj.pic_url || this.g.cover_pic;
this.goodprice = (
parseFloat(this.skuObj.price) * 1
).toFixed(2);
this.goodamount = this.skuObj.stock;
}else{
this.goodimage = this.g.cover_pic;
this.goodprice = this.g.price_min;
this.goodamount = this.g.goods_stock;
}
this.bian = this.$utils.is_biang;
this.btn1.background = this.secondary;
this.btn2.background = this.mc;
if(this.optionType==2){
this.btn1.borderRadius="40px 0 0 40px"
this.btn2.borderRadius="0 40px 40px 0"
}
console.log(this.skued)
this.g.attr_groups.forEach((x) => {
if(!this.skuObj){
(x.checkId = 0), (x.checkName = x.attr_group_name);
}else{
let sign=`:${this.skuObj.sign_id}:`
x.attr_list.forEach(y=>{
if(sign.indexOf(`:${y.attr_id}:`)!=-1){
x.checkId=y.attr_id
x.checkName=y.attr_name
}
})
}
});
this.formatDisableSku();
this.formatChosenTips();
},
methods: {
close() {
this.popupClose();
},
clickSkuItemHandler(index, groupRow) {
let temp = this.g.attr_groups[groupRow].attr_list[index];
if (this.notStockGood.indexOf(temp.attr_id) == -1) {
if (this.g.attr_groups[groupRow].checkId != temp.attr_id) {
this.g.attr_groups[groupRow].checkId = temp.attr_id;
this.g.attr_groups[groupRow].checkName = temp.attr_name;
} else {
this.g.attr_groups[groupRow].checkId = 0;
this.g.attr_groups[groupRow].checkName = this.g.attr_groups[
groupRow
].attr_group_name;
}
this.formatDisableSku();
this.$forceUpdate();
this.formatChosenTips();
}
},
formatChosenTips() {
let unchosen = "";
let chosen = "";
this.g.attr_groups.forEach((x) => {
if (x.checkId != 0) {
chosen += (chosen == "" ? "" : ",") + x.checkName;
} else {
unchosen += (unchosen == "" ? "" : ",") + x.attr_group_name;
}
});
if (unchosen != "") {
this.sku = unchosen;
this.skuObj = null;
this.goodimage = this.g.cover_pic;
this.goodprice = this.g.price_min;
this.goodamount = this.g.goods_stock;
} else {
this.sku = chosen;
this.formatSku();
}
},
formatDisableSku() {
let sign = [];
this.g.attr_groups.forEach((x) => {
if (x.checkId != 0) {
sign.push(`${x.checkId}`);
}
});
if (sign.length == this.g.attr_groups.length - 1) {
this.formatDisable(sign)
} else if (sign.length == this.g.attr_groups.length) {
let t = sign.join(":");
let len = -1;
this.g.attr.forEach((x) => {
if (x.sign_id == t && x.stock == 0) {
len = this.g.attr_groups.length - 1;
}
});
if (len != -1) {
this.g.attr_groups[len].checkId = 0;
this.g.attr_groups[len].checkName = this.g.attr_groups[len].attr_name;
this.formatDisableSku();
}else{
this.formatDisable(sign.splice(sign.length-1,1))
}
}
},
formatDisable(sign){
this.notStockGood = [];
this.g.attr.forEach((x) => {
if (x.stock == 0) {
let t = x.sign_id.split(":");
let t1 = [];
t.forEach((x) => {
if (sign.indexOf(x) == -1) {
t1.push(x);
}
});
if (t1.length == 1) {
this.notStockGood.push(parseInt(t1[0]));
}
}
});
this.$forceUpdate();
},
formatSku() {
let sign = "";
this.g.attr_groups.forEach((x) => {
if (x.checkId != 0) {
sign += (sign == "" ? "" : ":") + x.checkId;
}
});
this.g.attr.forEach((x) => {
if (x.sign_id == sign) {
this.skuObj = x;
}
});
if (this.skuObj != null) {
this.goodimage = this.skuObj.pic_url || this.g.cover_pic;
this.goodprice = (
parseFloat(this.skuObj.price) * parseFloat(this.gc)
).toFixed(2);
this.goodamount = this.skuObj.stock;
}
},
// 弹窗关闭
popupClose() {
this.$emit("close",this.skuObj);
this.$emit("input", false);
},
valChange(e) {
this.gc = e.value;
if (this.skuObj) {
this.goodprice = (
parseFloat(this.skuObj.price) * parseFloat(this.gc)
).toFixed(2);
}
},
},
};
</script>
<style>
.goodsku {
position: relative;
padding: 10px;
padding-bottom: 0;
}
.goodsku .goods {
display: flex;
background: transparent;
padding-bottom: 10px;
}
.goodsku .goods .img {
width: 116px;
height: 116px;
border-radius: 4px;
margin-top: -45px;
border: 2px solid #fff;
}
.goodsku .goods .chosen-info {
margin-left: 15px;
flex: 1;
width: 1px;
}
.goodsku .goods .chosen-info .price {
font-size: 24px;
font-family: "oswald";
font-weight: unset;
}
.goodsku .goods .chosen-info .price .small {
font-size: 16px;
margin-right: 5px;
}
.goodsku .goods .chosen-info .amount {
font-size: 13px;
color: gray;
}
.goodsku .goods .chosen-info .sku {
font-size: 13px;
margin-top: 5px;
}
.goodsku .sku-box {
padding: 0;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
display: block;
}
.goodsku .sku-box .sku-item {
padding: 15px 0;
border-bottom: 1px solid #eee;
width: 100%;
}
.goodsku .sku-box .sku-item .sku-title {
color: #333;
font-size: 14px;
}
.goodsku .sku-box .sku-item .sku-chi {
background: #eee;
border-radius: 3px;
padding: 3px;
display: flex;
color: #111;
display: inline-block;
margin-top: 10px;
margin-right: 10px;
font-size: 13px;
}
.goodsku .sku-box .sku-item .sku-chi.disable {
background: #eee !important;
color: #ddd !important;
}
.goodsku .sku-box .sku-item .sku-chi .val {
width: 1px;
height: 24px;
line-height: 24px;
padding: 0 7px;
}
.goodsku .sku-box .sku-item .sku-chi .img {
width: 24px;
height: 24px;
border-radius: 2px;
margin-right: 5px;
vertical-align: bottom;
}
.goodsku .count-box {
display: flex;
padding: 15px 0;
}
.goodsku .count-box .label {
font-size: 14px;
color: #333;
width: 1px;
flex: 1;
}
.btn-box {
display: flex;
background: #fff;
height: 60px;
align-items: center;
border-top: 1px solid #eee;
padding: 5px 10px;
}
</style>
components/goods/list.vue 0 → 100644
View file @ cf17f48d
<template>
<view class="u-good-list">
<u-row gutter="20">
<u-col span="6" v-for="(cx, ci) in g" :key="ci">
<view class="good" @click="clickHandler(cx.page_url)">
<view class="good-img">
<image
mode="aspectFit"
:src="cx.cover_pic"
style="width: 100%; height: 100%;"
/>
</view>
<view class="good-name">{{ cx.name }}</view>
<view class="good-info">
<view class="price" :style="{ color: mainColor }">{{
cx.price_content
}}</view>
<view class="sell">{{ cx.sales }}</view>
<view class="cart">
<u-icon name="cart-o" size="40" :color="mainColor" />
</view>
</view>
</view>
</u-col>
</u-row>
</view>
</template>
<script>
export default {
props: ["list"],
data() {
return {
g: [],
};
},
mounted() {
this.g = this.list;
},
watch: {
list: {
deep: true,
immediate: true,
handler: function (newVal, oldVal) {
this.g = newVal;
}
},
},
methods: {
clickHandler(url) {
uni.navigateTo({
url: url,
});
},
},
};
</script>
<style>
.u-good-list .good {
background: #fff;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.u-good-list .good .good-img {
width: calc(50vw - 15px);
height: calc(50vw - 15px);
display: block;
}
.u-good-list .good .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 13px;
margin: 7px 10px;
}
.u-good-list .good .good-info {
display: flex;
margin: 7px 10px;
margin-top: 0;
align-items: flex-end;
padding-bottom: 5px;
}
.u-good-list .good .good-info .price {
font-size: 14px;
color: #ff4544;
flex: 1;
}
.u-good-list .good .good-info .sell {
font-size: 11px;
color: gray;
flex: 1;
}
.u-good-list .good .good-info .cart {
width: 40rpx;
text-align: right;
}
</style>
node_modules/uview-ui/components/u-number-box/u-number-box.vue
View file @ cf17f48d
......@@ -5,7 +5,7 @@
height: inputHeight + 'rpx',
color: color
}">
<u-icon name="minus" :size="size"></u-icon>
&nbsp;
</view>
<input :disabled="disabled" :class="{ 'u-input-disabled': disabled }" v-model="inputVal" class="u-number-input" @blur="onBlur"
type="number" :style="{
......@@ -241,6 +241,7 @@
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.u-icon-plus {
......@@ -260,4 +261,25 @@
color: #c8c9cc !important;
background-color: #f2f3f5 !important;
}
.u-icon-minus::after{
height: 1px;
content: ' ';
top: 50%;
background: #000;
left: 10px;
right: 10px;
display: block;
position: absolute;
}
.u-icon-minus.u-icon-disabled::after{
height: 1px;
content: ' ';
top: 50%;
background: #c8c9cc;
left: 10px;
right: 10px;
display: block;
position: absolute;
}
</style>
node_modules/uview-ui/components/u-popup/u-popup.vue
View file @ cf17f48d
......@@ -158,7 +158,7 @@
;
}
// 不加可能圆角无效
style.overflow = 'hidden';
//style.overflow = 'hidden';
}
return style;
},
......@@ -171,7 +171,7 @@
if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}rpx`;
// 不加可能圆角无效
style.overflow = 'hidden';
//style.overflow = 'hidden';
}
return style;
}
......
node_modules/uview-ui/components/u-section/u-section.vue
View file @ cf17f48d
......@@ -4,15 +4,16 @@
fontWeight: bold ? 'bold' : 'normal',
color: color,
fontSize: fontSize + 'rpx'
}">
}" :class="{'u-section-title-leftshow':showSplit}">
{{title}}
</view>
<view class="u-right-info" v-if="right" :style="{
color: subColor
color: subColor,
fontSize: fontSize + 'rpx'
}" @tap="rightClick">
{{subTitle}}
<view class="u-icon-arrow">
<u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
<u-icon name="arrow" size="24" :color="subColor"></u-icon>
</view>
</view>
</view>
......@@ -40,6 +41,10 @@
type: String,
default: ''
},
showSplit:{
type: Boolean,
default: true
},
// 右边副标题内容
subTitle: {
type: String,
......@@ -94,11 +99,13 @@
.u-section-title {
position: relative;
font-size: 28rpx;
padding-left: 10px;
line-height: 1;
}
.u-section-title:after {
.u-section-title-leftshow{
padding-left: 10px;
}
.u-section-title-leftshow:after {
position: absolute;
width: 4px;
height: 100%;
......
pages/goods/goods.vue
View file @ cf17f48d
<template>
<view class="goods">
<view class="u-skeleton">
<view class="u-skeleton" v-if="isExsitGoods">
<view class="u-skeleton-rect">
<u-swiper
:list="g.pic_url"
......@@ -18,7 +18,11 @@
<view class="left">
<view class="price u-skeleton-rect" :style="{ color: mc }">
<text class="small">￥</text>
<text class="numfont">{{ g.price_min + "-" + g.price_max }}</text>
<text class="numfont">{{
g.price_min == g.price_max
? g.price_min
: g.price_min + "-" + g.price_max
}}</text>
</view>
<view class="sell u-skeleton-rect">
<text class="oprice">{{ g.original_price }}</text>
......@@ -34,11 +38,27 @@
</view>
</view>
</view>
<view class="sku-box u-skeleton-rect" v-if="sku.length > 0">
<view
class="sku-box u-skeleton-rect"
v-if="g.goods_marketing_award.integral.title != ''"
>
<view class="label">活动</view>
<view class="content">
<u-tag text="送积分" type="error" />
<text style="margin-left: 5px; font-size: 12px;">
{{ g.goods_marketing_award.integral.title }}
</text>
</view>
</view>
<view
class="sku-box u-skeleton-rect"
style="align-items: flex-start;"
v-if="sku.length > 0"
>
<view class="label">选择</view>
<view class="content">
<view class="sku-chosen">
<view class="sku"> 选择 {{ sku }} </view>
<view class="sku-chosen" @click="chosenSku">
<view class="sku">{{ currentSku ? "已" : "" }}选择 {{ sku }} </view>
<view class="arrow">
<u-icon name="arrow" :size="32" color="#111"></u-icon>
</view>
......@@ -48,13 +68,13 @@
<view v-for="(x, i) in skuimage" class="item img" :key="i">
<image :src="x" style="width: 100%; height: 100%;" />
</view>
<view class="item"
<view class="item" v-if="g.attr_groups[0].attr_list.length > 1"
>共{{ g.attr_groups[0].attr_list.length }}种{{
g.attr_groups[0].attr_group_name
}}可选</view
>
</template>
<template>
<template v-else>
<view
v-for="(x, i) in g.attr_groups[0].attr_list"
class="item"
......@@ -62,7 +82,7 @@
>
{{ x.attr_name }}
</view>
<view class="item"
<view class="item" v-if="g.attr_groups[0].attr_list.length > 1"
>共{{ g.attr_groups[0].attr_list.length }}种{{
g.attr_groups[0].attr_group_name
}}可选</view
......@@ -71,22 +91,122 @@
</view>
</view>
</view>
<view class="sku-box u-skeleton-rect">
<view class="label">运费</view>
<view class="content">
{{g.express}}
<view class="label">快递</view>
<view class="content">
{{ g.express == "" ? "免运费" : g.express }}
</view>
</view>
<view
class="sku-box u-skeleton-rect"
style="margin-top: -10;"
v-if="g.goods_marketing.shipping != ''"
>
<view class="label">包邮</view>
<view class="content">
{{ g.goods_marketing.shipping }}
</view>
</view>
<view
class="sku-box u-skeleton-rect"
style="margin-top: -10;"
v-if="g.goods_marketing.limit != ''"
>
<view class="label">限购</view>
<view class="content">
{{ g.goods_marketing.limit }}
</view>
</view>
<view
class="sku-box u-skeleton-rect"
v-if="comments.comments.length == 0"
>
<view class="label">暂无评论信息</view>
</view>
<view class="comment" v-if="comments.comments.length > 0">
<view class="chead">
<u-section
:bold="false"
:sub-color="secondary"
:show-split="false"
:title="`商品评价(${comments.comments.length})`"
sub-title="查看更多"
font-size="24"
></u-section>
</view>
<view class="content">
<view class="u-box">
<view class="user">
<u-avatar
:src="comments.comments[0].avatar"
:size="50"
></u-avatar>
<text style="margin-left: 10px;">{{
comments.comments[0].nickname
}}</text>
</view>
<view class="timer">{{ comments.comments[0].time }}</view>
</view>
<view class="ucontent">{{ comments.comments[0].content }}</view>
</view>
</view>
<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent"
>商品详情</u-divider
>
<view class="details">
<view v-html="detailContent"></view>
</view>
<u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent"
>或许你喜欢</u-divider
>
<view
style="width: calc(100vw - 20px); margin-left: 10px; overflow: hidden;"
>
<goodlist :list="recommend"></goodlist>
</view>
<u-skeleton
:loading="loading"
:animation="true"
bgColor="#FFF"
></u-skeleton>
<goodsaction
v-if="!loading"
:good-name="g.name"
:cover-pic="g.cover_pic"
:favorite="g.favorite"
:good-id="id"
@join-car="joinCar"
@buy="buy"
></goodsaction>
<goodsku
v-if="!loading && showSku"
border-radius="10"
v-model="showSku"
:mask-close-able="true"
:safe-area-inset-bottom="true"
:good="g"
:option-type="ot"
:skued="currentSku"
@close="closeSkuChosen"
></goodsku>
</view>
<u-empty
text="没有找到商品，或商品已下架"
mode="favor"
v-if="!isExsitGoods"
></u-empty>
<!-- <auth></auth> -->
</view>
</template>
<script>
import goodlist from "@/components/goods/list";
import goodsaction from "@/components/goods/goodsaction";
import goodsku from "@/components/goods/goodsku";
import auth from "@/components/auth/index";
export default {
data() {
return {
......@@ -97,15 +217,27 @@ export default {
mc: "",
sku: "",
skuimage: [],
comments: [],
secondary: "",
detailContent: "",
recommend: [],
showSku: false,
ot: 0,
currentSku: {},
isExsitGoods: true,
};
},
components: {
goodlist,
goodsaction,
goodsku,
auth,
},
onLoad(option) {
this.id = option.id ? option.id : 70893;
this.id = option.id ? option.id : 59512; //40887 59512
this.init();
this.mc = this.$uiConfig.mainColor;
},
onShow() {
this.loading = false;
this.secondary = this.$uiConfig.secondary;
},
methods: {
init() {
......@@ -119,21 +251,32 @@ export default {
},
},
(res) => {
this.g = res.data.goods;
this.g.pic_url.forEach((x) => {
this.imgs.push(x.pic_url);
});
this.g.attr_groups.forEach((x, i) => {
if (i > 0) {
this.sku += ",";
}
this.sku += x.attr_group_name;
});
this.g.attr.forEach((x) => {
if (x.pic_url) {
this.skuimage.push(x.pic_url);
}
});
console.log(res);
if (res.code == 0) {
this.g = res.data.goods;
this.g.pic_url.forEach((x) => {
this.imgs.push(x.pic_url);
});
this.g.attr_groups.forEach((x, i) => {
if (i > 0) {
this.sku += ",";
}
this.sku += x.attr_group_name;
});
this.g.attr_groups[0].attr_list.forEach((x) => {
if (x.pic_url) {
this.skuimage.push(x.pic_url);
}
});
console.log(this.skuimage);
var richtext = this.g.detail;
richtext = richtext.replace(/<img/g, '<img style="max-width:100%"');
this.detailContent = richtext;
this.loading = false;
this.initComments();
} else {
this.isExsitGoods = false;
}
}
);
},
......@@ -158,6 +301,69 @@ export default {
},
});
},
initComments() {
this.request(
{
url: "",
data: {
r: "api/goods/comments-list",
goods_id: this.id,
page: 1,
status: 0,
},
},
(res) => {
this.comments = res.data;
this.initRecommend();
}
);
},
initRecommend() {
this.request(
{
url: "",
data: {
r: "api/goods/new-recommend",
goods_id: this.id,
type: "goods",
},
},
(res) => {
this.recommend = res.data.list;
}
);
},
joinCar() {
this.showSku = true;
this.ot = 0;
},
buy() {
this.showSku = true;
this.ot = 1;
},
chosenSku() {
this.showSku = true;
this.ot = 2;
},
closeSkuChosen(obj) {
this.sku = "";
if (obj) {
this.currentSku = obj;
obj.attr_list.forEach((x, i) => {
if (i > 0) {
this.sku += ",";
}
this.sku += `"${x.attr_name}" `;
});
} else {
this.g.attr_groups.forEach((x, i) => {
if (i > 0) {
this.sku += ",";
}
this.sku += x.attr_group_name;
});
}
},
},
};
</script>
......@@ -170,6 +376,7 @@ export default {
.goods {
height: 100%;
background: #f5f5f5;
padding-bottom: 55px;
}
.goods .g-info {
background: #fff;
......@@ -230,16 +437,21 @@ export default {
background: #fff;
display: flex;
padding: 15px 10px;
align-items: center;
}
.goods .sku-box .label {
font-size: 12px;
color: gray;
margin-right: 15px;
}
.goods .details {
padding: 10px;
}
.goods .sku-box .content {
width: 1px;
flex: 1;
color: #000;
font-size: 12px;
}
.goods .sku-box .content .sku-chosen {
display: flex;
......@@ -266,9 +478,56 @@ export default {
padding: 0 5px;
border-radius: 3px;
overflow: hidden;
color:#999;
color: #999;
}
.goods .sku-box .content .suk-item .item.img {
padding: 0;
width: 24px;
}
.goods .comment {
margin: 10px 0;
background: #fff;
padding: 10px;
}
.goods .comment .chead {
padding-bottom: 10px;
border-bottom: 1px solid #f1f1f1;
}
.goods .comment .content {
display: flex;
flex-direction: column;
margin-top: 15px;
}
.goods .comment .content .u-box {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.goods .comment .content .u-box .user {
flex: 1;
font-size: 12px;
color: gray;
align-items: center;
display: flex;
}
.goods .comment .content .u-box .timer {
font-size: 12px;
color: gray;
text-align: right;
flex: 1;
}
.goods .comment .content .u-box .ucontent {
font-size: 12px;
color: #000;
margin-top: 10px;
}
.goods .detals {
padding: 10px;
background: #fff;
margin-top: 10px;
}
.goods .detals * {
max-width: 100%;
}
</style>
pages/goods/list.vue
View file @ cf17f48d
......@@ -52,29 +52,7 @@
@scroll="scroll"
style="height: 100%; padding-bottom: 0px;"
>
<u-row gutter="20">
<u-col span="6" v-for="(cx, ci) in g" :key="ci">
<view class="good" @click="clickHandler(cx.page_url)">
<view class="good-img">
<image
mode="aspectFit"
:src="cx.cover_pic"
style="width: 100%; height: 100%;"
/>
</view>
<view class="good-name">{{ cx.name }}</view>
<view class="good-info">
<view class="price" :style="{ color: mainColor }">{{
cx.price_content
}}</view>
<view class="sell">{{ cx.sales }}</view>
<view class="cart">
<u-icon name="cart-o" size="40" :color="mainColor" />
</view>
</view>
</view>
</u-col>
</u-row>
<goodlist :list="g"></goodlist>
<u-loadmore
v-if="showLoading"
:status="status"
......@@ -104,6 +82,7 @@
</template>
<script>
import goodlist from '@/components/goods/list'
export default {
data() {
return {
......@@ -131,6 +110,9 @@ export default {
},
};
},
components:{
goodlist
},
onLoad(option) {
this.mainColor = this.$uiConfig.mainColor;
this.catId = option.cat_id;
......@@ -230,7 +212,7 @@ export default {
width: 90rpx;
color: #333;
border-radius: 90rpx;
margin-top: 40px;
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: center;
......@@ -245,46 +227,5 @@ export default {
flex: 1;
text-align: center;
}
.good-list .good {
background: #fff;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.good-list .good .good-img {
width: calc(50vw - 15px);
height: calc(50vw - 15px);
display: block;
}
.good-list .good .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 13px;
margin: 7px 10px;
}
.good-list .good .good-info {
display: flex;
margin: 7px 10px;
margin-top: 0;
align-items: flex-end;
padding-bottom: 5px;
}
.good-list .good .good-info .price {
font-size: 14px;
color: #ff4544;
flex: 1;
}
.good-list .good .good-info .sell {
font-size: 11px;
color: gray;
flex: 1;
}
.good-list .good .good-info .cart {
width: 40rpx;
text-align: right;
}
</style>
plugin/api.js
View file @ cf17f48d
......@@ -2,7 +2,7 @@ export default {
install(Vue, options) {
Vue.prototype.host = "https://wx.weibaoge.cn/web/index.php?_mall_id=1285"
Vue.prototype.request = function(param, success, failed, header = {}) {
Vue.prototype.request = function(param, success, failed) {
//网络请求
uni.request({
url: this.host + "&r="+ param.data.r,
......@@ -12,7 +12,7 @@ export default {
},
data: param.data,
success: res => {
if (res.data.code != 0) {
if (res.data.code != 0 && res.data.msg != "商品未上架") {
wx.showModal({
content: '网络开小差了，刷新页面重新加载吧',
showCancel: false
......@@ -33,6 +33,17 @@ export default {
}
});
}
Vue.prototype.apiheader = function() {
return {
'X-Access-Token': '_4Y_WpUZ4a6SI5uJgsZ4Lb7t9mvqJTyr',
'X-App-Platform': 'wxapp',
'X-App-Version': '4.2.47',
'X-Form-Id-List': [],
'X-Requested-With': 'XMLHttpRequest',
'X-User-Id': 19992,
'content-type': "application/json"
}
}
// Vue.prototype.post = function(obj, success, failed) {
// this.sendRequest(obj.url, 'POST', obj.data, success, failed)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment