Init project
This commit is contained in:
lifizer
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view class="page-v4">
|
||||
<image class="header-img img" :src="investmentTopImage" mode="widthFix"></image>
|
||||
|
||||
<view class="body flex flex-col flex-wrap jc-center ai-center">
|
||||
<view class="h1">{{ investmentTitle }}</view>
|
||||
<view class="red-box flex jc-center ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill"></image>
|
||||
<view>目前已有
|
||||
<text>{{ total }}</text>
|
||||
人参加活动
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<view class="title tc">申请资料填写</view>
|
||||
<text class="label">选择省市区</text>
|
||||
<view class="custom-input">
|
||||
<CitySelect ref="cityselect" :defaultValue="addressText" @callback="result" :items="district"/>
|
||||
</view>
|
||||
<text class="label">姓名</text>
|
||||
<input class="custom-input" type="text" :value="businessApply.realName" @input="inputKey($event,'realName')"/>
|
||||
<text class="label">电话</text>
|
||||
<input class="custom-input" type="number" :value="businessApply.phone" @input="inputKey($event,'phone')"/>
|
||||
<!-- <text class="label">身份证号码</text>-->
|
||||
<!-- <input class="custom-input" type="idcard" :value="businessApply.idcard" @input="inputKey($event,'idcard')"/>-->
|
||||
<button class="submit-btn" type="default" @click="sumbit">提交申请</button>
|
||||
|
||||
<image class="footer-img img" style="margin-top:30rpx" :src="investmentMainImage" mode="widthFix"
|
||||
@click="goList"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="people-box" v-if="businessApplyList.length">
|
||||
<view class="title tc">最新参与客户</view>
|
||||
<view class="list">
|
||||
<view class="item flex ai-center" :class="{'selected':index==1}" v-for="(item,index) in businessApplyList" :key="item" v-show="index<3">
|
||||
<view class="grid-1 flex ai-center">
|
||||
<image class="icon-horn" :src="webUrl+'/20220218225707839596.png'" mode="scaleToFill"></image>
|
||||
<text>{{ item.realName }}</text>
|
||||
</view>
|
||||
<view class="grid-2">{{ item.phone }}</view>
|
||||
<view>{{ item.disTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="footer-img img" :src="investmentBottomImage" mode="widthFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CitySelect from "@/components/CitySelect";
|
||||
import {getCity} from "@/api/user";
|
||||
import {getAttract, investment, saveAttract} from "@/api/shop.js";
|
||||
// import {
|
||||
// queryByType
|
||||
// } from "@/api/public";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CitySelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
district: [],
|
||||
address: {},
|
||||
addressText: "",
|
||||
total: 0,
|
||||
businessApply: {
|
||||
realName: "",
|
||||
phone: "",
|
||||
idcard: ""
|
||||
},
|
||||
businessApplyList: [],
|
||||
headerImg: null,
|
||||
footerImg: null,
|
||||
investmentTopImage: null,
|
||||
investmentMainImage: null,
|
||||
investmentBottomImage: null,
|
||||
investmentTitle: ""
|
||||
}
|
||||
},
|
||||
onLoad: function () {
|
||||
this.init()
|
||||
this.getCityList()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// queryByType("business_info").then(({data}) => {
|
||||
// data.map(item => {
|
||||
// switch (item.label) {
|
||||
// case "招商banner图上":
|
||||
// this.headerImg = item.value;
|
||||
// break;
|
||||
// case "招商banner图下":
|
||||
// this.footerImg = item.value;
|
||||
// break;
|
||||
// case "招商标题":
|
||||
// this.title = item.value;
|
||||
// break;
|
||||
// }
|
||||
// })
|
||||
// });
|
||||
|
||||
investment().then(({data}) => {
|
||||
this.investmentTitle = data.investmentTitle;
|
||||
this.investmentTopImage = data.investmentTopImage;
|
||||
this.investmentMainImage = data.investmentMainImage;
|
||||
this.investmentBottomImage = data.investmentBottomImage;
|
||||
});
|
||||
|
||||
getAttract().then(({data}) => {
|
||||
this.total = data.total
|
||||
this.businessApplyList = data.businessApplyList
|
||||
if (data.businessApply) {
|
||||
this.businessApply = data.businessApply
|
||||
this.address = {
|
||||
province: data.businessApply.provinceName || "",
|
||||
city: data.businessApply.cityName || "",
|
||||
district: data.businessApply.areaName || "",
|
||||
provinceId: data.businessApply.provinceId,
|
||||
cityId: data.businessApply.cityId,
|
||||
areaId: data.businessApply.areaId
|
||||
};
|
||||
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
inputKey(e, key) {
|
||||
this.businessApply[key] = e.detail.value
|
||||
},
|
||||
|
||||
sumbit() {
|
||||
if (this.address.areaId) {
|
||||
this.businessApply.provinceId = this.address.provinceId
|
||||
this.businessApply.cityId = this.address.cityId
|
||||
this.businessApply.areaId = this.address.areaId
|
||||
this.businessApply.uid = uni.getStorageSync("uid")
|
||||
} else {
|
||||
this.$dialog.error("请选择你的地址")
|
||||
return
|
||||
}
|
||||
// || this.businessApply.idcard.length == 0
|
||||
if (this.businessApply.realName.length == 0 || this.businessApply.phone.length == 0) {
|
||||
this.$dialog.error("请完整填写后再提交申请")
|
||||
return
|
||||
}
|
||||
|
||||
saveAttract(this.businessApply).then(res => {
|
||||
this.$dialog.error(res.msg)
|
||||
}).catch(err => this.$dialog.error(err.msg))
|
||||
},
|
||||
|
||||
result(values) {
|
||||
this.address = {
|
||||
province: values.province.name || "",
|
||||
city: values.city.name || "",
|
||||
district: values.district.name || "",
|
||||
provinceId: values.province.id,
|
||||
cityId: values.city.id,
|
||||
areaId: values.district.id
|
||||
};
|
||||
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`;
|
||||
},
|
||||
|
||||
getCityList: function () {
|
||||
let that = this;
|
||||
getCity()
|
||||
.then(res => {
|
||||
that.district = res.data;
|
||||
that.ready = true;
|
||||
|
||||
if (this.id) {
|
||||
//设置city_id
|
||||
var pIdx = that.getIndex(that.address.province, that.district);
|
||||
if (pIdx > -1) {
|
||||
var citys = that.district[pIdx].c;
|
||||
var cIdx = that.getIndex(that.address.city, citys);
|
||||
if (cIdx > -1) {
|
||||
var city = citys[cIdx];
|
||||
that.address.city_id = city.v;
|
||||
console.log('city_id:' + city.v);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
that.$dialog.error(err.msg);
|
||||
});
|
||||
},
|
||||
|
||||
goList() {
|
||||
uni.navigateTo({
|
||||
url: './projectList'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-v4 {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.body {
|
||||
.h1 {
|
||||
margin-top: 40rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
width: 480rpx;
|
||||
height: 60rpx;
|
||||
margin: 20rpx 0 28rpx;
|
||||
background: rgba(253, 104, 93, .15);
|
||||
border-radius: 32px;
|
||||
font-size: 24rpx;
|
||||
color: #FD685D;
|
||||
|
||||
text {
|
||||
margin: 0 4rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FF005E;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
opacity: 1;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-box {
|
||||
width: 620rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 28rpx 0 64rpx;
|
||||
padding: 36rpx 39rpx;
|
||||
border: 2rpx solid #D6808D;
|
||||
box-shadow: 3px 3px 0 #D6808D;
|
||||
opacity: 1;
|
||||
border-radius: 40rpx;
|
||||
|
||||
.title {
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 8rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 2rpx solid #E2E2E2;
|
||||
border-radius: 12rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 40rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #FF005E;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
// .address {
|
||||
// text {
|
||||
// width: 100%;
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.people-box {
|
||||
width: 628rpx;
|
||||
height: 300rpx;
|
||||
background: rgba(253, 104, 93, 0.05);
|
||||
border-radius: 32rpx;
|
||||
margin-bottom: 58rpx;
|
||||
|
||||
.icon-horn {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 18rpx 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
color: #FF005E;
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
margin: 0 44rpx 4rpx;
|
||||
padding: 14rpx 30rpx;
|
||||
color: #FD685D;
|
||||
font-size: 24rpx;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: rgba(253, 104, 93, 0.2);
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.grid-1 {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
width: 182rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="v4-project">
|
||||
<view class="top-box">
|
||||
<image :src="info.topImage"/>
|
||||
<view class="title tc bold">{{ info.name }}</view>
|
||||
</view>
|
||||
<view class="space"></view>
|
||||
|
||||
<view class="list-box">
|
||||
<view class="title">目录</view>
|
||||
<view class="item flex jc-between ai-center" v-for="(item,index) in info.contents" :key="index"
|
||||
@click="viewFile(item)">
|
||||
<view class="flex ai-center">
|
||||
<text class="index">{{ index + 1 }}</text>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
|
||||
<image class="icon" :src="webUrl+'/20220903145836941399.png'"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {investmentInfo} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
name: "project",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
id: null,
|
||||
info: null
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
investmentInfo(this.id).then(({data}) => this.info = data);
|
||||
},
|
||||
|
||||
viewFile(item) {
|
||||
if (item.suffix === "pdf") {
|
||||
uni.downloadFile({
|
||||
url: item.attachment,
|
||||
success: res => {
|
||||
let filePath = res.tempFilePath;
|
||||
uni.openDocument({
|
||||
filePath
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.previewImage({
|
||||
urls: item.attachmentFiles
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.v4-project {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
|
||||
.top-box {
|
||||
color: #333;
|
||||
font-size: 36rpx;
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
height: 416rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 20rpx;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
padding: 30rpx 32rpx;
|
||||
|
||||
.title {
|
||||
width: 68rpx;
|
||||
height: 48rpx;
|
||||
padding-bottom: 8rpx;
|
||||
border-bottom: 6rpx solid #FD574B;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
color: #FD574B;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 40rpx 0;
|
||||
border-bottom: 2rpx solid #CDCDCD;;
|
||||
|
||||
|
||||
text {
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.index {
|
||||
display: inline-block;
|
||||
width: 68rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="v4-project-list">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="请输入项目名称"/>
|
||||
<view class="btn flex jc-center ai-center" @click="search">
|
||||
<image :src="webUrl+'/20221019150834639123.png'"/>
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item flex jc-between ai-center" v-for="(item,index) in list" :key="index" @click="getDetail(item.id)">
|
||||
<view class="flex ai-center">
|
||||
<image class="cover" :src="item.coverImage"/>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
|
||||
<image class="icon" :src="webUrl+'/20220903145836941399.png'"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {investmentInfo, investmentList} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
name: "projectList",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
page: 1, // 当前页
|
||||
keyword: "", // 搜索词
|
||||
pages: 0, // 总页数
|
||||
list: [],
|
||||
os: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getOS();
|
||||
this.getData();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.pages >= this.page) this.getData();
|
||||
},
|
||||
methods: {
|
||||
getOS() {
|
||||
uni.getSystemInfo({
|
||||
success: result => this.os = result.osName
|
||||
})
|
||||
},
|
||||
|
||||
search() {
|
||||
this.list = [];
|
||||
this.page = 1;
|
||||
this.getData();
|
||||
},
|
||||
|
||||
getData() {
|
||||
investmentList(this.page, this.keyword).then(({data}) => {
|
||||
this.pages = data.pages;
|
||||
this.page++;
|
||||
if (data.records.length > 0) {
|
||||
data.records.map(item => {
|
||||
this.list.push(item);
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getDetail(id) {
|
||||
investmentInfo(id).then(({data}) => {
|
||||
const file = data.contents[0];
|
||||
if (file.suffix === "pdf" && this.os === "android") {
|
||||
this.viewPdf(file.attachmentFiles[0])
|
||||
} else {
|
||||
let path = file.attachmentFiles[0];
|
||||
uni.navigateTo({
|
||||
url: "/pkg_common/views/pdf?path=" + encodeURI(path)
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
viewPdf(url) {
|
||||
uni.downloadFile({
|
||||
url,//可以是后台传过来的路径
|
||||
success: res => {
|
||||
const filePath = res.tempFilePath
|
||||
uni.openDocument({
|
||||
filePath,
|
||||
fileType: "pdf",
|
||||
success: result => {
|
||||
//成功
|
||||
},
|
||||
fail: err => {
|
||||
uni.showModal({
|
||||
title: "openDocument fail",
|
||||
content: JSON.stringify(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.showModal({
|
||||
title: "downloadFile fail",
|
||||
content: JSON.stringify(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.v4-project-list {
|
||||
.search-box {
|
||||
height: 80rpx;
|
||||
margin: 40rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16rpx 0 32rpx;
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 128rpx;
|
||||
height: 54rpx;
|
||||
background: #FD574B;
|
||||
border-radius: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 160rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 40rpx 32rpx;
|
||||
padding: 0 16rpx 0 28rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 8rpx;
|
||||
|
||||
.cover {
|
||||
width: 160rpx;
|
||||
height: 88rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="page-v4 flex flex-wrap">
|
||||
|
||||
<view class="item" v-for="item in 9" :key="item">
|
||||
<view class="img-box">
|
||||
<image class="main-img" :src="webUrl+'/20220214125726718023.png'" mode="scaleToFill"></image>
|
||||
<view class="label flex ai-center">
|
||||
<image class="icon-live" :src="webUrl+'/20220218221956204228.png'" mode="scaleToFill"></image>
|
||||
<text>文化展示</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info flex ai-center">
|
||||
<image class="logo" :src="webUrl+'/20220105121325790975.png'" mode="scaleToFill"></image>
|
||||
<view>
|
||||
<view class="name">香道滇旗舰店</view>
|
||||
<view class="sub">冬季上新买二送一！</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-v4 {
|
||||
padding: 0 32rpx 24rpx;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
width: 332rpx;
|
||||
height: 360rpx;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.icon-live {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 332rpx;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: #fff;
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
line-height: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
line-height: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 8rpx 16rpx 18rpx;
|
||||
}
|
||||
|
||||
.img-box{
|
||||
position: relative;
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
left: 16rpx;
|
||||
padding: 4rpx 14rpx 4rpx 10rpx;
|
||||
border-radius: 20px;
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view class="logs-view">
|
||||
<view class="btn-box">
|
||||
<button type="default" plain size="mini">抽奖日期</button>
|
||||
<button type="default" plain size="mini">抽奖结果</button>
|
||||
</view>
|
||||
|
||||
<view class="list-box">
|
||||
<view class="item flex jc-between ai-center" v-for="item in list">
|
||||
<view class="flex">
|
||||
<text class="date">{{item.drawTime}}</text>
|
||||
<text class="goods one-t">{{item.prizeName}}</text>
|
||||
</view>
|
||||
|
||||
<image class="btn flex-0" :src="webUrl+'/20220611142551342281.png'" @click="goReceive(item.id)"
|
||||
v-if="item.status==1 && item.isHit==1"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getLotteryRecordsMy
|
||||
} from "@/api/luck.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
lotteryId: null,
|
||||
list: [],
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.lotteryId = option.id;
|
||||
},
|
||||
onShow() {
|
||||
this.list = [];
|
||||
this.fetchList();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
fetchList() {
|
||||
getLotteryRecordsMy(this.lotteryId, this.page).then(res => {
|
||||
for (let i = 0; i < res.data.records.length; i++) {
|
||||
this.list.push(res.data.records[i])
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
goReceive(id) {
|
||||
uni.navigateTo({
|
||||
url: "receive?id=" + id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logs-view {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #FFD884 0%, #FF5307 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
margin-top: 54rpx;
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
margin: 0 88rpx;
|
||||
border: none;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(180deg, #ffcd1e 0%, #ff8a18 100%);
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
height: 75vh;
|
||||
margin-top: 20rpx;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
height: 60rpx;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 0 46rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
font-size: 24rpx;
|
||||
|
||||
.date {
|
||||
display: inline-block;
|
||||
width: 350rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.goods {
|
||||
width: 190rpx;
|
||||
color: #FF1200;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 80rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<view class="luck-view">
|
||||
<image class="bg-luck" :src="webUrl+'/20220210153759193846.png'" mode="scaleToFill"></image>
|
||||
<image class="btn-log" :src="webUrl+'/20220210142514268256.png'" mode="scaleToFill" @click="goLogs"></image>
|
||||
<image class="dialog" :src="webUrl+'/20220210142530967881.png'" mode="scaleToFill" v-if="newRecords.length>0">
|
||||
</image>
|
||||
<view class="dialog" v-if="newRecords.length>0">
|
||||
<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000" circular>
|
||||
<swiper-item v-for="item in newRecords" :key="item">
|
||||
<view class="acea-row row-middle">
|
||||
<image class="avatar" :src="item.avatar" mode="scaleToFill"></image>
|
||||
<text>恭喜{{ item.username }}获得{{ item.prizeName }}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 大转盘抽奖 -->
|
||||
<view class="wheel-box" v-show="!isDialog">
|
||||
</view>
|
||||
|
||||
<image class="btn-tip" :src="webUrl+'/20220210142525648150.png'" mode="scaleToFill" v-if="lotteryInfo"></image>
|
||||
<view class="btn-tip acea-row row-center-wrapper" v-if="lotteryInfo">
|
||||
<view>剩余
|
||||
<text>{{ lotteryInfo.lotteryUserInfo.dayLimit }}</text>
|
||||
次抽奖机会
|
||||
</view>
|
||||
<!-- <view>剩余<text>{{parseInt(lotteryInfo.lotteryUserInfo.lotteryPoints/lotteryInfo.singleCost)}}</text>次抽奖机会</view> -->
|
||||
</view>
|
||||
|
||||
<view class="tip-box" v-html="lotteryInfo.description" v-if="lotteryInfo">
|
||||
<!-- <view>1.每天有1次幸运大转盘的抽奖机会</view>
|
||||
<view>2.每次抽奖需要消耗{{lotteryInfo.singleCost}}幸运币。</view>
|
||||
<view>3.抽中商品后可去个人中心页面查看订单详情。</view> -->
|
||||
</view>
|
||||
<image class="btn-role" :src="webUrl+'/20220210142520109834.png'" mode="scaleToFill"></image>
|
||||
|
||||
<cover-view class="result-mark" v-if="isDialog">
|
||||
<cover-view class="result-dialog flex flex-col ai-center">
|
||||
<cover-image class="icon-close" :src="webUrl+'/20220610111928963051.png'" mode="scaleToFill"
|
||||
@click="isDialog=false"/>
|
||||
<cover-view class="title">恭喜您，中奖啦！</cover-view>
|
||||
<cover-image class="cover" :src="result.imgs[0].src" mode="scaleToFill"/>
|
||||
<cover-view class="name">获得的是{{ result.fonts[0].text }}</cover-view>
|
||||
<button class="btn-fetch" type="default" @click="goReceive">去领取</button>
|
||||
<button class="btn-close" type="default" @click="isDialog=false">关闭</button>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {draw, getLotteryInfo, getLotteryRecordsNew} from "@/api/luck.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
blocks: [],
|
||||
buttons: [],
|
||||
prizes: [],
|
||||
defaultConfig: {
|
||||
stopRange: 0.5
|
||||
},
|
||||
lotteryId: null,
|
||||
newRecords: [],
|
||||
lotteryInfo: null,
|
||||
isDialog: false,
|
||||
result: {},
|
||||
lotteryRecordId: null, //抽奖记录ID
|
||||
hitIndex: 0,
|
||||
isWait: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getLuck();
|
||||
this.blocks = [{
|
||||
imgs: [{
|
||||
src: this.webUrl + '/20220210142536583482.png',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}]
|
||||
}]
|
||||
this.buttons = [{
|
||||
radius: '50%',
|
||||
imgs: [{
|
||||
src: this.webUrl + '/20220210142504244580.png',
|
||||
width: '177rpx',
|
||||
top: '-65%'
|
||||
}]
|
||||
}]
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
getLuck() {
|
||||
getLotteryInfo().then(({
|
||||
data
|
||||
}) => {
|
||||
this.lotteryId = data.id;
|
||||
this.lotteryInfo = data;
|
||||
|
||||
// 处理奖品数据
|
||||
let len = this.lotteryInfo.prizeList.length;
|
||||
let temp;
|
||||
for (let i = 0; i < len; i++) {
|
||||
temp = {
|
||||
imgs: [{
|
||||
src: this.lotteryInfo.prizeList[i].image,
|
||||
width: "80rpx",
|
||||
height: "80rpx",
|
||||
top: "85%"
|
||||
}],
|
||||
fonts: [{
|
||||
text: this.lotteryInfo.prizeList[i].name,
|
||||
top: '50%',
|
||||
fontSize: '28rpx'
|
||||
}]
|
||||
}
|
||||
|
||||
this.$set(this.prizes, i, temp)
|
||||
}
|
||||
|
||||
getLotteryRecordsNew(this.lotteryId).then(({
|
||||
data
|
||||
}) => this.newRecords = data);
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转奖品记录
|
||||
goLogs() {
|
||||
this.$yrouter.push('/v4/views/luck/logs?id=' + this.lotteryId);
|
||||
},
|
||||
// 点击抽奖按钮触发回调
|
||||
startCallBack() {
|
||||
let that = this;
|
||||
if (this.isWait) return;
|
||||
this.isWait = true;
|
||||
|
||||
if (this.lotteryId == null) {
|
||||
uni.showToast({
|
||||
title: "无抽奖活动",
|
||||
icon: 'none'
|
||||
})
|
||||
return;
|
||||
}
|
||||
draw(this.lotteryId).then(res => {
|
||||
if (res.success) {
|
||||
that.lotteryRecordId = res.data.id;
|
||||
let surplus = that.lotteryInfo.lotteryUserInfo.dayLimit - 1;
|
||||
if (surplus > -1) {
|
||||
that.$set(that.lotteryInfo.lotteryUserInfo, "dayLimit", surplus)
|
||||
}
|
||||
|
||||
for (let i = 0, len = that.lotteryInfo.prizeList.length; i < len; i++) {
|
||||
if (res.data.prizeId == that.lotteryInfo.prizeList[i].id) {
|
||||
that.hitIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 先开始旋转
|
||||
that.$refs.myLucky.play()
|
||||
that.isHit = res.data.isHit;
|
||||
// 使用定时器来模拟请求接口
|
||||
setTimeout(() => {
|
||||
// 调用stop停止旋转并传递中奖索引
|
||||
if (res.data.prizeId == null) that.hitIndex = -1;
|
||||
that.$refs.myLucky.stop(that.hitIndex)
|
||||
}, 3000)
|
||||
} else {
|
||||
that.isWait = false;
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
that.isWait = false;
|
||||
uni.showToast({
|
||||
title: err.msg,
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
// 抽奖结束触发回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log(prize)
|
||||
this.result = prize;
|
||||
this.isWait = false;
|
||||
|
||||
if (this.lotteryInfo.prizeList[this.hitIndex].name == "谢谢参与") {
|
||||
uni.showToast({
|
||||
title: "别灰心,好运一定会来",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
return
|
||||
}
|
||||
this.isDialog = true;
|
||||
},
|
||||
|
||||
goReceive() {
|
||||
this.isDialog = false;
|
||||
uni.navigateTo({
|
||||
url: "receive?id=" + this.lotteryRecordId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.luck-view {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-luck {
|
||||
width: 750rpx;
|
||||
height: 1523rpx;
|
||||
}
|
||||
|
||||
.btn-log {
|
||||
width: 109rpx;
|
||||
height: 49rpx;
|
||||
position: absolute;
|
||||
top: 18rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: 521rpx;
|
||||
height: 111rpx;
|
||||
position: absolute;
|
||||
top: 240rpx;
|
||||
left: 114.5rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
|
||||
.acea-row {
|
||||
margin-top: 27rpx;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
background: #FFBEBE;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.wheel-box {
|
||||
position: absolute;
|
||||
top: 352rpx;
|
||||
left: 65rpx;
|
||||
}
|
||||
|
||||
.btn-tip {
|
||||
width: 372rpx;
|
||||
height: 61rpx;
|
||||
position: absolute;
|
||||
top: 1014rpx;
|
||||
left: 189rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
width: 670rpx;
|
||||
height: 290rpx;
|
||||
position: absolute;
|
||||
bottom: 90rpx;
|
||||
left: 40rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx 30rpx 30rpx;
|
||||
border: 4rpx solid #E69F42;
|
||||
border-radius: 32rpx;
|
||||
background: #fff;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.btn-role {
|
||||
width: 156rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
bottom: 363rpx;
|
||||
left: 92rpx;
|
||||
}
|
||||
|
||||
.result-mark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(51, 51, 51, 0.39);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-dialog {
|
||||
position: absolute;
|
||||
top: 300rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 458rpx;
|
||||
height: 560rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFF5DB;
|
||||
|
||||
.icon-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 26rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 40rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
vertical-align: middle;
|
||||
margin: 15rpx 0;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-fetch {
|
||||
width: 176rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
margin-top: 28rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #FD685D;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #D6BA70;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view class="receive-view">
|
||||
<view class="item flex ai-center" :class="{'active':selectIndex===index}" v-for="(item,index) in list"
|
||||
@click="tapItem(index)">
|
||||
<image class="select" :src="webUrl+'/20220613104953149068.png'" mode="scaleToFill" v-if="selectIndex===index" />
|
||||
|
||||
<view class="content">
|
||||
<view class="base flex ai-center">
|
||||
<view>{{item.realName}}</view>
|
||||
<view class="phone">{{item.phone}}</view>
|
||||
</view>
|
||||
|
||||
<view class="address more-t">{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
|
||||
</view>
|
||||
|
||||
<image class="default" :src="webUrl+'/20220613104939432841.png'" mode="scaleToFill" v-if="item.isDefault===1" />
|
||||
</view>
|
||||
|
||||
<button class="btn-receive" type="default" @click="receive">确认领取</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAddressList
|
||||
} from "@/api/user";
|
||||
import {
|
||||
takePrize
|
||||
} from "@/api/luck";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
id: null, //领奖记录ID
|
||||
list: [], //收货地址列表
|
||||
selectIndex: 0
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
fetchList() {
|
||||
getAddressList({
|
||||
page: 1,
|
||||
limit: 999
|
||||
}).then(res => {
|
||||
if (res.success) {
|
||||
this.list = res.data;
|
||||
if (this.list.length) {
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
if (this.list[i].isDefault === 1) this.selectIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
tapItem(index) {
|
||||
this.selectIndex = index;
|
||||
},
|
||||
|
||||
receive() {
|
||||
takePrize(this.id, this.list[this.selectIndex].id).then(res => {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: res.data,
|
||||
success: () => {
|
||||
if (res.success) {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: "error",
|
||||
title: err.msg
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.receive-view {
|
||||
padding: 40rpx;
|
||||
|
||||
.active {
|
||||
box-shadow: 0px 6px 12px rgba(191, 189, 197, 0.6);
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 172rpx;
|
||||
margin-bottom: 32rpx;
|
||||
padding: 24rpx 20rpx 28rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.content {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.base {
|
||||
color: #080F1A;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.phone {
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 72rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-receive {
|
||||
position: fixed;
|
||||
bottom: 80rpx;
|
||||
left: 0;
|
||||
width: 686rpx;
|
||||
height: 80rpx;
|
||||
margin: 0 32rpx;
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
|
||||
background: #FF564A;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="first-line flex jc-between ai-center">
|
||||
<view class="date-box flex">
|
||||
<image class="icon-date" :src="webUrl+'/20220214125601027724.png'" mode="scaleToFill"></image>
|
||||
<view class="day"><text>{{date}}</text>DAY</view>
|
||||
<view class="month">{{month}}月</view>
|
||||
</view>
|
||||
<view class="end-time flex">
|
||||
<text>倒计时</text>
|
||||
<count-down :isDay="false" isSecond :dayText="false" :hourText="':'" :minuteText="':'" :secondText="false"
|
||||
:datatime="datatime"></count-down>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list flex flex-wrap" v-if="list.length">
|
||||
<view class="item" v-for="item in list" :key="item" @click="goGoodsConByProductID(item)">
|
||||
<view class="img-box">
|
||||
<image class="main" :src="item.image" mode="scaleToFill"></image>
|
||||
<image class="label" :src="webUrl+'/20220525103739004011.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title one-t">{{item.title}}</view>
|
||||
<view class="price flex ai-center">
|
||||
<!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
|
||||
<text>￥{{item.price}}</text>
|
||||
<text class="del" v-if="item.productPrice">￥{{item.productPrice}}</text>
|
||||
</view>
|
||||
<view class="over-line flex ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill"></image>
|
||||
<text>{{item.sales}}人已购买</text>
|
||||
</view>
|
||||
<!-- <view class="cart-box flex ai-center jc-between">{{item.merName}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="v4-nodata" v-else>
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill" />
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDailyGoodsList
|
||||
} from "@/api/goods";
|
||||
import CountDown from "@/components/CountDown";
|
||||
export default {
|
||||
components: {
|
||||
CountDown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
page: 1,
|
||||
list: [],
|
||||
endReach: false,
|
||||
month: 0, // 每日特价:月
|
||||
date: 0, // 每日特价：日
|
||||
datatime: 0, // 倒计时
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
let today = new Date();
|
||||
this.month = today.getMonth() + 1;
|
||||
this.date = today.getDate();
|
||||
|
||||
today.setHours(23);
|
||||
today.setMinutes(59);
|
||||
today.setSeconds(59);
|
||||
|
||||
this.datatime = today.getTime() / 1000;
|
||||
|
||||
this.fetchList(this.page);
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.endReach) return;
|
||||
this.page++;
|
||||
this.fetchList(this.page);
|
||||
},
|
||||
methods: {
|
||||
goGoodsConByProductID(item) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId,
|
||||
activityId:item.id,
|
||||
from:"day"
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
fetchList(page) {
|
||||
getDailyGoodsList(page, 10).then(({
|
||||
data
|
||||
}) => {
|
||||
if (data.records.length > 0) {
|
||||
data.records.map(item => this.list.push(item));
|
||||
} else {
|
||||
this.endReach = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.first-line {
|
||||
margin: 16rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.end-time {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
color: #FD685D;
|
||||
}
|
||||
|
||||
.date-box {
|
||||
align-items: center;
|
||||
padding: 8rpx;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.icon-date {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
color: #494949;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
color: #FF1200;
|
||||
}
|
||||
}
|
||||
|
||||
.month {
|
||||
height: 32rpx;
|
||||
margin-left: 12rpx;
|
||||
padding-left: 6rpx;
|
||||
border-left: 2rpx solid #DDDDDD;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 24rpx 32rpx 0;
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 332rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.main {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 94rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.label-vip {
|
||||
width: 40rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 8rpx 4rpx 0 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 4rpx 10rpx 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #ED0F0F;
|
||||
|
||||
.del {
|
||||
margin-left: 16rpx;
|
||||
text-decoration: line-through;
|
||||
font-size: 20rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: normal;
|
||||
color: #A5A5A5;
|
||||
}
|
||||
}
|
||||
|
||||
.over-line {
|
||||
margin: 0 12rpx 20rpx;
|
||||
color: #333;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
|
||||
.icon-fire {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
padding: 6rpx 10rpx 12rpx;
|
||||
border-top: 1rpx solid #EFEFEF;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="list flex flex-wrap" v-if="list.length">
|
||||
<view class="item" v-for="item in list" :key="item" @click="goGoodsConByProductID(item)">
|
||||
<view class="img-box">
|
||||
<image class="main" :src="item.image" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title one-t">{{item.title}}</view>
|
||||
<view class="price flex ai-center">
|
||||
<image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image>
|
||||
<text>￥{{item.price}}</text>
|
||||
</view>
|
||||
<view class="over-line flex jc-between ai-center">
|
||||
<text>{{item.stopTime.substring(0,10)}}结束</text>
|
||||
<view>
|
||||
<text>还剩</text>
|
||||
<text class="red">{{item.surplus}}天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart-box flex ai-center jc-between">
|
||||
<view class="flex ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20220214125601027724.png'" mode="scaleToFill"></image>
|
||||
<text>{{item.postTime.substring(0,10)}}发货</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="v4-nodata" v-else>
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill" />
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPreSaleList
|
||||
} from "@/api/goods";
|
||||
import {
|
||||
formatDateTime,
|
||||
diffDay
|
||||
} from "@/utils/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
page: 1,
|
||||
list: [],
|
||||
endReach: false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchList(this.page);
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.endReach) return;
|
||||
this.page++;
|
||||
this.fetchList(this.page);
|
||||
},
|
||||
methods: {
|
||||
goGoodsConByProductID(item) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId,
|
||||
activityId: item.id,
|
||||
from: "pre"
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
fetchList(page) {
|
||||
getPreSaleList(page, 10).then(({
|
||||
data
|
||||
}) => {
|
||||
if (data.records.length > 0) {
|
||||
data.records.map(item => {
|
||||
var now = new Date().getTime();
|
||||
var nowStr = formatDateTime(now, 'yyyy-MM-dd');
|
||||
item.surplus = diffDay(nowStr, item.stopTime.substring(0, 10))
|
||||
this.list.push(item)
|
||||
});
|
||||
} else {
|
||||
this.endReach = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
margin: 24rpx 32rpx 0;
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 332rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.main {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.label-vip {
|
||||
width: 40rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 8rpx 4rpx 0 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 4rpx 10rpx 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #ED0F0F;
|
||||
}
|
||||
|
||||
.over-line {
|
||||
margin: 0 12rpx 8rpx;
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
|
||||
.red {
|
||||
color: #ED0F0F;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
padding: 8rpx 16rpx 14rpx 18rpx;
|
||||
border-top: 1rpx solid #EFEFEF;
|
||||
|
||||
text {
|
||||
margin-left: 2rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
color: #FD685D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<view class="page-seckill">
|
||||
<view class="next-box" v-if="nextList.length>0">
|
||||
<view class="info flex ai-center"><text>下场秒杀时间：</text><text class="red">{{seckillTime[seckillTimeIndex+1].time}}</text></view>
|
||||
<view class="img-box flex">
|
||||
<image :src="item.image" mode="scaleToFill" v-for="item in nextList" :key="item"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="header acea-row">
|
||||
<view>
|
||||
<view class="title">限时秒杀</view>
|
||||
<view class="sub-title">尖货限时抢</view>
|
||||
</view>
|
||||
<view class="count-box">
|
||||
<count-down :isDay="false" isSecond :dayText="false" :hourText="':'" :minuteText="':'" :secondText="false"
|
||||
:datatime="seckillTime[seckillTimeIndex].stop"></count-down>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view class="item" v-for="item in list" :key="item" @click="goGoodsConByProductID(item)">
|
||||
<view class="img-box">
|
||||
<image class="main" :src="item.image" mode="scaleToFill"></image>
|
||||
<!-- <image class="label" :src="webUrl+'/20220525103739004011.png'" mode="scaleToFill"></image> -->
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title more-t">{{item.productName}}</view>
|
||||
<view class="price flex ai-center">
|
||||
<!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
|
||||
<text>￥{{item.price}}</text>
|
||||
<text class="del">￥{{item.otPrice}}</text>
|
||||
</view>
|
||||
<view class="cart-box flex ai-center jc-between">
|
||||
<view class="flex ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20220214125642215597.png'" mode="scaleToFill"></image>
|
||||
<text>{{item.sales}}人已购买</text>
|
||||
</view>
|
||||
<image class="icon-cart" :src="webUrl+'/20220214125543267695.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="header acea-row" v-if="nextList.length>0">
|
||||
<view>
|
||||
<view class="title">下场预告商品</view>
|
||||
<view class="sub-title">下一场{{seckillTime[seckillTimeIndex+1].time}}开始</view>
|
||||
</view>
|
||||
<view class="count-box">
|
||||
<count-down :isDay="false" isSecond :dayText="false" :hourText="':'" :minuteText="':'" :secondText="false"
|
||||
:datatime="seckillTime[seckillTimeIndex+1].start"></count-down>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list flex flex-wrap" v-if="nextList.length>0">
|
||||
<view class="item" v-for="item in nextList" :key="item" @click="goGoodsConByProductID(item)">
|
||||
<view class="img-box">
|
||||
<image class="main" :src="item.image" mode="scaleToFill"></image>
|
||||
<!-- <image class="label" :src="webUrl+'/20220219171325371623.png'" mode="scaleToFill"></image> -->
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title more-t">{{item.productName}}</view>
|
||||
<view class="price flex ai-center">
|
||||
<!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
|
||||
<text>￥{{item.price}}</text>
|
||||
</view>
|
||||
<view class="cart-box flex ai-center jc-between">
|
||||
<view class="flex ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20220214125642215597.png'" mode="scaleToFill"></image>
|
||||
<text>{{item.sales}}人已购买</text>
|
||||
</view>
|
||||
<image class="icon-cart" :src="webUrl+'/20220214125543267695.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getYxStoreSeckillIndex,
|
||||
getYxStoreSeckillPageList
|
||||
} from "@/api/goods";
|
||||
import CountDown from "@/components/CountDown.vue";
|
||||
export default {
|
||||
components: {
|
||||
CountDown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
seckillTime: [],
|
||||
seckillTimeIndex: 0,
|
||||
page: 1,
|
||||
list: [],
|
||||
endReach: false,
|
||||
timeId: null,
|
||||
nextList: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchSession();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.endReach) return;
|
||||
this.page++;
|
||||
this.fetchList(this.page);
|
||||
},
|
||||
methods: {
|
||||
fetchSession() {
|
||||
getYxStoreSeckillIndex().then(({
|
||||
data
|
||||
}) => {
|
||||
this.seckillTime = data.seckillTime;
|
||||
this.seckillTimeIndex = data.seckillTimeIndex;
|
||||
|
||||
this.timeId = this.seckillTime[this.seckillTimeIndex].id
|
||||
this.fetchList(this.page);
|
||||
|
||||
if (this.seckillTime.length > this.seckillTimeIndex) {
|
||||
console.log("test",this.seckillTime[this.seckillTimeIndex + 1].id)
|
||||
getYxStoreSeckillPageList(1, 10, this.seckillTime[this.seckillTimeIndex + 1].id).then(({
|
||||
data
|
||||
}) => {
|
||||
this.nextList = data
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
fetchList(page) {
|
||||
getYxStoreSeckillPageList(page, 10, this.timeId).then(({
|
||||
data
|
||||
}) => {
|
||||
if (data.length > 0) {
|
||||
data.map(item => this.list.push(item));
|
||||
} else {
|
||||
this.endReach = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goGoodsConByProductID(item) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId,
|
||||
activityId:item.id,
|
||||
from:"kill"
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.page-seckill {
|
||||
min-height: 100vh;
|
||||
padding-top: 24rpx;
|
||||
background: #FFEDE0;
|
||||
}
|
||||
|
||||
.next-box {
|
||||
height: 200rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 0 32rpx;
|
||||
padding: 10rpx 0 18rpx;
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.info {
|
||||
padding: 0 18rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
line-height: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.red {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
color: #FD685D;
|
||||
}
|
||||
}
|
||||
|
||||
.img-box {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-left: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
image:first-child {
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img-box::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: 40rpx 32rpx 20rpx;
|
||||
|
||||
.title {
|
||||
margin-right: 28rpx;
|
||||
color: #333;
|
||||
line-height: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
line-height: 32rpx;
|
||||
font-size: 22rpx;
|
||||
color: #A1A1A1;
|
||||
}
|
||||
|
||||
.count-box {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
/deep/ .time {
|
||||
.styleAll {
|
||||
display: inline-block;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0 4rpx;
|
||||
background: #ED0F0F;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.timeTxt {
|
||||
margin: 0 4rpx;
|
||||
color: #8D8D8D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 8rpx;
|
||||
color: #7C7C7C;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 32rpx;
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 332rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.main {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 94rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.label-vip {
|
||||
width: 40rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 8rpx 4rpx 0 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 4rpx 10rpx 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #ED0F0F;
|
||||
|
||||
.del {
|
||||
margin-left: 16rpx;
|
||||
text-decoration: line-through;
|
||||
font-size: 20rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: normal;
|
||||
color: #A5A5A5;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
padding: 10rpx 12rpx 12rpx;
|
||||
border-top: 1rpx solid #EFEFEF;
|
||||
|
||||
text {
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<view class="page-v4">
|
||||
<view class="top-box flex ai-center">
|
||||
<image class="logo" :src="logo" mode="scaleToFill"></image>
|
||||
<view>
|
||||
<view class="main">{{ merchantName }}</view>
|
||||
<view class="sub">共{{ list.length }}件商品</view>
|
||||
</view>
|
||||
|
||||
<image class="btn-service" :src="webUrl+'/20221008161418239500.png'" @click="goRoom"/>
|
||||
</view>
|
||||
|
||||
<view class="nav-box flex jc-between ai-center">
|
||||
<text :class="{active:navIndex===index}" v-for="(item,index) in navList" :key="index"
|
||||
@click="changeNav(index)">{{ item.name }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view class="item" v-for="item in list" :key="item">
|
||||
<view class="img-box" @click="goGoods(item.id)">
|
||||
<image class="main" :src="item.image" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="content" @click="goGoods(item.id)">
|
||||
<view class="base-box">
|
||||
<view class="title more-t">{{ item.storeName }}</view>
|
||||
<view class="price flex ai-center">
|
||||
<!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
|
||||
<text>￥{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart-box flex ai-center jc-between">
|
||||
<view class="flex ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill"></image>
|
||||
<text>{{ item.sales }}人已购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
fetchGoods
|
||||
} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
merId: null,
|
||||
merchantName: "",
|
||||
list: [],
|
||||
orderBy: "sortBySort",
|
||||
logo: "",
|
||||
navIndex: 0,
|
||||
navList: [{
|
||||
key: "sortBySort",
|
||||
name: "综合排序"
|
||||
},
|
||||
{
|
||||
key: "sortBySales",
|
||||
name: "销量最高"
|
||||
},
|
||||
{
|
||||
key: "sortByNew",
|
||||
name: "新品上新"
|
||||
}, {
|
||||
key: "sortByPrice",
|
||||
name: "价格最高"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad: function (option) {
|
||||
this.merId = option.id
|
||||
this.merchantName = option.name
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.merchantName
|
||||
})
|
||||
this.getInfo()
|
||||
},
|
||||
methods: {
|
||||
changeNav(index) {
|
||||
if (this.navIndex === index) return;
|
||||
this.navIndex = index;
|
||||
this.orderBy = this.navList[index].key
|
||||
this.getInfo()
|
||||
},
|
||||
getInfo() {
|
||||
fetchGoods(this.merId, this.orderBy).then(({
|
||||
data
|
||||
}) => {
|
||||
this.list = data;
|
||||
if (this.list.length > 0) this.logo = this.list[0].merLogo;
|
||||
})
|
||||
},
|
||||
goGoods(id) {
|
||||
this.$yrouter.push("/pages/shop/GoodsCon/index?id=" + id)
|
||||
},
|
||||
goRoom(){
|
||||
uni.navigateTo({
|
||||
url: `/pkg_common/views/room?id=${this.merId}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top-box {
|
||||
position: relative;
|
||||
margin: 30rpx 32rpx 24rpx;
|
||||
|
||||
.btn-service {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 0;
|
||||
width: 144rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
height: 60rpx;
|
||||
margin: 0 32rpx 12rpx;
|
||||
padding: 0 32rpx 0 36rpx;
|
||||
background: #fff;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #FD685D;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 32rpx;
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 332rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.main {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.base-box {
|
||||
height: 140rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label-vip {
|
||||
width: 40rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 8rpx 4rpx 0 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 4rpx 10rpx 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #ED0F0F;
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
padding: 8rpx 16rpx 14rpx 18rpx;
|
||||
border-top: 1rpx solid #EFEFEF;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
line-height: 34rpx;
|
||||
color: #8D8D8D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="page-v4">
|
||||
<uni-search-bar placeholder="搜索店铺" @confirm="fetchList" @input="input"></uni-search-bar>
|
||||
|
||||
<view class="item" v-for="item in list" :key="item">
|
||||
<view class="top-box">
|
||||
<view class="flex ai-center">
|
||||
<image class="logo" :src="item.merchant.avatar" mode="scaleToFill"></image><text>{{item.merchant.name}}</text>
|
||||
</view>
|
||||
<view class="right flex ai-center" v-if="item.hasNew==1">
|
||||
<image class="icon" :src="webUrl+'/20220218213627732423.png'" mode="scaleToFill"></image><text>有上新</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="img-box flex">
|
||||
<image class="img-item" :src="img.image" mode="scaleToFill" v-for="img in item.productList" :key="img"
|
||||
@click="goGoods(img.id)"></image>
|
||||
<view class="last-img" @click="goDetail(item.merchant.id,item.merchant.name)" v-if="item.productList.length>0">
|
||||
<image class="img-item" :src="item.productList[0].image" mode="scaleToFill"></image>
|
||||
<image class="img-item img-mask" :src="webUrl+'/20220218220333915755.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
fetchShop
|
||||
} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: "",
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad: function() {
|
||||
this.fetchList()
|
||||
},
|
||||
methods: {
|
||||
fetchList() {
|
||||
fetchShop(this.keyword).then(({
|
||||
data
|
||||
}) => this.list = data)
|
||||
},
|
||||
input(value) {
|
||||
this.keyword = value
|
||||
},
|
||||
goDetail(id,name) {
|
||||
this.$yrouter.push(`/v4/views/shop/detail?id=${id}&name=${name}`)
|
||||
},
|
||||
goGoods(id) {
|
||||
this.$yrouter.push("/pages/shop/GoodsCon/index?id=" + id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-searchbar__box {
|
||||
margin-bottom: 32rpx;
|
||||
border-radius: 44px !important;
|
||||
background: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.img-item {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 0 32rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12rpx 16rpx;
|
||||
border-bottom: 1rpx solid #EFEFEF;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 20rpx;
|
||||
color: #FD685D;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
padding: 12rpx 18rpx 16rpx;
|
||||
|
||||
.img-item {
|
||||
vertical-align: middle;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.last-img {
|
||||
position: relative;
|
||||
|
||||
.img-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="fixed-top">
|
||||
<view class="city-box" @click="goCity">
|
||||
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
|
||||
<text>{{ cityName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list flex flex-wrap" v-if="list.length">
|
||||
<view class="item" v-for="item in list" :key="item" @click="goDetils(item.id)">
|
||||
<view class="img-box">
|
||||
<image class="main" :src="item.image" mode="scaleToFill"></image>
|
||||
<image class="label" :src="webUrl+'/20220525103739004011.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title more-t">{{ item.storeName }}</view>
|
||||
<view class="price flex ai-center">
|
||||
<!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
|
||||
<text>￥{{ item.price }}</text>
|
||||
</view>
|
||||
<view class="cart-box flex ai-center jc-between">
|
||||
<view class="flex ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20220214125642215597.png'" mode="scaleToFill"></image>
|
||||
<text>{{ item.sales }}人已购买</text>
|
||||
</view>
|
||||
<image class="icon-cart" :src="webUrl+'/20220214125543267695.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="v4-nodata" style="margin-top: 120rpx;" v-else>
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
fetchSpecialty
|
||||
} from "@/api/shop";
|
||||
import config from '@/utils/mapConfig';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
page: 1,
|
||||
cityName: "丽江市",
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let memCityName = uni.getStorageSync("cityName")
|
||||
if (memCityName.length) {
|
||||
this.cityName = memCityName;
|
||||
this.page = 1;
|
||||
this.list = [];
|
||||
this.fetchList(this.cityName);
|
||||
uni.removeStorageSync("cityName")
|
||||
}
|
||||
},
|
||||
onReachBottom: function () {
|
||||
this.page++;
|
||||
this.fetchList(this.cityName);
|
||||
},
|
||||
methods: {
|
||||
goCity() {
|
||||
uni.redirectTo({
|
||||
url: `/components/chose-city/chose-city?type=0&city=${this.cityName}`
|
||||
})
|
||||
},
|
||||
goDetils(id) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/GoodsCon/index",
|
||||
query: {
|
||||
id,
|
||||
from: "spe"
|
||||
}
|
||||
})
|
||||
},
|
||||
fetchList(cityName) {
|
||||
fetchSpecialty(this.page, cityName).then(res => {
|
||||
if (res.data.length > 0) {
|
||||
res.data.forEach(item => {
|
||||
this.list.push(item);
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取当前定位地址
|
||||
getCurAddress() {
|
||||
var that = this;
|
||||
//定位
|
||||
uni.showLoading({
|
||||
title: '定位中...'
|
||||
});
|
||||
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function (res) {
|
||||
let latitude = res.latitude;
|
||||
let longitude = res.longitude;
|
||||
|
||||
console.log('latitude:' + latitude + 'longitude:' + longitude)
|
||||
|
||||
// #ifdef H5
|
||||
Vue.jsonp(
|
||||
'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' +
|
||||
config.key, {
|
||||
output: 'jsonp',
|
||||
}).then(json => {
|
||||
// Success.
|
||||
uni.hideLoading();
|
||||
that.cityName = json.result.ad_info.city;
|
||||
//定位成功刷新数据
|
||||
that.fetchList()
|
||||
}).catch(err => {
|
||||
// Failed.
|
||||
console.log('地址解析失败:' + JSON.stringify(err));
|
||||
uni.hideLoading();
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
uni.request({
|
||||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude +
|
||||
'&key=' + config.key,
|
||||
success: function (res) {
|
||||
uni.hideLoading();
|
||||
|
||||
that.cityName = res.data.result.ad_info.city;
|
||||
|
||||
//定位成功刷新数据
|
||||
that.fetchList()
|
||||
},
|
||||
fail: function (res) {
|
||||
console.log('地址解析失败');
|
||||
uni.hideLoading();
|
||||
},
|
||||
complete: function () {
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
fail: function (res) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 22rpx 0 20rpx;
|
||||
background: #F5F5FA;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.city-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 32rpx;
|
||||
padding: 8rpx 18rpx 8rpx 16rpx;
|
||||
border-radius: 30px;
|
||||
background: #fff;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 96rpx 32rpx 0;
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 332rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.main {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 94rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.label-vip {
|
||||
width: 40rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 8rpx 4rpx 0 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 4rpx 10rpx 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #ED0F0F;
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
padding: 10rpx 12rpx 12rpx;
|
||||
border-top: 1rpx solid #EFEFEF;
|
||||
|
||||
text {
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="page-v4">
|
||||
<uni-search-bar class="search" placeholder="搜索店铺" bgColor="#fff" @confirm="search" @input="input"></uni-search-bar>
|
||||
<view class="city-box">
|
||||
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
|
||||
<text>丽江市</text>
|
||||
</view>
|
||||
|
||||
<view class="main-wrap">
|
||||
<view class="list-box">
|
||||
<view class="img-pic">
|
||||
<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2293895315,941305116&fm=15&gp=0.jpg"
|
||||
mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="list-title">
|
||||
草莓
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="img-pic">
|
||||
<image src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
|
||||
mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="list-title">
|
||||
香蕉
|
||||
<view>subtitle</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="img-pic">
|
||||
<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3571319963,2190929172&fm=26&gp=0.jpg"
|
||||
mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="list-title">
|
||||
杨桃
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="img-pic">
|
||||
<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2356795443,149489428&fm=26&gp=0.jpg"
|
||||
mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="list-title">
|
||||
车厘子
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="img-pic">
|
||||
<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=201658450,2328203442&fm=26&gp=0.jpg"
|
||||
mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="list-title">
|
||||
苹果
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="img-pic">
|
||||
<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1572231494,1459024433&fm=26&gp=0.jpg"
|
||||
mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="list-title">
|
||||
橙子
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search {
|
||||
.uni-searchbar {
|
||||
padding: 20rpx 32rpx 12rpx !important;
|
||||
|
||||
.uni-searchbar__box {
|
||||
border-radius: 44px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 32rpx;
|
||||
padding: 8rpx 18rpx 8rpx 16rpx;
|
||||
border-radius: 30px;
|
||||
background: #fff;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrap {
|
||||
column-count: 2;
|
||||
// column-gap: 10rpx;
|
||||
margin: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
// margin: 10rpx;
|
||||
// width: 50%;
|
||||
// width: calc(100% / 2 - 20rpx);
|
||||
width: 332rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// .img-pic {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
.img-pic>image {
|
||||
width: 100%;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
margin: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user