Open source code is the static part of the source code of the client-side uniapp, which provides learning and use
It can be run by importing hbuilder. At present, it is suitable for applets, Android, IOS and H5
Game type, my information, my request, find the great God immediately
Editor, I want to play the game, I want to find, other requirements, mine
Quickly match the game information and find the great God immediately
Select great God, game requirements (game type, gender, game
(area) accompanying avatar, accompanying nickname, times of receiving orders, games
Type, praise, price, label
Home page game classification navigation game classification page
Filter bar
Avatar, name, label, evaluation degree, order receiving times, game category
Limited time special offer, online status, price
Avatar, name, label, evaluation degree. Number of orders received, game
Accompanying list type, online status, price
Accompanying avatar, online status, id, large picture of attention (King's home page, information introduction), title, number of services and amount
Play time, can be connected to the region, can be connected to the segment, play characteristics
User comment, comment avatar, comment nickname, comment content, comment picture.
Details of the attendant discount, remarks of the attendant avatar, attendant nickname, purchase skills (King glory, etc.), how much is the purchase unit price per game (increase or decrease), opening meeting
Order now
Total amount, payable immediately
voice
Game play order message
Search contact
Nickname, status, dialog box: chat content, message time
Information chat interface: play with nickname (online status), attention, game
Type, price, order now, chat dialog bar, send message
system information
User avatar, nickname, id, invitation QR code
Attention, fans, visitors, footprints
Open Monthly, quarterly, annual, exclusive privileges, open now
Order time, order status (completed, cancelled, in progress), accompanying avatar, accompanying nickname, game type, several games, paid in money
Order amount, evaluation, another order
Order status (payment on behalf (order cancellation), order to be received (optional)
Black record (refund), in progress (refundable), completed (comment))
Play avatar, play nickname, contact ta
Order details, black game, order time, order number, cost, total
My game type, amount, refund type, refund amount. Refund original
Refund reason, refund description, submission
Gold coin balance, recharge
Select the gold coin recharge amount
My wallet
Payment method: immediate payment
Help and feedback online customer service release
Source code download address:
<template>
<view class="content">
<view class="padding-lr padding-top-sm bg flex" @click.stop="goSearch">
<view class="flex justify-between margin-right-sm" @tap.stop="getPlace" style="line-height: 68rpx;">
<!-- <u-image src="../../static/images/index/place.png" width="27rpx" height="37rpx"class="margin-top-xs" ></u-image> -->
<view class="localName text-white margin-left-sm">Xi'an City</view>
</view>
<u-search placeholder="Search God" v-model="keyword" shape="square" disabled :show-action="false" :animation="true"
bg-color="#343546"></u-search>
</view>
<scroll-view scroll-x class="bg nav text-white">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
v-for="(item,index) in tabData" :key="index" :data-id="index" @click="">
{{item.title}}
</view>
</view>
</scroll-view>
<view>
<view class="wrap padding-sm">
<u-swiper :list="swiperList"></u-swiper>
</view>
<view class="" style="color: #BFBFCB;">
<u-grid :col="5" :border="false">
<u-grid-item bg-color="#111224" v-for="(item,index) in gridData" @tap="goNav(item)">
<u-image :src="item.image" mode="" width='92' height="92"></u-image>
<view class="grid-text margin-top-sm">{{item.title}}</view>
</u-grid-item>
</u-grid>
</view>
<view class="bg margin-lr-sm padding-sm radius">
<view class="flex justify-between text-white padding-bottom-sm">
<view>Enjoy low price</view>
<view>more<u-image class="margin-left-sm" style="display: inline-block;" width="14upx" height="24upx"
src="../../static/images/index/right.png"></u-image>
</view>
</view>
<view class="flex justify-between">
<view @click="goOrder">
<view class="u-relative">
<u-image width="200upx" height="200upx" :src="src"></u-image>
<view class="u-abso"
style="bottom: 0;left: 0;color: white;background: rgba(0,0,0,.4);padding: 0 5upx;">
<view
style="width: 10upx;height: 10upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
</view>
Online
</view>
</view>
<view class="margin-top-xs text-white text-df">Glory of Kings</view>
<view class="margin-top-xs" style="color: #FF711B;">
<u-image width="20upx" height="20upx" style="display: inline-block;margin-right: 6upx;"
src="../../static/images/index/jinbi.png"></u-image>
3 currency/game
</view>
</view>
<view @click="goOrder">
<view class="u-relative">
<u-image width="200upx" height="200upx" :src="src"></u-image>
<view class="u-abso"
style="bottom: 0;left: 0;color: white;background: rgba(0,0,0,.4);padding: 0 5upx;">
<view
style="width: 10upx;height: 10upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
</view>
Online
</view>
</view>
<view class="margin-top-xs text-white text-df">Glory of Kings</view>
<view class="margin-top-xs" style="color: #FF711B;">
<u-image width="20upx" height="20upx" style="display: inline-block;margin-right: 6upx;"
src="../../static/images/index/jinbi.png"></u-image>
3 currency/game
</view>
</view>
<view @click="goOrder">
<view class="u-relative">
<u-image width="200upx" height="200upx" :src="src"></u-image>
<view class="u-abso"
style="bottom: 0;left: 0;color: white;background: rgba(0,0,0,.4);padding: 0 5upx;">
<view
style="width: 10upx;height: 10upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
</view>
Online
</view>
</view>
<view class="margin-top-xs text-white text-df">Glory of Kings</view>
<view class="margin-top-xs" style="color: #FF711B;">
<u-image width="20upx" height="20upx" style="display: inline-block;margin-right: 6upx;"
src="../../static/images/index/jinbi.png"></u-image>
3 currency/game
</view>
</view>
</view>
</view>
<u-dropdown>
<u-dropdown-item v-model="value1" title="Intelligent optimization" :options="options1"></u-dropdown-item>
<u-dropdown-item v-model="value2" title="Not limited to men and women" :options="options2"></u-dropdown-item>
<u-dropdown-item v-model="value3" title="Price" :options="options3"></u-dropdown-item>
</u-dropdown>
<!-- <view class="margin-lr-sm">
<view class="flex justify-between margin-bottom bg padding-sm" @click="goOrder">
<u-image src="../../static/images/index/image_dijia1.png" width="200upx" height="200upx" mode="">
</u-image>
<view class="flex-sub margin-left text-white flex flex-direction justify-between">
<view class="flex justify-between">
<view>
<view class="margin-right-xs" style="display: inline-block;">
Ming sauce attachment
</view>
<view class="round"
style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">
<u-icon name="woman" color="#FF659A" size="24"></u-icon>
24
</view>
</view>
<view class="radius"
style="color: white;background: #243E6A;padding: 0 8upx;display: inline-block;">
<view
style="width: 10upx;height: 10upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
</view>
Xi'an
</view>
</view>
<view class="flex radius"
style="background: url(../../static/images/index/bg.png)100% no-repeat;line-height: 34upx;">
<u-image src="../../static/images/index/wangzhe.png" width="34upx" height="32upx"></u-image>
<text class="margin-left-xs margin-right-sm">Glory of Kings</text>
<text>Supreme star shine</text>
</view>
<view class="flex" style="color: #3390FF;">
<view class="margin-right">Score 5.0</view>
<view>Service 48 people</view>
</view>
<view><text style="color: #FF6F1B; "> 7 coins < / text > / Bureau < / View >
</view>
</view>
<view class="flex justify-between margin-bottom bg padding-sm" @click="goOrder">
<u-image src="../../static/images/index/image_dijia1.png" width="200upx" height="200upx" mode="">
</u-image>
<view class="flex-sub margin-left text-white flex flex-direction justify-between">
<view class="flex justify-between">
<view>
<view class="margin-right-xs" style="display: inline-block;">
Ming sauce attachment
</view>
<view class="round"
style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">
<u-icon name="woman" color="#FF659A" size="24"></u-icon>
24
</view>
</view>
<view class="radius"
style="color: white;background: #243E6A;padding: 0 8upx;display: inline-block;">
<view
style="width: 10upx;height: 10upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
</view>
Xi'an
</view>
</view>
<view class="flex radius"
style="background: url(../../static/images/index/bg.png)100% no-repeat;line-height: 34upx;">
<u-image src="../../static/images/index/wangzhe.png" width="34upx" height="32upx"></u-image>
<text class="margin-left-xs margin-right-sm">Glory of Kings</text>
<text>Supreme star shine</text>
</view>
<view class="flex" style="color: #3390FF;">
<view class="margin-right">Score 5.0</view>
<view>Service 48 people</view>
</view>
<view><text style="color: #Ff6f1b; "> 7 coins < / text > / Bureau < / View >
</view>
</view>
<view class="flex justify-between margin-bottom bg padding-sm" @click="goOrder">
<u-image src="../../static/images/index/image_dijia1.png" width="200upx" height="200upx" mode="">
</u-image>
<view class="flex-sub margin-left text-white flex flex-direction justify-between">
<view class="flex justify-between">
<view>
<view class="margin-right-xs" style="display: inline-block;">
Ming sauce attachment
</view>
<view class="round"
style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">
<u-icon name="woman" color="#FF659A" size="24"></u-icon>
24
</view>
</view>
<view class="radius"
style="color: white;background: #243E6A;padding: 0 8upx;display: inline-block;">
<view
style="width: 10upx;height: 10upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
</view>
Xi'an
</view>
</view>
<view class="flex radius"
style="background: url(../../static/images/index/bg.png)100% no-repeat;line-height: 34upx;">
<u-image src="../../static/images/index/wangzhe.png" width="34upx" height="32upx"></u-image>
<text class="margin-left-xs margin-right-sm">Glory of Kings</text>
<text>Supreme star shine</text>
</view>
<view class="flex" style="color: #3390FF;">
<view class="margin-right">Score 5.0</view>
<view>Service 48 people</view>
</view>
<view><text style="color: #FF6F1B; "> 7 coins < / text > / Bureau < / View >
</view>
</view>
</view> -->
<view style="height: 650rpx;"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyword: '',
TabCur: 0,
tabData: [{
title: 'recommend'
},
{
title: 'Glory of Kings'
},
{
title: 'Game for Peace'
},
{
title: 'League of Heroes'
},
{
title: 'Cross Fire'
}
],
scrollLeft: 0,
swiperList: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: 'The stars last night, the wind last night, the West Bank of the painting building and the east of Guitang'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: 'The body has no colorful Phoenix wings, and the heart has a touch of communication'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: 'Who reads that the west wind is cool alone, the rustling yellow leaves close the sparse windows, meditate on the past and set the setting sun'
}
],
gridData: [{
image: '../../static/images/index/wangzhe.png',
title: 'Glory of Kings'
},
{
image: '../../static/images/index/chiji.png',
title: 'Game for Peace'
},
{
image: '../../static/images/index/doudizhu.png',
title: 'fight against landlords'
},
{
image: '../../static/images/index/cf.png',
title: 'Cross Fire'
},
{
image: '../../static/images/index/feiche.png',
title: 'QQ Flying car'
},
{
image: '../../static/images/index/diwurenge.png',
title: 'Fifth personality'
},
{
image: '../../static/images/index/yunding.png',
title: 'Yunding chess'
},
{
image: '../../static/images/index/huangye.png',
title: 'Wild fighting'
},
{
image: '../../static/images/index/shouwang.png',
title: 'Watch pioneer'
}
],
src: '../../static/images/index/image_dijia1.png',
value1: 1,
value2: 1,
value3: 1,
options1: [{
label: 'Intelligent sorting',
value: 1,
},
{
label: 'Distance first',
value: 2,
},
{
label: 'Popularity first',
value: 3,
},
{
label: 'Same city',
value: 4,
}
],
options2: [{
label: 'Unlimited gender',
value: 1,
},
{
label: 'Limited to boys',
value: 2,
},
{
label: 'Limited to girls',
value: 3,
}
],
options3: [{
label: 'Price',
value: 1,
},
{
label: 'From high to low',
value: 2,
},
{
label: 'From low to high',
value: 3,
}
]
}
},
onLoad() {
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
},
//Get address and latitude and longitude
getPlace() {
uni.chooseLocation({
success: (res) => {
console.log(res)
// this.address = res.address + res.name
this.address = res.name
this.latitude = res.latitude
this.longitude = res.longitude
}
})
},
// Jump game list
goNav(e) {
uni.navigateTo({
url: '/pages/index/game/gameList?name=' + e.title
})
},
// Jump search
goSearch() {
uni.navigateTo({
url: '/pages/index/search/index'
});
},
// Jump order
goOrder() {
uni.navigateTo({
url: '/pages/index/game/order'
});
},
}
}
</script>
<style>
page {
background-color: #111224;
}
.bg {
background-color: #1E1F31;
}
</style>